sdaia-ui 1.0.1

package/src/components/AreaChart/AreaChart.tsx

@@ -0,0 +1,454 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { MinusIcon } from '../../icons/IconFactory';
+import { ChartBadge } from '../ChartBadge';
+import { GraphBase } from '../GraphBase';
+import { HorizontalTabs } from '../HorizontalTabs';
+import { XAxis } from '../XAxis';
+import { YAxis } from '../YAxis';
+import type { AreaChartProps } from './AreaChart.types';
+import {
+  CARD_BASE,
+  CHART_BODY,
+  COMPARISON_ROOT,
+  DEFAULT_DATA,
+  DEFAULT_HEIGHTS,
+  DEFAULT_INSIGHT_ROWS,
+  GRID_LINE,
+  GRID_LINE_BASELINE,
+  INSIGHT_CONTENT_ROW,
+  INSIGHT_DEFAULT_HEIGHT,
+  INSIGHT_LEGEND,
+  INSIGHT_LEGEND_ICON,
+  INSIGHT_LEGEND_ITEM,
+  INSIGHT_LEGEND_LABEL,
+  INSIGHT_ROOT,
+  INSIGHT_ROW_LABEL,
+  INSIGHT_ROW_VALUE,
+  INSIGHT_VALUE_BADGE,
+  INSIGHT_WRAPPER,
+  KPI_LABEL,
+  KPI_VALUE,
+  METRIC_ROOT,
+  METRIC_TEXT_COL,
+  SERIES_1_COLOR,
+  SERIES_2_COLOR,
+  SUMMARY_BOTTOM,
+  SUMMARY_ROOT,
+  SUMMARY_TOP,
+  SVG_OVERLAY,
+  Y_AND_AREA_ROW,
+  AREA_WRAPPER,
+  toAreaFillPoints,
+  toPolylinePoints,
+} from './AreaChart.variants';
+
+/**
+ * AreaChart
+ *
+ * Four visual types:
+ *
+ * - **Insight**            — full card: HorizontalTabs + metric rows + dual-area
+ *                            SVG chart (6-tick Y-axis, 12-month X-axis) + bottom legend.
+ * - **Detailed Comparison** — dual-series filled area chart; same chart grid as
+ *                            Insight; legend row at bottom (minus icon + label).
+ * - **Metric**             — compact KPI card: indicator label + bold value + sparkline.
+ * - **Summary**            — compact KPI card: label + ChartBadge (top) + value + sparkline.
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Prefer `dir="rtl"` (the `rtl` boolean is deprecated). The SVG is mirrored
+ *   via `<g transform="scale(-1,1) translate(-100,0)">` — no DOM reordering.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   Grid lines and axis labels swap via `html.dark`. Series colours are
+ *   data-viz palette — identical in light and dark mode.
+ *
+ * @example
+ * <AreaChart type="Insight" tabs={[...]} insightRows={[...]} />
+ * <AreaChart type="Detailed Comparison" xAxisData="7 Week Days" />
+ * <AreaChart type="Metric" kpiLabel="Revenue" kpiValue="1,234" />
+ * <AreaChart type="Summary" kpiLabel="Revenue" kpiValue="1,234" badgeValue="8%" />
+ */
+export const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>(
+  function AreaChart(
+    {
+      type = 'Insight',
+      xAxisData = '7 Week Days',
+      dir: dirProp,
+      rtl = false,
+      height,
+      // KPI props
+      kpiLabel,
+      kpiValue,
+      badgeType = 'increase',
+      badgeValue,
+      // Insight props
+      tabs,
+      activeTab,
+      onTabChange,
+      insightRows,
+      legendLabel1,
+      legendLabel2,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const isRtl = dir === 'rtl';
+
+    // Mirror transform for RTL — flips SVG x-axis without DOM reordering
+    const rtlTransform = isRtl ? 'scale(-1,1) translate(-100,0)' : undefined;
+
+    /* ── METRIC ────────────────────────────────────────────────────────────────
+       Horizontal KPI card: [indicator label + value] | [sparkline]
+       Figma node 5975:83019 — 240 × 96 px.
+       No ChartBadge — the sparkline is Indicator 2 (lavender) with background.  */
+    if (type === 'Metric') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="area-chart"
+          data-type="metric"
+          className={cn(CARD_BASE, METRIC_ROOT, className)}
+          {...rest}
+        >
+          <div data-slot="kpi-text" className={METRIC_TEXT_COL}>
+            <p className={KPI_LABEL}>{kpiLabel ?? 'Indicator Name'}</p>
+            <p className={KPI_VALUE}>{kpiValue ?? '422.61'}</p>
+          </div>
+          <GraphBase
+            data-slot="sparkline"
+            chartStyle="Elastic"
+            type="Indicator 2"
+            background
+            dir={dir}
+            className="flex-1 min-w-px self-stretch"
+          />
+        </div>
+      );
+    }
+
+    /* ── SUMMARY ───────────────────────────────────────────────────────────────
+       Vertical KPI card:
+         top row  → [label] [ChartBadge]
+         bottom row → [bold value] [sparkline]
+       Figma node 5975:83029 — 240 × 92 px.
+       Sparkline is Indicator 1 (green) with background.                       */
+    if (type === 'Summary') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="area-chart"
+          data-type="summary"
+          className={cn(CARD_BASE, SUMMARY_ROOT, className)}
+          {...rest}
+        >
+          <div data-slot="summary-top" className={SUMMARY_TOP}>
+            <p className={KPI_LABEL}>{kpiLabel ?? 'Indicator Name'}</p>
+            <ChartBadge
+              type={badgeType}
+              value={badgeValue ?? '12%'}
+              dir={dir}
+            />
+          </div>
+          <div data-slot="summary-bottom" className={SUMMARY_BOTTOM}>
+            <p className={KPI_VALUE}>{kpiValue ?? '422.61'}</p>
+            <GraphBase
+              data-slot="sparkline"
+              chartStyle="Elastic"
+              type="Indicator 1"
+              background
+              dir={dir}
+              className="flex-1 min-w-px self-stretch"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    /* ── INSIGHT ───────────────────────────────────────────────────────────────
+       Full card:
+         1. HorizontalTabs (neutral, 3 tabs by default)
+         2. Content wrapper — up to two metric rows (label + value + badge)
+         3. Area chart — dual series, 6-tick Y-axis, 12-month X-axis
+         4. Bottom legend — minus-sign icon + label for each series
+       Figma node 5975:82879 — 600 × 440 px.                                   */
+    if (type === 'Insight') {
+      const resolvedHeight = height ?? INSIGHT_DEFAULT_HEIGHT;
+      const resolvedTabs = tabs ?? [
+        { value: 'tab1', label: 'Text' },
+        { value: 'tab2', label: 'Text' },
+        { value: 'tab3', label: 'Text' },
+      ];
+      const resolvedRows = insightRows ?? DEFAULT_INSIGHT_ROWS;
+
+      const d = DEFAULT_DATA.Insight;
+      const n = d.series1.length;
+
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="area-chart"
+          data-type="insight"
+          className={cn(INSIGHT_ROOT, className)}
+          style={{ height: `${resolvedHeight}px` }}
+          {...rest}
+        >
+          {/* ── Tabs ──────────────────────────────────────────────────────── */}
+          <HorizontalTabs
+            data-slot="tabs"
+            items={resolvedTabs}
+            type="neutral"
+            size="lg"
+            value={activeTab}
+            onValueChange={onTabChange}
+            className="w-full shrink-0"
+          />
+
+          {/* ── Metric rows ───────────────────────────────────────────────── */}
+          <div data-slot="insight-wrapper" className={INSIGHT_WRAPPER}>
+            {resolvedRows.map((row, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={i} data-slot="insight-row" className={INSIGHT_CONTENT_ROW}>
+                <p className={INSIGHT_ROW_LABEL}>{row.label}</p>
+                <div className={INSIGHT_VALUE_BADGE}>
+                  <p className={INSIGHT_ROW_VALUE}>{row.value}</p>
+                  {row.badgeValue != null && (
+                    <ChartBadge
+                      type={row.badgeType ?? 'increase'}
+                      value={row.badgeValue}
+                      dir={dir}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* ── Chart body ────────────────────────────────────────────────── */}
+          <div data-slot="chart-body" className={CHART_BODY}>
+            <div className={Y_AND_AREA_ROW}>
+              {/* 6-tick Y-axis — Figma: 250 / 200 / 150 / 100 / 50 / 0 */}
+              <YAxis value="6" rtl={isRtl} style={{ height: '100%' }} />
+
+              <div className={AREA_WRAPPER}>
+                {/* 5 dashed grid lines + solid baseline (y = 0) */}
+                {Array.from({ length: 6 }, (_, gridIndex) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div
+                    key={gridIndex}
+                    className={gridIndex === 5 ? GRID_LINE_BASELINE : GRID_LINE}
+                    aria-hidden="true"
+                  />
+                ))}
+
+                {/* SVG dual-series area */}
+                <svg
+                  viewBox="0 0 100 100"
+                  preserveAspectRatio="none"
+                  className={SVG_OVERLAY}
+                  aria-hidden="true"
+                >
+                  <g transform={rtlTransform}>
+                    <defs>
+                      <linearGradient id="ac-ins-s1-grad" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%"   stopColor={SERIES_1_COLOR} stopOpacity="0.3" />
+                        <stop offset="100%" stopColor={SERIES_1_COLOR} stopOpacity="0.05" />
+                      </linearGradient>
+                      <linearGradient id="ac-ins-s2-grad" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%"   stopColor={SERIES_2_COLOR} stopOpacity="0.3" />
+                        <stop offset="100%" stopColor={SERIES_2_COLOR} stopOpacity="0.05" />
+                      </linearGradient>
+                    </defs>
+
+                    {/* Series 2 fill (behind) */}
+                    <polygon
+                      points={toAreaFillPoints(d.series2, n)}
+                      fill="url(#ac-ins-s2-grad)"
+                    />
+                    {/* Series 1 fill (front) */}
+                    <polygon
+                      points={toAreaFillPoints(d.series1, n)}
+                      fill="url(#ac-ins-s1-grad)"
+                    />
+                    {/* Series 2 line */}
+                    <polyline
+                      points={toPolylinePoints(d.series2, n)}
+                      fill="none"
+                      stroke={SERIES_2_COLOR}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      vectorEffect="non-scaling-stroke"
+                    />
+                    {/* Series 1 line */}
+                    <polyline
+                      points={toPolylinePoints(d.series1, n)}
+                      fill="none"
+                      stroke={SERIES_1_COLOR}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      vectorEffect="non-scaling-stroke"
+                    />
+                  </g>
+                </svg>
+              </div>
+            </div>
+
+            {/* 12-month X-axis */}
+            <XAxis data="12 Months" rtl={isRtl} />
+          </div>
+
+          {/* ── Bottom legend ─────────────────────────────────────────────── */}
+          <div data-slot="legend" className={INSIGHT_LEGEND}>
+            <div className={INSIGHT_LEGEND_ITEM}>
+              <span
+                className={INSIGHT_LEGEND_ICON}
+                style={{ color: SERIES_1_COLOR }}
+                aria-hidden="true"
+              >
+                <MinusIcon />
+              </span>
+              <p className={INSIGHT_LEGEND_LABEL}>{legendLabel1 ?? 'Legend'}</p>
+            </div>
+            <div className={INSIGHT_LEGEND_ITEM}>
+              <span
+                className={INSIGHT_LEGEND_ICON}
+                style={{ color: SERIES_2_COLOR }}
+                aria-hidden="true"
+              >
+                <MinusIcon />
+              </span>
+              <p className={INSIGHT_LEGEND_LABEL}>{legendLabel2 ?? 'Legend'}</p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    /* ── DETAILED COMPARISON ───────────────────────────────────────────────────
+       Dual-series filled area chart.
+       Y-axis + grid match Insight; bottom legend matches Insight (centered).   */
+    const resolvedHeight = height ?? DEFAULT_HEIGHTS[xAxisData];
+    const d = DEFAULT_DATA['Detailed Comparison'];
+    const n = d.series1.length;
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="area-chart"
+        data-type="detailed-comparison"
+        className={cn(COMPARISON_ROOT, className)}
+        style={{ height: `${resolvedHeight}px` }}
+        {...rest}
+      >
+        {/* ── Chart body ────────────────────────────────────────────────── */}
+        <div className={CHART_BODY}>
+          <div className={Y_AND_AREA_ROW}>
+            {/* 6-tick Y-axis — same grid density as Insight so baseline aligns */}
+            <YAxis value="6" rtl={isRtl} style={{ height: '100%' }} />
+
+            <div className={AREA_WRAPPER}>
+              {/* 5 dashed grid lines + solid baseline — same as Insight */}
+              {Array.from({ length: 6 }, (_, gridIndex) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div
+                  key={gridIndex}
+                  className={gridIndex === 5 ? GRID_LINE_BASELINE : GRID_LINE}
+                  aria-hidden="true"
+                />
+              ))}
+
+              <svg
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+                className={SVG_OVERLAY}
+                aria-hidden="true"
+              >
+                <g transform={rtlTransform}>
+                  <defs>
+                    <linearGradient id="ac-comp-s1-grad" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%"   stopColor={SERIES_1_COLOR} stopOpacity="0.3" />
+                      <stop offset="100%" stopColor={SERIES_1_COLOR} stopOpacity="0.05" />
+                    </linearGradient>
+                    <linearGradient id="ac-comp-s2-grad" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%"   stopColor={SERIES_2_COLOR} stopOpacity="0.3" />
+                      <stop offset="100%" stopColor={SERIES_2_COLOR} stopOpacity="0.05" />
+                    </linearGradient>
+                  </defs>
+
+                  {/* Series 2 fill (behind) */}
+                  <polygon
+                    points={toAreaFillPoints(d.series2, n)}
+                    fill="url(#ac-comp-s2-grad)"
+                  />
+                  {/* Series 1 fill (front) */}
+                  <polygon
+                    points={toAreaFillPoints(d.series1, n)}
+                    fill="url(#ac-comp-s1-grad)"
+                  />
+                  {/* Series 2 line */}
+                  <polyline
+                    points={toPolylinePoints(d.series2, n)}
+                    fill="none"
+                    stroke={SERIES_2_COLOR}
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  {/* Series 1 line */}
+                  <polyline
+                    points={toPolylinePoints(d.series1, n)}
+                    fill="none"
+                    stroke={SERIES_1_COLOR}
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                </g>
+              </svg>
+            </div>
+          </div>
+
+          <XAxis data={xAxisData} rtl={isRtl} />
+        </div>
+
+        {/* ── Bottom legend — same pattern as Insight (centered, minus icon) ─ */}
+        <div data-slot="legend" className={INSIGHT_LEGEND}>
+          <div className={INSIGHT_LEGEND_ITEM}>
+            <span
+              className={INSIGHT_LEGEND_ICON}
+              style={{ color: SERIES_1_COLOR }}
+              aria-hidden="true"
+            >
+              <MinusIcon />
+            </span>
+            <p className={INSIGHT_LEGEND_LABEL}>{legendLabel1 ?? 'Series 1'}</p>
+          </div>
+          <div className={INSIGHT_LEGEND_ITEM}>
+            <span
+              className={INSIGHT_LEGEND_ICON}
+              style={{ color: SERIES_2_COLOR }}
+              aria-hidden="true"
+            >
+              <MinusIcon />
+            </span>
+            <p className={INSIGHT_LEGEND_LABEL}>{legendLabel2 ?? 'Series 2'}</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+AreaChart.displayName = 'AreaChart';

package/src/components/AreaChart/AreaChart.types.ts

@@ -0,0 +1,117 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { XAxisDataType } from '../XAxis/XAxis.types';
+import type { ChartBadgeType } from '../ChartBadge/ChartBadge.types';
+import type { HorizontalTabItem } from '../HorizontalTabs/HorizontalTabs.types';
+
+export type AreaChartType =
+  | 'Insight'
+  | 'Detailed Comparison'
+  | 'Metric'
+  | 'Summary';
+
+/** A single metric row shown above the chart area in `type="Insight"`. */
+export interface AreaChartInsightRow {
+  label: ReactNode;
+  value: ReactNode;
+  badgeType?: ChartBadgeType;
+  badgeValue?: ReactNode;
+}
+
+export interface AreaChartProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Chart variant.
+   * - Insight             — dual-area chart with tabs, metric rows, and bottom legend
+   * - Detailed Comparison — two overlapping filled areas for comparing series
+   * - Metric              — compact KPI card: indicator label + value + sparkline (no badge)
+   * - Summary             — compact KPI card: label + badge (top) + value + sparkline (bottom)
+   * @default 'Insight'
+   */
+  type?: AreaChartType;
+
+  /**
+   * X-axis label preset.
+   * Insight ignores this and always renders a 12-month axis.
+   * @default '7 Week Days'
+   */
+  xAxisData?: XAxisDataType;
+
+  /**
+   * Explicit direction — preferred over the deprecated `rtl` prop.
+   * Applied to the root element; the SVG is mirrored via a transform.
+   */
+  dir?: 'ltr' | 'rtl';
+
+  /**
+   * Render in right-to-left orientation.
+   * @deprecated Use `dir="rtl"` instead.
+   * @default false
+   */
+  rtl?: boolean;
+
+  /**
+   * Total root height in px.
+   * - Insight defaults to 440 px.
+   * - Detailed Comparison defaults to a preset based on `xAxisData`.
+   * - Metric and Summary ignore this prop (content-driven height).
+   */
+  height?: number;
+
+  // ── KPI card props (Metric + Summary) ──────────────────────────────────────
+
+  /**
+   * Indicator label shown above the main value (Metric / Summary).
+   * @default 'Indicator Name'
+   */
+  kpiLabel?: ReactNode;
+
+  /**
+   * Main KPI value shown in display-xs bold (Metric / Summary).
+   * @default '422.61'
+   */
+  kpiValue?: ReactNode;
+
+  /**
+   * Direction of the ChartBadge delta indicator (Summary only).
+   * @default 'increase'
+   */
+  badgeType?: ChartBadgeType;
+
+  /**
+   * Text inside the ChartBadge (Summary only).
+   * @default '12%'
+   */
+  badgeValue?: ReactNode;
+
+  // ── Insight props ───────────────────────────────────────────────────────────
+
+  /**
+   * Tab items for the HorizontalTabs strip at the top of the Insight card.
+   * Defaults to three placeholder "Text" tabs.
+   */
+  tabs?: HorizontalTabItem[];
+
+  /** Controlled active tab value (Insight). */
+  activeTab?: string;
+
+  /** Fired when the user selects a different tab (Insight). */
+  onTabChange?: (value: string) => void;
+
+  /**
+   * One or two metric rows shown above the chart area (Insight).
+   * Each row renders: label, value, and an optional ChartBadge.
+   * Defaults to two placeholder rows.
+   */
+  insightRows?: AreaChartInsightRow[];
+
+  /**
+   * Legend label for Series 1 in the bottom legend strip (Insight).
+   * @default 'Legend'
+   */
+  legendLabel1?: ReactNode;
+
+  /**
+   * Legend label for Series 2 in the bottom legend strip (Insight).
+   * @default 'Legend'
+   */
+  legendLabel2?: ReactNode;
+}