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 34 | 4x 6x 6x 14x 6x | import { DonutChart } from '@repo/ui/components/DonutChart';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import type { ChartRequestColoredActivity } from './types';
interface ChartRequestDonutProps {
totalLabel: string;
activities: ChartRequestColoredActivity[];
}
export const ChartRequestDonut = ({ totalLabel, activities }: ChartRequestDonutProps) => {
const styles = useStyles();
return (
<DonutChart
style={styles.chart}
testID="chart-request-ring"
centerLabel={totalLabel}
items={activities.map(activity => ({
category: activity.category,
count: activity.count,
color: activity.color,
}))}
/>
);
};
const useStyles = makeStyles(theme => ({
chart: {
marginTop: -theme.metrics.spacing[2],
marginBottom: theme.metrics.spacing[6],
},
}));
|