chart percentage-circle.tsx

0% Statements 0/8

0% Branches 0/5

0% Functions 0/2

0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box, BoxProps } from '@stacks/ui';
import * as React from 'react';
 
export const blue = (alpha = 1, darker = false) =>
  `rgba(${darker ? '70,55,255' : '85,70,255'},${alpha})`;
 
export const PercentageCircle: React.FC<BoxProps & { percentage: number; size?: number }> = ({
  percentage,
  size = 64,
}) => {
  return (
    <Box>
      <svg width={size} height={size} strokeWidth={2} strokeLinecap="round" viewBox="0 0 36 36">
        <path
          fill="none"
          stroke={blue(0.1)}
          d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
        />
        <path
          fill="none"
          stroke="blue"
          strokeDasharray={`${percentage}, 100`}
          d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
        />
      </svg>
    </Box>
  );
};