vue-data-ui 3.6.0 → 3.7.1

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

@@ -0,0 +1,470 @@
+import { defineAsyncComponent as Q, useSlots as Ie, onMounted as Z, ref as v, toRefs as Te, watch as ee, computed as F, createElementBlock as s, openBlock as r, normalizeStyle as g, createCommentVNode as h, createVNode as te, createBlock as Pe, createElementVNode as d, toDisplayString as S, unref as c, Fragment as k, renderList as D, normalizeClass as z, withCtx as oe, renderSlot as U, normalizeProps as le, guardReactiveProps as ae } from "vue";
+import { c as re, t as ze, i as Oe, p as i, l as B, j as Le, o as Ne, g as se, k as je, d as R, X as Ve, s as ne, h as ue, a as ie, x as Me } from "./lib-C5BH09_g.js";
+import { u as Ue, a as G } from "./useNestedProp-CWo6bftQ.js";
+import { u as Re, B as Ge } from "./BaseScanner-BgWxam9d.js";
+import { u as We } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Ye } from "./useChartAccessibility-9icAAmYg.js";
+import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ce = { style: { backgroundColor: "#1A1A1A", bar: { gradient: { underlayerColor: "#FFFFFF" } }, legend: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" }, percentage: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, de = { style: { backgroundColor: "#FFF8E1", bar: { gradient: { underlayerColor: "#FFF8E1" } }, legend: { name: { color: "#424242" }, value: { color: "#424242" }, percentage: { color: "#424242" } }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, ve = { style: { backgroundColor: "#1E1E1E", bar: { gradient: { underlayerColor: "#FFF8E1" } }, legend: { name: { color: "#BDBDBD" }, value: { color: "#BDBDBD" }, percentage: { color: "#BDBDBD" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, pe = { style: { backgroundColor: "#1A1A1A", bar: { gradient: { underlayerColor: "#1A1A1A" } }, legend: { name: { color: "#99AA99" }, value: { color: "#AACCAA" }, percentage: { color: "#99CC99" } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, ge = { style: { backgroundColor: "#fbfafa", bar: { gradient: { underlayerColor: "#fbfafa" } }, legend: { name: { color: "#8A9892" }, value: { color: "#A0AC94" }, percentage: { color: "#8A9892" } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, fe = { style: { backgroundColor: "#f6f6fb", bar: { gradient: { underlayerColor: "#f6f6fb" } }, legend: { name: { color: "#50606C" }, value: { color: "#8A9892" }, percentage: { color: "#61747E" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, he = {
+  default: {},
+  dark: ce,
+  celebration: de,
+  celebrationNight: ve,
+  hack: pe,
+  zen: ge,
+  concrete: fe
+}, xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: de,
+  celebrationNight: ve,
+  concrete: fe,
+  dark: ce,
+  default: he,
+  hack: pe,
+  zen: ge
+}, Symbol.toStringTag, { value: "Module" })), He = ["xmlns", "viewBox"], Xe = ["id"], Je = ["stop-color"], Ke = ["stop-color"], Qe = ["stop-color"], Ze = {
+  id: "stackPill",
+  clipPathUnits: "objectBoundingBox"
+}, et = ["fill"], tt = {
+  key: 0,
+  "clip-path": "url(#stackPill)"
+}, ot = ["x", "width", "height", "fill"], lt = ["x", "width", "height", "fill", "stroke"], at = ["x", "width", "height", "onClick", "onMouseenter", "onMouseleave"], rt = ["width", "height", "rx"], st = ["onClick"], nt = { style: { display: "flex", "flex-direction": "row", "align-items": "center", gap: "4px", "justify-content": "center" } }, ut = ["height", "width"], it = ["id"], ct = ["stop-color"], dt = ["stop-color"], vt = ["fill"], pt = {
+  key: 2,
+  ref: "source",
+  dir: "auto"
+}, gt = {
+  __name: "vue-ui-sparkstackbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(ye, { expose: me, emit: be }) {
+    const Ce = Q(() => import("./PackageVersion-C82JCJOX.js")), ke = Q(() => import("./Tooltip-WD0Ros6G.js")), { vue_ui_sparkstackbar: _e } = Ue(), { isThemeValid: xe, warnInvalidTheme: we } = We(), m = ye, Ae = Ie();
+    Z(() => {
+      Ae["chart-background"] && console.warn("VueUiSparkStackbar does not support the #chart-background slot.");
+    });
+    const W = v(null), E = v(re()), O = v(!1), L = v(""), e = v(N()), { loading: _, FINAL_DATASET: b } = Re({
+      ...Te(m),
+      FINAL_CONFIG: e,
+      prepareConfig: N,
+      skeletonDataset: [
+        { name: "_", value: 8, color: "#808080" },
+        { name: "_", value: 5, color: "#ADADAD" },
+        { name: "_", value: 3, color: "#DBDBDB" }
+      ],
+      skeletonConfig: ze({
+        defaultConfig: e.value,
+        userConfig: {
+          style: {
+            backgroundColor: "#99999930",
+            animation: { show: !1 },
+            bar: { gradient: { inderlayerColor: "#6A6A6A" } },
+            title: {
+              backgroundColor: "transparent"
+            }
+          }
+        }
+      })
+    }), { svgRef: Fe } = Ye({ config: e.value.style.title });
+    function N() {
+      const t = G({
+        userConfig: m.config,
+        defaultConfig: _e
+      }), l = t.theme;
+      if (!l) return t;
+      if (!xe.value(t))
+        return we(t), t;
+      const o = G({
+        userConfig: he[l] || m.config,
+        defaultConfig: t
+      }), a = G({
+        userConfig: m.config,
+        defaultConfig: o
+      });
+      return {
+        ...a,
+        customPalette: a.customPalette.length ? a.customPalette : Oe[l] || i
+      };
+    }
+    ee(() => m.config, (t) => {
+      e.value = N(), H();
+    }, { deep: !0 }), ee(() => b.value, (t) => {
+      C.value = b.value.map((l, o) => ({
+        ...l,
+        color: l.color ? B(l.color) : $.value[o] || i[o] || i[o % i.length]
+      })), Y();
+    }, { deep: !0 });
+    const $ = F(() => Le(e.value.customPalette)), C = v(b.value.map((t, l) => ({
+      ...t,
+      value: e.value.style.animation.show ? 0 : t.value || 0,
+      color: t.color ? B(t.color) : $.value[l] || i[l] || i[l % i.length]
+    }))), x = v(!0);
+    function Y() {
+      if (!e.value.style.animation.show) return;
+      const t = e.value.style.animation.animationFrames, l = b.value.map((n) => n.value || 0), o = l.map((n) => n / t), a = l.reduce((n, u) => n + u, 0);
+      let y = 0;
+      x.value = !0, C.value = b.value.map((n, u) => ({
+        ...n,
+        value: 0,
+        color: n.color ? B(n.color) : $.value[u] || i[u] || i[u % i.length]
+      }));
+      function P() {
+        y += a / t, y < a ? (C.value = C.value.map((n, u) => ({
+          ...n,
+          value: Math.min(n.value + o[u], l[u]),
+          color: n.color ? B(n.color) : $.value[u] || i[u] || i[u % i.length]
+        })), requestAnimationFrame(P)) : (x.value = !1, C.value = b.value.map((n, u) => ({
+          ...n,
+          value: l[u],
+          color: n.color ? B(n.color) : $.value[u] || i[u] || i[u % i.length],
+          id: re()
+        })));
+      }
+      P();
+    }
+    Z(() => {
+      H();
+    });
+    const q = F(() => e.value.debug);
+    function H() {
+      Ne(m.dataset) ? se({
+        componentName: "VueUiSparkStackbar",
+        type: "dataset",
+        debug: q.value
+      }) : m.dataset.forEach((t, l) => {
+        je({
+          datasetObject: t,
+          requiredAttributes: ["name", "value"]
+        }).forEach((o) => {
+          se({
+            componentName: "VueUiSparkStackbar",
+            type: "datasetSerieAttribute",
+            property: o,
+            index: l,
+            debug: q.value
+          });
+        });
+      }), Y();
+    }
+    const f = v({
+      width: 500,
+      height: 16
+    }), p = v([]), X = F(() => b.value.map((t) => t.value || 0).filter((t, l) => !p.value.includes(l)).reduce((t, l) => t + l, 0)), w = F(() => C.value.map((t, l) => {
+      const o = t.value || 0, a = o / X.value, y = isNaN(a) ? 0 : a, P = y * f.value.width;
+      return {
+        ...t,
+        value: o,
+        proportion: y,
+        width: P,
+        seriesIndex: l,
+        proportionLabel: R({
+          v: y * 100,
+          s: "%",
+          r: e.value.style.legend.percentage.rounding
+        })
+      };
+    })), j = F(() => w.value.filter((t, l) => !p.value.includes(l)));
+    function V(t) {
+      p.value.includes(t) ? p.value = p.value.filter((l) => l !== t) : p.value.length < C.value.length - 1 && p.value.push(t);
+    }
+    function J(t) {
+      if (!w.value.length)
+        return e.value.debug && console.warn("VueUiSparkStackbar - There are no series to show."), null;
+      const l = w.value.find((o) => o.name === t);
+      return l || (e.value.debug && console.warn(`VueUiSparkStackbar - Series name not found "${t}"`), null);
+    }
+    function $e(t) {
+      const l = J(t);
+      l !== null && p.value.includes(l.id) && V(l.seriesIndex);
+    }
+    function Se(t) {
+      const l = J(t);
+      l !== null && (p.value.includes(l.id) || V(l.seriesIndex));
+    }
+    const I = F(() => {
+      let t = 0;
+      const l = [];
+      for (let o = 0; o < j.value.length; o += 1)
+        l.push({
+          ...j.value[o],
+          start: t
+        }), t += j.value[o].width;
+      return l;
+    }), De = be;
+    function K(t, l, o = !1) {
+      De("selectDatapoint", { datapoint: t, index: l }), e.value.events.datapointClick && !o && e.value.events.datapointClick({ datapoint: t, seriesIndex: t.seriesIndex });
+    }
+    const M = v(null), T = v(!1), A = v(null);
+    function Be({ datapoint: t, seriesIndex: l }) {
+      O.value = !1, A.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: t.seriesIndex });
+    }
+    function Ee({ datapoint: t, seriesIndex: l }) {
+      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: t.seriesIndex }), !e.value.style.tooltip.show)
+        return;
+      M.value = { datapoint: t, seriesIndex: l, config: e.value, series: w.value }, O.value = !0, A.value = l;
+      const o = e.value.style.tooltip.customFormat;
+      if (Me(o))
+        try {
+          const a = o({
+            seriesIndex: t.seriesIndex,
+            datapoint: t,
+            series: w.value,
+            config: e.value
+          });
+          typeof a == "string" && (L.value = a, T.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied."), T.value = !1;
+        }
+      if (!T.value) {
+        let a = "";
+        a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, a += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${t.color}"/></svg>`, a += `<b>${t.proportionLabel}</b>`, a += `<span>(${ie(
+          e.value.style.legend.value.formatter,
+          t.value,
+          R({
+            p: e.value.style.legend.value.prefix,
+            v: t.value,
+            s: e.value.style.legend.value.suffix,
+            r: e.value.style.legend.value.rounding
+          }),
+          {
+            datapoint: t,
+            seriesIndex: l
+          }
+        )})</span>`, L.value = `<div>${a}</div>`;
+      }
+    }
+    return me({
+      hideSeries: Se,
+      showSeries: $e
+    }), (t, l) => (r(), s("div", {
+      class: "vue-data-ui-component vue-ui-spark-stackbar",
+      ref_key: "sparkstackbarChart",
+      ref: W,
+      style: g(`width:100%; background:${e.value.style.backgroundColor}`)
+    }, [
+      e.value.style.title.text ? (r(), s("div", {
+        key: 0,
+        style: g(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${e.value.style.title.margin};padding: 0 6px;text-align:${e.value.style.title.textAlign}`)
+      }, [
+        d("div", {
+          class: "atom-title",
+          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"}`)
+        }, S(e.value.style.title.text), 5),
+        e.value.style.title.subtitle.text ? (r(), s("div", {
+          key: 0,
+          class: "atom-subtitle",
+          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"}`)
+        }, S(e.value.style.title.subtitle.text), 5)) : h("", !0)
+      ], 4)) : h("", !0),
+      (r(), s("svg", {
+        ref_key: "svgRef",
+        ref: Fe,
+        xmlns: c(Ve),
+        width: "100%",
+        viewBox: `0 0 ${f.value.width} ${f.value.height}`
+      }, [
+        te(c(Ce)),
+        d("defs", null, [
+          (r(!0), s(k, null, D(I.value, (o, a) => (r(), s("linearGradient", {
+            key: `stack_gradient_${a}`,
+            gradientTransform: "rotate(90)",
+            id: `stack_gradient_${a}_${E.value}`
+          }, [
+            d("stop", {
+              offset: "0%",
+              "stop-color": o.color
+            }, null, 8, Je),
+            d("stop", {
+              offset: "50%",
+              "stop-color": c(ne)(c(ue)(o.color, 0.05), 100 - e.value.style.bar.gradient.intensity)
+            }, null, 8, Ke),
+            d("stop", {
+              offset: "100%",
+              "stop-color": o.color
+            }, null, 8, Qe)
+          ], 8, Xe))), 128)),
+          d("clipPath", Ze, [
+            d("rect", {
+              x: "0.005",
+              y: "-2",
+              width: "0.99",
+              height: "5",
+              rx: "3",
+              ry: "3",
+              fill: e.value.style.backgroundColor
+            }, null, 8, et)
+          ])
+        ]),
+        X.value > 0 ? (r(), s("g", tt, [
+          (r(!0), s(k, null, D(I.value, (o, a) => (r(), s("rect", {
+            key: `stack_underlayer_${a}`,
+            x: o.start,
+            y: 0,
+            width: o.width,
+            height: f.value.height,
+            fill: e.value.style.bar.gradient.underlayerColor,
+            class: z({ animated: !x.value && !c(_) }),
+            style: g({
+              opacity: A.value !== null && e.value.style.tooltip.show ? A.value === a ? 1 : 0.5 : 1
+            })
+          }, null, 14, ot))), 128)),
+          (r(!0), s(k, null, D(I.value, (o, a) => (r(), s("rect", {
+            key: `stack_${a}`,
+            x: o.start,
+            y: 0,
+            width: o.width,
+            height: f.value.height,
+            fill: e.value.style.bar.gradient.show ? `url(#stack_gradient_${a}_${E.value})` : o.color,
+            stroke: e.value.style.backgroundColor,
+            "stroke-linecap": "round",
+            class: z({ animated: !x.value && !c(_) }),
+            style: g({
+              opacity: A.value !== null && e.value.style.tooltip.show ? A.value === a ? 1 : 0.5 : 1
+            })
+          }, null, 14, lt))), 128)),
+          (r(!0), s(k, null, D(I.value, (o, a) => (r(), s("rect", {
+            key: `stack_trap_${a}`,
+            x: o.start,
+            y: 0,
+            width: o.width,
+            height: f.value.height,
+            fill: "transparent",
+            stroke: "none",
+            class: z({ animated: !x.value && !c(_) }),
+            onClick: () => K(o, a),
+            onMouseenter: () => Ee({ datapoint: o, seriesIndex: a }),
+            onMouseleave: (y) => Be({ datapoint: o, seriesIndex: a })
+          }, null, 42, at))), 128))
+        ])) : (r(), s("rect", {
+          key: 1,
+          x: 2,
+          y: 1,
+          width: f.value.width - 4,
+          height: f.value.height - 2,
+          stroke: "#CCCCCC",
+          "stroke-width": "2",
+          fill: "transparent",
+          rx: (f.value.height - 4) / 2
+        }, null, 8, rt))
+      ], 8, He)),
+      e.value.style.legend.show ? (r(), s("div", {
+        key: 1,
+        style: g(`background:transparent;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"
+      }, [
+        (r(!0), s(k, null, D(w.value, (o, a) => (r(), s("div", {
+          style: g(`font-size:${e.value.style.legend.fontSize}px;`),
+          class: z({ "vue-ui-sparkstackbar-legend-item": !0, "vue-ui-sparkstackbar-legend-item-unselected": p.value.includes(a) }),
+          onClick: (y) => {
+            V(a), K(o, a, !0);
+          }
+        }, [
+          d("div", nt, [
+            (r(), s("svg", {
+              height: `${e.value.style.legend.fontSize}px`,
+              width: `${e.value.style.legend.fontSize}px`,
+              viewBox: "0 0 10 10"
+            }, [
+              d("defs", null, [
+                d("radialGradient", {
+                  id: `legend_grad_${a}-${E.value}`
+                }, [
+                  d("stop", {
+                    offset: "0%",
+                    "stop-color": c(_) ? "#FFFFFF" : c(ne)(c(ue)(o.color, 0.05), 100 - e.value.style.bar.gradient.intensity)
+                  }, null, 8, ct),
+                  d("stop", {
+                    offset: "100%",
+                    "stop-color": o.color
+                  }, null, 8, dt)
+                ], 8, it)
+              ]),
+              d("circle", {
+                cx: 5,
+                cy: 5,
+                r: 5,
+                fill: e.value.style.bar.gradient.show ? `url(#legend_grad_${a}-${E.value})` : o.color
+              }, null, 8, vt)
+            ], 8, ut)),
+            c(_) ? h("", !0) : (r(), s(k, { key: 0 }, [
+              d("span", {
+                style: g(`color:${e.value.style.legend.name.color}; font-weight:${e.value.style.legend.name.bold ? "bold" : "normal"}`)
+              }, S(o.name), 5),
+              x.value ? h("", !0) : (r(), s(k, { key: 0 }, [
+                e.value.style.legend.percentage.show ? (r(), s("span", {
+                  key: 0,
+                  style: g(`font-weight:${e.value.style.legend.percentage.bold ? "bold" : "normal"};color:${e.value.style.legend.percentage.color}`)
+                }, S(p.value.includes(a) ? " - " : o.proportionLabel), 5)) : h("", !0),
+                e.value.style.legend.value.show ? (r(), s("span", {
+                  key: 1,
+                  style: g(`font-weight:${e.value.style.legend.value.bold ? "bold" : "normal"};color:${e.value.style.legend.value.color}`)
+                }, " (" + S(c(ie)(
+                  e.value.style.legend.value.formatter,
+                  o.value,
+                  c(R)({
+                    p: e.value.style.legend.value.prefix,
+                    v: o.value,
+                    s: e.value.style.legend.value.suffix,
+                    r: e.value.style.legend.value.rounding
+                  }),
+                  { datapoint: o, seriesIndex: a }
+                )) + ") ", 5)) : h("", !0)
+              ], 64))
+            ], 64))
+          ])
+        ], 14, st))), 256))
+      ], 4)) : h("", !0),
+      te(c(ke), {
+        show: O.value && e.value.style.tooltip.show,
+        parent: W.value,
+        backgroundColor: e.value.style.tooltip.backgroundColor,
+        color: e.value.style.tooltip.color,
+        fontSize: e.value.style.tooltip.fontSize,
+        borderRadius: e.value.style.tooltip.borderRadius,
+        borderColor: e.value.style.tooltip.borderColor,
+        borderWidth: e.value.style.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
+        position: e.value.style.tooltip.position,
+        content: L.value,
+        isCustom: T.value,
+        offsetY: -124 + e.value.style.tooltip.offsetY,
+        blockShiftY: !0,
+        smooth: e.value.style.tooltip.smooth,
+        backdropFilter: e.value.style.tooltip.backdropFilter,
+        smoothForce: e.value.style.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
+      }, {
+        "tooltip-before": oe(() => [
+          U(t.$slots, "tooltip-before", le(ae({ ...M.value })), void 0, !0)
+        ]),
+        "tooltip-after": oe(() => [
+          U(t.$slots, "tooltip-after", le(ae({ ...M.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "parent", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "content", "isCustom", "offsetY", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      t.$slots.source ? (r(), s("div", pt, [
+        U(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      c(_) ? (r(), Pe(Ge, { key: 3 })) : h("", !0)
+    ], 4));
+  }
+}, ft = /* @__PURE__ */ qe(gt, [["__scopeId", "data-v-60ee2b1d"]]), wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ft
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  xt as a,
+  wt as b,
+  ft as v
+};