vue-chrts 0.2.1 → 0.2.2-test.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as S, createBlock as m, Fragment as L, renderList as Y, mergeProps as C, renderSlot as A } from "vue";
-import { Position as b, CurveType as D } from "@unovis/ts";
-import { createMarkers as z, getFirstPropertyValue as I } from "../../utils.js";
-import x from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as B, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
-import { LegendPosition as _ } from "../../types.js";
-const ee = {
+import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as u, createElementBlock as m, openBlock as r, normalizeClass as S, normalizeStyle as T, createVNode as p, createCommentVNode as d, createElementVNode as X, unref as i, withCtx as z, createBlock as c, Fragment as L, renderList as I, mergeProps as C, renderSlot as A } from "vue";
+import { Position as D, CurveType as b } from "@unovis/ts";
+import { createMarkers as Y, getFirstPropertyValue as x } from "../../utils.js";
+import H from "../Tooltip.js";
+import { VisXYContainer as K, VisTooltip as q, VisArea as J, VisLine as Q, VisAxis as B, VisCrosshair as Z, VisBulletLegend as _ } from "@unovis/vue";
+import { LegendPosition as ee } from "../../types.js";
+const te = {
   ref: "slotWrapper",
-  class: "hidden"
-}, y = 24, V = 4, te = 0.5, F = "#3b82f6", se = /* @__PURE__ */ U({
+  style: { display: "none" }
+}, y = 24, V = 4, ie = 0.5, F = "#3b82f6", de = /* @__PURE__ */ U({
   __name: "AreaChart",
   props: {
     data: {},
@@ -22,10 +22,10 @@ const ee = {
     curveType: {},
     lineWidth: { default: 2 },
     lineDashArray: {},
-    xNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
+    xNumTicks: { default: (a) => a.data.length > y ? y / V : a.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
+    yNumTicks: { default: (a) => a.data.length > y ? y / V : a.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -42,10 +42,10 @@ const ee = {
     }) }
   },
   emits: ["click"],
-  setup(n, { emit: $ }) {
-    const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
-      () => Object.values(r.categories).map((e) => e.color)
-    ), N = d(() => r.markerConfig ? z(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
+  setup(a, { emit: $ }) {
+    const G = $, n = a, O = j(), h = w("slotWrapper"), s = R(), f = u(
+      () => Object.values(n.categories).map((e) => e.color)
+    ), N = u(() => n.markerConfig ? Y(n.markerConfig) : ""), g = u(() => n.legendPosition === ee.Top), E = u(() => {
       const e = (t, o) => `
     <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
       <stop offset="0%" stop-color="${o}" stop-opacity="1" />
@@ -65,7 +65,7 @@ const ee = {
       var l;
       return {
         y: (t) => Number(t[e]),
-        color: ((l = r.categories[e]) == null ? void 0 : l.color) ?? F
+        color: ((l = n.categories[e]) == null ? void 0 : l.color) ?? F
       };
     }
     function W(e) {
@@ -74,40 +74,44 @@ const ee = {
     function M(e) {
       return s.value = e, W();
     }
-    return (e, l) => (a(), c("div", {
-      class: T(["flex flex-col", { "flex-col-reverse": g.value, markers: !!r.markerConfig }]),
+    return (e, l) => (r(), m("div", {
+      style: T({
+        display: "flex",
+        flexDirection: g.value ? "column-reverse" : "column"
+      }),
+      class: S({ markers: !!n.markerConfig }),
       onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
     }, [
-      u(i(H), {
+      p(i(K), {
         data: e.data,
         height: e.height,
         padding: e.padding,
         "svg-defs": E.value + N.value
       }, {
-        default: S(() => [
-          e.hideTooltip ? p("", !0) : (a(), m(i(K), {
+        default: z(() => [
+          e.hideTooltip ? d("", !0) : (r(), c(i(q), {
             key: 0,
-            "horizontal-placement": i(b).Right,
-            "vertical-placement": i(b).Top
+            "horizontal-placement": i(D).Right,
+            "vertical-placement": i(D).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (a(!0), c(L, null, Y(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
-            u(i(q), C({
+          (r(!0), m(L, null, I(Object.keys(n.categories), (t, o) => (r(), m(L, { key: t }, [
+            p(i(J), C({
               x: (k, v) => v
             }, { ref_for: !0 }, P(t), {
               color: `url(#gradient${o}-${f.value[o]})`,
-              opacity: te,
-              "curve-type": e.curveType ?? i(D).MonotoneX
+              opacity: ie,
+              "curve-type": e.curveType ?? i(b).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            u(i(J), {
+            p(i(Q), {
               x: (k, v) => v,
               y: (k) => k[t],
               color: f.value[o],
-              "curve-type": e.curveType ?? i(D).MonotoneX,
+              "curve-type": e.curveType ?? i(b).MonotoneX,
               "line-width": e.lineWidth,
               lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
             }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? p("", !0) : (a(), m(i(B), {
+          e.hideXAxis ? d("", !0) : (r(), c(i(B), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -120,7 +124,7 @@ const ee = {
             "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? p("", !0) : (a(), m(i(B), {
+          e.hideYAxis ? d("", !0) : (r(), c(i(B), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -130,34 +134,40 @@ const ee = {
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
           }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? p("", !0) : (a(), m(i(Q), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
+          e.hideTooltip ? d("", !0) : (r(), c(i(Z), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? p("", !0) : (a(), c("div", {
+      e.hideLegend ? d("", !0) : (r(), m("div", {
         key: 0,
-        class: T(["flex items-center justify-end", { "pb-4": g.value, "pt-4": !g.value }])
+        style: T({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          paddingBottom: g.value ? "1rem" : void 0,
+          paddingTop: g.value ? void 0 : "1rem"
+        })
       }, [
-        u(i(Z), {
+        p(i(_), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
-      ], 2)),
-      X("div", ee, [
+      ], 4)),
+      X("div", te, [
         i(O).tooltip ? A(e.$slots, "tooltip", {
           key: 0,
           values: s.value
         }) : s.value ? A(e.$slots, "fallback", { key: 1 }, () => [
-          u(x, {
+          p(H, {
             data: s.value,
             categories: e.categories,
-            toolTipTitle: i(I)(s.value) ?? "",
-            yFormatter: r.yFormatter
+            toolTipTitle: i(x)(s.value) ?? "",
+            yFormatter: n.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : p("", !0)
+        ]) : d("", !0)
       ], 512)
-    ], 2));
+    ], 6));
   }
 });
 export {
-  se as default
+  de as default
 };

package/dist/components/BarChart/BarChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as C, useSlots as N, useTemplateRef as O, ref as D, computed as T, createElementBlock as m, openBlock as n, normalizeClass as L, createVNode as g, createCommentVNode as c, createElementVNode as w, unref as i, withCtx as E, createBlock as u, Fragment as M, renderList as S, renderSlot as v } from "vue";
+import { defineComponent as C, useSlots as S, useTemplateRef as D, ref as N, computed as c, createElementBlock as y, openBlock as n, normalizeStyle as T, createVNode as g, createCommentVNode as m, createElementVNode as O, unref as i, withCtx as w, createBlock as u, Fragment as E, renderList as M, renderSlot as B } from "vue";
 import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
 import { getFirstPropertyValue as H } from "../../utils.js";
 import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
-import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as B, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
+import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as L, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
 import q from "../Tooltip.js";
-import { LegendPosition as U } from "../../types.js";
-const I = {
+import { LegendPosition as I } from "../../types.js";
+const U = {
   ref: "slotWrapper",
-  class: "hidden"
+  style: { display: "none" }
 }, ae = /* @__PURE__ */ C({
   __name: "BarChart",
   props: {
@@ -45,62 +45,70 @@ const I = {
     yGridLine: { type: Boolean, default: !0 },
     hideXAxis: { type: Boolean },
     hideYAxis: { type: Boolean },
+    stackedGroupedSpacing: { default: 0.1 },
     stackAndGrouped: { type: Boolean },
     xAxis: {}
   },
   emits: ["click"],
   setup(t, { emit: V }) {
-    const x = V, a = t, P = N(), y = O("slotWrapper"), r = D();
+    const x = V, a = t, G = S(), k = D("slotWrapper"), r = N();
     if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const k = T(() => a.yAxis.map((e) => (d) => d[e])), f = (e, d) => {
+    const f = c(() => a.yAxis.map((e) => (d) => d[e])), v = (e, d) => {
       var o;
       return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
-    }, s = W({
-      data: a.data,
-      categories: a.categories,
-      stackAndGrouped: a.stackAndGrouped,
-      xAxis: a.xAxis
-    }), h = T(
-      () => a.legendPosition === U.Top
+    }, s = c(
+      () => W({
+        data: a.data,
+        categories: a.categories,
+        stackAndGrouped: a.stackAndGrouped,
+        xAxis: a.xAxis,
+        spacing: a.stackedGroupedSpacing
+      }).value
+    ), h = c(
+      () => a.legendPosition === I.Top
     );
     function b(e) {
-      return r.value = e, G();
+      return r.value = e, P();
     }
-    function G(e) {
-      return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
+    function P(e) {
+      return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
     }
-    return (e, d) => (n(), m("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": h.value }]),
+    return (e, d) => (n(), y("div", {
+      style: T({
+        display: "flex",
+        flexDirection: h.value ? "column-reverse" : "column",
+        gap: "1rem"
+      }),
       onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
     }, [
       g(i(X), {
         padding: e.padding,
         height: e.height
       }, {
-        default: E(() => [
+        default: w(() => [
           g(i(Y), {
             triggers: {
               [i(z).selectors.bar]: b,
               [i(j).selectors.bar]: b
             }
           }, null, 8, ["triggers"]),
-          e.stackAndGrouped ? (n(!0), m(M, { key: 0 }, S(i(s).states, (o) => (n(), u(i(B), {
+          e.stackAndGrouped ? (n(!0), y(E, { key: 0 }, M(s.value.states, (o) => (n(), u(i(L), {
             key: o,
-            data: i(s).chartData,
-            x: (p, F) => F + i(s).positions[o],
-            y: i(s).bars[o],
-            color: i(s).colorFunctions[o],
+            data: s.value.chartData,
+            x: (p, F) => F + s.value.positions[o],
+            y: s.value.bars[o],
+            color: s.value.colorFunctions[o],
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
+            "bar-padding": e.barPadding,
             orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(B), {
+          }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(L), {
             key: 2,
             data: e.data,
             x: (o, p) => p,
-            y: k.value,
-            color: f,
+            y: f.value,
+            color: v,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
@@ -109,14 +117,14 @@ const I = {
             key: 1,
             data: e.data,
             x: (o, p) => p,
-            y: k.value,
-            color: f,
+            y: f.value,
+            color: v,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
             orientation: e.orientation ?? i(l).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          e.hideXAxis ? c("", !0) : (n(), u(i(A), {
+          e.hideXAxis ? m("", !0) : (n(), u(i(A), {
             key: 3,
             type: "x",
             "tick-format": e.xFormatter,
@@ -128,7 +136,7 @@ const I = {
             "tick-values": e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? c("", !0) : (n(), u(i(A), {
+          e.hideYAxis ? m("", !0) : (n(), u(i(A), {
             key: 4,
             type: "y",
             label: e.yLabel,
@@ -141,28 +149,33 @@ const I = {
         ]),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? c("", !0) : (n(), m("div", {
+      e.hideLegend ? m("", !0) : (n(), y("div", {
         key: 0,
-        class: L(["flex items center justify-end", { "pb-4": h.value }])
+        style: T({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          paddingBottom: h.value ? "1rem" : void 0
+        })
       }, [
         g(i(R), {
           items: Object.values(a.categories)
         }, null, 8, ["items"])
-      ], 2)),
-      w("div", I, [
-        i(P).tooltip ? v(e.$slots, "tooltip", {
+      ], 4)),
+      O("div", U, [
+        i(G).tooltip ? B(e.$slots, "tooltip", {
           key: 0,
           values: r.value
-        }) : r.value ? v(e.$slots, "fallback", { key: 1 }, () => [
+        }) : r.value ? B(e.$slots, "fallback", { key: 1 }, () => [
           g(q, {
             data: r.value,
             categories: a.categories,
             toolTipTitle: i(H)(r.value) ?? "",
             yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : c("", !0)
+        ]) : m("", !0)
       ], 512)
-    ], 2));
+    ], 4));
   }
 });
 export {

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

@@ -6,6 +6,7 @@ export interface StackedGroupedConfig<T> {
     }>;
     stackAndGrouped: boolean;
     xAxis?: keyof T;
+    spacing?: number;
 }
 export interface StackedGroupedResult<T> {
     states: string[];

package/dist/components/BarChart/stackedGroupedUtils.js

@@ -1,13 +1,11 @@
 import { computed as u } from "vue";
 import { flattenData as i } from "../../utils.js";
-function b(t) {
+function g(t) {
   return u(() => {
-    const o = f(t.categories), e = l(t.categories, o), r = p(e, t.categories), c = d(e), n = m(r), s = h(o);
-    console.log(t, "config");
-    const a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
+    const e = p(t.categories), o = f(t.categories, e), r = d(o, t.categories), c = l(o), n = m(r), s = h(e, t.spacing), a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
     return {
-      states: o,
-      groupedByState: e,
+      states: e,
+      groupedByState: o,
       colors: r,
       bars: c,
       colorFunctions: n,
@@ -16,52 +14,52 @@ function b(t) {
     };
   });
 }
-function f(t) {
-  const o = /* @__PURE__ */ new Set();
+function p(t) {
+  const e = /* @__PURE__ */ new Set();
   return Object.keys(t).forEach((r) => {
     const c = r.match(/([A-Z][a-z]+)$/);
-    c && o.add(c[1]);
-  }), Array.from(o);
+    c && e.add(c[1]);
+  }), Array.from(e);
 }
-function l(t, o) {
-  const e = {};
-  return o.forEach((r) => {
-    e[r] = Object.keys(t).filter(
+function f(t, e) {
+  const o = {};
+  return e.forEach((r) => {
+    o[r] = Object.keys(t).filter(
       (c) => c.endsWith(r)
     );
-  }), e;
+  }), o;
 }
-function p(t, o) {
-  const e = {};
+function d(t, e) {
+  const o = {};
   return Object.entries(t).forEach(([r, c]) => {
-    e[r] = c.map((n) => {
+    o[r] = c.map((n) => {
       var s;
-      return ((s = o[n]) == null ? void 0 : s.color) ?? "#ccc";
+      return ((s = e[n]) == null ? void 0 : s.color) ?? "#ccc";
     });
-  }), e;
+  }), o;
 }
-function d(t) {
-  const o = {};
-  return Object.entries(t).forEach(([e, r]) => {
-    o[e] = r.map((c) => {
-      const n = c.replace(e, "").toLowerCase();
-      return (s) => s[n + e];
+function l(t) {
+  const e = {};
+  return Object.entries(t).forEach(([o, r]) => {
+    e[o] = r.map((c) => {
+      const n = c.replace(o, "").toLowerCase();
+      return (s) => s[n + o];
     });
-  }), o;
+  }), e;
 }
 function m(t) {
-  const o = {};
-  return Object.entries(t).forEach(([e, r]) => {
-    o[e] = (c, n) => r[n] ?? "#ccc";
-  }), o;
+  const e = {};
+  return Object.entries(t).forEach(([o, r]) => {
+    e[o] = (c, n) => r[n] ?? "#ccc";
+  }), e;
 }
-function h(t) {
-  const o = t.length, e = 0.4, r = {};
+function h(t, e = 0.4) {
+  const o = t.length, r = {};
   return t.forEach((c, n) => {
     const s = (n - (o - 1) / 2) * e;
     r[c] = s;
   }), r;
 }
 export {
-  b as useStackedGrouped
+  g as useStackedGrouped
 };

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

@@ -133,6 +133,7 @@ type BarChartPropsBase<T> = {
      * If `true`, hide the y-axis.
      */
     hideYAxis?: boolean;
+    stackedGroupedSpacing?: number;
 };
 type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
     stackAndGrouped: true;

package/dist/components/DonutChart/DonutChart.js

@@ -1,14 +1,19 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as D, createElementBlock as u, openBlock as c, Fragment as S, createElementVNode as o, createCommentVNode as p, createVNode as n, renderSlot as s, unref as l, withCtx as T, normalizeStyle as W, toDisplayString as B } from "vue";
+import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as T, createElementBlock as u, openBlock as p, Fragment as D, createElementVNode as n, createCommentVNode as m, createVNode as o, renderSlot as i, unref as l, withCtx as S, normalizeStyle as W, toDisplayString as B } from "vue";
 import { Donut as L } from "@unovis/ts";
-import { DonutType as $ } from "./types.js";
-import { VisSingleContainer as H, VisTooltip as N, VisDonut as j, VisBulletLegend as z } from "@unovis/vue";
-const A = {
+import { DonutType as R } from "./types.js";
+import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as j } from "@unovis/vue";
+const z = {
   ref: "slotWrapper",
-  class: "hidden"
-}, E = { class: "flex items-center px-[15px] py-[10px]" }, R = {
+  style: { display: "none" }
+}, A = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, E = {
   key: 0,
-  class: "flex items-center justify-center mt-4"
-}, U = /* @__PURE__ */ V({
+  style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: "1rem"
+  }
+}, M = /* @__PURE__ */ V({
   __name: "DonutChart",
   props: {
     type: {},
@@ -21,65 +26,74 @@ const A = {
     padAngle: {}
   },
   emits: ["click"],
-  setup(f, { emit: m }) {
-    const g = m, r = f, h = b(), i = w("slotWrapper"), t = D(), v = (e) => e, y = r.type === $.Half;
-    function k(e) {
-      return t.value = e, C();
-    }
+  setup(c, { emit: g }) {
+    const f = g, r = c, h = b(), s = w("slotWrapper"), t = T(), y = (e) => e, v = r.type === R.Half;
     function C(e) {
-      return typeof window > "u" ? "" : i.value ? i.value.innerHTML : "";
+      return t.value = e, k();
+    }
+    function k(e) {
+      return typeof window > "u" ? "" : s.value ? s.value.innerHTML : "";
     }
-    return (e, d) => (c(), u(S, null, [
-      o("div", {
-        class: "flex items-center justify-center",
-        onClick: d[0] || (d[0] = (a) => g("click", a, t.value))
+    return (e, d) => (p(), u(D, null, [
+      n("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onClick: d[0] || (d[0] = (a) => f("click", a, t.value))
       }, [
-        n(l(H), {
+        o(l(H), {
           data: e.data,
           height: e.height,
           margin: {}
         }, {
-          default: T(() => [
-            n(l(N), {
+          default: S(() => [
+            o(l(N), {
               "horizontal-shift": 20,
               "vertical-shift": 20,
               triggers: {
-                [l(L).selectors.segment]: k
+                [l(L).selectors.segment]: C
               }
             }, null, 8, ["triggers"]),
-            n(l(j), {
-              value: v,
+            o(l($), {
+              value: y,
               "corner-radius": e.radius,
               "arc-width": e.arcWidth ?? 20,
               color: r.labels.map((a) => a.color),
-              "angle-range": y ? [-1.5707963267948966, 1.5707963267948966] : [],
+              "angle-range": v ? [-1.5707963267948966, 1.5707963267948966] : [],
               "pad-angle": r.padAngle || 0
             }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
           ]),
           _: 1
         }, 8, ["data", "height"]),
-        s(e.$slots, "default"),
-        o("div", A, [
-          l(h).tooltip ? s(e.$slots, "tooltip", {
+        i(e.$slots, "default"),
+        n("div", z, [
+          l(h).tooltip ? i(e.$slots, "tooltip", {
             key: 0,
             values: t.value
-          }) : t.value ? s(e.$slots, "fallback", { key: 1 }, () => [
-            o("div", E, [
-              o("div", {
-                class: "w-2 h-2 rounded-full mr-2",
-                style: W(`background-color: ${r.labels[t.value.index].color} ;`)
+          }) : t.value ? i(e.$slots, "fallback", { key: 1 }, () => [
+            n("div", A, [
+              n("div", {
+                style: W({
+                  width: "0.5rem",
+                  height: "0.5rem",
+                  borderRadius: "9999px",
+                  marginRight: "0.5rem",
+                  backgroundColor: r.labels[t.value.index].color
+                })
               }, null, 4),
-              o("div", null, B(t.value.data), 1)
+              n("div", null, B(t.value.data), 1)
             ])
-          ]) : p("", !0)
+          ]) : m("", !0)
         ], 512)
       ]),
-      e.hideLegend ? p("", !0) : (c(), u("div", R, [
-        n(l(z), { items: e.labels }, null, 8, ["items"])
+      e.hideLegend ? m("", !0) : (p(), u("div", E, [
+        o(l(j), { items: e.labels }, null, 8, ["items"])
       ]))
     ], 64));
   }
 });
 export {
-  U as default
+  M as default
 };

package/dist/components/LineChart/LineChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as P, computed as k, useSlots as O, useTemplateRef as j, ref as w, createElementBlock as c, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as l, createElementVNode as x, unref as i, withCtx as M, createBlock as d, Fragment as W, renderList as E, mergeProps as G, renderSlot as h } from "vue";
+import { defineComponent as P, computed as f, useSlots as O, useTemplateRef as j, ref as w, createElementBlock as p, openBlock as n, normalizeClass as x, normalizeStyle as k, createVNode as s, createCommentVNode as a, createElementVNode as M, unref as i, withCtx as W, createBlock as m, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
 import { Position as v, CurveType as X } from "@unovis/ts";
-import { createMarkers as $, getFirstPropertyValue as z } from "../../utils.js";
-import R from "../Tooltip.js";
-import { VisXYContainer as Y, VisTooltip as S, VisLine as H, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
-import { LegendPosition as I } from "../../types.js";
-const J = {
+import { createMarkers as $, getFirstPropertyValue as R } from "../../utils.js";
+import S from "../Tooltip.js";
+import { VisXYContainer as Y, VisTooltip as H, VisLine as I, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
+import { LegendPosition as J } from "../../types.js";
+const Q = {
   ref: "slotWrapper",
-  class: "hidden"
-}, te = /* @__PURE__ */ P({
+  style: { display: "none" }
+}, oe = /* @__PURE__ */ P({
   __name: "LineChart",
   props: {
     data: {},
@@ -48,46 +48,48 @@ const J = {
   },
   emits: ["click"],
   setup(o, { emit: L }) {
-    const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = O(), p = j("slotWrapper"), a = w();
+    const C = L, t = o, B = f(() => t.markerConfig ? $(t.markerConfig) : ""), b = O(), c = j("slotWrapper"), l = w();
     function D(e) {
-      return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
+      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
     }
     function V(e) {
-      return a.value = e, D();
+      return l.value = e, D();
     }
-    const y = k(
-      () => t.legendPosition === I.Top
+    const y = f(
+      () => t.legendPosition === J.Top
     ), A = Object.values(t.categories).map(
       (e, r) => `var(--vis-color${r})`
     ), F = (e) => Object.values(t.categories)[e].color ?? A[e];
-    return (e, r) => (n(), c("div", {
-      class: g(["flex flex-col space-y-4", {
-        "flex-col-reverse": y.value,
-        markers: !!t.markerConfig
-      }]),
-      onClick: r[0] || (r[0] = (m) => C("click", m, a.value))
+    return (e, r) => (n(), p("div", {
+      style: k({
+        display: "flex",
+        flexDirection: y.value ? "column-reverse" : "column",
+        gap: "1rem"
+      }),
+      class: x({ markers: !!t.markerConfig }),
+      onClick: r[0] || (r[0] = (d) => C("click", d, l.value))
     }, [
       s(i(Y), {
         data: e.data,
         padding: e.padding,
         height: e.height,
-        svgDefs: b.value
+        svgDefs: B.value
       }, {
-        default: M(() => [
-          s(i(S), {
+        default: W(() => [
+          s(i(H), {
             "horizontal-placement": i(v).Right,
             "vertical-placement": i(v).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), c(W, null, E(Object.keys(t.categories), (m, u) => (n(), d(i(H), {
+          (n(!0), p(z, null, E(Object.keys(t.categories), (d, u) => (n(), m(i(I), {
             key: u,
-            x: (f, N) => N,
-            y: (f) => f[m],
+            x: (g, N) => N,
+            y: (g) => g[d],
             color: F(u),
             "curve-type": e.curveType ?? i(X).MonotoneX,
             "line-width": e.lineWidth,
             lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
           }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? l("", !0) : (n(), d(i(T), {
+          e.hideXAxis ? a("", !0) : (n(), m(i(T), {
             key: 0,
             type: "x",
             "tick-format": e.xFormatter,
@@ -100,7 +102,7 @@ const J = {
             "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"])),
-          e.hideYAxis ? l("", !0) : (n(), d(i(T), {
+          e.hideYAxis ? a("", !0) : (n(), m(i(T), {
             key: 1,
             type: "y",
             "tick-format": e.yFormatter,
@@ -110,34 +112,39 @@ const J = {
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? l("", !0) : (n(), d(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
+          e.hideTooltip ? a("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "padding", "height", "svgDefs"]),
-      e.hideLegend ? l("", !0) : (n(), c("div", {
+      e.hideLegend ? a("", !0) : (n(), p("div", {
         key: 0,
-        class: g(["flex items center justify-end", { "pb-4": y.value }])
+        style: k({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          paddingBottom: y.value ? "1rem" : void 0
+        })
       }, [
         s(i(q), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
-      ], 2)),
-      x("div", J, [
-        i(B).tooltip ? h(e.$slots, "tooltip", {
+      ], 4)),
+      M("div", Q, [
+        i(b).tooltip ? h(e.$slots, "tooltip", {
           key: 0,
-          values: a.value
-        }) : a.value ? h(e.$slots, "fallback", { key: 1 }, () => [
-          s(R, {
-            data: a.value,
+          values: l.value
+        }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
+          s(S, {
+            data: l.value,
             categories: e.categories,
-            toolTipTitle: i(z)(a.value) ?? "",
+            toolTipTitle: i(R)(l.value) ?? "",
             yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : l("", !0)
+        ]) : a("", !0)
       ], 512)
-    ], 2));
+    ], 6));
   }
 });
 export {
-  te as default
+  oe as default
 };

package/dist/components/Tooltip.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.1",
+  "version": "0.2.2-test.1",
   "type": "module",
   "files": [
     "dist"
@@ -27,12 +27,14 @@
     "@tailwindcss/vite": "^4.0.15",
     "@tanstack/vue-table": "^8.21.2",
     "@types/node": "^22.13.11",
+    "@types/rollup": "^0.54.0",
     "@unovis/ts": "^1.5.2",
     "@unovis/vue": "^1.5.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
     "@vueuse/core": "^13.0.0",
     "commit-and-tag-version": "^12.5.1",
+    "rollup": "^4.46.2",
     "tailwindcss": "^4.0.15",
     "typescript": "~5.7.2",
     "vite": "^6.2.0",