vue-chrts 0.1.1-test.2 → 0.1.1-test.4

package/dist/components/AreaChart/AreaChart.js

@@ -1,10 +1,9 @@
-import { defineComponent as G, ref as T, computed as L, createApp as M, onUnmounted as P, createElementBlock as m, openBlock as s, normalizeClass as h, createVNode as c, createCommentVNode as v, unref as o, withCtx as $, createBlock as C, Fragment as b, renderList as U, mergeProps as j } from "vue";
-import { getColorValue as I, getOklchFromCssVariable as w, oklch2web as g, convertCategories as z } from "../../colors.js";
-import { Position as x, CurveType as V } from "@unovis/ts";
-import { VisXYContainer as H, VisTooltip as R, VisArea as X, VisLine as Y, VisAxis as B, VisCrosshair as S, VisBulletLegend as q } from "@unovis/vue";
-import J from "../Tooltip.js";
-import { LegendPosition as Q } from "../../types.js";
-const p = 24, O = 4, W = 0.5, A = "#3b82f6", ne = /* @__PURE__ */ G({
+import { defineComponent as E, ref as T, computed as f, createApp as N, onUnmounted as P, createElementBlock as u, openBlock as l, normalizeClass as L, createVNode as s, createCommentVNode as g, unref as o, withCtx as M, createBlock as h, Fragment as b, renderList as U, mergeProps as j } from "vue";
+import { Position as C, CurveType as x } from "@unovis/ts";
+import { VisXYContainer as I, VisTooltip as S, VisArea as w, VisLine as z, VisAxis as B, VisCrosshair as R, VisBulletLegend as X } from "@unovis/vue";
+import Y from "../Tooltip.js";
+import { LegendPosition as H } from "../../types.js";
+const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
   __name: "AreaChart",
   props: {
     data: {},
@@ -15,10 +14,10 @@ const p = 24, O = 4, W = 0.5, A = "#3b82f6", ne = /* @__PURE__ */ G({
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (i) => i.data.length > p ? p / O : i.data.length - 1 },
+    xNumTicks: { default: (i) => i.data.length > p ? p / V : i.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (i) => i.data.length > p ? p / O : i.data.length - 1 },
+    yNumTicks: { default: (i) => i.data.length > p ? p / V : i.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     xGridLine: { type: Boolean },
@@ -29,89 +28,86 @@ const p = 24, O = 4, W = 0.5, A = "#3b82f6", ne = /* @__PURE__ */ G({
     legendPosition: {}
   },
   setup(i) {
-    const a = i, d = Object.values(a.categories).map(
-      (e) => I(e.color, g)
-    ), D = Object.values(a.categories).map((e) => {
-      var n;
-      if ((n = e.color) != null && n.includes("#")) return e;
-      const t = w(e.color);
-      return t ? {
-        ...e,
-        color: g(
-          t.l,
-          t.c,
-          t.h,
-          t.a
-        )
-      } : { ...e, color: A };
+    const r = i, m = Object.values(r.categories).map((e) => e.color), d = T(null), v = T(null), D = f(() => (e, t) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const n = N(Y, {
+          data: e,
+          categories: r.categories,
+          xValue: r.xFormatter(Math.floor(t))
+        }), a = document.createElement("div");
+        n.mount(a);
+        const c = a.innerHTML;
+        return n.unmount(), c;
+      } catch {
+        return "";
+      }
+    });
+    P(() => {
+      d.value && (d.value.unmount(), d.value = null), v.value && (v.value = null);
     });
     function F(e) {
       var t;
       return {
         y: (n) => Number(n[e]),
-        color: ((t = a.categories[e]) == null ? void 0 : t.color) ?? A
+        color: ((t = r.categories[e]) == null ? void 0 : t.color) ?? A
       };
     }
-    const r = T(null), l = T(null), E = L(() => (e) => {
-      if (typeof window > "u") return "";
-      l.value || (l.value = document.createElement("div"));
-      const t = z(a.categories, g);
-      try {
-        if (!r.value)
-          return r.value = M(J, {
-            data: e,
-            categories: t
-          }), r.value.mount(l.value), l.value.innerHTML;
-        const n = r.value._instance;
-        return n != null && n.proxy, l.value.innerHTML;
-      } catch (n) {
-        return console.error("Error generating tooltip:", n), "";
-      }
-    });
-    P(() => {
-      r.value && (r.value.unmount(), r.value = null), l.value = null;
-    });
-    const N = d.map(
-      (e, t) => `
-  <linearGradient id="gradient${t}-${e}" gradientTransform="rotate(90)">
-    <stop offset="0%" stop-color="${e}" stop-opacity="1" />
-    <stop offset="100%" stop-color="${e}" stop-opacity="0" />
+    function O(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>
-`
-    ).join(""), k = L(
-      () => a.legendPosition === Q.Top
+`;
+    }
+    function G(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>
+`;
+    }
+    const $ = f(
+      () => m.map(
+        (e, t) => e != null && e.includes("#") ? G(t, e) : O(t, e ?? A)
+      ).join("")
+    ), k = f(
+      () => r.legendPosition === H.Top
     );
-    return (e, t) => (s(), m("div", {
-      class: h(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
+    return (e, t) => (l(), u("div", {
+      class: L(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
     }, [
-      c(o(H), {
+      s(o(I), {
         data: e.data,
         height: e.height,
-        "svg-defs": o(N)
+        "svg-defs": $.value
       }, {
-        default: $(() => [
-          e.hideTooltip ? v("", !0) : (s(), C(o(R), {
+        default: M(() => [
+          e.hideTooltip ? g("", !0) : (l(), h(o(S), {
             key: 0,
-            "horizontal-placement": o(x).Right,
-            "vertical-placement": o(x).Top
+            "horizontal-placement": o(C).Right,
+            "vertical-placement": o(C).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (s(!0), m(b, null, U(Object.keys(a.categories), (n, u) => (s(), m(b, { key: u }, [
-            c(o(X), j({
-              x: (f, y) => y,
+          (l(!0), u(b, null, U(Object.keys(r.categories), (n, a) => (l(), u(b, { key: a }, [
+            s(o(w), j({
+              x: (c, y) => y,
               ref_for: !0
             }, F(n), {
-              color: `url(#gradient${u}-${o(d)[u]})`,
-              opacity: W,
-              "curve-type": e.curveType ?? o(V).MonotoneX
+              color: `url(#gradient${a}-${o(m)[a]})`,
+              opacity: q,
+              "curve-type": e.curveType ?? o(x).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            c(o(Y), {
-              x: (f, y) => y,
-              y: (f) => f[n],
-              color: o(d)[u],
-              "curve-type": e.curveType ?? o(V).MonotoneX
+            s(o(z), {
+              x: (c, y) => y,
+              y: (c) => c[n],
+              color: o(m)[a],
+              "curve-type": e.curveType ?? o(x).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          c(o(B), {
+          s(o(B), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -123,7 +119,7 @@ const p = 24, O = 4, W = 0.5, A = "#3b82f6", ne = /* @__PURE__ */ G({
             "tick-values": e.xExplicitTicks,
             "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"]),
-          c(o(B), {
+          s(o(B), {
             type: "y",
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
@@ -132,23 +128,25 @@ const p = 24, O = 4, W = 0.5, A = "#3b82f6", ne = /* @__PURE__ */ G({
             "domain-line": e.yDomainLine,
             "tick-line": !!e.yGridLine
           }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
-          e.hideTooltip ? v("", !0) : (s(), C(o(S), {
+          e.hideTooltip ? g("", !0) : (l(), h(o(R), {
             key: 1,
             color: "#666",
-            template: E.value
+            template: D.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "height", "svg-defs"]),
-      e.hideLegend ? v("", !0) : (s(), m("div", {
+      e.hideLegend ? g("", !0) : (l(), u("div", {
         key: 0,
-        class: h(["flex items-center justify-end", { "pb-4": k.value }])
+        class: L(["flex items-center justify-end", { "pb-4": k.value }])
       }, [
-        c(o(q), { items: o(D) }, null, 8, ["items"])
+        s(o(X), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
       ], 2))
     ], 2));
   }
 });
 export {
-  ne as default
+  _ as default
 };

package/dist/components/AreaStackedChart/AreaStackedChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as d, computed as f, createApp as h, createElementBlock as y, openBlock as a, createVNode as o, createElementVNode as g, unref as t, withCtx as v, createBlock as _, createCommentVNode as V } from "vue";
-import { VisXYContainer as k, VisArea as C, VisAxis as c, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
-import { CurveType as x } from "@unovis/ts";
-import B from "../Tooltip.js";
-const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, O = /* @__PURE__ */ d({
+import { defineComponent as f, computed as h, createApp as y, createElementBlock as g, openBlock as a, createVNode as r, createElementVNode as v, unref as t, withCtx as _, createBlock as V, createCommentVNode as k } from "vue";
+import { VisXYContainer as C, VisArea as T, VisAxis as c, VisCrosshair as b, VisBulletLegend as x } from "@unovis/vue";
+import { CurveType as B } from "@unovis/ts";
+import N from "../Tooltip.js";
+const A = { class: "flex flex-col space-y-4" }, j = { class: "flex items center justify-end" }, H = /* @__PURE__ */ f({
   __name: "AreaStackedChart",
   props: {
     data: {},
@@ -11,44 +11,44 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
     hideTooltip: { type: Boolean }
   },
   setup(s) {
-    const i = s, l = f(() => (e) => {
+    const n = s, l = h(() => (e, p) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const r = h(B, {
+        const o = y(N, {
           data: e,
-          categories: i.categories
-        }), n = document.createElement("div");
-        r.mount(n);
-        const p = n.innerHTML;
-        return r.unmount(), p;
+          categories: n.categories
+        }), i = document.createElement("div");
+        o.mount(i);
+        const d = i.innerHTML;
+        return o.unmount(), d;
       } catch {
         return "";
       }
     }), m = (e) => Number.parseInt(e.time), u = [(e) => e.firstTime, (e) => e.returning];
-    return (e, r) => (a(), y("div", N, [
-      o(t(k), {
+    return (e, p) => (a(), g("div", A, [
+      r(t(C), {
         data: e.data,
         height: e.height
       }, {
-        default: v(() => [
-          o(t(C), {
+        default: _(() => [
+          r(t(T), {
             x: m,
             y: u,
-            color: Object.values(i.categories).map((n) => n.color),
-            "curve-type": t(x).Linear
+            color: Object.values(n.categories).map((o) => o.color),
+            "curve-type": t(B).Linear
           }, null, 8, ["color", "curve-type"]),
-          o(t(c), {
+          r(t(c), {
             type: "x",
             label: "Time",
             "num-ticks": 12
           }),
-          o(t(c), {
+          r(t(c), {
             type: "y",
             label: "Number of visitors",
             "num-ticks": 3
           }),
-          e.hideTooltip ? V("", !0) : (a(), _(t(T), {
+          e.hideTooltip ? k("", !0) : (a(), V(t(b), {
             key: 0,
             color: "#666",
             template: l.value
@@ -56,8 +56,8 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      g("div", A, [
-        o(t(b), {
+      v("div", j, [
+        r(t(x), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ])
@@ -65,5 +65,5 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
   }
 });
 export {
-  O as default
+  H as default
 };

package/dist/components/BarChart/BarChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as h, computed as u, createApp as b, createElementBlock as y, openBlock as d, normalizeClass as k, createVNode as r, createCommentVNode as B, unref as i, withCtx as T, createBlock as f } from "vue";
-import { Orientation as s, StackedBar as v, GroupedBar as x } from "@unovis/ts";
-import { VisXYContainer as V, VisTooltip as P, VisGroupedBar as A, VisStackedBar as C, VisAxis as L, VisBulletLegend as G } from "@unovis/vue";
-import N from "../Tooltip.js";
-import { LegendPosition as w } from "../../types.js";
-const M = /* @__PURE__ */ h({
+import { defineComponent as b, computed as u, createApp as B, createElementBlock as y, openBlock as d, normalizeClass as k, createVNode as l, createCommentVNode as T, unref as i, withCtx as v, createBlock as f } from "vue";
+import { Orientation as s, StackedBar as x, GroupedBar as V } from "@unovis/ts";
+import { VisXYContainer as P, VisTooltip as A, VisGroupedBar as C, VisStackedBar as G, VisAxis as h, VisBulletLegend as N } from "@unovis/vue";
+import w from "../Tooltip.js";
+import { LegendPosition as E } from "../../types.js";
+const z = /* @__PURE__ */ b({
   __name: "BarChart",
   props: {
     data: {},
@@ -14,9 +14,9 @@ const M = /* @__PURE__ */ h({
     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: {},
@@ -32,52 +32,53 @@ const M = /* @__PURE__ */ h({
     xGridLine: { type: Boolean },
     yGridLine: { type: Boolean, default: !0 }
   },
-  setup(a) {
-    const o = a;
-    if (!o.yAxis || o.yAxis.length === 0)
+  setup(n) {
+    const a = n;
+    if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const c = u(() => o.yAxis.map((e) => (n) => n[e])), m = (e, n) => Object.values(o.categories)[n].color, p = u(
-      () => o.legendPosition === w.Top
-    ), g = u(() => (e) => {
+    const c = u(() => a.yAxis.map((e) => (o) => o[e])), m = (e, o) => Object.values(a.categories)[o].color, p = u(
+      () => a.legendPosition === E.Top
+    ), g = u(() => (e, o) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const n = b(N, {
+        const r = B(w, {
           data: e,
-          categories: o.categories
-        }), l = document.createElement("div");
-        n.mount(l);
-        const t = l.innerHTML;
-        return n.unmount(), t;
+          categories: a.categories,
+          xValue: a.xFormatter(Math.floor(o))
+        }), t = document.createElement("div");
+        r.mount(t);
+        const L = t.innerHTML;
+        return r.unmount(), L;
       } catch {
         return "";
       }
     });
-    return (e, n) => (d(), y("div", {
+    return (e, o) => (d(), y("div", {
       class: k(["flex flex-col space-y-4", { "flex-col-reverse": p.value }])
     }, [
-      r(i(V), { height: e.height }, {
-        default: T(() => [
-          r(i(P), {
+      l(i(P), { height: e.height }, {
+        default: v(() => [
+          l(i(A), {
             triggers: {
-              [i(x).selectors.bar]: g.value,
-              [i(v).selectors.bar]: g.value
+              [i(V).selectors.bar]: g.value,
+              [i(x).selectors.bar]: g.value
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (d(), f(i(C), {
+          e.stacked ? (d(), f(i(G), {
             key: 1,
             data: e.data,
-            x: (l, t) => t,
+            x: (r, t) => t,
             y: c.value,
             color: m,
             "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"])) : (d(), f(i(A), {
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), f(i(C), {
             key: 0,
             data: e.data,
-            x: (l, t) => t,
+            x: (r, t) => t,
             y: c.value,
             color: m,
             "rounded-corners": e.radius ?? 0,
@@ -85,7 +86,7 @@ const M = /* @__PURE__ */ h({
             "bar-padding": e.barPadding ?? 0.2,
             orientation: e.orientation ?? i(s).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          r(i(L), {
+          l(i(h), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -96,7 +97,7 @@ const M = /* @__PURE__ */ h({
             "tick-values": e.xExplicitTicks,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"]),
-          r(i(L), {
+          l(i(h), {
             type: "y",
             label: e.yLabel,
             "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
@@ -108,11 +109,11 @@ const M = /* @__PURE__ */ h({
         ]),
         _: 1
       }, 8, ["height"]),
-      e.hideLegend ? B("", !0) : (d(), y("div", {
+      e.hideLegend ? T("", !0) : (d(), y("div", {
         key: 0,
         class: k(["flex items center justify-end", { "pb-4": p.value }])
       }, [
-        r(i(G), {
+        l(i(N), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -120,5 +121,5 @@ const M = /* @__PURE__ */ h({
   }
 });
 export {
-  M as default
+  z as default
 };

package/dist/components/LineChart/LineChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as v, computed as u, createApp as b, createElementBlock as m, openBlock as n, normalizeClass as p, createVNode as o, createCommentVNode as y, unref as i, withCtx as B, createBlock as k, Fragment as x, renderList as C } from "vue";
-import { Position as g, CurveType as V } from "@unovis/ts";
-import { VisXYContainer as N, VisTooltip as F, VisLine as O, VisAxis as f, VisCrosshair as P, VisBulletLegend as j } from "@unovis/vue";
-import D from "../Tooltip.js";
-import { LegendPosition as E } from "../../types.js";
+import { defineComponent as v, computed as d, createApp as b, createElementBlock as m, openBlock as l, normalizeClass as p, createVNode as r, createCommentVNode as y, unref as i, withCtx as x, createBlock as k, Fragment as B, renderList as V } from "vue";
+import { Position as g, CurveType as C } from "@unovis/ts";
+import { VisXYContainer as F, VisTooltip as N, VisLine as M, VisAxis as f, VisCrosshair as O, VisBulletLegend as P } from "@unovis/vue";
+import j from "../Tooltip.js";
+import { LegendPosition as D } from "../../types.js";
 const X = /* @__PURE__ */ v({
   __name: "LineChart",
   props: {
@@ -29,43 +29,44 @@ const X = /* @__PURE__ */ v({
     yTickLine: { type: Boolean }
   },
   setup(t) {
-    const l = t, h = (e) => Object.values(l.categories)[e].color, L = u(() => (e) => {
+    const n = t, h = (e) => Object.values(n.categories)[e].color, L = d(() => (e, u) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const a = b(D, {
+        const o = b(j, {
           data: e,
-          categories: l.categories
-        }), r = document.createElement("div");
-        a.mount(r);
-        const c = r.innerHTML;
-        return a.unmount(), c;
+          categories: n.categories,
+          xValue: n.xFormatter(Math.floor(u))
+        }), a = document.createElement("div");
+        o.mount(a);
+        const c = a.innerHTML;
+        return o.unmount(), c;
       } catch {
         return "";
       }
-    }), s = u(
-      () => l.legendPosition === E.Top
+    }), s = d(
+      () => n.legendPosition === D.Top
     );
-    return (e, a) => (n(), m("div", {
+    return (e, u) => (l(), m("div", {
       class: p(["flex flex-col space-y-4", { "flex-col-reverse": s.value }])
     }, [
-      o(i(N), {
+      r(i(F), {
         data: e.data,
         height: e.height
       }, {
-        default: B(() => [
-          o(i(F), {
+        default: x(() => [
+          r(i(N), {
             "horizontal-placement": i(g).Right,
             "vertical-placement": i(g).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), m(x, null, C(Object.keys(l.categories), (r, c) => (n(), k(i(O), {
-            key: c,
-            x: (d, T) => T,
-            y: (d) => d[r],
-            color: h(c),
-            "curve-type": e.curveType ?? i(V).MonotoneX
+          (l(!0), m(B, null, V(Object.keys(n.categories), (o, a) => (l(), k(i(M), {
+            key: a,
+            x: (c, T) => T,
+            y: (c) => c[o],
+            color: h(a),
+            "curve-type": e.curveType ?? i(C).MonotoneX
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          o(i(f), {
+          r(i(f), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -77,7 +78,7 @@ const X = /* @__PURE__ */ v({
             "tick-values": e.xExplicitTicks,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"]),
-          o(i(f), {
+          r(i(f), {
             type: "y",
             "tick-format": e.yFormatter,
             label: e.yLabel,
@@ -86,7 +87,7 @@ const X = /* @__PURE__ */ v({
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"]),
-          e.hideTooltip ? y("", !0) : (n(), k(i(P), {
+          e.hideTooltip ? y("", !0) : (l(), k(i(O), {
             key: 0,
             color: "#666",
             template: L.value
@@ -94,11 +95,11 @@ const X = /* @__PURE__ */ v({
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      e.hideLegend ? y("", !0) : (n(), m("div", {
+      e.hideLegend ? y("", !0) : (l(), m("div", {
         key: 0,
         class: p(["flex items center justify-end", { "pb-4": s.value }])
       }, [
-        o(i(j), {
+        r(i(P), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))

package/dist/components/Tooltip.js

@@ -1,37 +1,44 @@
-import { defineComponent as g, computed as m, createElementBlock as r, openBlock as l, Fragment as x, renderList as _, createElementVNode as o, normalizeStyle as n, toDisplayString as a } from "vue";
-const h = /* @__PURE__ */ g({
+import { defineComponent as m, computed as b, createElementBlock as r, openBlock as l, createElementVNode as o, toDisplayString as i, Fragment as v, renderList as h, normalizeStyle as a } from "vue";
+const x = {
+  class: "capitalize border-b mb-1 pb-1",
+  style: {
+    color: "var(--tooltip-value-color)",
+    borderColor: "rgba(255, 255, 255, 0.05)"
+  }
+}, f = /* @__PURE__ */ m({
   __name: "Tooltip",
   props: {
     data: {},
-    categories: {}
+    categories: {},
+    xValue: {}
   },
   setup(s) {
-    const i = s, c = ["_index", "_stacked", "_ending"], p = m(() => Object.entries(i.data ?? []).filter(
-      ([t, d]) => {
-        var e;
-        return !c.includes(t) && ((e = i.categories[t]) == null ? void 0 : e.color);
-      }
+    const n = s, c = ["_index", "_stacked", "_ending"], p = b(() => Object.entries(n.data ?? []).filter(
+      ([e, d]) => !c.includes(e) && Object.keys(n.categories).includes(e)
     ));
-    return (t, d) => (l(), r("div", null, [
-      (l(!0), r(x, null, _(p.value, ([e, u]) => (l(), r("div", {
-        key: e,
+    return (e, d) => (l(), r("div", null, [
+      o("div", x, i(e.xValue), 1),
+      (l(!0), r(v, null, h(p.value, ([t, u], g) => (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" }, { backgroundColor: t.categories[e].color }])
+          style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+            backgroundColor: e.categories[t].color ? e.categories[t].color : `var(--vis-color${g})`
+          }])
         }, null, 4),
         o("div", null, [
           o("span", {
-            style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-          }, a(e) + ":", 1),
+            style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+          }, i(t) + ":", 1),
           o("span", {
-            style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-          }, a(u), 1)
+            style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+          }, i(u), 1)
         ])
       ]))), 128))
     ]));
   }
 });
 export {
-  h as default
+  f as default
 };

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

@@ -3,6 +3,7 @@ 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> & {
         data: T;
         categories: Record<string, BulletLegendItemInterface>;
+        xValue: string | number;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.1-test.2",
+  "version": "0.1.1-test.4",
   "type": "module",
   "files": [
     "dist"

package/dist/colors.d.ts

@@ -1,11 +0,0 @@
-export declare function getOklchFromCssVariable(cssVariableName: any): {
-    l: number;
-    c: number;
-    h: number;
-    a: number;
-} | null;
-export declare function getColorValue(colorStr: any, oklch2web: any): any;
-export declare function convertCategories(categories: any, oklch2web: any): {};
-declare function oklch2web(l: any, c: any, h: any, a: any): string;
-declare function extractHue(color: any): number;
-export { extractHue, oklch2web };

package/dist/colors.js

@@ -1,100 +0,0 @@
-function l(n) {
-  if (typeof window > "u") return null;
-  const e = getComputedStyle(document.documentElement).getPropertyValue(n).trim();
-  if (!e) return null;
-  const t = e.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
-  if (!t) return null;
-  const o = parseFloat(t[1]) * 100, s = parseFloat(t[2]), c = parseFloat(t[3]), u = parseFloat(t[4]);
-  return { l: o, c: s, h: c, a: u };
-}
-function f(n, r) {
-  const e = "#3b82f6";
-  if (n != null && n.includes("#")) return n;
-  const t = l(n);
-  return t ? r(t.l, t.c, t.h) : e;
-}
-function M(n, r) {
-  return Object.keys(n).reduce(
-    (e, t) => {
-      const o = n[t];
-      return e[t] = {
-        ...o,
-        color: f(o.color, r)
-      }, e;
-    },
-    {}
-  );
-}
-function h(n) {
-  const { l: r, c: e, h: t } = n;
-  return {
-    l: r,
-    a: e ? e * Math.cos(t / 180 * Math.PI) : 0,
-    b: e ? e * Math.sin(t / 180 * Math.PI) : 0
-  };
-}
-function b(n) {
-  const { l: r, a: e, b: t } = n, o = Math.pow(
-    r * 0.9999999984505198 + 0.39633779217376786 * e + 0.2158037580607588 * t,
-    3
-  ), s = Math.pow(
-    r * 1.0000000088817609 - 0.10556134232365635 * e - 0.06385417477170591 * t,
-    3
-  ), c = Math.pow(
-    r * 1.0000000546724108 - 0.08948418209496575 * e - 1.2914855378640917 * t,
-    3
-  );
-  return {
-    r: 4.076741661347994 * o - 3.307711590408193 * s + 0.230969928729428 * c,
-    g: -1.2684380040921763 * o + 2.6097574006633715 * s - 0.3413193963102197 * c,
-    b: -0.004196086541837188 * o - 0.7034186144594493 * s + 1.7076147009309444 * c
-  };
-}
-function g(n) {
-  const r = (e) => {
-    const t = Math.abs(e);
-    return t > 31308e-7 ? (Math.sign(e) || 1) * (1.055 * Math.pow(t, 0.4166666666666667) - 0.055) : e * 12.92;
-  };
-  return { r: r(n.r) * 255, g: r(n.g) * 255, b: r(n.b) * 255 };
-}
-function a(n) {
-  return g(b(h(n)));
-}
-function p(n) {
-  let r = a(n);
-  const e = (t) => [t.r, t.g, t.b].some((o) => o < 0 || o > 255);
-  if (e(r) && !e(a({ ...n, c: 0 }))) {
-    let t = 0, o = n.c, s = 0;
-    const c = 0.4 / Math.pow(2, 13);
-    for (; o - t > c; ) {
-      const u = t + (o - t) * 0.5, i = a({ ...n, c: u });
-      e(i) ? o = u : (s = u, t = u);
-    }
-    r = a({ ...n, c: s });
-  }
-  return r;
-}
-function d(n, r, e) {
-  return `#${((1 << 24) + (n << 16) + (r << 8) + e).toString(16).slice(1)}`;
-}
-function m(n) {
-  const [r, e, t] = [n.r, n.g, n.b].map((o) => {
-    const s = Math.round(o);
-    return Math.min(Math.max(s, 0), 255);
-  });
-  return {
-    r,
-    g: e,
-    b: t
-  };
-}
-function w(n, r, e, t) {
-  const o = p({ l: n / 100, c: r, h: e }), { r: s, g: c, b: u } = m(o);
-  return t ? `rgba(${s},${c},${u},${t})` : d(s, c, u);
-}
-export {
-  M as convertCategories,
-  f as getColorValue,
-  l as getOklchFromCssVariable,
-  w as oklch2web
-};