sdaia-ui 1.0.1 → 1.0.2

package/src/components/ColumnChart/ColumnChart.tsx

@@ -1,943 +0,0 @@
-'use client';
-
-import { forwardRef, useState } from 'react';
-import { cn } from '../../lib/cn';
-import {
-  ArrowRight01Icon,
-  CalendarIcon,
-  MinusIcon,
-  MoreVerticalIcon,
-} from '../../icons/IconFactory';
-import { ChartBadge } from '../ChartBadge';
-import { Divider } from '../Divider';
-import { GraphBase } from '../GraphBase';
-import { HorizontalTabs } from '../HorizontalTabs';
-import type { ColumnChartDataPoint, ColumnChartMetric, ColumnChartProps } from './ColumnChart.types';
-import {
-  CARD_BASE,
-  DEFAULT_FORECAST_DATA,
-  DEFAULT_FULL_DATA,
-  DEFAULT_FULL_DATA2,
-  DEFAULT_INDEX_DATA,
-  DEFAULT_LEGEND,
-  DEFAULT_MAX_VALUE,
-  DEFAULT_METRICS_INDEX,
-  DEFAULT_METRICS_METRIC_CELL,
-  DEFAULT_METRICS_PROGRESS,
-  DEFAULT_METRICS_SCORE,
-  DEFAULT_METRICS_SCORE_POD,
-  DEFAULT_SPARKLINE_DATA,
-  DEFAULT_TABS,
-  DEFAULT_X_LABELS,
-  DEFAULT_Y_LABELS,
-  GREEN_BAR_CLASS,
-  GRID_LINE,
-  GRID_LINE_BASELINE,
-  LBL_LG,
-  LBL_MD,
-  LBL_SM,
-  LAVENDER_BAR_CLASS,
-  VAL_DISPLAY_SM,
-  VAL_DISPLAY_XS,
-  VAL_TEXT_LG,
-  VAL_TEXT_XL_MEDIUM,
-} from './ColumnChart.variants';
-
-// ─── Internal sub-components ───────────────────────────────────────────────
-
-/** Metric label + value + optional ChartBadge row. */
-function MetricBlock({
-  label,
-  labelClass = LBL_LG,
-  value = '422.61',
-  valueClass = VAL_DISPLAY_XS,
-  badge,
-  dir,
-}: {
-  label?: string;
-  labelClass?: string;
-  value?: string;
-  valueClass?: string;
-  badge?: { type?: 'increase' | 'decrease'; value?: string };
-  dir?: 'ltr' | 'rtl';
-}) {
-  return (
-    <div className="flex flex-col gap-spacing-xs items-start">
-      {label && <p className={labelClass}>{label}</p>}
-      <div className="flex flex-row gap-spacing-md items-center">
-        <p className={valueClass}>{value}</p>
-        {badge?.value && (
-          <ChartBadge type={badge.type ?? 'increase'} value={badge.value} dir={dir} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-/** Neutral pill badge with calendar icon + date text. */
-function DateBadge({ text }: { text: string }) {
-  return (
-    <div className="flex flex-row gap-spacing-sm items-center px-spacing-md py-spacing-xs rounded-radius-9999 bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]">
-      <p className="text-text-sm font-medium text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] whitespace-nowrap">{text}</p>
-      <span className="size-icon-sm shrink-0 text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]">
-        <CalendarIcon />
-      </span>
-    </div>
-  );
-}
-
-/** Shared Y+X axis bar chart for Insight and Score variants. */
-function FullChart({
-  data,
-  data2,
-  maxValue,
-  xLabels,
-  yLabels,
-  barGap,
-  xGap,
-}: {
-  data: ColumnChartDataPoint[];
-  data2?: ColumnChartDataPoint[];
-  maxValue: number;
-  xLabels: string[];
-  yLabels: string[];
-  barGap: string;
-  xGap: string;
-}) {
-  return (
-    <div className="flex flex-col gap-spacing-xs w-full">
-      {/* Y-axis + chart area */}
-      <div className="flex gap-spacing-md h-[280px]">
-        {/* Y-axis labels */}
-        <div className="flex flex-col h-full justify-between pt-spacing-md pb-0 shrink-0">
-          {yLabels.map((lbl, i) => (
-            <div key={i} className="flex h-px items-center justify-end min-w-6">
-              <span className="text-text-xs text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] text-right whitespace-nowrap">
-                {lbl}
-              </span>
-            </div>
-          ))}
-        </div>
-        {/* Chart bars wrapper (relative so gridlines + bars can overlap) */}
-        <div className="relative flex-1 min-h-0">
-          {/* Gridlines (evenly distributed top→bottom); bottom = solid baseline */}
-          <div className="absolute inset-0 pt-spacing-md pb-0 flex flex-col justify-between pointer-events-none">
-            {yLabels.map((_, gridIndex) => (
-              <div
-                // eslint-disable-next-line react/no-array-index-key
-                key={gridIndex}
-                className={gridIndex === yLabels.length - 1 ? GRID_LINE_BASELINE : GRID_LINE}
-                aria-hidden="true"
-              />
-            ))}
-          </div>
-          {/* Bars (absolute, same vertical padding as gridlines) */}
-          <div
-            className={cn(
-              'absolute inset-0 pt-spacing-md pb-0 flex items-end',
-              barGap,
-            )}
-          >
-            {data.map((pt, i) => {
-              const greenPct = Math.min((pt.value / maxValue) * 100, 100);
-              const lavPct = data2
-                ? Math.min(((data2[i]?.value ?? 0) / maxValue) * 100, 100)
-                : 0;
-              return (
-                <div
-                  key={i}
-                  className="flex flex-1 h-full items-end justify-center min-w-0 gap-0"
-                >
-                  {data2 && (
-                    <div
-                      data-slot="bar-series-2"
-                      className={cn(
-                        'flex-1 rounded-tl-radius-2 rounded-tr-radius-2 min-h-px min-w-0',
-                        LAVENDER_BAR_CLASS,
-                      )}
-                      style={{ height: `${lavPct}%` }}
-                    />
-                  )}
-                  <div
-                    data-slot="bar-series-1"
-                    className={cn(
-                      'rounded-tl-radius-2 rounded-tr-radius-2 min-h-px',
-                      data2 ? 'flex-1 min-w-0' : 'w-full',
-                      GREEN_BAR_CLASS,
-                    )}
-                    style={{ height: `${greenPct}%` }}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-      {/* X-axis labels */}
-      <div className={cn('flex items-center ps-8', xGap)}>
-        {xLabels.map((lbl, i) => (
-          <div key={i} className="flex flex-1 items-center justify-center min-w-0">
-            <span className="flex-1 min-w-0 text-text-sm text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] text-center">
-              {lbl}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/** Icon-only action button (neutral ghost). */
-function ActionButton({ onClick }: { onClick?: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="flex items-center justify-center p-spacing-sm rounded-radius-8 bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)] shrink-0"
-      aria-label="View details"
-    >
-      <span className="size-5 text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]">
-        <ArrowRight01Icon />
-      </span>
-    </button>
-  );
-}
-
-// ─── Main component ────────────────────────────────────────────────────────
-
-export const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>(
-  function ColumnChart(
-    {
-      type = 'Insight',
-      dir,
-      title,
-      note,
-      dateBadge,
-      label,
-      value = '422.61',
-      badge,
-      label2,
-      value2 = '422.61',
-      badge2,
-      data,
-      data2,
-      maxValue = DEFAULT_MAX_VALUE,
-      xLabels,
-      yLabels,
-      tabs,
-      defaultTab,
-      onTabChange,
-      legend,
-      metrics,
-      onActionClick,
-      actionLabel,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    // ── Score tab state ───────────────────────────────────────────────────
-    const resolvedTabs = tabs ?? DEFAULT_TABS;
-    const [selectedTab, setSelectedTab] = useState(defaultTab ?? resolvedTabs[0]?.value ?? '');
-    const handleTabChange = (v: string) => {
-      setSelectedTab(v);
-      onTabChange?.(v);
-    };
-
-    // ── Shared full-chart defaults ─────────────────────────────────────────
-    const chartData = data ?? DEFAULT_FULL_DATA;
-    const chartData2 = data2 ?? DEFAULT_FULL_DATA2;
-    const resolvedYLabels = yLabels ?? DEFAULT_Y_LABELS;
-    const resolvedXLabels = xLabels ?? DEFAULT_X_LABELS;
-
-    // ─────────────────────────────────────────────────────────────────────
-    // INSIGHT — full column chart with Y/X axes, title, date badge, note
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'Insight') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="Insight"
-          className={cn(CARD_BASE, 'flex flex-col gap-spacing-2xl w-full', className)}
-          {...rest}
-        >
-          {/* Header */}
-          <div className="flex flex-col gap-spacing-md items-start w-full shrink-0">
-            <div className="flex flex-row gap-spacing-md items-start w-full">
-              <p className={cn(VAL_DISPLAY_SM, 'flex-1 min-w-0')}>
-                {title ?? 'Title'}
-              </p>
-              {(dateBadge ?? '26/02/26 - 01/03/26') && (
-                <DateBadge text={dateBadge ?? '26/02/26 - 01/03/26'} />
-              )}
-            </div>
-            {(note ?? 'This is a note') && (
-              <p className="text-text-md font-normal text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] w-full">
-                {note ?? 'This is a note'}
-              </p>
-            )}
-          </div>
-          {/* Full chart */}
-          <FullChart
-            data={data ?? DEFAULT_FULL_DATA}
-            maxValue={maxValue}
-            xLabels={resolvedXLabels}
-            yLabels={resolvedYLabels}
-            barGap="gap-spacing-5xl"
-            xGap="gap-spacing-5xl"
-          />
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // SCORE — full dual-series chart with tabs, two metrics, legend
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'Score') {
-      const resolvedMetrics = metrics ?? DEFAULT_METRICS_SCORE;
-      const resolvedLegend = legend ?? DEFAULT_LEGEND;
-
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="Score"
-          className={cn(CARD_BASE, 'flex flex-col gap-spacing-2xl w-full', className)}
-          {...rest}
-        >
-          {/* Title + Tabs */}
-          <div className="flex flex-row gap-spacing-md items-center shrink-0 w-full">
-            <p className={cn(VAL_DISPLAY_SM, 'flex-1 min-w-0 overflow-hidden')}>
-              {title ?? 'Title'}
-            </p>
-            <div className="shrink-0">
-              <HorizontalTabs
-                items={resolvedTabs.map((t) => ({ value: t.value, label: t.label }))}
-                type="outline"
-                size="sm"
-                value={selectedTab}
-                onValueChange={handleTabChange}
-              />
-            </div>
-          </div>
-          {/* Two metrics with vertical divider */}
-          <div className="flex flex-row gap-spacing-2xl items-center justify-center shrink-0 w-full">
-            <MetricBlock
-              label={resolvedMetrics[0]?.label ?? 'Metric Name'}
-              value={resolvedMetrics[0]?.value ?? '422.61'}
-              badge={resolvedMetrics[0]?.badge}
-              dir={dir}
-            />
-            <Divider lineType="vertical" thickness="hairline" className="self-stretch" />
-            <MetricBlock
-              label={resolvedMetrics[1]?.label ?? 'Metric Name'}
-              value={resolvedMetrics[1]?.value ?? '422.61'}
-              badge={resolvedMetrics[1]?.badge}
-              dir={dir}
-            />
-          </div>
-          {/* Full dual-series chart */}
-          <FullChart
-            data={chartData}
-            data2={chartData2}
-            maxValue={maxValue}
-            xLabels={resolvedXLabels}
-            yLabels={resolvedYLabels}
-            barGap="gap-spacing-3xl"
-            xGap="gap-spacing-3xl"
-          />
-          {/* Legend */}
-          <div className="flex flex-row gap-spacing-2xl items-center justify-center shrink-0">
-            {resolvedLegend.map((item, i) => (
-              <div key={i} className="flex flex-row gap-spacing-md items-center">
-                <span
-                  className={cn(
-                    'size-4 shrink-0',
-                    item.color === 'lavender'
-                      ? 'text-colors-tertiary-lavendar-400'
-                      : 'text-[rgba(27,131,84,1)] dark:text-[rgba(110,231,160,1)]',
-                  )}
-                >
-                  <MinusIcon />
-                </span>
-                <p className="text-text-md font-normal text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] whitespace-nowrap">
-                  {item.label}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // TREND MATRIX — compact: [label+value] | [GraphBase sparkline]
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'TrendMatrix') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="TrendMatrix"
-          className={cn(
-            CARD_BASE,
-            'flex flex-row gap-spacing-lg items-end w-full',
-            className,
-          )}
-          {...rest}
-        >
-          <div className="flex flex-col gap-spacing-xs flex-1 min-w-0">
-            <p className={LBL_LG}>{label ?? 'Indicator Name'}</p>
-            <p className={VAL_DISPLAY_XS}>{value}</p>
-          </div>
-          <GraphBase
-            chartStyle="Bars"
-            type="Indicator 2"
-            data={data?.map((d) => ({ value: d.value })) ?? undefined}
-            dir={dir}
-          />
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // VALUE PANEL — compact stacked: label+small-value | GraphBase below
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'ValuePanel') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="ValuePanel"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-xs items-start w-full',
-            className,
-          )}
-          {...rest}
-        >
-          <div className="flex flex-row gap-spacing-md items-baseline shrink-0 w-full">
-            <p className={cn(LBL_LG, 'flex-1 min-w-0')}>{label ?? 'Indicator Name'}</p>
-            <p className="text-text-md font-bold text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] whitespace-nowrap">
-              {value}
-            </p>
-          </div>
-          <div className="flex-1 w-full">
-            <GraphBase
-              chartStyle="Bars"
-              type="Indicator 2"
-              data={data?.map((d) => ({ value: d.value })) ?? undefined}
-              dir={dir}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // INSIGHT GRID — wide: two side-by-side sparkline panels
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'InsightGrid') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="InsightGrid"
-          className={cn(
-            CARD_BASE,
-            'flex flex-row gap-spacing-4xl items-center w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Indicator 2 (lavender) */}
-          <div className="flex flex-row gap-spacing-md items-center flex-1 min-w-0">
-            <div className="flex flex-col gap-spacing-xs min-w-0">
-              <p className={LBL_LG}>{label ?? 'Indicator Name'}</p>
-              <p className={VAL_DISPLAY_XS}>{value}</p>
-            </div>
-            <GraphBase
-              chartStyle="Bars"
-              type="Indicator 2"
-              data={data?.map((d) => ({ value: d.value })) ?? undefined}
-              dir={dir}
-            />
-          </div>
-          {/* Indicator 1 (green) */}
-          <div className="flex flex-row gap-spacing-md items-center flex-1 min-w-0">
-            <div className="flex flex-col gap-spacing-xs min-w-0">
-              <p className={LBL_LG}>{label2 ?? 'Indicator Name'}</p>
-              <p className={VAL_DISPLAY_XS}>{value2}</p>
-            </div>
-            <GraphBase
-              chartStyle="Bars"
-              type="Indicator 1"
-              data={data2?.map((d) => ({ value: d.value })) ?? undefined}
-              dir={dir}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // GAUGE CHART — medium: label + value+badge | GraphBase Bars
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'GaugeChart') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="GaugeChart"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-lg w-full',
-            className,
-          )}
-          {...rest}
-        >
-          <MetricBlock
-            label={label ?? 'Indicator Name'}
-            value={value}
-            badge={badge ?? { type: 'increase', value: '12%' }}
-            dir={dir}
-          />
-          <GraphBase
-            chartStyle="Bars"
-            type="Indicator 1"
-            data={data?.map((d) => ({ value: d.value })) ?? undefined}
-            dir={dir}
-          />
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // PULSE BOX — medium: label+icon row + value+badge | GraphBase Bars
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'PulseBox') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="PulseBox"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-lg w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Label row with more-vertical icon */}
-          <div className="flex flex-col gap-spacing-xs">
-            <div className="flex flex-row items-center justify-between shrink-0">
-              <p className={LBL_LG}>{label ?? 'Indicator Name'}</p>
-              <span className="size-5 text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] shrink-0">
-                <MoreVerticalIcon />
-              </span>
-            </div>
-            <div className="flex flex-row gap-spacing-md items-center">
-              <p className={VAL_DISPLAY_XS}>{value}</p>
-              {(badge?.value ?? '12%') && (
-                <ChartBadge
-                  type={badge?.type ?? 'increase'}
-                  value={badge?.value ?? '12%'}
-                  dir={dir}
-                />
-              )}
-            </div>
-          </div>
-          <GraphBase
-            chartStyle="Bars"
-            type="Indicator 1"
-            data={data?.map((d) => ({ value: d.value })) ?? undefined}
-            dir={dir}
-          />
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // METRIC CELL — wide: two metrics (colored borders) + BarCombined
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'MetricCell') {
-      const resolvedMetrics = metrics ?? DEFAULT_METRICS_METRIC_CELL;
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="MetricCell"
-          className={cn(
-            CARD_BASE,
-            'flex flex-row gap-spacing-8xl items-end w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Two stacked metrics */}
-          <div className="flex flex-col gap-spacing-md shrink-0">
-            {resolvedMetrics.slice(0, 2).map((m, i) => (
-              <div
-                key={i}
-                className={cn(
-                  'flex flex-col ps-spacing-md border-s-2',
-                  m.color === 'lavender'
-                    ? 'border-colors-tertiary-lavendar-400'
-                    : 'border-colors-primary-sa-flag-600-primary',
-                )}
-              >
-                <p className={LBL_SM}>{m.label}</p>
-                <p className={VAL_TEXT_LG}>{m.value}</p>
-              </div>
-            ))}
-          </div>
-          {/* Bar combined sparkline */}
-          <GraphBase
-            chartStyle="Bar - Combined"
-            type="Combined"
-            dir={dir}
-          />
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // DATA CLUSTER — tall: title+dateBadge | metric+badge | BarsWithText
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'DataCluster') {
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="DataCluster"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-lg justify-end w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Title row + date badge */}
-          <div className="flex flex-row items-center justify-between shrink-0 w-full">
-            <p className={VAL_DISPLAY_SM}>{title ?? 'Title'}</p>
-            <DateBadge text={dateBadge ?? '26/02/26 - 01/03/26'} />
-          </div>
-          {/* Metric + GraphBase */}
-          <div className="flex flex-row gap-spacing-8xl items-center w-full">
-            <MetricBlock
-              label={label ?? 'Indicator Name'}
-              value={value}
-              badge={badge ?? { type: 'increase', value: '12%' }}
-              dir={dir}
-            />
-            <GraphBase
-              chartStyle="Bars with Text"
-              type="Indicator 1"
-              data={
-                data?.map((d) => ({
-                  value: d.value,
-                  label: d.label,
-                })) ?? undefined
-              }
-              dir={dir}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // PROGRESS METER — wide: two metrics side-by-side + BarCombined full
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'ProgressMeter') {
-      const resolvedMetrics = metrics ?? DEFAULT_METRICS_PROGRESS;
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="ProgressMeter"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-2xl w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Two metrics */}
-          <div className="flex flex-row gap-spacing-2xl items-center shrink-0 w-full">
-            {/* Metric 1 — green label */}
-            <div className="flex flex-col gap-spacing-xs flex-1 min-w-0">
-              <p className="text-text-lg font-normal text-[rgba(27,131,84,1)] dark:text-[rgba(110,231,160,1)]">
-                {resolvedMetrics[0]?.label ?? 'Indicator Name'}
-              </p>
-              <div className="flex flex-row gap-spacing-md items-center">
-                <p className={VAL_DISPLAY_XS}>{resolvedMetrics[0]?.value ?? '422.61'}</p>
-                {resolvedMetrics[0]?.badge?.value && (
-                  <ChartBadge
-                    type={resolvedMetrics[0].badge.type ?? 'increase'}
-                    value={resolvedMetrics[0].badge.value}
-                    dir={dir}
-                  />
-                )}
-              </div>
-            </div>
-            {/* Metric 2 — separated by border-l */}
-            <div className="flex flex-col gap-spacing-xs flex-1 min-w-0 border-s-2 border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] ps-spacing-xl">
-              <p className="text-text-lg font-normal text-colors-tertiary-lavendar-400">
-                {resolvedMetrics[1]?.label ?? 'Indicator Name'}
-              </p>
-              <div className="flex flex-row gap-spacing-md items-center">
-                <p className={VAL_DISPLAY_XS}>{resolvedMetrics[1]?.value ?? '422.61'}</p>
-                {resolvedMetrics[1]?.badge?.value && (
-                  <ChartBadge
-                    type={resolvedMetrics[1].badge.type ?? 'decrease'}
-                    value={resolvedMetrics[1].badge.value}
-                    dir={dir}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-          {/* Bar combined full-width */}
-          <GraphBase
-            chartStyle="Bar - Combined"
-            type="Combined"
-            dir={dir}
-            className="w-full"
-          />
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // SCORE POD — two metric rows + BarsWithText, separated by Divider
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'ScorePod') {
-      const resolvedMetrics = metrics ?? DEFAULT_METRICS_SCORE_POD;
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="ScorePod"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-lg w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Row 1 — Indicator 1 (green) */}
-          <div className="flex flex-row gap-spacing-9xl items-center shrink-0">
-            <MetricBlock
-              label={resolvedMetrics[0]?.label ?? 'Indicator Name'}
-              value={resolvedMetrics[0]?.value ?? '422.61'}
-              badge={resolvedMetrics[0]?.badge}
-              dir={dir}
-            />
-            <GraphBase
-              chartStyle="Bars with Text"
-              type="Indicator 1"
-              data={data?.map((d) => ({ value: d.value, label: d.label })) ?? undefined}
-              dir={dir}
-            />
-          </div>
-          <Divider lineType="horizontal" thickness="hairline" />
-          {/* Row 2 — Indicator 2 (lavender) */}
-          <div className="flex flex-row gap-spacing-9xl items-center shrink-0">
-            <MetricBlock
-              label={resolvedMetrics[1]?.label ?? 'Indicator Name'}
-              value={resolvedMetrics[1]?.value ?? '422.61'}
-              badge={resolvedMetrics[1]?.badge}
-              dir={dir}
-            />
-            <GraphBase
-              chartStyle="Bars with Text"
-              type="Indicator 2"
-              data={data2?.map((d) => ({ value: d.value, label: d.label })) ?? undefined}
-              dir={dir}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // FORECAST — centered header + proportional column chart with labels
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'Forecast') {
-      const forecastData = data ?? DEFAULT_FORECAST_DATA;
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="Forecast"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-2xl items-center w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Centered header */}
-          <div className="flex flex-col gap-spacing-xs items-center text-center shrink-0">
-            <p className={LBL_LG}>{label ?? 'Indicator Name'}</p>
-            <p className={VAL_DISPLAY_XS}>{value}</p>
-          </div>
-          {/* Column bars with labels above each */}
-          <div className="flex flex-1 gap-spacing-3xl items-end w-full min-h-0">
-            {forecastData.map((pt, i) => {
-              const barPct = Math.min((pt.value / maxValue) * 100, 100);
-              const spacerPct = 100 - barPct;
-              return (
-                <div
-                  key={i}
-                  className="flex flex-1 flex-col h-full items-center min-w-0 gap-0"
-                >
-                  {/* Spacer — label sits at bottom of spacer (right above bar) */}
-                  <div
-                    className="w-full flex items-end justify-center shrink-0"
-                    style={{ flex: `0 0 ${spacerPct}%` }}
-                  >
-                    {pt.label && (
-                      <span className="text-text-xs font-semibold text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] text-center leading-tight">
-                        {pt.label}
-                      </span>
-                    )}
-                  </div>
-                  {/* Bar */}
-                  <div
-                    data-slot="bar"
-                    className={cn(
-                      'w-full rounded-tl-radius-2 rounded-tr-radius-2 min-h-px shrink-0',
-                      GREEN_BAR_CLASS,
-                    )}
-                    style={{ flex: `0 0 ${barPct}%` }}
-                  />
-                </div>
-              );
-            })}
-          </div>
-          {/* Bottom: indicator name + action button + note */}
-          <div className="flex flex-col gap-0 items-start w-full shrink-0">
-            <div className="flex flex-row gap-spacing-md items-center w-full">
-              <p className="text-text-lg font-bold text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] flex-1 min-w-0">
-                {actionLabel ?? label ?? 'Indicator Name'}
-              </p>
-              <ActionButton onClick={onActionClick} />
-            </div>
-            {(note ?? 'This is a note') && (
-              <p className={LBL_MD}>{note ?? 'This is a note'}</p>
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    // ─────────────────────────────────────────────────────────────────────
-    // INDEX TILE — title+badge | bar chart | two metric rows
-    // ─────────────────────────────────────────────────────────────────────
-    if (type === 'IndexTile') {
-      const indexData = data ?? DEFAULT_INDEX_DATA;
-      const resolvedMetrics = metrics ?? DEFAULT_METRICS_INDEX;
-      return (
-        <div
-          ref={ref}
-          dir={dir}
-          data-slot="column-chart"
-          data-type="IndexTile"
-          className={cn(
-            CARD_BASE,
-            'flex flex-col gap-spacing-xl w-full',
-            className,
-          )}
-          {...rest}
-        >
-          {/* Text Container */}
-          <div className="flex flex-col gap-spacing-md shrink-0">
-            {/* Title + action button */}
-            <div className="flex flex-row gap-spacing-md items-start w-full">
-              <p className={cn(VAL_TEXT_XL_MEDIUM, 'flex-1 min-w-0')}>
-                {title ?? label ?? 'Indicator Name'}
-              </p>
-              <ActionButton onClick={onActionClick} />
-            </div>
-            {/* Value + badge */}
-            <div className="flex flex-row gap-spacing-xs items-center">
-              <p className={VAL_DISPLAY_XS}>{value}</p>
-              {(badge?.value ?? '12%') && (
-                <ChartBadge
-                  type={badge?.type ?? 'increase'}
-                  value={badge?.value ?? '12%'}
-                  dir={dir}
-                />
-              )}
-            </div>
-          </div>
-          {/* Simple bar chart — proportional bars, no axes */}
-          <div className="flex flex-1 gap-spacing-3xl items-end w-full min-h-0">
-            {indexData.map((pt, i) => (
-              <div key={i} className="flex flex-1 h-full items-end min-w-0">
-                <div
-                  data-slot="bar"
-                  className={cn(
-                    'w-full rounded-tl-radius-2 rounded-tr-radius-2',
-                    GREEN_BAR_CLASS,
-                  )}
-                  style={{ height: `${Math.min(pt.value, 100)}%` }}
-                />
-              </div>
-            ))}
-          </div>
-          {/* Two metric rows with dividers */}
-          <div className="flex flex-col gap-spacing-xs shrink-0 w-full">
-            {resolvedMetrics.slice(0, 2).map((m, i) => (
-              <div key={i} className="flex flex-col gap-spacing-xs">
-                {i > 0 && <Divider lineType="horizontal" thickness="hairline" />}
-                <div className="flex flex-row gap-spacing-md items-center w-full">
-                  <p className={cn('flex-1 min-w-0', LBL_MD)}>{m.label}</p>
-                  <div className="flex flex-row gap-spacing-md items-center shrink-0">
-                    <p className={VAL_TEXT_LG}>{m.value}</p>
-                    {m.badge?.value && (
-                      <ChartBadge
-                        type={m.badge.type ?? 'increase'}
-                        value={m.badge.value}
-                        dir={dir}
-                      />
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      );
-    }
-
-    // Fallback — should not be reached with valid types
-    return (
-      <div
-        ref={ref}
-        dir={dir}
-        data-slot="column-chart"
-        className={cn(CARD_BASE, className)}
-        {...rest}
-      />
-    );
-  },
-);
-
-// Suppress unused-import warnings for defaults exported only for external use
-void DEFAULT_SPARKLINE_DATA;