vue-data-ui 3.4.9 → 3.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "3.4.9",
+  "version": "3.5.0",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [

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

@@ -1,424 +0,0 @@
-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 f, createVNode as Q, createBlock as _e, createElementVNode as d, toDisplayString as F, unref as c, Fragment as k, renderList as A, normalizeClass as N, withCtx as Z, renderSlot as R, normalizeProps as ee, guardReactiveProps as te } from "vue";
-import { c as le, t as xe, b as we, p as i, h as D, e as Ce, o as $e, f as oe, g as Se, d as U, X as Fe, s as ae, i as se, a as re, G as Ae } from "./lib-C_mNZmhD.js";
-import { u as De, a as ne } from "./useNestedProp-BjZe1Y85.js";
-import { u as Ie } from "./useChartAccessibility-9icAAmYg.js";
-import { t as Pe } from "./themes-AUNCOb2G.js";
-import { u as ze, B as Be } from "./BaseScanner-BgWxam9d.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-CTUqGqWV.js")), de = X(() => import("./Tooltip-oWCO1HKy.js")), { vue_ui_sparkstackbar: ve } = De(), _ = 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: xe({
-        defaultConfig: e.value,
-        userConfig: {
-          style: {
-            backgroundColor: "#99999930",
-            animation: { show: !1 },
-            bar: { gradient: { inderlayerColor: "#6A6A6A" } },
-            title: {
-              backgroundColor: "transparent"
-            }
-          }
-        }
-      })
-    }), { svgRef: ge } = Ie({ config: e.value.style.title });
-    function M() {
-      const t = ne({
-        userConfig: _.config,
-        defaultConfig: ve
-      });
-      return t.theme ? {
-        ...ne({
-          userConfig: Pe.vue_ui_sparkstackbar[t.theme] || _.config,
-          defaultConfig: t
-        }),
-        customPalette: we[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 = $(() => Ce(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() {
-      $e(_.dataset) ? oe({
-        componentName: "VueUiSparkStackbar",
-        type: "dataset",
-        debug: W.value
-      }) : _.dataset.forEach((t, a) => {
-        Se({
-          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
-    }), h = v([]), q = $(() => m.value.map((t) => t.value || 0).filter((t, a) => !h.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) => !h.value.includes(a)));
-    function he(t) {
-      h.value.includes(t) ? h.value = h.value.filter((a) => a !== t) : h.value.length < b.value.length - 1 && h.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;
-    }), fe = ie;
-    function H(t, a, l = !1) {
-      fe("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 (Ae(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-data-ui-component 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"}`)
-        }, F(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"}`)
-        }, F(e.value.style.title.subtitle.text), 5)) : f("", !0)
-      ], 4)) : f("", !0),
-      (s(), r("svg", {
-        ref_key: "svgRef",
-        ref: ge,
-        xmlns: c(Fe),
-        width: "100%",
-        viewBox: `0 0 ${g.value.width} ${g.value.height}`
-      }, [
-        Q(c(ce)),
-        d("defs", null, [
-          (s(!0), r(k, null, A(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, A(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, A(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, A(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, A(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": h.value.includes(o) }),
-          onClick: (y) => {
-            he(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) ? f("", !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"}`)
-              }, F(l.name), 5),
-              w.value ? f("", !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}`)
-                }, F(h.value.includes(o) ? " - " : l.proportionLabel), 5)) : f("", !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}`)
-                }, " (" + F(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)) : f("", !0)
-              ], 64))
-            ], 64))
-          ])
-        ], 14, qe))), 256))
-      ], 4)) : f("", !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,
-        smoothForce: e.value.style.tooltip.smoothForce,
-        smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
-      }, {
-        "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", "smoothForce", "smoothSnapThreshold"]),
-      t.$slots.source ? (s(), r("div", et, [
-        R(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : f("", !0),
-      c(x) ? (s(), _e(Be, { key: 3 })) : f("", !0)
-    ], 4));
-  }
-}, it = /* @__PURE__ */ Le(tt, [["__scopeId", "data-v-ae2ae4f4"]]);
-export {
-  it as default
-};