vue-chrts 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as W, useSlots as E, useTemplateRef as M, ref as w, computed as m, createElementBlock as f, openBlock as c, normalizeStyle as x, createVNode as y, createCommentVNode as d, createElementVNode as X, unref as o, withCtx as R, createBlock as g, Fragment as T, renderList as Y, mergeProps as k, renderSlot as L } from "vue";
-import { Position as C, CurveType as A } from "@unovis/ts";
-import { createMarkers as z } from "../../utils.js";
-import U from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as q, VisArea as J, VisLine as K, VisAxis as D, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
-import { LegendPosition as I } from "../../types.js";
-const _ = ["id"], ee = {
+import { defineComponent as z, useSlots as R, useTemplateRef as U, ref as H, computed as d, createElementBlock as f, openBlock as c, normalizeClass as K, normalizeStyle as p, createVNode as u, createCommentVNode as y, createElementVNode as q, unref as r, withCtx as J, createBlock as k, Fragment as T, renderList as Q, mergeProps as v, renderSlot as b } from "vue";
+import { Position as $, CurveType as h } from "@unovis/ts";
+import { createMarkers as Z } from "../../utils.js";
+import I from "../Tooltip.js";
+import { VisXYContainer as _, VisTooltip as ee, VisArea as B, VisLine as D, VisAxis as O, VisCrosshair as te, VisBulletLegend as ie } from "@unovis/vue";
+import { LegendPosition as ae } from "../../types.js";
+const ne = ["id"], oe = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, te = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ W({
+}, F = 0.5, A = "#3b82f6", ye = /* @__PURE__ */ z({
   __name: "AreaChart",
   props: {
     data: {},
@@ -34,7 +34,7 @@ const _ = ["id"], ee = {
     yNumTicks: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean },
-    legendPosition: { default: I.BottomCenter },
+    legendPosition: { default: ae.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -50,37 +50,38 @@ const _ = ["id"], ee = {
     xAxisConfig: {},
     yAxisConfig: {},
     yDomain: {},
-    xDomain: {}
+    xDomain: {},
+    stacked: { type: Boolean }
   },
   emits: ["click"],
-  setup(e, { emit: b }) {
-    const B = b, n = e, O = E(), p = M("slotWrapper"), u = w(), v = m(() => {
-      const a = Object.values(n.categories).map(
-        (l, i) => `var(--vis-color${i})`
+  setup(e, { emit: V }) {
+    const j = V, n = e, G = R(), C = U("slotWrapper"), m = H(), g = d(() => {
+      const i = Object.values(n.categories).map(
+        (l, a) => `var(--vis-color${a})`
       );
       return Object.values(n.categories).map(
-        (l, i) => l.color ?? a[i]
+        (l, a) => l.color ?? i[a]
       );
-    }), F = m(() => {
-      var a;
-      return (a = n.markerConfig) != null && a.config ? z(n.markerConfig) : "";
-    }), V = m(() => n.legendPosition.startsWith("top")), G = m(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), S = m(() => {
-      const a = (i, t) => {
-        var r;
+    }), N = d(() => {
+      var i;
+      return (i = n.markerConfig) != null && i.config ? Z(n.markerConfig) : "";
+    }), S = d(() => n.legendPosition.startsWith("top")), W = d(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), M = d(() => {
+      const i = (a, t) => {
+        var o;
         return `
-    <linearGradient id="gradient${i}-${t}" gradientTransform="rotate(90)">
-      ${((r = n.gradientStops) == null ? void 0 : r.map(
+    <linearGradient id="gradient${a}-${t}" gradientTransform="rotate(90)">
+      ${((o = n.gradientStops) == null ? void 0 : o.map(
           (s) => `<stop offset="${s.offset}" stop-color="${t}" stop-opacity="${s.stopOpacity}" />`
         ).join("")) ?? ""}
       <stop offset="100%" stop-color="${t}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, l = (i, t) => {
-        var r;
+      }, l = (a, t) => {
+        var o;
         return `
-    <linearGradient id="gradient${i}-${t}" gradientTransform="rotate(90)">
+    <linearGradient id="gradient${a}-${t}" gradientTransform="rotate(90)">
 
-    ${((r = n.gradientStops) == null ? void 0 : r.map(
+    ${((o = n.gradientStops) == null ? void 0 : o.map(
           (s) => `
       <stop offset="${s.offset}" style="stop-color:var(${t});stop-opacity:${s.stopOpacity}" />
     `
@@ -88,67 +89,94 @@ const _ = ["id"], ee = {
     </linearGradient>
   `;
       };
-      return v.value.map(
-        (i, t) => i != null && i.includes("#") ? a(t, i) : l(t, i ?? $)
+      return g.value.map(
+        (a, t) => a != null && a.includes("#") ? i(t, a) : l(t, a ?? A)
       ).join("");
     });
-    function j(a) {
+    function P(i) {
       var l;
       return {
-        y: (i) => Number(i[a]),
-        color: ((l = n.categories[a]) == null ? void 0 : l.color) ?? $
+        y: (a) => Number(a[i]),
+        color: ((l = n.categories[i]) == null ? void 0 : l.color) ?? A
       };
     }
-    function N(a) {
-      return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
+    const w = d(() => Object.keys(n.categories).map(
+      (i) => (l) => Number(l[i])
+    )), X = d(() => {
+      const i = Object.keys(n.categories);
+      return i.map((l, a) => (t) => {
+        let o = 0;
+        for (let s = 0; s <= a; s++)
+          o += Number(t[i[s]]) || 0;
+        return o;
+      });
+    }), L = d(() => (i, l) => g.value[l] ?? A);
+    function E(i) {
+      return typeof window > "u" ? "" : C.value ? C.value.innerHTML : "";
     }
-    function P(a) {
-      return u.value = a, N();
+    function Y(i) {
+      return m.value = i, E();
     }
-    return (a, l) => {
-      var i;
+    return (i, l) => {
+      var a;
       return c(), f("div", {
-        style: x({
+        style: p({
           display: "flex",
-          flexDirection: V.value ? "column-reverse" : "column",
+          flexDirection: S.value ? "column-reverse" : "column",
           gap: "var(--vis-legend-spacing)"
         }),
-        id: (i = e.markerConfig) == null ? void 0 : i.id,
-        onClick: l[0] || (l[0] = (t) => B("click", t, u.value))
+        class: K({ "stacked-area-chart": e.stacked }),
+        id: (a = e.markerConfig) == null ? void 0 : a.id,
+        onClick: l[0] || (l[0] = (t) => j("click", t, m.value))
       }, [
-        y(o(H), {
+        u(r(_), {
           data: e.data,
           height: e.height,
           padding: e.padding,
-          "svg-defs": S.value + F.value,
+          "svg-defs": M.value + N.value,
           "y-domain": e.yDomain,
           "x-domain": e.xDomain
         }, {
-          default: R(() => [
-            e.hideTooltip ? d("", !0) : (c(), g(o(q), {
+          default: J(() => [
+            e.hideTooltip ? y("", !0) : (c(), k(r(ee), {
               key: 0,
-              "horizontal-placement": o(C).Right,
-              "vertical-placement": o(C).Top
+              "horizontal-placement": r($).Right,
+              "vertical-placement": r($).Top
             }, null, 8, ["horizontal-placement", "vertical-placement"])),
-            (c(!0), f(T, null, Y(Object.keys(n.categories), (t, r) => (c(), f(T, { key: t }, [
-              y(o(J), k({
-                x: (s, h) => h
-              }, { ref_for: !0 }, j(t), {
-                color: `url(#gradient${r}-${v.value[r]})`,
-                opacity: e.hideArea ? 0 : te,
-                "curve-type": e.curveType ?? o(A).MonotoneX
+            e.stacked ? (c(), f(T, { key: 1 }, [
+              u(r(B), {
+                x: (t, o) => o,
+                y: w.value,
+                color: L.value,
+                opacity: e.hideArea ? 0 : F,
+                "curve-type": e.curveType ?? r(h).MonotoneX
+              }, null, 8, ["x", "y", "color", "opacity", "curve-type"]),
+              u(r(D), {
+                x: (t, o) => o,
+                y: X.value,
+                color: L.value,
+                "curve-type": e.curveType ?? r(h).MonotoneX,
+                "line-width": e.lineWidth
+              }, null, 8, ["x", "y", "color", "curve-type", "line-width"])
+            ], 64)) : (c(!0), f(T, { key: 2 }, Q(Object.keys(n.categories), (t, o) => (c(), f(T, { key: t }, [
+              u(r(B), v({
+                x: (s, x) => x
+              }, { ref_for: !0 }, P(t), {
+                color: `url(#gradient${o}-${g.value[o]})`,
+                opacity: e.hideArea ? 0 : F,
+                "curve-type": e.curveType ?? r(h).MonotoneX
               }), null, 16, ["x", "color", "opacity", "curve-type"]),
-              y(o(K), {
-                x: (s, h) => h,
+              u(r(D), {
+                x: (s, x) => x,
                 y: (s) => s[t],
-                color: v.value[r],
-                "curve-type": e.curveType ?? o(A).MonotoneX,
+                color: g.value[o],
+                "curve-type": e.curveType ?? r(h).MonotoneX,
                 "line-width": e.lineWidth,
-                lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
+                lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
               }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
             ], 64))), 128)),
-            e.hideXAxis ? d("", !0) : (c(), g(o(D), k({
-              key: 1,
+            e.hideXAxis ? y("", !0) : (c(), k(r(O), v({
+              key: 3,
               type: "x",
               label: e.xLabel,
               "label-margin": 8,
@@ -160,8 +188,8 @@ const _ = ["id"], ee = {
               "tick-line": e.xTickLine,
               "min-max-ticks-only": e.minMaxTicksOnly
             }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-            e.hideYAxis ? d("", !0) : (c(), g(o(D), k({
-              key: 2,
+            e.hideYAxis ? y("", !0) : (c(), k(r(O), v({
+              key: 4,
               type: "y",
               label: e.yLabel,
               "num-ticks": e.yNumTicks,
@@ -170,19 +198,19 @@ const _ = ["id"], ee = {
               "domain-line": e.yDomainLine,
               "tick-line": e.yTickLine
             }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-            e.hideTooltip ? d("", !0) : (c(), g(o(Q), k({ key: 3 }, e.crosshairConfig, { template: P }), null, 16))
+            e.hideTooltip ? y("", !0) : (c(), k(r(te), v({ key: 5 }, e.crosshairConfig, { template: Y }), null, 16))
           ]),
           _: 1
         }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
-        n.hideLegend ? d("", !0) : (c(), f("div", {
+        n.hideLegend ? y("", !0) : (c(), f("div", {
           key: 0,
-          style: x({
+          style: p({
             display: "flex",
-            justifyContent: G.value
+            justifyContent: W.value
           })
         }, [
-          y(o(Z), {
-            style: x([
+          u(r(ie), {
+            style: p([
               n.legendStyle,
               "display: flex; gap: var(--vis-legend-spacing);"
             ]),
@@ -192,23 +220,23 @@ const _ = ["id"], ee = {
             }))
           }, null, 8, ["style", "items"])
         ], 4)),
-        X("div", ee, [
-          o(O).tooltip ? L(a.$slots, "tooltip", {
+        q("div", oe, [
+          r(G).tooltip ? b(i.$slots, "tooltip", {
             key: 0,
-            values: u.value
-          }) : u.value ? L(a.$slots, "fallback", { key: 1 }, () => [
-            y(U, {
-              data: u.value,
+            values: m.value
+          }) : m.value ? b(i.$slots, "fallback", { key: 1 }, () => [
+            u(I, {
+              data: m.value,
               categories: e.categories,
               "title-formatter": n.tooltipTitleFormatter,
               yFormatter: n.yFormatter
             }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-          ]) : d("", !0)
+          ]) : y("", !0)
         ], 512)
-      ], 12, _);
+      ], 14, ne);
     };
   }
 });
 export {
-  se as default
+  ye as default
 };

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

@@ -165,4 +165,9 @@ export interface AreaChartProps<T> {
      * The domain for the x-axis, specified as a tuple of two values.
      */
     xDomain?: [number | undefined, number | undefined];
+    /**
+     * If `true`, creates a stacked area chart where areas are stacked on top of each other.
+     * When false (default), areas are overlaid on top of each other.
+     */
+    stacked?: boolean;
 }

package/dist/components/BarChart/BarChart.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as k, createElementBlock as p, openBlock as d, normalizeStyle as L, createVNode as b, createCommentVNode as x, createElementVNode as j, unref as a, withCtx as q, createBlock as c, Fragment as $, renderList as I, mergeProps as C, renderSlot as F } from "vue";
+import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as k, createElementBlock as p, openBlock as d, normalizeStyle as L, createVNode as b, createCommentVNode as x, createElementVNode as j, unref as a, withCtx as $, createBlock as c, Fragment as q, renderList as I, mergeProps as C, renderSlot as F } from "vue";
 import { Orientation as u, StackedBar as U, GroupedBar as J } from "@unovis/ts";
 import { useStackedGrouped as K } from "./stackedGroupedUtils.js";
 import { VisXYContainer as Q, VisXYLabels as Z, VisTooltip as _, VisStackedBar as G, VisGroupedBar as ee, VisAxis as V, VisBulletLegend as te } from "@unovis/vue";
@@ -102,7 +102,7 @@ const ne = {
         padding: e.padding,
         height: e.height
       }, {
-        default: q(() => {
+        default: $(() => {
           var o, s, m, f;
           return [
             e.valueLabel ? (d(), c(a(Z), {
@@ -130,7 +130,7 @@ const ne = {
                 }
               }
             }, null, 8, ["triggers"]),
-            e.stackAndGrouped ? (d(!0), p($, { key: 1 }, I(y.value.states, (n) => (d(), c(a(G), {
+            e.stackAndGrouped ? (d(!0), p(q, { key: 1 }, I(y.value.states, (n) => (d(), c(a(G), {
               key: n,
               data: y.value.chartData,
               x: (r, v) => v + y.value.positions[n],

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as O, useSlots as S, useTemplateRef as D, ref as R, computed as p, createElementBlock as g, openBlock as l, normalizeStyle as d, createVNode as s, createCommentVNode as r, createElementVNode as w, unref as t, withCtx as K, createBlock as u, mergeProps as x, renderSlot as k } from "vue";
+import { defineComponent as O, useSlots as S, useTemplateRef as D, ref as R, computed as g, createElementBlock as p, openBlock as l, normalizeStyle as d, createVNode as s, createCommentVNode as r, createElementVNode as w, unref as t, withCtx as K, createBlock as u, mergeProps as x, renderSlot as k } from "vue";
 import { Scatter as M, Position as E } from "@unovis/ts";
-import { VisXYContainer as G, VisTooltip as W, VisScatter as j, VisAxis as L, VisBulletLegend as X } from "@unovis/vue";
-import { LegendPosition as Y } from "../../types.js";
-import $ from "../Tooltip.js";
-const q = {
+import { VisXYContainer as G, VisTooltip as W, VisScatter as $, VisAxis as L, VisBulletLegend as j } from "@unovis/vue";
+import { LegendPosition as X } from "../../types.js";
+import Y from "../Tooltip.js";
+const _ = {
   ref: "slotWrapper",
   class: "hidden"
 }, Q = /* @__PURE__ */ O({
@@ -28,7 +28,7 @@ const q = {
     xFormatter: {},
     yFormatter: {},
     tooltipTitleFormatter: {},
-    legendPosition: { default: Y.BottomCenter },
+    legendPosition: { default: X.BottomCenter },
     legendStyle: { default: void 0 },
     sizeOptions: {},
     xDomainLine: { type: Boolean, default: !0 },
@@ -70,8 +70,8 @@ const q = {
     }
     const z = {
       [M.selectors.point]: F
-    }, P = p(() => e.legendPosition.startsWith("top")), N = p(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
-    return (i, a) => (l(), g("div", {
+    }, P = g(() => e.legendPosition.startsWith("top")), N = g(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+    return (i, a) => (l(), p("div", {
       style: d({
         display: "flex",
         flexDirection: P.value ? "column-reverse" : "column",
@@ -90,7 +90,7 @@ const q = {
             key: 0,
             triggers: z
           })),
-          s(t(j), {
+          s(t($), {
             x: t(v),
             y: t(b),
             color: A,
@@ -125,14 +125,14 @@ const q = {
         ]),
         _: 1
       }, 8, ["data", "height", "padding"]),
-      e.hideLegend ? r("", !0) : (l(), g("div", {
+      e.hideLegend ? r("", !0) : (l(), p("div", {
         key: 0,
         style: d({
           display: "flex",
           justifyContent: N.value
         })
       }, [
-        s(t(X), {
+        s(t(j), {
           class: "bulletLegendOverrides",
           style: d([
             e.legendStyle,
@@ -144,12 +144,12 @@ const q = {
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      w("div", q, [
+      w("div", _, [
         t(T).tooltip ? k(i.$slots, "tooltip", {
           key: 0,
           values: n.value
         }) : n.value ? k(i.$slots, "fallback", { key: 1 }, () => [
-          s($, {
+          s(Y, {
             data: n.value,
             categories: e.categories || {},
             "title-formatter": e.tooltipTitleFormatter,

package/dist/components/DonutChart/DonutChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as f, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
+import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as p, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
 import { Donut as N } from "@unovis/ts";
-import { DonutType as j } from "./types.js";
-import z from "../Tooltip.js";
-import { VisSingleContainer as H, VisTooltip as $, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
+import { DonutType as $ } from "./types.js";
+import j from "../Tooltip.js";
+import { VisSingleContainer as z, VisTooltip as H, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
 import { LegendPosition as O } from "../../types.js";
 const R = { style: {
   position: "absolute",
@@ -12,7 +12,7 @@ const R = { style: {
 } }, M = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, Q = /* @__PURE__ */ B({
+}, K = /* @__PURE__ */ B({
   __name: "DonutChart",
   props: {
     type: {},
@@ -29,7 +29,7 @@ const R = { style: {
   },
   emits: ["click"],
   setup(l, { emit: h }) {
-    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === j.Half;
+    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === $.Half;
     function x(e) {
       const o = Object.values(t.categories)[e.index].name;
       return i.value = {
@@ -40,12 +40,12 @@ const R = { style: {
     function A() {
       return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
     }
-    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, p = s(() => Object.values(t.categories)), w = (e, o) => {
-      const n = p.value[o];
+    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, f = s(() => Object.values(t.categories)), w = (e, o) => {
+      const n = f.value[o];
       if (n)
         return g(n.color);
     };
-    return (e, o) => (m(), f("div", {
+    return (e, o) => (m(), p("div", {
       style: d({
         display: "flex",
         flexDirection: L.value ? "column-reverse" : "column",
@@ -53,13 +53,13 @@ const R = { style: {
       }),
       onClick: o[0] || (o[0] = (n) => C("click", n, i.value))
     }, [
-      a(r(H), {
+      a(r(z), {
         data: l.data,
         height: l.height,
         margin: {}
       }, {
         default: b(() => [
-          a(r($), {
+          a(r(H), {
             "horizontal-shift": 20,
             "vertical-shift": 20,
             triggers: {
@@ -80,7 +80,7 @@ const R = { style: {
         ]),
         _: 3
       }, 8, ["data", "height"]),
-      t.hideLegend ? v("", !0) : (m(), f("div", {
+      t.hideLegend ? v("", !0) : (m(), p("div", {
         key: 0,
         style: d({
           display: "flex",
@@ -92,7 +92,7 @@ const R = { style: {
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: p.value.map((n) => ({
+          items: f.value.map((n) => ({
             ...n,
             color: g(n.color)
           }))
@@ -103,7 +103,7 @@ const R = { style: {
           key: 0,
           values: i.value
         }) : i.value ? u(e.$slots, "fallback", { key: 1 }, () => [
-          a(z, {
+          a(j, {
             data: i.value,
             categories: t.categories,
             "title-formatter": t.tooltipTitleFormatter
@@ -114,5 +114,5 @@ const R = { style: {
   }
 });
 export {
-  Q as default
+  K as default
 };

package/dist/components/GanttChart/GanttChart.js

@@ -2,8 +2,8 @@ import { defineComponent as B, useSlots as V, useTemplateRef as w, ref as A, com
 import { Timeline as x } from "@unovis/ts";
 import { dateFormatter as S } from "../../utils.js";
 import N from "../Tooltip.js";
-import { VisXYContainer as j, VisTimeline as O, VisTooltip as D, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
-import { LegendPosition as $ } from "../../types.js";
+import { VisXYContainer as j, VisTimeline as O, VisTooltip as $, VisAxis as D, VisBulletLegend as G } from "@unovis/vue";
+import { LegendPosition as M } from "../../types.js";
 const I = /* @__PURE__ */ B({
   __name: "GanttChart",
   props: {
@@ -23,7 +23,7 @@ const I = /* @__PURE__ */ B({
     crosshairConfig: {},
     lineWidth: { default: 12 },
     rowHeight: { default: 24 },
-    legendPosition: { default: $.TopRight },
+    legendPosition: { default: M.TopRight },
     legendStyle: {},
     hideLegend: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -80,7 +80,7 @@ const I = /* @__PURE__ */ B({
             showLabels: e.showLabels,
             onClick: L
           }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
-          n(o(D), {
+          n(o($), {
             triggers: {
               [o(x).selectors.label]: (t) => {
                 var m;
@@ -88,7 +88,7 @@ const I = /* @__PURE__ */ B({
               }
             }
           }, null, 8, ["triggers"]),
-          n(o(G), P({
+          n(o(D), P({
             type: "x",
             tickFormat: i.xTickFormat || o(S),
             numTicks: i.xNumTicks,
@@ -106,7 +106,7 @@ const I = /* @__PURE__ */ B({
           justifyContent: b.value
         })
       }, [
-        n(o(M), {
+        n(o(G), {
           style: d([
             e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"

package/dist/components/LineChart/LineChart.js

@@ -36,15 +36,16 @@ const g = /* @__PURE__ */ n({
     xAxisConfig: {},
     yAxisConfig: {},
     yDomain: {},
-    xDomain: {}
+    xDomain: {},
+    stacked: { type: Boolean }
   },
   setup(o) {
-    const i = o;
-    return a(), (e, h) => (l(), r(x, p(i, { "hide-area": !0 }), s({ _: 2 }, [
+    const t = o;
+    return a(), (e, B) => (l(), r(x, p(t, { "hide-area": !0 }), s({ _: 2 }, [
       e.$slots.tooltip ? {
         name: "tooltip",
-        fn: y((t) => [
-          c(e.$slots, "tooltip", m(d(t)))
+        fn: y((i) => [
+          c(e.$slots, "tooltip", m(d(i)))
         ]),
         key: "0"
       } : void 0

package/dist/components/Tooltip.js

@@ -1,7 +1,74 @@
-import o from "./Tooltip2.js";
-/* empty css         */
-import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2385aa2d"]]);
+import { defineComponent as F, computed as m, createElementBlock as n, openBlock as s, createElementVNode as r, toDisplayString as c, Fragment as p, renderList as z, normalizeStyle as w } from "vue";
+import { getFirstPropertyValue as B } from "../utils.js";
+const C = /* @__PURE__ */ F({
+  __name: "Tooltip",
+  props: {
+    data: {},
+    categories: {},
+    titleFormatter: { type: Function },
+    yFormatter: { type: Function }
+  },
+  setup(l) {
+    const t = l, v = m(
+      () => t.titleFormatter ? t.titleFormatter(t.data) : B(t.data)
+    ), d = ["_index", "_stacked", "_ending"], g = m(() => Object.entries(t.data ?? []).filter(
+      ([e, a]) => !d.includes(e) && Object.keys(t.categories).includes(e)
+    )), u = {
+      display: "flex",
+      flexDirection: "column"
+    }, f = {
+      color: "var(--vis-tooltip-title-color, #000)",
+      textTransform: "var(--vis-tooltip-title-text-transform, capitalize)",
+      borderBottom: "var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb)",
+      padding: "var(--vis-tooltip-title-padding, 0.75rem 0.75rem 0.5rem 0.75rem)",
+      margin: "var(--vis-tooltip-title-margin, 0 0 0.25rem 0)",
+      fontSize: "var(--vis-tooltip-title-font-size, 0.875rem)",
+      lineHeight: "var(--vis-tooltip-title-line-height, 100%)",
+      fontWeight: "var(--vis-tooltip-title-font-weight, 600)"
+    }, y = {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto",
+      alignItems: "center",
+      gap: "var(--vis-tooltip-content-gap, 0.25rem 0.5rem)",
+      padding: "var(--vis-tooltip-content-padding, 0 0.75rem 0.5rem 0.75rem)"
+    }, h = {
+      fontWeight: "var(--vis-tooltip-label-font-weight, 400)",
+      fontSize: "var(--vis-tooltip-label-font-size, 0.875rem)",
+      color: "var(--vis-tooltip-label-color, inherit)",
+      margin: "var(--vis-tooltip-label-margin, 0 1rem 0 0)",
+      whiteSpace: "nowrap"
+    }, b = {
+      fontSize: "var(--vis-tooltip-value-font-size, 0.875rem)",
+      fontWeight: "var(--vis-tooltip-value-font-weight, 600)",
+      color: "var(--vis-tooltip-value-color, inherit)",
+      textAlign: "right",
+      fontVariantNumeric: "tabular-nums"
+    }, x = (e, a) => {
+      var o, i;
+      return {
+        width: "8px",
+        height: "8px",
+        aspectRatio: "1",
+        borderRadius: "var(--vis-tooltip-dot-border-radius, 4px)",
+        margin: "var(--vis-tooltip-dot-margin, 0)",
+        flexShrink: "0",
+        backgroundColor: typeof ((o = t.categories[e]) == null ? void 0 : o.color) == "string" && ((i = t.categories[e]) != null && i.color) ? t.categories[e].color : `var(--vis-color${a})`
+      };
+    };
+    return (e, a) => (s(), n("div", { style: u }, [
+      r("div", { style: f }, c(v.value), 1),
+      r("div", { style: y }, [
+        (s(!0), n(p, null, z(g.value, ([o, i], S) => (s(), n(p, { key: o }, [
+          r("span", {
+            style: w(x(o, S))
+          }, null, 4),
+          r("span", { style: h }, c(l.categories[o].name), 1),
+          r("span", { style: b }, c(l.yFormatter ? l.yFormatter(i) : i), 1)
+        ], 64))), 128))
+      ])
+    ]));
+  }
+});
 export {
-  m as default
+  C as default
 };

package/dist/components/Tooltip2.js

@@ -1,42 +1,4 @@
-import { defineComponent as y, computed as m, createElementBlock as r, openBlock as a, createElementVNode as i, toDisplayString as l, Fragment as _, renderList as f, normalizeStyle as h } from "vue";
-import { getFirstPropertyValue as b } from "../utils.js";
-const x = { class: "vis-tooltip" }, B = { class: "vis-tooltip-title" }, E = { class: "vis-tooltip-content" }, j = { class: "vis-tooltip-label" }, k = { class: "vis-tooltip-value" }, O = /* @__PURE__ */ y({
-  __name: "Tooltip",
-  props: {
-    data: {},
-    categories: {},
-    titleFormatter: { type: Function },
-    yFormatter: { type: Function }
-  },
-  setup(t) {
-    const e = t, u = m(
-      () => e.titleFormatter ? e.titleFormatter(e.data) : b(e.data)
-    ), v = ["_index", "_stacked", "_ending"], p = m(() => Object.entries(e.data ?? []).filter(
-      ([s, g]) => !v.includes(s) && Object.keys(e.categories).includes(s)
-    ));
-    return (s, g) => (a(), r("div", x, [
-      i("div", B, l(u.value), 1),
-      i("div", E, [
-        (a(!0), r(_, null, f(p.value, ([o, n], F) => {
-          var c, d;
-          return a(), r("div", {
-            key: o,
-            class: "vis-tooltip-entry"
-          }, [
-            i("span", {
-              class: "vis-tooltip-dot",
-              style: h({
-                backgroundColor: typeof ((c = t.categories[o]) == null ? void 0 : c.color) == "string" && ((d = t.categories[o]) != null && d.color) ? t.categories[o].color : `var(--vis-color${F})`
-              })
-            }, null, 4),
-            i("span", j, l(t.categories[o].name), 1),
-            i("span", k, l(t.yFormatter ? t.yFormatter(n) : n), 1)
-          ]);
-        }), 128))
-      ])
-    ]));
-  }
-});
+import f from "./Tooltip.js";
 export {
-  O as default
+  f as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "type": "module",
   "files": [
     "dist"

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -1,9 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};

package/dist/index.js.css

@@ -1 +0,0 @@
-.vis-tooltip[data-v-2385aa2d]{display:flex;flex-direction:column}.vis-tooltip-title[data-v-2385aa2d]{color:var(--vis-tooltip-title-color, #000);text-transform:var(--vis-tooltip-title-text-transform, capitalize);border-bottom:var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb);padding:var(--vis-tooltip-title-padding, .75rem .75rem .5rem .75rem);margin:var(--vis-tooltip-title-margin, 0 0 .25rem 0);font-size:var(--vis-tooltip-title-font-size, .875rem);line-height:var(--vis-tooltip-title-line-height, 100%);font-weight:var(--vis-tooltip-title-font-weight, 600)}.vis-tooltip-content[data-v-2385aa2d]{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--vis-tooltip-content-gap, .25rem .5rem);padding:var(--vis-tooltip-content-padding, 0 .75rem)}.vis-tooltip-entry[data-v-2385aa2d]{display:contents}.vis-tooltip-dot[data-v-2385aa2d]{width:8px;height:8px;aspect-ratio:1;border-radius:var(--vis-tooltip-dot-border-radius, 4px);margin:var(--vis-tooltip-dot-margin, 0);flex-shrink:0}.vis-tooltip-label[data-v-2385aa2d]{font-weight:var(--vis-tooltip-label-font-weight, 400);font-size:var(--vis-tooltip-label-font-size, .875rem);color:var(--vis-tooltip-label-color, inherit);margin:var(--vis-tooltip-label-margin, 0 1rem 0 0);white-space:nowrap}.vis-tooltip-value[data-v-2385aa2d]{font-size:var(--vis-tooltip-value-font-size, .875rem);font-weight:var(--vis-tooltip-value-font-weight, 600);color:var(--vis-tooltip-value-color, inherit);text-align:right;font-variant-numeric:tabular-nums}