Donut Chart

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3import { Pie, PieChart, Cell, Label } from 'recharts'
4import { ChartContainer } from './chart'
5import { ChartEmpty } from './chart'
6import { ChartTooltip, ChartTooltipContent } from './chart'
7import type { ChartConfig } from './chart'
8 
9export interface DonutChartData {
10  name: string
11  value: number
12  fill?: string
13}
14 
15export interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {
16  data: DonutChartData[]
17  config: ChartConfig
18  innerRadius?: string | number
19  outerRadius?: string | number
20  centerContent?: React.ReactNode
21  showLabels?: 'none' | 'inside' | 'outside'
22  variant?: 'default' | 'separated'
23  showTooltip?: boolean
24  animated?: boolean
25  emptyState?: React.ReactNode
26}
27 
28const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
29  (
30    {
31      data,
32      config,
33      innerRadius = '60%',
34      outerRadius = '80%',
35      centerContent,
36      showLabels = 'none',
37      variant = 'default',
38      showTooltip = true,
39      animated = true,
40      emptyState,
41      className,
42      ...props
43    },
44    ref
45  ) => {
46    if (!data || data.length === 0) {
47      return <ChartEmpty ref={ref} message={emptyState} className={className} {...props} />
48    }
49 
50    const paddingAngle = variant === 'separated' ? 4 : 0
51 
52    return (
53      <ChartContainer
54        ref={ref}
55        config={config}
56        className={cn('aspect-square max-h-[300px]', className)}
57        {...props}
58      >
59        <PieChart>
60          {showTooltip && (
61            <ChartTooltip
62              cursor={false}
63              content={<ChartTooltipContent hideLabel />}
64            />
65          )}
66          <Pie
67            data={data}
68            dataKey="value"
69            nameKey="name"
70            cx="50%"
71            cy="50%"
72            innerRadius={innerRadius}
73            outerRadius={outerRadius}
74            paddingAngle={paddingAngle}
75            strokeWidth={3}
76            stroke="hsl(var(--foreground))"
77            isAnimationActive={animated}
78            animationDuration={400}
79            label={
80              showLabels === 'outside'
81                ? ({ name, percent }: { name?: string; percent?: number }) => `${name ?? ''}: ${((percent ?? 0) * 100).toFixed(0)}%`
82                : showLabels === 'inside'
83                ? ({ percent }: { percent?: number }) => `${((percent ?? 0) * 100).toFixed(0)}%`
84                : false
85            }
86            labelLine={showLabels === 'outside'}
87// … truncated