sdaia-ui 1.0.1 → 1.0.2

package/src/components/AreaChart/AreaChart.tsx

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

@@ -1,117 +0,0 @@
-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;
-}