@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/LineChart/LineChart.js

@@ -0,0 +1,486 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  CartesianGrid,
+  Curve,
+  Line as RechartsLine,
+  LineChart as RechartsLineChart,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis
+} from "recharts";
+import { useReducedMotion } from "motion/react";
+import { ChartContainer } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartEmpty } from "../lib/empty.js";
+import { axisLabel } from "../lib/axis.js";
+import { defaultTick } from "../lib/format.js";
+import { Annotation, ReferenceBand, ReferenceLine } from "../lib/annotations.js";
+import { Values, findSlot, resolveValues } from "../lib/values.js";
+import {
+  ChartSonifyButton,
+  Sonify,
+  useChartSonifySeries
+} from "../lib/sonify-control.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartDot } from "../lib/dot.js";
+import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { Brush, ChartBrush } from "../lib/brush.js";
+import { ChartControls, Toolbar } from "../lib/toolbar.js";
+import { useChartZoom } from "../lib/zoom.js";
+import { LoadingIndicator, LoadingShimmer, LOADING_KEY, useLoadingRows } from "../lib/loading.js";
+import {
+  AnimatedDashedStroke,
+  GlowFilter,
+  RevealMask,
+  SeriesGradient
+} from "../lib/paint.js";
+const STROKE_WIDTH = 1.6;
+const BUFFER_DASH = 4;
+const BUFFER_GAP = 3;
+const CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 };
+const LineChartContext = createContext(null);
+function useLineChart() {
+  const context = useContext(LineChartContext);
+  if (!context) throw new Error("A line chart part must be rendered inside <LineChart>");
+  return context;
+}
+function LineChart({
+  config,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  curveType = "linear",
+  animationType = "forward",
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  isLoading = false,
+  loadingPoints,
+  xDataKey,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey);
+  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingPoints);
+  const zoom = useChartZoom({ data, xDataKey });
+  const { brushSlot, toolbarSlot, sonifySlot, chartChildren } = useMemo(() => {
+    const parts = Children.toArray(children);
+    const element = parts.find((child) => isValidElement(child) && child.type === Brush);
+    const props = isValidElement(element) ? element.props : {};
+    return {
+      brushSlot: { present: isValidElement(element), ...props },
+      toolbarSlot: findSlot(parts, Toolbar),
+      sonifySlot: findSlot(parts, Sonify),
+      chartChildren: parts.filter(
+        (child) => !(isValidElement(child) && (child.type === Brush || child.type === Toolbar || child.type === Sonify))
+      )
+    };
+  }, [children]);
+  const columns = useMemo(
+    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),
+    [config]
+  );
+  const showBrush = brushSlot.present && !isLoading;
+  const showToolbar = toolbarSlot !== null && !isLoading;
+  const isEmpty = !isLoading && empty !== false && data.length === 0;
+  const displayData = isLoading ? loadingData : showBrush || showToolbar ? zoom.visibleData : data;
+  const sonifySeries = useChartSonifySeries(
+    sonifySlot,
+    displayData,
+    config,
+    xDataKey
+  );
+  const selectDataKey = useCallback(
+    (next) => {
+      setSelectedDataKey(next);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({ config, rows: displayData, curveType, animationType, isLoading, selectedDataKey, selectDataKey }),
+    [animationType, config, curveType, displayData, isLoading, selectDataKey, selectedDataKey]
+  );
+  return /* @__PURE__ */ jsx(LineChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : { rows: data, rowKey: xDataKey, columns },
+      children: [
+        sonifySlot && /* @__PURE__ */ jsx(ChartSonifyButton, { ...sonifySlot, title, series: sonifySeries }),
+        isEmpty ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__PURE__ */ jsx(
+          ChartControls,
+          {
+            toolbar: showToolbar ? toolbarSlot : null,
+            zoom,
+            title,
+            rows: data,
+            columns,
+            rowKey: xDataKey,
+            children: /* @__PURE__ */ jsx(
+              ChartContainer,
+              {
+                config,
+                footer: showBrush && /* @__PURE__ */ jsx(
+                  ChartBrush,
+                  {
+                    data,
+                    config,
+                    xDataKey,
+                    variant: "line",
+                    curveType,
+                    height: brushSlot.height,
+                    formatLabel: brushSlot.formatLabel,
+                    className: "mt-1",
+                    ...zoom.brushProps,
+                    onChange: (range) => {
+                      zoom.brushProps.onChange(range);
+                      brushSlot.onChange?.(range);
+                    }
+                  }
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  RechartsLineChart,
+                  {
+                    id: chartId,
+                    accessibilityLayer: true,
+                    margin: CHART_MARGIN,
+                    data: displayData,
+                    ...chartProps,
+                    children: [
+                      chartChildren,
+                      isLoading && /* @__PURE__ */ jsx(LoadingLine, { chartId, curveType, onShimmerExit })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function Line({
+  dataKey,
+  strokeVariant = "solid",
+  strokeWidth = STROKE_WIDTH,
+  curveType,
+  animationType,
+  connectNulls = false,
+  isClickable = false,
+  glowing = false,
+  buffer = false,
+  children,
+  lineProps
+}) {
+  const {
+    config,
+    curveType: defaultCurve,
+    animationType: defaultAnimation,
+    isLoading,
+    rows,
+    selectedDataKey,
+    selectDataKey
+  } = useLineChart();
+  const id = useId().replace(/:/g, "");
+  const reduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const resolvedCurve = curveType ?? defaultCurve;
+  const reveal = reduceMotion ? "none" : animationType ?? defaultAnimation;
+  const maskId = reveal === "none" ? void 0 : `${id}-reveal-mask`;
+  const isSelected = selectedDataKey === dataKey;
+  const hasSelection = selectedDataKey !== null;
+  const opacity = hasSelection && !isSelected ? { stroke: 0.3, dot: 0.3 } : { stroke: 1, dot: 1 };
+  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot, maskId);
+  const labels = resolveValues(
+    findSlot(children, Values),
+    rows.map((row) => Number(row[dataKey])).filter(Number.isFinite)
+  );
+  const animateDash = strokeVariant === "animated-dashed" && !hasSelection && !reduceMotion;
+  const isDashed = strokeVariant !== "solid";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("g", { children: [
+      isClickable && // A 15px transparent line under the visible one. A 1.6px stroke is
+      // not a pointer target, and WCAG 2.5.8 asks for 24; this is the
+      // cheapest way to give a hairline a real hit area.
+      /* @__PURE__ */ jsx(
+        RechartsLine,
+        {
+          type: resolvedCurve,
+          dataKey,
+          connectNulls,
+          stroke: "transparent",
+          strokeWidth: 15,
+          dot: false,
+          activeDot: false,
+          isAnimationActive: false,
+          legendType: "none",
+          tooltipType: "none",
+          style: { cursor: "pointer" },
+          onClick: () => selectDataKey(isSelected ? null : dataKey)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        RechartsLine,
+        {
+          type: resolvedCurve,
+          dataKey,
+          connectNulls,
+          strokeOpacity: opacity.stroke,
+          stroke: `url(#${id}-colors-${dataKey})`,
+          filter: glowing ? `url(#${id}-glow-${dataKey})` : void 0,
+          dot,
+          activeDot,
+          strokeWidth,
+          strokeDasharray: buffer ? void 0 : isDashed ? "5 5" : void 0,
+          shape: buffer ? bufferShape : void 0,
+          isAnimationActive: false,
+          style: {
+            ...maskId ? { mask: `url(#${maskId})` } : {},
+            ...isClickable ? { cursor: "pointer" } : {}
+          },
+          onClick: () => {
+            if (!isClickable) return;
+            selectDataKey(isSelected ? null : dataKey);
+          },
+          ...lineProps,
+          children: [
+            animateDash && /* @__PURE__ */ jsx(AnimatedDashedStroke, { dash: 5 }),
+            labels
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      reveal !== "none" && /* @__PURE__ */ jsx(RevealMask, { id, type: reveal }),
+      /* @__PURE__ */ jsx(SeriesGradient, { id, dataKey, config }),
+      glowing && /* @__PURE__ */ jsx(GlowFilter, { id, dataKey, spread: 10, intensity: 2 })
+    ] })
+  ] });
+}
+const Dot = () => null;
+const ActiveDot = () => null;
+function resolveDots(children, id, dataKey, dotOpacity, maskId) {
+  let dot = false;
+  let activeDot = false;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const { variant } = child.props;
+    if (child.type === Dot) {
+      dot = /* @__PURE__ */ jsx(
+        ChartDot,
+        {
+          variant,
+          dataKey,
+          chartId: id,
+          fillOpacity: dotOpacity,
+          maskId
+        }
+      );
+    }
+    if (child.type === ActiveDot) {
+      activeDot = /* @__PURE__ */ jsx(ChartDot, { variant, dataKey, chartId: id, fillOpacity: dotOpacity });
+    }
+  });
+  return { dot, activeDot };
+}
+function isDrawable(point) {
+  return typeof point.x === "number" && typeof point.y === "number";
+}
+function lengthAtX(path, totalLength, targetX) {
+  let low = 0;
+  let high = totalLength;
+  while (high - low > 0.5) {
+    const mid = (low + high) / 2;
+    if (path.getPointAtLength(mid).x < targetX) low = mid;
+    else high = mid;
+  }
+  return (low + high) / 2;
+}
+function bufferShape(props) {
+  const { points, ...rest } = props;
+  if (!points || points.length < 2) return /* @__PURE__ */ jsx(Curve, { ...props });
+  const drawable = points.filter(isDrawable);
+  if (drawable.length < 2) return /* @__PURE__ */ jsx(Curve, { ...props });
+  const splitX = drawable[drawable.length - 2].x;
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      ref: (group) => {
+        const path = group?.querySelector("path");
+        if (!path) return;
+        const total = path.getTotalLength();
+        const solid = lengthAtX(path, total, splitX);
+        const remaining = total - solid;
+        const repeats = Math.ceil(remaining / (BUFFER_DASH + BUFFER_GAP)) + 1;
+        const dashes = Array.from({ length: repeats }, () => `${BUFFER_DASH} ${BUFFER_GAP}`).join(" ");
+        path.setAttribute("stroke-dasharray", `${solid} 0 ${dashes}`);
+      },
+      children: /* @__PURE__ */ jsx(Curve, { ...rest, points: drawable })
+    }
+  );
+}
+function XAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  label,
+  ...rest
+}) {
+  const { isLoading } = useLineChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  width = "auto",
+  tickFormatter = defaultTick,
+  label,
+  ...rest
+}) {
+  const { isLoading } = useLineChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      tickFormatter,
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function Grid({
+  vertical = false,
+  strokeDasharray = "3 3",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { vertical, strokeDasharray, ...rest });
+}
+function Tooltip({ variant, roundness, defaultIndex, cursor = true }) {
+  const { isLoading, selectedDataKey } = useLineChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: cursor ? { strokeDasharray: "3 3", strokeWidth: 1 } : false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { selected: selectedDataKey, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "right",
+  verticalAlign = "top",
+  isClickable = false
+}) {
+  const { selectedDataKey, selectDataKey } = useLineChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant }) {
+  const { isLoading } = useLineChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function LoadingLine({
+  chartId,
+  curveType,
+  onShimmerExit
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsLine,
+      {
+        type: curveType,
+        dataKey: LOADING_KEY,
+        stroke: "currentColor",
+        strokeOpacity: 0.5,
+        strokeWidth: STROKE_WIDTH,
+        isAnimationActive: false,
+        legendType: "none",
+        tooltipType: "none",
+        activeDot: false,
+        dot: false,
+        className: "text-(--ink)",
+        style: { mask: `url(#${chartId}-loading-mask)` }
+      }
+    ),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(LoadingShimmer, { id: chartId, onShimmerExit }) })
+  ] });
+}
+LineChart.Line = Line;
+LineChart.Dot = Dot;
+LineChart.ActiveDot = ActiveDot;
+LineChart.XAxis = XAxis;
+LineChart.YAxis = YAxis;
+LineChart.Grid = Grid;
+LineChart.Tooltip = Tooltip;
+LineChart.Legend = Legend;
+LineChart.Background = Background;
+LineChart.ReferenceLine = ReferenceLine;
+LineChart.ReferenceBand = ReferenceBand;
+LineChart.Annotation = Annotation;
+LineChart.Values = Values;
+LineChart.Brush = Brush;
+LineChart.Toolbar = Toolbar;
+LineChart.Sonify = Sonify;
+var LineChart_default = LineChart;
+export {
+  LineChart,
+  LineChart_default as default
+};
+//# sourceMappingURL=LineChart.js.map

package/dist/charts/LineChart/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/LineChart/LineChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport {\n  CartesianGrid,\n  Curve,\n  Line as RechartsLine,\n  LineChart as RechartsLineChart,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n} from 'recharts'\nimport type { CurveProps } from 'recharts'\nimport { useReducedMotion } from 'motion/react'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { Values, findSlot, resolveValues, type ValuesProps } from '../lib/values'\nimport {\n  ChartSonifyButton,\n  Sonify,\n  useChartSonifySeries,\n  type SonifyProps,\n} from '../lib/sonify-control'\n\n/**\n * The axis props, with `label` narrowed to a string.\n *\n * Recharts' own `label` accepts a render function and a config object, neither\n * of which a call site should be reaching for to name an axis — and both of\n * which would let a consumer opt out of the system's own axis type styling\n * without noticing.\n */\nexport type ChartXAxisProps = Omit<ComponentProps<typeof RechartsXAxis>, 'label'> & {\n  /** What this axis measures. Say the unit here or in the series label, once. */\n  label?: string\n}\n\nexport type ChartYAxisProps = Omit<ComponentProps<typeof RechartsYAxis>, 'label'> & {\n  /** What this axis measures. Say the unit here or in the series label, once. */\n  label?: string\n}\n\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartDot, type ChartDotVariant } from '../lib/dot'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { Brush, ChartBrush, type BrushProps, type ChartBrushRange } from '../lib/brush'\nimport { ChartControls, Toolbar, type ToolbarProps } from '../lib/toolbar'\nimport { useChartZoom } from '../lib/zoom'\nimport { LoadingIndicator, LoadingShimmer, LOADING_KEY, useLoadingRows } from '../lib/loading'\nimport {\n  AnimatedDashedStroke,\n  GlowFilter,\n  RevealMask,\n  SeriesGradient,\n  type ChartRevealType,\n} from '../lib/paint'\nimport type {\n  AreaStrokeVariant,\n  ChartCurveType,\n  ChartLegendSlotProps,\n  ChartTooltipSlotProps,\n} from '../AreaChart/AreaChart'\n\nconst STROKE_WIDTH = 1.6\n\n/** The dash and gap of a buffer segment, in user units. */\nconst BUFFER_DASH = 4\nconst BUFFER_GAP = 3\n\n/**\n * Room around the plot, so the first and last tick labels are not sliced by the\n * container's edge. Recharts' own default is 5px on every side, which is not\n * enough for a label centred on the axis's first point.\n */\nconst CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 }\n\n/** How a line is drawn. Same vocabulary as an area's stroke. */\nexport type LineStrokeVariant = AreaStrokeVariant\n\ninterface LineChartContextValue {\n  config: ChartConfig\n  /** The rows on screen, so a mark can label its own extremes. */\n  rows: Record<string, unknown>[]\n  curveType: ChartCurveType\n  animationType: ChartRevealType\n  isLoading: boolean\n  selectedDataKey: string | null\n  selectDataKey: (dataKey: string | null) => void\n}\n\nconst LineChartContext = createContext<LineChartContextValue | null>(null)\n\nfunction useLineChart(): LineChartContextValue {\n  const context = useContext(LineChartContext)\n  if (!context) throw new Error('A line chart part must be rendered inside <LineChart>')\n  return context\n}\n\ntype ValidateKeys<TData, TConfig> = {\n  [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never\n}\n\nexport interface LineChartProps<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n> {\n  config: TConfig & ValidateKeys<TData, TConfig>\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsLineChart>\n  /**\n   * How the line between two points is interpolated. Every mark inherits it\n   * unless it says otherwise.\n   */\n  curveType?: ChartCurveType\n  animationType?: ChartRevealType\n  /** The series lit on first render. Selection dims every other series. */\n  defaultSelectedDataKey?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selectedDataKey: string | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /** How many points the skeleton draws. */\n  loadingPoints?: number\n  /**\n   * The row field on the category axis. Needed by the brush and by the table\n   * view.\n   */\n  xDataKey?: keyof TData & string\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw.\n   *\n   * Rendered instead of the plot whenever `data` is empty and the chart is not\n   * loading — the state a real dashboard reaches within a week, and the one an\n   * empty pair of axes is indistinguishable from a failed load. `false` keeps\n   * the axes, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * Several series compared over a continuous axis — the shape for \"which of\n * these is going where\".\n *\n * The difference from `<AreaChart>` is what the reader is asked to do: an area\n * says \"read the magnitude under this\", a line says \"compare these against each\n * other\". Filling four overlapping series makes the second question unanswerable,\n * which is why a line chart has no fill variant to offer.\n *\n * @example\n * <LineChart title=\"Visitors per month\" config={config} data={data}>\n *   <LineChart.Grid />\n *   <LineChart.XAxis dataKey=\"month\" />\n *   <LineChart.Tooltip />\n *   <LineChart.Line dataKey=\"desktop\">\n *     <LineChart.Dot variant=\"border\" />\n *   </LineChart.Line>\n * </LineChart>\n */\nexport function LineChart<\n  TData extends Record<string, unknown>,\n  TConfig extends Record<string, ChartConfig[string]>,\n>({\n  config,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  curveType = 'linear',\n  animationType = 'forward',\n  defaultSelectedDataKey = null,\n  onSelectionChange,\n  isLoading = false,\n  loadingPoints,\n  xDataKey,\n  hideDataTable = false,\n  empty,\n}: LineChartProps<TData, TConfig>) {\n  const chartId = useId().replace(/:/g, '')\n  const [selectedDataKey, setSelectedDataKey] = useState<string | null>(defaultSelectedDataKey)\n  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingPoints)\n  // One window, two views of it: the brush strip below the plot and the\n  // toolbar above it both read and write this. See `useChartZoom` for why they\n  // are not two separate windows.\n  const zoom = useChartZoom({ data, xDataKey })\n\n  // The brush, the toolbar and the sonify control are declared as children but\n  // never rendered into the Recharts tree — they live in the figure, outside\n  // the SVG.\n  const { brushSlot, toolbarSlot, sonifySlot, chartChildren } = useMemo(() => {\n    const parts = Children.toArray(children)\n    const element = parts.find((child) => isValidElement(child) && child.type === Brush)\n    const props = (isValidElement(element) ? element.props : {}) as BrushProps\n    return {\n      brushSlot: { present: isValidElement(element), ...props },\n      toolbarSlot: findSlot<ToolbarProps>(parts, Toolbar),\n      sonifySlot: findSlot<SonifyProps>(parts, Sonify),\n      chartChildren: parts.filter(\n        (child) =>\n          !(\n            isValidElement(child) &&\n            (child.type === Brush || child.type === Toolbar || child.type === Sonify)\n          ),\n      ),\n    }\n  }, [children])\n\n  const columns = useMemo(\n    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),\n    [config],\n  )\n\n  const showBrush = brushSlot.present && !isLoading\n  const showToolbar = toolbarSlot !== null && !isLoading\n  // `empty === false` keeps the axes, for a chart whose emptiness is the\n  // reading — a monitoring panel that should show a flat, silent range rather\n  // than a message.\n  const isEmpty = !isLoading && empty !== false && data.length === 0\n  const displayData =\n    isLoading ? loadingData : showBrush || showToolbar ? zoom.visibleData : data\n\n  // The rows on screen, so a brushed range sounds like what it looks like. A\n  // skeleton or an empty chart yields no finite value, which is what leaves the\n  // control disabled rather than playing silence.\n  const sonifySeries = useChartSonifySeries(\n    sonifySlot,\n    displayData as Record<string, unknown>[],\n    config,\n    xDataKey,\n  )\n\n  const selectDataKey = useCallback(\n    (next: string | null) => {\n      setSelectedDataKey(next)\n      onSelectionChange?.(next)\n    },\n    [onSelectionChange],\n  )\n\n  const context = useMemo<LineChartContextValue>(\n    () => ({ config, rows: displayData as Record<string, unknown>[], curveType, animationType, isLoading, selectedDataKey, selectDataKey }),\n    [animationType, config, curveType, displayData, isLoading, selectDataKey, selectedDataKey],\n  )\n\n  return (\n    <LineChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : { rows: data, rowKey: xDataKey, columns }\n        }\n      >\n        {sonifySlot && (\n          <ChartSonifyButton {...sonifySlot} title={title} series={sonifySeries} />\n        )}\n        {isEmpty ? (\n          <ChartEmpty {...(empty || {})} />\n        ) : (\n        <ChartControls\n          toolbar={showToolbar ? toolbarSlot : null}\n          zoom={zoom}\n          title={title}\n          rows={data}\n          columns={columns}\n          rowKey={xDataKey}\n        >\n        <ChartContainer\n          config={config}\n          footer={\n            showBrush && (\n              <ChartBrush\n                data={data}\n                config={config}\n                xDataKey={xDataKey}\n                variant=\"line\"\n                curveType={curveType}\n                height={brushSlot.height}\n                formatLabel={brushSlot.formatLabel}\n                className=\"mt-1\"\n                {...zoom.brushProps}\n                onChange={(range: ChartBrushRange) => {\n                  zoom.brushProps.onChange(range)\n                  brushSlot.onChange?.(range)\n                }}\n              />\n            )\n          }\n        >\n          <RechartsLineChart\n            id={chartId}\n            accessibilityLayer\n            margin={CHART_MARGIN}\n            data={displayData}\n            {...chartProps}\n          >\n            {chartChildren}\n            {isLoading && (\n              <LoadingLine chartId={chartId} curveType={curveType} onShimmerExit={onShimmerExit} />\n            )}\n          </RechartsLineChart>\n        </ChartContainer>\n        </ChartControls>\n        )}\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </LineChartContext.Provider>\n  )\n}\n\nexport interface LineProps {\n  dataKey: string\n  strokeVariant?: LineStrokeVariant\n  strokeWidth?: number\n  curveType?: ChartCurveType\n  animationType?: ChartRevealType\n  connectNulls?: boolean\n  isClickable?: boolean\n  /** A halo around the line — for the one series that is the point of the figure. */\n  glowing?: boolean\n  /**\n   * Draws the LAST segment dashed.\n   *\n   * The idiom for a projection or a period still open: the line reaches the\n   * same point either way, but the last leg is visibly a different kind of fact.\n   */\n  buffer?: boolean\n  children?: ReactNode\n  lineProps?: ComponentProps<typeof RechartsLine>\n}\n\n/** One line series, with its own gradient, glow and reveal scoped to its id. */\nfunction Line({\n  dataKey,\n  strokeVariant = 'solid',\n  strokeWidth = STROKE_WIDTH,\n  curveType,\n  animationType,\n  connectNulls = false,\n  isClickable = false,\n  glowing = false,\n  buffer = false,\n  children,\n  lineProps,\n}: LineProps) {\n  const {\n    config,\n    curveType: defaultCurve,\n    animationType: defaultAnimation,\n    isLoading,\n    rows,\n    selectedDataKey,\n    selectDataKey,\n  } = useLineChart()\n  const id = useId().replace(/:/g, '')\n  const reduceMotion = useReducedMotion()\n\n  if (isLoading) return null\n\n  const resolvedCurve = curveType ?? defaultCurve\n  const reveal: ChartRevealType = reduceMotion ? 'none' : (animationType ?? defaultAnimation)\n  const maskId = reveal === 'none' ? undefined : `${id}-reveal-mask`\n\n  const isSelected = selectedDataKey === dataKey\n  const hasSelection = selectedDataKey !== null\n  const opacity = hasSelection && !isSelected ? { stroke: 0.3, dot: 0.3 } : { stroke: 1, dot: 1 }\n\n  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot, maskId)\n  const labels = resolveValues(\n    findSlot<ValuesProps>(children, Values),\n    rows.map((row) => Number(row[dataKey])).filter(Number.isFinite),\n  )\n\n  const animateDash = strokeVariant === 'animated-dashed' && !hasSelection && !reduceMotion\n  const isDashed = strokeVariant !== 'solid'\n\n  return (\n    <>\n      <g>\n        {isClickable && (\n          // A 15px transparent line under the visible one. A 1.6px stroke is\n          // not a pointer target, and WCAG 2.5.8 asks for 24; this is the\n          // cheapest way to give a hairline a real hit area.\n          <RechartsLine\n            type={resolvedCurve}\n            dataKey={dataKey}\n            connectNulls={connectNulls}\n            stroke=\"transparent\"\n            strokeWidth={15}\n            dot={false}\n            activeDot={false}\n            isAnimationActive={false}\n            legendType=\"none\"\n            tooltipType=\"none\"\n            style={{ cursor: 'pointer' }}\n            onClick={() => selectDataKey(isSelected ? null : dataKey)}\n          />\n        )}\n        <RechartsLine\n          type={resolvedCurve}\n          dataKey={dataKey}\n          connectNulls={connectNulls}\n          strokeOpacity={opacity.stroke}\n          stroke={`url(#${id}-colors-${dataKey})`}\n          filter={glowing ? `url(#${id}-glow-${dataKey})` : undefined}\n          dot={dot}\n          activeDot={activeDot}\n          strokeWidth={strokeWidth}\n          // A buffer line writes its own dasharray from the measured path, so\n          // the static one has to stay out of its way.\n          strokeDasharray={buffer ? undefined : isDashed ? '5 5' : undefined}\n          shape={buffer ? bufferShape : undefined}\n          isAnimationActive={false}\n          style={{\n            ...(maskId ? { mask: `url(#${maskId})` } : {}),\n            ...(isClickable ? { cursor: 'pointer' } : {}),\n          }}\n          onClick={() => {\n            if (!isClickable) return\n            selectDataKey(isSelected ? null : dataKey)\n          }}\n          {...lineProps}\n        >\n          {animateDash && <AnimatedDashedStroke dash={5} />}\n          {labels}\n        </RechartsLine>\n      </g>\n      <defs>\n        {reveal !== 'none' && <RevealMask id={id} type={reveal} />}\n        <SeriesGradient id={id} dataKey={dataKey} config={config} />\n        {glowing && <GlowFilter id={id} dataKey={dataKey} spread={10} intensity={2} />}\n      </defs>\n    </>\n  )\n}\n\nexport interface DotProps {\n  variant?: ChartDotVariant\n}\n\n/** The resting point marker for the line it is composed inside. A slot. */\nconst Dot: FC<DotProps> = () => null\n\n/** The marker under the pointer. */\nconst ActiveDot: FC<DotProps> = () => null\n\nfunction resolveDots(\n  children: ReactNode,\n  id: string,\n  dataKey: string,\n  dotOpacity: number,\n  maskId: string | undefined,\n) {\n  let dot: ComponentProps<typeof RechartsLine>['dot'] = false\n  let activeDot: ComponentProps<typeof RechartsLine>['activeDot'] = false\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return\n    const { variant } = (child as ReactElement<DotProps>).props\n\n    if (child.type === Dot) {\n      dot = (\n        <ChartDot\n          variant={variant}\n          dataKey={dataKey}\n          chartId={id}\n          fillOpacity={dotOpacity}\n          maskId={maskId}\n        />\n      )\n    }\n    if (child.type === ActiveDot) {\n      activeDot = (\n        <ChartDot variant={variant} dataKey={dataKey} chartId={id} fillOpacity={dotOpacity} />\n      )\n    }\n  })\n\n  return { dot, activeDot }\n}\n\ntype CurvePoint = NonNullable<NonNullable<CurveProps['points']>[number]>\ntype DrawablePoint = CurvePoint & { x: number; y: number }\n\nfunction isDrawable(point: CurvePoint): point is DrawablePoint {\n  return typeof point.x === 'number' && typeof point.y === 'number'\n}\n\n/**\n * Binary-searches a path for the length at which it reaches `targetX`.\n *\n * `getPointAtLength` is the browser's own curve solver, so this is exact for\n * every curve type rather than only for straight segments — which is what an\n * arithmetic split on the point list would give.\n */\nfunction lengthAtX(path: SVGPathElement, totalLength: number, targetX: number): number {\n  let low = 0\n  let high = totalLength\n  // Half a pixel is well under what a dash boundary can show.\n  while (high - low > 0.5) {\n    const mid = (low + high) / 2\n    if (path.getPointAtLength(mid).x < targetX) low = mid\n    else high = mid\n  }\n  return (low + high) / 2\n}\n\n/**\n * A line whose last segment is dashed and whose body is not.\n *\n * `stroke-dasharray` has no way to say \"solid until here\": the pattern repeats\n * from the path's start. So the solid run is written as a single leading dash of\n * exactly the measured length, followed by enough dash/gap pairs to cover the\n * rest — which needs the path's real length, which needs the DOM.\n *\n * The ref callback runs during commit, before paint, so there is no frame where\n * the line is drawn undashed.\n */\nfunction bufferShape(props: CurveProps) {\n  const { points, ...rest } = props\n  if (!points || points.length < 2) return <Curve {...props} />\n\n  const drawable = points.filter(isDrawable)\n  if (drawable.length < 2) return <Curve {...props} />\n\n  const splitX = drawable[drawable.length - 2]!.x\n\n  return (\n    <g\n      ref={(group) => {\n        const path = group?.querySelector('path')\n        if (!path) return\n\n        const total = path.getTotalLength()\n        const solid = lengthAtX(path, total, splitX)\n        const remaining = total - solid\n        const repeats = Math.ceil(remaining / (BUFFER_DASH + BUFFER_GAP)) + 1\n        const dashes = Array.from({ length: repeats }, () => `${BUFFER_DASH} ${BUFFER_GAP}`).join(' ')\n\n        path.setAttribute('stroke-dasharray', `${solid} 0 ${dashes}`)\n      }}\n    >\n      <Curve {...rest} points={drawable} />\n    </g>\n  )\n}\n\n/** The category axis. */\nfunction XAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  label,\n  ...rest\n}: ChartXAxisProps) {\n  const { isLoading } = useLineChart()\n  if (isLoading) return null\n  return (\n    <RechartsXAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The value axis. */\nfunction YAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  width = 'auto',\n  tickFormatter = defaultTick,\n  label,\n  ...rest\n}: ChartYAxisProps) {\n  const { isLoading } = useLineChart()\n  if (isLoading) return null\n  return (\n    <RechartsYAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      width={width}\n      tickFormatter={tickFormatter}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Horizontal dashed rules. */\nfunction Grid({\n  vertical = false,\n  strokeDasharray = '3 3',\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  return <CartesianGrid vertical={vertical} strokeDasharray={strokeDasharray} {...rest} />\n}\n\n/** The hover panel, with a crosshair along the axis. */\nfunction Tooltip({ variant, roundness, defaultIndex, cursor = true }: ChartTooltipSlotProps) {\n  const { isLoading, selectedDataKey } = useLineChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      cursor={cursor ? { strokeDasharray: '3 3', strokeWidth: 1 } : false}\n      content={\n        <ChartTooltipContent selected={selectedDataKey} roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/** The key. Required above one series. */\nfunction Legend({\n  variant,\n  align = 'right',\n  verticalAlign = 'top',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { selectedDataKey, selectDataKey } = useLineChart()\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedDataKey}\n          onSelectChange={selectDataKey}\n          isClickable={isClickable}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the plot. */\nfunction Background({ variant }: { variant: ChartBackgroundVariant }) {\n  const { isLoading } = useLineChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** The skeleton drawn in place of the real lines. */\nfunction LoadingLine({\n  chartId,\n  curveType,\n  onShimmerExit,\n}: {\n  chartId: string\n  curveType: ChartCurveType\n  onShimmerExit: () => void\n}) {\n  return (\n    <>\n      <RechartsLine\n        type={curveType}\n        dataKey={LOADING_KEY}\n        stroke=\"currentColor\"\n        strokeOpacity={0.5}\n        strokeWidth={STROKE_WIDTH}\n        isAnimationActive={false}\n        legendType=\"none\"\n        tooltipType=\"none\"\n        activeDot={false}\n        dot={false}\n        className=\"text-(--ink)\"\n        style={{ mask: `url(#${chartId}-loading-mask)` }}\n      />\n      <defs>\n        <LoadingShimmer id={chartId} onShimmerExit={onShimmerExit} />\n      </defs>\n    </>\n  )\n}\n\nLineChart.Line = Line\nLineChart.Dot = Dot\nLineChart.ActiveDot = ActiveDot\nLineChart.XAxis = XAxis\nLineChart.YAxis = YAxis\nLineChart.Grid = Grid\nLineChart.Tooltip = Tooltip\nLineChart.Legend = Legend\nLineChart.Background = Background\nLineChart.ReferenceLine = ReferenceLine\nLineChart.ReferenceBand = ReferenceBand\nLineChart.Annotation = Annotation\nLineChart.Values = Values\nLineChart.Brush = Brush\nLineChart.Toolbar = Toolbar\nLineChart.Sonify = Sonify\n\nexport default LineChart\n"],"mappings":"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","names":[]}