vue-data-ui 3.15.12 → 3.16.1

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

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