sdaia-ui 1.0.1

package/src/components/DonutChartPanel/DonutChartPanel.tsx

@@ -0,0 +1,778 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { ChartBadge } from '../ChartBadge';
+import { Divider } from '../Divider';
+import { DonutChart } from '../DonutChart';
+import { Tabs } from '../Tabs';
+import type { DonutChartPanelProps, PanelDataItem, PanelTab } from './DonutChartPanel.types';
+import {
+  SERIES_COLORS,
+  CARD_BASE,
+  TITLE_CLASS,
+  NOTE_CLASS,
+  INDICATOR_NAME_CLASS,
+  INDICATOR_VALUE_CLASS,
+  INDICATOR_VALUE_SM_CLASS,
+  ICON_BUTTON,
+  LEGEND_SQUARE,
+  LEGEND_ITEM,
+  LEGEND_LABEL,
+  LEGEND_WITH_VALUE,
+  LEGEND_VALUE,
+  DATA_ROW_WRAPPER,
+  DATA_ROW,
+  DATA_ROW_LABEL,
+  DATA_ROW_CHANGE,
+  DATA_ROW_VALUE,
+  SPLIT_LABEL,
+  SPLIT_VALUE,
+} from './DonutChartPanel.variants';
+import { HorizontalTabs } from '../HorizontalTabs';
+
+/**
+ * DonutChartPanel
+ *
+ * A collection of 9 data-visualisation card layouts, each wrapping the
+ * DonutChart (ring/donut) base component with titles, legend rows,
+ * data tables, trend badges, and interactive tab bars.
+ *
+ * Traced from Figma node 5886:80843 ("Donut Chart" frame).
+ *
+ * ── Variants ──────────────────────────────────────────────────────────────────
+ *   InlineProgress      — horizontal: text block + small donut
+ *   SplitProgress       — two rows separated by a divider, each with a small donut
+ *   StackedProgress     — title+badge → big donut → legend row
+ *   DetailRingPanel     — big donut → legend with percentages
+ *   MultiSegmentPanel   — left: title/indicator/data rows | right: donut (wide)
+ *   MetricRingPanel     — title+tabs → big donut + 2-col legend (wide)
+ *   LabeledRing         — title+note → big donut → data rows (wide)
+ *   DualMetricPanel     — title+date+note → tabs → donut + legend grid (wide)
+ *   ExtendedMetricPanel — title+date+note → donut+indicator+legends → rows → tabs (wide)
+ *
+ * ── Tabs ──────────────────────────────────────────────────────────────────────
+ *   Tabs maintain internal `activeTab` state. Clicking a tab updates the active
+ *   index. Supply `tabs` prop to control labels; `onTabChange` for side-effects.
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   `dir={rtl ? 'rtl' : undefined}` on the root reverses flex row direction.
+ *   `ps-spacing-md` / `border-s-[3px]` (logical properties) flip automatically.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   All `dark:` classes activate via `html.dark`. Zero extra config.
+ *
+ * @example
+ * <DonutChartPanel variant="InlineProgress" />
+ * <DonutChartPanel variant="LabeledRing" title="Title" note="This is a note" series={[...]} />
+ * <DonutChartPanel variant="MetricRingPanel" tabs={[{label:'Q1'},{label:'Q2'}]} rtl />
+ */
+export const DonutChartPanel = forwardRef<HTMLDivElement, DonutChartPanelProps>(
+  function DonutChartPanel(
+    {
+      variant = 'InlineProgress',
+      title = 'Title',
+      note = 'This is a note',
+      indicatorName = 'Indicator Name',
+      indicatorValue = '422.61',
+      badgeValue = '12%',
+      badgeDirection = 'up',
+      dateBadge = '26/02/2026',
+      donutHelperText = 'Text',
+      donutLabel,
+      donutPercentage = 60,
+      series,
+      splitRows,
+      tabs,
+      onTabChange,
+      rtl = false,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    // ── Default series (6 items covering the full data-viz palette) ────────────
+    const defaultSeries: PanelDataItem[] = SERIES_COLORS.map((color, i) => ({
+      label: 'Text',
+      change: '-60%',
+      value: '422.61',
+      percentage: `${[10, 20, 20, 15, 15, 20][i] ?? 20}%`,
+      color,
+    }));
+    const resolvedSeries = series ?? defaultSeries;
+
+    /**
+     * Converts series items into DonutChart sliceData.
+     * `percentage` strings ("10%", "20%") are parsed to numbers for
+     * proportional sizing; fallback is equal weight (1).
+     */
+    const toSliceData = (items: PanelDataItem[]) =>
+      items.map((item, i) => ({
+        value: parseFloat(String(item.percentage ?? '').replace('%', '')) || 1,
+        color: item.color ?? SERIES_COLORS[i % SERIES_COLORS.length],
+      }));
+
+    // ── Default split rows ────────────────────────────────────────────────────
+    const defaultSplitRows = splitRows ?? [
+      {
+        label: 'Text',
+        value: '422.61',
+        donutLabel: '60%',
+        donutPercentage: 60,
+        seriesType: 1 as const,
+      },
+      {
+        label: 'Text',
+        value: '422.61',
+        donutLabel: '60%',
+        donutPercentage: 60,
+        seriesType: 2 as const,
+      },
+    ];
+
+    // ── Donut label fallback ──────────────────────────────────────────────────
+    const resolvedDonutLabel = donutLabel ?? `${donutPercentage}%`;
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // Shared sub-elements
+    // ══════════════════════════════════════════════════════════════════════════
+
+    /** Positive / negative trend badge — delegates to the shared `ChartBadge`. */
+    const TrendBadge = () => (
+      <ChartBadge
+        type={badgeDirection === 'up' ? 'increase' : 'decrease'}
+        value={badgeValue}
+      />
+    );
+
+    /** Date pill badge — uses the Badge component (neutral, soft, pill, clock trailing icon) */
+    const DateBadge = () => (
+      <Badge
+        color="neutral"
+        variant="solid"
+        size="lg"
+        pill
+        trailingIcon={
+          <svg width={16} height={16} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.2" />
+            <path
+              d="M8 5v3.5l2 1.5"
+              stroke="currentColor"
+              strokeWidth="1.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        }
+      >
+        {dateBadge}
+      </Badge>
+    );
+
+    /** Card title row with optional end slot */
+    const CardHeader = ({ endSlot }: { endSlot?: React.ReactNode }) => (
+      <div className="flex gap-spacing-md items-start w-full shrink-0">
+        <p className={TITLE_CLASS}>{title}</p>
+        {endSlot}
+      </div>
+    );
+
+    /** Title + note block */
+    const TitleNote = ({ endSlot }: { endSlot?: React.ReactNode }) => (
+      <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+        <CardHeader endSlot={endSlot} />
+        <p className={NOTE_CLASS}>{note}</p>
+      </div>
+    );
+
+    /** Colored 16×16 legend square */
+    const LegendSquare = ({ color }: { color: string }) => (
+      <span
+        className={LEGEND_SQUARE}
+        style={{ width: 16, height: 16, backgroundColor: color }}
+        aria-hidden="true"
+      />
+    );
+
+    /** Legend item: square + label */
+    const LegendItem = ({ item }: { item: PanelDataItem }) => (
+      <div className={LEGEND_ITEM}>
+        <LegendSquare color={item.color ?? SERIES_COLORS[0]} />
+        <p className={LEGEND_LABEL}>{item.label ?? 'Legend'}</p>
+      </div>
+    );
+
+    /** Legend item with percentage below (DetailRingPanel) */
+    const LegendDetailItem = ({ item }: { item: PanelDataItem }) => (
+      <div className={LEGEND_WITH_VALUE}>
+        <div className="flex gap-[8px] items-center shrink-0">
+          <LegendSquare color={item.color ?? SERIES_COLORS[0]} />
+          <p className={LEGEND_LABEL}>{item.label ?? 'Legend'}</p>
+        </div>
+        <p className={LEGEND_VALUE}>{item.percentage ?? '60%'}</p>
+      </div>
+    );
+
+    /** Left-border data row: [label] [change] [value] */
+    const DataRow = ({
+      item,
+      showDividerBefore = false,
+    }: {
+      item: PanelDataItem;
+      showDividerBefore?: boolean;
+    }) => (
+      <>
+        {showDividerBefore && <Divider />}
+        <div
+          className={DATA_ROW}
+          style={{ borderColor: item.color ?? SERIES_COLORS[0] }}
+        >
+          <div className="flex flex-1 items-center gap-spacing-4xl min-w-0 text-[#6c737f] dark:text-[#9ca3af]">
+            <p className={DATA_ROW_LABEL}>{item.label ?? 'Text'}</p>
+            <p className={DATA_ROW_CHANGE}>{item.change ?? '-60%'}</p>
+          </div>
+          <p className={DATA_ROW_VALUE}>{item.value ?? '422.61'}</p>
+        </div>
+      </>
+    );
+
+    /** Legend row item: square + label + value (MetricRingPanel) */
+    const LegendRowItem = ({ item }: { item: PanelDataItem }) => (
+      <div className="flex items-center justify-center gap-spacing-md w-full shrink-0">
+        <div className="flex flex-1 items-center gap-[8px] min-w-0 shrink-0">
+          <LegendSquare color={item.color ?? SERIES_COLORS[0]} />
+          <p className={LEGEND_LABEL}>{item.label ?? 'Text'}</p>
+        </div>
+        <p className={DATA_ROW_VALUE}>{item.percentage ?? '10%'}</p>
+      </div>
+    );
+
+    /**
+     * Converts a PanelTab list into the TabItem[] shape expected by the Tabs
+     * component (using the string index as the stable `value`).
+     */
+    const toTabItems = (tabList: PanelTab[]) =>
+      tabList.map((t, i) => ({ value: String(i), label: t.label }));
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // Variant renders
+    // ══════════════════════════════════════════════════════════════════════════
+
+    const renderContent = () => {
+      switch (variant) {
+
+        // ── InlineProgress ────────────────────────────────────────────────────
+        // Layout: [Text block flex-1] | [Donut 100px]
+        case 'InlineProgress':
+          return (
+            <div className="flex items-center gap-spacing-xl p-spacing-xl">
+              <div className="flex flex-col gap-spacing-xs flex-1 min-w-0">
+                <p className={INDICATOR_NAME_CLASS}>Text</p>
+                <p className={INDICATOR_VALUE_CLASS}>{indicatorValue}</p>
+              </div>
+              <DonutChart
+                size={100}
+                helperText=""
+                label={resolvedDonutLabel}
+                percentage={donutPercentage}
+              />
+            </div>
+          );
+
+        // ── SplitProgress ─────────────────────────────────────────────────────
+        // Layout: [row: text + donut] / divider / [row: text + donut]
+        case 'SplitProgress':
+          return (
+            <div className="flex flex-col gap-spacing-xl px-spacing-xl py-spacing-lg">
+              {defaultSplitRows.map((row, i) => (
+                <div key={i}>
+                  {i > 0 && <Divider className="mb-spacing-xl" />}
+                  <div className="flex items-center gap-spacing-3xl">
+                    <div className="flex flex-col gap-spacing-xs flex-1 min-w-0">
+                      <p className={SPLIT_LABEL}>{row.label ?? 'Text'}</p>
+                      <p className={SPLIT_VALUE}>{row.value ?? '422.61'}</p>
+                    </div>
+                    <DonutChart
+                      size={74}
+                      helperText=""
+                      label={row.donutLabel ?? '60%'}
+                      percentage={row.donutPercentage ?? 60}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          );
+
+        // ── StackedProgress ───────────────────────────────────────────────────
+        // Layout: [indicator header] / [donut 199px] / [legend row]
+        case 'StackedProgress':
+          return (
+            <div className="flex flex-col gap-spacing-2xl items-center px-spacing-xl py-spacing-lg">
+              <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+                <p className={INDICATOR_NAME_CLASS}>{indicatorName}</p>
+                <div className="flex items-center gap-spacing-xs">
+                  <p className={INDICATOR_VALUE_SM_CLASS}>{indicatorValue}</p>
+                  <TrendBadge />
+                </div>
+              </div>
+              <DonutChart
+                size={199}
+                helperText={donutHelperText}
+                label={resolvedDonutLabel}
+                pie
+                segmentGap={0}
+                sliceData={toSliceData(resolvedSeries.slice(0, 2))}
+              />
+              <div className="flex items-center gap-spacing-2xl justify-center w-full shrink-0">
+                {resolvedSeries.slice(0, 2).map((item, i) => (
+                  <div key={i} className="flex flex-1 items-center justify-center gap-spacing-md min-w-0">
+                    <LegendSquare color={item.color ?? SERIES_COLORS[i]} />
+                    <p className={LEGEND_LABEL}>{item.label ?? 'Legend'}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+
+        // ── DetailRingPanel ───────────────────────────────────────────────────
+        // Layout: [donut 199px] / [legend with percentages]
+        case 'DetailRingPanel':
+          return (
+            <div className="flex flex-col gap-spacing-2xl items-center px-spacing-xl py-spacing-lg">
+              <DonutChart
+                size={199}
+                helperText={donutHelperText}
+                label={resolvedDonutLabel}
+                pie
+                segmentGap={0}
+                sliceData={toSliceData(resolvedSeries.slice(0, 2))}
+              />
+              <div className="flex items-center gap-spacing-2xl justify-center w-full shrink-0">
+                {resolvedSeries.slice(0, 2).map((item, i) => (
+                  <LegendDetailItem
+                    key={i}
+                    item={{ ...item, color: item.color ?? SERIES_COLORS[i] }}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+
+        // ── MultiSegmentPanel ─────────────────────────────────────────────────
+        // Layout: [left: title+indicator+data rows] | [right: donut 199px]
+        case 'MultiSegmentPanel':
+          return (
+            <div className="flex flex-col gap-spacing-2xl px-spacing-2xl py-spacing-xl">
+              <div className="flex items-start gap-spacing-md w-full shrink-0">
+                <p className={TITLE_CLASS}>{title}</p>
+                <Button
+                  variant="secondary-solid"
+                  size="md"
+                  iconOnly
+                  aria-label="More options"
+                  leadingIcon={
+                    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                      <circle cx="12" cy="5" r="1.5" fill="currentColor" />
+                      <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+                      <circle cx="12" cy="19" r="1.5" fill="currentColor" />
+                    </svg>
+                  }
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-spacing-2xl items-start shrink-0">
+                  <div className="flex flex-col gap-spacing-xs items-start">
+                    <p className={INDICATOR_NAME_CLASS}>{indicatorName}</p>
+                    <div className="flex items-center gap-spacing-md">
+                      <p className={INDICATOR_VALUE_CLASS}>{indicatorValue}</p>
+                      <TrendBadge />
+                    </div>
+                  </div>
+                  <div className={DATA_ROW_WRAPPER}>
+                    {resolvedSeries.slice(0, 2).map((item, i) => (
+                      <DataRow
+                        key={i}
+                        item={{ ...item, color: item.color ?? SERIES_COLORS[i] }}
+                        showDividerBefore={i > 0}
+                      />
+                    ))}
+                  </div>
+                </div>
+                <DonutChart
+                  size={199}
+                  helperText=""
+                  label=""
+                  percentage={donutPercentage}
+                  slices={2}
+                />
+              </div>
+            </div>
+          );
+
+        // ── MetricRingPanel ───────────────────────────────────────────────────
+        // Layout: [title + pill tabs] / [donut 199px | legend 2-col]
+        case 'MetricRingPanel': {
+          const metricTabs: PanelTab[] = tabs ?? [
+            { label: 'Option One' },
+            { label: 'Option Two' },
+          ];
+          const leftSeries = resolvedSeries.slice(0, 3);
+          const rightSeries = resolvedSeries.slice(3, 6);
+          return (
+            <div className="flex flex-col gap-spacing-2xl p-spacing-xl">
+              <div className="flex items-center gap-spacing-lg w-full shrink-0">
+                <p className={TITLE_CLASS}>{title}</p>
+                {/* w-auto overrides the HorizontalTabs w-full so the bar
+                    shrinks to fit its content when placed beside the title */}
+                <HorizontalTabs
+                  type="shadow"
+                  size="md"
+                  items={toTabItems(metricTabs)}
+                  defaultValue={toTabItems(metricTabs)[0]?.value}
+                  onValueChange={(val) => onTabChange?.(Number(val))}
+                  className="w-auto shrink-0"
+                />
+              </div>
+              <div className="flex items-center gap-spacing-3xl w-full shrink-0">
+                <DonutChart
+                  size={199}
+                  helperText={donutHelperText}
+                  label={resolvedDonutLabel}
+                  pie
+                  segmentGap={0}
+                  sliceData={toSliceData(resolvedSeries)}
+                />
+                <div className="flex flex-1 gap-spacing-xl items-start min-w-0">
+                  <div className="flex flex-1 flex-col gap-spacing-2xl items-start justify-center min-w-0">
+                    {leftSeries.map((item, i) => (
+                      <LegendRowItem
+                        key={i}
+                        item={{ ...item, color: item.color ?? SERIES_COLORS[i] }}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex flex-1 flex-col gap-spacing-2xl items-start justify-center min-w-0">
+                    {rightSeries.map((item, i) => (
+                      <LegendRowItem
+                        key={i}
+                        item={{ ...item, color: item.color ?? SERIES_COLORS[i + 3] }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        }
+
+        // ── LabeledRing ───────────────────────────────────────────────────────
+        // Layout: [title + arrow-right btn + note] / [donut 180px] / [data rows]
+        case 'LabeledRing':
+          return (
+            <div className="flex flex-col gap-spacing-xl p-spacing-xl">
+              <TitleNote
+                endSlot={
+                  <Button
+                    variant="secondary-solid"
+                    size="md"
+                    iconOnly
+                    aria-label="Navigate"
+                    leadingIcon={
+                      <svg width={20} height={20} viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                        <path
+                          d="M4.167 10h11.666M10.833 4.167 16.667 10l-5.834 5.833"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    }
+                  />
+                }
+              />
+              <div className="flex items-center justify-center w-full">
+                <DonutChart
+                  size={180}
+                  helperText={donutHelperText}
+                  label={resolvedDonutLabel}
+                  pie
+                  segmentGap={0}
+                  sliceData={toSliceData(resolvedSeries)}
+                />
+              </div>
+              <div className={DATA_ROW_WRAPPER}>
+                {resolvedSeries.map((item, i) => (
+                  <DataRow
+                    key={i}
+                    item={{ ...item, color: item.color ?? SERIES_COLORS[i] }}
+                    showDividerBefore={i > 0}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+
+        // ── DualMetricPanel ───────────────────────────────────────────────────
+        // Layout: [title+date+note] / [shadow tabs] / [radial donut + connector lines + labels]
+        // Figma node 5886:80841 — donut centred at (264,135) in a 562×262 wrapper;
+        // 3 labels on the right (items 0-2) and 3 on the left (items 3-5) connected
+        // by coloured bezier curves tracing from the ring arc to the label.
+        case 'DualMetricPanel': {
+          const dualTabs: PanelTab[] = tabs ?? [
+            { label: 'Text' },
+            { label: 'Text' },
+            { label: 'Text' },
+            { label: 'Text' },
+          ];
+
+          // ── Radial geometry (Figma 562 × 262 reference) ────────────────────
+          const CHART_W = 562;
+          const CHART_H = 262;
+          const D_SIZE  = 180;
+          // Donut position expressed as percentage of container so it scales:
+          // left ≈ 30.96% (174/562), top = 45px fixed, donut center (CX,CY) in SVG coords
+          const D_LEFT_PCT = (174 / CHART_W) * 100; // 30.96%
+          const D_TOP      = 45;
+          const D_CX       = 174 + D_SIZE / 2;       // 264 (SVG viewBox units)
+          const D_CY       = D_TOP  + D_SIZE / 2;    // 135
+          // Lines exit from the OUTER edge of the ring stroke so they start at
+          // the visible perimeter.  sw = round(180 × 16/176) = 16 → half = 8.
+          // ring_center_r (74) + half_stroke (8) = 82.
+          const RING_R     = 82;   // outer edge of ring stroke
+
+          const sixItems = resolvedSeries.slice(0, 6);
+
+          // Segment midpoint angles (0° = 12 o'clock, clockwise)
+          const totalPct = sixItems.reduce(
+            (s, it) => s + (parseFloat(String(it.percentage ?? '').replace('%', '')) || 1), 0,
+          );
+          let cursor2 = 0;
+          const segMids = sixItems.map(it => {
+            const v = parseFloat(String(it.percentage ?? '').replace('%', '')) || 1;
+            const start = cursor2;
+            cursor2 += (v / totalPct) * 360;
+            return (start + cursor2) / 2;
+          });
+
+          // Point on the ring at a given angle
+          const ringPt = (deg: number) => {
+            const rad = (deg - 90) * Math.PI / 180;
+            return { x: D_CX + RING_R * Math.cos(rad), y: D_CY + RING_R * Math.sin(rad) };
+          };
+
+          // Label anchor x/y in SVG coords (measured from Figma vectors)
+          // Right: line end-x aligns with the text right-edge; y from box_top+line_top_in_box
+          //   Vector15 (green):  box top=0,   line top=30 in box → y≈30+12=42 → use midpoint
+          //   Vector16 (yellow): box top=73,  line top=32 → container y=105
+          //   Vector17 (blue):   box top=192, line top=6  → container y=198, h=26 → mid=211
+          // Left: mirrored equivalents
+          //   Vector18 (purple): box top=13,  line top=30 → container y=43
+          //   Vector19 (red):    box top=99,  line top=29 → container y=128
+          //   Vector20 (orange): box top=195, line top=8  → container y=203, h=22 → mid=214
+          const RIGHT_END_X     = 528;
+          const LEFT_END_X      = 30;
+          const rightLabelTopYs = [0,  73, 192];  // CSS top of each right label box
+          const leftLabelTopYs  = [13, 99, 195];  // CSS top of each left label box
+          const LABEL_BOX_H     = 65;
+          // Connector y at the label end — more precise than box_mid
+          const rightLineEndYs  = [42, 105, 211];
+          const leftLineEndYs   = [43, 128, 214];
+
+          // ── Sort to avoid crossing lines ─────────────────────────────────────
+          // Each side's items are sorted by their ring-point y so that the item
+          // whose arc is nearest the top connects to the topmost label, etc.
+          const withRingY = (indices: number[]) =>
+            indices
+              .map(i => ({ i, ry: ringPt(segMids[i]).y }))
+              .sort((a, b) => a.ry - b.ry); // ascending y = top-to-bottom
+
+          const rightSorted = withRingY([0, 1, 2]);
+          const leftSorted  = withRingY([3, 4, 5]);
+
+          return (
+            <div className="flex flex-col gap-spacing-xl p-spacing-xl">
+              <TitleNote endSlot={<DateBadge />} />
+              <HorizontalTabs
+                type="shadow"
+                size="md"
+                items={toTabItems(dualTabs)}
+                defaultValue={toTabItems(dualTabs)[0]?.value}
+                onValueChange={(val) => onTabChange?.(Number(val))}
+              />
+
+              {/* ── Radial chart wrapper ──────────────────────────────── */}
+              <div className="relative w-full shrink-0" style={{ height: CHART_H }}>
+
+                {/* SVG connector lines — straight, coloured, no crossing */}
+                <svg
+                  className="absolute inset-0 pointer-events-none"
+                  viewBox={`0 0 ${CHART_W} ${CHART_H}`}
+                  width="100%"
+                  height={CHART_H}
+                  preserveAspectRatio="none"
+                  aria-hidden="true"
+                >
+                  {/* Right connectors */}
+                  {rightSorted.map(({ i }, slot) => {
+                    const color = sixItems[i]?.color ?? SERIES_COLORS[i];
+                    const { x: rx, y: ry } = ringPt(segMids[i]);
+                    const ly = rightLineEndYs[slot];
+                    return (
+                      <line
+                        key={`rc${i}`}
+                        x1={rx.toFixed(1)} y1={ry.toFixed(1)}
+                        x2={RIGHT_END_X}   y2={ly}
+                        stroke={color}
+                        strokeWidth="1"
+                      />
+                    );
+                  })}
+                  {/* Left connectors */}
+                  {leftSorted.map(({ i }, slot) => {
+                    const color = sixItems[i]?.color ?? SERIES_COLORS[i];
+                    const { x: rx, y: ry } = ringPt(segMids[i]);
+                    const ly = leftLineEndYs[slot];
+                    return (
+                      <line
+                        key={`lc${i}`}
+                        x1={rx.toFixed(1)} y1={ry.toFixed(1)}
+                        x2={LEFT_END_X}    y2={ly}
+                        stroke={color}
+                        strokeWidth="1"
+                      />
+                    );
+                  })}
+                </svg>
+
+                {/* Donut */}
+                <div className="absolute" style={{ left: `${D_LEFT_PCT}%`, top: D_TOP }}>
+                  <DonutChart
+                    size={D_SIZE}
+                    helperText={donutHelperText}
+                    label={resolvedDonutLabel}
+                    pie
+                    segmentGap={0}
+                    sliceData={toSliceData(sixItems)}
+                  />
+                </div>
+
+                {/* Right labels — sorted same way as connectors */}
+                {rightSorted.map(({ i }, slot) => {
+                  const item = sixItems[i];
+                  return (
+                    <div
+                      key={`rl${i}`}
+                      className="absolute flex flex-col items-end"
+                      style={{
+                        right: `${((CHART_W - RIGHT_END_X) / CHART_W) * 100}%`,
+                        top: rightLabelTopYs[slot],
+                        width: '20%',
+                      }}
+                    >
+                      <p className={NOTE_CLASS}>{item?.label ?? 'Label'}</p>
+                      <p className={DATA_ROW_VALUE}>{item?.percentage ?? '20%'}</p>
+                    </div>
+                  );
+                })}
+
+                {/* Left labels — sorted same way as connectors */}
+                {leftSorted.map(({ i }, slot) => {
+                  const item = sixItems[i];
+                  return (
+                    <div
+                      key={`ll${i}`}
+                      className="absolute flex flex-col items-start"
+                      style={{ left: 0, top: leftLabelTopYs[slot], width: '20%' }}
+                    >
+                      <p className={NOTE_CLASS}>{item?.label ?? 'Label'}</p>
+                      <p className={DATA_ROW_VALUE}>{item?.percentage ?? '20%'}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        }
+
+        // ── ExtendedMetricPanel ───────────────────────────────────────────────
+        // Layout: [title+date+note] / [donut+indicator+legends] / [data rows] / [tabs]
+        case 'ExtendedMetricPanel': {
+          const extTabs: PanelTab[] = tabs ?? [
+            { label: 'Text' },
+            { label: 'Text' },
+            { label: 'Text' },
+            { label: 'Text' },
+          ];
+          return (
+            <div className="flex flex-col gap-spacing-2xl p-spacing-xl">
+              <TitleNote endSlot={<DateBadge />} />
+              <div className="flex items-center gap-spacing-3xl w-full shrink-0">
+                <DonutChart
+                  size={180}
+                  helperText={donutHelperText}
+                  label={resolvedDonutLabel}
+                  pie
+                  segmentGap={0}
+                  sliceData={toSliceData(resolvedSeries)}
+                />
+                <div className="flex flex-1 flex-col gap-spacing-xl items-start min-w-0">
+                  <div className="flex flex-col gap-spacing-xs items-start w-full shrink-0">
+                    <p className={INDICATOR_NAME_CLASS}>{indicatorName}</p>
+                    <div className="flex items-center gap-spacing-md">
+                      <p className={INDICATOR_VALUE_CLASS}>{indicatorValue}</p>
+                      <TrendBadge />
+                    </div>
+                  </div>
+                  <div className="flex flex-wrap gap-spacing-xl items-center">
+                    {resolvedSeries.map((item, i) => (
+                      <LegendItem
+                        key={i}
+                        item={{ ...item, color: item.color ?? SERIES_COLORS[i] }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className={DATA_ROW_WRAPPER}>
+                {resolvedSeries.map((item, i) => (
+                  <DataRow
+                    key={i}
+                    item={{ ...item, color: item.color ?? SERIES_COLORS[i] }}
+                    showDividerBefore={i > 0}
+                  />
+                ))}
+              </div>
+              <HorizontalTabs
+                type="shadow"
+                size="md"
+                items={toTabItems(extTabs)}
+                defaultValue={toTabItems(extTabs)[0]?.value}
+                onValueChange={(val) => onTabChange?.(Number(val))}
+              />
+            </div>
+          );
+        }
+
+        default:
+          return null;
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(CARD_BASE, className)}
+        dir={rtl ? 'rtl' : undefined}
+        {...props}
+      >
+        {renderContent()}
+      </div>
+    );
+  },
+);
+
+DonutChartPanel.displayName = 'DonutChartPanel';