@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-YER7IQF4.mjs → chunk-N4EMXCRQ.mjs}

@@ -1,9 +1,10 @@
 import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
 import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartLegend } from './chunk-Z6F67MJE.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
 import { ChartTooltip } from './chunk-LVC43YX2.mjs';
 import { useMemo, useState, useCallback } from 'react';
-import { getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, getChartGridLineDasharray, DEFAULT_CHART_COLORS, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { resolveSeriesData, getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var RadarChart = ({
@@ -43,21 +44,31 @@ var RadarChart = ({
   legendFormatter,
   legendMarkerSize = 10,
   legendGap = 8,
-  strokeColor = DEFAULT_CHART_COLORS[0],
+  strokeColor,
   strokeWidth = 2,
-  fillColor = DEFAULT_CHART_COLORS[0],
+  fillColor,
   fillOpacity = 0.2,
   showPoints = true,
   pointSize = 3,
   pointColor,
+  gridShape = "polygon",
+  showSplitArea = false,
+  splitAreaOpacity = 0.06,
+  splitAreaColors,
+  pointBorderWidth = 2,
+  pointBorderColor = "#fff",
+  pointHoverSize,
+  labelAutoAlign = true,
   title,
   desc,
   className
 }) => {
-  const resolvedSeries = useMemo(() => {
-    if (series && series.length > 0) return series;
-    return [{ data: data ?? [] }];
-  }, [series, data]);
+  const resolvedSeries = useMemo(
+    () => resolveSeriesData(series, data, {
+      data: []
+    }),
+    [series, data]
+  );
   const {
     resolvedHoveredIndex: _resolvedHoveredIndex,
     resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -66,7 +77,11 @@ var RadarChart = ({
     handleMouseEnter: handleHoverEnter,
     handleMouseMove,
     handleMouseLeave: handleHoverLeave,
-    handleClick: handleSelectIndex
+    handleClick: handleSelectIndex,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
   } = useChartInteraction({
     hoverable,
     hoveredIndexProp,
@@ -148,10 +163,30 @@ var RadarChart = ({
     const resolvedLevels = Math.max(1, Math.floor(levels));
     return Array.from({ length: resolvedLevels }, (_, index) => {
       const levelRadius = radius * ((index + 1) / resolvedLevels);
+      if (gridShape === "circle") {
+        return { type: "circle", cx, cy, r: levelRadius };
+      }
       const ringPoints = angles.map((angle) => polarToCartesian(cx, cy, levelRadius, angle));
-      return createPolygonPath(ringPoints);
+      return { type: "polygon", d: createPolygonPath(ringPoints), cx, cy, r: levelRadius };
     });
-  }, [showGrid, levels, angles, radius, cx, cy]);
+  }, [showGrid, levels, angles, radius, cx, cy, gridShape]);
+  const splitAreaPaths = useMemo(() => {
+    if (!showSplitArea || angles.length === 0) return [];
+    const resolvedLevels = Math.max(1, Math.floor(levels));
+    const areaColors = splitAreaColors && splitAreaColors.length > 0 ? splitAreaColors : RADAR_SPLIT_AREA_COLORS;
+    return Array.from({ length: resolvedLevels }, (_, index) => {
+      const outerIndex = resolvedLevels - 1 - index;
+      const outerRadius = radius * ((outerIndex + 1) / resolvedLevels);
+      const innerRadius = radius * (outerIndex / resolvedLevels);
+      const color = areaColors[outerIndex % areaColors.length];
+      if (gridShape === "circle") {
+        return { type: "circle-ring", cx, cy, outerRadius, innerRadius, color };
+      }
+      const outerPoints = angles.map((angle) => polarToCartesian(cx, cy, outerRadius, angle));
+      const innerPoints = outerIndex > 0 ? angles.map((angle) => polarToCartesian(cx, cy, innerRadius, angle)) : [];
+      return { type: "polygon-ring", outerPoints, innerPoints, color };
+    });
+  }, [showSplitArea, levels, angles, radius, cx, cy, gridShape, splitAreaColors, splitAreaOpacity]);
   const axisLines = useMemo(() => {
     if (!showAxis || angles.length === 0) return [];
     return angles.map((angle) => {
@@ -170,13 +205,16 @@ var RadarChart = ({
     return axisData.map((datum, index) => {
       const angle = angles[index];
       const position = polarToCartesian(cx, cy, radius + labelOffset, angle);
+      const align = labelAutoAlign ? getRadarLabelAlign(angle) : { textAnchor: "middle", dominantBaseline: "middle" };
       return {
         x: position.x,
         y: position.y,
-        text: formatLabel(datum, index)
+        text: formatLabel(datum, index),
+        textAnchor: align.textAnchor,
+        dominantBaseline: align.dominantBaseline
       };
     });
-  }, [showLabels, axisData, angles, cx, cy, radius, labelOffset, labelFormatter]);
+  }, [showLabels, axisData, angles, cx, cy, radius, labelOffset, labelFormatter, labelAutoAlign]);
   const levelLabels = useMemo(() => {
     if (!showLevelLabels || !showGrid || angles.length === 0) return [];
     const resolvedLevels = Math.max(1, Math.floor(levels));
@@ -205,47 +243,25 @@ var RadarChart = ({
     levelLabelFormatter
   ]);
   const dasharray = getChartGridLineDasharray(gridLineStyle);
-  const palette = useMemo(
-    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_COLORS],
-    [colors]
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const tooltipContent = useMemo(
+    () => resolveMultiSeriesTooltipContent(
+      hoveredPoint,
+      resolvedSeries,
+      tooltipFormatter,
+      defaultRadarTooltipFormatter
+    ),
+    [hoveredPoint, resolvedSeries, tooltipFormatter]
   );
-  const formatTooltip = useMemo(
-    () => tooltipFormatter ?? ((datum, seriesIndex, index, series2) => {
-      const label = datum.label ?? `#${index + 1}`;
-      const value = datum.value;
-      const name = series2?.name ?? `Series ${seriesIndex + 1}`;
-      return `${name} \xB7 ${label}: ${value}`;
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex: resolvedActiveIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
     }),
-    [tooltipFormatter]
-  );
-  const tooltipContent = useMemo(() => {
-    if (!hoveredPoint) return "";
-    const { seriesIndex, pointIndex } = hoveredPoint;
-    const series2 = resolvedSeries[seriesIndex];
-    if (!series2) return "";
-    const datum = series2.data[pointIndex];
-    if (!datum) return "";
-    return formatTooltip(datum, seriesIndex, pointIndex, series2);
-  }, [hoveredPoint, resolvedSeries, formatTooltip]);
-  const resolvedLegendItems = useMemo(
-    () => resolvedSeries.map((item, index) => {
-      const color = item.color ?? palette[index % palette.length];
-      const label = legendFormatter ? legendFormatter(item, index) : item.name ?? `Series ${index + 1}`;
-      return {
-        index,
-        label,
-        color
-      };
-    }),
-    [resolvedSeries, palette, legendFormatter]
-  );
-  const legendContainerClasses = classNames(
-    "flex flex-wrap",
-    legendPosition === "right" ? "flex-col gap-2" : "flex-row gap-3"
-  );
-  const wrapperClasses = classNames(
-    "inline-flex",
-    legendPosition === "right" ? "flex-row items-start gap-4" : "flex-col gap-2"
+    [resolvedSeries, palette, resolvedActiveIndex, legendFormatter]
   );
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
@@ -257,17 +273,80 @@ var RadarChart = ({
       desc,
       className: classNames(className),
       children: [
-        gridPaths.map((path, index) => /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: path,
-            className: chartGridLineClasses,
-            fill: "none",
-            strokeWidth: gridStrokeWidth,
-            strokeDasharray: dasharray
-          },
-          `grid-${index}`
-        )),
+        splitAreaPaths.map((area, index) => {
+          if (area.type === "circle-ring") {
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: area.cx,
+                  cy: area.cy,
+                  r: area.outerRadius,
+                  fill: area.color,
+                  fillOpacity: splitAreaOpacity,
+                  stroke: "none",
+                  "data-radar-split-area": "true"
+                }
+              ),
+              area.innerRadius > 0 ? /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: area.cx,
+                  cy: area.cy,
+                  r: area.innerRadius,
+                  fill: "var(--tiger-bg,#fff)",
+                  stroke: "none"
+                }
+              ) : null
+            ] }, `split-${index}`);
+          }
+          const outerPath = createPolygonPath(area.outerPoints);
+          return /* @__PURE__ */ jsxs("g", { children: [
+            outerPath ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: outerPath,
+                fill: area.color,
+                fillOpacity: splitAreaOpacity,
+                stroke: "none",
+                "data-radar-split-area": "true"
+              }
+            ) : null,
+            area.innerPoints.length > 0 ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: createPolygonPath(area.innerPoints),
+                fill: "var(--tiger-bg,#fff)",
+                stroke: "none"
+              }
+            ) : null
+          ] }, `split-${index}`);
+        }),
+        gridPaths.map(
+          (grid, index) => grid.type === "circle" ? /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: grid.cx,
+              cy: grid.cy,
+              r: grid.r,
+              className: chartGridLineClasses,
+              fill: "none",
+              strokeWidth: gridStrokeWidth,
+              strokeDasharray: dasharray
+            },
+            `grid-${index}`
+          ) : /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: grid.d,
+              className: chartGridLineClasses,
+              fill: "none",
+              strokeWidth: gridStrokeWidth,
+              strokeDasharray: dasharray
+            },
+            `grid-${index}`
+          )
+        ),
         axisLines.map((line, index) => /* @__PURE__ */ jsx(
           "line",
           {
@@ -283,8 +362,8 @@ var RadarChart = ({
         )),
         seriesPoints.map((item, seriesIndex) => {
           const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
-          const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor;
-          const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor;
+          const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor ?? palette[0];
+          const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor ?? palette[0];
           const resolvedFillOpacity = item.series.fillOpacity ?? fillOpacity;
           const resolvedStrokeWidth = item.series.strokeWidth ?? strokeWidth;
           const resolvedShowPoints = item.series.showPoints ?? showPoints;
@@ -320,19 +399,32 @@ var RadarChart = ({
                     fillOpacity: resolvedFillOpacity,
                     stroke: resolvedStrokeColor,
                     strokeWidth: resolvedStrokeWidth,
+                    strokeLinejoin: "round",
+                    className: "transition-[fill-opacity,filter] duration-200 ease-out",
+                    style: resolvedActiveIndex === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                     "data-radar-area": "true",
                     "data-series-index": seriesIndex
                   }
                 ) : null,
                 resolvedShowPoints ? item.points.map((point) => {
+                  const isHoveredPoint = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === point.index;
+                  const hoverSize = pointHoverSize ?? resolvedPointSize + 2;
+                  const currentSize = isHoveredPoint ? hoverSize : point.data.size ?? resolvedPointSize;
+                  const resolvedBorderWidth = item.series.pointBorderWidth ?? pointBorderWidth;
+                  const resolvedBorderColor = item.series.pointBorderColor ?? pointBorderColor;
                   return /* @__PURE__ */ jsx(
                     "circle",
                     {
                       cx: point.x,
                       cy: point.y,
-                      r: point.data.size ?? resolvedPointSize,
+                      r: currentSize,
                       fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
-                      className: showTooltip && hoverable ? "cursor-pointer" : void 0,
+                      stroke: resolvedBorderColor,
+                      strokeWidth: resolvedBorderWidth,
+                      className: classNames(
+                        showTooltip && hoverable ? "cursor-pointer" : void 0,
+                        "transition-[r] duration-150 ease-out"
+                      ),
                       "data-radar-point": "true",
                       "data-series-index": seriesIndex,
                       "data-point-index": point.index,
@@ -354,8 +446,8 @@ var RadarChart = ({
             x: label.x,
             y: label.y,
             className: chartAxisTickTextClasses,
-            textAnchor: "middle",
-            dominantBaseline: "middle",
+            textAnchor: label.textAnchor,
+            dominantBaseline: label.dominantBaseline,
             children: label.text
           },
           `label-${index}`
@@ -393,34 +485,19 @@ var RadarChart = ({
   }
   return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
     chart,
-    /* @__PURE__ */ jsx("div", { className: legendContainerClasses, children: resolvedLegendItems.map((item) => /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      ChartLegend,
       {
-        type: "button",
-        className: classNames(
-          "flex items-center gap-2 text-sm text-gray-600",
-          selectable ? "cursor-pointer" : "cursor-default"
-        ),
-        onClick: selectable ? () => handleSelectIndex(item.index) : void 0,
-        onMouseEnter: hoverable ? (e) => handleHoverEnter(item.index, e) : void 0,
-        onMouseLeave: hoverable ? handlePointLeave : void 0,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "inline-block rounded-full",
-              style: {
-                width: `${legendMarkerSize}px`,
-                height: `${legendMarkerSize}px`,
-                backgroundColor: item.color
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { marginRight: `${legendGap}px` }, children: item.label })
-        ]
-      },
-      `legend-${item.index}`
-    )) }),
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
     tooltip
   ] });
 };

package/dist/{chunk-SIB4EHB6.js → chunk-NEP3CS6S.js}

@@ -52,6 +52,10 @@ var LineChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
+  showArea = false,
+  areaOpacity = 0.15,
+  pointHollow = false,
+  animated = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -66,15 +70,15 @@ var LineChart = ({
 }) => {
   const [hoveredPointInfo, setHoveredPointInfo] = react.useState(null);
   const [tooltipPosition, setTooltipPosition] = react.useState({ x: 0, y: 0 });
+  const gradientPrefix = react.useMemo(() => tigercatCore.getLineGradientPrefix(), []);
   const innerRect = react.useMemo(
     () => tigercatCore.getChartInnerRect(width, height, padding),
     [width, height, padding]
   );
-  const resolvedSeries = react.useMemo(() => {
-    if (series && series.length > 0) return series;
-    if (data && data.length > 0) return [{ data }];
-    return [];
-  }, [series, data]);
+  const resolvedSeries = react.useMemo(
+    () => tigercatCore.resolveSeriesData(series, data),
+    [series, data]
+  );
   const {
     activeIndex,
     handleMouseEnter: handleSeriesHoverEnter,
@@ -115,7 +119,7 @@ var LineChart = ({
       return tigercatCore.createLinearScale(extent, [0, innerRect.width]);
     } else {
       const categories = [...new Set(xValues.map(String))];
-      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0.1 });
+      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0 });
     }
   }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
   const resolvedYScale = react.useMemo(() => {
@@ -123,12 +127,9 @@ var LineChart = ({
     const extent = tigercatCore.getNumberExtent(yValues, { includeZero });
     return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
   }, [yScaleProp, yValues, includeZero, innerRect.height]);
-  const resolvedShowXAxis = showAxis && showXAxis;
-  const resolvedShowYAxis = showAxis && showYAxis;
-  const palette = react.useMemo(
-    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
-    [colors]
-  );
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
   const seriesData = react.useMemo(
     () => resolvedSeries.map((s, seriesIndex) => {
       const color = s.color ?? palette[seriesIndex % palette.length];
@@ -139,6 +140,8 @@ var LineChart = ({
         pointIndex
       }));
       const linePath = tigercatCore.createLinePath(points, curve);
+      const seriesShowArea = s.showArea ?? showArea;
+      const areaPath = seriesShowArea ? tigercatCore.createAreaPath(points, innerRect.height, curve) : "";
       const opacity = tigercatCore.getChartElementOpacity(seriesIndex, activeIndex, {
         activeOpacity,
         inactiveOpacity
@@ -148,13 +151,17 @@ var LineChart = ({
         seriesIndex,
         color,
         linePath,
+        areaPath,
+        showArea: seriesShowArea,
+        areaOpacity: s.areaOpacity ?? areaOpacity,
         points,
         opacity,
         strokeWidth: s.strokeWidth ?? strokeWidth,
         strokeDasharray: s.strokeDasharray,
         showPoints: s.showPoints ?? showPoints,
         pointSize: s.pointSize ?? pointSize,
-        pointColor: s.pointColor ?? color
+        pointColor: s.pointColor ?? color,
+        pointHollow: s.pointHollow ?? pointHollow
       };
     }),
     [
@@ -168,34 +175,32 @@ var LineChart = ({
       inactiveOpacity,
       strokeWidth,
       showPoints,
-      pointSize
+      pointSize,
+      showArea,
+      areaOpacity,
+      pointHollow,
+      innerRect.height
     ]
   );
   const legendItems = react.useMemo(
-    () => resolvedSeries.map((s, index) => ({
-      index,
-      label: legendFormatter ? legendFormatter(s, index) : s.name ?? `Series ${index + 1}`,
-      color: s.color ?? palette[index % palette.length],
-      active: activeIndex === null || activeIndex === index
-    })),
+    () => tigercatCore.buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
+    }),
     [resolvedSeries, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = react.useCallback(
-    (datum, seriesIndex, _pointIndex, s) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, seriesIndex, _pointIndex, s);
-      const seriesName = s?.name ?? `Series ${seriesIndex + 1}`;
-      const label = datum.label ?? String(datum.x);
-      return `${seriesName} \xB7 ${label}: ${datum.y}`;
-    },
-    [tooltipFormatter]
+  const tooltipContent = react.useMemo(
+    () => tigercatCore.resolveMultiSeriesTooltipContent(
+      hoveredPointInfo,
+      resolvedSeries,
+      tooltipFormatter,
+      tigercatCore.defaultSeriesXYTooltipFormatter
+    ),
+    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
   );
-  const tooltipContent = react.useMemo(() => {
-    if (!hoveredPointInfo) return "";
-    const { seriesIndex, pointIndex } = hoveredPointInfo;
-    const s = resolvedSeries[seriesIndex];
-    const datum = s?.data[pointIndex];
-    return datum ? formatTooltip(datum, seriesIndex, pointIndex, s) : "";
-  }, [hoveredPointInfo, resolvedSeries, formatTooltip]);
   const handlePointMouseEnter = react.useCallback(
     (seriesIndex, pointIndex, event) => {
       setHoveredPointInfo({ seriesIndex, pointIndex });
@@ -237,6 +242,32 @@ var LineChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
+        (seriesData.some((sd) => sd.showArea) || animated) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              .tiger-line-animated {
+                animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+              }
+              @keyframes tiger-line-draw {
+                from { stroke-dashoffset: 1; }
+                to { stroke-dashoffset: 0; }
+              }
+            ` }),
+          seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: sd.color, stopOpacity: sd.areaOpacity }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
+              ]
+            },
+            `area-grad-${sd.seriesIndex}`
+          ))
+        ] }),
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(
           chunk3QFHVAZT_js.ChartGrid,
           {
@@ -251,7 +282,7 @@ var LineChart = ({
             strokeWidth: gridStrokeWidth
           }
         ),
-        resolvedShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
           chunkE5GD3H7L_js.ChartAxis,
           {
             scale: resolvedXScale,
@@ -263,7 +294,7 @@ var LineChart = ({
             label: xAxisLabel
           }
         ),
-        resolvedShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
           chunkE5GD3H7L_js.ChartAxis,
           {
             scale: resolvedYScale,
@@ -288,6 +319,16 @@ var LineChart = ({
             tabIndex: selectable ? 0 : void 0,
             onKeyDown: (e) => handleKeyDown(e, sd.seriesIndex),
             children: [
+              sd.showArea && sd.areaPath && /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: sd.areaPath,
+                  fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                  stroke: "none",
+                  className: "transition-opacity duration-300",
+                  "data-area-series": sd.seriesIndex
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
                 {
@@ -295,32 +336,44 @@ var LineChart = ({
                   fill: "none",
                   stroke: sd.color,
                   strokeWidth: sd.strokeWidth,
-                  strokeDasharray: sd.strokeDasharray,
+                  strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                  strokeDashoffset: animated ? "1" : void 0,
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  className: "transition-opacity duration-150",
+                  pathLength: animated ? 1 : void 0,
+                  className: tigercatCore.classNames(
+                    "transition-opacity duration-200",
+                    animated && "tiger-line-animated"
+                  ),
                   "data-line-series": sd.seriesIndex
                 }
               ),
-              sd.showPoints && sd.points.map((point) => /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: point.x,
-                  cy: point.y,
-                  r: sd.pointSize,
-                  fill: sd.pointColor,
-                  className: "transition-all duration-150",
-                  "data-point-index": point.pointIndex,
-                  onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                  onMouseMove: handlePointMouseMove,
-                  onMouseLeave: handlePointMouseLeave,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handlePointClick(sd.seriesIndex, point.pointIndex);
-                  }
-                },
-                `point-${sd.seriesIndex}-${point.pointIndex}`
-              ))
+              sd.showPoints && sd.points.map((point) => {
+                const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
+                const hoverSize = sd.pointSize + 2;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: point.x,
+                    cy: point.y,
+                    r: isHovered ? hoverSize : sd.pointSize,
+                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    stroke: sd.pointHollow ? sd.pointColor : "none",
+                    strokeWidth: sd.pointHollow ? 2 : 0,
+                    className: "transition-all duration-200 ease-out",
+                    style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                    "data-point-index": point.pointIndex,
+                    onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                    onMouseMove: handlePointMouseMove,
+                    onMouseLeave: handlePointMouseLeave,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handlePointClick(sd.seriesIndex, point.pointIndex);
+                    }
+                  },
+                  `point-${sd.seriesIndex}-${point.pointIndex}`
+                );
+              })
             ]
           },
           `series-${sd.seriesIndex}`

package/dist/{chunk-FAZQT7YP.mjs → chunk-NJCKTIWB.mjs}

@@ -1,9 +1,9 @@
-import { Tabs, TabPane } from './chunk-C52ZCGYG.mjs';
-import { List } from './chunk-BAPR7UUR.mjs';
-import { Button } from './chunk-STEIWBMF.mjs';
-import { Loading } from './chunk-PUDU34R4.mjs';
-import { Text } from './chunk-6YDIBMCM.mjs';
-import { Card } from './chunk-VD3IK5XT.mjs';
+import { Tabs, TabPane } from './chunk-6PXNWGR5.mjs';
+import { List } from './chunk-TGPQ4KET.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { Loading } from './chunk-AVUXDQYO.mjs';
+import { Text } from './chunk-LIV33O73.mjs';
+import { Card } from './chunk-3M2IG6IN.mjs';
 import { useMemo, useState, useEffect } from 'react';
 import { buildNotificationGroups, classNames, formatActivityTime } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';