gitscope
/
← marzneshin / dashboard/src/components/charts/pie/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/charts/pie/index.tsx · v0.4.0
Source
1 44d5623 Mardin 2y ago import { FC, useState } from 'react';
2 44d5623 Mardin 2y ago import { Pie } from '@visx/shape';
3 44d5623 Mardin 2y ago import { Group } from '@visx/group';
4 44d5623 Mardin 2y ago import { Text } from '@visx/text';
5 44d5623 Mardin 2y ago
6 44d5623 Mardin 2y ago export type PieChartDataRecord = {
7 44d5623 Mardin 2y ago symbol: string,
8 44d5623 Mardin 2y ago amount: number,
9 44d5623 Mardin 2y ago color: string
10 44d5623 Mardin 2y ago };
11 44d5623 Mardin 2y ago
12 44d5623 Mardin 2y ago export interface PieChartProps {
13 44d5623 Mardin 2y ago data: PieChartDataRecord[];
14 44d5623 Mardin 2y ago width: number;
15 44d5623 Mardin 2y ago height: number;
16 44d5623 Mardin 2y ago total: number;
17 44d5623 Mardin 2y ago label: string;
18 44d5623 Mardin 2y ago }
19 44d5623 Mardin 2y ago
20 44d5623 Mardin 2y ago export const PieChart: FC<PieChartProps> = ({ data, width, height, total, label }) => {
21 44d5623 Mardin 2y ago const half = width / 2;
22 44d5623 Mardin 2y ago const [active, setActive] = useState<PieChartDataRecord | null>(null);
23 44d5623 Mardin 2y ago
24 44d5623 Mardin 2y ago return (
25 44d5623 Mardin 2y ago <svg width={width} height={height}>
26 44d5623 Mardin 2y ago <Group top={half} left={half}>
27 44d5623 Mardin 2y ago <Pie
28 44d5623 Mardin 2y ago data={data}
29 44d5623 Mardin 2y ago pieValue={(data) => data.amount}
30 44d5623 Mardin 2y ago outerRadius={half}
31 44d5623 Mardin 2y ago innerRadius={({ data }) => (active && (active.symbol === data.symbol) ? half - 14 : half - 8)}
32 44d5623 Mardin 2y ago padAngle={0.01}
33 44d5623 Mardin 2y ago >
34 44d5623 Mardin 2y ago {pie => {
35 44d5623 Mardin 2y ago return pie.arcs.map(arc => {
36 44d5623 Mardin 2y ago return (
37 44d5623 Mardin 2y ago <g
38 44d5623 Mardin 2y ago key={arc.data.symbol}
39 44d5623 Mardin 2y ago onMouseEnter={() => setActive(arc.data)}
40 44d5623 Mardin 2y ago onMouseLeave={() => setActive(null)}
41 44d5623 Mardin 2y ago >
42 44d5623 Mardin 2y ago <path d={pie.path(arc) ?? ''} className={arc.data.color}></path>
43 44d5623 Mardin 2y ago </g>
44 44d5623 Mardin 2y ago )
45 44d5623 Mardin 2y ago })
46 44d5623 Mardin 2y ago }}
47 44d5623 Mardin 2y ago </Pie>
48 44d5623 Mardin 2y ago <Text
49 44d5623 Mardin 2y ago textAnchor="middle"
50 44d5623 Mardin 2y ago fontSize={30}
51 44d5623 Mardin 2y ago dy={-10}
52 44d5623 Mardin 2y ago className='fill-primary'
53 44d5623 Mardin 2y ago >
54 44d5623 Mardin 2y ago {active ? active.amount : total}
55 44d5623 Mardin 2y ago </Text>
56 44d5623 Mardin 2y ago <Text
57 44d5623 Mardin 2y ago textAnchor="middle"
58 44d5623 Mardin 2y ago fontSize={15}
59 44d5623 Mardin 2y ago dy={10}
60 44d5623 Mardin 2y ago className='fill-muted-foreground'
61 44d5623 Mardin 2y ago >
62 44d5623 Mardin 2y ago {label}
63 44d5623 Mardin 2y ago </Text>
64 44d5623 Mardin 2y ago </Group>
65 44d5623 Mardin 2y ago </svg>
66 44d5623 Mardin 2y ago );
67 44d5623 Mardin 2y ago };