vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-sparkhistogram-DMfSx1iH.js

@@ -0,0 +1,474 @@
+import { useCssVars as ze, defineAsyncComponent as Te, ref as h, computed as k, toRefs as Ee, onMounted as Q, watch as Z, nextTick as ee, openBlock as a, createElementBlock as s, normalizeStyle as I, createElementVNode as f, toDisplayString as m, createBlock as K, createCommentVNode as d, createTextVNode as Me, unref as c, createVNode as Fe, renderSlot as N, Fragment as g, renderList as p, normalizeClass as te, normalizeProps as Ie, guardReactiveProps as Ne } from "vue";
+import { j as De, t as le, o as He, q as ae, r as Ve, u as C, k as se, l as oe, X as Re, v as P } from "./lib-DBptbyyI.js";
+import { t as We, u as Be } from "./useResponsive-DfdjqQps.js";
+import { u as Oe } from "./useConfig-DO94Aj5s.js";
+import { u as Ke, B as Pe } from "./BaseScanner-BhhkKVoj.js";
+import { u as je } from "./useFitSvgText-2crs6Fv5.js";
+import { u as j } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Ue } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as Xe } from "./useChartAccessibility-9icAAmYg.js";
+import { _ as qe } from "./Shape-BKRUOeKk.js";
+import Ge from "./vue_ui_sparkhistogram-GBdzIVvS.js";
+import { A as Ye } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as Je } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Qe = ["id"], Ze = { key: 0 }, et = { key: 1 }, tt = { style: { position: "relative" } }, lt = ["xmlns", "viewBox", "aria-describedby"], at = ["width", "height"], st = ["id"], ot = ["stop-color"], nt = ["stop-color"], it = ["id"], ut = ["stop-color"], rt = ["stop-color"], vt = ["id"], ct = ["stop-color"], dt = ["stop-color"], yt = ["height", "width", "fill", "x", "stroke", "stroke-width", "rx", "stroke-dasharray"], ht = { key: 1 }, ft = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], gt = { key: 2 }, pt = ["x", "y", "font-size", "font-weight", "fill"], bt = ["x", "y", "font-size", "fill"], mt = ["x", "y", "font-size", "fill"], _t = ["height", "width", "x", "onMouseover", "onMouseleave", "onClick"], kt = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Ct = {
+  __name: "vue-ui-sparkhistogram",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(ne, { emit: ie }) {
+    ze((l) => ({
+      dd7c743c: _e.value
+    }));
+    const ue = Te(() => import("./PackageVersion-DPO-OOVI.js")), { vue_ui_sparkhistogram: re } = Oe(), { isThemeValid: ve, warnInvalidTheme: ce } = Ue(), _ = ne, b = h(De()), U = h(null), X = h(null), D = h(null), S = h(null), E = h(null), H = h(!1), x = h(null), A = h("pointer"), e = h(W()), de = k(() => le({
+      defaultConfig: {
+        style: {
+          animation: { show: !1 },
+          backgroundColor: "#99999930"
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: q, FINAL_DATASET: z } = Ke({
+      ...Ee(_),
+      FINAL_CONFIG: e,
+      prepareConfig: W,
+      skeletonDataset: _.config?.skeletonDataset ?? [
+        { value: 1, intensity: 0.2, color: "#CACACA" },
+        { value: 2, intensity: 0.3, color: "#CACACA" },
+        { value: 3, intensity: 0.5, color: "#CACACA" },
+        { value: 5, intensity: 0.7, color: "#CACACA" },
+        { value: 8, intensity: 0.9, color: "#CACACA" },
+        { value: 13, intensity: 0.95, color: "#CACACA" },
+        { value: 21, intensity: 1, color: "#CACACA" },
+        { value: 13, intensity: 0.95, color: "#CACACA" },
+        { value: 8, intensity: 0.9, color: "#CACACA" },
+        { value: 5, intensity: 0.7, color: "#CACACA" },
+        { value: 3, intensity: 0.5, color: "#CACACA" },
+        { value: 2, intensity: 0.3, color: "#CACACA" },
+        { value: 1, intensity: 0.2, color: "#CACACA" }
+      ],
+      skeletonConfig: le({
+        defaultConfig: e.value,
+        userConfig: de.value
+      })
+    }), V = h(e.value.style.layout.width), R = h(e.value.style.layout.height), { svgRef: M } = Xe({ config: e.value.style.title });
+    function W() {
+      const l = j({
+        userConfig: _.config,
+        defaultConfig: re
+      }), o = l.theme;
+      if (!o) return l;
+      if (!ve.value(l))
+        return ce(l), l;
+      const t = j({
+        userConfig: Ge[o] || _.config,
+        defaultConfig: l
+      });
+      return j({
+        userConfig: _.config,
+        defaultConfig: t
+      });
+    }
+    Q(() => {
+      Y();
+    });
+    const G = k(() => !!e.value.debug);
+    function Y() {
+      if (He(_.dataset) ? ae({
+        componentName: "VueUiSparkHistogram",
+        type: "dataset",
+        debug: G.value
+      }) : _.dataset.forEach((l, o) => {
+        Ve({
+          datasetObject: l,
+          requiredAttributes: ["value"]
+        }).forEach((t) => {
+          ae({
+            componentName: "VueUiSparkHistogram",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: o,
+            debug: G.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = We(() => {
+          const { width: o, height: t } = Be({
+            chart: D.value,
+            title: e.value.style.title.text ? X.value : null,
+            source: U.value
+          }), n = e.value.style.labels.timeLabel.show ? e.value.style.labels.timeLabel.fontSize * 2 : 0, v = e.value.style.labels.valueLabel.show ? e.value.style.labels.valueLabel.fontSize * 2 : 0;
+          requestAnimationFrame(() => {
+            V.value = Math.max(10, o), R.value = Math.max(10, t - 12 - n - v);
+          });
+        });
+        S.value && (E.value && S.value.unobserve(E.value), S.value.disconnect()), S.value = new ResizeObserver(l), E.value = D.value.parentNode, S.value.observe(E.value);
+      }
+    }
+    Z(() => _.config, (l) => {
+      e.value = W(), Y();
+    }, { deep: !0 });
+    const y = k(() => {
+      const l = e.value.style.labels.timeLabel.show ? e.value.style.labels.timeLabel.fontSize * 2 : 0, o = e.value.style.labels.valueLabel.show ? e.value.style.labels.valueLabel.fontSize * 2 : 0, t = R.value + l + o, n = V.value, v = e.value.style.layout.padding.top, r = t - e.value.style.layout.padding.bottom, L = e.value.style.layout.padding.left, $ = n - e.value.style.layout.padding.right, F = v + (t - v - e.value.style.layout.padding.bottom) / 2, O = t - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - l - o, T = n - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
+      return {
+        bottom: r,
+        centerY: F,
+        drawingHeight: O,
+        drawingWidth: T,
+        height: t,
+        left: L,
+        right: $,
+        top: v,
+        width: n
+      };
+    }), ye = k(() => Math.max(...z.value.map((l) => Math.abs(l.value || 0))));
+    function he(l) {
+      return Math.abs(l) / ye.value;
+    }
+    const i = k(() => z.value.map((l, o) => {
+      const t = he(l.value || 0), n = y.value.drawingHeight * t, v = y.value.drawingWidth / z.value.length, r = v * (e.value.style.bars.gap / 100), L = v - r, $ = y.value.centerY - n / 2, F = y.value.left + (r / 2 + o * v), O = y.value.left + o * v, T = typeof l.intensity > "u" ? 100 : Math.round(l.intensity * 100), we = l.color ? l.color : l.value >= 0 ? C(e.value.style.bars.colors.positive, T) : C(e.value.style.bars.colors.negative, T), Le = l.color ? l.color : l.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, $e = l.color ? `url(#gradient_datapoint_${o}_${b.value})` : l.value >= 0 ? `url(#gradient_positive_${o}_${b.value})` : `url(#gradient_negative_${o}_${b.value})`, Se = F + L / 2;
+      return {
+        ...l,
+        color: we,
+        gradient: $e,
+        height: n,
+        intensity: T,
+        proportion: t,
+        stroke: Le,
+        textAnchor: Se,
+        trapX: O,
+        unitWidth: v,
+        width: L,
+        x: F,
+        y: $
+      };
+    }));
+    function fe(l, o) {
+      return se(
+        e.value.style.labels.value.formatter,
+        l.value,
+        oe({
+          p: e.value.style.labels.value.prefix,
+          v: l.value,
+          s: e.value.style.labels.value.suffix,
+          r: e.value.style.labels.value.rounding
+        }),
+        { datapoint: l, seriesIndex: o }
+      );
+    }
+    const u = h(null), ge = ie;
+    function J(l, o) {
+      ge("selectDatapoint", { datapoint: l, index: o }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: o });
+    }
+    function pe(l, o) {
+      A.value = "pointer", x.value = o, u.value = o, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: o });
+    }
+    function be(l, o) {
+      A.value !== "keyboard" && (u.value = null, x.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o }));
+    }
+    function me() {
+      A.value !== "keyboard" && (u.value = null, x.value = null);
+    }
+    const _e = k(() => `${e.value.style.animation.speedMs}ms`), ke = k(() => y.value.drawingWidth / z.value.length * 0.9), { fitText: w } = je({
+      svgRef: M,
+      unitWidth: ke
+    });
+    Q(async () => {
+      await ee(), w(".vue-ui-sparkhistogram-top-label", e.value.style.labels.value.minFontSize), w(".vue-ui-sparkhistogram-bottom-label", e.value.style.labels.valueLabel.minFontSize), w(".vue-ui-sparkhistogram-time-label", e.value.style.labels.timeLabel.minFontSize);
+    }), Z([V, R, () => z.value], async () => {
+      await ee(), w(".vue-ui-sparkhistogram-top-label", e.value.style.labels.value.minFontSize), w(".vue-ui-sparkhistogram-bottom-label", e.value.style.labels.valueLabel.minFontSize), w(".vue-ui-sparkhistogram-time-label", e.value.style.labels.timeLabel.minFontSize);
+    });
+    function Ce() {
+      H.value = !0;
+    }
+    function xe() {
+      H.value = !1, x.value = null, A.value = "pointer", u.value = null;
+    }
+    function Ae(l) {
+      if (!M.value || document.activeElement !== M.value || !i.value.length) return;
+      const o = l.key === "ArrowLeft", t = l.key === "ArrowRight", n = l.key === "Enter" || l.key === " ", v = l.key === "Escape";
+      if (!o && !t && !n && !v) return;
+      if (l.preventDefault(), l.stopPropagation(), v) {
+        x.value = null, u.value = null, A.value = "pointer";
+        return;
+      }
+      if (n) {
+        if (u.value === null) return;
+        const $ = i.value[u.value];
+        if (!$) return;
+        J($, u.value);
+        return;
+      }
+      A.value = "keyboard";
+      let r = x.value;
+      r === null || r < 0 || r >= i.value.length ? r = t ? 0 : i.value.length - 1 : t ? (r += 1, r >= i.value.length && (r = 0)) : o && (r -= 1, r < 0 && (r = i.value.length - 1)), x.value = r, u.value = r;
+      const L = i.value[r];
+      e.value.events.datapointEnter && e.value.events.datapointEnter({
+        datapoint: L,
+        seriesIndex: r
+      });
+    }
+    const B = k(() => {
+      const l = [
+        e.value.a11y?.translations?.series ?? "Series",
+        e.value.a11y?.translations?.time ?? "Time",
+        e.value.a11y?.translations?.value ?? "Value",
+        e.value.a11y?.translations?.valueLabel ?? "Label"
+      ], o = i.value.map((t, n) => [
+        n + 1,
+        t.timeLabel ?? "",
+        t.value ?? "",
+        t.valueLabel ?? ""
+      ]);
+      return { headers: l, rows: o };
+    });
+    return (l, o) => (a(), s("div", {
+      class: "vue-data-ui-component vue-ui-spark-histogram",
+      ref_key: "histogramChart",
+      ref: D,
+      style: I(`width:100%;background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily}`),
+      onMouseleave: me
+    }, [
+      f("div", {
+        id: `chart-instructions-${b.value}`,
+        class: "sr-only"
+      }, [
+        f("p", null, m(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Qe),
+      B.value?.rows?.length ? (a(), K(Ye, {
+        key: 0,
+        uid: b.value,
+        head: B.value.headers,
+        body: B.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : d("", !0),
+      e.value.style.title.text ? (a(), s("div", {
+        key: 1,
+        ref_key: "chartTitle",
+        ref: X,
+        style: I(`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}`)
+      }, [
+        f("div", {
+          style: I(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
+        }, [
+          Me(m(e.value.style.title.text) + " ", 1),
+          u.value !== null ? (a(), s("span", Ze, "- " + m(i.value[u.value].timeLabel || "") + " " + m(c(se)(
+            e.value.style.labels.value.formatter,
+            i.value[u.value].value,
+            c(oe)({
+              p: e.value.style.labels.value.prefix,
+              v: i.value[u.value].value,
+              s: e.value.style.labels.value.suffix,
+              r: e.value.style.labels.value.rounding
+            }),
+            { datapoint: i.value[u.value], seriesIndex: u.value }
+          )), 1)) : d("", !0),
+          ![void 0, null].includes(u.value) && ![null, void 0].includes(i.value[u.value].valueLabel) ? (a(), s("span", et, m(` (${i.value[u.value].valueLabel || 0})`), 1)) : d("", !0)
+        ], 4),
+        e.value.style.title.subtitle.text ? (a(), s("div", {
+          key: 0,
+          style: I(`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"}`)
+        }, m(e.value.style.title.subtitle.text), 5)) : d("", !0)
+      ], 4)) : d("", !0),
+      f("div", tt, [
+        (a(), s("svg", {
+          ref_key: "svgRef",
+          ref: M,
+          xmlns: c(Re),
+          viewBox: `0 0 ${y.value.width} ${y.value.height}`,
+          style: { overflow: "visible" },
+          "aria-describedby": `chart-instructions-${b.value}`,
+          tabindex: "0",
+          onFocus: Ce,
+          onBlur: xe,
+          onKeydown: Ae
+        }, [
+          Fe(c(ue)),
+          l.$slots["chart-background"] ? (a(), s("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: y.value.width,
+            height: y.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            N(l.$slots, "chart-background", {}, void 0, !0)
+          ], 8, at)) : d("", !0),
+          f("defs", null, [
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("radialGradient", {
+              id: `gradient_positive_${n}_${b.value}`,
+              cy: "50%",
+              cx: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%"
+            }, [
+              f("stop", {
+                offset: "0%",
+                "stop-color": c(C)(c(P)(e.value.style.bars.colors.positive, 0.05), t.intensity)
+              }, null, 8, ot),
+              f("stop", {
+                offset: "100%",
+                "stop-color": c(C)(e.value.style.bars.colors.positive, t.intensity)
+              }, null, 8, nt)
+            ], 8, st))), 256)),
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("radialGradient", {
+              id: `gradient_negative_${n}_${b.value}`,
+              cy: "50%",
+              cx: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%"
+            }, [
+              f("stop", {
+                offset: "0%",
+                "stop-color": c(C)(c(P)(e.value.style.bars.colors.negative, 0.05), t.intensity)
+              }, null, 8, ut),
+              f("stop", {
+                offset: "100%",
+                "stop-color": c(C)(e.value.style.bars.colors.negative, t.intensity)
+              }, null, 8, rt)
+            ], 8, it))), 256)),
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("radialGradient", {
+              id: `gradient_datapoint_${n}_${b.value}`,
+              cy: "50%",
+              cx: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%"
+            }, [
+              f("stop", {
+                offset: "0%",
+                "stop-color": c(C)(c(P)(t.color, 0.05), t.intensity)
+              }, null, 8, ct),
+              f("stop", {
+                offset: "100%",
+                "stop-color": c(C)(t.color, t.intensity)
+              }, null, 8, dt)
+            ], 8, vt))), 256))
+          ]),
+          (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("g", null, [
+            u.value !== null && u.value === n ? (a(), s("rect", {
+              key: 0,
+              height: y.value.height,
+              width: t.unitWidth,
+              fill: e.value.style.selector.fill,
+              x: t.trapX,
+              y: 0,
+              stroke: e.value.style.selector.stroke,
+              "stroke-width": e.value.style.selector.strokeWidth,
+              rx: e.value.style.selector.borderRadius,
+              "stroke-dasharray": e.value.style.selector.strokeDasharray
+            }, null, 8, yt)) : d("", !0)
+          ]))), 256)),
+          !e.value.style.bars.shape || e.value.style.bars.shape === "square" ? (a(), s("g", ht, [
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("rect", {
+              x: t.x,
+              y: t.y,
+              height: t.height,
+              width: t.width,
+              fill: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
+              stroke: t.stroke,
+              "stroke-width": e.value.style.bars.strokeWidth,
+              rx: `${e.value.style.bars.borderRadius * t.proportion / 12}%`,
+              class: te({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
+            }, null, 10, ft))), 256))
+          ])) : (a(), s("g", gt, [
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), K(qe, {
+              plot: { x: t.x + t.width / 2, y: t.y + t.height / 2 },
+              color: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
+              shape: e.value.style.bars.shape,
+              radius: Math.min(t.height * 0.4, t.width * 0.4),
+              class: te({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
+            }, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
+          ])),
+          c(q) ? d("", !0) : (a(), s(g, { key: 3 }, [
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("g", null, [
+              e.value.style.labels.value.show ? (a(), s("text", {
+                key: 0,
+                class: "vue-ui-sparkhistogram-top-label",
+                "text-anchor": "middle",
+                x: t.textAnchor,
+                y: t.y - e.value.style.labels.value.fontSize / 3 + e.value.style.labels.value.offsetY,
+                "font-size": e.value.style.labels.value.fontSize,
+                "font-weight": e.value.style.labels.value.bold ? "bold" : "normal",
+                fill: e.value.style.labels.value.color
+              }, m(fe(t, n)), 9, pt)) : d("", !0)
+            ]))), 256)),
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("g", null, [
+              t.valueLabel && e.value.style.labels.valueLabel.show ? (a(), s("text", {
+                key: 0,
+                class: "vue-ui-sparkhistogram-bottom-label",
+                x: t.textAnchor,
+                y: t.y + t.height + e.value.style.labels.valueLabel.fontSize,
+                "font-size": e.value.style.labels.valueLabel.fontSize,
+                "text-anchor": "middle",
+                fill: e.value.style.labels.valueLabel.color
+              }, m(t.valueLabel), 9, bt)) : d("", !0)
+            ]))), 256)),
+            (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("g", null, [
+              t.timeLabel && e.value.style.labels.timeLabel.show ? (a(), s("text", {
+                key: 0,
+                class: "vue-ui-sparkhistogram-time-label",
+                x: t.textAnchor,
+                y: y.value.height,
+                "font-size": e.value.style.labels.timeLabel.fontSize,
+                fill: e.value.style.labels.timeLabel.color,
+                "text-anchor": "middle"
+              }, m(t.timeLabel), 9, mt)) : d("", !0)
+            ]))), 256))
+          ], 64)),
+          (a(!0), s(g, null, p(i.value, (t, n) => (a(), s("g", null, [
+            f("rect", {
+              height: y.value.height,
+              width: t.unitWidth,
+              fill: "transparent",
+              x: t.trapX,
+              y: 0,
+              onMouseover: (v) => pe(t, n),
+              onMouseleave: (v) => be(t, n),
+              onClick: () => J(t, n)
+            }, null, 40, _t)
+          ]))), 256))
+        ], 40, lt)),
+        l.$slots.hint ? (a(), s("div", kt, [
+          N(l.$slots, "hint", Ie(Ne({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: H.value })), void 0, !0)
+        ])) : d("", !0)
+      ]),
+      l.$slots.source ? (a(), s("div", {
+        key: 2,
+        ref_key: "source",
+        ref: U,
+        dir: "auto"
+      }, [
+        N(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : d("", !0),
+      N(l.$slots, "skeleton", {}, () => [
+        c(q) ? (a(), K(Pe, { key: 0 })) : d("", !0)
+      ], !0)
+    ], 36));
+  }
+}, Dt = /* @__PURE__ */ Je(Ct, [["__scopeId", "data-v-24dcfd6c"]]);
+export {
+  Dt as default
+};