@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-6NYC7EY2.mjs → chunk-LY64PCAS.mjs}

@@ -1,50 +1,67 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-FHUGOSEY.mjs";
+} from "./chunk-AI6X2WFK.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-W2FOU4XH.mjs";
 import {
   ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-ZTALXP6T.mjs";
 import {
   ChartTooltip
-} from "./chunk-SPFL55TF.mjs";
+} from "./chunk-2XITUFL6.mjs";
 import {
   ChartAxis
-} from "./chunk-ZWVA7HT3.mjs";
+} from "./chunk-4KOKMAMY.mjs";
 import {
   ChartCanvas
-} from "./chunk-SNNT64HK.mjs";
+} from "./chunk-6K5BLE4Q.mjs";
 import {
   ChartGrid
-} from "./chunk-MI6TL3CQ.mjs";
+} from "./chunk-VJ5OA6JN.mjs";
 import {
   ChartLegend
-} from "./chunk-V443QIJM.mjs";
+} from "./chunk-V4H2Z5ZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/LineChart.ts
-import { defineComponent, computed, getCurrentInstance, h, ref, useId } from "vue";
+import { defineComponent, computed, h, ref, useId } from "vue";
 import {
   classNames,
-  createAreaPath,
+  coerceClassValue,
   createLinearScale,
-  createLinePath,
   createPointScale,
-  getChartElementOpacity,
   getStableChartGradientPrefix,
   getNumberExtent,
   linePointTransitionClasses,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   buildChartSeriesKeys,
   resolveMultiSeriesTooltipContent,
   resolveSeriesData,
-  defaultSeriesXYTooltipFormatter
+  defaultSeriesXYTooltipFormatter,
+  defaultChartSeriesName,
+  layoutLineSeries,
+  getCartesianChartShellClasses,
+  findNearestSeriesPoint,
+  flattenChartPoints,
+  chartPointTabIndex,
+  nextChartPointRef,
+  isChartNavigationKey,
+  isNumericChartDomain,
+  CHART_SURFACE_FILL,
+  LINE_DRAW_CLASS,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate
 } from "@expcat/tigercat-core";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var LineChart = defineComponent({
   name: "TigerLineChart",
+  inheritAttrs: false,
   props: {
     width: {
       type: Number,
@@ -56,7 +73,7 @@ var LineChart = defineComponent({
     },
     padding: {
       type: [Number, Object],
-      default: () => DEFAULT_CARTESIAN_PADDING
+      default: () => ({ ...DEFAULT_CHART_PADDING })
     },
     responsive: { type: Boolean, default: false },
     data: {
@@ -242,6 +259,9 @@ var LineChart = defineComponent({
     },
     className: {
       type: String
+    },
+    onPointClick: {
+      type: Function
     }
   },
   emits: [
@@ -252,8 +272,9 @@ var LineChart = defineComponent({
     "point-click",
     "point-hover"
   ],
-  setup(props, { emit }) {
-    const instance = getCurrentInstance();
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("line", useId());
@@ -271,13 +292,13 @@ var LineChart = defineComponent({
     );
     const {
       activeIndex,
+      resolvedSelectedIndex,
       handleMouseEnter: handleSeriesHoverEnter,
       handleMouseLeave: handleSeriesHoverLeave,
       handleClick: handleSeriesSelect,
       handleLegendClick,
       handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
+      handleLegendLeave
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
       showTooltip: computed(() => props.showTooltip),
@@ -287,17 +308,16 @@ var LineChart = defineComponent({
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
-      emit,
+      onHoveredIndexChange: (index) => emit("update:hoveredIndex", index),
+      onSelectedIndexChange: (index) => emit("update:selectedIndex", index),
       getData: (index) => resolvedSeries.value[index],
-      eventNames: {
-        hover: "series-hover",
-        click: "series-click"
-      }
+      onHover: (index, datum) => emit("series-hover", index, datum),
+      onClick: (index, datum) => emit("series-click", index, datum)
     });
     const allData = computed(() => resolvedSeries.value.flatMap((s) => s.data));
     const xValues = computed(() => allData.value.map((d) => d.x));
     const yValues = computed(() => allData.value.map((d) => d.y));
-    const isXNumeric = computed(() => xValues.value.every((v) => typeof v === "number"));
+    const isXNumeric = computed(() => isNumericChartDomain(xValues.value));
     const resolvedXScale = computed(() => {
       if (props.xScale) return props.xScale;
       if (isXNumeric.value) {
@@ -310,7 +330,9 @@ var LineChart = defineComponent({
     });
     const resolvedYScale = computed(() => {
       if (props.yScale) return props.yScale;
-      const extent = getNumberExtent(yValues.value, { includeZero: props.includeZero });
+      const extent = getNumberExtent(yValues.value, {
+        includeZero: props.includeZero || props.showArea
+      });
       return createLinearScale(extent, [innerRect.value.height, 0]);
     });
     const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
@@ -319,49 +341,39 @@ var LineChart = defineComponent({
     const seriesKeys = computed(
       () => buildChartSeriesKeys(resolvedSeries.value, { prefix: "line-" })
     );
-    const seriesData = computed(
-      () => resolvedSeries.value.map((series, seriesIndex) => {
-        const seriesKey = seriesKeys.value[seriesIndex];
-        const color = series.color ?? palette.value[seriesIndex % palette.value.length];
-        const points = series.data.map((datum, pointIndex) => ({
-          x: resolvedXScale.value.map(datum.x),
-          y: resolvedYScale.value.map(datum.y),
-          datum,
-          pointIndex
-        }));
-        const linePath = createLinePath(points, props.curve);
-        const seriesShowArea = series.showArea ?? props.showArea;
-        const areaPath = seriesShowArea ? createAreaPath(points, innerRect.value.height, props.curve) : "";
-        const opacity = getChartElementOpacity(seriesIndex, activeIndex.value, {
+    const seriesData = computed(() => {
+      const laidOut = layoutLineSeries(
+        resolvedSeries.value,
+        resolvedXScale.value,
+        resolvedYScale.value,
+        {
+          curve: props.curve,
+          palette: palette.value,
+          activeIndex: activeIndex.value,
+          showArea: props.showArea,
+          areaOpacity: props.areaOpacity,
+          strokeWidth: props.strokeWidth,
+          showPoints: props.showPoints,
+          pointSize: props.pointSize,
+          pointColor: props.pointColor,
+          pointHollow: props.pointHollow,
           activeOpacity: props.activeOpacity,
           inactiveOpacity: props.inactiveOpacity
-        });
-        return {
-          series,
-          seriesIndex,
-          seriesKey,
-          color,
-          linePath,
-          areaPath,
-          showArea: seriesShowArea,
-          areaOpacity: series.areaOpacity ?? props.areaOpacity,
-          points,
-          opacity,
-          strokeWidth: series.strokeWidth ?? props.strokeWidth,
-          strokeDasharray: series.strokeDasharray,
-          showPoints: series.showPoints ?? props.showPoints,
-          pointSize: series.pointSize ?? props.pointSize,
-          pointColor: series.pointColor ?? color,
-          pointHollow: series.pointHollow ?? props.pointHollow
-        };
-      })
-    );
+        }
+      );
+      return laidOut.map((item, seriesIndex) => ({
+        ...item,
+        seriesKey: seriesKeys.value[seriesIndex]
+      }));
+    });
+    const flatPoints = computed(() => flattenChartPoints(seriesData.value));
     const legendItems = computed(
       () => buildChartLegendItems({
         data: resolvedSeries.value,
         palette: palette.value,
         activeIndex: activeIndex.value,
-        getLabel: (s, i) => props.legendFormatter ? props.legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (s, i) => props.legendFormatter ? props.legendFormatter(s, i) : s.name ?? defaultChartSeriesName(i, labels.value.seriesName),
         getColor: (s, i) => s.color ?? palette.value[i % palette.value.length]
       })
     );
@@ -370,7 +382,13 @@ var LineChart = defineComponent({
         hoveredPointInfo.value,
         resolvedSeries.value,
         props.tooltipFormatter,
-        defaultSeriesXYTooltipFormatter
+        (datum, seriesIndex, pointIndex, s) => defaultSeriesXYTooltipFormatter(
+          datum,
+          seriesIndex,
+          pointIndex,
+          s,
+          labels.value.seriesName
+        )
       )
     );
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
@@ -395,7 +413,7 @@ var LineChart = defineComponent({
       }
     };
     const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
-      if (!props.hoverable) return;
+      if (!(props.showTooltip || props.hoverable)) return;
       const rect = el.getBoundingClientRect();
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
@@ -407,22 +425,31 @@ var LineChart = defineComponent({
       );
     };
     const handlePointClick = (seriesIndex, pointIndex) => {
-      emit(
-        "point-click",
-        seriesIndex,
-        pointIndex,
-        resolvedSeries.value[seriesIndex]?.data[pointIndex]
-      );
+      const datum = resolvedSeries.value[seriesIndex]?.data[pointIndex];
+      props.onPointClick?.(seriesIndex, pointIndex, datum);
+      emit("point-click", seriesIndex, pointIndex, datum);
       handleSeriesSelect(seriesIndex);
     };
-    const handleKeyDown = (event, seriesIndex) => {
-      if (!props.selectable) return;
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      handleSeriesSelect(seriesIndex);
+    const handlePlotMouseMove = (event) => {
+      if (!(props.showTooltip || props.hoverable)) return;
+      const target = event.currentTarget;
+      const rect = target.getBoundingClientRect();
+      const width = rect.width || innerRect.value.width;
+      const height = rect.height || innerRect.value.height;
+      if (width === 0 || height === 0) return;
+      const x = (event.clientX - rect.left) / width * innerRect.value.width;
+      const y = (event.clientY - rect.top) / height * innerRect.value.height;
+      const nearest = findNearestSeriesPoint(
+        seriesData.value.map((sd) => sd.points),
+        x,
+        y
+      );
+      if (!nearest) return;
+      hoveredPointInfo.value = nearest;
+      tooltipPosition.value = { x: event.clientX, y: event.clientY };
     };
     return () => {
-      const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
+      const pointClickable = typeof props.onPointClick === "function";
       const trackPointHover = props.showTooltip || props.hoverable;
       const chart = h(
         ChartCanvas,
@@ -433,7 +460,6 @@ var LineChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className),
           onResolvedSizeChange
         },
         {
@@ -467,25 +493,15 @@ var LineChart = defineComponent({
               label: props.yAxisLabel
             }) : null,
             // Gradient defs and animation styles
-            seriesData.value.some((sd) => sd.showArea) || props.animated || props.strokeGradient || props.pointGradient ? h("defs", null, [
-              // Animation keyframes
-              props.animated ? h(
-                "style",
-                null,
-                `
-                          .tiger-line-animated {
-                            animation: tiger-line-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
-                          }
-                          @keyframes tiger-line-draw {
-                            from { stroke-dashoffset: 1; }
-                            to { stroke-dashoffset: 0; }
-                          }
-                          @media (prefers-reduced-motion: reduce) {
-                            .tiger-line-animated { animation-duration: 0ms; }
-                          }
-                        `
-              ) : null,
-              // Area fill gradients
+            trackPointHover ? h("rect", {
+              width: innerRect.value.width,
+              height: innerRect.value.height,
+              fill: "transparent",
+              "data-plot-hit": "",
+              onMousemove: handlePlotMouseMove,
+              onMouseleave: handlePointMouseLeave
+            }) : null,
+            seriesData.value.some((sd) => sd.showArea) || props.strokeGradient || props.pointGradient ? h("defs", null, [
               ...seriesData.value.filter((sd) => sd.showArea).map(
                 (sd) => h(
                   "linearGradient",
@@ -584,9 +600,7 @@ var LineChart = defineComponent({
                   ),
                   onMouseenter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
                   onMouseleave: handleSeriesHoverLeave,
-                  onClick: () => handleSeriesSelect(sd.seriesIndex),
-                  tabindex: props.selectable ? 0 : void 0,
-                  onKeydown: (e) => handleKeyDown(e, sd.seriesIndex)
+                  onClick: () => handleSeriesSelect(sd.seriesIndex)
                 },
                 {
                   default: () => [
@@ -595,7 +609,7 @@ var LineChart = defineComponent({
                       d: sd.areaPath,
                       fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                       stroke: "none",
-                      class: "transition-opacity duration-300",
+                      class: "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]",
                       "data-area-series": sd.seriesIndex,
                       "data-series-key": sd.seriesKey
                     }) : null,
@@ -605,14 +619,14 @@ var LineChart = defineComponent({
                       fill: "none",
                       stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                       "stroke-width": sd.strokeWidth,
-                      "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
-                      "stroke-dashoffset": props.animated ? "1" : void 0,
+                      "stroke-dasharray": sd.strokeDasharray,
+                      "stroke-dashoffset": props.animated && !sd.strokeDasharray ? "1" : void 0,
                       "stroke-linecap": "round",
                       "stroke-linejoin": "round",
-                      pathLength: props.animated ? 1 : void 0,
+                      pathLength: props.animated && !sd.strokeDasharray ? 1 : void 0,
                       class: classNames(
-                        "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
-                        props.animated && "tiger-line-animated"
+                        props.animated && !sd.strokeDasharray ? void 0 : "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]",
+                        props.animated && !sd.strokeDasharray && LINE_DRAW_CLASS
                       ),
                       "data-line-series": sd.seriesIndex,
                       "data-series-key": sd.seriesKey
@@ -622,39 +636,66 @@ var LineChart = defineComponent({
                       const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                       const hoverSize = sd.pointSize + 2;
                       const datum = resolvedSeries.value[sd.seriesIndex]?.data?.[point.pointIndex];
-                      const pointInteractive = props.hoverable || pointClickable;
+                      const pointInteractive = props.hoverable || props.selectable || pointClickable;
                       return h("circle", {
                         key: `point-${sd.seriesKey}-${point.pointIndex}`,
                         cx: point.x,
                         cy: point.y,
                         r: isHovered ? hoverSize : sd.pointSize,
-                        fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
+                        fill: sd.pointHollow ? CHART_SURFACE_FILL : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                         stroke: sd.pointHollow ? sd.pointColor : "none",
                         "stroke-width": sd.pointHollow ? 2 : 0,
                         class: classNames(
-                          linePointTransitionClasses,
+                          props.animated ? linePointTransitionClasses : void 0,
                           pointInteractive && "cursor-pointer"
                         ),
                         style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
-                        role: pointInteractive ? "button" : "img",
-                        "aria-label": datum?.label ?? String(datum?.y ?? ""),
-                        tabindex: pointInteractive ? 0 : void 0,
+                        role: pointInteractive ? "button" : void 0,
+                        "aria-hidden": pointInteractive ? void 0 : true,
+                        "aria-label": pointInteractive ? datum?.label ?? formatChartTemplate(labels.value.pointAriaLabel, {
+                          index: point.pointIndex + 1,
+                          x: String(datum?.x ?? ""),
+                          y: String(datum?.y ?? "")
+                        }) : void 0,
+                        tabindex: pointInteractive ? chartPointTabIndex(
+                          sd.seriesIndex,
+                          point.pointIndex,
+                          hoveredPointInfo.value,
+                          flatPoints.value
+                        ) : 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: pointClickable ? (e) => {
+                        onClick: (e) => {
                           e.stopPropagation();
                           handlePointClick(sd.seriesIndex, point.pointIndex);
-                        } : void 0,
-                        onFocus: props.hoverable ? (e) => showPointTooltipFromElement(
+                        },
+                        onFocus: trackPointHover ? (e) => showPointTooltipFromElement(
                           e.currentTarget,
                           sd.seriesIndex,
                           point.pointIndex
                         ) : void 0,
-                        onBlur: props.hoverable ? handlePointMouseLeave : 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.value
+                            );
+                            if (!next) return;
+                            const node = e.currentTarget.ownerSVGElement?.querySelector(
+                              `[data-series-key="${seriesKeys.value[next.seriesIndex]}"][data-point-index="${next.pointIndex}"]`
+                            );
+                            if (node instanceof SVGElement) node.focus();
+                            return;
+                          }
                           if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             e.stopPropagation();
@@ -667,7 +708,7 @@ var LineChart = defineComponent({
                                 point.pointIndex
                               );
                             }
-                          } else if (e.key === "Escape" && props.hoverable) {
+                          } else if (e.key === "Escape" && trackPointHover) {
                             handlePointMouseLeave();
                           }
                         } : void 0
@@ -686,33 +727,29 @@ var LineChart = defineComponent({
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;
-      if (!props.showLegend) {
-        return h(
-          "div",
-          {
-            class: classNames(
-              "relative",
-              props.responsive ? "block w-full min-w-0" : "inline-block"
-            )
-          },
-          [chart, tooltip]
-        );
-      }
       return h(
         "div",
-        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        {
+          class: getCartesianChartShellClasses({
+            showLegend: props.showLegend,
+            legendPosition: props.legendPosition,
+            responsive: props.responsive,
+            className: classNames(coerceClassValue(attrs.class), props.className)
+          })
+        },
         [
           chart,
-          h(ChartLegend, {
+          props.showLegend ? h(ChartLegend, {
             items: legendItems.value,
-            position: props.legendPosition,
+            orientation: chartLegendOrientationFromPosition(props.legendPosition),
             markerSize: props.legendMarkerSize,
             gap: props.legendGap,
             interactive: props.hoverable || props.selectable,
+            ariaLabel: labels.value.legendAriaLabel,
             onItemClick: handleLegendClick,
             onItemHover: handleLegendHover,
             onItemLeave: handleLegendLeave
-          }),
+          }) : null,
           tooltip
         ]
       );