vue-data-ui 3.0.0-next.8 → 3.0.0

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

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