sdaia-ui 1.0.1 → 1.0.2

package/src/components/LineChart/LineChart.tsx

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

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