vue-chrts 2.1.0-beta-2 → 2.1.0-beta-3

package/dist/components/DonutChart/DonutChart.js

@@ -1,18 +1,18 @@
-import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as p, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
-import { Donut as N } from "@unovis/ts";
-import { DonutType as $ } from "./types.js";
-import j from "../Tooltip.js";
-import { VisSingleContainer as z, VisTooltip as H, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
-import { LegendPosition as O } from "../../types.js";
-const R = { style: {
+import { defineComponent as L, useSlots as S, useTemplateRef as P, ref as W, computed as s, createElementBlock as y, openBlock as d, normalizeStyle as u, createVNode as a, createCommentVNode as c, createElementVNode as h, unref as i, withCtx as b, createBlock as N, renderSlot as f } from "vue";
+import { Donut as $ } from "@unovis/ts";
+import { DonutType as j } from "./types.js";
+import z from "../Tooltip.js";
+import { VisSingleContainer as H, VisTooltip as E, VisDonut as F, VisBulletLegend as O } from "@unovis/vue";
+import { LegendPosition as R } from "../../types.js";
+const M = { style: {
   position: "absolute",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)"
-} }, M = {
+} }, U = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, K = /* @__PURE__ */ B({
+}, X = /* @__PURE__ */ L({
   __name: "DonutChart",
   props: {
     type: {},
@@ -21,98 +21,108 @@ const R = { style: {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
-    legendPosition: { default: O.BottomCenter },
+    legendPosition: { default: R.BottomCenter },
     legendStyle: {},
     categories: {},
     padAngle: {},
-    tooltipTitleFormatter: {}
+    tooltipTitleFormatter: {},
+    hideTooltip: { type: Boolean },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) },
+    duration: { default: 600 }
   },
   emits: ["click"],
-  setup(l, { emit: h }) {
-    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === $.Half;
-    function x(e) {
-      const o = Object.values(t.categories)[e.index].name;
-      return i.value = {
+  setup(l, { emit: v }) {
+    const C = v, e = l, w = S(), g = P("slotWrapper"), n = W(), k = (t) => t, T = e.type === j.Half;
+    function V(t) {
+      const o = Object.values(e.categories)[t.index].name;
+      return n.value = {
         label: o,
-        [o]: e.data
-      }, A();
+        [o]: t.data
+      }, x();
     }
-    function A() {
-      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
+    function x() {
+      return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
     }
-    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, f = s(() => Object.values(t.categories)), w = (e, o) => {
-      const n = f.value[o];
-      if (n)
-        return g(n.color);
+    const B = s(() => e.legendPosition.includes("top")), D = s(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center"), p = (t, o = "#ccc") => t ? Array.isArray(t) ? t[0] || o : t : o, m = s(() => Object.values(e.categories)), A = (t, o) => {
+      const r = m.value[o];
+      if (r)
+        return p(r.color);
     };
-    return (e, o) => (m(), p("div", {
-      style: d({
+    return (t, o) => (d(), y("div", {
+      style: u({
         display: "flex",
-        flexDirection: L.value ? "column-reverse" : "column",
+        flexDirection: B.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: o[0] || (o[0] = (n) => C("click", n, i.value))
+      onClick: o[0] || (o[0] = (r) => C("click", r, n.value))
     }, [
-      a(r(z), {
+      a(i(H), {
         data: l.data,
         height: l.height,
+        duration: l.duration,
         margin: {}
       }, {
         default: b(() => [
-          a(r(H), {
+          l.hideTooltip ? c("", !0) : (d(), N(i(E), {
+            key: 0,
             "horizontal-shift": 20,
             "vertical-shift": 20,
+            followCursor: e.tooltip.followCursor,
+            "show-delay": e.tooltip.showDelay,
+            "hide-delay": e.tooltip.hideDelay,
             triggers: {
-              [r(N).selectors.segment]: x
+              [i($).selectors.segment]: V
             }
-          }, null, 8, ["triggers"]),
-          a(r(E), {
-            value: T,
+          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+          a(i(F), {
+            value: k,
             "corner-radius": l.radius,
             "arc-width": l.arcWidth ?? 20,
-            color: w,
-            "angle-range": V ? [-1.5707963267948966, 1.5707963267948966] : [],
-            "pad-angle": t.padAngle || 0
+            color: A,
+            "angle-range": T ? [-1.5707963267948966, 1.5707963267948966] : [],
+            "pad-angle": e.padAngle || 0
           }, null, 8, ["corner-radius", "arc-width", "angle-range", "pad-angle"]),
-          y("div", R, [
-            u(e.$slots, "default")
+          h("div", M, [
+            f(t.$slots, "default")
           ])
         ]),
         _: 3
-      }, 8, ["data", "height"]),
-      t.hideLegend ? v("", !0) : (m(), p("div", {
+      }, 8, ["data", "height", "duration"]),
+      e.hideLegend ? c("", !0) : (d(), y("div", {
         key: 0,
-        style: d({
+        style: u({
           display: "flex",
-          justifyContent: S.value
+          justifyContent: D.value
         })
       }, [
-        a(r(F), {
-          style: d([
-            t.legendStyle,
+        a(i(O), {
+          style: u([
+            e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: f.value.map((n) => ({
-            ...n,
-            color: g(n.color)
+          items: m.value.map((r) => ({
+            ...r,
+            color: p(r.color)
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      y("div", M, [
-        r(k).tooltip ? u(e.$slots, "tooltip", {
+      h("div", U, [
+        i(w).tooltip ? f(t.$slots, "tooltip", {
           key: 0,
-          values: i.value
-        }) : i.value ? u(e.$slots, "fallback", { key: 1 }, () => [
-          a(j, {
-            data: i.value,
-            categories: t.categories,
-            "title-formatter": t.tooltipTitleFormatter
+          values: n.value
+        }) : n.value ? f(t.$slots, "fallback", { key: 1 }, () => [
+          a(z, {
+            data: n.value,
+            categories: e.categories,
+            "title-formatter": e.tooltipTitleFormatter
           }, null, 8, ["data", "categories", "title-formatter"])
-        ]) : v("", !0)
+        ]) : c("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  K as default
+  X as default
 };

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, LegendPosition } from '../../types';
+import { BulletLegendItemInterface, LegendPosition, TooltipConfig } from '../../types';
 export type DonutChartProps<T> = {
     /**
      * The type of donut chart to render.
@@ -17,7 +17,7 @@ export type DonutChartProps<T> = {
     /**
      * The height of the chart in pixels.
      */
-    height: number;
+    height?: number;
     /**
      * The radius of the donut in pixels.
      */
@@ -48,6 +48,18 @@ export type DonutChartProps<T> = {
      * Use custom formatter for tooltip titles
      */
     tooltipTitleFormatter?: (data: T) => string | number;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Animation duration in milliseconds.
+     */
+    duration?: number;
 };
 declare enum DonutType {
     Half = "half",

package/dist/components/DualChart/DualChart.js

@@ -1,5 +1,5 @@
-import { defineComponent as N, useSlots as W, useTemplateRef as E, ref as G, computed as c, createElementBlock as m, openBlock as o, normalizeStyle as f, createVNode as x, createCommentVNode as u, createElementVNode as z, unref as a, withCtx as H, createBlock as d, Fragment as X, renderList as j, mergeProps as k, renderSlot as p } from "vue";
-import { Orientation as y, CurveType as A, Position as L, StackedBar as q, GroupedBar as $ } from "@unovis/ts";
+import { defineComponent as N, useSlots as W, useTemplateRef as E, ref as G, computed as c, createElementBlock as m, openBlock as r, normalizeStyle as f, createVNode as x, createCommentVNode as s, createElementVNode as z, unref as a, withCtx as H, createBlock as d, Fragment as X, renderList as j, mergeProps as k, renderSlot as A } from "vue";
+import { Orientation as y, CurveType as p, Position as L, StackedBar as q, GroupedBar as $ } from "@unovis/ts";
 import { VisXYContainer as R, VisTooltip as U, VisGroupedBar as I, VisStackedBar as J, VisLine as K, VisAxis as B, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
 import _ from "../Tooltip.js";
 import { LegendPosition as ee } from "../../types.js";
@@ -27,7 +27,7 @@ const te = {
     xFormatter: {},
     yFormatter: {},
     tooltipTitleFormatter: {},
-    curveType: { default: A.MonotoneX },
+    curveType: { default: p.MonotoneX },
     lineWidth: { default: 2 },
     xNumTicks: {},
     xExplicitTicks: {},
@@ -54,74 +54,82 @@ const te = {
     groupPadding: { default: 0 },
     barPadding: { default: 0.2 },
     radius: {},
-    orientation: { default: y.Vertical }
+    orientation: { default: y.Vertical },
+    duration: { default: 600 },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) }
   },
   emits: ["click"],
   setup(e, { emit: Y }) {
-    const P = Y, t = e, V = W(), g = E("slotWrapper"), s = G();
+    const w = Y, t = e, P = W(), g = E("slotWrapper"), u = G();
     if (!t.barYAxis || t.barYAxis.length === 0)
       throw console.error("[DualChart] barYAxis prop is required and must contain at least one field key"), new Error("DualChart: 'barYAxis' is required and must contain at least one field key. Provide an array of property keys from your data type (e.g., ['revenue', 'costs'])");
     if (!t.lineYAxis || t.lineYAxis.length === 0)
       throw console.error("[DualChart] lineYAxis prop is required and must contain at least one field key"), new Error("DualChart: 'lineYAxis' is required and must contain at least one field key. Provide an array of property keys from your data type (e.g., ['profit', 'target'])");
-    const h = c(() => t.barYAxis.map((n) => (l) => l[n])), D = c(() => t.lineYAxis.map((n) => (l) => l[n])), v = (n, l) => {
+    const h = c(() => t.barYAxis.map((n) => (l) => l[n])), V = c(() => t.lineYAxis.map((n) => (l) => l[n])), v = (n, l) => {
       var i;
       return (i = Object.values(t.barCategories)[l]) == null ? void 0 : i.color;
-    }, b = c(() => ({
+    }, C = c(() => ({
       ...t.barCategories,
       ...t.lineCategories
-    })), F = c(() => t.legendPosition.startsWith("top")), w = c(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
-    function C(n) {
-      s.value = n;
+    })), D = c(() => t.legendPosition.startsWith("top")), F = c(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function b(n) {
+      u.value = n;
     }
     function M(n) {
       return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
     }
     function O(n) {
-      return s.value = n, M();
+      return u.value = n, M();
     }
-    return (n, l) => (o(), m("div", {
+    return (n, l) => (r(), m("div", {
       style: f({
         display: "flex",
-        flexDirection: F.value ? "column-reverse" : "column",
+        flexDirection: D.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: l[0] || (l[0] = (i) => P("click", i, s.value))
+      onClick: l[0] || (l[0] = (i) => w("click", i, u.value))
     }, [
       x(a(R), {
         padding: e.padding,
         height: e.height,
+        duration: e.duration,
         data: e.data
       }, {
         default: H(() => [
-          e.hideTooltip ? u("", !0) : (o(), d(a(U), {
+          e.hideTooltip ? s("", !0) : (r(), d(a(U), {
             key: 0,
+            followCursor: t.tooltip.followCursor,
+            "show-delay": t.tooltip.showDelay,
+            "hide-delay": t.tooltip.hideDelay,
             triggers: {
               [a($).selectors.bar]: (i) => {
-                var r;
-                return C(i), i ? (r = g.value) == null ? void 0 : r.innerHTML : "";
+                var o;
+                return b(i), i ? (o = g.value) == null ? void 0 : o.innerHTML : "";
               },
               [a(q).selectors.bar]: (i) => {
-                var r;
-                return C(i), i ? (r = g.value) == null ? void 0 : r.innerHTML : "";
+                var o;
+                return b(i), i ? (o = g.value) == null ? void 0 : o.innerHTML : "";
               }
             },
             "horizontal-placement": a(L).Right,
             "vertical-placement": a(L).Top
-          }, null, 8, ["triggers", "horizontal-placement", "vertical-placement"])),
-          e.stacked ? (o(), d(a(J), {
+          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers", "horizontal-placement", "vertical-placement"])),
+          e.stacked ? (r(), d(a(J), {
             key: 2,
             data: e.data,
-            x: (i, r) => r,
+            x: (i, o) => o,
             y: h.value,
             color: v,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
             orientation: e.orientation ?? a(y).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (o(), d(a(I), {
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (r(), d(a(I), {
             key: 1,
             data: e.data,
-            x: (i, r) => r,
+            x: (i, o) => o,
             y: h.value,
             color: v,
             "rounded-corners": e.radius ?? 0,
@@ -129,19 +137,19 @@ const te = {
             "bar-padding": e.barPadding ?? 0.2,
             orientation: e.orientation ?? a(y).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          (o(!0), m(X, null, j(D.value, (i, r) => {
+          (r(!0), m(X, null, j(V.value, (i, o) => {
             var T;
-            return o(), d(a(K), {
-              key: `line-${r}`,
+            return r(), d(a(K), {
+              key: `line-${o}`,
               data: e.data,
               x: (ie, S) => S,
               y: i,
-              color: (T = Object.values(t.lineCategories)[r]) == null ? void 0 : T.color,
-              "curve-type": e.curveType ?? a(A).MonotoneX,
+              color: (T = Object.values(t.lineCategories)[o]) == null ? void 0 : T.color,
+              "curve-type": e.curveType ?? a(p).MonotoneX,
               "line-width": e.lineWidth
             }, null, 8, ["data", "x", "y", "color", "curve-type", "line-width"]);
           }), 128)),
-          e.hideXAxis ? u("", !0) : (o(), d(a(B), k({
+          e.hideXAxis ? s("", !0) : (r(), d(a(B), k({
             key: 3,
             type: "x",
             "tick-format": e.xFormatter,
@@ -151,9 +159,10 @@ const te = {
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "tick-values": e.xExplicitTicks,
-            minMaxTicksOnly: e.minMaxTicksOnly
-          }, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? u("", !0) : (o(), d(a(B), k({
+            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 ? s("", !0) : (r(), d(a(B), k({
             key: 4,
             type: "y",
             label: e.yLabel,
@@ -161,17 +170,18 @@ const te = {
             "domain-line": !!e.yDomainLine,
             "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
-            "tick-line": e.yTickLine
-          }, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"])),
-          e.hideTooltip ? u("", !0) : (o(), d(a(Q), k({ key: 5 }, e.crosshairConfig, { template: O }), null, 16))
+            "tick-line": e.yTickLine,
+            duration: e.duration
+          }, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line", "duration"])),
+          e.hideTooltip ? s("", !0) : (r(), d(a(Q), k({ key: 5 }, e.crosshairConfig, { template: O }), null, 16))
         ]),
         _: 1
-      }, 8, ["padding", "height", "data"]),
-      t.hideLegend ? u("", !0) : (o(), m("div", {
+      }, 8, ["padding", "height", "duration", "data"]),
+      t.hideLegend ? s("", !0) : (r(), m("div", {
         key: 0,
         style: f({
           display: "flex",
-          justifyContent: w.value
+          justifyContent: F.value
         })
       }, [
         x(a(Z), {
@@ -179,24 +189,24 @@ const te = {
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(b.value).map((i) => ({
+          items: Object.values(C.value).map((i) => ({
             ...i,
             color: Array.isArray(i.color) ? i.color[0] : i.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
       z("div", te, [
-        a(V).tooltip ? p(n.$slots, "tooltip", {
+        a(P).tooltip ? A(n.$slots, "tooltip", {
           key: 0,
-          values: s.value
-        }) : s.value ? p(n.$slots, "fallback", { key: 1 }, () => [
+          values: u.value
+        }) : u.value ? A(n.$slots, "fallback", { key: 1 }, () => [
           x(_, {
-            data: s.value,
-            categories: b.value,
+            data: u.value,
+            categories: C.value,
             "title-formatter": t.tooltipTitleFormatter,
             yFormatter: t.orientation === a(y).Horizontal ? t.xFormatter : t.yFormatter
           }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-        ]) : u("", !0)
+        ]) : s("", !0)
       ], 512)
     ], 4));
   }

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

@@ -1,4 +1,5 @@
-import { axisFormatter, CrosshairConfig, LegendPosition, AxisConfig, BulletLegendItemInterface, Orientation, CurveType } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, AxisConfig, BulletLegendItemInterface, Orientation, TooltipConfig } from '../../types';
+import { CurveType } from '@unovis/ts';
 export interface DualChartProps<T> {
     /**
      * The data to be displayed in the dual chart.
@@ -183,4 +184,12 @@ export interface DualChartProps<T> {
      * See `Orientation` for available options.
      */
     orientation?: Orientation;
+    /**
+     * Animation duration in milliseconds for the chart components.
+     */
+    duration?: number;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
 }

package/dist/components/GanttChart/GanttChart.js

@@ -1,10 +1,10 @@
-import { defineComponent as B, useSlots as V, useTemplateRef as w, ref as A, computed as c, createElementBlock as f, openBlock as p, normalizeStyle as d, createVNode as n, createCommentVNode as h, createElementVNode as F, unref as o, withCtx as H, mergeProps as P, renderSlot as y } from "vue";
+import { defineComponent as W, useSlots as B, useTemplateRef as V, ref as A, computed as d, createElementBlock as p, openBlock as c, normalizeStyle as u, createVNode as n, createCommentVNode as g, createElementVNode as F, unref as i, withCtx as H, createBlock as P, mergeProps as S, renderSlot as y } from "vue";
 import { Timeline as x } from "@unovis/ts";
-import { dateFormatter as S } from "../../utils.js";
+import { dateFormatter as D } from "../../utils.js";
 import N from "../Tooltip.js";
-import { VisXYContainer as j, VisTimeline as O, VisTooltip as $, VisAxis as D, VisBulletLegend as G } from "@unovis/vue";
-import { LegendPosition as M } from "../../types.js";
-const I = /* @__PURE__ */ B({
+import { VisXYContainer as j, VisTimeline as O, VisTooltip as $, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
+import { LegendPosition as E } from "../../types.js";
+const J = /* @__PURE__ */ W({
   __name: "GanttChart",
   props: {
     data: {},
@@ -23,7 +23,7 @@ const I = /* @__PURE__ */ B({
     crosshairConfig: {},
     lineWidth: { default: 12 },
     rowHeight: { default: 24 },
-    legendPosition: { default: M.TopRight },
+    legendPosition: { default: E.TopRight },
     legendStyle: {},
     hideLegend: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -33,81 +33,91 @@ const I = /* @__PURE__ */ B({
     xGridLine: { type: Boolean },
     xDomainLine: { type: Boolean },
     xAxisConfig: {},
-    yAxisConfig: {}
+    yAxisConfig: {},
+    duration: { default: 600 },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) }
   },
   emits: ["click", "scroll", "labelHover"],
-  setup(i, { emit: T }) {
-    const e = i, s = T, k = V(), u = w("slotWrapper"), r = A(), v = c(() => e.legendPosition.startsWith("top")), b = c(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+  setup(l, { emit: k }) {
+    const e = l, s = k, T = B(), m = V("slotWrapper"), r = A(), v = d(() => e.legendPosition.startsWith("top")), b = d(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
     x.selectors.label + "";
-    function g(l) {
-      r.value = l, s("labelHover", l);
+    function f(o) {
+      r.value = o, s("labelHover", o);
     }
-    function L(l, a, t) {
-      s("click", t, { index: a, item: l });
+    function C(o, a, t) {
+      s("click", t, { index: a, item: o });
     }
-    function C(l) {
-      s("scroll", l.deltaY);
+    function L(o) {
+      s("scroll", o.deltaY);
     }
-    const W = c(() => {
-      const l = Object.values(e.categories).map(
+    const w = d(() => {
+      const o = Object.values(e.categories).map(
         (a, t) => `var(--vis-color${t})`
       );
       return Object.values(e.categories).map(
-        (a, t) => a.color ?? l[t]
+        (a, t) => a.color ?? o[t]
       );
     });
-    return (l, a) => (p(), f("div", {
-      style: d({
+    return (o, a) => (c(), p("div", {
+      style: u({
         display: "flex",
         flexDirection: v.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       })
     }, [
-      n(o(j), {
+      n(i(j), {
         data: e.data,
         height: e.height,
-        onWheel: C
+        duration: l.duration,
+        onWheel: L
       }, {
         default: H(() => [
-          n(o(O), {
+          n(i(O), {
             x: e.x,
             length: e.length,
             lineWidth: e.lineWidth,
             rowHeight: e.rowHeight,
             type: e.type,
-            color: W.value,
+            color: w.value,
             labelWidth: e.labelWidth,
             showLabels: e.showLabels,
-            onClick: L
+            onClick: C
           }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
-          n(o($), {
+          l.hideTooltip ? g("", !0) : (c(), P(i($), {
+            key: 0,
+            followCursor: e.tooltip.followCursor,
+            "show-delay": e.tooltip.showDelay,
+            "hide-delay": e.tooltip.hideDelay,
             triggers: {
-              [o(x).selectors.label]: (t) => {
-                var m;
-                return g(t), t ? (m = u.value) == null ? void 0 : m.innerHTML : "";
+              [i(x).selectors.label]: (t) => {
+                var h;
+                return f(t), t ? (h = m.value) == null ? void 0 : h.innerHTML : "";
               }
             }
-          }, null, 8, ["triggers"]),
-          n(o(D), P({
+          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+          n(i(G), S({
             type: "x",
-            tickFormat: i.xTickFormat || o(S),
-            numTicks: i.xNumTicks,
-            "tick-line": i.xTickLine,
-            "grid-line": i.xGridLine,
-            "domain-line": i.xDomainLine
-          }, i.xAxisConfig), null, 16, ["tickFormat", "numTicks", "tick-line", "grid-line", "domain-line"])
+            tickFormat: l.xTickFormat || i(D),
+            numTicks: l.xNumTicks,
+            "tick-line": l.xTickLine,
+            "grid-line": l.xGridLine,
+            "domain-line": l.xDomainLine,
+            duration: l.duration
+          }, l.xAxisConfig), null, 16, ["tickFormat", "numTicks", "tick-line", "grid-line", "domain-line", "duration"])
         ]),
         _: 1
-      }, 8, ["data", "height"]),
-      e.hideLegend ? h("", !0) : (p(), f("div", {
+      }, 8, ["data", "height", "duration"]),
+      e.hideLegend ? g("", !0) : (c(), p("div", {
         key: 0,
-        style: d({
+        style: u({
           display: "flex",
           justifyContent: b.value
         })
       }, [
-        n(o(G), {
-          style: d([
+        n(i(M), {
+          style: u([
             e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
@@ -119,23 +129,23 @@ const I = /* @__PURE__ */ B({
       ], 4)),
       F("div", {
         ref_key: "slotWrapper",
-        ref: u,
+        ref: m,
         style: { display: "none" }
       }, [
-        o(k).labelTooltip ? y(l.$slots, "labelTooltip", {
+        i(T).labelTooltip ? y(o.$slots, "labelTooltip", {
           key: 0,
           values: r.value
-        }) : r.value ? y(l.$slots, "fallback", { key: 1 }, () => [
+        }) : r.value ? y(o.$slots, "fallback", { key: 1 }, () => [
           n(N, {
             data: r.value,
             "title-formatter": e.tooltipTitleFormatter,
-            categories: i.categories
+            categories: l.categories
           }, null, 8, ["data", "title-formatter", "categories"])
-        ]) : h("", !0)
+        ]) : g("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  I as default
+  J as default
 };