vue-data-ui 3.0.0-next.6 → 3.0.0-next.61

package/dist/vue-ui-sparkhistogram-DBJcd-6V.js

@@ -0,0 +1,444 @@
+import { nextTick as Q, useCssVars as ge, computed as F, defineAsyncComponent as be, ref as p, toRefs as me, onMounted as Z, watch as ee, createElementBlock as o, openBlock as a, normalizeStyle as R, createCommentVNode as h, createBlock as te, createElementVNode as m, createTextVNode as _e, toDisplayString as A, unref as d, createVNode as xe, renderSlot as le, Fragment as f, renderList as g, normalizeClass as ae } from "vue";
+import { u as ke, c as Ce, t as Ae, b as we, o as ze, f as se, g as Se, s as w, k as oe, i as ie, X as $e, x as K } from "./index-BRenDuve.js";
+import { t as Le, u as Me } from "./useResponsive-DfdjqQps.js";
+import { u as Fe, B as Ne } from "./useLoading-Bt5Doa8m.js";
+import { u as ne } from "./useNestedProp-iKx-oGDH.js";
+import { u as Te } from "./useChartAccessibility-9icAAmYg.js";
+import { _ as Ee } from "./Shape-WLqGGUwB.js";
+import { _ as Ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function De({
+  svgRef: U,
+  unitWidth: X,
+  fontSize: j = 12,
+  step: q = 0.5,
+  maxIterations: _ = 60,
+  hideUnderMin: x = !0
+}) {
+  const S = /* @__PURE__ */ new WeakMap(), N = (i) => {
+    if (typeof i == "number") return i;
+    if (!i) return NaN;
+    const c = parseFloat(String(i).replace("px", ""));
+    return Number.isFinite(c) ? c : NaN;
+  }, $ = (i) => {
+    const c = N(i.getAttribute("font-size"));
+    if (Number.isFinite(c)) return c;
+    const k = window.getComputedStyle(i);
+    return N(k.fontSize) || j;
+  }, y = (i, c) => {
+    i.setAttribute("font-size", String(c));
+  }, L = (i) => {
+    if (S.has(i))
+      y(i, S.get(i));
+    else {
+      const c = $(i);
+      S.set(i, c), y(i, c);
+    }
+  }, e = (i) => {
+    try {
+      return i.getBBox().width || 0;
+    } catch {
+      return 0;
+    }
+  };
+  return {
+    fitText: async (i, c = 6) => {
+      await Q();
+      const k = U?.value;
+      if (!k) return;
+      const T = k.querySelectorAll(i);
+      if (!T.length) return;
+      const C = Math.max(0, X.value);
+      if (C <= 0) return;
+      const z = [];
+      T.forEach((s) => {
+        const E = s.style.display, W = s.style.opacity;
+        s.style.display = "", s.style.opacity = "0", L(s);
+        let r = e(s), I = $(s), v = I, B = 0;
+        if (r <= C)
+          z.push({ el: s, finalSize: I, fits: !0 });
+        else {
+          for (; r > C && v > c && B < _; )
+            v = Math.max(c, v - q), y(s, v), r = e(s), B += 1;
+          const P = r <= C && v > c;
+          z.push({ el: s, finalSize: v, fits: P }), y(s, I);
+        }
+        s.style.display = E, s.style.opacity = W;
+      });
+      const D = x && z.some((s) => !s.fits);
+      z.forEach(({ el: s, finalSize: E, fits: W }) => {
+        D ? s.style.display = "none" : (s.style.display = "", y(s, E));
+      });
+    }
+  };
+}
+const We = { key: 0 }, Be = { key: 1 }, He = ["xmlns", "viewBox"], Oe = ["width", "height"], Ve = ["id"], Re = ["stop-color"], Ue = ["stop-color"], Xe = ["id"], je = ["stop-color"], qe = ["stop-color"], Ge = ["id"], Pe = ["stop-color"], Ye = ["stop-color"], Je = ["height", "width", "fill", "x", "stroke", "stroke-width", "rx", "stroke-dasharray"], Ke = { key: 1 }, Qe = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], Ze = { key: 2 }, et = ["x", "y", "font-size", "font-weight", "fill"], tt = ["x", "y", "font-size", "fill"], lt = ["x", "y", "font-size", "fill"], at = ["height", "width", "x", "onMouseover", "onMouseleave", "onClick"], st = {
+  __name: "vue-ui-sparkhistogram",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(U, { emit: X }) {
+    ge((l) => ({
+      c8e2d1ee: ve.value
+    }));
+    const j = be(() => import("./PackageVersion-Bdp5L-7L.js")), { vue_ui_sparkhistogram: q } = ke(), _ = U, x = p(Ce()), S = p(null), N = p(null), $ = p(null), y = p(null), L = p(null), e = p(C()), { loading: G, FINAL_DATASET: i } = Fe({
+      ...me(_),
+      FINAL_CONFIG: e,
+      prepareConfig: C,
+      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: Ae({
+        defaultConfig: e.value,
+        userConfig: {
+          style: {
+            animation: { show: !1 },
+            backgroundColor: "#99999930"
+          }
+        }
+      })
+    }), c = p(e.value.style.layout.width), k = p(e.value.style.layout.height), { svgRef: T } = Te({ config: e.value.style.title });
+    function C() {
+      const l = ne({
+        userConfig: _.config,
+        defaultConfig: q
+      });
+      return l.theme ? {
+        ...ne({
+          userConfig: we.vue_ui_sparkhistogram[l.theme] || _.config,
+          defaultConfig: l
+        })
+      } : l;
+    }
+    Z(() => {
+      D();
+    });
+    const z = F(() => !!e.value.debug);
+    function D() {
+      if (ze(_.dataset) ? se({
+        componentName: "VueUiSparkHistogram",
+        type: "dataset",
+        debug: z.value
+      }) : _.dataset.forEach((l, n) => {
+        Se({
+          datasetObject: l,
+          requiredAttributes: ["value"]
+        }).forEach((t) => {
+          se({
+            componentName: "VueUiSparkHistogram",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: n,
+            debug: z.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = Le(() => {
+          const { width: n, height: t } = Me({
+            chart: $.value,
+            title: e.value.style.title.text ? N.value : null,
+            source: S.value
+          });
+          requestAnimationFrame(() => {
+            c.value = Math.max(10, n), k.value = Math.max(10, t - 12);
+          });
+        });
+        y.value && (L.value && y.value.unobserve(L.value), y.value.disconnect()), y.value = new ResizeObserver(l), L.value = $.value.parentNode, y.value.observe(L.value);
+      }
+    }
+    ee(() => _.config, (l) => {
+      e.value = C(), D();
+    }, { deep: !0 });
+    const s = F(() => {
+      const l = k.value, n = c.value, t = e.value.style.layout.padding.top, u = l - e.value.style.layout.padding.bottom, b = e.value.style.layout.padding.left, H = n - e.value.style.layout.padding.right, O = t + (l - t - e.value.style.layout.padding.bottom) / 2, Y = l - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom, V = n - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
+      return {
+        bottom: u,
+        centerY: O,
+        drawingHeight: Y,
+        drawingWidth: V,
+        height: l,
+        left: b,
+        right: H,
+        top: t,
+        width: n
+      };
+    }), E = F(() => Math.max(...i.value.map((l) => Math.abs(l.value || 0))));
+    function W(l) {
+      return Math.abs(l) / E.value;
+    }
+    const r = F(() => i.value.map((l, n) => {
+      const t = W(l.value || 0), u = s.value.drawingHeight * t, b = s.value.drawingWidth / i.value.length, H = b * (e.value.style.bars.gap / 100), O = b - H, Y = s.value.centerY - u / 2, V = s.value.left + (H / 2 + n * b), de = s.value.left + n * b, J = typeof l.intensity > "u" ? 100 : Math.round(l.intensity * 100), ye = l.color ? l.color : l.value >= 0 ? w(e.value.style.bars.colors.positive, J) : w(e.value.style.bars.colors.negative, J), he = l.color ? l.color : l.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, fe = l.color ? `url(#gradient_datapoint_${n}_${x.value})` : l.value >= 0 ? `url(#gradient_positive_${n}_${x.value})` : `url(#gradient_negative_${n}_${x.value})`, pe = V + O / 2;
+      return {
+        ...l,
+        color: ye,
+        gradient: fe,
+        height: u,
+        intensity: J,
+        proportion: t,
+        stroke: he,
+        textAnchor: pe,
+        trapX: de,
+        unitWidth: b,
+        width: O,
+        x: V,
+        y: Y
+      };
+    }));
+    function I(l, n) {
+      return oe(
+        e.value.style.labels.value.formatter,
+        l.value,
+        ie({
+          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: n }
+      );
+    }
+    const v = p(null), B = X;
+    function P(l, n) {
+      B("selectDatapoint", { datapoint: l, index: n }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: n });
+    }
+    function ue(l, n) {
+      v.value = n, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: n });
+    }
+    function re(l, n) {
+      v.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: n });
+    }
+    const ve = F(() => `${e.value.style.animation.speedMs}ms`), ce = F(() => s.value.drawingWidth / i.value.length * 0.9), { fitText: M } = De({
+      svgRef: T,
+      unitWidth: ce
+    });
+    return Z(async () => {
+      await Q(), M(".vue-ui-sparkhistogram-top-label", e.value.style.labels.value.minFontSize), M(".vue-ui-sparkhistogram-bottom-label", e.value.style.labels.valueLabel.minFontSize), M(".vue-ui-sparkhistogram-time-label", e.value.style.labels.timeLabel.minFontSize);
+    }), ee([c, k, () => i.value], async () => {
+      await Q(), M(".vue-ui-sparkhistogram-top-label", e.value.style.labels.value.minFontSize), M(".vue-ui-sparkhistogram-bottom-label", e.value.style.labels.valueLabel.minFontSize), M(".vue-ui-sparkhistogram-time-label", e.value.style.labels.timeLabel.minFontSize);
+    }), (l, n) => (a(), o("div", {
+      class: "vue-ui-spark-histogram",
+      ref_key: "histogramChart",
+      ref: $,
+      style: R(`width:100%;background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily}`),
+      onMouseleave: n[0] || (n[0] = (t) => v.value = null)
+    }, [
+      e.value.style.title.text ? (a(), o("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: N,
+        style: R(`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}`)
+      }, [
+        m("div", {
+          style: R(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
+        }, [
+          _e(A(e.value.style.title.text) + " ", 1),
+          v.value !== null ? (a(), o("span", We, "- " + A(r.value[v.value].timeLabel || "") + " " + A(d(oe)(
+            e.value.style.labels.value.formatter,
+            r.value[v.value].value,
+            d(ie)({
+              p: e.value.style.labels.value.prefix,
+              v: r.value[v.value].value,
+              s: e.value.style.labels.value.suffix,
+              r: e.value.style.labels.value.rounding
+            }),
+            { datapoint: r.value[v.value], seriesIndex: v.value }
+          )), 1)) : h("", !0),
+          ![void 0, null].includes(v.value) && ![null, void 0].includes(r.value[v.value].valueLabel) ? (a(), o("span", Be, "(" + A(r.value[v.value].valueLabel || 0) + ")", 1)) : h("", !0)
+        ], 4),
+        e.value.style.title.subtitle.text ? (a(), o("div", {
+          key: 0,
+          style: R(`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),
+      (a(), o("svg", {
+        ref_key: "svgRef",
+        ref: T,
+        xmlns: d($e),
+        viewBox: `0 0 ${s.value.width} ${s.value.height}`,
+        style: { overflow: "visible" }
+      }, [
+        xe(d(j)),
+        l.$slots["chart-background"] ? (a(), o("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: s.value.width,
+          height: s.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          le(l.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Oe)) : h("", !0),
+        m("defs", null, [
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("radialGradient", {
+            id: `gradient_positive_${u}_${x.value}`,
+            cy: "50%",
+            cx: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            m("stop", {
+              offset: "0%",
+              "stop-color": d(w)(d(K)(e.value.style.bars.colors.positive, 0.05), t.intensity)
+            }, null, 8, Re),
+            m("stop", {
+              offset: "100%",
+              "stop-color": d(w)(e.value.style.bars.colors.positive, t.intensity)
+            }, null, 8, Ue)
+          ], 8, Ve))), 256)),
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("radialGradient", {
+            id: `gradient_negative_${u}_${x.value}`,
+            cy: "50%",
+            cx: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            m("stop", {
+              offset: "0%",
+              "stop-color": d(w)(d(K)(e.value.style.bars.colors.negative, 0.05), t.intensity)
+            }, null, 8, je),
+            m("stop", {
+              offset: "100%",
+              "stop-color": d(w)(e.value.style.bars.colors.negative, t.intensity)
+            }, null, 8, qe)
+          ], 8, Xe))), 256)),
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("radialGradient", {
+            id: `gradient_datapoint_${u}_${x.value}`,
+            cy: "50%",
+            cx: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            m("stop", {
+              offset: "0%",
+              "stop-color": d(w)(d(K)(t.color, 0.05), t.intensity)
+            }, null, 8, Pe),
+            m("stop", {
+              offset: "100%",
+              "stop-color": d(w)(t.color, t.intensity)
+            }, null, 8, Ye)
+          ], 8, Ge))), 256))
+        ]),
+        (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("g", null, [
+          v.value !== null && v.value === u ? (a(), o("rect", {
+            key: 0,
+            height: s.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, Je)) : h("", !0)
+        ]))), 256)),
+        !e.value.style.bars.shape || e.value.style.bars.shape === "square" ? (a(), o("g", Ke, [
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("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: ae({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
+          }, null, 10, Qe))), 256))
+        ])) : (a(), o("g", Ze, [
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), te(Ee, {
+            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: ae({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
+          }, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
+        ])),
+        d(G) ? h("", !0) : (a(), o(f, { key: 3 }, [
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("text", {
+            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
+          }, A(I(t, u)), 9, et))), 256)),
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("g", null, [
+            t.valueLabel ? (a(), o("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
+            }, A(t.valueLabel), 9, tt)) : h("", !0)
+          ]))), 256)),
+          (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("g", null, [
+            t.timeLabel ? (a(), o("text", {
+              key: 0,
+              class: "vue-ui-sparkhistogram-time-label",
+              x: t.textAnchor,
+              y: s.value.height - e.value.style.labels.timeLabel.fontSize / 2,
+              "font-size": e.value.style.labels.timeLabel.fontSize,
+              fill: e.value.style.labels.timeLabel.color,
+              "text-anchor": "middle"
+            }, A(t.timeLabel), 9, lt)) : h("", !0)
+          ]))), 256))
+        ], 64)),
+        (a(!0), o(f, null, g(r.value, (t, u) => (a(), o("g", null, [
+          m("rect", {
+            height: s.value.height,
+            width: t.unitWidth,
+            fill: "transparent",
+            x: t.trapX,
+            y: 0,
+            onMouseover: (b) => ue(t, u),
+            onMouseleave: (b) => re(t, u),
+            onClick: () => P(t, u)
+          }, null, 40, at)
+        ]))), 256))
+      ], 8, He)),
+      l.$slots.source ? (a(), o("div", {
+        key: 1,
+        ref_key: "source",
+        ref: S,
+        dir: "auto"
+      }, [
+        le(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      d(G) ? (a(), te(Ne, { key: 2 })) : h("", !0)
+    ], 36));
+  }
+}, yt = /* @__PURE__ */ Ie(st, [["__scopeId", "data-v-f8e879db"]]);
+export {
+  yt as default
+};