Add DonutChart component with radial labels and empty state handling

Author: Roman Snapko

packages/ui-components/src/stories/charts/donut-chart.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DonutChart } from '@/ui/chart';
+import { ThemeAwareDecorator } from '../../../.storybook/decorators';
+
+/**
+ * A donut chart component built on top of Recharts primitives.
+ * Supports configurable inner/outer radius, tooltip, and legend.
+ */
+const meta: Meta<typeof DonutChart> = {
+  title: 'ui/Charts/DonutChart',
+  component: DonutChart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    className: 'h-[250px] min-w-[300px]',
+    dataKey: 'value',
+    nameKey: 'name',
+    innerRadius: 60,
+    outerRadius: 90,
+    showTooltip: true,
+    showLegend: true,
+  },
+  decorators: [ThemeAwareDecorator],
+} satisfies Meta<typeof DonutChart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const categoryData = [
+  { name: 'compute', value: 400 },
+  { name: 'storage', value: 300 },
+  { name: 'network', value: 200 },
+  { name: 'database', value: 100 },
+];
+
+const categoryConfig = {
+  compute: {
+    label: 'Compute',
+    theme: { light: '#3b82f6', dark: '#60a5fa' },
+  },
+  storage: {
+    label: 'Storage',
+    theme: { light: '#10b981', dark: '#34d399' },
+  },
+  network: {
+    label: 'Network',
+    theme: { light: '#f59e0b', dark: '#fbbf24' },
+  },
+  database: {
+    label: 'Database',
+    theme: { light: '#ef4444', dark: '#f87171' },
+  },
+};
+
+/**
+ * A simple donut chart with a single data series.
+ */
+export const Default: Story = {
+  args: {
+    data: categoryData,
+    config: categoryConfig,
+  },
+};
+
+/**
+ * Donut chart with a larger inner radius, creating a thinner ring.
+ */
+export const ThinRing: Story = {
+  args: {
+    data: categoryData,
+    config: categoryConfig,
+    innerRadius: 75,
+    outerRadius: 90,
+  },
+};
+
+/**
+ * Donut chart with a smaller inner radius, creating a thicker ring.
+ */
+export const ThickRing: Story = {
+  args: {
+    data: categoryData,
+    config: categoryConfig,
+    innerRadius: 40,
+    outerRadius: 90,
+  },
+};
+
+/**
+ * Donut chart with all category values set to zero, showing an empty state.
+ */
+export const EmptyState: Story = {
+  args: {
+    data: [
+      { name: 'compute', value: 0 },
+      { name: 'storage', value: 0 },
+      { name: 'network', value: 0 },
+      { name: 'database', value: 0 },
+    ],
+    config: categoryConfig,
+  },
+};
+
+/**
+ * Donut chart with mixed values — legend labels are hidden for zero-value slices.
+ */
+export const PartialEmpty: Story = {
+  args: {
+    data: [
+      { name: 'compute', value: 400 },
+      { name: 'storage', value: 0 },
+      { name: 'network', value: 200 },
+      { name: 'database', value: 0 },
+    ],
+    config: categoryConfig,
+    className: 'h-[300px] min-w-[400px]',
+  },
+};
+
+/**
+ * Donut chart combining all features: radial legend, custom radii.
+ */
+export const AllFeatures: Story = {
+  args: {
+    data: categoryData,
+    config: categoryConfig,
+    showLegend: true,
+    innerRadius: 60,
+    outerRadius: 90,
+    className: 'h-[300px] min-w-[400px]',
+  },
+};

packages/ui-components/src/ui/chart/donut-chart.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Pie, PieChart as RechartsPieChart } from 'recharts';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './chart';
+
+const RADIAN = Math.PI / 180;
+
+type RadialLabelProps = {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  outerRadius: number;
+  name: string;
+  fill: string;
+  config: ChartConfig;
+  value: number;
+};
+
+function RadialLabel({
+  cx,
+  cy,
+  midAngle,
+  outerRadius,
+  name,
+  fill,
+  config,
+  value,
+}: RadialLabelProps): React.JSX.Element | null {
+  if (!value) {
+    return null;
+  }
+  const GAP = 24;
+  const DOT_RADIUS = 4;
+  const x = cx + (outerRadius + GAP) * Math.cos(-midAngle * RADIAN);
+  const y = cy + (outerRadius + GAP) * Math.sin(-midAngle * RADIAN);
+
+  const label = config[name]?.label ?? name;
+  const isRight = x >= cx;
+
+  return (
+    <g>
+      <circle cx={x} cy={y} r={DOT_RADIUS} fill={fill} />
+      <text
+        x={x + (isRight ? DOT_RADIUS + 4 : -(DOT_RADIUS + 4))}
+        y={y}
+        textAnchor={isRight ? 'start' : 'end'}
+        dominantBaseline="central"
+        className="fill-foreground text-xs"
+        style={{ fontSize: 12 }}
+      >
+        {label as string}
+      </text>
+    </g>
+  );
+}
+
+export type DonutChartProps = {
+  data: { name: string; value: number }[];
+  config: ChartConfig;
+  dataKey?: string;
+  nameKey?: string;
+  innerRadius?: number;
+  outerRadius?: number;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  className?: string;
+};
+
+export function DonutChart({
+  data,
+  config,
+  dataKey = 'value',
+  nameKey = 'name',
+  innerRadius = 60,
+  outerRadius = 90,
+  showTooltip = true,
+  showLegend = true,
+  className,
+}: DonutChartProps): React.JSX.Element {
+  const isEmpty = data.every((entry) => !entry.value);
+  const mappedData = isEmpty
+    ? [{ name: '__empty__', value: 1, fill: 'hsl(var(--muted))' }]
+    : data.map((entry) => ({
+        ...entry,
+        fill: `var(--color-${entry.name})`,
+      }));
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <RechartsPieChart accessibilityLayer>
+        {showTooltip && !isEmpty && (
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent hideLabel />}
+          />
+        )}
+        <Pie
+          data={mappedData}
+          dataKey={dataKey}
+          nameKey={nameKey}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          label={
+            showLegend && !isEmpty
+              ? (props) => (
+                  <RadialLabel
+                    key={props.name}
+                    cx={props.cx}
+                    cy={props.cy}
+                    midAngle={props.midAngle}
+                    outerRadius={props.outerRadius}
+                    name={props.name}
+                    fill={props.fill}
+                    config={config}
+                    value={props.value}
+                  />
+                )
+              : false
+          }
+          labelLine={false}
+        />
+      </RechartsPieChart>
+    </ChartContainer>
+  );
+}

packages/ui-components/src/ui/chart/index.ts

@@ -1,2 +1,3 @@
 export * from './bar-chart';
 export * from './chart';
+export * from './donut-chart';