@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/{chunk-IK2WHKDA.mjs → chunk-UFQRKWKG.mjs}

@@ -1,51 +1,68 @@
-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/AreaChart.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,
   getStableChartGradientPrefix,
-  getChartElementOpacity,
   getNumberExtent,
   linePointTransitionClasses,
   stackSeriesData,
+  layoutAreaSeries,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   buildChartSeriesKeys,
   resolveMultiSeriesTooltipContent,
   resolveSeriesData,
-  defaultSeriesXYTooltipFormatter
+  defaultSeriesXYTooltipFormatter,
+  defaultChartSeriesName,
+  getCartesianChartShellClasses,
+  findNearestSeriesPoint,
+  flattenChartPoints,
+  chartPointTabIndex,
+  nextChartPointRef,
+  isChartNavigationKey,
+  isNumericChartDomain,
+  CHART_SURFACE_FILL,
+  AREA_DRAW_CLASS,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate
 } from "@expcat/tigercat-core";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var AreaChart = defineComponent({
   name: "TigerAreaChart",
+  inheritAttrs: false,
   props: {
     width: {
       type: Number,
@@ -57,7 +74,7 @@ var AreaChart = defineComponent({
     },
     padding: {
       type: [Number, Object],
-      default: () => DEFAULT_CARTESIAN_PADDING
+      default: () => ({ ...DEFAULT_CHART_PADDING })
     },
     responsive: { type: Boolean, default: false },
     data: {
@@ -209,7 +226,7 @@ var AreaChart = defineComponent({
     },
     gradient: {
       type: Boolean,
-      default: true
+      default: false
     },
     animated: {
       type: Boolean,
@@ -242,6 +259,9 @@ var AreaChart = defineComponent({
     },
     className: {
       type: String
+    },
+    onPointClick: {
+      type: Function
     }
   },
   emits: [
@@ -252,8 +272,9 @@ var AreaChart = 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("area", useId());
@@ -271,15 +292,14 @@ var AreaChart = defineComponent({
     );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
-      resolvedSelectedIndex: _resolvedSelectedIndex,
+      resolvedSelectedIndex,
       activeIndex,
       handleMouseEnter: handleSeriesHoverEnter,
       handleMouseLeave: handleSeriesHoverLeave,
       handleClick: handleSeriesSelect,
-      handleLegendClick: _handleLegendClick,
-      handleLegendHover: _handleLegendHover,
-      handleLegendLeave: _handleLegendLeave,
-      wrapperClasses
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
       showTooltip: computed(() => props.showTooltip),
@@ -289,23 +309,24 @@ var AreaChart = 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 stackedData = computed(
+      () => props.stacked ? stackSeriesData(resolvedSeries.value.map((s) => s.data)) : null
+    );
     const xValues = computed(() => allData.value.map((d) => d.x));
     const yValues = computed(() => {
-      if (props.stacked) {
-        const stackedData = stackSeriesData(resolvedSeries.value.map((s) => s.data));
-        return stackedData.flatMap((series) => series.map((d) => d.y1));
+      if (stackedData.value) {
+        return stackedData.value.flatMap((series) => series.flatMap((item) => [item.y0, item.y1]));
       }
       return 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) {
@@ -318,10 +339,11 @@ var AreaChart = 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.stacked
+      });
       return createLinearScale(extent, [innerRect.value.height, 0]);
     });
-    const baseline = computed(() => resolvedYScale.value.map(0));
     const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
     const palette = computed(() => resolveChartPalette(props.colors));
@@ -329,72 +351,41 @@ var AreaChart = defineComponent({
       () => buildChartSeriesKeys(resolvedSeries.value, { prefix: "area-" })
     );
     const seriesData = computed(() => {
-      const stackedData = props.stacked ? stackSeriesData(resolvedSeries.value.map((s) => s.data)) : null;
-      return resolvedSeries.value.map((series, seriesIndex) => {
-        const seriesKey = seriesKeys.value[seriesIndex];
-        const color = series.color ?? palette.value[seriesIndex % palette.value.length];
-        const fillColor = series.fillColor ?? color;
-        const seriesFillOpacity = series.fillOpacity ?? props.fillOpacity;
-        let points;
-        let areaPath;
-        let linePath;
-        if (props.stacked && stackedData) {
-          const stackedSeries = stackedData[seriesIndex];
-          points = stackedSeries.map((sd, pointIndex) => ({
-            x: resolvedXScale.value.map(sd.original.x),
-            y: resolvedYScale.value.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.value.map(sd.original.x),
-            y: resolvedYScale.value.map(sd.y0)
-          })).reverse();
-          const topPath = createLinePath(topPoints, props.curve);
-          const bottomPath = createLinePath(bottomPoints, props.curve).replace("M", "L");
-          areaPath = `${topPath} ${bottomPath} Z`;
-          linePath = topPath;
-        } else {
-          points = series.data.map((datum, pointIndex) => ({
-            x: resolvedXScale.value.map(datum.x),
-            y: resolvedYScale.value.map(datum.y),
-            datum,
-            pointIndex
-          }));
-          areaPath = createAreaPath(points, baseline.value, props.curve);
-          linePath = createLinePath(points, props.curve);
-        }
-        const opacity = getChartElementOpacity(seriesIndex, activeIndex.value, {
+      const laidOut = layoutAreaSeries(
+        resolvedSeries.value,
+        resolvedXScale.value,
+        resolvedYScale.value,
+        {
+          curve: props.curve,
+          palette: palette.value,
+          activeIndex: activeIndex.value,
+          showArea: true,
+          areaOpacity: props.fillOpacity,
+          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,
-          fillColor,
-          fillOpacity: seriesFillOpacity,
-          areaPath,
-          linePath,
-          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
-        };
-      });
+          inactiveOpacity: props.inactiveOpacity,
+          stacked: props.stacked,
+          fillOpacity: props.fillOpacity,
+          stackedData: stackedData.value ?? void 0
+        }
+      );
+      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]
       })
     );
@@ -403,7 +394,13 @@ var AreaChart = 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) => {
@@ -428,7 +425,7 @@ var AreaChart = 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 };
@@ -448,14 +445,26 @@ var AreaChart = defineComponent({
       );
       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 reversedSeriesData = [...seriesData.value].reverse();
       const chart = h(
@@ -467,31 +476,12 @@ var AreaChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className),
           onResolvedSizeChange
         },
         {
           default: () => [
             // Gradient defs and animation styles
-            props.gradient || props.animated || props.strokeGradient || props.pointGradient ? h("defs", null, [
-              // Animation keyframes
-              props.animated ? h(
-                "style",
-                null,
-                `
-                          .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; }
-                          }
-                        `
-              ) : null,
-              // Area fill gradients
+            props.gradient || props.strokeGradient || props.pointGradient ? h("defs", null, [
               ...props.gradient ? reversedSeriesData.map(
                 (sd) => h(
                   "linearGradient",
@@ -601,6 +591,14 @@ var AreaChart = defineComponent({
               tickFormat: props.yTickFormat,
               label: props.yAxisLabel
             }) : null,
+            trackPointHover ? h("rect", {
+              width: innerRect.value.width,
+              height: innerRect.value.height,
+              fill: "transparent",
+              "data-plot-hit": "",
+              onMousemove: handlePlotMouseMove,
+              onMouseleave: handlePointMouseLeave
+            }) : null,
             // Layer 1: area fills + line strokes (reverse order for proper stacking visual)
             ...reversedSeriesData.map(
               (sd) => h(
@@ -619,9 +617,7 @@ var AreaChart = 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: () => [
@@ -631,7 +627,7 @@ var AreaChart = defineComponent({
                       fill: props.gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
                       "fill-opacity": props.gradient ? 1 : sd.fillOpacity,
                       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
                     }),
@@ -641,14 +637,13 @@ var AreaChart = 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-area-animated"
+                        props.animated && !sd.strokeDasharray ? AREA_DRAW_CLASS : "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]"
                       )
                     })
                   ]
@@ -667,40 +662,67 @@ var AreaChart = defineComponent({
                 sd.points.map((point) => {
                   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 datum = point.datum;
+                  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();
@@ -713,7 +735,7 @@ var AreaChart = defineComponent({
                             point.pointIndex
                           );
                         }
-                      } else if (e.key === "Escape" && props.hoverable) {
+                      } else if (e.key === "Escape" && trackPointHover) {
                         handlePointMouseLeave();
                       }
                     } : void 0
@@ -730,33 +752,29 @@ var AreaChart = 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,
-            onItemClick: handleSeriesSelect,
-            onItemHover: handleSeriesHoverEnter,
-            onItemLeave: handleSeriesHoverLeave
-          }),
+            ariaLabel: labels.value.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }) : null,
           tooltip
         ]
       );

package/dist/chunk-UUY7X4DY.mjs

@@ -0,0 +1,47 @@
+import {
+  PieChart
+} from "./chunk-IWGC7M62.mjs";
+
+// src/components/DonutChart.ts
+import { defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  DEFAULT_DONUT_INNER_RADIUS_RATIO
+} from "@expcat/tigercat-core";
+var DonutChart = defineComponent({
+  name: "TigerDonutChart",
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    innerRadiusRatio: {
+      type: Number,
+      default: DEFAULT_DONUT_INNER_RADIUS_RATIO
+    },
+    className: {
+      type: String
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
+  setup(props, { attrs, emit }) {
+    return () => h(PieChart, {
+      ...attrs,
+      data: props.data,
+      innerRadiusRatio: props.innerRadiusRatio,
+      className: classNames(coerceClassValue(attrs.class), props.className),
+      "onUpdate:hoveredIndex": (index) => emit("update:hoveredIndex", index),
+      "onUpdate:selectedIndex": (index) => emit("update:selectedIndex", index),
+      onSliceClick: (index, datum) => emit("slice-click", index, datum),
+      onSliceHover: (index, datum) => emit("slice-hover", index, datum)
+    });
+  }
+});
+var DonutChart_default = DonutChart;
+
+export {
+  DonutChart,
+  DonutChart_default
+};