vue-data-ui 2.12.6 → 2.12.7-beta.0

package/dist/vue-ui-sparkline-CoL8jiX8.js

@@ -0,0 +1,459 @@
+import { defineAsyncComponent as O, computed as h, ref as m, watch as Q, shallowRef as ee, onMounted as ke, onBeforeUnmount as xe, createElementBlock as v, openBlock as n, normalizeStyle as S, renderSlot as M, createCommentVNode as y, createBlock as te, normalizeProps as ae, guardReactiveProps as le, createElementVNode as f, toDisplayString as z, unref as i, createVNode as _e, Fragment as B, renderList as E, withCtx as we, createTextVNode as Le } from "vue";
+import { u as $e, c as Ne, a as Ce, C as ue, a3 as F, o as Me, e as oe, g as Ie, w as A, a4 as Ve, a5 as Se, X as ze, s as W, U as se, T as Ae, a6 as re, i as G, f as U } from "./index-BiHmNd1-.js";
+import { u as ne } from "./useNestedProp-tRqS0ZAM.js";
+import { t as We, u as Pe } from "./useResponsive-JZ9xq-JV.js";
+import { u as Re } from "./useChartAccessibility-9icAAmYg.js";
+import { _ as De } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Te = ["id"], Oe = ["xmlns", "viewBox"], Be = ["width", "height"], Ee = ["id"], Fe = ["stop-color"], Ge = ["stop-color"], Ue = ["id"], je = ["stop-color"], Xe = ["stop-color"], Ye = ["id"], qe = ["stop-color"], Ze = ["stop-color"], He = { key: 1 }, Je = ["d", "fill"], Ke = ["d", "fill"], Qe = ["d", "stroke", "stroke-width"], et = ["d", "stroke", "stroke-width"], tt = ["x", "y", "width", "height", "fill", "rx"], at = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], lt = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], ut = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ot = ["x", "y", "font-size", "font-weight", "fill"], st = ["x", "y", "height", "width", "onMouseenter", "onClick"], rt = {
+  __name: "vue-ui-sparkline",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    showInfo: {
+      type: Boolean,
+      default: !0
+    },
+    selectedIndex: {
+      type: Number,
+      default: void 0
+    },
+    heightRatio: {
+      type: Number,
+      default: 1
+    },
+    forcedPadding: {
+      type: Number,
+      default: 30
+    }
+  },
+  emits: ["hoverIndex", "selectDatapoint"],
+  setup(_, { emit: ie }) {
+    const de = O(() => import("./vue-ui-skeleton-CbYQYRvD.js")), ve = O(() => import("./PackageVersion-CLY-udAA.js")), ce = O(() => import("./SparkTooltip-CwThutH2.js")), { vue_ui_sparkline: he } = $e(), s = _, I = h(() => Array.isArray(s.dataset) && s.dataset.length > 0), p = m(Ne()), P = m(null), j = m(null), X = m(null), e = h({
+      get: () => q(),
+      set: (t) => t
+    }), { svgRef: Y } = Re({ config: e.value.style.title });
+    function q() {
+      const t = ne({
+        userConfig: s.config,
+        defaultConfig: he
+      });
+      let l = {};
+      return t.theme ? l = {
+        ...ne({
+          userConfig: Ce.vue_ui_sparkline[t.theme] || s.config,
+          defaultConfig: t
+        })
+      } : l = t, s.config && ue(s.config, "style.scaleMin") ? l.style.scaleMin = s.config.style.scaleMin : l.style.scaleMin = null, s.config && ue(s.config, "style.scaleMax") ? l.style.scaleMax = s.config.style.scaleMax : l.style.scaleMax = null, l;
+    }
+    const V = h(() => F({
+      data: s.dataset,
+      threshold: e.value.downsample.threshold
+    }));
+    Q(() => s.config, (t) => {
+      e.value = q(), Z(), u.value.chartWidth = e.value.style.chartWidth;
+    }, { deep: !0 }), Q(() => s.dataset, (t) => {
+      k.value = F({
+        data: s.dataset.map((l) => ({
+          ...l,
+          value: [void 0].includes(l.value) ? null : l.value
+        })),
+        threshold: e.value.downsample.threshold
+      });
+    }, { deep: !0 });
+    const k = m(ye());
+    function ye() {
+      return F({
+        data: s.dataset.map((t) => e.value.style.animation.show && s.dataset.length > 1 ? {
+          ...t,
+          value: null
+        } : {
+          ...t,
+          value: [void 0].includes(t.value) ? null : t.value
+        }),
+        threshold: e.value.downsample.threshold
+      });
+    }
+    const g = ee(null), w = ee(null);
+    ke(() => {
+      if (Z(), e.value.style.animation.show && s.dataset.length > 1) {
+        let a = function() {
+          l < V.value.length ? (k.value.push(V.value[l]), setTimeout(() => {
+            requestAnimationFrame(a);
+          }, t)) : k.value = V.value, l += 1;
+        };
+        k.value = [];
+        const t = e.value.style.animation.animationFrames / s.dataset.length;
+        let l = 0;
+        a();
+      }
+    });
+    function Z() {
+      if (Me(s.dataset) ? oe({
+        componentName: "VueUiSparkline",
+        type: "dataset"
+      }) : s.dataset.forEach((t, l) => {
+        Ie({
+          datasetObject: t,
+          requiredAttributes: ["period", "value"]
+        }).forEach((a) => {
+          oe({
+            componentName: "VueUiSparkline",
+            type: "datasetSerieAttribute",
+            property: a,
+            index: l
+          });
+        });
+      }), e.value.responsive) {
+        const t = We(() => {
+          const { width: l, height: a } = Pe({
+            chart: P.value,
+            title: e.value.style.title.show && s.showInfo ? j.value : null,
+            source: X.value
+          });
+          requestAnimationFrame(() => {
+            u.value.width = l, u.value.height = a, u.value.chartWidth = e.value.style.chartWidth / 500 * l, u.value.padding = s.forcedPadding / 500 * l;
+          });
+        });
+        g.value && (w.value && g.value.unobserve(w.value), g.value.disconnect()), g.value = new ResizeObserver(t), w.value = P.value.parentNode, g.value.observe(w.value);
+      }
+    }
+    xe(() => {
+      g.value && (w.value && g.value.unobserve(w.value), g.value.disconnect());
+    });
+    const u = m({
+      height: 80 * s.heightRatio,
+      width: 500,
+      chartWidth: e.value.style.chartWidth,
+      padding: s.forcedPadding
+    }), R = ie, o = h(() => {
+      const { top: t, right: l, bottom: a, left: r } = e.value.style.padding;
+      return {
+        top: t,
+        left: r,
+        right: u.value.width - l,
+        bottom: u.value.height - a,
+        start: s.showInfo && e.value.style.dataLabel.show && e.value.style.dataLabel.position === "left" ? u.value.width - u.value.chartWidth + r : u.value.padding + r,
+        width: s.showInfo && e.value.style.dataLabel.show ? u.value.chartWidth - r - l : u.value.width - u.value.padding - r - l,
+        height: u.value.height - t - a
+      };
+    }), D = h(() => [null, void 0].includes(e.value.style.scaleMin) ? Math.min(...k.value.map((t) => isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0)) : e.value.style.scaleMin), fe = h(() => [null, void 0].includes(e.value.style.scaleMax) ? Math.max(...k.value.map((t) => isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0)) : e.value.style.scaleMax), N = h(() => {
+      const t = D.value >= 0 ? 0 : D.value;
+      return Math.abs(t);
+    }), H = h(() => fe.value + N.value), L = h(() => o.value.bottom - o.value.height * T(N.value));
+    function T(t) {
+      return isNaN(t / H.value) ? 0 : t / H.value;
+    }
+    const x = h(() => V.value.length - 1), c = h(() => k.value.map((t, l) => {
+      const a = isNaN(t.value) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t.value) ? 0 : t.value || 0, r = o.value.width / (x.value + 1) > u.padding ? u.padding : o.value.width / (x.value + 1);
+      return {
+        absoluteValue: a,
+        period: t.period,
+        plotValue: a + N.value,
+        toMax: T(a + N.value),
+        x: o.value.start + l * (r > o.value.width / 12 ? o.value.width / 12 : r),
+        y: o.value.bottom - o.value.height * T(a + N.value),
+        id: `plot_${p.value}_${l}`,
+        color: C.value ? e.value.style.bar.color : e.value.style.area.useGradient ? A(e.value.style.line.color, 0.05 * (1 - l / x.value)) : e.value.style.line.color,
+        width: r > o.value.width / 12 ? o.value.width / 12 : r
+      };
+    })), pe = h(() => {
+      const t = { x: c.value[0].x || 0, y: (u.value.height || 0) - 6 }, l = { x: c.value[c.value.length - 1].x || 0, y: (u.value.height || 0) - 6 }, a = [];
+      return c.value.forEach((r) => {
+        a.push(`${r.x || 0},${r.y || 0} `);
+      }), [t.x, t.y, ...a, l.x, l.y].toString();
+    }), d = m(void 0), $ = m(void 0);
+    function ge(t, l) {
+      d.value = t, $.value || ($.value = t), R("hoverIndex", { index: l });
+    }
+    function be() {
+      $.value = d.value, d.value = void 0, R("hoverIndex", { index: void 0 });
+    }
+    const b = h(() => {
+      if (I.value) {
+        const t = c.value.map((a) => a.absoluteValue), l = t.reduce((a, r) => a + r, 0);
+        return {
+          latest: c.value[c.value.length - 1].absoluteValue,
+          sum: l,
+          average: l / c.value.length,
+          median: Se(t),
+          trend: Ve(c.value.map(({ x: a, y: r, absoluteValue: K }) => ({
+            x: a,
+            y: r,
+            value: K
+          }))).trend
+        };
+      } else
+        return {
+          latest: null,
+          sum: null,
+          average: null,
+          median: null,
+          trend: null
+        };
+    }), J = h(() => I.value ? e.value.style.dataLabel.valueType === "latest" ? b.value.latest : e.value.style.dataLabel.valueType === "sum" ? b.value.sum : e.value.style.dataLabel.valueType === "average" ? b.value.average : 0 : 0), C = h(() => e.value.type && e.value.type === "bar");
+    function me(t, l) {
+      R("selectDatapoint", { datapoint: t, index: l });
+    }
+    return (t, l) => (n(), v("div", {
+      ref_key: "sparklineChart",
+      ref: P,
+      class: "vue-ui-sparkline",
+      id: p.value,
+      style: S(`width:100%;font-family:${e.value.style.fontFamily};`)
+    }, [
+      M(t.$slots, "before", ae(le({
+        selected: d.value,
+        latest: b.value.latest,
+        sum: b.value.sum,
+        average: b.value.average,
+        median: b.value.median,
+        trend: b.value.trend
+      })), void 0, !0),
+      e.value.style.title.show && _.showInfo ? (n(), v("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: j,
+        class: "vue-ui-sparkline-title",
+        style: S(`display:flex;align-items:center;width:100%;color:${e.value.style.title.color};background:${e.value.style.backgroundColor};justify-content:${e.value.style.title.textAlign === "left" ? "flex-start" : e.value.style.title.textAlign === "right" ? "flex-end" : "center"};height:${e.value.style.title.fontSize * 2}px;font-size:${e.value.style.title.fontSize}px;font-weight:${e.value.style.title.bold ? "bold" : "normal"};`)
+      }, [
+        f("span", {
+          style: S(`padding:${e.value.style.title.textAlign === "left" ? "0 0 0 12px" : e.value.style.title.textAlign === "right" ? "0 12px 0 0" : "0"}`)
+        }, z(d.value ? d.value.period : e.value.style.title.text), 5)
+      ], 4)) : y("", !0),
+      I.value ? (n(), v("svg", {
+        key: 1,
+        ref_key: "svgRef",
+        ref: Y,
+        xmlns: i(ze),
+        viewBox: `0 0 ${u.value.width} ${u.value.height}`,
+        style: S(`background:${e.value.style.backgroundColor};overflow:visible`),
+        onMouseleave: l[0] || (l[0] = (a) => $.value = void 0)
+      }, [
+        _e(i(ve)),
+        t.$slots["chart-background"] ? (n(), v("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: u.value.width <= 0 ? 10 : u.value.width,
+          height: u.value.height <= 0 ? 10 : u.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          M(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Be)) : y("", !0),
+        f("defs", null, [
+          f("linearGradient", {
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            id: `sparkline_gradient_${p.value}`
+          }, [
+            f("stop", {
+              offset: "0%",
+              "stop-color": i(W)(i(A)(e.value.style.area.color, 0.05), e.value.style.area.opacity)
+            }, null, 8, Fe),
+            f("stop", {
+              offset: "100%",
+              "stop-color": i(W)(e.value.style.area.color, e.value.style.area.opacity)
+            }, null, 8, Ge)
+          ], 8, Ee),
+          f("linearGradient", {
+            x2: "0%",
+            y2: "100%",
+            id: `sparkline_bar_gradient_pos_${p.value}`
+          }, [
+            f("stop", {
+              offset: "0%",
+              "stop-color": e.value.style.bar.color
+            }, null, 8, je),
+            f("stop", {
+              offset: "100%",
+              "stop-color": i(A)(e.value.style.bar.color, 0.05)
+            }, null, 8, Xe)
+          ], 8, Ue),
+          f("linearGradient", {
+            x2: "0%",
+            y2: "100%",
+            id: `sparkline_bar_gradient_neg_${p.value}`
+          }, [
+            f("stop", {
+              offset: "0%",
+              "stop-color": i(A)(e.value.style.bar.color, 0.05)
+            }, null, 8, qe),
+            f("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.bar.color
+            }, null, 8, Ze)
+          ], 8, Ye)
+        ]),
+        e.value.style.area.show && !C.value && c.value[0] ? (n(), v("g", He, [
+          e.value.style.line.smooth ? (n(), v("path", {
+            key: 0,
+            d: `M ${c.value[0].x},${o.value.bottom} ${i(se)(c.value)} L ${c.value.at(-1).x},${o.value.bottom} Z`,
+            fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${p.value})` : i(W)(e.value.style.area.color, e.value.style.area.opacity)
+          }, null, 8, Je)) : (n(), v("path", {
+            key: 1,
+            d: `M${pe.value}Z`,
+            fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${p.value})` : i(W)(e.value.style.area.color, e.value.style.area.opacity)
+          }, null, 8, Ke))
+        ])) : y("", !0),
+        e.value.style.line.smooth && !C.value ? (n(), v("path", {
+          key: 2,
+          d: `M ${i(se)(c.value)}`,
+          stroke: e.value.style.line.color,
+          fill: "none",
+          "stroke-width": e.value.style.line.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, Qe)) : y("", !0),
+        !e.value.style.line.smooth && !C.value ? (n(), v("path", {
+          key: 3,
+          d: `M ${i(Ae)(c.value)}`,
+          stroke: e.value.style.line.color,
+          fill: "none",
+          "stroke-width": e.value.style.line.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, et)) : y("", !0),
+        (n(!0), v(B, null, E(c.value, (a, r) => (n(), v("g", null, [
+          C.value ? (n(), v("rect", {
+            key: 0,
+            x: a.x - a.width / 2,
+            y: isNaN(a.absoluteValue > 0 ? a.y : L.value) ? 0 : a.absoluteValue > 0 ? a.y : L.value,
+            width: a.width,
+            height: isNaN(Math.abs(a.y - L.value)) ? 0 : Math.abs(a.y - L.value),
+            fill: a.absoluteValue > 0 ? `url(#sparkline_bar_gradient_pos_${p.value})` : `url(#sparkline_bar_gradient_neg_${p.value})`,
+            rx: e.value.style.bar.borderRadius
+          }, null, 8, tt)) : y("", !0),
+          e.value.style.verticalIndicator.show && (d.value && a.id === d.value.id || _.selectedIndex === r) ? (n(), v("line", {
+            key: 1,
+            x1: a.x,
+            x2: a.x,
+            y1: o.value.top - 6,
+            y2: o.value.bottom,
+            stroke: e.value.style.verticalIndicator.color || a.color,
+            "stroke-width": e.value.style.verticalIndicator.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-dasharray": e.value.style.verticalIndicator.strokeDasharray || 0
+          }, null, 8, at)) : y("", !0)
+        ]))), 256)),
+        D.value < 0 ? (n(), v("line", {
+          key: 4,
+          x1: o.value.start,
+          x2: o.value.start + o.value.width - 16,
+          y1: i(re)(L.value, o.value.bottom),
+          y2: i(re)(L.value, o.value.bottom),
+          stroke: e.value.style.zeroLine.color,
+          "stroke-dasharray": e.value.style.zeroLine.strokeWidth * 2,
+          "stroke-width": e.value.style.zeroLine.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, lt)) : y("", !0),
+        e.value.style.plot.show ? (n(!0), v(B, { key: 5 }, E(c.value, (a, r) => (n(), v("g", null, [
+          d.value && a.id === d.value.id || _.selectedIndex === r || _.dataset.length === 1 ? (n(), v("circle", {
+            key: 0,
+            cx: a.x,
+            cy: a.y,
+            r: e.value.style.plot.radius,
+            fill: a.color,
+            stroke: e.value.style.plot.stroke,
+            "stroke-width": e.value.style.plot.strokeWidth
+          }, null, 8, ut)) : y("", !0)
+        ]))), 256)) : y("", !0),
+        _.showInfo && e.value.style.dataLabel.show ? (n(), v("text", {
+          key: 6,
+          x: e.value.style.dataLabel.position === "left" ? 12 + e.value.style.dataLabel.offsetX : o.value.width + 12 + e.value.style.dataLabel.offsetX,
+          y: u.value.height / 2 + e.value.style.dataLabel.fontSize / 2.5 + e.value.style.dataLabel.offsetY,
+          "font-size": e.value.style.dataLabel.fontSize,
+          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal",
+          fill: e.value.style.dataLabel.color
+        }, z(d.value ? i(G)(
+          e.value.style.dataLabel.formatter,
+          d.value.absoluteValue,
+          i(U)({ p: e.value.style.dataLabel.prefix, v: d.value.absoluteValue, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue }),
+          { datapoint: d.value }
+        ) : i(G)(
+          e.value.style.dataLabel.formatter,
+          J.value,
+          i(U)({ p: e.value.style.dataLabel.prefix, v: J.value, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue })
+        )), 9, ot)) : y("", !0),
+        (n(!0), v(B, null, E(c.value, (a, r) => (n(), v("rect", {
+          x: a.x - (o.value.width / (x.value + 1) > u.value.padding ? u.value.padding : o.value.width / (x.value + 1)) / 2,
+          y: o.value.top - 6,
+          height: o.value.height + 6,
+          width: o.value.width / (x.value + 1) > u.value.padding ? u.value.padding : o.value.width / (x.value + 1),
+          fill: "transparent",
+          onMouseenter: (K) => ge(a, r),
+          onMouseleave: be,
+          onClick: () => me(a, r)
+        }, null, 40, st))), 256)),
+        M(t.$slots, "svg", { svg: u.value }, void 0, !0)
+      ], 44, Oe)) : y("", !0),
+      d.value && e.value.style.tooltip.show ? (n(), te(i(ce), {
+        key: 2,
+        x: d.value.x,
+        y: d.value.y,
+        prevX: $.value.x,
+        prevY: $.value.y,
+        offsetY: e.value.style.plot.radius * 3 + e.value.style.tooltip.offsetY,
+        svgRef: i(Y),
+        background: e.value.style.tooltip.backgroundColor,
+        color: e.value.style.tooltip.color,
+        fontSize: e.value.style.tooltip.fontSize,
+        borderWidth: e.value.style.tooltip.borderWidth,
+        borderColor: e.value.style.tooltip.borderColor,
+        borderRadius: e.value.style.tooltip.borderRadius,
+        backgroundOpacity: e.value.style.tooltip.backgroundOpacity
+      }, {
+        default: we(() => [
+          M(t.$slots, "tooltip", ae(le({ ...d.value })), () => [
+            Le(z(d.value.period) + ": " + z(i(G)(
+              e.value.style.dataLabel.formatter,
+              d.value.absoluteValue,
+              i(U)({
+                p: e.value.style.dataLabel.prefix,
+                v: d.value.absoluteValue,
+                s: e.value.style.dataLabel.suffix,
+                r: e.value.style.dataLabel.roundingValue
+              }),
+              { datapoint: d.value }
+            )), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["x", "y", "prevX", "prevY", "offsetY", "svgRef", "background", "color", "fontSize", "borderWidth", "borderColor", "borderRadius", "backgroundOpacity"])) : y("", !0),
+      t.$slots.source ? (n(), v("div", {
+        key: 3,
+        ref_key: "source",
+        ref: X,
+        dir: "auto"
+      }, [
+        M(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      I.value ? y("", !0) : (n(), te(i(de), {
+        key: 4,
+        config: {
+          type: "sparkline",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            sparkline: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"]))
+    ], 12, Te));
+  }
+}, yt = /* @__PURE__ */ De(rt, [["__scopeId", "data-v-3966b3be"]]);
+export {
+  yt as default
+};