vue-chrts 2.1.0-beta-6 → 2.1.0-beta-8

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as I, useSlots as K, useTemplateRef as q, ref as J, getCurrentInstance as Q, computed as d, createElementBlock as f, openBlock as c, normalizeClass as Z, normalizeStyle as p, createVNode as k, createCommentVNode as u, createElementVNode as _, unref as l, withCtx as ee, createBlock as y, Fragment as T, renderList as te, mergeProps as v, renderSlot as B } from "vue";
-import { Position as O, CurveType as h } from "@unovis/ts";
+import { defineComponent as I, useSlots as K, useTemplateRef as q, ref as J, getCurrentInstance as Q, computed as u, openBlock as c, createElementBlock as f, normalizeClass as Z, normalizeStyle as C, createVNode as g, unref as n, withCtx as _, createBlock as y, createCommentVNode as d, Fragment as p, renderList as ee, mergeProps as v, createElementVNode as te, renderSlot as D } from "vue";
+import { Position as $, CurveType as h } from "@unovis/ts";
 import { createScopedMarkers as ie } from "../../utils.js";
 import oe from "../Tooltip.js";
-import { VisXYContainer as ne, VisTooltip as ae, VisArea as D, VisLine as M, VisAxis as w, VisCrosshair as re, VisBulletLegend as le } from "@unovis/vue";
-import { LegendPosition as se } from "../../types.js";
-const ce = ["id"], de = {
+import { VisXYContainer as ne, VisTooltip as ae, VisArea as B, VisLine as O, VisAxis as w, VisCrosshair as re, VisBulletLegend as le } from "@unovis/vue";
+import { LegendPosition as ce } from "../../packages/shared/dist/index.js";
+const se = ["id"], ue = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, S = 0.5, C = "#3b82f6", ve = /* @__PURE__ */ I({
+}, F = 0.5, N = "#3b82f6", ve = /* @__PURE__ */ I({
   __name: "AreaChart",
   props: {
     data: {},
@@ -31,16 +31,11 @@ const ce = ["id"], de = {
     xNumTicks: {},
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    xMinMaxTicksOnly: { type: Boolean },
-    yMinMaxTicksOnly: { type: Boolean },
-    minMaxTicksOnlyShowGridLines: { type: Boolean },
-    xMinMaxTicksOnlyShowGridLines: { type: Boolean },
-    yMinMaxTicksOnlyShowGridLines: { type: Boolean },
     yNumTicks: {},
     yExplicitTicks: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean },
-    legendPosition: { default: se.BottomCenter },
+    legendPosition: { default: ce.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -64,143 +59,127 @@ const ce = ["id"], de = {
     }) }
   },
   emits: ["click"],
-  setup(e, { emit: G }) {
+  setup(e, { emit: V }) {
     var b;
-    const V = G, t = e, j = K(), L = q("slotWrapper"), m = J(), A = `area-${((b = Q()) == null ? void 0 : b.uid) ?? Math.random().toString(36).slice(2)}`, g = d(() => {
+    const j = V, t = e, S = K(), A = q("slotWrapper"), m = J(), k = `area-${((b = Q()) == null ? void 0 : b.uid) ?? Math.random().toString(36).slice(2)}`, x = u(() => {
       const i = Object.values(t.categories).map(
-        (a, n) => `var(--vis-color${n})`
+        (o, r) => `var(--vis-color${r})`
       );
       return Object.values(t.categories).map(
-        (a, n) => a.color ?? i[n]
+        (o, r) => o.color ?? i[r]
       );
-    }), F = d(() => t.yNumTicks !== void 0 ? t.yNumTicks : Math.max(2, Object.keys(t.categories ?? {}).length)), N = d(() => {
+    }), M = u(() => t.yNumTicks !== void 0 ? t.yNumTicks : Math.max(2, Object.keys(t.categories ?? {}).length)), E = u(() => {
       var i;
-      return (i = t.markerConfig) != null && i.config ? ie(t.markerConfig, A) : "";
-    }), W = d(() => {
-      var a;
-      if (!((a = t.markerConfig) != null && a.config)) return {};
+      return (i = t.markerConfig) != null && i.config ? ie(t.markerConfig, k) : "";
+    }), P = u(() => {
+      var o;
+      if (!((o = t.markerConfig) != null && o.config)) return {};
       const i = {};
-      for (const n of Object.keys(t.markerConfig.config))
-        i[`--vis-marker-${n}`] = `url("#${t.markerConfig.id}--${A}--${n}")`;
+      for (const r of Object.keys(t.markerConfig.config))
+        i[`--vis-marker-${r}`] = `url("#${t.markerConfig.id}--${k}--${r}")`;
       return i;
-    }), E = d(() => t.legendPosition.startsWith("top")), P = d(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), X = d(() => {
-      const i = (n, o) => {
-        var r;
-        return `
-    <linearGradient id="gradient${n}-${o}" gradientTransform="rotate(90)">
-      ${((r = t.gradientStops) == null ? void 0 : r.map(
-          (s) => `<stop offset="${s.offset}" stop-color="${o}" stop-opacity="${s.stopOpacity}" />`
-        ).join("")) ?? ""}
-      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
+    }), W = u(() => t.legendPosition.startsWith("top")), X = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), G = u(() => x.value.map((i, o) => {
+      var l;
+      const r = `gradient-${k}-${o}`, a = ((l = t.gradientStops) == null ? void 0 : l.map(
+        (s) => `<stop offset="${s.offset}" stop-color="${i}" stop-opacity="${s.stopOpacity}" />`
+      ).join("")) ?? "";
+      return `
+    <linearGradient id="${r}" gradientTransform="rotate(90)">
+      ${a}
+      <stop offset="100%" stop-color="${i}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, a = (n, o) => {
-        var r;
-        return `
-    <linearGradient id="gradient${n}-${o}" gradientTransform="rotate(90)">
-
-    ${((r = t.gradientStops) == null ? void 0 : r.map(
-          (s) => `
-      <stop offset="${s.offset}" style="stop-color:var(${o});stop-opacity:${s.stopOpacity}" />
-    `
-        ).join("")) ?? ""}
-    </linearGradient>
-  `;
-      };
-      return g.value.map(
-        (n, o) => n != null && n.includes("#") ? i(o, n) : a(o, n ?? C)
-      ).join("");
-    });
+    }).join(""));
     function Y(i) {
-      var a;
+      var o;
       return {
-        y: (n) => Number(n[i]),
-        color: ((a = t.categories[i]) == null ? void 0 : a.color) ?? C
+        y: (r) => Number(r[i]),
+        color: ((o = t.categories[i]) == null ? void 0 : o.color) ?? N
       };
     }
-    const z = d(() => Object.keys(t.categories).map(
-      (i) => (a) => Number(a[i])
-    )), R = d(() => {
+    const z = u(() => Object.keys(t.categories).map(
+      (i) => (o) => Number(o[i])
+    )), R = u(() => {
       const i = Object.keys(t.categories);
-      return i.map((a, n) => (o) => {
-        let r = 0;
-        for (let s = 0; s <= n; s++)
-          r += Number(o[i[s]]) || 0;
-        return r;
+      return i.map((o, r) => (a) => {
+        let l = 0;
+        for (let s = 0; s <= r; s++)
+          l += Number(a[i[s]]) || 0;
+        return l;
       });
-    }), $ = d(() => (i, a) => g.value[a] ?? C);
+    }), L = u(() => (i, o) => x.value[o] ?? N);
     function U(i) {
-      return typeof window > "u" ? "" : L.value ? L.value.innerHTML : "";
+      return typeof window > "u" ? "" : A.value ? A.value.innerHTML : "";
     }
     function H(i) {
       return m.value = i, U();
     }
-    return (i, a) => {
-      var n;
+    return (i, o) => {
+      var r;
       return c(), f("div", {
-        style: p({
+        style: C({
           display: "flex",
-          flexDirection: E.value ? "column-reverse" : "column",
+          flexDirection: W.value ? "column-reverse" : "column",
           gap: "var(--vis-legend-spacing)",
-          ...W.value
+          ...P.value
         }),
         class: Z({ "stacked-area-chart": e.stacked }),
-        id: (n = e.markerConfig) == null ? void 0 : n.id,
-        onClick: a[0] || (a[0] = (o) => V("click", o, m.value))
+        id: (r = e.markerConfig) == null ? void 0 : r.id,
+        onClick: o[0] || (o[0] = (a) => j("click", a, m.value))
       }, [
-        k(l(ne), {
+        g(n(ne), {
           data: e.data,
           height: e.height,
           duration: e.duration,
           padding: e.padding,
-          "svg-defs": X.value + N.value,
+          "svg-defs": G.value + E.value,
           "y-domain": e.yDomain,
           "x-domain": e.xDomain
         }, {
-          default: ee(() => [
-            e.hideTooltip ? u("", !0) : (c(), y(l(ae), {
+          default: _(() => [
+            e.hideTooltip ? d("", !0) : (c(), y(n(ae), {
               key: 0,
-              "horizontal-placement": l(O).Right,
-              "vertical-placement": l(O).Top,
+              "horizontal-placement": n($).Right,
+              "vertical-placement": n($).Top,
               "follow-cursor": t.tooltip.followCursor,
               "show-delay": t.tooltip.showDelay,
               "hide-delay": t.tooltip.hideDelay
             }, null, 8, ["horizontal-placement", "vertical-placement", "follow-cursor", "show-delay", "hide-delay"])),
-            e.stacked ? (c(), f(T, { key: 1 }, [
-              e.hideArea ? u("", !0) : (c(), y(l(D), {
+            e.stacked ? (c(), f(p, { key: 1 }, [
+              e.hideArea ? d("", !0) : (c(), y(n(B), {
                 key: 0,
-                x: (o, r) => r,
+                x: (a, l) => l,
                 y: z.value,
-                color: $.value,
-                opacity: S,
-                "curve-type": e.curveType ?? l(h).MonotoneX
+                color: L.value,
+                opacity: F,
+                "curve-type": e.curveType ?? n(h).MonotoneX
               }, null, 8, ["x", "y", "color", "curve-type"])),
-              k(l(M), {
-                x: (o, r) => r,
+              g(n(O), {
+                x: (a, l) => l,
                 y: R.value,
-                color: $.value,
-                "curve-type": e.curveType ?? l(h).MonotoneX,
+                color: L.value,
+                "curve-type": e.curveType ?? n(h).MonotoneX,
                 "line-width": e.lineWidth
               }, null, 8, ["x", "y", "color", "curve-type", "line-width"])
-            ], 64)) : (c(!0), f(T, { key: 2 }, te(Object.keys(t.categories), (o, r) => (c(), f(T, { key: o }, [
-              e.hideArea ? u("", !0) : (c(), y(l(D), v({
+            ], 64)) : (c(!0), f(p, { key: 2 }, ee(Object.keys(t.categories), (a, l) => (c(), f(p, { key: a }, [
+              e.hideArea ? d("", !0) : (c(), y(n(B), v({
                 key: 0,
-                x: (s, x) => x
-              }, { ref_for: !0 }, Y(o), {
-                color: `url(#gradient${r}-${g.value[r]})`,
-                opacity: S,
-                "curve-type": e.curveType ?? l(h).MonotoneX
+                x: (s, T) => T
+              }, { ref_for: !0 }, Y(a), {
+                color: `url(#gradient-${k}-${l})`,
+                opacity: F,
+                "curve-type": e.curveType ?? n(h).MonotoneX
               }), null, 16, ["x", "color", "curve-type"])),
-              k(l(M), {
-                x: (s, x) => x,
-                y: (s) => s[o],
-                color: g.value[r],
-                "curve-type": e.curveType ?? l(h).MonotoneX,
+              g(n(O), {
+                x: (s, T) => T,
+                y: (s) => s[a],
+                color: x.value[l],
+                "curve-type": e.curveType ?? n(h).MonotoneX,
                 "line-width": e.lineWidth,
-                lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
+                lineDashArray: e.lineDashArray ? e.lineDashArray[l] : void 0
               }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
             ], 64))), 128)),
-            e.hideXAxis ? u("", !0) : (c(), y(l(w), v({
+            e.hideXAxis ? d("", !0) : (c(), y(n(w), v({
               key: 3,
               type: "x",
               label: e.xLabel,
@@ -214,11 +193,11 @@ const ce = ["id"], de = {
               "min-max-ticks-only": e.minMaxTicksOnly,
               duration: e.duration
             }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only", "duration"])),
-            e.hideYAxis ? u("", !0) : (c(), y(l(w), v({
+            e.hideYAxis ? d("", !0) : (c(), y(n(w), v({
               key: 4,
               type: "y",
               label: e.yLabel,
-              "num-ticks": F.value,
+              "num-ticks": M.value,
               "tick-format": e.yFormatter,
               "tick-values": e.yExplicitTicks,
               "grid-line": e.yGridLine,
@@ -226,43 +205,43 @@ const ce = ["id"], de = {
               "tick-line": e.yTickLine,
               duration: e.duration
             }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "duration"])),
-            e.hideTooltip ? u("", !0) : (c(), y(l(re), v({ key: 5 }, e.crosshairConfig, { template: H }), null, 16))
+            e.hideTooltip ? d("", !0) : (c(), y(n(re), v({ key: 5 }, e.crosshairConfig, { template: H }), null, 16))
           ]),
           _: 1
         }, 8, ["data", "height", "duration", "padding", "svg-defs", "y-domain", "x-domain"]),
-        t.hideLegend ? u("", !0) : (c(), f("div", {
+        t.hideLegend ? d("", !0) : (c(), f("div", {
           key: 0,
-          style: p({
+          style: C({
             display: "flex",
-            justifyContent: P.value
+            justifyContent: X.value
           })
         }, [
-          k(l(le), {
-            style: p([
+          g(n(le), {
+            style: C([
               t.legendStyle,
               "display: flex; gap: var(--vis-legend-spacing);"
             ]),
-            items: Object.values(t.categories).map((o) => ({
-              ...o,
-              color: Array.isArray(o.color) ? o.color[0] : o.color
+            items: Object.values(t.categories).map((a) => ({
+              ...a,
+              color: Array.isArray(a.color) ? a.color[0] : a.color
             }))
           }, null, 8, ["style", "items"])
         ], 4)),
-        _("div", de, [
-          l(j).tooltip ? B(i.$slots, "tooltip", {
+        te("div", ue, [
+          n(S).tooltip ? D(i.$slots, "tooltip", {
             key: 0,
             values: m.value
-          }) : m.value ? B(i.$slots, "fallback", { key: 1 }, () => [
-            k(oe, {
+          }) : m.value ? D(i.$slots, "fallback", { key: 1 }, () => [
+            g(oe, {
               data: m.value,
               followCursor: !1,
               categories: e.categories,
               "title-formatter": t.tooltipTitleFormatter,
               yFormatter: t.yFormatter
             }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-          ]) : u("", !0)
+          ]) : d("", !0)
         ], 512)
-      ], 14, ce);
+      ], 14, se);
     };
   }
 });

package/dist/components/AreaChart/types.d.ts

@@ -1,205 +1 @@
-import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig, TooltipConfig } from '../../types';
-import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
-export interface AreaChartProps<T> {
-    /**
-     * The data to be displayed in the area chart.
-     * Each element of the array represents a data point.
-     * The structure of 'T' should be compatible with the chart's rendering logic.
-     */
-    data: T[];
-    /**
-     * The height of the chart in pixels.
-     */
-    height: number;
-    /**
-     * Optional label for the x-axis.
-     */
-    xLabel?: string;
-    /**
-     * Optional label for the y-axis.
-     */
-    yLabel?: string;
-    /**
-     * Optional padding applied to the chart.
-     * Allows specifying individual padding values for the top, right, bottom, and left sides.
-     */
-    padding?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    /**
-     * A record mapping category keys to `BulletLegendItemInterface` objects.
-     * This defines the visual representation and labels for each category in the chart's legend.
-     */
-    categories: Record<string, BulletLegendItemInterface>;
-    /**
-     * A record mapping marker keys to show custom patterns.
-     */
-    markerConfig?: MarkerConfig;
-    /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
-     * @returns {string} The formatted string representation of the tick.
-     */
-    xFormatter?: axisFormatter;
-    /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
-     * @returns {string} The formatted string representation of the tick.
-     */
-    yFormatter?: axisFormatter;
-    /**
-     * Use custom formatter for tooltip titles
-     */
-    tooltipTitleFormatter?: (data: T) => string | number;
-    /**
-     * The type of curve to use for the area chart lines.
-     * See `CurveType` for available options.
-     */
-    curveType?: CurveType;
-    /**
-     * If `true`, hides the area fill, displaying only the line.
-     */
-    hideArea?: boolean;
-    /**
-     * Edit the gradient stops for the area fill.
-     */
-    gradientStops?: Array<{
-        offset: string;
-        stopOpacity: number;
-    }>;
-    /**
-     * The width of the line in pixels. Default is 2px.
-     */
-    lineWidth?: number;
-    /**
-     * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
-     */
-    lineDashArray?: number[][];
-    /**
-     * The desired number of ticks on the x-axis.
-     */
-    xNumTicks?: number;
-    /**
-     * Force specific ticks on the x-axis.
-     */
-    xExplicitTicks?: (number | string | Date)[];
-    /**
-     * Force only first and last ticks on the x-axis.
-     */
-    minMaxTicksOnly?: boolean;
-    /**
-     * Force only first and last ticks on the x-axis.
-     */
-    xMinMaxTicksOnly?: boolean;
-    /**
-     * Force only first and last ticks on the y-axis.
-     */
-    yMinMaxTicksOnly?: boolean;
-    /**
-     * Show grid lines for the min and max axis ticks.
-     */
-    minMaxTicksOnlyShowGridLines?: boolean;
-    /**
-     * Show grid lines for the min and max x-axis ticks.
-     */
-    xMinMaxTicksOnlyShowGridLines?: boolean;
-    /**
-     * Show grid lines for the min and max y-axis ticks.
-     */
-    yMinMaxTicksOnlyShowGridLines?: boolean;
-    /**
-     * The desired number of ticks on the y-axis.
-     */
-    yNumTicks?: number;
-    /**
-     * Force specific ticks on the y-axis.
-     */
-    yExplicitTicks?: (number | string | Date)[];
-    /**
-     * If `true`, hides the chart legend.
-     */
-    hideLegend?: boolean;
-    /**
-     * If `true`, hides the chart tooltip.
-     */
-    hideTooltip?: boolean;
-    /**
-     * Optional position for the legend, if applicable.
-     * See `LegendPosition` for available options.
-     */
-    legendPosition?: LegendPosition;
-    /**
-     * Optional style object for the legend container. Allows custom CSS styling.
-     */
-    legendStyle?: string | Record<string, string>;
-    /**
-     * If `true`, displays a domain line (axis line) along the x-axis.
-     */
-    xDomainLine?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the y-axis.
-     */
-    yDomainLine?: boolean;
-    /**
-     * If `true`, displays tick lines on the x-axis.
-     */
-    xTickLine?: boolean;
-    /**
-     * If `true`, displays tick lines on the y-axis.
-     */
-    yTickLine?: boolean;
-    /**
-     * If `true`, displays grid lines along the x-axis.
-     */
-    xGridLine?: boolean;
-    /**
-     * If `true`, displays grid lines along the y-axis.
-     */
-    yGridLine?: boolean;
-    /**
-     * If `true`, hide the x-axis.
-     */
-    hideXAxis?: boolean;
-    /**
-     * If `true`, hide the y-axis.
-     */
-    hideYAxis?: boolean;
-    /**
-     * Crosshair configuration object for customizing the appearance of the crosshair line.
-     */
-    crosshairConfig?: CrosshairConfig;
-    /**
-     * Axis configuration object for customizing the appearance of the axes.
-     */
-    xAxisConfig?: AxisConfig;
-    /**
-     * Axis configuration object for customizing the appearance of the axes.
-     */
-    yAxisConfig?: AxisConfig;
-    /**
-     * The domain for the y-axis, specified as a tuple of two values.
-     */
-    yDomain?: [number | undefined, number | undefined];
-    /**
-     * The domain for the x-axis, specified as a tuple of two values.
-     */
-    xDomain?: [number | undefined, number | undefined];
-    /**
-     * If `true`, creates a stacked area chart where areas are stacked on top of each other.
-     * When false (default), areas are overlaid on top of each other.
-     */
-    stacked?: boolean;
-    /**
-     * Animation duration in milliseconds for the chart components.
-     */
-    duration?: number;
-    /**
-     * Configuration object for the chart tooltip.
-     */
-    tooltip?: TooltipConfig;
-}
+export type { AreaChartProps } from '../../../../shared/dist/index.d.ts';

package/dist/components/BarChart/BarChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as k, createElementBlock as v, openBlock as d, normalizeStyle as h, createVNode as p, createCommentVNode as c, createElementVNode as j, unref as a, withCtx as $, createBlock as s, Fragment as q, renderList as I, mergeProps as P, renderSlot as F } from "vue";
+import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as k, openBlock as d, createElementBlock as v, normalizeStyle as h, createVNode as p, unref as a, withCtx as j, createBlock as s, createCommentVNode as c, Fragment as $, renderList as q, mergeProps as P, createElementVNode as I, renderSlot as F } from "vue";
 import { Orientation as g, StackedBar as U, GroupedBar as J } from "@unovis/ts";
 import { useStackedGrouped as K } from "./stackedGroupedUtils.js";
 import { VisXYContainer as Q, VisXYLabels as Z, VisTooltip as _, VisStackedBar as G, VisGroupedBar as ee, VisAxis as V, VisBulletLegend as te } from "@unovis/vue";
 import ae from "../Tooltip.js";
-import { LegendPosition as ie } from "../../types.js";
+import { LegendPosition as ie } from "../../packages/shared/dist/index.js";
 const ne = {
   ref: "slotWrapper",
   style: { display: "none" }
@@ -37,10 +37,6 @@ const ne = {
     hideTooltip: { type: Boolean, default: !1 },
     orientation: { default: g.Vertical },
     legendPosition: { default: ie.BottomCenter },
-    duration: { default: 600 },
-    tooltip: { default: () => ({
-      followCursor: !0
-    }) },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -53,6 +49,10 @@ const ne = {
     stackedGroupedSpacing: { default: 0.1 },
     xAxisConfig: {},
     yAxisConfig: {},
+    duration: { default: 600 },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) },
     stackAndGrouped: { type: Boolean },
     valueLabel: {},
     xAxis: {}
@@ -107,7 +107,7 @@ const ne = {
         height: e.height,
         duration: e.duration
       }, {
-        default: $(() => {
+        default: j(() => {
           var o, u, f, x;
           return [
             e.valueLabel ? (d(), s(a(Z), {
@@ -139,7 +139,7 @@ const ne = {
                 }
               }
             }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
-            e.stackAndGrouped ? (d(!0), v(q, { key: 2 }, I(m.value.states, (n) => (d(), s(a(G), {
+            e.stackAndGrouped ? (d(!0), v($, { key: 2 }, q(m.value.states, (n) => (d(), s(a(G), {
               key: n,
               data: m.value.chartData,
               x: (r, b) => b + m.value.positions[n],
@@ -216,7 +216,7 @@ const ne = {
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      j("div", ne, [
+      I("div", ne, [
         a(D).tooltip ? F(i.$slots, "tooltip", {
           key: 0,
           values: y.value