vue-data-ui 2.3.74 → 2.3.75

package/dist/{vue-ui-sparkstackbar-C3GMC1eW.js → vue-ui-sparkstackbar-J1YowQmP.js}

@@ -1,12 +1,12 @@
-import { computed as p, ref as m, onMounted as T, openBlock as n, createElementBlock as r, normalizeStyle as g, createElementVNode as u, toDisplayString as k, createCommentVNode as h, unref as b, Fragment as D, renderList as z, normalizeClass as A, createBlock as q } from "vue";
-import { u as H, c as j, t as X, a as J, p as d, b as K, d as P, o as Q, e as E, g as R, f as I, X as W, v as Y, w as Z, i as ee } from "./index-C8SH0f2u.js";
-import { u as U } from "./useNestedProp-lS_T5lM3.js";
-import te from "./vue-ui-skeleton-B4eWLjH3.js";
-import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-color"], re = ["stop-color"], ue = {
+import { computed as p, ref as m, watch as I, onMounted as X, openBlock as n, createElementBlock as u, normalizeStyle as g, createElementVNode as c, toDisplayString as k, createCommentVNode as h, unref as _, Fragment as z, renderList as A, normalizeClass as P, createBlock as J } from "vue";
+import { u as K, c as U, t as Q, a as R, p as i, d as w, b as W, o as Y, e as O, g as Z, f as V, X as ee, v as te, w as le, i as ae } from "./index-Cm4Iry5c.js";
+import { u as G } from "./useNestedProp-CurQIHTa.js";
+import oe from "./vue-ui-skeleton-C1oUnz7R.js";
+import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ne = ["xmlns", "viewBox"], re = ["id"], ue = ["stop-color"], ie = ["stop-color"], ce = ["stop-color"], de = {
   id: "stackPill",
   clipPathUnits: "objectBoundingBox"
-}, ie = ["fill"], ce = { "clip-path": "url(#stackPill)" }, de = ["height", "width", "fill"], ve = ["onClick", "x", "width", "height", "fill", "stroke"], ge = ["onClick"], pe = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, he = ["height", "width"], ye = ["fill"], fe = {
+}, ve = ["fill"], ge = { "clip-path": "url(#stackPill)" }, pe = ["height", "width", "fill"], he = ["onClick", "x", "width", "height", "fill", "stroke"], fe = ["onClick"], ye = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, me = ["height", "width"], ke = ["fill"], _e = {
   __name: "vue-ui-sparkstackbar",
   props: {
     config: {
@@ -23,76 +23,92 @@ const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-c
     }
   },
   emits: ["selectDatapoint"],
-  setup(O, { emit: V }) {
-    const i = O, { vue_ui_sparkstackbar: G } = H(), L = p(() => !!i.dataset && i.dataset.length), N = m(j()), e = p(() => {
-      const t = U({
-        userConfig: i.config,
-        defaultConfig: G
+  setup(M, { emit: T }) {
+    const r = M, { vue_ui_sparkstackbar: q } = K(), L = p(() => !!r.dataset && r.dataset.length), N = m(U()), e = p({
+      get: () => B(),
+      set: (t) => t
+    });
+    function B() {
+      const t = G({
+        userConfig: r.config,
+        defaultConfig: q
       });
       return t.theme ? {
-        ...U({
-          userConfig: X.vue_ui_sparkstackbar[t.theme] || i.config,
+        ...G({
+          userConfig: Q.vue_ui_sparkstackbar[t.theme] || r.config,
           defaultConfig: t
         }),
-        customPalette: J[t.theme] || d
+        customPalette: R[t.theme] || i
       } : t;
-    }), x = p(() => K(e.value.customPalette)), y = m(i.dataset.map((t, a) => ({
+    }
+    I(() => r.config, (t) => {
+      e.value = B(), F();
+    }, { deep: !0 }), I(() => r.dataset, (t) => {
+      f.value = r.dataset.map((a, l) => ({
+        ...a,
+        color: a.color ? w(a.color) : b.value[l] || i[l] || i[l % i.length]
+      }));
+    }, { deep: !0 });
+    const b = p(() => W(e.value.customPalette)), f = m(r.dataset.map((t, a) => ({
       ...t,
       value: e.value.style.animation.show ? 0 : t.value || 0,
-      color: t.color ? P(t.color) : x.value[a] || d[a] || d[a % d.length]
-    }))), _ = m(!0);
-    T(() => {
-      if (Q(i.dataset) ? E({
+      color: t.color ? w(t.color) : b.value[a] || i[a] || i[a % i.length]
+    }))), x = m(!0);
+    X(() => {
+      if (F(), e.value.style.animation.show) {
+        let D = function() {
+          o += l / t, o < l ? (f.value = f.value.map((s, d) => ({
+            ...s,
+            value: s.value += a[d],
+            color: s.color ? w(s.color) : b.value[d] || i[d] || i[d % i.length]
+          })), requestAnimationFrame(D)) : (x.value = !1, f.value = r.dataset.map((s, d) => ({
+            ...s,
+            value: s.value || 0,
+            color: s.color ? w(s.color) : b.value[d] || i[d] || i[d % i.length],
+            id: U()
+          })));
+        };
+        const t = e.value.style.animation.animationFrames, a = r.dataset.map((s, d) => s.value / t), l = r.dataset.map((s) => s.value || 0).reduce((s, d) => s + d, 0);
+        let o = 0;
+        x.value = !0, D();
+      }
+    });
+    function F() {
+      Y(r.dataset) ? O({
         componentName: "VueUiSparkStackbar",
         type: "dataset"
-      }) : i.dataset.forEach((t, a) => {
-        R({
+      }) : r.dataset.forEach((t, a) => {
+        Z({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((l) => {
-          E({
+          O({
             componentName: "VueUiSparkStackbar",
             type: "datasetSerieAttribute",
             property: l,
             index: a
           });
         });
-      }), e.value.style.animation.show) {
-        let S = function() {
-          o += l / t, o < l ? (y.value = y.value.map((s, c) => ({
-            ...s,
-            value: s.value += a[c],
-            color: s.color ? P(s.color) : x.value[c] || d[c] || d[c % d.length]
-          })), requestAnimationFrame(S)) : (_.value = !1, y.value = i.dataset.map((s, c) => ({
-            ...s,
-            value: s.value || 0,
-            color: s.color ? P(s.color) : x.value[c] || d[c] || d[c % d.length],
-            id: j()
-          })));
-        };
-        const t = e.value.style.animation.animationFrames, a = i.dataset.map((s, c) => s.value / t), l = i.dataset.map((s) => s.value || 0).reduce((s, c) => s + c, 0);
-        let o = 0;
-        _.value = !0, S();
-      }
-    });
-    const f = m({
+      });
+    }
+    const y = m({
       width: 500,
       height: 16
-    }), v = m([]), w = p(() => i.dataset.map((t) => t.value || 0).filter((t, a) => !v.value.includes(a)).reduce((t, a) => t + a, 0)), B = p(() => y.value.map((t, a) => ({
+    }), v = m([]), C = p(() => r.dataset.map((t) => t.value || 0).filter((t, a) => !v.value.includes(a)).reduce((t, a) => t + a, 0)), j = p(() => f.value.map((t, a) => ({
       ...t,
       value: t.value || 0,
-      proportion: (t.value || 0) / w.value,
-      width: (t.value || 0) / w.value * f.value.width,
-      proportionLabel: I({
-        v: (t.value || 0) / w.value * 100,
+      proportion: (t.value || 0) / C.value,
+      width: (t.value || 0) / C.value * y.value.width,
+      proportionLabel: V({
+        v: (t.value || 0) / C.value * 100,
         s: "%",
         r: e.value.style.legend.percentage.rounding
       })
-    }))), $ = p(() => B.value.filter((t, a) => !v.value.includes(a)));
-    function M(t) {
-      v.value.includes(t) ? v.value = v.value.filter((a) => a !== t) : v.value.length < y.value.length - 1 && v.value.push(t);
+    }))), $ = p(() => j.value.filter((t, a) => !v.value.includes(a)));
+    function H(t) {
+      v.value.includes(t) ? v.value = v.value.filter((a) => a !== t) : v.value.length < f.value.length - 1 && v.value.push(t);
     }
-    const C = p(() => {
+    const S = p(() => {
       let t = 0;
       const a = [];
       for (let l = 0; l < $.value.length; l += 1)
@@ -102,51 +118,51 @@ const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-c
         }), t += $.value[l].width;
       return a;
     });
-    function F(t, a) {
-      V("selectDatapoint", { datapoint: t, index: a });
+    function E(t, a) {
+      T("selectDatapoint", { datapoint: t, index: a });
     }
-    return (t, a) => (n(), r("div", {
+    return (t, a) => (n(), u("div", {
       style: g(`width:100%; background:${e.value.style.backgroundColor}`)
     }, [
-      e.value.style.title.text ? (n(), r("div", {
+      e.value.style.title.text ? (n(), u("div", {
         key: 0,
         style: g(`width:calc(100% - 12px);background:${e.value.style.backgroundColor};margin:0 auto;margin:${e.value.style.title.margin};padding: 0 6px;text-align:${e.value.style.title.textAlign}`)
       }, [
-        u("div", {
+        c("div", {
           style: g(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
         }, k(e.value.style.title.text), 5),
-        e.value.style.title.subtitle.text ? (n(), r("div", {
+        e.value.style.title.subtitle.text ? (n(), u("div", {
           key: 0,
           style: g(`font-size:${e.value.style.title.subtitle.fontSize}px;color:${e.value.style.title.subtitle.color};font-weight:${e.value.style.title.subtitle.bold ? "bold" : "normal"}`)
         }, k(e.value.style.title.subtitle.text), 5)) : h("", !0)
       ], 4)) : h("", !0),
-      L.value ? (n(), r("svg", {
+      L.value ? (n(), u("svg", {
         key: 1,
-        xmlns: b(W),
+        xmlns: _(ee),
         width: "100%",
-        viewBox: `0 0 ${f.value.width} ${f.value.height}`
+        viewBox: `0 0 ${y.value.width} ${y.value.height}`
       }, [
-        u("defs", null, [
-          (n(!0), r(D, null, z(C.value, (l, o) => (n(), r("linearGradient", {
+        c("defs", null, [
+          (n(!0), u(z, null, A(S.value, (l, o) => (n(), u("linearGradient", {
             key: `stack_gradient_${o}`,
             gradientTransform: "rotate(90)",
             id: `stack_gradient_${o}_${N.value}`
           }, [
-            u("stop", {
+            c("stop", {
               offset: "0%",
               "stop-color": l.color
-            }, null, 8, se),
-            u("stop", {
+            }, null, 8, ue),
+            c("stop", {
               offset: "50%",
-              "stop-color": `${b(Y)(l.color, 0.05)}${b(Z)[100 - e.value.style.bar.gradient.intensity]}`
-            }, null, 8, ne),
-            u("stop", {
+              "stop-color": `${_(te)(l.color, 0.05)}${_(le)[100 - e.value.style.bar.gradient.intensity]}`
+            }, null, 8, ie),
+            c("stop", {
               offset: "100%",
               "stop-color": l.color
-            }, null, 8, re)
-          ], 8, oe))), 128)),
-          u("clipPath", ue, [
-            u("rect", {
+            }, null, 8, ce)
+          ], 8, re))), 128)),
+          c("clipPath", de, [
+            c("rect", {
               x: "0.005",
               y: "-2",
               width: "0.99",
@@ -154,33 +170,33 @@ const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-c
               rx: "3",
               ry: "3",
               fill: e.value.style.backgroundColor
-            }, null, 8, ie)
+            }, null, 8, ve)
           ])
         ]),
-        u("g", ce, [
-          u("rect", {
+        c("g", ge, [
+          c("rect", {
             x: 0,
             y: 0,
-            height: f.value.height,
-            width: C.value.map((l) => l.width).reduce((l, o) => l + o, 0),
+            height: y.value.height,
+            width: S.value.map((l) => l.width).reduce((l, o) => l + o, 0),
             fill: e.value.style.bar.gradient.underlayerColor,
-            class: A({ animated: !_.value })
-          }, null, 10, de),
-          (n(!0), r(D, null, z(C.value, (l, o) => (n(), r("rect", {
+            class: P({ animated: !x.value })
+          }, null, 10, pe),
+          (n(!0), u(z, null, A(S.value, (l, o) => (n(), u("rect", {
             key: `stack_${o}`,
-            onClick: () => F(l, o),
+            onClick: () => E(l, o),
             x: l.start,
             y: 0,
             width: l.width,
-            height: f.value.height,
+            height: y.value.height,
             fill: e.value.style.bar.gradient.show ? `url(#stack_gradient_${o}_${N.value})` : l.color,
             stroke: e.value.style.backgroundColor,
             "stroke-linecap": "round",
-            class: A({ animated: !_.value })
-          }, null, 10, ve))), 128))
+            class: P({ animated: !x.value })
+          }, null, 10, he))), 128))
         ])
-      ], 8, ae)) : h("", !0),
-      L.value ? h("", !0) : (n(), q(te, {
+      ], 8, ne)) : h("", !0),
+      L.value ? h("", !0) : (n(), J(oe, {
         key: 2,
         config: {
           type: "sparkStackbar",
@@ -192,45 +208,45 @@ const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-c
           }
         }
       }, null, 8, ["config"])),
-      e.value.style.legend.show ? (n(), r("div", {
+      e.value.style.legend.show ? (n(), u("div", {
         key: 3,
         style: g(`background:${e.value.style.backgroundColor};margin:0 auto;margin:${e.value.style.legend.margin};justify-content:${e.value.style.legend.textAlign === "left" ? "flex-start" : e.value.style.legend.textAlign === "right" ? "flex-end" : "center"}`),
         class: "vue-ui-sparkstackbar-legend"
       }, [
-        (n(!0), r(D, null, z(B.value, (l, o) => (n(), r("div", {
+        (n(!0), u(z, null, A(j.value, (l, o) => (n(), u("div", {
           style: g(`font-size:${e.value.style.legend.fontSize}px;`),
-          class: A({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": v.value.includes(o) }),
-          onClick: (S) => {
-            M(o), F(l, o);
+          class: P({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": v.value.includes(o) }),
+          onClick: (D) => {
+            H(o), E(l, o);
           }
         }, [
-          u("div", pe, [
-            (n(), r("svg", {
+          c("div", ye, [
+            (n(), u("svg", {
               height: `${e.value.style.legend.fontSize}px`,
               width: `${e.value.style.legend.fontSize}px`,
               viewBox: "0 0 10 10"
             }, [
-              u("circle", {
+              c("circle", {
                 cx: 5,
                 cy: 5,
                 r: 5,
                 fill: l.color
-              }, null, 8, ye)
-            ], 8, he)),
-            u("span", {
+              }, null, 8, ke)
+            ], 8, me)),
+            c("span", {
               style: g(`color:${e.value.style.legend.name.color}; font-weight:${e.value.style.legend.name.bold ? "bold" : "normal"}`)
             }, k(l.name), 5),
-            e.value.style.legend.percentage.show ? (n(), r("span", {
+            e.value.style.legend.percentage.show ? (n(), u("span", {
               key: 0,
               style: g(`font-weight:${e.value.style.legend.percentage.bold ? "bold" : "normal"};color:${e.value.style.legend.percentage.color}`)
             }, k(v.value.includes(o) ? " - " : l.proportionLabel), 5)) : h("", !0),
-            e.value.style.legend.value.show ? (n(), r("span", {
+            e.value.style.legend.value.show ? (n(), u("span", {
               key: 1,
               style: g(`font-weight:${e.value.style.legend.value.bold ? "bold" : "normal"};color:${e.value.style.legend.value.color}`)
-            }, " (" + k(b(ee)(
+            }, " (" + k(_(ae)(
               e.value.style.legend.value.formatter,
               l.value,
-              b(I)({
+              _(V)({
                 p: e.value.style.legend.value.prefix,
                 v: l.value,
                 s: e.value.style.legend.value.suffix,
@@ -239,11 +255,11 @@ const ae = ["xmlns", "viewBox"], oe = ["id"], se = ["stop-color"], ne = ["stop-c
               { datapoint: l, seriesIndex: o }
             )) + ") ", 5)) : h("", !0)
           ])
-        ], 14, ge))), 256))
+        ], 14, fe))), 256))
       ], 4)) : h("", !0)
     ], 4));
   }
-}, we = /* @__PURE__ */ le(fe, [["__scopeId", "data-v-86f11bbc"]]);
+}, Se = /* @__PURE__ */ se(_e, [["__scopeId", "data-v-27e88856"]]);
 export {
-  we as default
+  Se as default
 };