@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-ZATZSMQY.mjs

@@ -0,0 +1,620 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartSeries
+} from "./chunk-ST4NN6XV.mjs";
+import {
+  ChartTooltip
+} from "./chunk-IPI45RUK.mjs";
+import {
+  ChartAxis
+} from "./chunk-XZFHPHV5.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  ChartGrid
+} from "./chunk-2PC625DX.mjs";
+import {
+  ChartLegend
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/LineChart.tsx
+import { useId, useMemo, useState, useCallback } from "react";
+import {
+  classNames,
+  createLinearScale,
+  createPointScale,
+  getStableChartGradientPrefix,
+  getNumberExtent,
+  linePointTransitionClasses,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
+  buildChartSeriesKeys,
+  resolveMultiSeriesTooltipContent,
+  resolveSeriesData,
+  defaultSeriesXYTooltipFormatter,
+  defaultChartSeriesName,
+  layoutLineSeries,
+  getCartesianChartShellClasses,
+  findNearestSeriesPoint,
+  flattenChartPoints,
+  chartPointTabIndex,
+  nextChartPointRef,
+  isChartNavigationKey,
+  isNumericChartDomain,
+  CHART_SURFACE_FILL,
+  LINE_DRAW_CLASS,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LineChart = ({
+  width = 320,
+  height = 200,
+  padding = DEFAULT_CHART_PADDING,
+  responsive = false,
+  data,
+  series,
+  xScale: xScaleProp,
+  yScale: yScaleProp,
+  lineColor = "var(--tiger-primary,#2563eb)",
+  strokeWidth = 2,
+  curve = "linear",
+  showPoints = true,
+  pointSize = 4,
+  pointColor,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = false,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  showArea = false,
+  areaOpacity = 0.15,
+  pointHollow = false,
+  animated = false,
+  strokeGradient = false,
+  pointGradient = false,
+  tooltipFormatter,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSeriesClick,
+  onSeriesHover,
+  onPointClick,
+  onPointHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("line", gradientId),
+    [gradientId]
+  );
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const resolvedSeries = useMemo(
+    () => resolveSeriesData(series, data, {
+      // Single-series colors (`lineColor`/`pointColor`) seed the synthesized
+      // series so they take effect when only `data` is provided.
+      color: lineColor,
+      pointColor
+    }),
+    [series, data, lineColor, pointColor]
+  );
+  const {
+    activeIndex,
+    resolvedSelectedIndex,
+    handleMouseEnter: handleSeriesHoverEnter,
+    handleMouseLeave: handleSeriesHoverLeave,
+    handleClick: handleSeriesSelect,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => resolvedSeries[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSeriesHover?.(index, index !== null ? resolvedSeries[index] : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, series2) => {
+      if (series2) onSeriesClick?.(index, series2);
+    }
+  });
+  const allData = useMemo(() => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
+  const xValues = useMemo(() => allData.map((d) => d.x), [allData]);
+  const yValues = useMemo(() => allData.map((d) => d.y), [allData]);
+  const isXNumeric = useMemo(() => isNumericChartDomain(xValues), [xValues]);
+  const resolvedXScale = useMemo(() => {
+    if (xScaleProp) return xScaleProp;
+    if (isXNumeric) {
+      const extent = getNumberExtent(xValues, { includeZero: false });
+      return createLinearScale(extent, [0, innerRect.width]);
+    } else {
+      const categories = [...new Set(xValues.map(String))];
+      return createPointScale(categories, [0, innerRect.width], { padding: 0 });
+    }
+  }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
+  const resolvedYScale = useMemo(() => {
+    if (yScaleProp) return yScaleProp;
+    const extent = getNumberExtent(yValues, { includeZero: includeZero || showArea });
+    return createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScaleProp, yValues, includeZero, showArea, innerRect.height]);
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const seriesKeys = useMemo(
+    () => buildChartSeriesKeys(resolvedSeries, { prefix: "line-" }),
+    [resolvedSeries]
+  );
+  const seriesData = useMemo(() => {
+    const laidOut = layoutLineSeries(resolvedSeries, resolvedXScale, resolvedYScale, {
+      curve,
+      palette,
+      activeIndex,
+      showArea,
+      areaOpacity,
+      strokeWidth,
+      showPoints,
+      pointSize,
+      pointColor,
+      pointHollow,
+      activeOpacity,
+      inactiveOpacity
+    });
+    return laidOut.map((item, seriesIndex) => ({
+      ...item,
+      seriesKey: seriesKeys[seriesIndex]
+    }));
+  }, [
+    resolvedSeries,
+    seriesKeys,
+    palette,
+    resolvedXScale,
+    resolvedYScale,
+    curve,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    strokeWidth,
+    showPoints,
+    pointSize,
+    pointColor,
+    showArea,
+    areaOpacity,
+    pointHollow
+  ]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? defaultChartSeriesName(i, labels.seriesName),
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
+    }),
+    [
+      resolvedSeries,
+      legendFormatter,
+      palette,
+      activeIndex,
+      resolvedSelectedIndex,
+      labels.seriesName
+    ]
+  );
+  const tooltipContent = useMemo(
+    () => resolveMultiSeriesTooltipContent(
+      hoveredPointInfo,
+      resolvedSeries,
+      tooltipFormatter,
+      (datum, seriesIndex, pointIndex, s) => defaultSeriesXYTooltipFormatter(datum, seriesIndex, pointIndex, s, labels.seriesName)
+    ),
+    [hoveredPointInfo, resolvedSeries, tooltipFormatter, labels.seriesName]
+  );
+  const handlePointMouseEnter = useCallback(
+    (seriesIndex, pointIndex, event) => {
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      if (hoverable) {
+        onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      }
+    },
+    [hoverable, onPointHover, resolvedSeries]
+  );
+  const handlePointMouseMove = useCallback((event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handlePointMouseLeave = useCallback(() => {
+    setHoveredPointInfo(null);
+    if (hoverable) {
+      onPointHover?.(null, null, null);
+    }
+  }, [hoverable, onPointHover]);
+  const showPointTooltipFromElement = useCallback(
+    (el, seriesIndex, pointIndex) => {
+      if (!(showTooltip || hoverable)) return;
+      const rect = el.getBoundingClientRect();
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+    },
+    [hoverable, showTooltip, onPointHover, resolvedSeries]
+  );
+  const handlePlotMouseMove = useCallback(
+    (event) => {
+      if (!(showTooltip || hoverable)) return;
+      const target = event.currentTarget;
+      const rect = target.getBoundingClientRect();
+      const width2 = rect.width || innerRect.width;
+      const height2 = rect.height || innerRect.height;
+      if (width2 === 0 || height2 === 0) return;
+      const x = (event.clientX - rect.left) / width2 * innerRect.width;
+      const y = (event.clientY - rect.top) / height2 * innerRect.height;
+      const nearest = findNearestSeriesPoint(
+        seriesData.map((sd) => sd.points),
+        x,
+        y
+      );
+      if (!nearest) return;
+      setHoveredPointInfo(nearest);
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+    },
+    [showTooltip, hoverable, innerRect.width, innerRect.height, seriesData]
+  );
+  const handlePointClick = useCallback(
+    (seriesIndex, pointIndex) => {
+      onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      handleSeriesSelect(seriesIndex);
+    },
+    [onPointClick, resolvedSeries, handleSeriesSelect]
+  );
+  const pointClickable = Boolean(onPointClick);
+  const trackPointHover = showTooltip || hoverable;
+  const flatPoints = useMemo(() => flattenChartPoints(seriesData), [seriesData]);
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc,
+      onResolvedSizeChange,
+      children: [
+        (seriesData.some((sd) => sd.showArea) || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
+          seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: sd.color, stopOpacity: sd.areaOpacity }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
+              ]
+            },
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && seriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && seriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
+          ))
+        ] }),
+        showGrid && /* @__PURE__ */ jsx(
+          ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        trackPointHover ? /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: innerRect.width,
+            height: innerRect.height,
+            fill: "transparent",
+            "data-plot-hit": "",
+            onMouseMove: handlePlotMouseMove,
+            onMouseLeave: handlePointMouseLeave
+          }
+        ) : null,
+        seriesData.map((sd) => {
+          const canAnimateStroke = animated && !sd.strokeDasharray;
+          return /* @__PURE__ */ jsxs(
+            ChartSeries,
+            {
+              data: sd.series.data,
+              name: sd.series.name,
+              type: "line",
+              opacity: sd.opacity,
+              "data-series-key": sd.seriesKey,
+              className: classNames(
+                sd.series.className,
+                (hoverable || selectable) && "cursor-pointer"
+              ),
+              onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
+              onMouseLeave: handleSeriesHoverLeave,
+              onClick: () => handleSeriesSelect(sd.seriesIndex),
+              children: [
+                sd.showArea && sd.areaPath && /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: sd.areaPath,
+                    fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
+                    stroke: "none",
+                    className: "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]",
+                    "data-area-series": sd.seriesIndex,
+                    "data-series-key": sd.seriesKey
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: sd.linePath,
+                    fill: "none",
+                    stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
+                    strokeWidth: sd.strokeWidth,
+                    strokeDasharray: sd.strokeDasharray,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    pathLength: canAnimateStroke ? 1 : void 0,
+                    strokeDashoffset: canAnimateStroke ? "1" : void 0,
+                    className: classNames(
+                      animated && !sd.strokeDasharray ? void 0 : "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]",
+                      canAnimateStroke && LINE_DRAW_CLASS
+                    ),
+                    "data-line-series": sd.seriesIndex,
+                    "data-series-key": sd.seriesKey
+                  }
+                ),
+                sd.showPoints && sd.points.map((point) => {
+                  const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
+                  const hoverSize = sd.pointSize + 2;
+                  const datum = point.datum;
+                  const pointInteractive = hoverable || selectable || pointClickable;
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: point.x,
+                      cy: point.y,
+                      r: isHovered ? hoverSize : sd.pointSize,
+                      fill: sd.pointHollow ? CHART_SURFACE_FILL : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
+                      stroke: sd.pointHollow ? sd.pointColor : "none",
+                      strokeWidth: sd.pointHollow ? 2 : 0,
+                      className: classNames(
+                        animated ? linePointTransitionClasses : void 0,
+                        pointInteractive && "cursor-pointer"
+                      ),
+                      style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                      role: pointInteractive ? "button" : void 0,
+                      "aria-hidden": pointInteractive ? void 0 : true,
+                      "aria-label": pointInteractive ? datum?.label ?? formatChartTemplate(labels.pointAriaLabel, {
+                        index: point.pointIndex + 1,
+                        x: String(datum?.x ?? ""),
+                        y: String(datum?.y ?? "")
+                      }) : void 0,
+                      tabIndex: pointInteractive ? chartPointTabIndex(
+                        sd.seriesIndex,
+                        point.pointIndex,
+                        hoveredPointInfo,
+                        flatPoints
+                      ) : void 0,
+                      "data-point-index": point.pointIndex,
+                      "data-series-key": sd.seriesKey,
+                      onMouseEnter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                      onMouseMove: trackPointHover ? handlePointMouseMove : void 0,
+                      onMouseLeave: trackPointHover ? handlePointMouseLeave : void 0,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handlePointClick(sd.seriesIndex, point.pointIndex);
+                      },
+                      onFocus: trackPointHover ? (e) => showPointTooltipFromElement(
+                        e.currentTarget,
+                        sd.seriesIndex,
+                        point.pointIndex
+                      ) : void 0,
+                      onBlur: trackPointHover ? handlePointMouseLeave : void 0,
+                      onKeyDown: pointInteractive ? (e) => {
+                        if (isChartNavigationKey(e.key)) {
+                          e.preventDefault();
+                          const next = nextChartPointRef(
+                            { seriesIndex: sd.seriesIndex, pointIndex: point.pointIndex },
+                            e.key,
+                            flatPoints
+                          );
+                          if (!next) return;
+                          const node = e.currentTarget.ownerSVGElement?.querySelector(
+                            `[data-series-key="${seriesKeys[next.seriesIndex]}"][data-point-index="${next.pointIndex}"]`
+                          );
+                          if (node instanceof SVGElement) node.focus();
+                          return;
+                        }
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (pointClickable) {
+                            handlePointClick(sd.seriesIndex, point.pointIndex);
+                          } else {
+                            showPointTooltipFromElement(
+                              e.currentTarget,
+                              sd.seriesIndex,
+                              point.pointIndex
+                            );
+                          }
+                        } else if (e.key === "Escape" && trackPointHover) {
+                          handlePointMouseLeave();
+                        }
+                      } : void 0
+                    },
+                    `point-${sd.seriesKey}-${point.pointIndex}`
+                  );
+                })
+              ]
+            },
+            sd.seriesKey
+          );
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      open: hoveredPointInfo !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive: hoverable || selectable,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
+};
+var LineChart_default = LineChart;
+
+export {
+  LineChart,
+  LineChart_default
+};