sdaia-ui 1.0.1

package/src/components/LineChart/LineChart.tsx

@@ -0,0 +1,592 @@
+'use client';
+
+import { type MouseEvent, forwardRef, useMemo, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { LABEL_COLOR } from '../SeriesLabel/SeriesLabel.variants';
+import { XAxis } from '../XAxis';
+import { YAxis } from '../YAxis';
+import type { LineChartProps } from './LineChart.types';
+import type { GraphStyle } from './LineChart.types';
+import {
+  ROOT_BASE,
+  CHART_BODY,
+  Y_AND_LINES_ROW,
+  LINES_WRAPPER,
+  GRID_LINE,
+  GRID_LINE_BASELINE,
+  SVG_OVERLAY,
+  SERIES_1_COLOR,
+  SERIES_2_COLOR,
+  GOAL_COLOR,
+  DEFAULT_HEIGHTS,
+  DEFAULT_DATA,
+  LINE_CHART_LEGEND_ROW,
+  LEGEND_SWATCH_WIDTH_PX,
+  LEGEND_SWATCH_HEIGHT_PX,
+  toPolylinePoints,
+  toForecastFillPoints,
+  toSmoothPath,
+  toSmoothFillPath,
+  toSmoothForecastFillPath,
+  GRAPH_STYLE_TENSION,
+  getPointX,
+  getPointY,
+  computeYDomain,
+  collectDefaultSeriesYs,
+} from './LineChart.variants';
+import type {
+  InsightData,
+  ComparisonData,
+  ScoreData,
+  ForecastData,
+} from './LineChart.variants';
+import { BeakBottom, BeakTop } from '../../icons/IconFactory';
+import { AXIS_LABELS } from '../XAxis/XAxis.variants';
+
+type LineChartLegendSwatchProps = {
+  color: string;
+  label: string;
+  rtl: boolean;
+};
+
+/**
+ * Swatch + label. Explicit `dir` so flex places the swatch at inline-start:
+ * LTR → line left; RTL → line right (Arabic reading order).
+ */
+function LineChartLegendSwatch({ color, label, rtl }: LineChartLegendSwatchProps) {
+  return (
+    <div
+      className="flex items-center gap-spacing-sm shrink-0"
+      dir={rtl ? 'rtl' : 'ltr'}
+    >
+      <span
+        className="shrink-0 rounded-full"
+        style={{
+          width: `${LEGEND_SWATCH_WIDTH_PX}px`,
+          height: `${LEGEND_SWATCH_HEIGHT_PX}px`,
+          backgroundColor: color,
+        }}
+        aria-hidden="true"
+      />
+      <p className={cn('shrink-0 whitespace-nowrap', LABEL_COLOR)}>{label}</p>
+    </div>
+  );
+}
+
+/**
+ * LineChart
+ *
+ * A full-width line chart composed from YAxis, XAxis, and an SVG line area.
+ * Legend (optional) uses rounded horizontal swatches + labels; placement via
+ * `legendPosition` (`bottom-center` by default).
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Set `rtl` prop. `dir="rtl"` is applied to the root element. The SVG data
+ *   is mirrored horizontally via an inner `<g transform>` so the line direction
+ *   matches the RTL x-axis — no DOM reordering needed.
+ *
+ * ── Dark mode ─────────────────────────────────────────────────────────────────
+ *   Grid lines and axis labels swap via `html.dark`. Series colours are
+ *   data-viz palette — identical in light and dark mode.
+ *
+ * @example
+ * <LineChart type="Comparison" xAxisData="7 Week Days" />
+ * <LineChart type="Forecast" xAxisData="7 Week Days" />
+ * <LineChart type="Score" rtl />
+ */
+export const LineChart = forwardRef<HTMLDivElement, LineChartProps>(
+  function LineChart(
+    {
+      type = 'Insight',
+      xAxisData = '7 Week Days',
+      rtl = false,
+      graphStyle = 'smooth',
+      title,
+      height,
+      showLegend = true,
+      legendPosition = 'bottom-center',
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const resolvedHeight = height ?? DEFAULT_HEIGHTS[xAxisData];
+
+    const isInsight    = type === 'Insight';
+    const isComparison = type === 'Comparison';
+    const isScore      = type === 'Score';
+    const isForecast   = type === 'Forecast';
+
+    const tension = GRAPH_STYLE_TENSION[graphStyle] ?? 0.25;
+    const isSmooth = graphStyle !== 'noisy';
+
+    const yDomain = useMemo(
+      () => computeYDomain(collectDefaultSeriesYs(type)),
+      [type],
+    );
+    const yAxisTicks = useMemo(
+      () => [
+        String(Math.round(yDomain.max)),
+        String(Math.round((yDomain.min + yDomain.max) / 2)),
+        String(Math.round(yDomain.min)),
+      ],
+      [yDomain],
+    );
+
+    // Mirror transform for RTL — flips SVG x-axis without DOM reordering
+    const rtlTransform = rtl ? 'scale(-1,1) translate(-100,0)' : undefined;
+
+    // ── Hover state ────────────────────────────────────────────────────────────
+    const svgRef = useRef<SVGSVGElement>(null);
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+    const seriesLength =
+      isInsight    ? (DEFAULT_DATA.Insight    as InsightData).series1.length :
+      isComparison ? (DEFAULT_DATA.Comparison as ComparisonData).series1.length :
+      isScore      ? (DEFAULT_DATA.Score      as ScoreData).series1.length :
+      isForecast   ? (DEFAULT_DATA.Forecast   as ForecastData).totalPoints : 7;
+
+    const handleMouseMove = (e: MouseEvent<SVGSVGElement>) => {
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      let rawX = (e.clientX - rect.left) / rect.width;
+      // Flip for RTL — highest index is on the left in screen space
+      if (rtl) rawX = 1 - rawX;
+      const idx = Math.round(rawX * (seriesLength - 1));
+      setHoveredIndex(Math.max(0, Math.min(seriesLength - 1, idx)));
+    };
+
+    // Compute the SVG coords and raw values for the hover indicator
+    let hoverPoint: { x: number; y1: number; y2?: number; val1: number; val2?: number } | null = null;
+    if (hoveredIndex !== null) {
+      const x = getPointX(hoveredIndex, seriesLength);
+      if (isInsight) {
+        const d = DEFAULT_DATA.Insight as InsightData;
+        const val1 = d.series1[hoveredIndex];
+        hoverPoint = { x, y1: getPointY(val1, yDomain), val1 };
+      } else if (isComparison) {
+        const d = DEFAULT_DATA.Comparison as ComparisonData;
+        const val1 = d.series1[hoveredIndex];
+        const val2 = d.series2[hoveredIndex];
+        hoverPoint = {
+          x,
+          y1: getPointY(val1, yDomain),
+          val1,
+          y2: getPointY(val2, yDomain),
+          val2,
+        };
+      } else if (isScore) {
+        const d = DEFAULT_DATA.Score as ScoreData;
+        const val1 = d.series1[hoveredIndex];
+        hoverPoint = { x, y1: getPointY(val1, yDomain), val1 };
+      } else if (isForecast) {
+        const d = DEFAULT_DATA.Forecast as ForecastData;
+        const full = [...d.past, ...d.future.slice(1)];
+        const val1 = full[hoveredIndex];
+        if (val1 !== undefined) hoverPoint = { x, y1: getPointY(val1, yDomain), val1 };
+      }
+    }
+
+    // HTML x position — flipped for RTL so the dot tracks physical mouse position
+    const htmlLeft = hoverPoint ? (rtl ? 100 - hoverPoint.x : hoverPoint.x) : 0;
+    // Show tooltip below the dot when value is very high (dot near top of chart)
+    const tooltipBelow = hoverPoint ? hoverPoint.y1 < 18 : false;
+    const dayLabel = hoveredIndex !== null ? (AXIS_LABELS[xAxisData][hoveredIndex] ?? '') : '';
+
+    const legendOnTop = showLegend && legendPosition.startsWith('top-');
+    const legendOnBottom = showLegend && legendPosition.startsWith('bottom-');
+
+    const legendRow = showLegend ? (
+      <div
+        className={LINE_CHART_LEGEND_ROW[legendPosition]}
+        dir={rtl ? 'rtl' : 'ltr'}
+      >
+        <LineChartLegendSwatch color={SERIES_1_COLOR} label="Series 1" rtl={rtl} />
+        {isComparison && (
+          <LineChartLegendSwatch color={SERIES_2_COLOR} label="Series 2" rtl={rtl} />
+        )}
+        {isScore && (
+          <LineChartLegendSwatch color={GOAL_COLOR} label="Goal" rtl={rtl} />
+        )}
+        {isForecast && (
+          <LineChartLegendSwatch color={SERIES_1_COLOR} label="Forecast" rtl={rtl} />
+        )}
+      </div>
+    ) : null;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="line-chart"
+        dir={rtl ? 'rtl' : undefined}
+        className={cn(ROOT_BASE, className)}
+        style={{ height: `${resolvedHeight}px` }}
+        {...rest}
+      >
+        {/* ── Title ─────────────────────────────────────────────────────────── */}
+        {title && (
+          <p className="text-text-sm font-[500] text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)] w-full shrink-0">
+            {title}
+          </p>
+        )}
+
+        {legendOnTop && legendRow}
+
+        {/* ── Chart body ────────────────────────────────────────────────────── */}
+        <div className={CHART_BODY}>
+
+          {/* Y-axis + line area row */}
+          <div className={Y_AND_LINES_ROW}>
+
+            {/* Y-axis — fills the row height */}
+            <YAxis value="3" ticks={yAxisTicks} rtl={rtl} style={{ height: '100%' }} />
+
+            {/* Line area — grid lines + SVG overlay */}
+            <div className={LINES_WRAPPER}>
+
+              {/* Horizontal grid lines — top / mid dashed; bottom baseline (x-axis) solid */}
+              <div className={GRID_LINE} aria-hidden="true" />
+              <div className={GRID_LINE} aria-hidden="true" />
+              <div className={GRID_LINE_BASELINE} aria-hidden="true" />
+
+              {/* SVG chart area */}
+              <svg
+                ref={svgRef}
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+                className={cn(SVG_OVERLAY, 'cursor-crosshair')}
+                aria-hidden="true"
+                onMouseMove={handleMouseMove}
+                onMouseLeave={() => setHoveredIndex(null)}
+              >
+                <g transform={rtlTransform}>
+
+                  {/* ── Insight ─────────────────────────────────────────── */}
+                  {isInsight && (() => {
+                    const d = DEFAULT_DATA.Insight as InsightData;
+                    const n = d.series1.length;
+                    return (
+                      <>
+                        <defs>
+                          <linearGradient id="lc-insight-grad" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%"   stopColor={SERIES_1_COLOR} stopOpacity="0.18" />
+                            <stop offset="100%" stopColor={SERIES_1_COLOR} stopOpacity="0.02" />
+                          </linearGradient>
+                        </defs>
+
+                        {/* Gradient fill under line */}
+                        {isSmooth ? (
+                          <path
+                            d={toSmoothFillPath(d.series1, n, 0, tension, yDomain)}
+                            fill="url(#lc-insight-grad)"
+                          />
+                        ) : (
+                          <polygon
+                            points={`${toPolylinePoints(d.series1, n, 0, yDomain)} 100,100 0,100`}
+                            fill="url(#lc-insight-grad)"
+                          />
+                        )}
+
+                        {/* Line */}
+                        {isSmooth ? (
+                          <path
+                            d={toSmoothPath(d.series1, n, 0, tension, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        ) : (
+                          <polyline
+                            points={toPolylinePoints(d.series1, n, 0, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        )}
+                      </>
+                    );
+                  })()}
+
+                  {/* ── Comparison ──────────────────────────────────────── */}
+                  {isComparison && (() => {
+                    const d = DEFAULT_DATA.Comparison as ComparisonData;
+                    const n = d.series1.length;
+                    const lineProp = (pts: number[], color: string) =>
+                      isSmooth ? (
+                        <path
+                          d={toSmoothPath(pts, n, 0, tension, yDomain)}
+                          fill="none"
+                          stroke={color}
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          vectorEffect="non-scaling-stroke"
+                        />
+                      ) : (
+                        <polyline
+                          points={toPolylinePoints(pts, n, 0, yDomain)}
+                          fill="none"
+                          stroke={color}
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          vectorEffect="non-scaling-stroke"
+                        />
+                      );
+                    return (
+                      <>
+                        {lineProp(d.series2, SERIES_2_COLOR)}
+                        {lineProp(d.series1, SERIES_1_COLOR)}
+                      </>
+                    );
+                  })()}
+
+                  {/* ── Score ───────────────────────────────────────────── */}
+                  {isScore && (() => {
+                    const d = DEFAULT_DATA.Score as ScoreData;
+                    const n = d.series1.length;
+                    const goalY = getPointY(d.goal, yDomain);
+                    return (
+                      <>
+                        {/* Goal reference line */}
+                        <line
+                          x1="0"   y1={goalY}
+                          x2="100" y2={goalY}
+                          stroke={GOAL_COLOR}
+                          strokeWidth="1.5"
+                          strokeDasharray="4 2"
+                          vectorEffect="non-scaling-stroke"
+                        />
+                        {/* Score line */}
+                        {isSmooth ? (
+                          <path
+                            d={toSmoothPath(d.series1, n, 0, tension, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        ) : (
+                          <polyline
+                            points={toPolylinePoints(d.series1, n, 0, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        )}
+                      </>
+                    );
+                  })()}
+
+                  {/* ── Forecast ────────────────────────────────────────── */}
+                  {isForecast && (() => {
+                    const d = DEFAULT_DATA.Forecast as ForecastData;
+                    return (
+                      <>
+                        {/* Forecast region fill */}
+                        {isSmooth ? (
+                          <path
+                            d={toSmoothForecastFillPath(
+                              d.future,
+                              d.splitIndex,
+                              d.totalPoints,
+                              tension,
+                              yDomain,
+                            )}
+                            fill={SERIES_1_COLOR}
+                            fillOpacity="0.12"
+                          />
+                        ) : (
+                          <polygon
+                            points={toForecastFillPoints(
+                              d.future,
+                              d.splitIndex,
+                              d.totalPoints,
+                              yDomain,
+                            )}
+                            fill={SERIES_1_COLOR}
+                            fillOpacity="0.12"
+                          />
+                        )}
+
+                        {/* Past line (solid) */}
+                        {isSmooth ? (
+                          <path
+                            d={toSmoothPath(d.past, d.totalPoints, 0, tension, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        ) : (
+                          <polyline
+                            points={toPolylinePoints(d.past, d.totalPoints, 0, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        )}
+
+                        {/* Future line (dashed) */}
+                        {isSmooth ? (
+                          <path
+                            d={toSmoothPath(d.future, d.totalPoints, d.splitIndex, tension, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeDasharray="6 3"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        ) : (
+                          <polyline
+                            points={toPolylinePoints(d.future, d.totalPoints, d.splitIndex, yDomain)}
+                            fill="none"
+                            stroke={SERIES_1_COLOR}
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeDasharray="6 3"
+                            vectorEffect="non-scaling-stroke"
+                          />
+                        )}
+                      </>
+                    );
+                  })()}
+
+                  {/* ── Hover crosshair (SVG) ───────────────────────────── */}
+                  {hoverPoint && (
+                    <line
+                      x1={hoverPoint.x} y1="0"
+                      x2={hoverPoint.x} y2="100"
+                      stroke="#9ca3af"
+                      strokeWidth="1"
+                      strokeDasharray="2 3"
+                      vectorEffect="non-scaling-stroke"
+                      style={{ pointerEvents: 'none' }}
+                    />
+                  )}
+
+                </g>
+              </svg>
+
+              {/* ── Hover dot + tooltip (HTML, perfectly circular) ──── */}
+              {hoverPoint && (
+                <>
+                  {/* Series 1 dot */}
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: `${htmlLeft}%`,
+                      top: `${hoverPoint.y1}%`,
+                      transform: 'translate(-50%, -50%)',
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      backgroundColor: SERIES_1_COLOR,
+                      border: '2px solid white',
+                      boxShadow: '0 0 0 1px rgba(27,131,84,0.3)',
+                      pointerEvents: 'none',
+                      zIndex: 10,
+                    }}
+                  />
+
+                  {/* Series 2 dot — Comparison only */}
+                  {hoverPoint.y2 !== undefined && (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        left: `${htmlLeft}%`,
+                        top: `${hoverPoint.y2}%`,
+                        transform: 'translate(-50%, -50%)',
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        backgroundColor: SERIES_2_COLOR,
+                        border: '2px solid white',
+                        boxShadow: '0 0 0 1px rgba(165,123,186,0.3)',
+                        pointerEvents: 'none',
+                        zIndex: 10,
+                      }}
+                    />
+                  )}
+
+                  {/* Tooltip label */}
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: `${htmlLeft}%`,
+                      top: `${hoverPoint.y1}%`,
+                      transform: tooltipBelow
+                        ? 'translate(-50%, 12px)'
+                        : 'translate(-50%, calc(-100% - 12px))',
+                      pointerEvents: 'none',
+                      zIndex: 20,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {tooltipBelow && (
+                      <div className="text-white dark:text-[rgba(31,42,55,1)] flex justify-center">
+                        <BeakTop />
+                      </div>
+                    )}
+
+                    <div
+                      className={cn(
+                        'flex items-center gap-spacing-xs px-spacing-md py-spacing-sm whitespace-nowrap rounded-[8px]',
+                        'bg-white dark:bg-[rgba(31,42,55,1)]',
+                        'text-text-xs font-[500] text-[rgba(31,42,55,1)] dark:text-[rgba(249,250,251,1)]',
+                        '[filter:drop-shadow(0px_4px_6px_rgba(16,24,40,0.03))_drop-shadow(0px_12px_16px_rgba(16,24,40,0.08))]',
+                      )}
+                    >
+                      <span>{dayLabel}</span>
+                      <span className="text-[rgba(156,163,175,1)]">·</span>
+                      <span>
+                        {hoverPoint.val2 !== undefined
+                          ? `${hoverPoint.val1} / ${hoverPoint.val2}`
+                          : hoverPoint.val1}
+                      </span>
+                    </div>
+
+                    {!tooltipBelow && (
+                      <div className="text-white dark:text-[rgba(31,42,55,1)] flex justify-center">
+                        <BeakBottom />
+                      </div>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* X-axis */}
+          <XAxis data={xAxisData} rtl={rtl} />
+
+          {legendOnBottom && legendRow}
+        </div>
+      </div>
+    );
+  },
+);
+
+LineChart.displayName = 'LineChart';

package/src/components/LineChart/LineChart.types.ts

@@ -0,0 +1,78 @@
+import type { HTMLAttributes } from 'react';
+import type { XAxisDataType } from '../XAxis/XAxis.types';
+
+export type LineChartType = 'Insight' | 'Comparison' | 'Score' | 'Forecast';
+
+/**
+ * Controls line interpolation style — matches Figma _Graph Base style variants.
+ * - noisy   → straight line segments (angular, thorny)
+ * - smooth  → gentle Catmull-Rom curves
+ * - elastic → more pronounced, bouncy curves
+ */
+export type GraphStyle = 'noisy' | 'smooth' | 'elastic';
+
+/**
+ * Legend row placement relative to the chart.
+ * - `bottom-*` — below the X-axis (default).
+ * - `top-*` — below the optional title, above the plot.
+ */
+export type LineChartLegendPosition =
+  | 'bottom-center'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-center'
+  | 'top-left'
+  | 'top-right';
+
+export interface LineChartProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Chart variant.
+   * - Insight     — single line with a highlighted data point
+   * - Comparison  — two series lines for comparing datasets
+   * - Score       — single line with a goal reference line
+   * - Forecast    — solid past line + dashed future projection
+   * @default 'Insight'
+   */
+  type?: LineChartType;
+
+  /**
+   * X-axis label preset.
+   * @default '7 Week Days'
+   */
+  xAxisData?: XAxisDataType;
+
+  /**
+   * Render in right-to-left orientation.
+   * @default false
+   */
+  rtl?: boolean;
+
+  /**
+   * Optional chart title rendered above the legend.
+   */
+  title?: string;
+
+  /**
+   * Total chart height in px (including legend + x-axis).
+   * Defaults to a preset based on xAxisData.
+   */
+  height?: number;
+
+  /**
+   * Line interpolation style — matches Figma _Graph Base style variants.
+   * @default 'smooth'
+   */
+  graphStyle?: GraphStyle;
+
+  /**
+   * When false, no legend row is rendered.
+   * @default true
+   */
+  showLegend?: boolean;
+
+  /**
+   * Where to place the legend (horizontal line swatch + label per series).
+   * @default 'bottom-center'
+   */
+  legendPosition?: LineChartLegendPosition;
+}