sdaia-ui 1.0.1

package/src/components/ColumnChart/ColumnChart.tsx

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