vue-chrts 0.1.11-beta.1 → 0.1.12-custom-tooltips.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,30 +1,28 @@
-import { defineComponent as O, computed as g, createApp as $, createElementBlock as c, openBlock as o, normalizeClass as T, createVNode as p, createCommentVNode as s, unref as i, withCtx as E, createBlock as d, Fragment as h, renderList as G, mergeProps as N } from "vue";
-import { Position as v, CurveType as L } from "@unovis/ts";
-import { VisXYContainer as P, VisTooltip as j, VisArea as I, VisLine as M, VisAxis as b, VisCrosshair as S, VisBulletLegend as U } from "@unovis/vue";
-import X from "../Tooltip.js";
-import { LegendPosition as Y } from "../../types.js";
-import { getFirstPropertyValue as w } from "../../utils.js";
-const m = 24, B = 4, z = 0.5, C = "#3b82f6", Z = /* @__PURE__ */ O({
+import { defineComponent as E, useSlots as x, useTemplateRef as P, ref as U, computed as k, createElementBlock as d, openBlock as a, normalizeClass as h, createVNode as c, createCommentVNode as r, createElementVNode as j, unref as i, withCtx as M, createBlock as u, Fragment as L, renderList as R, mergeProps as W, renderSlot as b } from "vue";
+import { Position as C, CurveType as B } from "@unovis/ts";
+import { getFirstPropertyValue as X } from "../../utils.js";
+import Y from "../Tooltip.js";
+import { VisXYContainer as w, VisTooltip as z, VisArea as I, VisLine as S, VisAxis as V, VisCrosshair as H, VisBulletLegend as K } from "@unovis/vue";
+import { LegendPosition as q } from "../../types.js";
+const J = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, m = 24, A = 4, Q = 0.5, F = "#3b82f6", ae = /* @__PURE__ */ E({
   __name: "AreaChart",
   props: {
     data: {},
     height: {},
     xLabel: {},
     yLabel: {},
-    padding: { default: () => ({
-      top: 5,
-      right: 5,
-      bottom: 5,
-      left: 5
-    }) },
+    padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
     categories: {},
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (n) => n.data.length > m ? m / B : n.data.length - 1 },
+    xNumTicks: { default: (n) => n.data.length > m ? m / A : n.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (n) => n.data.length > m ? m / B : n.data.length - 1 },
+    yNumTicks: { default: (n) => n.data.length > m ? m / A : n.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -38,125 +36,123 @@ const m = 24, B = 4, z = 0.5, C = "#3b82f6", Z = /* @__PURE__ */ O({
     hideYAxis: { type: Boolean }
   },
   setup(n) {
-    const a = n, u = Object.values(a.categories).map((e) => e.color), A = g(() => (e) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      try {
-        const t = $(X, {
-          data: e,
-          categories: a.categories,
-          toolTipTitle: w(e),
-          yFormatter: a.yFormatter
-        }), r = document.createElement("div");
-        t.mount(r);
-        const l = r.innerHTML;
-        return t.unmount(), l;
-      } catch {
-        return "";
-      }
+    const l = n, $ = x(), v = P("slotWrapper"), s = U(), y = k(
+      () => Object.values(l.categories).map((e) => e.color)
+    ), T = k(() => l.legendPosition === q.Top), D = k(() => {
+      const e = (t, o) => `
+    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+      <stop offset="0%" stop-color="${o}" stop-opacity="1" />
+      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
+    </linearGradient>
+  `, p = (t, o) => `
+    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+      <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
+      <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
+    </linearGradient>
+  `;
+      return y.value.map(
+        (t, o) => t != null && t.includes("#") ? e(o, t) : p(o, t ?? F)
+      ).join("");
     });
-    function F(e) {
-      var t;
+    function G(e) {
+      var p;
       return {
-        y: (r) => Number(r[e]),
-        color: ((t = a.categories[e]) == null ? void 0 : t.color) ?? C
+        y: (t) => Number(t[e]),
+        color: ((p = l.categories[e]) == null ? void 0 : p.color) ?? F
       };
     }
-    function V(e, t) {
-      return `
-  <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
-  <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
-    <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
-  </linearGradient>
-`;
+    function O(e) {
+      return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
     }
-    function x(e, t) {
-      return `
-  <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
-    <stop offset="0%" stop-color="${t}" stop-opacity="1" />
-    <stop offset="100%" stop-color="${t}" stop-opacity="0" />
-  </linearGradient>
-`;
+    function N(e) {
+      return s.value = e, O();
     }
-    const D = g(
-      () => u.map(
-        (e, t) => e != null && e.includes("#") ? x(t, e) : V(t, e ?? C)
-      ).join("")
-    ), k = g(
-      () => a.legendPosition === Y.Top
-    );
-    return (e, t) => (o(), c("div", {
-      class: T(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
+    return (e, p) => (a(), d("div", {
+      class: h(["flex flex-col space-y-4", { "flex-col-reverse": T.value }])
     }, [
-      p(i(P), {
+      c(i(w), {
         data: e.data,
         height: e.height,
         padding: e.padding,
         "svg-defs": D.value
       }, {
-        default: E(() => [
-          e.hideTooltip ? s("", !0) : (o(), d(i(j), {
+        default: M(() => [
+          e.hideTooltip ? r("", !0) : (a(), u(i(z), {
             key: 0,
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
+            "horizontal-placement": i(C).Right,
+            "vertical-placement": i(C).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (o(!0), c(h, null, G(Object.keys(a.categories), (r, l) => (o(), c(h, { key: l }, [
-            p(i(I), N({
-              x: (y, f) => f
-            }, { ref_for: !0 }, F(r), {
-              color: `url(#gradient${l}-${i(u)[l]})`,
-              opacity: z,
-              "curve-type": e.curveType ?? i(L).MonotoneX
+          (a(!0), d(L, null, R(Object.keys(l.categories), (t, o) => (a(), d(L, { key: t }, [
+            c(i(I), W({
+              x: (f, g) => g,
+              ref_for: !0
+            }, G(t), {
+              color: `url(#gradient${o}-${y.value[o]})`,
+              opacity: Q,
+              "curve-type": e.curveType ?? i(B).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            p(i(M), {
-              x: (y, f) => f,
-              y: (y) => y[r],
-              color: i(u)[l],
-              "curve-type": e.curveType ?? i(L).MonotoneX
+            c(i(S), {
+              x: (f, g) => g,
+              y: (f) => f[t],
+              color: y.value[o],
+              "curve-type": e.curveType ?? i(B).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          e.hideXAxis ? s("", !0) : (o(), d(i(b), {
+          e.hideXAxis ? r("", !0) : (a(), u(i(V), {
             key: 1,
             type: "x",
-            "tick-format": e.xFormatter,
             label: e.xLabel,
             "label-margin": 8,
-            "domain-line": e.xDomainLine,
-            "grid-line": e.xGridLine,
             "num-ticks": e.xNumTicks,
-            "tick-line": e.xTickLine,
+            "tick-format": e.xFormatter,
             "tick-values": e.xExplicitTicks,
+            "grid-line": e.xGridLine,
+            "domain-line": e.xDomainLine,
+            "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "num-ticks", "tick-line", "tick-values", "min-max-ticks-only"])),
-          e.hideYAxis ? s("", !0) : (o(), d(i(b), {
+          }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
+          e.hideYAxis ? r("", !0) : (a(), u(i(V), {
             key: 2,
             type: "y",
+            label: e.yLabel,
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
-            label: e.yLabel,
             "grid-line": e.yGridLine,
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
-          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? s("", !0) : (o(), d(i(S), {
+          }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
+          e.hideTooltip ? r("", !0) : (a(), u(i(H), {
             key: 3,
             color: "#666",
-            template: A.value
-          }, null, 8, ["template"]))
+            template: N
+          }))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? s("", !0) : (o(), c("div", {
+      e.hideLegend ? r("", !0) : (a(), d("div", {
         key: 0,
-        class: T(["flex items-center justify-end", { "pb-4": k.value }])
+        class: h(["flex items-center justify-end", { "pb-4": T.value }])
       }, [
-        p(i(U), {
+        c(i(K), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
-      ], 2))
+      ], 2)),
+      j("div", J, [
+        i($).tooltip ? b(e.$slots, "tooltip", {
+          key: 0,
+          values: s.value
+        }) : s.value ? b(e.$slots, "fallback", { key: 1 }, () => [
+          c(Y, {
+            data: s.value,
+            categories: e.categories,
+            toolTipTitle: i(X)(s.value) ?? "",
+            yFormatter: l.yFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : r("", !0)
+      ], 512)
     ], 2));
   }
 });
 export {
-  Z as default
+  ae as default
 };

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

@@ -3,7 +3,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & AreaChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {};
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
     emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -1,4 +1,4 @@
-import { LegendPosition } from '../../types';
+import { axisFormatter, LegendPosition } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -35,19 +35,19 @@ export interface AreaChartProps<T> {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-   * @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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
-    /**
-   * @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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+     * @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<T>;
+    /**
+     * @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<T>;
     /**
      * The type of curve to use for the area chart lines.
      * See `CurveType` for available options.

package/dist/components/BarChart/BarChart.js

@@ -1,9 +1,13 @@
-import { defineComponent as x, computed as c, createApp as A, createElementBlock as b, openBlock as t, normalizeClass as L, createVNode as p, createCommentVNode as m, unref as i, withCtx as V, createBlock as l } from "vue";
-import { Orientation as s, StackedBar as P, GroupedBar as O } from "@unovis/ts";
-import { VisXYContainer as C, VisTooltip as F, VisGroupedBar as G, VisStackedBar as N, VisAxis as T, VisBulletLegend as j } from "@unovis/vue";
-import w from "../Tooltip.js";
-import { LegendPosition as E } from "../../types.js";
-const H = /* @__PURE__ */ x({
+import { defineComponent as A, useSlots as P, useTemplateRef as x, ref as F, computed as f, createElementBlock as h, openBlock as o, normalizeClass as T, createVNode as d, createCommentVNode as s, createElementVNode as C, unref as i, withCtx as N, createBlock as u, renderSlot as b } from "vue";
+import { Orientation as r, StackedBar as O, GroupedBar as G } from "@unovis/ts";
+import { getFirstPropertyValue as w } from "../../utils.js";
+import { VisXYContainer as E, VisTooltip as M, VisGroupedBar as D, VisStackedBar as S, VisAxis as L, VisBulletLegend as j } from "@unovis/vue";
+import z from "../Tooltip.js";
+import { LegendPosition as H } from "../../types.js";
+const W = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, I = /* @__PURE__ */ A({
   __name: "BarChart",
   props: {
     data: {},
@@ -20,16 +24,16 @@ const H = /* @__PURE__ */ x({
     categories: {},
     xFormatter: {},
     yFormatter: {},
-    yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    yNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
     minMaxTicksOnly: { type: Boolean },
-    xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    xNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
     xExplicitTicks: {},
     yAxis: {},
     groupPadding: {},
     barPadding: {},
     radius: {},
     hideLegend: { type: Boolean },
-    orientation: { default: s.Vertical },
+    orientation: { default: r.Vertical },
     legendPosition: {},
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -40,66 +44,55 @@ const H = /* @__PURE__ */ x({
     hideXAxis: { type: Boolean },
     hideYAxis: { type: Boolean }
   },
-  setup(a) {
-    const n = a;
-    if (!n.yAxis || n.yAxis.length === 0)
+  setup(n) {
+    const a = n, v = P(), m = x("slotWrapper"), t = F();
+    if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const y = c(() => n.yAxis.map((e) => (o) => o[e])), g = (e, o) => Object.values(n.categories)[o].color, k = c(
-      () => n.legendPosition === E.Top
-    ), f = c(() => (e, o) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      const u = Object.keys(n.categories), B = Object.keys(e).find((r) => !u.includes(r));
-      try {
-        const r = A(w, {
-          data: e,
-          categories: n.categories,
-          toolTipTitle: e[B],
-          yFormatter: n.yFormatter
-        }), h = document.createElement("div");
-        r.mount(h);
-        const v = h.innerHTML;
-        return r.unmount(), v;
-      } catch {
-        return "";
-      }
-    });
-    return (e, o) => (t(), b("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
+    const g = f(() => a.yAxis.map((e) => (l) => l[e])), y = (e, l) => Object.values(a.categories)[l].color, c = f(
+      () => a.legendPosition === H.Top
+    );
+    function k(e) {
+      return t.value = e, B();
+    }
+    function B(e) {
+      return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
+    }
+    return (e, l) => (o(), h("div", {
+      class: T(["flex flex-col space-y-4", { "flex-col-reverse": c.value }])
     }, [
-      p(i(C), {
+      d(i(E), {
         padding: e.padding,
         height: e.height
       }, {
-        default: V(() => [
-          p(i(F), {
+        default: N(() => [
+          d(i(M), {
             triggers: {
-              [i(O).selectors.bar]: f.value,
-              [i(P).selectors.bar]: f.value
+              [i(G).selectors.bar]: k,
+              [i(O).selectors.bar]: k
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (t(), l(i(N), {
+          e.stacked ? (o(), u(i(S), {
             key: 1,
             data: e.data,
-            x: (u, d) => d,
-            y: y.value,
-            color: g,
+            x: (V, p) => p,
+            y: g.value,
+            color: y,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(s).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (t(), l(i(G), {
+            orientation: e.orientation ?? i(r).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (o(), u(i(D), {
             key: 0,
             data: e.data,
-            x: (u, d) => d,
-            y: y.value,
-            color: g,
+            x: (V, p) => p,
+            y: g.value,
+            color: y,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(s).Vertical
+            orientation: e.orientation ?? i(r).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          e.hideXAxis ? m("", !0) : (t(), l(i(T), {
+          e.hideXAxis ? s("", !0) : (o(), u(i(L), {
             key: 2,
             type: "x",
             "tick-format": e.xFormatter,
@@ -111,11 +104,11 @@ const H = /* @__PURE__ */ x({
             "tick-values": e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? m("", !0) : (t(), l(i(T), {
+          e.hideYAxis ? s("", !0) : (o(), u(i(L), {
             key: 3,
             type: "y",
             label: e.yLabel,
-            "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
+            "grid-line": e.orientation !== i(r).Horizontal && e.yGridLine,
             "domain-line": !!e.yDomainLine,
             "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
@@ -124,17 +117,30 @@ const H = /* @__PURE__ */ x({
         ]),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? m("", !0) : (t(), b("div", {
+      e.hideLegend ? s("", !0) : (o(), h("div", {
         key: 0,
-        class: L(["flex items center justify-end", { "pb-4": k.value }])
+        class: T(["flex items center justify-end", { "pb-4": c.value }])
       }, [
-        p(i(j), {
+        d(i(j), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
-      ], 2))
+      ], 2)),
+      C("div", W, [
+        i(v).tooltip ? b(e.$slots, "tooltip", {
+          key: 0,
+          values: t.value
+        }) : t.value ? b(e.$slots, "fallback", { key: 1 }, () => [
+          d(z, {
+            data: t.value,
+            categories: e.categories,
+            toolTipTitle: i(w)(t.value) ?? "",
+            yFormatter: a.orientation === i(r).Horizontal ? a.xFormatter : a.yFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : s("", !0)
+      ], 512)
     ], 2));
   }
 });
 export {
-  H as default
+  I as default
 };

package/dist/components/BarChart/BarChart.vue.d.ts

@@ -3,7 +3,12 @@ declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof _
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & BarChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {};
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
     emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, Orientation, LegendPosition } from '../../types';
+import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
 export interface BarChartProps<T> {
     /**
      * The data to be displayed in the bar chart.
@@ -43,14 +43,14 @@ export interface BarChartProps<T> {
    * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
    * @returns {string} The formatted string representation of the tick.
    */
-    xFormatter?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+    xFormatter?: axisFormatter<T>;
     /**
    * @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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+    yFormatter?: axisFormatter<T>;
     /**
      * The desired number of ticks on the y-axis.
      */

package/dist/components/DonutChart/DonutChart.js

@@ -1,11 +1,14 @@
-import { defineComponent as u, createElementBlock as n, openBlock as i, Fragment as m, createElementVNode as f, createCommentVNode as p, createVNode as t, renderSlot as g, unref as o, withCtx as h } from "vue";
-import { Donut as v } from "@unovis/ts";
-import { VisSingleContainer as y, VisTooltip as V, VisDonut as b, VisBulletLegend as C } from "@unovis/vue";
-import { DonutType as _ } from "./types.js";
-const k = { class: "flex items-center justify-center" }, B = {
+import { defineComponent as y, useSlots as V, useTemplateRef as k, ref as C, createElementBlock as i, openBlock as u, Fragment as _, createElementVNode as l, createCommentVNode as d, createVNode as r, renderSlot as s, unref as t, withCtx as b, normalizeStyle as D, toDisplayString as S } from "vue";
+import { Donut as T } from "@unovis/ts";
+import { DonutType as w } from "./types.js";
+import { VisSingleContainer as B, VisTooltip as L, VisDonut as $, VisBulletLegend as H } from "@unovis/vue";
+const N = { class: "flex items-center justify-center" }, W = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, j = { class: "flex items-center" }, z = {
   key: 0,
   class: "flex items-center justify-center mt-4"
-}, w = /* @__PURE__ */ u({
+}, q = /* @__PURE__ */ y({
   __name: "DonutChart",
   props: {
     type: {},
@@ -15,44 +18,60 @@ const k = { class: "flex items-center justify-center" }, B = {
     hideLegend: { type: Boolean },
     labels: {}
   },
-  setup(l) {
-    const r = l, s = (e) => e, a = r.type === _.Half, d = {
-      [v.selectors.segment]: (e) => `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${r.labels[e.index].color} ;'></div>
-        <div>${e.data}</div>
-      </vistooltip>
-    </vissinglecontainer>
-  </div>`
-    };
-    return (e, D) => (i(), n(m, null, [
-      f("div", k, [
-        t(o(y), {
+  setup(c) {
+    const n = c, f = V(), a = k("slotWrapper"), o = C(), p = (e) => e, m = n.type === w.Half;
+    function h(e) {
+      return o.value = e, g();
+    }
+    function g(e) {
+      return typeof window > "u" ? "" : a.value ? a.value.innerHTML : "";
+    }
+    return (e, E) => (u(), i(_, null, [
+      l("div", N, [
+        r(t(B), {
           data: e.data,
           height: e.height,
           margin: {}
         }, {
-          default: h(() => [
-            t(o(V), {
+          default: b(() => [
+            r(t(L), {
               "horizontal-shift": 20,
               "vertical-shift": 20,
-              triggers: d
-            }),
-            t(o(b), {
-              value: s,
+              triggers: {
+                [t(T).selectors.segment]: h
+              }
+            }, null, 8, ["triggers"]),
+            r(t($), {
+              value: p,
               "corner-radius": e.radius,
-              color: r.labels.map((c) => c.color),
-              "angle-range": a ? [-1.5707963267948966, 1.5707963267948966] : []
+              color: n.labels.map((v) => v.color),
+              "angle-range": m ? [-1.5707963267948966, 1.5707963267948966] : []
             }, null, 8, ["corner-radius", "color", "angle-range"])
           ]),
           _: 1
         }, 8, ["data", "height"]),
-        g(e.$slots, "default")
+        s(e.$slots, "default"),
+        l("div", W, [
+          t(f).tooltip ? s(e.$slots, "tooltip", {
+            key: 0,
+            values: o.value
+          }) : o.value ? s(e.$slots, "fallback", { key: 1 }, () => [
+            l("div", j, [
+              l("div", {
+                class: "w-2 h-2 rounded-full mr-2",
+                style: D(`background-color: ${n.labels[o.value.index].color} ;`)
+              }, null, 4),
+              l("div", null, S(o.value.data), 1)
+            ])
+          ]) : d("", !0)
+        ], 512)
       ]),
-      e.hideLegend ? p("", !0) : (i(), n("div", B, [
-        t(o(C), { items: e.labels }, null, 8, ["items"])
+      e.hideLegend ? d("", !0) : (u(), i("div", z, [
+        r(t(H), { items: e.labels }, null, 8, ["items"])
       ]))
     ], 64));
   }
 });
 export {
-  w as default
+  q as default
 };

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

@@ -1,18 +1,20 @@
 import { DonutChartProps } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
+declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & DonutChartProps & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
     slots: {
         default?(_: {}): any;
+        tooltip?(_: {
+            values: any;
+        }): any;
+        fallback?(_: {}): any;
     };
-    refs: {};
-    rootEl: any;
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<DonutChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DonutChartProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/LineChart/LineChart.js

@@ -1,10 +1,13 @@
-import { defineComponent as b, computed as y, createApp as B, createElementBlock as d, openBlock as n, normalizeClass as g, createVNode as p, createCommentVNode as s, unref as i, withCtx as x, createBlock as m, Fragment as C, renderList as V } from "vue";
-import { Position as k, CurveType as F } from "@unovis/ts";
-import { VisXYContainer as O, VisTooltip as A, VisLine as M, VisAxis as f, VisCrosshair as N, VisBulletLegend as P } from "@unovis/vue";
-import j from "../Tooltip.js";
-import { LegendPosition as D } from "../../types.js";
-import { getFirstPropertyValue as E } from "../../utils.js";
-const H = /* @__PURE__ */ b({
+import { defineComponent as x, useSlots as F, useTemplateRef as O, ref as N, computed as M, createElementBlock as d, openBlock as o, normalizeClass as k, createVNode as r, createCommentVNode as a, createElementVNode as P, unref as i, withCtx as j, createBlock as s, Fragment as A, renderList as D, renderSlot as f } from "vue";
+import { Position as g, CurveType as E } from "@unovis/ts";
+import { getFirstPropertyValue as G } from "../../utils.js";
+import X from "../Tooltip.js";
+import { VisXYContainer as $, VisTooltip as w, VisLine as z, VisAxis as h, VisCrosshair as R, VisBulletLegend as W } from "@unovis/vue";
+import { LegendPosition as Y } from "../../types.js";
+const S = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, Z = /* @__PURE__ */ x({
   __name: "LineChart",
   props: {
     data: {},
@@ -38,46 +41,39 @@ const H = /* @__PURE__ */ b({
     hideYAxis: { type: Boolean }
   },
   setup(t) {
-    const o = t, h = Object.values(o.categories).map((e, c) => `var(--vis-color${c})`), T = (e) => Object.values(o.categories)[e].color ?? h[e], L = y(() => (e, c) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      try {
-        const a = B(j, {
-          data: e,
-          categories: o.categories,
-          toolTipTitle: E(e),
-          yFormatter: o.yFormatter
-        }), l = document.createElement("div");
-        a.mount(l);
-        const r = l.innerHTML;
-        return a.unmount(), r;
-      } catch {
-        return "";
-      }
-    }), u = y(
-      () => o.legendPosition === D.Top
+    const n = t, T = F(), u = O("slotWrapper"), l = N(), v = Object.values(n.categories).map(
+      (e, c) => `var(--vis-color${c})`
+    ), L = (e) => Object.values(n.categories)[e].color ?? v[e];
+    function b(e) {
+      return l.value = e, B();
+    }
+    function B(e) {
+      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
+    }
+    const m = M(
+      () => n.legendPosition === Y.Top
     );
-    return (e, c) => (n(), d("div", {
-      class: g(["flex flex-col space-y-4", { "flex-col-reverse": u.value }])
+    return (e, c) => (o(), d("div", {
+      class: k(["flex flex-col space-y-4", { "flex-col-reverse": m.value }])
     }, [
-      p(i(O), {
+      r(i($), {
         data: e.data,
         padding: e.padding,
         height: e.height
       }, {
-        default: x(() => [
-          p(i(A), {
-            "horizontal-placement": i(k).Right,
-            "vertical-placement": i(k).Top
+        default: j(() => [
+          r(i(w), {
+            "horizontal-placement": i(g).Right,
+            "vertical-placement": i(g).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), d(C, null, V(Object.keys(o.categories), (a, l) => (n(), m(i(M), {
-            key: l,
-            x: (r, v) => v,
-            y: (r) => r[a],
-            color: T(l),
-            "curve-type": e.curveType ?? i(F).MonotoneX
+          (o(!0), d(A, null, D(Object.keys(n.categories), (C, p) => (o(), s(i(z), {
+            key: p,
+            x: (y, V) => V,
+            y: (y) => y[C],
+            color: L(p),
+            "curve-type": e.curveType ?? i(E).MonotoneX
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          e.hideXAxis ? s("", !0) : (n(), m(i(f), {
+          e.hideXAxis ? a("", !0) : (o(), s(i(h), {
             key: 0,
             type: "x",
             "tick-format": e.xFormatter,
@@ -90,7 +86,7 @@ const H = /* @__PURE__ */ b({
             "tick-values": e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? s("", !0) : (n(), m(i(f), {
+          e.hideYAxis ? a("", !0) : (o(), s(i(h), {
             key: 1,
             type: "y",
             "tick-format": e.yFormatter,
@@ -100,25 +96,38 @@ const H = /* @__PURE__ */ b({
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? s("", !0) : (n(), m(i(N), {
+          e.hideTooltip ? a("", !0) : (o(), s(i(R), {
             key: 2,
             color: "#666",
-            template: L.value
-          }, null, 8, ["template"]))
+            template: b
+          }))
         ]),
         _: 1
       }, 8, ["data", "padding", "height"]),
-      e.hideLegend ? s("", !0) : (n(), d("div", {
+      e.hideLegend ? a("", !0) : (o(), d("div", {
         key: 0,
-        class: g(["flex items center justify-end", { "pb-4": u.value }])
+        class: k(["flex items center justify-end", { "pb-4": m.value }])
       }, [
-        p(i(P), {
+        r(i(W), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
-      ], 2))
+      ], 2)),
+      P("div", S, [
+        i(T).tooltip ? f(e.$slots, "tooltip", {
+          key: 0,
+          values: l.value
+        }) : l.value ? f(e.$slots, "fallback", { key: 1 }, () => [
+          r(X, {
+            data: l.value,
+            categories: e.categories,
+            toolTipTitle: i(G)(l.value) ?? "",
+            yFormatter: n.xFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : a("", !0)
+      ], 512)
     ], 2));
   }
 });
 export {
-  H as default
+  Z as default
 };

package/dist/components/LineChart/LineChart.vue.d.ts

@@ -3,7 +3,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {};
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
     emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, CurveType, LegendPosition } from '../../types';
+import { axisFormatter, BulletLegendItemInterface, CurveType, LegendPosition } from '../../types';
 export interface LineChartProps<T> {
     /**
      * The data to be displayed in the line chart.
@@ -19,9 +19,9 @@ export interface LineChartProps<T> {
      */
     yLabel?: string;
     /**
-   * Optional padding applied to the chart.
-   * Allows specifying individual padding values for the top, right, bottom, and left sides.
-   */
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
     padding?: {
         top: number;
         right: number;
@@ -34,19 +34,19 @@ export interface LineChartProps<T> {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-   * @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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
-    /**
-   * @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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+     * @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<T>;
+    /**
+     * @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<T>;
     /**
      * The type of curve to use for the line chart.
      * See `CurveType` for available options.

package/dist/components/Tooltip.js

@@ -1,41 +1,41 @@
-import { defineComponent as b, computed as v, createElementBlock as r, openBlock as l, createElementVNode as o, toDisplayString as i, Fragment as y, renderList as h, normalizeStyle as n } from "vue";
+import { defineComponent as b, computed as v, createElementBlock as r, openBlock as l, createElementVNode as o, toDisplayString as i, Fragment as h, renderList as y, normalizeStyle as a } from "vue";
 const f = {
   class: "capitalize border-b mb-1 pb-1",
   style: {
     color: "var(--tooltip-value-color)",
     borderColor: "rgba(255, 255, 255, 0.05)"
   }
-}, F = /* @__PURE__ */ b({
+}, T = /* @__PURE__ */ b({
   __name: "Tooltip",
   props: {
     data: {},
     categories: {},
     toolTipTitle: {},
-    yFormatter: { type: Function }
+    yFormatter: {}
   },
   setup(p) {
-    const a = p, d = ["_index", "_stacked", "_ending"], m = v(() => Object.entries(a.data ?? []).filter(
-      ([e, g]) => !d.includes(e) && Object.keys(a.categories).includes(e)
+    const n = p, d = ["_index", "_stacked", "_ending"], m = v(() => Object.entries(n.data ?? []).filter(
+      ([e, g]) => !d.includes(e) && Object.keys(n.categories).includes(e)
     ));
     return (e, g) => (l(), r("div", null, [
       o("div", f, i(e.toolTipTitle), 1),
-      (l(!0), r(y, null, h(m.value, ([t, s], u) => {
+      (l(!0), r(h, null, y(m.value, ([t, s], u) => {
         var c;
         return l(), r("div", {
           key: t,
           style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
         }, [
           o("span", {
-            style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+            style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
               backgroundColor: (c = e.categories[t]) != null && c.color ? e.categories[t].color : `var(--vis-color${u})`
             }])
           }, null, 4),
           o("div", null, [
             o("span", {
-              style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+              style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
             }, i(e.categories[t].name) + ":", 1),
             o("span", {
-              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+              style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
             }, i(e.yFormatter ? e.yFormatter(s) : s), 1)
           ])
         ]);
@@ -44,5 +44,5 @@ const f = {
   }
 });
 export {
-  F as default
+  T as default
 };

package/dist/components/Tooltip.vue.d.ts

@@ -1,10 +1,10 @@
-import { BulletLegendItemInterface } from '../types';
+import { axisFormatter, BulletLegendItemInterface } from '../types';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
         data: T;
         categories: Record<string, BulletLegendItemInterface>;
         toolTipTitle: string | number;
-        yFormatter?: (value: T) => any;
+        yFormatter?: axisFormatter<T>;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/types.d.ts

@@ -40,3 +40,4 @@ declare enum Orientation {
     Vertical = "vertical"
 }
 export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };
+export type axisFormatter<T> = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.11-beta.1",
+  "version": "0.1.12-custom-tooltips.1",
   "type": "module",
   "files": [
     "dist"