sdaia-ui 1.0.1 → 1.0.2

package/src/components/GraphBase/GraphBase.tsx

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

@@ -1,101 +0,0 @@
-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[];
-}