vue-chrts 2.1.3 → 2.1.4

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

@@ -152,7 +152,7 @@ export interface AreaChartProps<T> {
     /**
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: CrosshairConfig;
+    crosshairConfig?: CrosshairConfig<T>;
     /**
      * Axis configuration object for customizing the appearance of the axes.
      */

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

package/dist/components/BarChart/BarChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as f, createElementBlock as b, openBlock as l, normalizeStyle as v, createVNode as h, createCommentVNode as u, createElementVNode as j, unref as o, withCtx as $, createBlock as s, Fragment as q, renderList as I, mergeProps as T, renderSlot as P } from "vue";
-import { Orientation as p, StackedBar as U, GroupedBar as J } from "@unovis/ts";
+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 F, VisGroupedBar as ee, VisAxis as G, VisBulletLegend as ae } from "@unovis/vue";
-import oe from "../Tooltip.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 "../../enums.js";
-const re = {
+const ne = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, pe = /* @__PURE__ */ W({
+}, ce = /* @__PURE__ */ W({
   __name: "BarChart",
   props: {
     data: {},
@@ -35,7 +35,7 @@ const re = {
     radius: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean, default: !1 },
-    orientation: { default: p.Vertical },
+    orientation: { default: g.Vertical },
     legendPosition: { default: ie.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
@@ -58,119 +58,119 @@ const re = {
     xAxis: {}
   },
   emits: ["click"],
-  setup(V, { emit: S }) {
-    const w = S, a = V, D = X(), L = H("slotWrapper"), g = Y();
-    if (a.valueLabel && !a.xAxis)
+  setup(e, { emit: S }) {
+    const w = S, t = e, D = X(), L = H("slotWrapper"), y = Y();
+    if (t.valueLabel && !t.xAxis)
       throw new Error(
         "BarChart: 'xAxis' prop is required when 'valueLabel' is enabled. Please provide an 'xAxis' to display value labels."
       );
-    if (!a.yAxis || a.yAxis.length === 0)
+    if (!t.yAxis || t.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const A = f(() => a.yAxis.map((e) => (n) => n[e])), x = (e, n) => {
-      var r;
-      return (r = Object.values(a.categories)[n]) == null ? void 0 : r.color;
-    }, c = f(
+    const A = k(() => t.yAxis.map((n) => (l) => l[n])), B = (n, l) => {
+      var o;
+      return (o = Object.values(t.categories)[l]) == null ? void 0 : o.color;
+    }, m = k(
       () => K({
-        data: a.data,
-        categories: a.categories,
-        stackAndGrouped: a.stackAndGrouped,
-        xAxis: a.xAxis,
-        spacing: a.stackedGroupedSpacing
+        data: t.data,
+        categories: t.categories,
+        stackAndGrouped: t.stackAndGrouped,
+        xAxis: t.xAxis,
+        spacing: t.stackedGroupedSpacing
       }).value
-    ), O = f(() => a.legendPosition.startsWith("top")), E = f(() => a.legendPosition.includes("left") ? "flex-start" : a.legendPosition.includes("right") ? "flex-end" : "center");
-    function B(e) {
-      g.value = e;
+    ), O = k(() => t.legendPosition.startsWith("top")), E = k(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function C(n) {
+      y.value = n;
     }
-    const C = a.yAxis.map((e) => (n) => n[e]), N = C.length, M = a.data.flatMap(
-      (e, n) => C.map((r, d) => ({
-        x: n,
-        y: Number(r(e) ?? 0),
-        itemIndex: d
+    const T = t.yAxis.map((n) => (l) => l[n]), N = T.length, M = t.data.flatMap(
+      (n, l) => T.map((o, u) => ({
+        x: l,
+        y: Number(o(n) ?? 0),
+        itemIndex: u
       }))
-    ), z = (e) => {
-      if (a.stacked || a.stackAndGrouped) return e.x;
-      const n = N;
-      if (n <= 1) return e.x;
-      const d = 1 - (a.groupPadding ?? 0), y = d / n, m = -d / 2, i = y * e.itemIndex + y / 2, k = 1 - (a.barPadding ?? 0), R = (m + i) * k;
-      return e.x + R;
+    ), z = (n) => {
+      if (t.stacked || t.stackAndGrouped) return n.x;
+      const l = N;
+      if (l <= 1) return n.x;
+      const u = 1 - (t.groupPadding ?? 0), f = u / l, x = -u / 2, i = f * n.itemIndex + f / 2, b = 1 - (t.barPadding ?? 0), R = (x + i) * b;
+      return n.x + R;
     };
-    return (e, n) => (l(), b("div", {
-      style: v({
+    return (n, l) => (d(), v("div", {
+      style: h({
         display: "flex",
         flexDirection: O.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: n[0] || (n[0] = (r) => w("click", r, g.value))
+      onClick: l[0] || (l[0] = (o) => w("click", o, y.value))
     }, [
-      h(o(Q), {
+      p(a(Q), {
         padding: e.padding,
         height: e.height,
         duration: e.duration
       }, {
-        default: $(() => {
-          var r, d, y, m;
+        default: j(() => {
+          var o, u, f, x;
           return [
-            e.valueLabel ? (l(), s(o(Z), {
+            e.valueLabel ? (d(), s(a(Z), {
               key: 0,
-              data: o(M),
+              data: a(M),
               x: z,
               y: (i) => {
-                var t;
-                return i.y + (((t = a.valueLabel) == null ? void 0 : t.labelSpacing) ?? 0);
+                var r;
+                return i.y + (((r = t.valueLabel) == null ? void 0 : r.labelSpacing) ?? 0) * (i.y < 0 ? -1 : 1);
               },
-              label: (r = a.valueLabel) == null ? void 0 : r.label,
-              backgroundColor: ((d = a.valueLabel) == null ? void 0 : d.backgroundColor) ?? "transparent",
-              color: ((y = a.valueLabel) == null ? void 0 : y.color) ?? "red",
-              labelFontSize: (m = a.valueLabel) == null ? void 0 : m.labelFontSize
-            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : u("", !0),
-            e.hideTooltip ? u("", !0) : (l(), s(o(_), {
+              label: (o = t.valueLabel) == null ? void 0 : o.label,
+              backgroundColor: ((u = t.valueLabel) == null ? void 0 : u.backgroundColor) ?? "transparent",
+              color: ((f = t.valueLabel) == null ? void 0 : f.color) ?? "red",
+              labelFontSize: (x = t.valueLabel) == null ? void 0 : x.labelFontSize
+            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : c("", !0),
+            e.hideTooltip ? c("", !0) : (d(), s(a(_), {
               key: 1,
-              followCursor: a.tooltip.followCursor,
-              "show-delay": a.tooltip.showDelay,
-              "hide-delay": a.tooltip.hideDelay,
+              followCursor: t.tooltip.followCursor,
+              "show-delay": t.tooltip.showDelay,
+              "hide-delay": t.tooltip.hideDelay,
               triggers: {
-                [o(J).selectors.bar]: (i) => {
-                  var t;
-                  return B(i), i ? (t = L.value) == null ? void 0 : t.innerHTML : "";
+                [a(J).selectors.bar]: (i) => {
+                  var r;
+                  return C(i), i ? (r = L.value) == null ? void 0 : r.innerHTML : "";
                 },
-                [o(U).selectors.bar]: (i) => {
-                  var t;
-                  return B(i), i ? (t = L.value) == null ? void 0 : t.innerHTML : "";
+                [a(U).selectors.bar]: (i) => {
+                  var r;
+                  return C(i), i ? (r = L.value) == null ? void 0 : r.innerHTML : "";
                 }
               }
             }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
-            e.stackAndGrouped ? (l(!0), b(q, { key: 2 }, I(c.value.states, (i) => (l(), s(o(F), {
+            e.stackAndGrouped ? (d(!0), v($, { key: 2 }, q(m.value.states, (i) => (d(), s(a(G), {
               key: i,
-              data: c.value.chartData,
-              x: (t, k) => k + c.value.positions[i],
-              y: c.value.bars[i],
-              color: c.value.colorFunctions[i],
+              data: m.value.chartData,
+              x: (r, b) => b + m.value.positions[i],
+              y: m.value.bars[i],
+              color: m.value.colorFunctions[i],
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding,
-              orientation: e.orientation ?? o(p).Vertical
-            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (l(), s(o(F), {
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (d(), s(a(G), {
               key: 4,
               data: e.data,
-              x: (i, t) => t,
+              x: (i, r) => r,
               y: A.value,
-              color: x,
+              color: B,
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? o(p).Vertical
-            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), s(o(ee), {
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), s(a(ee), {
               key: 3,
               data: e.data,
-              x: (i, t) => t,
+              x: (i, r) => r,
               y: A.value,
-              color: x,
+              color: B,
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? o(p).Vertical
+              orientation: e.orientation ?? a(g).Vertical
             }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-            e.hideXAxis ? u("", !0) : (l(), s(o(G), T({
+            e.hideXAxis ? c("", !0) : (d(), s(a(V), P({
               key: 5,
               type: "x",
               "tick-format": e.xFormatter,
@@ -183,11 +183,11 @@ const re = {
               minMaxTicksOnly: e.minMaxTicksOnly,
               duration: e.duration
             }, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly", "duration"])),
-            e.hideYAxis ? u("", !0) : (l(), s(o(G), T({
+            e.hideYAxis ? c("", !0) : (d(), s(a(V), P({
               key: 6,
               type: "y",
               label: e.yLabel,
-              "grid-line": e.orientation !== o(p).Horizontal && e.yGridLine,
+              "grid-line": e.orientation !== a(g).Horizontal && e.yGridLine,
               "domain-line": !!e.yDomainLine,
               "tick-format": e.yFormatter,
               "num-ticks": e.yNumTicks,
@@ -198,40 +198,40 @@ const re = {
         }),
         _: 1
       }, 8, ["padding", "height", "duration"]),
-      a.hideLegend ? u("", !0) : (l(), b("div", {
+      t.hideLegend ? c("", !0) : (d(), v("div", {
         key: 0,
-        style: v({
+        style: h({
           display: "flex",
           justifyContent: E.value
         })
       }, [
-        h(o(ae), {
-          style: v([
-            a.legendStyle,
+        p(a(te), {
+          style: h([
+            t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(a.categories).map((r) => ({
-            ...r,
-            color: Array.isArray(r.color) ? r.color[0] : r.color
+          items: Object.values(t.categories).map((o) => ({
+            ...o,
+            color: Array.isArray(o.color) ? o.color[0] : o.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      j("div", re, [
-        o(D).tooltip ? P(e.$slots, "tooltip", {
+      I("div", ne, [
+        a(D).tooltip ? F(n.$slots, "tooltip", {
           key: 0,
-          values: g.value
-        }) : g.value ? P(e.$slots, "fallback", { key: 1 }, () => [
-          h(oe, {
-            data: g.value,
-            categories: a.categories,
-            "title-formatter": a.tooltipTitleFormatter,
-            yFormatter: a.orientation === o(p).Horizontal ? a.xFormatter : a.yFormatter
+          values: y.value
+        }) : y.value ? F(n.$slots, "fallback", { key: 1 }, () => [
+          p(ae, {
+            data: y.value,
+            categories: t.categories,
+            "title-formatter": t.tooltipTitleFormatter,
+            yFormatter: t.orientation === a(g).Horizontal ? t.xFormatter : t.yFormatter
           }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-        ]) : u("", !0)
+        ]) : c("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  pe as default
+  ce as default
 };

package/dist/components/BubbleChart/BubbleChart.d.ts

@@ -153,7 +153,7 @@ export interface BubbleChartProps<T> {
     /**
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: CrosshairConfig;
+    crosshairConfig?: CrosshairConfig<T>;
     /**
      * Axis configuration object for customizing the appearance of the axes.
      */