vue-chrts 0.1.8 → 0.1.9

package/dist/components/AreaChart/AreaChart.js

@@ -1,9 +1,10 @@
-import { defineComponent as G, 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 n, withCtx as M, createBlock as h, Fragment as b, renderList as U, mergeProps as j } from "vue";
-import { Position as C, CurveType as B } from "@unovis/ts";
-import { VisXYContainer as I, VisTooltip as S, VisArea as w, VisLine as z, VisAxis as V, VisCrosshair as R, VisBulletLegend as X } from "@unovis/vue";
-import Y from "../Tooltip.js";
-import { LegendPosition as H } from "../../types.js";
-const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
+import { defineComponent as A, computed as y, createApp as $, createElementBlock as c, openBlock as l, normalizeClass as T, createVNode as s, createCommentVNode as f, unref as o, withCtx as E, createBlock as k, Fragment as v, renderList as G, mergeProps as N } from "vue";
+import { Position as L, CurveType as h } 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 w from "../Tooltip.js";
+import { LegendPosition as z } from "../../types.js";
+import { getFirstPropertyValue as R } from "../../utils.js";
+const p = 24, C = 4, X = 0.5, B = "#3b82f6", Z = /* @__PURE__ */ A({
   __name: "AreaChart",
   props: {
     data: {},
@@ -20,10 +21,10 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (i) => i.data.length > p ? p / x : i.data.length - 1 },
+    xNumTicks: { default: (i) => i.data.length > p ? p / C : i.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (i) => i.data.length > p ? p / x : i.data.length - 1 },
+    yNumTicks: { default: (i) => i.data.length > p ? p / C : i.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -35,33 +36,31 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
     yGridLine: { type: Boolean }
   },
   setup(i) {
-    const r = i, m = Object.values(r.categories).map((e) => e.color), d = T(null), k = T(null), D = f(() => (e, t) => {
+    const r = i, m = Object.values(r.categories).map((e) => e.color), F = y(() => (e) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const o = N(Y, {
+        const t = $(w, {
           data: e,
           categories: r.categories,
-          xValue: r.xFormatter(Math.floor(t))
-        }), a = document.createElement("div");
-        o.mount(a);
-        const c = a.innerHTML;
-        return o.unmount(), c;
+          toolTipTitle: R(e),
+          yFormatter: r.yFormatter
+        }), n = document.createElement("div");
+        t.mount(n);
+        const a = n.innerHTML;
+        return t.unmount(), a;
       } catch {
         return "";
       }
     });
-    P(() => {
-      d.value && (d.value.unmount(), d.value = null), k.value && (k.value = null);
-    });
-    function F(e) {
+    function V(e) {
       var t;
       return {
-        y: (o) => Number(o[e]),
-        color: ((t = r.categories[e]) == null ? void 0 : t.color) ?? A
+        y: (n) => Number(n[e]),
+        color: ((t = r.categories[e]) == null ? void 0 : t.color) ?? B
       };
     }
-    function O(e, t) {
+    function D(e, t) {
       return `
   <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
   <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
@@ -69,7 +68,7 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   </linearGradient>
 `;
     }
-    function $(e, t) {
+    function O(e, t) {
       return `
   <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${t}" stop-opacity="1" />
@@ -77,45 +76,45 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   </linearGradient>
 `;
     }
-    const E = f(
+    const x = y(
       () => m.map(
-        (e, t) => e != null && e.includes("#") ? $(t, e) : O(t, e ?? A)
+        (e, t) => e != null && e.includes("#") ? O(t, e) : D(t, e ?? B)
       ).join("")
-    ), v = f(
-      () => r.legendPosition === H.Top
+    ), g = y(
+      () => r.legendPosition === z.Top
     );
-    return (e, t) => (l(), u("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": v.value }])
+    return (e, t) => (l(), c("div", {
+      class: T(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
     }, [
-      s(n(I), {
+      s(o(P), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": E.value
+        "svg-defs": x.value
       }, {
-        default: M(() => [
-          e.hideTooltip ? g("", !0) : (l(), h(n(S), {
+        default: E(() => [
+          e.hideTooltip ? f("", !0) : (l(), k(o(j), {
             key: 0,
-            "horizontal-placement": n(C).Right,
-            "vertical-placement": n(C).Top
+            "horizontal-placement": o(L).Right,
+            "vertical-placement": o(L).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (l(!0), u(b, null, U(Object.keys(r.categories), (o, a) => (l(), u(b, { key: a }, [
-            s(n(w), j({
-              x: (c, y) => y,
+          (l(!0), c(v, null, G(Object.keys(r.categories), (n, a) => (l(), c(v, { key: a }, [
+            s(o(I), N({
+              x: (d, u) => u,
               ref_for: !0
-            }, F(o), {
-              color: `url(#gradient${a}-${n(m)[a]})`,
-              opacity: q,
-              "curve-type": e.curveType ?? n(B).MonotoneX
+            }, V(n), {
+              color: `url(#gradient${a}-${o(m)[a]})`,
+              opacity: X,
+              "curve-type": e.curveType ?? o(h).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            s(n(z), {
-              x: (c, y) => y,
-              y: (c) => c[o],
-              color: n(m)[a],
-              "curve-type": e.curveType ?? n(B).MonotoneX
+            s(o(M), {
+              x: (d, u) => u,
+              y: (d) => d[n],
+              color: o(m)[a],
+              "curve-type": e.curveType ?? o(h).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          s(n(V), {
+          s(o(b), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -127,7 +126,7 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__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"]),
-          s(n(V), {
+          s(o(b), {
             type: "y",
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
@@ -136,19 +135,19 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
           }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
-          e.hideTooltip ? g("", !0) : (l(), h(n(R), {
+          e.hideTooltip ? f("", !0) : (l(), k(o(S), {
             key: 1,
             color: "#666",
-            template: D.value
+            template: F.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? g("", !0) : (l(), u("div", {
+      e.hideLegend ? f("", !0) : (l(), c("div", {
         key: 0,
-        class: L(["flex items-center justify-end", { "pb-4": v.value }])
+        class: T(["flex items-center justify-end", { "pb-4": g.value }])
       }, [
-        s(n(X), {
+        s(o(U), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -156,5 +155,5 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   }
 });
 export {
-  _ as default
+  Z as default
 };

package/dist/components/BarChart/BarChart.js

@@ -47,16 +47,16 @@ const S = /* @__PURE__ */ v({
     ), y = c(() => (e, t) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
-      const u = Object.keys(a.categories), B = Object.keys(e).find((o) => !u.includes(o));
+      const u = Object.keys(a.categories), T = Object.keys(e).find((o) => !u.includes(o));
       try {
         const o = V(E, {
           data: e,
           categories: a.categories,
-          xValue: e[B]
+          toolTipTitle: e[T]
         }), k = document.createElement("div");
         o.mount(k);
-        const T = k.innerHTML;
-        return o.unmount(), T;
+        const B = k.innerHTML;
+        return o.unmount(), B;
       } catch {
         return "";
       }

package/dist/components/LineChart/LineChart.js

@@ -1,9 +1,10 @@
-import { defineComponent as b, computed as u, createApp as B, createElementBlock as s, openBlock as l, normalizeClass as p, createVNode as r, createCommentVNode as y, unref as i, withCtx as x, createBlock as g, Fragment as C, renderList as V } from "vue";
+import { defineComponent as b, computed as p, createApp as B, createElementBlock as s, openBlock as l, normalizeClass as u, createVNode as r, createCommentVNode as y, unref as i, withCtx as x, createBlock as g, Fragment as C, renderList as V } from "vue";
 import { Position as k, CurveType as F } from "@unovis/ts";
-import { VisXYContainer as N, VisTooltip as O, VisLine as j, VisAxis as f, VisCrosshair as M, VisBulletLegend as P } from "@unovis/vue";
-import D from "../Tooltip.js";
-import { LegendPosition as E } from "../../types.js";
-const $ = /* @__PURE__ */ b({
+import { VisXYContainer as N, VisTooltip as O, VisLine as P, VisAxis as f, VisCrosshair as j, VisBulletLegend as D } from "@unovis/vue";
+import E from "../Tooltip.js";
+import { LegendPosition as G } from "../../types.js";
+import { getFirstPropertyValue as M } from "../../utils.js";
+const R = /* @__PURE__ */ b({
   __name: "LineChart",
   props: {
     data: {},
@@ -35,14 +36,15 @@ const $ = /* @__PURE__ */ b({
     yTickLine: { type: Boolean }
   },
   setup(t) {
-    const n = t, h = Object.values(n.categories).map((e, c) => `var(--vis-color${c})`), L = (e) => Object.values(n.categories)[e].color ?? h[e], T = u(() => (e, c) => {
+    const n = t, h = Object.values(n.categories).map((e, c) => `var(--vis-color${c})`), L = (e) => Object.values(n.categories)[e].color ?? h[e], T = p(() => (e, c) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const o = B(D, {
+        const o = B(E, {
           data: e,
           categories: n.categories,
-          xValue: n.xFormatter(Math.floor(c))
+          toolTipTitle: M(e),
+          yFormatter: n.yFormatter
         }), a = document.createElement("div");
         o.mount(a);
         const m = a.innerHTML;
@@ -50,11 +52,11 @@ const $ = /* @__PURE__ */ b({
       } catch {
         return "";
       }
-    }), d = u(
-      () => n.legendPosition === E.Top
+    }), d = p(
+      () => n.legendPosition === G.Top
     );
     return (e, c) => (l(), s("div", {
-      class: p(["flex flex-col space-y-4", { "flex-col-reverse": d.value }])
+      class: u(["flex flex-col space-y-4", { "flex-col-reverse": d.value }])
     }, [
       r(i(N), {
         data: e.data,
@@ -66,7 +68,7 @@ const $ = /* @__PURE__ */ b({
             "horizontal-placement": i(k).Right,
             "vertical-placement": i(k).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (l(!0), s(C, null, V(Object.keys(n.categories), (o, a) => (l(), g(i(j), {
+          (l(!0), s(C, null, V(Object.keys(n.categories), (o, a) => (l(), g(i(P), {
             key: a,
             x: (m, v) => v,
             y: (m) => m[o],
@@ -94,7 +96,7 @@ const $ = /* @__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 ? y("", !0) : (l(), g(i(M), {
+          e.hideTooltip ? y("", !0) : (l(), g(i(j), {
             key: 0,
             color: "#666",
             template: T.value
@@ -104,9 +106,9 @@ const $ = /* @__PURE__ */ b({
       }, 8, ["data", "padding", "height"]),
       e.hideLegend ? y("", !0) : (l(), s("div", {
         key: 0,
-        class: p(["flex items center justify-end", { "pb-4": d.value }])
+        class: u(["flex items center justify-end", { "pb-4": d.value }])
       }, [
-        r(i(P), {
+        r(i(D), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -114,5 +116,5 @@ const $ = /* @__PURE__ */ b({
   }
 });
 export {
-  $ as default
+  R as default
 };

package/dist/components/Tooltip.js

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

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

@@ -3,7 +3,8 @@ 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;
+        toolTipTitle: string | number;
+        yFormatter?: (value: T) => any;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/utils.d.ts

@@ -1 +1,2 @@
 export declare function getDistributedIndices(length: number, numTicks: number): number[];
+export declare function getFirstPropertyValue(obj: unknown): undefined;

package/dist/utils.js

@@ -0,0 +1,9 @@
+function r(e) {
+  if (e && Object.keys(e).length > 0) {
+    const t = Object.keys(e)[0];
+    return e[t];
+  }
+}
+export {
+  r as getFirstPropertyValue
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "files": [
     "dist"