sdaia-ui 1.0.1

package/src/components/PieChartPanel/PieChartPanel.tsx

@@ -0,0 +1,889 @@
+'use client';
+
+import { forwardRef, useCallback, useState } 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 { HorizontalTabs } from '../HorizontalTabs';
+import type {
+  PieChartPanelProps,
+  PieChartPanelItem,
+  PieChartPanelTab,
+} from './PieChartPanel.types';
+import {
+  PIE_SERIES_COLORS,
+  PIE_CARD_BASE,
+  PIE_TITLE_CLASS,
+  PIE_NOTE_CLASS,
+  PIE_INDICATOR_NAME_SECONDARY,
+  PIE_INDICATOR_NAME_PRIMARY,
+  PIE_INDICATOR_VALUE_LG,
+  PIE_INDICATOR_VALUE_SM,
+  PIE_SUMMARY_LABEL,
+  PIE_SUMMARY_VALUE,
+  PIE_ICON_BUTTON,
+  PIE_LEGEND_SQUARE,
+  PIE_LEGEND_ITEM,
+  PIE_LEGEND_LABEL,
+  PIE_LABELED_ROW,
+  PIE_LABELED_VALUE,
+  PIE_COMPARISON_LABEL,
+  PIE_DATA_ROW_WRAPPER,
+  PIE_DATA_ROW,
+  PIE_DATA_ROW_LABEL,
+  PIE_DATA_ROW_CHANGE,
+  PIE_DATA_ROW_VALUE,
+  PIE_PROGRESS_CONTAINER,
+  PIE_PROGRESS_FILL,
+  PIE_PROGRESS_TIME,
+  PIE_PROGRESS_TRACK,
+} from './PieChartPanel.variants';
+
+function ProgressBar({
+  progress,
+  currentTime,
+  duration,
+  onProgressChange,
+}: {
+  progress: number;
+  currentTime: string;
+  duration: string;
+  onProgressChange?: (value: number) => void;
+}) {
+  const clamped = Math.min(100, Math.max(0, progress));
+
+  return (
+    <div
+      data-slot="progress"
+      className={PIE_PROGRESS_CONTAINER}
+      role="group"
+      aria-label="Playback progress"
+      dir="ltr"
+    >
+      <div className={PIE_PROGRESS_TRACK} aria-hidden="true" />
+      <div
+        className={PIE_PROGRESS_FILL}
+        style={{ width: `${clamped}%` }}
+        aria-hidden="true"
+      />
+      {/* Transparent range input for accessible scrubbing */}
+      <input
+        type="range"
+        min={0}
+        max={100}
+        step={0.1}
+        value={clamped}
+        onChange={(e) => onProgressChange?.(Number(e.target.value))}
+        aria-label="Playback progress"
+        aria-valuetext={`${currentTime} of ${duration}`}
+        className="absolute inset-0 w-full opacity-0 cursor-pointer"
+      />
+    </div>
+  );
+}
+
+/**
+ * PieChartPanel
+ *
+ * A collection of 10 data-visualisation card layouts, each wrapping a solid
+ * filled pie chart (DonutChart with pie=true, variant="Color Filled") together
+ * with titles, trend badges, legend grids, data tables, and tab bars.
+ *
+ * Traced from Figma node 5886:80844 ("Pie Chart" frame).
+ *
+ * ── Variants ──────────────────────────────────────────────────────────────────
+ *   SummaryView    — horizontal: text block left + small pie (100 px) right
+ *   IndicatorView  — vertical: pie (100 px) top + centred text + trend badge
+ *   HeroView       — vertical: indicator → pie (199 px) → 2-item legend
+ *   BreakdownPanel — title + indicator → pie (180 px) → data rows
+ *   ComparisonView — title + pie (199 px) + legend rows with %
+ *   LegendBlock    — title + [left: indicator + data rows | right: pie (199 px)]
+ *   LabeledView    — title + tabs + [pie (199 px) | 2-col legend]
+ *   AnnotatedView  — title + date + note → radial pie (180 px) + connectors + tabs
+ *   OverviewPanel  — title + note + [pie (180 px) | indicator + legend grid]
+ *   CompactPanel   — title + note + pie (180 px) + scrubber + data rows
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Pass `rtl` to apply `dir="rtl"` on the root. Logical CSS properties
+ *   (`border-s-*`, `ps-*`) and flex row direction flip automatically.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   All `dark:` classes activate via `html.dark`.
+ *
+ * @example
+ * <PieChartPanel variant="SummaryView" />
+ * <PieChartPanel variant="CompactPanel" title="Title" note="A note" series={[...]} />
+ * <PieChartPanel variant="AnnotatedView" dateBadge="26/02/2026" tabs={[...]} rtl />
+ */
+export const PieChartPanel = forwardRef<HTMLDivElement, PieChartPanelProps>(
+  function PieChartPanel(
+    {
+      variant = 'SummaryView',
+      title = 'Title',
+      note = 'This is a note',
+      indicatorName = 'Indicator Name',
+      indicatorValue = '422.61',
+      badgeValue = '12%',
+      badgeDirection = 'up',
+      dateBadge = '26/02/2026',
+      optionsLabel = 'Options',
+      series,
+      tabs,
+      onTabChange,
+      progress: progressProp,
+      defaultProgress = 0,
+      currentTime = '0:00',
+      duration = '0:00',
+      onProgressChange,
+      rtl = false,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    // ── Default series (6 items covering the full data-viz palette) ────────────
+    const defaultSeries: PieChartPanelItem[] = PIE_SERIES_COLORS.map((color, i) => ({
+      label: 'Text',
+      change: '-60%',
+      value: '422.61',
+      percentage: `${[10, 20, 20, 20, 15, 15][i] ?? 20}%`,
+      color,
+    }));
+    const resolvedSeries = series ?? defaultSeries;
+
+    const isProgressControlled = progressProp !== undefined;
+    const [internalProgress, setInternalProgress] = useState(defaultProgress);
+    const currentProgress = isProgressControlled ? progressProp! : internalProgress;
+
+    const handleProgressChange = useCallback(
+      (value: number) => {
+        if (!isProgressControlled) setInternalProgress(value);
+        onProgressChange?.(value);
+      },
+      [isProgressControlled, onProgressChange],
+    );
+
+    /** Converts series items into DonutChart sliceData. */
+    const toSliceData = (items: PieChartPanelItem[]) =>
+      items.map((item, i) => ({
+        value: parseFloat(String(item.percentage ?? '').replace('%', '')) || 1,
+        color: item.color ?? PIE_SERIES_COLORS[i % PIE_SERIES_COLORS.length],
+      }));
+
+    /** Converts tab list into HorizontalTabs items. */
+    const toTabItems = (tabList: PieChartPanelTab[]) =>
+      tabList.map((t, i) => ({ value: String(i), label: t.label }));
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // 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, solid, pill, clock 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>
+    );
+
+    /** Arrow-right icon button — secondary-solid, md, iconOnly. */
+    const ArrowButton = () => (
+      <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>
+        }
+      />
+    );
+
+    /** Three-dot vertical more-menu button — secondary-solid, md, iconOnly. */
+    const MoreMenuButton = () => (
+      <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>
+        }
+      />
+    );
+
+    /** Colored 16×16 legend square. */
+    const LegendSquare = ({ color }: { color: string }) => (
+      <span
+        className={PIE_LEGEND_SQUARE}
+        style={{ width: 16, height: 16, backgroundColor: color }}
+        aria-hidden="true"
+      />
+    );
+
+    /** Simple legend item: square + label (OverviewPanel, HeroView). */
+    const LegendItem = ({ item }: { item: PieChartPanelItem }) => (
+      <div className={PIE_LEGEND_ITEM}>
+        <LegendSquare color={item.color ?? PIE_SERIES_COLORS[0]} />
+        <p className={PIE_LEGEND_LABEL}>{item.label ?? 'Legend'}</p>
+      </div>
+    );
+
+    /**
+     * LabeledView legend row: [square + label] [% value].
+     * Used in the 2-column legend grid of LabeledView.
+     */
+    const LabeledLegendItem = ({ item }: { item: PieChartPanelItem }) => (
+      <div className={PIE_LABELED_ROW}>
+        <div className="flex items-center gap-[8px] shrink-0">
+          <LegendSquare color={item.color ?? PIE_SERIES_COLORS[0]} />
+          <p className={PIE_LEGEND_LABEL}>{item.label ?? 'Text'}</p>
+        </div>
+        <p className={PIE_LABELED_VALUE}>{item.percentage ?? '10%'}</p>
+      </div>
+    );
+
+    /**
+     * Left-border data row: [label flex-1] [change] [value].
+     * Used in CompactPanel, BreakdownPanel, LegendBlock.
+     */
+    const DataRow = ({
+      item,
+      showDividerBefore = false,
+      gapClass = 'gap-spacing-4xl',
+    }: {
+      item: PieChartPanelItem;
+      showDividerBefore?: boolean;
+      /** Tailwind gap class — 4xl (32px) for most, 5xl (40px) for LegendBlock */
+      gapClass?: string;
+    }) => (
+      <>
+        {showDividerBefore && <Divider />}
+        <div
+          className={cn(PIE_DATA_ROW, gapClass)}
+          style={{ borderColor: item.color ?? PIE_SERIES_COLORS[0] }}
+        >
+          <p className={cn(PIE_DATA_ROW_LABEL, 'flex-1 min-w-0')}>{item.label ?? 'Text'}</p>
+          {item.change !== undefined && (
+            <p className={PIE_DATA_ROW_CHANGE}>{item.change}</p>
+          )}
+          <p className={PIE_DATA_ROW_VALUE}>{item.value ?? '422.61'}</p>
+        </div>
+      </>
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // Variant renders
+    // ══════════════════════════════════════════════════════════════════════════
+
+    const renderContent = () => {
+      switch (variant) {
+
+        // ── SummaryView ───────────────────────────────────────────────────────
+        // Layout: [text block flex-1] | [pie 100px]
+        // Figma: 271×132 — horizontal flex, p-spacing-xl, gap-spacing-xl
+        case 'SummaryView':
+          return (
+            <div className="flex items-center gap-spacing-xl p-spacing-xl w-full">
+              <div className="flex flex-col gap-spacing-xs flex-1 min-w-0">
+                <p className={PIE_SUMMARY_LABEL}>{indicatorName}</p>
+                <p className={PIE_SUMMARY_VALUE}>{indicatorValue}</p>
+              </div>
+              <DonutChart
+                pie
+                variant="Color Filled"
+                size={100}
+                helperText=""
+                label=""
+                sliceData={toSliceData(resolvedSeries)}
+              />
+            </div>
+          );
+
+        // ── IndicatorView ─────────────────────────────────────────────────────
+        // Layout: [pie 100px] / [name centered] / [value centered] / [badge]
+        // Figma: 271×252 — flex-col, items-center, p-spacing-xl, gap-spacing-2xl
+        case 'IndicatorView':
+          return (
+            <div className="flex flex-col gap-spacing-2xl items-center p-spacing-xl w-full">
+              <DonutChart
+                pie
+                variant="Color Filled"
+                size={100}
+                helperText=""
+                label=""
+                sliceData={toSliceData(resolvedSeries)}
+              />
+              <div className="flex flex-col gap-spacing-md items-center w-full shrink-0">
+                <p className={cn(PIE_INDICATOR_NAME_PRIMARY, 'text-center')}>{indicatorName}</p>
+                <p className={cn(PIE_INDICATOR_VALUE_SM, 'text-center')}>{indicatorValue}</p>
+                <TrendBadge />
+              </div>
+            </div>
+          );
+
+        // ── HeroView ──────────────────────────────────────────────────────────
+        // Layout: [indicator+badge] / [pie 199px] / [2-col legend]
+        // Figma: 271×365 — flex-col, items-center, p-spacing-xl, gap-spacing-2xl
+        case 'HeroView': {
+          const heroSeries = resolvedSeries.slice(0, 2);
+          return (
+            <div className="flex flex-col gap-spacing-2xl items-center p-spacing-xl w-full">
+              <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+                <p className={PIE_INDICATOR_NAME_PRIMARY}>{indicatorName}</p>
+                <div className="flex items-center gap-spacing-xs">
+                  <p className={PIE_INDICATOR_VALUE_SM}>{indicatorValue}</p>
+                  <TrendBadge />
+                </div>
+              </div>
+              <DonutChart
+                pie
+                variant="Color Filled"
+                size={199}
+                helperText=""
+                label=""
+                sliceData={toSliceData(heroSeries)}
+              />
+              <div className="flex items-center gap-spacing-2xl justify-center w-full shrink-0">
+                {heroSeries.map((item, i) => (
+                  <div key={i} className="flex flex-1 items-center justify-center gap-spacing-md min-w-0">
+                    <LegendSquare color={item.color ?? PIE_SERIES_COLORS[i]} />
+                    <p className={PIE_LEGEND_LABEL}>{item.label ?? 'Legend'}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        }
+
+        // ── BreakdownPanel ────────────────────────────────────────────────────
+        // Layout: [title + arrow] / [indicator+badge] / [pie 180px] / [data rows]
+        // Figma: 271×632 — flex-col, items-center, p-spacing-xl, gap-spacing-xl
+        case 'BreakdownPanel':
+          return (
+            <div className="flex flex-col gap-spacing-xl items-center p-spacing-xl w-full">
+              <div className="flex items-start justify-between w-full shrink-0">
+                <p className={PIE_TITLE_CLASS}>{title}</p>
+                <ArrowButton />
+              </div>
+              <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+                <p className={PIE_INDICATOR_NAME_PRIMARY}>{indicatorName}</p>
+                <div className="flex items-center gap-spacing-xs">
+                  <p className={PIE_INDICATOR_VALUE_SM}>{indicatorValue}</p>
+                  <TrendBadge />
+                </div>
+              </div>
+              <DonutChart
+                pie
+                variant="Color Filled"
+                size={180}
+                helperText=""
+                label=""
+                sliceData={toSliceData(resolvedSeries)}
+              />
+              <div className={PIE_DATA_ROW_WRAPPER}>
+                {resolvedSeries.map((item, i) => (
+                  <DataRow
+                    key={i}
+                    item={{ ...item, color: item.color ?? PIE_SERIES_COLORS[i] }}
+                    showDividerBefore={i > 0}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+
+        // ── ComparisonView ────────────────────────────────────────────────────
+        // Layout: [title + more-menu] / [pie 199px] / [legend rows: square+label+%]
+        // Figma: 271×377 — flex-col, items-center, p-spacing-xl, gap-spacing-2xl
+        case 'ComparisonView': {
+          const compSeries = resolvedSeries.slice(0, 2);
+          return (
+            <div className="flex flex-col gap-spacing-2xl items-center p-spacing-xl w-full">
+              <div className="flex items-start justify-between w-full shrink-0">
+                <p className={PIE_TITLE_CLASS}>{title}</p>
+                <MoreMenuButton />
+              </div>
+              <DonutChart
+                pie
+                variant="Color Filled"
+                size={199}
+                helperText=""
+                label=""
+                sliceData={toSliceData(compSeries)}
+              />
+              <div className="flex flex-col gap-spacing-md items-center justify-center w-full shrink-0">
+                {compSeries.map((item, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-spacing-md justify-center w-full"
+                  >
+                    <LegendSquare color={item.color ?? PIE_SERIES_COLORS[i]} />
+                    <p className={PIE_COMPARISON_LABEL}>{item.label ?? 'Text'}</p>
+                    <p className={PIE_LABELED_VALUE}>{item.percentage ?? '10%'}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        }
+
+        // ── LegendBlock ───────────────────────────────────────────────────────
+        // Layout: [title + more-menu] / [[left: indicator+badge, data rows] | [right: pie 199px]]
+        // Figma: 562×289 — px-spacing-2xl py-spacing-xl, gap-spacing-2xl
+        case 'LegendBlock': {
+          const legendSeries = resolvedSeries.slice(0, 2);
+          return (
+            <div className="flex flex-col gap-spacing-2xl px-spacing-2xl py-spacing-xl w-full">
+              <div className="flex items-start gap-spacing-md w-full shrink-0">
+                <p className={PIE_TITLE_CLASS}>{title}</p>
+                <MoreMenuButton />
+              </div>
+              <div className="flex flex-wrap items-center justify-between gap-spacing-xl w-full">
+                <div className="flex flex-col gap-spacing-2xl items-start min-w-0 flex-1">
+                  <div className="flex flex-col gap-spacing-xs items-start">
+                    <p className={PIE_INDICATOR_NAME_SECONDARY}>{indicatorName}</p>
+                    <div className="flex items-center gap-spacing-md">
+                      <p className={PIE_INDICATOR_VALUE_LG}>{indicatorValue}</p>
+                      <TrendBadge />
+                    </div>
+                  </div>
+                  <div className={PIE_DATA_ROW_WRAPPER}>
+                    {legendSeries.map((item, i) => (
+                      <DataRow
+                        key={i}
+                        item={{ ...item, color: item.color ?? PIE_SERIES_COLORS[i] }}
+                        showDividerBefore={i > 0}
+                        gapClass="gap-spacing-5xl"
+                      />
+                    ))}
+                  </div>
+                </div>
+                <DonutChart
+                  pie
+                  variant="Color Filled"
+                  size={199}
+                  helperText=""
+                  label=""
+                  sliceData={toSliceData(legendSeries)}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        // ── LabeledView ───────────────────────────────────────────────────────
+        // Layout: [title + tabs] / [[pie 199px] | [2-col legend: square+label+%]]
+        // Figma: 562×291 — p-spacing-xl, gap-spacing-2xl
+        case 'LabeledView': {
+          const labeledTabs: PieChartPanelTab[] = 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 w-full">
+              <div className="flex flex-wrap items-center gap-spacing-lg w-full">
+                <p className={PIE_TITLE_CLASS}>{title}</p>
+                <HorizontalTabs
+                  type="shadow"
+                  size="md"
+                  items={toTabItems(labeledTabs)}
+                  defaultValue={toTabItems(labeledTabs)[0]?.value}
+                  onValueChange={(val) => onTabChange?.(Number(val))}
+                  className="w-auto shrink-0"
+                />
+              </div>
+              <div className="flex flex-wrap items-center gap-spacing-3xl w-full">
+                <DonutChart
+                  pie
+                  variant="Color Filled"
+                  size={199}
+                  helperText=""
+                  label=""
+                  sliceData={toSliceData(resolvedSeries)}
+                />
+                <div className="flex flex-1 gap-spacing-xl items-center min-w-0">
+                  <div className="flex flex-1 flex-col gap-spacing-2xl items-center justify-center min-w-0">
+                    {leftSeries.map((item, i) => (
+                      <LabeledLegendItem
+                        key={i}
+                        item={{ ...item, color: item.color ?? PIE_SERIES_COLORS[i] }}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex flex-1 flex-col gap-spacing-2xl items-center justify-center min-w-0">
+                    {rightSeries.map((item, i) => (
+                      <LabeledLegendItem
+                        key={i}
+                        item={{ ...item, color: item.color ?? PIE_SERIES_COLORS[i + 3] }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        }
+
+        // ── AnnotatedView ─────────────────────────────────────────────────────
+        // Layout: [title+dateBadge / note] / [radial pie 180px + connector lines] / [tabs]
+        // Figma: 562×436 — p-spacing-xl, gap-spacing-xl
+        // Geometry identical to DualMetricPanel in DonutChartPanel —
+        //   pie at left=174px, top=45px, center (264,135), pieRadius=82 = getPieRadius(180).
+        case 'AnnotatedView': {
+          const annotTabs: PieChartPanelTab[] = tabs ?? [
+            { label: 'Text' },
+            { label: 'Text' },
+            { label: 'Text' },
+            { label: 'Text' },
+          ];
+
+          // ── Radial geometry (562 × 262 reference frame) ────────────────────
+          const CHART_W   = 562;
+          const CHART_H   = 262;
+          const PIE_SIZE  = 180;
+          const D_LEFT_PCT = (174 / CHART_W) * 100; // 30.96%
+          const D_TOP      = 45;
+          const D_CX       = 174 + PIE_SIZE / 2;    // 264
+          const D_CY       = D_TOP  + PIE_SIZE / 2; // 135
+          // For a Color Filled pie, the outer edge = getPieRadius(180) = 82
+          const PIE_R      = 82;
+
+          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 cursor = 0;
+          const segMids = sixItems.map(it => {
+            const v   = parseFloat(String(it.percentage ?? '').replace('%', '')) || 1;
+            const start = cursor;
+            cursor += (v / totalPct) * 360;
+            return (start + cursor) / 2;
+          });
+
+          // Point on the pie perimeter at a given angle
+          const piePt = (deg: number) => {
+            const rad = (deg - 90) * Math.PI / 180;
+            return { x: D_CX + PIE_R * Math.cos(rad), y: D_CY + PIE_R * Math.sin(rad) };
+          };
+
+          // Label box positions (from Figma Vector measurements)
+          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 rightLineEndYs   = [42, 105, 211]; // connector y at label end (right)
+          const leftLineEndYs    = [43, 128, 214]; // connector y at label end (left)
+
+          // Sort each side by ring-point y to prevent line crossings
+          const withPieY = (indices: number[]) =>
+            indices
+              .map(i => ({ i, ry: piePt(segMids[i]).y }))
+              .sort((a, b) => a.ry - b.ry);
+
+          const rightSorted = withPieY([0, 1, 2]);
+          const leftSorted  = withPieY([3, 4, 5]);
+
+          return (
+            <div className="flex flex-col gap-spacing-xl p-spacing-xl w-full">
+              {/* Title + date badge */}
+              <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+                <div className="flex gap-spacing-lg items-start w-full shrink-0">
+                  <p className={PIE_TITLE_CLASS}>{title}</p>
+                  <DateBadge />
+                </div>
+                <p className={PIE_NOTE_CLASS}>{note}</p>
+              </div>
+
+              {/* Radial wrapper */}
+              <div className="relative w-full shrink-0" style={{ height: CHART_H }}>
+                {/* SVG connector lines */}
+                <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 ?? PIE_SERIES_COLORS[i];
+                    const { x: px, y: py } = piePt(segMids[i]);
+                    return (
+                      <line
+                        key={`rc${i}`}
+                        x1={px.toFixed(1)}
+                        y1={py.toFixed(1)}
+                        x2={RIGHT_END_X}
+                        y2={rightLineEndYs[slot]}
+                        stroke={color}
+                        strokeWidth="1"
+                      />
+                    );
+                  })}
+                  {/* Left connectors */}
+                  {leftSorted.map(({ i }, slot) => {
+                    const color = sixItems[i]?.color ?? PIE_SERIES_COLORS[i];
+                    const { x: px, y: py } = piePt(segMids[i]);
+                    return (
+                      <line
+                        key={`lc${i}`}
+                        x1={px.toFixed(1)}
+                        y1={py.toFixed(1)}
+                        x2={LEFT_END_X}
+                        y2={leftLineEndYs[slot]}
+                        stroke={color}
+                        strokeWidth="1"
+                      />
+                    );
+                  })}
+                </svg>
+
+                {/* Pie chart */}
+                <div className="absolute" style={{ left: `${D_LEFT_PCT}%`, top: D_TOP }}>
+                  <DonutChart
+                    pie
+                    variant="Color Filled"
+                    size={PIE_SIZE}
+                    helperText=""
+                    label=""
+                    sliceData={toSliceData(sixItems)}
+                  />
+                </div>
+
+                {/* Right labels */}
+                {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={PIE_NOTE_CLASS}>{item?.label ?? 'Label'}</p>
+                      <p className={PIE_DATA_ROW_VALUE}>{item?.percentage ?? '20%'}</p>
+                    </div>
+                  );
+                })}
+
+                {/* Left labels */}
+                {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={PIE_NOTE_CLASS}>{item?.label ?? 'Label'}</p>
+                      <p className={PIE_DATA_ROW_VALUE}>{item?.percentage ?? '20%'}</p>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Bottom tabs */}
+              <HorizontalTabs
+                type="shadow"
+                size="md"
+                items={toTabItems(annotTabs)}
+                defaultValue={toTabItems(annotTabs)[0]?.value}
+                onValueChange={(val) => onTabChange?.(Number(val))}
+              />
+            </div>
+          );
+        }
+
+        // ── OverviewPanel ─────────────────────────────────────────────────────
+        // Layout: [title+note+options] / [[pie 180px] | [indicator+badge + legend grid]]
+        // Figma: 562×303 — p-spacing-xl, gap-spacing-2xl
+        case 'OverviewPanel':
+          return (
+            <div className="flex flex-col gap-spacing-2xl p-spacing-xl w-full">
+              {/* Title row + Options dropdown */}
+              <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+                <div className="flex items-start gap-spacing-lg w-full shrink-0">
+                  <p className={PIE_TITLE_CLASS}>{title}</p>
+                  {/* Options dropdown button */}
+                  <button
+                    type="button"
+                    className="flex items-center gap-spacing-xs shrink-0 px-spacing-xl py-spacing-md rounded-[8px] bg-[#f3f4f6] dark:bg-[#374151] h-[40px]"
+                    aria-label={optionsLabel}
+                  >
+                    <span className="text-text-md font-[500] text-[#161616] dark:text-[rgba(229,231,235,1)] whitespace-nowrap">
+                      {optionsLabel}
+                    </span>
+                    <svg
+                      width={20}
+                      height={20}
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      aria-hidden="true"
+                      className="text-[#161616] dark:text-[rgba(229,231,235,1)]"
+                    >
+                      <path
+                        d="M5 7.5l5 5 5-5"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <p className={PIE_NOTE_CLASS}>{note}</p>
+              </div>
+              {/* Pie + indicator + legend */}
+              <div className="flex items-center gap-spacing-3xl w-full shrink-0">
+                <DonutChart
+                  pie
+                  variant="Color Filled"
+                  size={180}
+                  helperText=""
+                  label=""
+                  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={PIE_INDICATOR_NAME_SECONDARY}>{indicatorName}</p>
+                    <div className="flex items-center gap-spacing-md">
+                      <p className={PIE_INDICATOR_VALUE_LG}>{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 ?? PIE_SERIES_COLORS[i] }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+
+        // ── CompactPanel ──────────────────────────────────────────────────────
+        // Layout: [title+note+arrow] / [pie 180px centered] / [scrubber] / [data rows]
+        // Figma: 562×578 — p-spacing-xl, gap-spacing-xl
+        case 'CompactPanel':
+          return (
+            <div className="flex flex-col gap-spacing-xl p-spacing-xl w-full">
+              {/* Title + note + arrow button */}
+              <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
+                <div className="flex gap-spacing-lg items-start w-full shrink-0">
+                  <p className={PIE_TITLE_CLASS}>{title}</p>
+                  <ArrowButton />
+                </div>
+                <p className={PIE_NOTE_CLASS}>{note}</p>
+              </div>
+              {/* Centered pie */}
+              <div className="flex items-center justify-center w-full">
+                <DonutChart
+                  pie
+                  variant="Color Filled"
+                  size={180}
+                  helperText=""
+                  label=""
+                  sliceData={toSliceData(resolvedSeries)}
+                />
+              </div>
+              {/* Playback scrubber */}
+              <div
+                data-slot="compact-scrubber"
+                className="flex flex-col gap-spacing-xs w-full shrink-0"
+                dir="ltr"
+              >
+                <div className="flex items-center justify-between gap-spacing-lg w-full">
+                  <p className={PIE_PROGRESS_TIME}>{currentTime}</p>
+                  <p className={PIE_PROGRESS_TIME}>{duration}</p>
+                </div>
+                <ProgressBar
+                  progress={currentProgress}
+                  currentTime={currentTime}
+                  duration={duration}
+                  onProgressChange={handleProgressChange}
+                />
+              </div>
+              {/* Data rows */}
+              <div className={PIE_DATA_ROW_WRAPPER}>
+                {resolvedSeries.map((item, i) => (
+                  <DataRow
+                    key={i}
+                    item={{ ...item, color: item.color ?? PIE_SERIES_COLORS[i] }}
+                    showDividerBefore={i > 0}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+
+        default:
+          return null;
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(PIE_CARD_BASE, className)}
+        dir={rtl ? 'rtl' : undefined}
+        {...props}
+      >
+        {renderContent()}
+      </div>
+    );
+  },
+);
+
+PieChartPanel.displayName = 'PieChartPanel';