vue-chrts 0.1.7 → 0.1.9-test.0

package/dist/components/AreaChart/AreaChart.js

@@ -1,23 +1,30 @@
-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 o, 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 x, 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__ */ 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: {},
     height: {},
     xLabel: {},
     yLabel: {},
+    padding: { default: () => ({
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    }) },
     categories: {},
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (i) => i.data.length > p ? p / V : 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 / V : i.data.length - 1 },
+    yNumTicks: { default: (i) => i.data.length > p ? p / C : i.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -29,33 +36,31 @@ const p = 24, V = 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 n = N(Y, {
+        const t = $(w, {
           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;
+          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: (n) => Number(n[e]),
-        color: ((t = r.categories[e]) == null ? void 0 : t.color) ?? A
+        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" />
@@ -63,7 +68,7 @@ const p = 24, V = 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" />
@@ -71,44 +76,45 @@ const p = 24, V = 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(o(I), {
+      s(o(P), {
         data: e.data,
         height: e.height,
-        "svg-defs": E.value
+        padding: e.padding,
+        "svg-defs": x.value
       }, {
-        default: M(() => [
-          e.hideTooltip ? g("", !0) : (l(), h(o(S), {
+        default: E(() => [
+          e.hideTooltip ? f("", !0) : (l(), k(o(j), {
             key: 0,
-            "horizontal-placement": o(C).Right,
-            "vertical-placement": o(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), (n, a) => (l(), u(b, { key: a }, [
-            s(o(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(n), {
+            }, V(n), {
               color: `url(#gradient${a}-${o(m)[a]})`,
-              opacity: q,
-              "curve-type": e.curveType ?? o(B).MonotoneX
+              opacity: X,
+              "curve-type": e.curveType ?? o(h).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            s(o(z), {
-              x: (c, y) => y,
-              y: (c) => c[n],
+            s(o(M), {
+              x: (d, u) => u,
+              y: (d) => d[n],
               color: o(m)[a],
-              "curve-type": e.curveType ?? o(B).MonotoneX
+              "curve-type": e.curveType ?? o(h).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          s(o(x), {
+          s(o(b), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -120,7 +126,7 @@ const p = 24, V = 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(o(x), {
+          s(o(b), {
             type: "y",
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
@@ -129,19 +135,19 @@ const p = 24, V = 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(o(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", "svg-defs"]),
-      e.hideLegend ? g("", !0) : (l(), u("div", {
+      }, 8, ["data", "height", "padding", "svg-defs"]),
+      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(o(X), {
+        s(o(U), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -149,5 +155,5 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   }
 });
 export {
-  _ as default
+  Z as default
 };

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

@@ -19,6 +19,16 @@ export interface AreaChartProps<T> {
      * Optional label for the y-axis.
      */
     yLabel?: string;
+    /**
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     /**
      * A record mapping category keys to `BulletLegendItemInterface` objects.
      * This defines the visual representation and labels for each category in the chart's legend.

package/dist/components/AreaStackedChart/AreaStackedChart.js

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

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

@@ -1,10 +1,4 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
-export type AreaStackedChartProps<T> = {
-    data: T[];
-    height: number;
-    categories: Record<string, BulletLegendItemInterface>;
-    hideTooltip?: boolean;
-};
+import { AreaStackedChartProps } 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> & AreaStackedChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;

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

@@ -27,6 +27,16 @@ export interface AreaStackedChartProps<T> {
      * Optional label for the y-axis.
      */
     yLabel?: string;
+    /**
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     /**
      * If `true`, hides the chart legend.
      */

package/dist/components/BarChart/BarChart.js

@@ -1,6 +1,6 @@
-import { defineComponent as v, computed as c, createApp as x, createElementBlock as f, openBlock as d, normalizeClass as b, createVNode as r, createCommentVNode as V, unref as i, withCtx as P, createBlock as L } from "vue";
+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 h, VisBulletLegend as w } from "@unovis/vue";
+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({
@@ -11,6 +11,12 @@ const S = /* @__PURE__ */ v({
     height: {},
     xLabel: {},
     yLabel: {},
+    padding: { default: () => ({
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    }) },
     categories: {},
     xFormatter: {},
     yFormatter: {},
@@ -41,24 +47,27 @@ 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 = x(E, {
+        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 "";
       }
     });
-    return (e, t) => (d(), f("div", {
+    return (e, t) => (l(), f("div", {
       class: b(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
     }, [
-      r(i(C), { height: e.height }, {
+      r(i(C), {
+        padding: e.padding,
+        height: e.height
+      }, {
         default: P(() => [
           r(i(G), {
             triggers: {
@@ -66,20 +75,20 @@ const S = /* @__PURE__ */ v({
               [i(A).selectors.bar]: y.value
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (d(), L(i(j), {
+          e.stacked ? (l(), h(i(j), {
             key: 1,
             data: e.data,
-            x: (u, l) => l,
+            x: (u, d) => d,
             y: m.value,
             color: p,
             "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(), L(i(N), {
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), h(i(N), {
             key: 0,
             data: e.data,
-            x: (u, l) => l,
+            x: (u, d) => d,
             y: m.value,
             color: p,
             "rounded-corners": e.radius ?? 0,
@@ -87,7 +96,7 @@ const S = /* @__PURE__ */ v({
             "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(h), {
+          r(i(L), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -98,7 +107,7 @@ const S = /* @__PURE__ */ v({
             "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(h), {
+          r(i(L), {
             type: "y",
             label: e.yLabel,
             "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
@@ -109,8 +118,8 @@ const S = /* @__PURE__ */ v({
           }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"])
         ]),
         _: 1
-      }, 8, ["height"]),
-      e.hideLegend ? V("", !0) : (d(), f("div", {
+      }, 8, ["padding", "height"]),
+      e.hideLegend ? x("", !0) : (l(), f("div", {
         key: 0,
         class: b(["flex items center justify-end", { "pb-4": g.value }])
       }, [

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

@@ -22,6 +22,16 @@ export interface BarChartProps<T> {
      * Optional label for the y-axis.
      */
     yLabel?: string;
+    /**
+   * Optional padding applied to the chart.
+   * Allows specifying individual padding values for the top, right, bottom, and left sides.
+   */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     /**
      * A record mapping category keys to `BulletLegendItemInterface` objects.
      * This defines the visual representation and labels for each category in the chart's legend.

package/dist/components/LineChart/LineChart.js

@@ -1,15 +1,22 @@
-import { defineComponent as b, computed as d, createApp as x, createElementBlock as m, openBlock as l, normalizeClass as p, createVNode as r, createCommentVNode as y, unref as i, withCtx as B, createBlock as k, Fragment as C, renderList as V } from "vue";
-import { Position as g, 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 { 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 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: {},
     height: {},
     xLabel: {},
     yLabel: {},
+    padding: { default: () => ({
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    }) },
     categories: {},
     xFormatter: {},
     yFormatter: {},
@@ -29,40 +36,42 @@ 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 = d(() => (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 = x(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 s = a.innerHTML;
-        return o.unmount(), s;
+        const m = a.innerHTML;
+        return o.unmount(), m;
       } catch {
         return "";
       }
-    }), u = d(
-      () => n.legendPosition === E.Top
+    }), d = p(
+      () => n.legendPosition === G.Top
     );
-    return (e, c) => (l(), m("div", {
-      class: p(["flex flex-col space-y-4", { "flex-col-reverse": u.value }])
+    return (e, c) => (l(), s("div", {
+      class: u(["flex flex-col space-y-4", { "flex-col-reverse": d.value }])
     }, [
       r(i(N), {
         data: e.data,
+        padding: e.padding,
         height: e.height
       }, {
-        default: B(() => [
+        default: x(() => [
           r(i(O), {
-            "horizontal-placement": i(g).Right,
-            "vertical-placement": i(g).Top
+            "horizontal-placement": i(k).Right,
+            "vertical-placement": i(k).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (l(!0), m(C, null, V(Object.keys(n.categories), (o, a) => (l(), k(i(j), {
+          (l(!0), s(C, null, V(Object.keys(n.categories), (o, a) => (l(), g(i(P), {
             key: a,
-            x: (s, v) => v,
-            y: (s) => s[o],
+            x: (m, v) => v,
+            y: (m) => m[o],
             color: L(a),
             "curve-type": e.curveType ?? i(F).MonotoneX
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
@@ -87,19 +96,19 @@ 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(), k(i(M), {
+          e.hideTooltip ? y("", !0) : (l(), g(i(j), {
             key: 0,
             color: "#666",
             template: T.value
           }, null, 8, ["template"]))
         ]),
         _: 1
-      }, 8, ["data", "height"]),
-      e.hideLegend ? y("", !0) : (l(), m("div", {
+      }, 8, ["data", "padding", "height"]),
+      e.hideLegend ? y("", !0) : (l(), s("div", {
         key: 0,
-        class: p(["flex items center justify-end", { "pb-4": u.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))
@@ -107,5 +116,5 @@ const $ = /* @__PURE__ */ b({
   }
 });
 export {
-  $ as default
+  R as default
 };

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

@@ -18,6 +18,16 @@ export interface LineChartProps<T> {
      * Optional label for the y-axis.
      */
     yLabel?: string;
+    /**
+   * Optional padding applied to the chart.
+   * Allows specifying individual padding values for the top, right, bottom, and left sides.
+   */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     /**
      * A record mapping category keys to `BulletLegendItemInterface` objects.
      * This defines the visual representation and labels for each category in the chart's legend.

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.7",
+  "version": "0.1.9-test.0",
   "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"
+}