sdaia-ui 1.0.1 → 1.0.2

package/src/components/PieChartPanel/PieChartPanel.tsx

@@ -1,889 +0,0 @@
-'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';