@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/chunk-DCKBVRLI.js

@@ -1,547 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
-
-
-var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
-
-
-var _chunkAX5XRD2Qjs = require('./chunk-AX5XRD2Q.js');
-
-
-var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
-
-
-var _chunkE5GD3H7Ljs = require('./chunk-E5GD3H7L.js');
-
-
-var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
-
-
-var _chunk3QFHVAZTjs = require('./chunk-3QFHVAZT.js');
-
-// src/components/AreaChart.tsx
-var _react = require('react');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var _jsxruntime = require('react/jsx-runtime');
-var AreaChart = ({
-  width = 320,
-  height = 200,
-  padding = 24,
-  data,
-  series,
-  xScale: xScaleProp,
-  yScale: yScaleProp,
-  areaColor: _areaColor = "var(--tiger-primary,#2563eb)",
-  strokeWidth = 2,
-  fillOpacity = 0.2,
-  curve = "linear",
-  showPoints = false,
-  pointSize = 4,
-  pointColor: _pointColor,
-  stacked = false,
-  showGrid = true,
-  showAxis = true,
-  showXAxis = true,
-  showYAxis = true,
-  includeZero = true,
-  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,
-  gradient = true,
-  animated = false,
-  pointHollow = false,
-  strokeGradient = false,
-  pointGradient = false,
-  tooltipFormatter,
-  legendFormatter,
-  title,
-  desc,
-  className,
-  onHoveredIndexChange,
-  onSelectedIndexChange,
-  onSeriesClick,
-  onSeriesHover,
-  onPointClick,
-  onPointHover
-}) => {
-  const [hoveredPointInfo, setHoveredPointInfo] = _react.useState.call(void 0, null);
-  const [tooltipPosition, setTooltipPosition] = _react.useState.call(void 0, { x: 0, y: 0 });
-  const gradientId = _react.useId.call(void 0, );
-  const gradientPrefix = _react.useMemo.call(void 0, 
-    () => _tigercatcore.getStableChartGradientPrefix.call(void 0, "area", gradientId),
-    [gradientId]
-  );
-  const innerRect = _react.useMemo.call(void 0, 
-    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
-    [width, height, padding]
-  );
-  const resolvedSeries = _react.useMemo.call(void 0, 
-    () => _tigercatcore.resolveSeriesData.call(void 0, series, data),
-    [series, data]
-  );
-  const {
-    activeIndex,
-    handleMouseEnter: handleSeriesHoverEnter,
-    handleMouseLeave: handleSeriesHoverLeave,
-    handleClick: handleSeriesSelect,
-    handleLegendClick,
-    handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
-  } = _chunkXTV5JLLCjs.useChartInteraction.call(void 0, {
-    hoverable,
-    hoveredIndexProp,
-    selectable,
-    selectedIndexProp,
-    activeOpacity,
-    inactiveOpacity,
-    legendPosition,
-    getData: (index) => resolvedSeries[index],
-    onHoveredIndexChange: (index) => {
-      _optionalChain([onHoveredIndexChange, 'optionalCall', _ => _(index)]);
-      _optionalChain([onSeriesHover, 'optionalCall', _2 => _2(index, index !== null ? resolvedSeries[index] : null)]);
-    },
-    onSelectedIndexChange: (index) => {
-      _optionalChain([onSelectedIndexChange, 'optionalCall', _3 => _3(index)]);
-      if (index !== null) {
-        _optionalChain([onSeriesClick, 'optionalCall', _4 => _4(index, resolvedSeries[index])]);
-      }
-    }
-  });
-  const allData = _react.useMemo.call(void 0, () => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
-  const xValues = _react.useMemo.call(void 0, () => allData.map((d) => d.x), [allData]);
-  const yValues = _react.useMemo.call(void 0, () => {
-    if (stacked) {
-      const stackedData = _tigercatcore.stackSeriesData.call(void 0, resolvedSeries.map((s) => s.data));
-      return stackedData.flatMap((s) => s.map((d) => d.y1));
-    }
-    return allData.map((d) => d.y);
-  }, [stacked, resolvedSeries, allData]);
-  const isXNumeric = _react.useMemo.call(void 0, () => xValues.every((v) => typeof v === "number"), [xValues]);
-  const resolvedXScale = _react.useMemo.call(void 0, () => {
-    if (xScaleProp) return xScaleProp;
-    if (isXNumeric) {
-      const extent = _tigercatcore.getNumberExtent.call(void 0, xValues, { includeZero: false });
-      return _tigercatcore.createLinearScale.call(void 0, extent, [0, innerRect.width]);
-    } else {
-      const categories = [...new Set(xValues.map(String))];
-      return _tigercatcore.createPointScale.call(void 0, categories, [0, innerRect.width], { padding: 0 });
-    }
-  }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
-  const resolvedYScale = _react.useMemo.call(void 0, () => {
-    if (yScaleProp) return yScaleProp;
-    const extent = _tigercatcore.getNumberExtent.call(void 0, yValues, { includeZero });
-    return _tigercatcore.createLinearScale.call(void 0, extent, [innerRect.height, 0]);
-  }, [yScaleProp, yValues, includeZero, innerRect.height]);
-  const baseline = _react.useMemo.call(void 0, () => resolvedYScale.map(0), [resolvedYScale]);
-  const shouldShowXAxis = showAxis && showXAxis;
-  const shouldShowYAxis = showAxis && showYAxis;
-  const palette = _react.useMemo.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, colors), [colors]);
-  const seriesKeys = _react.useMemo.call(void 0, 
-    () => _tigercatcore.buildChartSeriesKeys.call(void 0, resolvedSeries, { prefix: "area-" }),
-    [resolvedSeries]
-  );
-  const seriesData = _react.useMemo.call(void 0, () => {
-    const stackedData = stacked ? _tigercatcore.stackSeriesData.call(void 0, resolvedSeries.map((s) => s.data)) : null;
-    return resolvedSeries.map((s, seriesIndex) => {
-      const seriesKey = seriesKeys[seriesIndex];
-      const color = _nullishCoalesce(s.color, () => ( palette[seriesIndex % palette.length]));
-      const seriesFillColor = _nullishCoalesce(s.fillColor, () => ( color));
-      const seriesFillOpacity = _nullishCoalesce(s.fillOpacity, () => ( fillOpacity));
-      let points;
-      let areaPath;
-      let linePath;
-      if (stacked && stackedData) {
-        const stackedSeries = stackedData[seriesIndex];
-        points = stackedSeries.map((sd, pointIndex) => ({
-          x: resolvedXScale.map(sd.original.x),
-          y: resolvedYScale.map(sd.y1),
-          datum: sd.original,
-          pointIndex
-        }));
-        const topPoints = points.map((p) => ({ x: p.x, y: p.y }));
-        const bottomPoints = stackedSeries.map((sd) => ({
-          x: resolvedXScale.map(sd.original.x),
-          y: resolvedYScale.map(sd.y0)
-        })).reverse();
-        const topPath = _tigercatcore.createLinePath.call(void 0, topPoints, curve);
-        const bottomPath = _tigercatcore.createLinePath.call(void 0, bottomPoints, curve).replace("M", "L");
-        areaPath = `${topPath} ${bottomPath} Z`;
-        linePath = topPath;
-      } else {
-        points = s.data.map((datum, pointIndex) => ({
-          x: resolvedXScale.map(datum.x),
-          y: resolvedYScale.map(datum.y),
-          datum,
-          pointIndex
-        }));
-        areaPath = _tigercatcore.createAreaPath.call(void 0, points, baseline, curve);
-        linePath = _tigercatcore.createLinePath.call(void 0, points, curve);
-      }
-      const opacity = _tigercatcore.getChartElementOpacity.call(void 0, seriesIndex, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      });
-      return {
-        series: s,
-        seriesIndex,
-        seriesKey,
-        color,
-        fillColor: seriesFillColor,
-        fillOpacity: seriesFillOpacity,
-        areaPath,
-        linePath,
-        points,
-        opacity,
-        strokeWidth: _nullishCoalesce(s.strokeWidth, () => ( strokeWidth)),
-        strokeDasharray: s.strokeDasharray,
-        showPoints: _nullishCoalesce(s.showPoints, () => ( showPoints)),
-        pointSize: _nullishCoalesce(s.pointSize, () => ( pointSize)),
-        pointColor: _nullishCoalesce(s.pointColor, () => ( color)),
-        pointHollow: _nullishCoalesce(s.pointHollow, () => ( pointHollow))
-      };
-    });
-  }, [
-    resolvedSeries,
-    seriesKeys,
-    palette,
-    resolvedXScale,
-    resolvedYScale,
-    curve,
-    stacked,
-    baseline,
-    activeIndex,
-    activeOpacity,
-    inactiveOpacity,
-    fillOpacity,
-    strokeWidth,
-    showPoints,
-    pointSize,
-    pointHollow
-  ]);
-  const legendItems = _react.useMemo.call(void 0, 
-    () => _tigercatcore.buildChartLegendItems.call(void 0, {
-      data: resolvedSeries,
-      palette,
-      activeIndex,
-      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : _nullishCoalesce(s.name, () => ( `Series ${i + 1}`)),
-      getColor: (s, i) => _nullishCoalesce(s.color, () => ( palette[i % palette.length]))
-    }),
-    [resolvedSeries, legendFormatter, palette, activeIndex]
-  );
-  const tooltipContent = _react.useMemo.call(void 0, 
-    () => _tigercatcore.resolveMultiSeriesTooltipContent.call(void 0, 
-      hoveredPointInfo,
-      resolvedSeries,
-      tooltipFormatter,
-      _tigercatcore.defaultSeriesXYTooltipFormatter
-    ),
-    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
-  );
-  const handlePointMouseEnter = _react.useCallback.call(void 0, 
-    (seriesIndex, pointIndex, event) => {
-      setHoveredPointInfo({ seriesIndex, pointIndex });
-      setTooltipPosition({ x: event.clientX, y: event.clientY });
-      _optionalChain([onPointHover, 'optionalCall', _5 => _5(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _6 => _6[seriesIndex], 'optionalAccess', _7 => _7.data, 'access', _8 => _8[pointIndex]]))]);
-    },
-    [onPointHover, resolvedSeries]
-  );
-  const handlePointMouseMove = _react.useCallback.call(void 0, (event) => {
-    setTooltipPosition({ x: event.clientX, y: event.clientY });
-  }, []);
-  const handlePointMouseLeave = _react.useCallback.call(void 0, () => {
-    setHoveredPointInfo(null);
-    _optionalChain([onPointHover, 'optionalCall', _9 => _9(null, null, null)]);
-  }, [onPointHover]);
-  const handlePointClick = _react.useCallback.call(void 0, 
-    (seriesIndex, pointIndex) => {
-      _optionalChain([onPointClick, 'optionalCall', _10 => _10(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _11 => _11[seriesIndex], 'optionalAccess', _12 => _12.data, 'access', _13 => _13[pointIndex]]))]);
-      handleSeriesSelect(seriesIndex);
-    },
-    [onPointClick, resolvedSeries, handleSeriesSelect]
-  );
-  const handleKeyDown = _react.useCallback.call(void 0, 
-    (event, seriesIndex) => {
-      if (!selectable) return;
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      handleSeriesSelect(seriesIndex);
-    },
-    [selectable, handleSeriesSelect]
-  );
-  const reversedSeriesData = _react.useMemo.call(void 0, () => [...seriesData].reverse(), [seriesData]);
-  const chart = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkUKLVOR4Ejs.ChartCanvas,
-    {
-      width,
-      height,
-      padding,
-      title,
-      desc,
-      className: _tigercatcore.classNames.call(void 0, className),
-      children: [
-        (gradient || animated || strokeGradient || pointGradient) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "defs", { children: [
-          animated && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { children: `
-              .tiger-area-animated {
-                animation: tiger-area-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
-              }
-              @keyframes tiger-area-draw {
-                from { stroke-dashoffset: 1; }
-                to { stroke-dashoffset: 0; }
-              }
-              @media (prefers-reduced-motion: reduce) {
-                .tiger-area-animated { animation-duration: 0ms; }
-              }
-            ` }),
-          gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "linearGradient",
-            {
-              id: `${gradientPrefix}-${sd.seriesKey}`,
-              x1: "0",
-              y1: "0",
-              x2: "0",
-              y2: "1",
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: sd.fillColor, stopOpacity: sd.fillOpacity }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
-              ]
-            },
-            `area-grad-${sd.seriesKey}`
-          )),
-          pointGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "radialGradient",
-            {
-              id: `${gradientPrefix}-point-${sd.seriesKey}`,
-              cx: "0.5",
-              cy: "0.5",
-              r: "0.5",
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "70%", stopColor: sd.color }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "stop",
-                  {
-                    offset: "100%",
-                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
-                  }
-                )
-              ]
-            },
-            `point-grad-${sd.seriesKey}`
-          )),
-          strokeGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "linearGradient",
-            {
-              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
-              x1: "0",
-              y1: "0",
-              x2: "1",
-              y2: "0",
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "50%", stopColor: sd.color }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
-              ]
-            },
-            `stroke-grad-${sd.seriesKey}`
-          ))
-        ] }),
-        showGrid && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk3QFHVAZTjs.ChartGrid,
-          {
-            xScale: resolvedXScale,
-            yScale: resolvedYScale,
-            show: "both",
-            xTicks,
-            yTicks,
-            xTickValues,
-            yTickValues,
-            lineStyle: gridLineStyle,
-            strokeWidth: gridStrokeWidth
-          }
-        ),
-        shouldShowXAxis && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkE5GD3H7Ljs.ChartAxis,
-          {
-            scale: resolvedXScale,
-            orientation: "bottom",
-            y: innerRect.height,
-            ticks: xTicks,
-            tickValues: xTickValues,
-            tickFormat: xTickFormat,
-            label: xAxisLabel
-          }
-        ),
-        shouldShowYAxis && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkE5GD3H7Ljs.ChartAxis,
-          {
-            scale: resolvedYScale,
-            orientation: "left",
-            ticks: yTicks,
-            tickValues: yTickValues,
-            tickFormat: yTickFormat,
-            label: yAxisLabel
-          }
-        ),
-        reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          _chunkAX5XRD2Qjs.ChartSeries,
-          {
-            data: sd.series.data,
-            name: sd.series.name,
-            type: "area",
-            opacity: sd.opacity,
-            "data-series-key": sd.seriesKey,
-            className: _tigercatcore.classNames.call(void 0, 
-              sd.series.className,
-              (hoverable || selectable) && "cursor-pointer",
-              "outline-none"
-            ),
-            onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
-            onMouseLeave: handleSeriesHoverLeave,
-            onClick: () => handleSeriesSelect(sd.seriesIndex),
-            tabIndex: selectable ? 0 : void 0,
-            onKeyDown: (e) => handleKeyDown(e, sd.seriesIndex),
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
-                {
-                  d: sd.areaPath,
-                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
-                  fillOpacity: gradient ? 1 : sd.fillOpacity,
-                  stroke: "none",
-                  className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex,
-                  "data-series-key": sd.seriesKey
-                }
-              ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
-                {
-                  d: sd.linePath,
-                  fill: "none",
-                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
-                  strokeWidth: sd.strokeWidth,
-                  strokeDasharray: animated ? _nullishCoalesce(sd.strokeDasharray, () => ( "1")) : sd.strokeDasharray,
-                  strokeDashoffset: animated ? "1" : void 0,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  pathLength: animated ? 1 : void 0,
-                  className: _tigercatcore.classNames.call(void 0, 
-                    "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
-                    animated && "tiger-area-animated"
-                  )
-                }
-              )
-            ]
-          },
-          sd.seriesKey
-        )),
-        seriesData.map(
-          (sd) => sd.showPoints && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
-            const isHovered = _optionalChain([hoveredPointInfo, 'optionalAccess', _14 => _14.seriesIndex]) === sd.seriesIndex && _optionalChain([hoveredPointInfo, 'optionalAccess', _15 => _15.pointIndex]) === point.pointIndex;
-            const hoverSize = sd.pointSize + 2;
-            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "circle",
-              {
-                cx: point.x,
-                cy: point.y,
-                r: isHovered ? hoverSize : sd.pointSize,
-                fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
-                stroke: sd.pointHollow ? sd.pointColor : "none",
-                strokeWidth: sd.pointHollow ? 2 : 0,
-                className: _tigercatcore.linePointTransitionClasses,
-                style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
-                "data-point-index": point.pointIndex,
-                "data-series-key": sd.seriesKey,
-                onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                onMouseMove: handlePointMouseMove,
-                onMouseLeave: handlePointMouseLeave,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handlePointClick(sd.seriesIndex, point.pointIndex);
-                }
-              },
-              `point-${sd.seriesKey}-${point.pointIndex}`
-            );
-          }) }, `points-${sd.seriesKey}`)
-        )
-      ]
-    }
-  );
-  const tooltip = showTooltip && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkUVMQJOTXjs.ChartTooltip,
-    {
-      content: tooltipContent,
-      visible: hoveredPointInfo !== null && tooltipContent !== "",
-      x: tooltipPosition.x,
-      y: tooltipPosition.y
-    }
-  );
-  if (!showLegend) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-block relative", children: [
-      chart,
-      tooltip
-    ] });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
-    chart,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWV5XHYW6js.ChartLegend,
-      {
-        items: legendItems,
-        position: legendPosition,
-        markerSize: legendMarkerSize,
-        gap: legendGap,
-        interactive: hoverable || selectable,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
-};
-var AreaChart_default = AreaChart;
-
-
-
-
-exports.AreaChart = AreaChart; exports.AreaChart_default = AreaChart_default;