@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-67VS6QHJ.mjs → chunk-APWDXCWD.mjs}

@@ -1,59 +1,69 @@
-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-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/ScatterChart.ts
-import { defineComponent, computed, h, onMounted, ref, useId } from "vue";
+import { defineComponent, computed, h, onMounted, ref, useId, watch } from "vue";
 import {
   classNames,
   createLinearScale,
-  getChartElementOpacity,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
-  getScatterHoverSize,
-  getScatterPointPath,
   scatterPointTransitionClasses,
-  SCATTER_ENTRANCE_KEYFRAMES,
   SCATTER_ENTRANCE_CLASS,
+  layoutScatterPoints,
+  scatterPointDisplayLabel,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  CHART_SURFACE_FILL,
+  SCATTER_ENTRANCE_STAGGER_MS,
+  SCATTER_ENTRANCE_STAGGER_MAX_MS,
+  formatChartTemplate,
+  coerceClassValue,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   resolveChartTooltipContent,
   mergeTigerLocale,
   getChartLabels
 } from "@expcat/tigercat-core";
 var ScatterChart = defineComponent({
   name: "TigerScatterChart",
+  inheritAttrs: false,
   props: {
     width: { type: Number, default: 320 },
     height: { type: Number, default: 200 },
     padding: {
       type: [Number, Object],
-      default: 24
+      default: () => ({ ...DEFAULT_CHART_PADDING })
     },
     responsive: { type: Boolean, default: false },
     data: {
@@ -75,7 +85,11 @@ var ScatterChart = defineComponent({
     gradient: { type: Boolean, default: false },
     animated: { type: Boolean, default: false },
     pointBorderWidth: { type: Number, default: 0 },
-    pointBorderColor: { type: String, default: "white" },
+    pointBorderColor: { type: String, default: CHART_SURFACE_FILL },
+    sizeScale: {
+      type: [Boolean, Object],
+      default: false
+    },
     showGrid: { type: Boolean, default: true },
     showAxis: { type: Boolean, default: true },
     showXAxis: { type: Boolean, default: true },
@@ -111,6 +125,9 @@ var ScatterChart = defineComponent({
       type: Number,
       default: void 0
     },
+    onPointClick: {
+      type: Function
+    },
     // Legend
     showLegend: { type: Boolean, default: false },
     legendPosition: {
@@ -136,7 +153,7 @@ var ScatterChart = defineComponent({
     className: { type: String }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "point-click", "point-hover"],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const gradientPrefix = getStableChartGradientPrefix("scatter", useId());
     const mounted = ref(false);
@@ -145,10 +162,17 @@ var ScatterChart = defineComponent({
     onMounted(() => {
       if (props.animated) mounted.value = true;
     });
+    watch(
+      () => props.animated,
+      (value) => {
+        if (value) mounted.value = true;
+      }
+    );
     const {
       tooltipPosition,
       resolvedHoveredIndex,
       activeIndex,
+      resolvedSelectedIndex,
       handleMouseEnter,
       handleMouseMove,
       handleMouseLeave,
@@ -156,8 +180,7 @@ var ScatterChart = defineComponent({
       handleKeyDown,
       handleLegendClick,
       handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
+      handleLegendLeave
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
       showTooltip: computed(() => props.showTooltip),
@@ -167,9 +190,14 @@ var ScatterChart = 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) => props.data[index],
-      eventNames: { hover: "point-hover", click: "point-click" }
+      onHover: (index, datum) => emit("point-hover", index, datum),
+      onClick: (index, datum) => {
+        props.onPointClick?.(index, datum);
+        emit("point-click", index, datum);
+      }
     });
     const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
       () => props.width,
@@ -193,25 +221,18 @@ var ScatterChart = defineComponent({
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors, props.pointColor));
     const points = computed(
-      () => props.data.map((item, index) => {
-        const color = item.color ?? palette.value[index % palette.value.length];
-        const opacity = getChartElementOpacity(index, activeIndex.value, {
-          activeOpacity: props.activeOpacity,
-          inactiveOpacity: props.inactiveOpacity
-        });
-        const isHovered = resolvedHoveredIndex.value === index;
-        const baseSize = item.size ?? props.pointSize;
-        const r = isHovered ? getScatterHoverSize(baseSize) : baseSize;
-        return {
-          cx: resolvedXScale.value.map(item.x),
-          cy: resolvedYScale.value.map(item.y),
-          r,
-          baseSize,
-          color,
-          opacity: props.pointOpacity ?? opacity,
-          isHovered,
-          datum: item
-        };
+      () => layoutScatterPoints(props.data, resolvedXScale.value, resolvedYScale.value, {
+        pointSize: props.pointSize,
+        pointStyle: props.pointStyle,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        hoveredIndex: resolvedHoveredIndex.value,
+        gradient: props.gradient,
+        gradientPrefix,
+        sizeScale: props.sizeScale,
+        pointOpacity: props.pointOpacity,
+        activeOpacity: props.activeOpacity,
+        inactiveOpacity: props.inactiveOpacity
       })
     );
     const legendItems = computed(
@@ -219,7 +240,8 @@ var ScatterChart = defineComponent({
         data: props.data,
         palette: palette.value,
         activeIndex: activeIndex.value,
-        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : d.label ?? `(${d.x}, ${d.y})`,
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : scatterPointDisplayLabel(d, i, labels.value.pointAriaLabel),
         getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
@@ -228,29 +250,46 @@ var ScatterChart = defineComponent({
         resolvedHoveredIndex.value,
         props.data,
         props.tooltipFormatter,
-        (datum, index) => {
-          const label = datum.label ?? `Point ${index + 1}`;
-          return `${label}: (${datum.x}, ${datum.y})`;
-        }
+        (datum, index) => formatChartTemplate(labels.value.pointAriaLabel, {
+          index: index + 1,
+          x: datum.x,
+          y: datum.y
+        })
       )
     );
     return () => {
       const defs = props.gradient ? h(
         "defs",
         null,
-        palette.value.map(
-          (color, i) => h(
+        points.value.map(
+          (point) => h(
             "radialGradient",
-            { id: `${gradientPrefix}-${i}`, cx: "35%", cy: "35%", r: "65%" },
+            {
+              id: `${gradientPrefix}-${point.index}`,
+              cx: "35%",
+              cy: "35%",
+              r: "65%"
+            },
             [
-              h("stop", { offset: "0%", "stop-color": "#fff", "stop-opacity": "0.5" }),
-              h("stop", { offset: "50%", "stop-color": color, "stop-opacity": "0.95" }),
-              h("stop", { offset: "100%", "stop-color": color, "stop-opacity": "1" })
+              h("stop", {
+                offset: "0%",
+                "stop-color": CHART_SURFACE_FILL,
+                "stop-opacity": "0.5"
+              }),
+              h("stop", {
+                offset: "50%",
+                "stop-color": point.color,
+                "stop-opacity": "0.95"
+              }),
+              h("stop", {
+                offset: "100%",
+                "stop-color": point.color,
+                "stop-opacity": "1"
+              })
             ]
           )
         )
       ) : null;
-      const animStyle = props.animated && mounted.value ? h("style", null, SCATTER_ENTRANCE_KEYFRAMES) : null;
       const chart = h(
         ChartCanvas,
         {
@@ -260,13 +299,11 @@ var ScatterChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className),
           onResolvedSizeChange
         },
         {
           default: () => [
             defs,
-            animStyle,
             props.showGrid ? h(ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -299,40 +336,61 @@ var ScatterChart = defineComponent({
               ChartSeries,
               { data: props.data, type: "scatter" },
               {
-                default: () => points.value.map((point, index) => {
-                  const paletteIdx = index % palette.value.length;
-                  const fill = props.gradient ? `url(#${gradientPrefix}-${paletteIdx})` : point.color;
-                  const interactive = props.hoverable || props.selectable;
+                default: () => points.value.map((point, visualIndex) => {
+                  const interactive = props.hoverable || props.selectable || typeof props.onPointClick === "function";
                   const filterStyle = point.isHovered ? getScatterHoverShadow(point.color) : void 0;
-                  const animDelay = props.animated && mounted.value ? `${index * 60}ms` : void 0;
+                  const animDelay = props.animated && mounted.value ? `${Math.min(visualIndex * SCATTER_ENTRANCE_STAGGER_MS, SCATTER_ENTRANCE_STAGGER_MAX_MS)}ms` : void 0;
+                  const visualActive = points.value.findIndex(
+                    (item) => item.index === (activeIndex.value ?? 0)
+                  );
                   const styleStr = [
                     filterStyle ? `filter:${filterStyle}` : "",
-                    animDelay ? `animation:${SCATTER_ENTRANCE_CLASS} var(--tiger-motion-duration-slow,500ms) var(--tiger-motion-ease-spring,cubic-bezier(.34,1.56,.64,1)) ${animDelay} both` : ""
+                    animDelay ? `animation-delay:${animDelay}` : ""
                   ].filter(Boolean).join(";");
                   const shared = {
-                    fill,
+                    fill: point.fill,
                     opacity: point.opacity,
                     stroke: props.pointBorderColor,
                     "stroke-width": props.pointBorderWidth,
                     class: classNames(
-                      scatterPointTransitionClasses,
+                      props.animated ? scatterPointTransitionClasses : void 0,
                       animDelay && SCATTER_ENTRANCE_CLASS,
                       interactive && "cursor-pointer"
                     ),
                     style: styleStr || void 0,
-                    tabindex: props.selectable ? 0 : void 0,
-                    role: props.selectable ? "button" : "img",
-                    "aria-label": point.datum.label ?? labels.value.pointAriaLabel.replace("{index}", String(index + 1)).replace("{x}", String(point.datum.x)).replace("{y}", String(point.datum.y)),
-                    "data-point-index": index,
-                    onMouseenter: (e) => handleMouseEnter(index, e),
+                    tabindex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? 0 : visualActive) : void 0,
+                    role: interactive ? "button" : void 0,
+                    "aria-hidden": interactive ? void 0 : true,
+                    "aria-label": interactive ? point.datum.label ?? formatChartTemplate(labels.value.pointAriaLabel, {
+                      index: point.index + 1,
+                      x: point.datum.x,
+                      y: point.datum.y
+                    }) : void 0,
+                    "data-point-index": point.index,
+                    onMouseenter: (e) => handleMouseEnter(point.index, e),
                     onMousemove: handleMouseMove,
                     onMouseleave: handleMouseLeave,
-                    onClick: () => handleClick(index),
-                    onKeydown: (e) => handleKeyDown(e, index)
+                    onClick: () => handleClick(point.index),
+                    onKeydown: (e) => {
+                      if (isChartNavigationKey(e.key)) {
+                        e.preventDefault();
+                        const nextVisual = nextChartRovingIndex(
+                          visualIndex,
+                          e.key,
+                          points.value.length
+                        );
+                        const next = points.value[nextVisual];
+                        const node = e.currentTarget.parentElement?.querySelector(`[data-point-index="${next.index}"]`);
+                        if (node instanceof SVGElement) node.focus();
+                        handleMouseEnter(next.index, e);
+                        return;
+                      }
+                      handleKeyDown(e, point.index);
+                    }
                   };
                   if (props.pointStyle === "circle") {
                     return h("circle", {
-                      key: `point-${index}`,
+                      key: `point-${point.index}`,
                       cx: point.cx,
                       cy: point.cy,
                       r: point.r,
@@ -342,11 +400,11 @@ var ScatterChart = defineComponent({
                   return h(
                     "g",
                     {
-                      key: `point-${index}`,
+                      key: `point-${point.index}`,
                       transform: `translate(${point.cx},${point.cy})`
                     },
                     h("path", {
-                      d: getScatterPointPath(props.pointStyle, point.r),
+                      d: point.d,
                       ...shared
                     })
                   );
@@ -362,26 +420,21 @@ var ScatterChart = 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,
             ariaLabel: labels.value.legendAriaLabel,
@@ -389,7 +442,7 @@ var ScatterChart = defineComponent({
             onItemClick: handleLegendClick,
             onItemHover: handleLegendHover,
             onItemLeave: handleLegendLeave
-          }),
+          }) : null,
           tooltip
         ]
       );