vue-chrts 0.1.10 → 0.1.11-beta.1

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 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({
   __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: (n) => n.data.length > m ? m / B : n.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (i) => i.data.length > p ? p / x : i.data.length - 1 },
+    yNumTicks: { default: (n) => n.data.length > m ? m / B : n.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -32,36 +33,36 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
     xTickLine: { type: Boolean },
     yTickLine: { type: Boolean },
     xGridLine: { type: Boolean },
-    yGridLine: { type: Boolean }
+    yGridLine: { type: Boolean },
+    hideXAxis: { type: Boolean },
+    hideYAxis: { 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) => {
+  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 o = N(Y, {
+        const t = $(X, {
           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;
+          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 "";
       }
     });
-    P(() => {
-      d.value && (d.value.unmount(), d.value = null), k.value && (k.value = null);
-    });
     function F(e) {
       var t;
       return {
-        y: (o) => Number(o[e]),
-        color: ((t = r.categories[e]) == null ? void 0 : t.color) ?? A
+        y: (r) => Number(r[e]),
+        color: ((t = a.categories[e]) == null ? void 0 : t.color) ?? C
       };
     }
-    function O(e, t) {
+    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" />
@@ -69,7 +70,7 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   </linearGradient>
 `;
     }
-    function $(e, t) {
+    function x(e, t) {
       return `
   <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${t}" stop-opacity="1" />
@@ -77,45 +78,45 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   </linearGradient>
 `;
     }
-    const E = f(
-      () => m.map(
-        (e, t) => e != null && e.includes("#") ? $(t, e) : O(t, e ?? A)
+    const D = g(
+      () => u.map(
+        (e, t) => e != null && e.includes("#") ? x(t, e) : V(t, e ?? C)
       ).join("")
-    ), v = f(
-      () => r.legendPosition === H.Top
+    ), k = g(
+      () => a.legendPosition === Y.Top
     );
-    return (e, t) => (l(), u("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": v.value }])
+    return (e, t) => (o(), c("div", {
+      class: T(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
     }, [
-      s(n(I), {
+      p(i(P), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": E.value
+        "svg-defs": D.value
       }, {
-        default: M(() => [
-          e.hideTooltip ? g("", !0) : (l(), h(n(S), {
+        default: E(() => [
+          e.hideTooltip ? s("", !0) : (o(), d(i(j), {
             key: 0,
-            "horizontal-placement": n(C).Right,
-            "vertical-placement": n(C).Top
+            "horizontal-placement": i(v).Right,
+            "vertical-placement": i(v).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,
-              ref_for: !0
-            }, F(o), {
-              color: `url(#gradient${a}-${n(m)[a]})`,
-              opacity: q,
-              "curve-type": e.curveType ?? n(B).MonotoneX
+          (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
             }), 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
+            p(i(M), {
+              x: (y, f) => f,
+              y: (y) => y[r],
+              color: i(u)[l],
+              "curve-type": e.curveType ?? i(L).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          s(n(V), {
+          e.hideXAxis ? s("", !0) : (o(), d(i(b), {
+            key: 1,
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -126,8 +127,9 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
             "tick-line": e.xTickLine,
             "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), {
+          }, 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), {
+            key: 2,
             type: "y",
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
@@ -135,20 +137,20 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
             "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 ? g("", !0) : (l(), h(n(R), {
-            key: 1,
+          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"])),
+          e.hideTooltip ? s("", !0) : (o(), d(i(S), {
+            key: 3,
             color: "#666",
-            template: D.value
+            template: A.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? g("", !0) : (l(), u("div", {
+      e.hideLegend ? s("", !0) : (o(), c("div", {
         key: 0,
-        class: L(["flex items-center justify-end", { "pb-4": v.value }])
+        class: T(["flex items-center justify-end", { "pb-4": k.value }])
       }, [
-        s(n(X), {
+        p(i(U), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -156,5 +158,5 @@ const p = 24, x = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   }
 });
 export {
-  _ as default
+  Z as default
 };

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

@@ -35,19 +35,19 @@ export interface AreaChartProps<T> {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-     * A function that formats the x-axis tick labels.
-     * @param i The x-axis key of the item to be formatted.
-     * @param idx The index of the data point (optional).
-     * @returns The formatted x-axis label.
-     */
-    xFormatter: (i: number, idx?: number) => string | number;
-    /**
-     * An optional function that formats the y-axis tick labels.
-     * @param i The y-axis key of the item to be formatted.
-     * @param idx The index of the data point (optional).
-     * @returns The formatted y-axis label or value.
-     */
-    yFormatter?: (i: number, idx?: number) => string | number;
+   * @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);
     /**
      * The type of curve to use for the area chart lines.
      * See `CurveType` for available options.
@@ -106,4 +106,12 @@ export interface AreaChartProps<T> {
      * If `true`, displays grid lines along the y-axis.
      */
     yGridLine?: boolean;
+    /**
+     * If `true`, hide the x-axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * If `true`, hide the y-axis.
+     */
+    hideYAxis?: boolean;
 }

package/dist/components/BarChart/BarChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as v, computed as c, createApp as V, createElementBlock as f, openBlock as l, normalizeClass as b, createVNode as r, createCommentVNode as x, unref as i, withCtx as P, createBlock as h } from "vue";
-import { Orientation as s, StackedBar as A, GroupedBar as O } from "@unovis/ts";
-import { VisXYContainer as C, VisTooltip as G, VisGroupedBar as N, VisStackedBar as j, VisAxis as L, VisBulletLegend as w } from "@unovis/vue";
-import E from "../Tooltip.js";
-import { LegendPosition as D } from "../../types.js";
-const S = /* @__PURE__ */ v({
+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({
   __name: "BarChart",
   props: {
     data: {},
@@ -20,9 +20,9 @@ const S = /* @__PURE__ */ v({
     categories: {},
     xFormatter: {},
     yFormatter: {},
-    yNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
+    yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
     minMaxTicksOnly: { type: Boolean },
-    xNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
+    xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
     xExplicitTicks: {},
     yAxis: {},
     groupPadding: {},
@@ -36,67 +36,71 @@ const S = /* @__PURE__ */ v({
     xTickLine: { type: Boolean },
     yTickLine: { type: Boolean },
     xGridLine: { type: Boolean },
-    yGridLine: { type: Boolean, default: !0 }
+    yGridLine: { type: Boolean, default: !0 },
+    hideXAxis: { type: Boolean },
+    hideYAxis: { type: Boolean }
   },
-  setup(n) {
-    const a = n;
-    if (!a.yAxis || a.yAxis.length === 0)
+  setup(a) {
+    const n = a;
+    if (!n.yAxis || n.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const m = c(() => a.yAxis.map((e) => (t) => t[e])), p = (e, t) => Object.values(a.categories)[t].color, g = c(
-      () => a.legendPosition === D.Top
-    ), y = c(() => (e, t) => {
+    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(a.categories), B = Object.keys(e).find((o) => !u.includes(o));
+      const u = Object.keys(n.categories), B = Object.keys(e).find((r) => !u.includes(r));
       try {
-        const o = V(E, {
+        const r = A(w, {
           data: e,
-          categories: a.categories,
-          xValue: e[B]
-        }), k = document.createElement("div");
-        o.mount(k);
-        const T = k.innerHTML;
-        return o.unmount(), T;
+          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, t) => (l(), f("div", {
-      class: b(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
+    return (e, o) => (t(), b("div", {
+      class: L(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
     }, [
-      r(i(C), {
+      p(i(C), {
         padding: e.padding,
         height: e.height
       }, {
-        default: P(() => [
-          r(i(G), {
+        default: V(() => [
+          p(i(F), {
             triggers: {
-              [i(O).selectors.bar]: y.value,
-              [i(A).selectors.bar]: y.value
+              [i(O).selectors.bar]: f.value,
+              [i(P).selectors.bar]: f.value
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (l(), h(i(j), {
+          e.stacked ? (t(), l(i(N), {
             key: 1,
             data: e.data,
             x: (u, d) => d,
-            y: m.value,
-            color: p,
+            y: y.value,
+            color: g,
             "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"])) : (l(), h(i(N), {
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (t(), l(i(G), {
             key: 0,
             data: e.data,
             x: (u, d) => d,
-            y: m.value,
-            color: p,
+            y: y.value,
+            color: g,
             "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"])),
-          r(i(L), {
+          e.hideXAxis ? m("", !0) : (t(), l(i(T), {
+            key: 2,
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -105,9 +109,10 @@ const S = /* @__PURE__ */ v({
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "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), {
+            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), {
+            key: 3,
             type: "y",
             label: e.yLabel,
             "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
@@ -115,15 +120,15 @@ const S = /* @__PURE__ */ v({
             "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
             "tick-line": e.yTickLine
-          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"])
+          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
         ]),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? x("", !0) : (l(), f("div", {
+      e.hideLegend ? m("", !0) : (t(), b("div", {
         key: 0,
-        class: b(["flex items center justify-end", { "pb-4": g.value }])
+        class: L(["flex items center justify-end", { "pb-4": k.value }])
       }, [
-        r(i(w), {
+        p(i(j), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -131,5 +136,5 @@ const S = /* @__PURE__ */ v({
   }
 });
 export {
-  S as default
+  H as default
 };

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

@@ -38,19 +38,19 @@ export interface BarChartProps<T> {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-     * A function that formats the x-axis tick labels.
-     * @param i The x-axis key of the item to be formatted.
-     * @param idx The index of the data point (optional).
-     * @returns The formatted x-axis label.
-     */
-    xFormatter: (i: number, idx?: number) => string | number;
+   * @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);
     /**
-     * An optional function that formats the y-axis tick labels.
-     * @param i The y-axis key of the item to be formatted.
-     * @param idx The index of the data point (optional).
-     * @returns The formatted y-axis label or value.
-     */
-    yFormatter?: (i: number, idx?: number) => string | number;
+   * @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);
     /**
      * The desired number of ticks on the y-axis.
      */
@@ -121,4 +121,12 @@ export interface BarChartProps<T> {
      * If `true`, displays grid lines along the y-axis.
      */
     yGridLine?: boolean;
+    /**
+     * If `true`, hide the x-axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * If `true`, hide the y-axis.
+     */
+    hideYAxis?: boolean;
 }

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 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 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 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({
   __name: "LineChart",
   props: {
     data: {},
@@ -32,48 +33,52 @@ const $ = /* @__PURE__ */ b({
     yGridLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean }
+    yTickLine: { type: Boolean },
+    hideXAxis: { type: Boolean },
+    hideYAxis: { 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 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 o = B(D, {
+        const a = B(j, {
           data: e,
-          categories: n.categories,
-          xValue: n.xFormatter(Math.floor(c))
-        }), a = document.createElement("div");
-        o.mount(a);
-        const m = a.innerHTML;
-        return o.unmount(), m;
+          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 "";
       }
-    }), d = u(
-      () => n.legendPosition === E.Top
+    }), u = y(
+      () => o.legendPosition === D.Top
     );
-    return (e, c) => (l(), s("div", {
-      class: p(["flex flex-col space-y-4", { "flex-col-reverse": d.value }])
+    return (e, c) => (n(), d("div", {
+      class: g(["flex flex-col space-y-4", { "flex-col-reverse": u.value }])
     }, [
-      r(i(N), {
+      p(i(O), {
         data: e.data,
         padding: e.padding,
         height: e.height
       }, {
         default: x(() => [
-          r(i(O), {
+          p(i(A), {
             "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), {
-            key: a,
-            x: (m, v) => v,
-            y: (m) => m[o],
-            color: L(a),
+          (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
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          r(i(f), {
+          e.hideXAxis ? s("", !0) : (n(), m(i(f), {
+            key: 0,
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -83,9 +88,10 @@ const $ = /* @__PURE__ */ b({
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "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"]),
-          r(i(f), {
+            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), {
+            key: 1,
             type: "y",
             "tick-format": e.yFormatter,
             label: e.yLabel,
@@ -93,20 +99,20 @@ const $ = /* @__PURE__ */ b({
             "domain-line": e.yDomainLine,
             "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), {
-            key: 0,
+          }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
+          e.hideTooltip ? s("", !0) : (n(), m(i(N), {
+            key: 2,
             color: "#666",
-            template: T.value
+            template: L.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "padding", "height"]),
-      e.hideLegend ? y("", !0) : (l(), s("div", {
+      e.hideLegend ? s("", !0) : (n(), d("div", {
         key: 0,
-        class: p(["flex items center justify-end", { "pb-4": d.value }])
+        class: g(["flex items center justify-end", { "pb-4": u.value }])
       }, [
-        r(i(P), {
+        p(i(P), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -114,5 +120,5 @@ const $ = /* @__PURE__ */ b({
   }
 });
 export {
-  $ as default
+  H as default
 };

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

@@ -34,19 +34,19 @@ export interface LineChartProps<T> {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-     * A function that formats the x-axis tick labels.
-     * @param i The x-axis key of the item to be formatted.
-     * @param idx The index of the data point (optional).
-     * @returns The formatted x-axis label.
-     */
-    xFormatter: (i: number, idx?: number) => string | number;
+   * @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);
     /**
-     * An optional function that formats the y-axis tick labels.
-     * @param i The y-axis key of the item to be formatted.
-     * @param idx The index of the data point.
-     * @returns The formatted y-axis label.
-     */
-    yFormatter?: (i: number, idx?: number) => 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);
     /**
      * The type of curve to use for the line chart.
      * See `CurveType` for available options.
@@ -105,4 +105,12 @@ export interface LineChartProps<T> {
      * If `true`, displays tick lines on the y-axis.
      */
     yTickLine?: boolean;
+    /**
+     * If `true`, hide the x-axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * If `true`, hide the y-axis.
+     */
+    hideYAxis?: boolean;
 }

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.10",
+  "version": "0.1.11-beta.1",
   "type": "module",
   "files": [
     "dist"
@@ -14,6 +14,12 @@
       "require": "./dist/index.umd.cjs"
     }
   },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "release": "commit-and-tag-version"
+  },
   "peerDependencies": {
     "vue": "^3.5.13"
   },
@@ -34,10 +40,5 @@
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.4"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview",
-    "release": "commit-and-tag-version"
-  }
-}
+  "packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2"
+}