vue-data-ui 2.2.90 → 2.2.91

package/dist/vue-ui-sparkstackbar-DB9VQXlc.js

@@ -0,0 +1,244 @@
+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 { _ as H, e as F, f as X, p as d, g as J, h as P, i as K, j as E, k as Q, n as U, X as R, x as W, o as Y } from "./data-table-d-VcuH-r.js";
+import { t as Z } from "./themes-lgjsYHsH.js";
+import { u as I } from "./title-BF-9Qcni.js";
+import { u as ee, S as te } from "./vue-ui-3d-bar-DW7kGJSz.js";
+const le = ["xmlns", "viewBox"], ae = ["id"], oe = ["stop-color"], se = ["stop-color"], ne = ["stop-color"], re = {
+  id: "stackPill",
+  clipPathUnits: "objectBoundingBox"
+}, ue = ["fill"], ie = { "clip-path": "url(#stackPill)" }, ce = ["height", "width", "fill"], de = ["onClick", "x", "width", "height", "fill", "stroke"], ve = ["onClick"], ge = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, pe = ["height", "width"], he = ["fill"], ye = {
+  __name: "vue-ui-sparkstackbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(O, { emit: V }) {
+    const i = O, { vue_ui_sparkstackbar: G } = ee(), N = p(() => !!i.dataset && i.dataset.length), B = m(F()), e = p(() => {
+      const t = I({
+        userConfig: i.config,
+        defaultConfig: G
+      });
+      return t.theme ? {
+        ...I({
+          userConfig: Z.vue_ui_sparkstackbar[t.theme] || i.config,
+          defaultConfig: t
+        }),
+        customPalette: X[t.theme] || d
+      } : t;
+    }), x = p(() => J(e.value.customPalette)), y = m(i.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 (K(i.dataset) ? E({
+        componentName: "VueUiSparkStackbar",
+        type: "dataset"
+      }) : i.dataset.forEach((t, a) => {
+        Q({
+          datasetObject: t,
+          requiredAttributes: ["name", "value"]
+        }).forEach((l) => {
+          E({
+            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: F()
+          })));
+        };
+        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({
+      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)), L = p(() => y.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: U({
+        v: (t.value || 0) / w.value * 100,
+        s: "%",
+        r: e.value.style.legend.percentage.rounding
+      })
+    }))), $ = p(() => L.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);
+    }
+    const C = p(() => {
+      let t = 0;
+      const a = [];
+      for (let l = 0; l < $.value.length; l += 1)
+        a.push({
+          ...$.value[l],
+          start: t
+        }), t += $.value[l].width;
+      return a;
+    });
+    function j(t, a) {
+      V("selectDatapoint", { datapoint: t, index: a });
+    }
+    return (t, a) => (n(), r("div", {
+      style: g(`width:100%; background:${e.value.style.backgroundColor}`)
+    }, [
+      e.value.style.title.text ? (n(), r("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", {
+          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", {
+          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),
+      N.value ? (n(), r("svg", {
+        key: 1,
+        xmlns: b(R),
+        width: "100%",
+        viewBox: `0 0 ${f.value.width} ${f.value.height}`
+      }, [
+        u("defs", null, [
+          (n(!0), r(D, null, z(C.value, (l, o) => (n(), r("linearGradient", {
+            key: `stack_gradient_${o}`,
+            gradientTransform: "rotate(90)",
+            id: `stack_gradient_${o}_${B.value}`
+          }, [
+            u("stop", {
+              offset: "0%",
+              "stop-color": l.color
+            }, null, 8, oe),
+            u("stop", {
+              offset: "50%",
+              "stop-color": `${b(W)(l.color, 0.05)}${b(Y)[100 - e.value.style.bar.gradient.intensity]}`
+            }, null, 8, se),
+            u("stop", {
+              offset: "100%",
+              "stop-color": l.color
+            }, null, 8, ne)
+          ], 8, ae))), 128)),
+          u("clipPath", re, [
+            u("rect", {
+              x: "0.005",
+              y: "-2",
+              width: "0.99",
+              height: "5",
+              rx: "3",
+              ry: "3",
+              fill: e.value.style.backgroundColor
+            }, null, 8, ue)
+          ])
+        ]),
+        u("g", ie, [
+          u("rect", {
+            x: 0,
+            y: 0,
+            height: f.value.height,
+            width: C.value.map((l) => l.width).reduce((l, o) => l + o, 0),
+            fill: e.value.style.bar.gradient.underlayerColor,
+            class: A({ animated: !_.value })
+          }, null, 10, ce),
+          (n(!0), r(D, null, z(C.value, (l, o) => (n(), r("rect", {
+            key: `stack_${o}`,
+            onClick: () => j(l, o),
+            x: l.start,
+            y: 0,
+            width: l.width,
+            height: f.value.height,
+            fill: e.value.style.bar.gradient.show ? `url(#stack_gradient_${o}_${B.value})` : l.color,
+            stroke: e.value.style.backgroundColor,
+            "stroke-linecap": "round",
+            class: A({ animated: !_.value })
+          }, null, 10, de))), 128))
+        ])
+      ], 8, le)) : h("", !0),
+      N.value ? h("", !0) : (n(), q(te, {
+        key: 2,
+        config: {
+          type: "sparkStackbar",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            sparkStackbar: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      e.value.style.legend.show ? (n(), r("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(L.value, (l, o) => (n(), r("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), j(l, o);
+          }
+        }, [
+          u("div", ge, [
+            (n(), r("svg", {
+              height: `${e.value.style.legend.fontSize}px`,
+              width: `${e.value.style.legend.fontSize}px`,
+              viewBox: "0 0 10 10"
+            }, [
+              u("circle", {
+                cx: 5,
+                cy: 5,
+                r: 5,
+                fill: l.color
+              }, null, 8, he)
+            ], 8, pe)),
+            u("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", {
+              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", {
+              key: 1,
+              style: g(`font-weight:${e.value.style.legend.value.bold ? "bold" : "normal"};color:${e.value.style.legend.value.color}`)
+            }, " (" + k(b(U)({
+              p: e.value.style.legend.value.prefix,
+              v: l.value,
+              s: e.value.style.legend.value.suffix,
+              r: e.value.style.legend.value.rounding
+            })) + ") ", 5)) : h("", !0)
+          ])
+        ], 14, ve))), 256))
+      ], 4)) : h("", !0)
+    ], 4));
+  }
+}, xe = /* @__PURE__ */ H(ye, [["__scopeId", "data-v-2006741b"]]);
+export {
+  xe as default
+};