vue-data-ui 3.6.0 → 3.7.1

package/dist/vue-ui-sparkstackbar-DtO7-yim.js

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