vue-data-ui 3.17.13 → 3.18.1

package/dist/vue-ui-spark-trend-D8KGIt-R.js

@@ -1,423 +0,0 @@
-import { defineAsyncComponent as _e, ref as c, computed as s, toRefs as $e, watch as P, nextTick as le, onMounted as we, openBlock as o, createElementBlock as r, normalizeStyle as xe, createElementVNode as N, toDisplayString as Z, unref as i, createVNode as Le, renderSlot as H, createCommentVNode as y, createBlock as Ce } from "vue";
-import { j as Te, t as ae, H as ne, o as W, q as Ae, K as L, an as Ne, l as I, k as ue, X as Se, u as q, c as se } from "./lib-DMzrGQHK.js";
-import { t as ze, u as Fe } from "./useResponsive-DfdjqQps.js";
-import { u as Me } from "./useConfig-CG4HT3wS.js";
-import { u as Ie, B as Ve } from "./BaseScanner-C2j3TsSY.js";
-import { u as je } from "./useFitSvgText-2crs6Fv5.js";
-import { u as U } from "./useNestedProp-DH0BEVVS.js";
-import { u as De } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as Ee } from "./usePrefersMotion-Co0nj1eS.js";
-import Be from "./vue_ui_spark_trend-3BjrSprO.js";
-import { _ as Oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Re = ["id", "aria-describedby"], Ge = ["id"], Pe = ["xmlns", "viewBox"], Ze = ["width", "height"], He = ["id"], We = ["stop-color"], qe = ["stop-color"], Ue = { key: 1 }, Ke = ["d", "fill"], Xe = ["d", "fill"], Je = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], Qe = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], Ye = ["d"], et = ["fill", "d"], tt = ["x", "y", "width", "height"], lt = ["x", "y", "fill", "font-size", "font-weight"], at = ["stroke", "cx", "cy", "fill"], nt = ["x", "y", "font-size", "fill", "font-weight"], ut = {
-  __name: "vue-ui-spark-trend",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  setup(oe) {
-    const re = _e(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), { vue_ui_spark_trend: ie } = Me(), { isThemeValid: ve, warnInvalidTheme: de } = De(), S = Ee(), h = oe, V = c(null), K = c(null), X = c(null), C = c(null), z = c(null), T = c(!1), p = c(null), $ = c(Te()), e = c(E()), fe = s(() => ae({
-      defaultConfig: {
-        style: {
-          animation: { show: !1 },
-          backgroundColor: "#99999930",
-          line: {
-            stroke: "#6A6A6A",
-            useColorTrend: !1
-          },
-          dataLabel: {
-            show: !1,
-            useColorTrend: !1,
-            color: "#6A6A6A"
-          }
-        }
-      },
-      userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: k, FINAL_DATASET: j, manualLoading: D } = Ie({
-      ...$e(h),
-      FINAL_CONFIG: e,
-      prepareConfig: E,
-      skeletonDataset: h.config?.skeletonDataset ?? [
-        1,
-        2,
-        3,
-        5,
-        8,
-        13,
-        21,
-        34,
-        55,
-        89,
-        144,
-        233
-      ],
-      skeletonConfig: ae({
-        defaultConfig: e.value,
-        userConfig: fe.value
-      })
-    });
-    function E() {
-      const t = U({
-        userConfig: h.config,
-        defaultConfig: ie
-      }), l = t.theme;
-      if (!l) return t;
-      if (!ve.value(t))
-        return de(t), t;
-      const n = U({
-        userConfig: Be[l] || h.config,
-        defaultConfig: t
-      });
-      return U({
-        userConfig: h.config,
-        defaultConfig: n
-      });
-    }
-    const g = s(
-      () => ne({
-        data: j.value,
-        threshold: e.value.downsample.threshold
-      })
-    );
-    P(
-      () => h.config,
-      (t) => {
-        e.value = E(), R.value = e.value.style.width, w.value = e.value.style.height, J();
-      },
-      { deep: !0 }
-    );
-    function B(t) {
-      return t.map((l) => L(l));
-    }
-    const _ = c(
-      ne({
-        data: j.value,
-        threshold: e.value.downsample.threshold
-      }).map((t) => e.value.style.animation.show && !S.value || [void 0, 1 / 0, -1 / 0, null, NaN].includes(t) ? null : t)
-    );
-    P(
-      g,
-      (t) => {
-        p.value && (cancelAnimationFrame(p.value), p.value = null), e.value.style.animation.show && !S.value ? _.value = Array(t.length).fill(null) : _.value = t.map(
-          (l) => ![void 0, 1 / 0, -1 / 0, null].includes(l) && !Number.isNaN(l) ? l : null
-        ), O(), le(() => M(".vue-ui-sparktrend-progress-label", 6));
-      },
-      { deep: !0, immediate: !0 }
-    ), P(
-      () => JSON.stringify(h.dataset),
-      () => {
-        p.value && (cancelAnimationFrame(p.value), p.value = null), D.value = W(h.dataset);
-        const t = g.value;
-        _.value = e.value.style.animation.show && !S.value ? Array(t.length).fill(null) : t.map((l) => Number.isFinite(l) ? l : null), O(), le(() => M(".vue-ui-sparktrend-progress-label", 6));
-      },
-      { deep: !1, immediate: !0 }
-    );
-    function O() {
-      let l = 1e3 / e.value.style.animation.animationFrames, n = performance.now();
-      if (!k.value && e.value.style.animation.show && !S.value && e.value.style.animation.animationFrames && j.value.length > 1) {
-        let b = function() {
-          T.value = !0;
-          let ee = performance.now(), te = ee - n;
-          te > l ? (n = ee - te % l, v < g.value.length ? (_.value.push(g.value[v]), v += 1, p.value = requestAnimationFrame(b)) : (cancelAnimationFrame(p.value), _.value = B(g.value), T.value = !1, M(".vue-ui-sparktrend-progress-label", 6))) : p.value = requestAnimationFrame(b);
-        };
-        _.value = [];
-        let v = 0;
-        b();
-      }
-    }
-    we(() => {
-      J();
-    });
-    const ce = s(() => e.value.debug);
-    function J() {
-      if (W(h.dataset) && (Ae({
-        componentName: "VueUiSparkTrend",
-        type: "dataset",
-        debug: ce.value
-      }), D.value = !0), W(h.dataset) || (D.value = !1), e.value.responsive) {
-        const t = ze(() => {
-          const { width: l, height: n } = Fe({
-            chart: V.value,
-            source: X.value
-          });
-          requestAnimationFrame(() => {
-            R.value = l, w.value = n;
-          });
-        });
-        C.value && (z.value && C.value.unobserve(z.value), C.value.disconnect()), C.value = new ResizeObserver(t), z.value = V.value.parentNode, C.value.observe(z.value);
-      }
-      O(), M(".vue-ui-sparktrend-progress-label", 6);
-    }
-    const R = c(e.value.style.width), w = c(e.value.style.height), d = s(() => ({
-      height: w.value,
-      width: R.value
-    })), u = s(() => ({
-      top: e.value.style.padding.top,
-      left: e.value.style.padding.left,
-      right: d.value.width - e.value.style.padding.right,
-      bottom: d.value.height - e.value.style.padding.bottom,
-      height: d.value.height - (e.value.style.padding.top + e.value.style.padding.bottom) - (e.value.style.dataLabel.show ? e.value.style.dataLabel.fontSize : 0),
-      width: d.value.width - (e.value.style.padding.left + e.value.style.padding.right)
-    })), G = s(() => {
-      const t = B(g.value).filter(Number.isFinite);
-      if (!t.length) return { max: 0, min: 0 };
-      let l = t[0], n = t[0];
-      for (let v = 1; v < t.length; v++) {
-        const b = t[v];
-        b > l && (l = b), b < n && (n = b);
-      }
-      return { max: l, min: n };
-    }), he = s(() => {
-      const t = g.value, l = t.length ? t[t.length - 1] : "x";
-      return [
-        $.value,
-        t.length,
-        Number.isFinite(l) ? l : "x",
-        e.value.downsample.threshold,
-        e.value.style.line.smooth ? "s" : "l"
-      ].join("-");
-    }), F = s(() => {
-      const t = G.value.min >= 0 ? 0 : G.value.min;
-      return Math.abs(t);
-    }), ye = s(() => G.value.max + F.value);
-    function Q(t) {
-      return t / ye.value;
-    }
-    const pe = s(() => g.value.length), a = s(() => _.value.map((t, l) => {
-      const n = isNaN(t) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t) ? 0 : t || 0;
-      return {
-        value: L(t),
-        absoluteValue: L(n),
-        plotValue: L(n + F.value),
-        toMax: Q(n + F.value),
-        x: u.value.left + L(l * (u.value.width / (pe.value - 1))) - e.value.style.padding.right,
-        y: u.value.bottom - L(
-          u.value.height * Q(n + F.value)
-        )
-      };
-    })), x = s(() => {
-      const t = B(g.value);
-      return e.value.style.trendLabel.trendType === "global" ? Ne(t) : e.value.style.trendLabel.trendType === "n-1" && t.length > 1 ? (t.at(-1) / t.at(-2) - 1) * 100 : e.value.style.trendLabel.trendType === "lastToFirst" ? (t.at(-1) / t[0] - 1) * 100 : 0;
-    }), A = s(() => T.value || x.value === 0 ? "neutral" : x.value > 0 ? "positive" : "negative"), m = s(() => e.value.style.arrow.colors[A.value]), ge = s(() => {
-      const t = { x: a.value[0].x, y: d.value.height - 6 }, l = {
-        x: a.value[a.value.length - 1].x,
-        y: d.value.height - 6
-      }, n = [];
-      return a.value.forEach((v) => {
-        n.push(`${v.x},${v.y} `);
-      }), [t.x, t.y, ...n, l.x, l.y].toString();
-    }), me = s(() => {
-      let t = [];
-      return a.value.forEach((l) => {
-        t.push(`${l.x},${l.y} `);
-      }), `M ${t.toString()}`;
-    }), f = s(() => w.value / 2 - e.value.style.trendLabel.fontSize), be = s(() => u.value.left * 0.8), { fitText: M } = je({
-      svgRef: K,
-      unitWidth: be,
-      fontSize: e.value.style.trendLabel.fontSize
-    }), ke = s(() => {
-      if (k.value || T.value)
-        return "Trend chart loading";
-      const t = a.value?.at(-1), l = t?.value, n = I({
-        p: x.value > 0 ? "+" : "",
-        v: x.value,
-        s: "%",
-        r: e.value.style.trendLabel.rounding
-      }), v = l == null ? "not available" : ue(
-        e.value.style.dataLabel.formatter,
-        l,
-        I({
-          p: e.value.style.dataLabel.prefix,
-          v: l,
-          s: e.value.style.dataLabel.suffix,
-          r: e.value.style.dataLabel.rounding
-        }),
-        { datapoint: t }
-      );
-      return `Progression ${A.value === "positive" ? `up ${n}` : A.value === "negative" ? `down ${n}` : `stable at ${n}`}. Last value ${v}.`;
-    }), Y = s(() => `sparktrend-a11y-${$.value}`);
-    return (t, l) => (o(), r("div", {
-      ref_key: "sparkTrendChart",
-      ref: V,
-      class: "vue-data-ui-component vue-ui-spark-trend",
-      id: $.value,
-      style: xe(`width:100%;font-family:${e.value.style.fontFamily};background:${e.value.style.backgroundColor}`),
-      role: "img",
-      "aria-describedby": Y.value
-    }, [
-      N("p", {
-        id: Y.value,
-        class: "sr-only",
-        "aria-live": "polite"
-      }, Z(ke.value), 9, Ge),
-      (o(), r("svg", {
-        key: he.value,
-        ref_key: "svgRef",
-        ref: K,
-        xmlns: i(Se),
-        viewBox: `0 0 ${d.value.width} ${d.value.height}`,
-        style: "width:100%;background:transparent;overflow:visible",
-        "aria-hidden": "true"
-      }, [
-        Le(i(re)),
-        t.$slots["chart-background"] ? (o(), r("foreignObject", {
-          key: 0,
-          x: 0,
-          y: 0,
-          width: d.value.width <= 0 ? 10 : d.value.width,
-          height: d.value.height <= 0 ? 10 : d.value.height,
-          style: {
-            pointerEvents: "none"
-          }
-        }, [
-          H(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ze)) : y("", !0),
-        N("defs", null, [
-          N("linearGradient", {
-            x1: "0%",
-            y1: "0%",
-            x2: "0%",
-            y2: "100%",
-            id: `pill_gradient_${$.value}`
-          }, [
-            N("stop", {
-              offset: "0%",
-              "stop-color": i(q)(
-                e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke,
-                e.value.style.area.opacity
-              )
-            }, null, 8, We),
-            N("stop", {
-              offset: "100%",
-              "stop-color": e.value.style.backgroundColor
-            }, null, 8, qe)
-          ], 8, He)
-        ]),
-        e.value.style.area.show && a.value[0] ? (o(), r("g", Ue, [
-          e.value.style.line.smooth ? (o(), r("path", {
-            key: 0,
-            d: `M ${a.value[0].x},${u.value.bottom} ${i(se)(a.value)} L ${a.value.at(-1).x},${u.value.bottom} Z`,
-            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${$.value})` : i(q)(
-              e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke,
-              e.value.style.area.opacity
-            ),
-            stroke: "none"
-          }, null, 8, Ke)) : (o(), r("path", {
-            key: 1,
-            d: `M${ge.value}Z`,
-            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${$.value})` : i(q)(
-              e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke,
-              e.value.style.area.opacity
-            ),
-            stroke: "none"
-          }, null, 8, Xe))
-        ])) : y("", !0),
-        e.value.style.line.smooth && a.value.length ? (o(), r("path", {
-          key: 2,
-          d: `M ${i(se)(a.value)}`,
-          stroke: e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke,
-          fill: "none",
-          "stroke-width": e.value.style.line.strokeWidth,
-          "stroke-linecap": e.value.style.line.strokeLinecap,
-          "stroke-linejoin": e.value.style.line.strokeLinejoin
-        }, null, 8, Je)) : y("", !0),
-        !e.value.style.line.smooth && a.value.length ? (o(), r("path", {
-          key: 3,
-          d: me.value,
-          stroke: e.value.style.line.useColorTrend ? m.value : e.value.style.line.stroke,
-          fill: "none",
-          "stroke-width": e.value.style.line.strokeWidth,
-          "stroke-linecap": e.value.style.line.strokeLinecap,
-          "stroke-linejoin": e.value.style.line.strokeLinejoin
-        }, null, 8, Qe)) : y("", !0),
-        i(k) ? (o(), r("path", {
-          key: 4,
-          fill: "#6A6A6A",
-          d: `M ${u.value.left / 2 + 6}, ${f.value + 7} ${u.value.left / 2 - 7}, ${f.value} ${u.value.left / 2 - 7}, ${f.value + 14} Z`
-        }, null, 8, Ye)) : (o(), r("path", {
-          key: 5,
-          fill: m.value,
-          d: A.value === "positive" ? `M ${u.value.left / 2}, ${f.value} ${u.value.left / 2 - 7}, ${f.value + 12} ${u.value.left / 2 + 7}, ${f.value + 12} Z` : A.value === "negative" ? `M ${u.value.left / 2}, ${f.value + 12} ${u.value.left / 2 - 7}, ${f.value} ${u.value.left / 2 + 7}, ${f.value} Z` : `M ${u.value.left / 2 + 6}, ${f.value + 7} ${u.value.left / 2 - 7}, ${f.value} ${u.value.left / 2 - 7}, ${f.value + 14} Z`
-        }, null, 8, et)),
-        i(k) ? (o(), r("rect", {
-          key: 6,
-          x: u.value.left / 2 - e.value.style.trendLabel.fontSize - 2,
-          y: w.value / 2 + e.value.style.trendLabel.fontSize - 2,
-          width: e.value.style.trendLabel.fontSize * 2,
-          height: e.value.style.trendLabel.fontSize,
-          fill: "#6A6A6A80",
-          rx: "3"
-        }, null, 8, tt)) : y("", !0),
-        !T.value && !i(k) ? (o(), r("text", {
-          key: 7,
-          class: "vue-ui-sparktrend-progress-label",
-          x: u.value.left / 2,
-          y: w.value / 2 + e.value.style.trendLabel.fontSize * 2,
-          "text-anchor": "middle",
-          fill: e.value.style.trendLabel.useColorTrend ? m.value : e.value.style.trendLabel.color,
-          "font-size": e.value.style.trendLabel.fontSize,
-          "font-weight": e.value.style.trendLabel.bold ? "bold" : "normal"
-        }, Z(i(I)({
-          p: x.value > 0 ? "+" : "",
-          v: x.value,
-          s: "%",
-          r: e.value.style.trendLabel.rounding
-        })), 9, lt)) : y("", !0),
-        a.value.length && a.value.at(-1).x !== void 0 ? (o(), r("circle", {
-          key: 8,
-          stroke: e.value.style.backgroundColor,
-          "stroke-width": 2,
-          cx: a.value.at(-1).x,
-          cy: a.value.at(-1).y,
-          r: 4,
-          fill: i(k) ? "#6A6A6A" : m.value
-        }, null, 8, at)) : y("", !0),
-        a.value.length && a.value.at(-1).x !== void 0 && e.value.style.dataLabel.show ? (o(), r("text", {
-          key: 9,
-          "text-anchor": "middle",
-          x: a.value.at(-1).x,
-          y: a.value.at(-1).y - e.value.style.dataLabel.fontSize / 1.5,
-          "font-size": e.value.style.dataLabel.fontSize,
-          fill: e.value.style.dataLabel.useColorTrend ? m.value : e.value.style.dataLabel.color,
-          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
-        }, Z(i(ue)(
-          e.value.style.dataLabel.formatter,
-          a.value.at(-1).value,
-          i(I)({
-            p: e.value.style.dataLabel.prefix,
-            v: a.value.at(-1).value,
-            s: e.value.style.dataLabel.suffix,
-            r: e.value.style.dataLabel.rounding
-          }),
-          { datapoint: a.value.at(-1) }
-        )), 9, nt)) : y("", !0)
-      ], 8, Pe)),
-      t.$slots.source ? (o(), r("div", {
-        key: 0,
-        ref_key: "source",
-        ref: X,
-        dir: "auto"
-      }, [
-        H(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      H(t.$slots, "skeleton", {}, () => [
-        i(k) ? (o(), Ce(Ve, { key: 0 })) : y("", !0)
-      ], !0)
-    ], 12, Re));
-  }
-}, gt = /* @__PURE__ */ Oe(ut, [["__scopeId", "data-v-90a4c498"]]);
-export {
-  gt as default
-};