vue-data-ui 3.0.0-next.62 → 3.0.0-next.63

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

@@ -1,444 +0,0 @@
-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-CwGyyfTA.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-Dd5rDkqs.js";
-import { u as Te } from "./useChartAccessibility-9icAAmYg.js";
-import { _ as Ee } from "./Shape-CVE1tn78.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-CvXTVTaQ.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
-};