vue-chrts 2.0.0-beta.4 → 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 $, 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, D = "#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 ?? D)
+      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) ?? D
+        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($), 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($), 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/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/package.json

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