vue-data-ui 3.6.0 → 3.7.0

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

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