vue-data-ui 3.17.13 → 3.18.1

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

@@ -1,559 +0,0 @@
-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 b, 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-DMzrGQHK.js";
-import { t as We, u as Be } from "./useResponsive-DfdjqQps.js";
-import { u as Oe } from "./useConfig-CG4HT3wS.js";
-import { u as Ke, B as Pe } from "./BaseScanner-C2j3TsSY.js";
-import { u as je } from "./useFitSvgText-2crs6Fv5.js";
-import { u as j } from "./useNestedProp-DH0BEVVS.js";
-import { u as Ue } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as Xe } from "./useChartAccessibility-cp6XQtqi.js";
-import { _ as qe } from "./Shape-CxJ5_Rre.js";
-import Ge from "./vue_ui_sparkhistogram-GBdzIVvS.js";
-import { A as Ye } from "./A11yDataTable-BpmuNomI.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 }, bt = ["x", "y", "font-size", "font-weight", "fill"], pt = ["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) => ({
-      v66b29b27: _e.value
-    }));
-    const ue = Te(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), { vue_ui_sparkhistogram: re } = Oe(), { isThemeValid: ve, warnInvalidTheme: ce } = Ue(), _ = ne, p = 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}_${p.value})` : l.value >= 0 ? `url(#gradient_positive_${o}_${p.value})` : `url(#gradient_negative_${o}_${p.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 be(l, o) {
-      A.value = "pointer", x.value = o, u.value = o, e.value.events.datapointEnter && e.value.events.datapointEnter({
-        datapoint: l,
-        seriesIndex: o
-      });
-    }
-    function pe(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-${p.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: p.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-${p.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, b(i.value, (t, n) => (a(), s("radialGradient", {
-              id: `gradient_positive_${n}_${p.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, b(i.value, (t, n) => (a(), s("radialGradient", {
-              id: `gradient_negative_${n}_${p.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, b(i.value, (t, n) => (a(), s("radialGradient", {
-              id: `gradient_datapoint_${n}_${p.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, b(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, b(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, b(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, b(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, bt)) : d("", !0)
-            ]))), 256)),
-            (a(!0), s(g, null, b(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, pt)) : d("", !0)
-            ]))), 256)),
-            (a(!0), s(g, null, b(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, b(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) => be(t, n),
-              onMouseleave: (v) => pe(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-8a87ff32"]]);
-export {
-  Dt as default
-};