sdaia-ui 1.0.1

package/src/components/GraphBase/GraphBase.tsx

@@ -0,0 +1,598 @@
+'use client';
+
+import { forwardRef, useId } from 'react';
+import { cn } from '../../lib/cn';
+import type { GraphBaseProps, GraphBaseDataPoint } from './GraphBase.types';
+import {
+  COLOR_SERIES_1,
+  COLOR_SERIES_2,
+  COLOR_CHART_1,
+  COLOR_CHART_2,
+  COLOR_BARS_TEXT_IND2,
+  IND_W,
+  IND_H,
+  COMBO_GRAPH_W,
+  COMBO_GRAPH_H,
+  BARS_W,
+  BARS_H,
+  BAR_COMBO_W,
+  BAR_COMBO_H,
+  SVG_PAD_Y,
+  STROKE_W,
+  DEFAULT_ELASTIC,
+  DEFAULT_NOISY,
+  DEFAULT_SMOOTH,
+  DEFAULT_COMBO_1,
+  DEFAULT_COMBO_2,
+  DEFAULT_BARS,
+  DEFAULT_BARS_TEXT,
+  DEFAULT_BAR_COMBO,
+  ROOT_BASE,
+  LINE_CONTAINER,
+  BARS_CONTAINER,
+  BARS_TEXT_CONTAINER,
+  BAR_COMBO_CONTAINER,
+  BAR_FILL,
+  BAR_COL,
+  BAR_LABEL,
+  BAR_COMBO_GROUP,
+  BAR_COMBO_ITEM,
+} from './GraphBase.variants';
+
+// ─── SVG path utilities ────────────────────────────────────────────────────────
+
+/**
+ * Maps an array of 0–100 values to SVG x,y coordinates.
+ * When isRtl=true the x-axis is mirrored so the sparkline reads right-to-left.
+ */
+function buildPoints(
+  values: number[],
+  width: number,
+  height: number,
+  padY: number,
+  isRtl: boolean,
+): { x: number; y: number }[] {
+  const n = values.length;
+  if (n === 0) return [];
+  const usableH = height - 2 * padY;
+  return values.map((v, i) => {
+    const t = n > 1 ? i / (n - 1) : 0.5;
+    const rawX = t * width;
+    return {
+      x: isRtl ? width - rawX : rawX,
+      y: padY + (1 - Math.min(100, Math.max(0, v)) / 100) * usableH,
+    };
+  });
+}
+
+/** Straight-line (polyline) SVG path — used for Noisy style. */
+function polylinePath(pts: { x: number; y: number }[]): string {
+  if (pts.length === 0) return '';
+  return `M ${pts.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' L ')}`;
+}
+
+/**
+ * Catmull-Rom to cubic-Bézier smooth curve — used for Elastic and Smooth styles.
+ * Falls back to polyline for fewer than 2 points.
+ */
+function smoothPath(pts: { x: number; y: number }[]): string {
+  if (pts.length < 2) return polylinePath(pts);
+  let d = `M ${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
+  for (let i = 1; i < pts.length; i++) {
+    const p0 = pts[Math.max(0, i - 2)];
+    const p1 = pts[i - 1];
+    const p2 = pts[i];
+    const p3 = pts[Math.min(pts.length - 1, i + 1)];
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+  }
+  return d;
+}
+
+/**
+ * Closes a line path into a filled polygon anchored to the bottom of the canvas.
+ * Used when `background=true`.
+ */
+function fillPath(
+  line: string,
+  pts: { x: number; y: number }[],
+  height: number,
+  padY: number,
+): string {
+  if (pts.length === 0) return '';
+  const bottomY = (height - padY).toFixed(2);
+  const startX = pts[0].x.toFixed(2);
+  const endX = pts[pts.length - 1].x.toFixed(2);
+  return `${line} L ${endX},${bottomY} L ${startX},${bottomY} Z`;
+}
+
+// ─── Sparkline SVG ─────────────────────────────────────────────────────────────
+
+interface SparklineProps {
+  values: number[];
+  color: string;
+  gradientId: string;
+  width: number;
+  height: number;
+  padY: number;
+  showFill: boolean;
+  smooth: boolean;
+  isRtl: boolean;
+}
+
+function Sparkline({
+  values,
+  color,
+  gradientId,
+  width,
+  height,
+  padY,
+  showFill,
+  smooth,
+  isRtl,
+}: SparklineProps) {
+  const pts = buildPoints(values, width, height, padY, isRtl);
+  const line = smooth ? smoothPath(pts) : polylinePath(pts);
+  const fill = showFill ? fillPath(line, pts, height, padY) : '';
+
+  return (
+    <>
+      {showFill && (
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity="0.18" />
+            <stop offset="100%" stopColor={color} stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      )}
+      {showFill && fill && (
+        <path d={fill} fill={`url(#${gradientId})`} />
+      )}
+      <path
+        d={line}
+        fill="none"
+        stroke={color}
+        strokeWidth={STROKE_W}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>
+  );
+}
+
+// ─── Indicator line chart (Elastic / Noisy / Smooth) ─────────────────────────
+
+interface IndicatorLineProps {
+  values: number[];
+  color: string;
+  gradientId: string;
+  showFill: boolean;
+  useSmooth: boolean;
+  isRtl: boolean;
+}
+
+function IndicatorLine({
+  values,
+  color,
+  gradientId,
+  showFill,
+  useSmooth,
+  isRtl,
+}: IndicatorLineProps) {
+  return (
+    <div
+      data-slot="graph"
+      className="flex-1 relative w-full min-h-px"
+    >
+      <svg
+        viewBox={`0 0 ${IND_W} ${IND_H - 2 * SVG_PAD_Y}`}
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute inset-0 w-full h-full"
+        aria-hidden="true"
+        preserveAspectRatio="none"
+      >
+        <Sparkline
+          values={values}
+          color={color}
+          gradientId={gradientId}
+          width={IND_W}
+          height={IND_H - 2 * SVG_PAD_Y}
+          padY={0}
+          showFill={showFill}
+          smooth={useSmooth}
+          isRtl={isRtl}
+        />
+      </svg>
+    </div>
+  );
+}
+
+// ─── Combined graph (Graph - Combined) ────────────────────────────────────────
+
+interface CombinedGraphProps {
+  values1: number[];
+  values2: number[];
+  gradientId1: string;
+  gradientId2: string;
+  showFill: boolean;
+  isRtl: boolean;
+}
+
+function CombinedGraph({
+  values1,
+  values2,
+  gradientId1,
+  gradientId2,
+  showFill,
+  isRtl,
+}: CombinedGraphProps) {
+  return (
+    <div
+      data-slot="graph"
+      className="flex-1 relative w-full min-h-px"
+    >
+      <svg
+        viewBox={`0 0 ${COMBO_GRAPH_W} ${COMBO_GRAPH_H}`}
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute inset-0 w-full h-full"
+        aria-hidden="true"
+        preserveAspectRatio="none"
+      >
+        {/* Secondary series (lavender) rendered first — appears behind */}
+        <Sparkline
+          values={values2}
+          color={COLOR_SERIES_2}
+          gradientId={gradientId2}
+          width={COMBO_GRAPH_W}
+          height={COMBO_GRAPH_H}
+          padY={SVG_PAD_Y}
+          showFill={showFill}
+          smooth
+          isRtl={isRtl}
+        />
+        {/* Primary series (green) rendered second — appears in front */}
+        <Sparkline
+          values={values1}
+          color={COLOR_SERIES_1}
+          gradientId={gradientId1}
+          width={COMBO_GRAPH_W}
+          height={COMBO_GRAPH_H}
+          padY={SVG_PAD_Y}
+          showFill={showFill}
+          smooth
+          isRtl={isRtl}
+        />
+      </svg>
+    </div>
+  );
+}
+
+// ─── Bars ─────────────────────────────────────────────────────────────────────
+
+interface BarsProps {
+  bars: number[];
+  color: string;
+}
+
+function Bars({ bars, color }: BarsProps) {
+  return (
+    <>
+      {bars.map((pct, i) => (
+        <div key={i} className={BAR_COL}>
+          <div
+            data-slot="bar"
+            className={BAR_FILL}
+            style={{ height: `${Math.min(100, Math.max(0, pct))}%`, backgroundColor: color }}
+            aria-hidden="true"
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+// ─── Bars with Text ───────────────────────────────────────────────────────────
+
+interface BarsWithTextProps {
+  bars: { value: number; label?: string }[];
+  color: string;
+}
+
+function BarsWithText({ bars, color }: BarsWithTextProps) {
+  return (
+    <>
+      {bars.map((bar, i) => (
+        <div key={i} className={BAR_COL}>
+          {bar.label && (
+            <span className={BAR_LABEL} aria-hidden="true">
+              {bar.label}
+            </span>
+          )}
+          <div
+            data-slot="bar"
+            className={BAR_FILL}
+            style={{
+              height: `${Math.min(100, Math.max(0, bar.value))}%`,
+              backgroundColor: color,
+            }}
+            aria-hidden="true"
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+// ─── Bar - Combined ───────────────────────────────────────────────────────────
+
+interface BarCombinedGroupsProps {
+  groups: { s1: number; s2: number }[];
+}
+
+function BarCombinedGroups({ groups }: BarCombinedGroupsProps) {
+  return (
+    <>
+      {groups.map((g, i) => (
+        <div key={i} className={BAR_COMBO_GROUP}>
+          {/* Lavender (series 2) first — dir="rtl" on parent reverses visual order */}
+          <div
+            data-slot="bar-s2"
+            className={BAR_COMBO_ITEM}
+            style={{
+              height: `${Math.min(100, Math.max(0, g.s2))}%`,
+              backgroundColor: COLOR_CHART_2,
+            }}
+            aria-hidden="true"
+          />
+          {/* Blue (series 1) second */}
+          <div
+            data-slot="bar-s1"
+            className={BAR_COMBO_ITEM}
+            style={{
+              height: `${Math.min(100, Math.max(0, g.s1))}%`,
+              backgroundColor: COLOR_CHART_1,
+            }}
+            aria-hidden="true"
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+// ─── GraphBase ─────────────────────────────────────────────────────────────────
+
+/**
+ * GraphBase — mini chart indicator.
+ *
+ * A compact data visualisation primitive used inside metric cards and KPI
+ * widgets. Renders as a sparkline (line chart) or as a bar chart depending on
+ * the `chartStyle` prop.
+ *
+ * Traced from Figma node 5707:78024 (_Graph Base).
+ *
+ * ── Styles ────────────────────────────────────────────────────────────────────
+ *   Line (SVG sparklines): Elastic · Noisy · Smooth · Graph - Combined
+ *   Bar  (CSS):            Bars · Bars with Text · Bar - Combined
+ *
+ * ── Colours ───────────────────────────────────────────────────────────────────
+ *   Indicator 1   green    rgba(27,131,84,1)    Colors/Primary-SA-Flag/600-primary
+ *   Indicator 2   lavender rgba(165,123,186,1)  Colors/Tertiary-Lavendar/400
+ *   Combined      both
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Pass `dir="rtl"` (or deprecated `rtl` prop). Sparklines mirror their
+ *   x-axis; bar charts reverse their column order via CSS `dir`.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   Series colours are data-viz tokens identical in light and dark mode.
+ *   Label text uses `dark:` override.
+ *
+ * ── Interactions ──────────────────────────────────────────────────────────────
+ *   None — static/display only.
+ *
+ * @example
+ * // Elastic sparkline, Indicator 1, no fill
+ * <GraphBase chartStyle="Elastic" type="Indicator 1" />
+ *
+ * // Noisy with background fill, RTL
+ * <GraphBase chartStyle="Noisy" type="Indicator 2" background dir="rtl" />
+ *
+ * // Bar chart with custom data
+ * <GraphBase chartStyle="Bars" type="Indicator 1" data={[{value:80},{value:40},{value:90}]} />
+ *
+ * // Bars with Text
+ * <GraphBase chartStyle="Bars with Text" type="Indicator 2" data={[{value:70,label:'42'},{value:50,label:'28'}]} />
+ *
+ * // Combined grouped bars
+ * <GraphBase chartStyle="Bar - Combined" data={[{value:70},{value:60}]} data2={[{value:40},{value:30}]} />
+ */
+export const GraphBase = forwardRef<HTMLDivElement, GraphBaseProps>(
+  function GraphBase(
+    {
+      chartStyle = 'Elastic',
+      type = 'Indicator 1',
+      background = false,
+      dir: dirProp,
+      rtl = false,
+      data,
+      data2,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    // Normalise direction — prefer explicit `dir` prop, fall back to legacy `rtl`
+    const resolvedDir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const isRtl = resolvedDir === 'rtl';
+
+    // Unique gradient IDs — prevents collisions when multiple instances render
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+    const gradId1 = `gb-grad1-${uid}`;
+    const gradId2 = `gb-grad2-${uid}`;
+
+    // Resolve series colour(s)
+    const color1 = COLOR_SERIES_1;
+    const color2 = COLOR_SERIES_2;
+    const primaryColor = type === 'Indicator 2' ? color2 : color1;
+
+    // ── Line chart styles ─────────────────────────────────────────────────────
+
+    const isLineStyle =
+      chartStyle === 'Elastic' ||
+      chartStyle === 'Noisy' ||
+      chartStyle === 'Smooth';
+
+    if (isLineStyle) {
+      const raw =
+        data?.map((d) => d.value) ??
+        (chartStyle === 'Elastic'
+          ? DEFAULT_ELASTIC
+          : chartStyle === 'Noisy'
+            ? DEFAULT_NOISY
+            : DEFAULT_SMOOTH);
+
+      const useSmooth = chartStyle !== 'Noisy';
+
+      return (
+        <div
+          ref={ref}
+          data-slot="graph-base"
+          dir={resolvedDir}
+          className={cn(
+            ROOT_BASE,
+            LINE_CONTAINER,
+            className,
+          )}
+          style={{ width: `${IND_W}px`, height: `${IND_H}px` }}
+          {...rest}
+        >
+          <IndicatorLine
+            values={raw}
+            color={primaryColor}
+            gradientId={gradId1}
+            showFill={background}
+            useSmooth={useSmooth}
+            isRtl={isRtl}
+          />
+        </div>
+      );
+    }
+
+    // ── Graph - Combined ──────────────────────────────────────────────────────
+
+    if (chartStyle === 'Graph - Combined') {
+      const raw1 = data?.map((d) => d.value) ?? DEFAULT_COMBO_1;
+      const raw2 = data2?.map((d) => d.value) ?? DEFAULT_COMBO_2;
+
+      return (
+        <div
+          ref={ref}
+          data-slot="graph-base"
+          dir={resolvedDir}
+          className={cn(
+            ROOT_BASE,
+            LINE_CONTAINER,
+            className,
+          )}
+          style={{ width: `${COMBO_GRAPH_W}px`, height: `${COMBO_GRAPH_H}px` }}
+          {...rest}
+        >
+          <CombinedGraph
+            values1={raw1}
+            values2={raw2}
+            gradientId1={gradId1}
+            gradientId2={gradId2}
+            showFill={background}
+            isRtl={isRtl}
+          />
+        </div>
+      );
+    }
+
+    // ── Bars ──────────────────────────────────────────────────────────────────
+
+    if (chartStyle === 'Bars') {
+      const raw = data?.map((d) => d.value) ?? DEFAULT_BARS;
+      // Figma: plain Bars Indicator 1 uses Chart/chart-series-1 (blue), not the green series token
+      const barsColor = type === 'Indicator 1' ? COLOR_CHART_1 : primaryColor;
+
+      return (
+        <div
+          ref={ref}
+          data-slot="graph-base"
+          dir={resolvedDir}
+          className={cn(
+            ROOT_BASE,
+            BARS_CONTAINER,
+            className,
+          )}
+          style={{ width: `${BARS_W}px`, height: `${BARS_H}px` }}
+          {...rest}
+        >
+          <Bars bars={raw} color={barsColor} />
+        </div>
+      );
+    }
+
+    // ── Bars with Text ────────────────────────────────────────────────────────
+
+    if (chartStyle === 'Bars with Text') {
+      const raw =
+        data?.map((d) => ({ value: d.value, label: d.label })) ??
+        DEFAULT_BARS_TEXT;
+      // Figma: Bars with Text Indicator 2 uses Background/background-tertiary-50 (near-white)
+      const barsTextColor = type === 'Indicator 2' ? COLOR_BARS_TEXT_IND2 : primaryColor;
+
+      return (
+        <div
+          ref={ref}
+          data-slot="graph-base"
+          dir={resolvedDir}
+          className={cn(
+            ROOT_BASE,
+            BARS_TEXT_CONTAINER,
+            className,
+          )}
+          style={{ width: `${BARS_W}px`, height: `${BARS_H}px` }}
+          {...rest}
+        >
+          <BarsWithText bars={raw} color={barsTextColor} />
+        </div>
+      );
+    }
+
+    // ── Bar - Combined ────────────────────────────────────────────────────────
+
+    // chartStyle === 'Bar - Combined'
+    const groups =
+      data && data2
+        ? data.map((d, i) => ({
+            s1: d.value,
+            s2: data2[i]?.value ?? 0,
+          }))
+        : DEFAULT_BAR_COMBO;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="graph-base"
+        dir={resolvedDir}
+        className={cn(
+          ROOT_BASE,
+          BAR_COMBO_CONTAINER,
+          className,
+        )}
+        style={{ width: `${BAR_COMBO_W}px`, height: `${BAR_COMBO_H}px` }}
+        {...rest}
+      >
+        <BarCombinedGroups groups={groups} />
+      </div>
+    );
+  },
+);
+
+GraphBase.displayName = 'GraphBase';

package/src/components/GraphBase/GraphBase.types.ts

@@ -0,0 +1,101 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Visual chart style for the GraphBase mini-chart indicator.
+ *
+ * Line styles (rendered as SVG sparklines):
+ *   - Elastic          spring-like oscillating curve
+ *   - Noisy            jagged / high-frequency variation
+ *   - Smooth           gentle gradual curve
+ *   - Graph - Combined two overlapping sparklines (primary + secondary series)
+ *
+ * Bar styles (rendered as CSS bars):
+ *   - Bars             plain bar chart, no labels
+ *   - Bars with Text   bar chart with numeric labels above each bar
+ *   - Bar - Combined   grouped bars, two series side by side per group
+ */
+export type GraphBaseStyle =
+  | 'Elastic'
+  | 'Noisy'
+  | 'Smooth'
+  | 'Graph - Combined'
+  | 'Bars'
+  | 'Bars with Text'
+  | 'Bar - Combined';
+
+/**
+ * Which data series indicator to display — controls colour.
+ *
+ * | Value       | Colour                     | Figma token                        |
+ * |-------------|----------------------------|------------------------------------|
+ * | Indicator 1 | green  rgba(27,131,84,1)   | Colors/Primary-SA-Flag/600-primary |
+ * | Indicator 2 | lavender rgba(165,123,186,1)| Colors/Tertiary-Lavendar/400       |
+ * | Combined    | both series                | both tokens                        |
+ */
+export type GraphBaseType = 'Indicator 1' | 'Indicator 2' | 'Combined';
+
+/**
+ * A single data point for the chart.
+ * `value` is always in the range 0–100 (represents percentage of chart height).
+ * `label` is displayed above the bar in "Bars with Text" style.
+ */
+export interface GraphBaseDataPoint {
+  /** Numeric value, 0–100. Bar height or sparkline y-position. */
+  value: number;
+  /** Optional label shown above the bar in "Bars with Text" style. */
+  label?: string;
+}
+
+export interface GraphBaseProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Visual chart style.
+   * @default 'Elastic'
+   */
+  chartStyle?: GraphBaseStyle;
+
+  /**
+   * Which series indicator to show — determines bar and line colour.
+   * @default 'Indicator 1'
+   */
+  type?: GraphBaseType;
+
+  /**
+   * Show a gradient fill area under the sparkline.
+   * Only applies to line-chart styles: Elastic, Noisy, Smooth, Graph - Combined.
+   * Has no visual effect on Bars, Bars with Text, or Bar - Combined.
+   * @default false
+   */
+  background?: boolean;
+
+  /**
+   * Explicit direction — preferred over the `rtl` boolean prop.
+   * When set to 'rtl', the chart is mirrored horizontally (sparklines) or
+   * the bar order is reversed (bar styles).
+   */
+  dir?: 'ltr' | 'rtl';
+
+  /**
+   * Right-to-left layout. Prefer `dir="rtl"` for new usage.
+   * @deprecated Use `dir` instead.
+   * @default false
+   */
+  rtl?: boolean;
+
+  /**
+   * Primary data series. Each value must be 0–100.
+   * - Line styles   → y-positions along the sparkline
+   * - Bar styles    → bar heights (Indicator 1 colour or primary in Combined)
+   *
+   * Falls back to built-in example data when omitted.
+   */
+  data?: GraphBaseDataPoint[];
+
+  /**
+   * Secondary data series (0–100). Used in Combined styles.
+   * - Graph - Combined → second overlapping sparkline (Indicator 2 colour)
+   * - Bar - Combined   → second bar in each group (Indicator 2 colour)
+   *
+   * Falls back to built-in example data when omitted.
+   */
+  data2?: GraphBaseDataPoint[];
+}