gitscope
/
← marzneshin / dashboard/src/features/users/widgets/users-stats-widget/legend.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/widgets/users-stats-widget/legend.tsx · v0.3.0
Source
1 e5dcd82 Dawsh 2y ago import { FC } from 'react'
2 e5dcd82 Dawsh 2y ago import { scaleOrdinal } from '@visx/scale';
3 e5dcd82 Dawsh 2y ago import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
4 e5dcd82 Dawsh 2y ago
5 e5dcd82 Dawsh 2y ago const legendGlyphSize = 15;
6 44d5623 Mardin 2y ago
7 e5dcd82 Dawsh 2y ago const ordinalColorScale = scaleOrdinal({
8 e5dcd82 Dawsh 2y ago domain: ["Active", "Online", "Expired", "On Hold", "Limited"],
9 44d5623 Mardin 2y ago range: ['#3b82f6', '#10b981', '#4b5563', '#A855F7', '#ef4444'],
10 e5dcd82 Dawsh 2y ago });
11 e5dcd82 Dawsh 2y ago
12 e5dcd82 Dawsh 2y ago export const UsersStatsLegend: FC = () => {
13 e5dcd82 Dawsh 2y ago return (
14 e5dcd82 Dawsh 2y ago <LegendOrdinal scale={ordinalColorScale}>
15 e5dcd82 Dawsh 2y ago {(labels) => (
16 44d5623 Mardin 2y ago <div className="border border-solid border-[rgba(255, 255, 255, 0.3)] rounded-lg flex flex-row flex-wrap md:flex-col h-full p-3">
17 e5dcd82 Dawsh 2y ago {labels.map((label, i) => (
18 e5dcd82 Dawsh 2y ago <LegendItem
19 e5dcd82 Dawsh 2y ago key={`legend-quantile-${i}`}
20 e5dcd82 Dawsh 2y ago margin="0 5px"
21 e5dcd82 Dawsh 2y ago >
22 e5dcd82 Dawsh 2y ago <svg width={legendGlyphSize} height={legendGlyphSize}>
23 e5dcd82 Dawsh 2y ago <circle
24 e5dcd82 Dawsh 2y ago className="rounded-full"
25 e5dcd82 Dawsh 2y ago fill={label.value}
26 e5dcd82 Dawsh 2y ago r={legendGlyphSize / 2}
27 e5dcd82 Dawsh 2y ago cx={legendGlyphSize / 2}
28 e5dcd82 Dawsh 2y ago cy={legendGlyphSize / 2}
29 e5dcd82 Dawsh 2y ago />
30 e5dcd82 Dawsh 2y ago </svg>
31 e5dcd82 Dawsh 2y ago <LegendLabel align="left" margin="0 0 0 4px">
32 e5dcd82 Dawsh 2y ago {label.text}
33 e5dcd82 Dawsh 2y ago </LegendLabel>
34 e5dcd82 Dawsh 2y ago </LegendItem>
35 e5dcd82 Dawsh 2y ago ))}
36 e5dcd82 Dawsh 2y ago </div>
37 e5dcd82 Dawsh 2y ago )}
38 e5dcd82 Dawsh 2y ago </LegendOrdinal>
39 e5dcd82 Dawsh 2y ago )
40 e5dcd82 Dawsh 2y ago }