import { computed as s, ref as k, watch as E, onMounted as K, openBlock as o, createElementBlock as u, normalizeStyle as Q, createBlock as L, unref as h, createVNode as Y, renderSlot as D, createCommentVNode as r, createElementVNode as _, toDisplayString as O } from "vue";
import { u as ee, c as te, t as ae, Z as S, o as le, e as ne, v as c, _ as oe, X as se, s as M, R as G, f as U, i as ue } from "./index-MWHrTFPq.js";
import { u as Z } from "./useNestedProp-CTDeT4KA.js";
import I from "./BaseIcon-CgOl0yXt.js";
import re from "./vue-ui-skeleton-Bo8ydREb.js";
import { _ as ie } from "./PackageVersion-CBKqLhAX.js";
import { _ as de } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ve = ["id"], he = ["xmlns", "viewBox"], ce = ["width", "height"], ye = ["id"], fe = ["stop-color"], pe = ["stop-color"], ge = { key: 1 }, me = ["d", "fill"], ke = ["d", "fill"], _e = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], be = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], we = ["height", "width", "x"], xe = { style: { width: "100%" } }, Ce = ["x", "y", "fill", "font-size", "font-weight"], Le = ["stroke", "cx", "cy", "fill"], $e = ["x", "y", "font-size", "fill", "font-weight"], Ne = {
  key: 2,
  ref: "source",
  dir: "auto"
}, Te = {
  __name: "vue-ui-spark-trend",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  setup(q) {
    const i = q, { vue_ui_spark_trend: P } = ee(), R = s(() => !!i.dataset && i.dataset.length), b = k(te()), e = s({
      get: () => F(),
      set: (t) => t
    });
    function F() {
      const t = Z({
        userConfig: i.config,
        defaultConfig: P
      });
      return t.theme ? {
        ...Z({
          userConfig: ae.vue_ui_spark_trend[t.theme] || i.config,
          defaultConfig: t
        })
      } : t;
    }
    const f = s(() => S({
      data: i.dataset,
      threshold: e.value.downsample.threshold
    }));
    E(() => i.config, (t) => {
      e.value = F(), j();
    }, { deep: !0 }), E(() => i.dataset, (t) => {
      g.value = S({
        data: i.dataset,
        threshold: e.value.downsample.threshold
      }).map((n) => [void 0, 1 / 0, -1 / 0, null, NaN].includes(n) ? null : n);
    }, { deep: !0 });
    function $(t) {
      return t.map((n) => c(n));
    }
    const g = k(S({
      data: i.dataset,
      threshold: e.value.downsample.threshold
    }).map((t) => e.value.style.animation.show || [void 0, 1 / 0, -1 / 0, null, NaN].includes(t) ? null : t)), m = k(!1), N = k(null);
    K(() => {
      j();
      let n = 1e3 / e.value.style.animation.animationFrames, v = performance.now();
      if (e.value.style.animation.show && e.value.style.animation.animationFrames && i.dataset.length > 1) {
        let z = function() {
          m.value = !0;
          let B = performance.now(), V = B - v;
          V > n ? (v = B - V % n, p < f.value.length ? (g.value.push(f.value[p]), p += 1, N.value = requestAnimationFrame(z)) : (cancelAnimationFrame(N.value), g.value = $(f.value), m.value = !1)) : N.value = requestAnimationFrame(z);
        };
        g.value = [];
        let p = 0;
        z();
      }
    });
    function j() {
      le(i.dataset) && ne({
        componentName: "VueUiSparkTrend",
        type: "dataset"
      });
    }
    const l = k({
      height: 80,
      width: 300
    }), y = s(() => ({
      top: e.value.style.padding.top,
      left: e.value.style.padding.left,
      right: l.value.width - e.value.style.padding.right,
      bottom: l.value.height - e.value.style.padding.bottom,
      height: l.value.height - (e.value.style.padding.top + e.value.style.padding.bottom) - (e.value.style.dataLabel.show ? e.value.style.dataLabel.fontSize : 0),
      width: l.value.width - (e.value.style.padding.left + e.value.style.padding.right)
    })), T = s(() => {
      const t = $(f.value);
      return {
        max: Math.max(...t.map((n) => c(n))),
        min: Math.min(...t.map((n) => c(n)))
      };
    }), w = s(() => {
      const t = T.value.min >= 0 ? 0 : T.value.min;
      return Math.abs(t);
    }), W = s(() => T.value.max + w.value);
    function A(t) {
      return t / W.value;
    }
    const X = s(() => f.value.length), a = s(() => g.value.map((t, n) => {
      const v = isNaN(t) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t) ? 0 : t || 0;
      return {
        value: c(t),
        absoluteValue: c(v),
        plotValue: c(v + w.value),
        toMax: A(v + w.value),
        x: y.value.left + c(n * (y.value.width / (X.value - 1))) - e.value.style.padding.right,
        y: y.value.bottom - c(y.value.height * A(v + w.value))
      };
    })), x = s(() => {
      const t = $(f.value);
      return e.value.style.trendLabel.trendType === "global" ? oe(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;
    }), C = s(() => m.value || x.value === 0 ? "neutral" : x.value > 0 ? "positive" : "negative"), d = s(() => e.value.style.arrow.colors[C.value]), H = s(() => {
      const t = { x: a.value[0].x, y: l.value.height - 6 }, n = { x: a.value[a.value.length - 1].x, y: l.value.height - 6 }, v = [];
      return a.value.forEach((p) => {
        v.push(`${p.x},${p.y} `);
      }), [t.x, t.y, ...v, n.x, n.y].toString();
    }), J = s(() => {
      let t = [];
      return a.value.forEach((n) => {
        t.push(`${n.x},${n.y} `);
      }), `M ${t.toString()}`;
    });
    return (t, n) => (o(), u("div", {
      class: "vue-ui-spark-trend",
      id: b.value,
      style: Q(`width:100%;font-family:${e.value.style.fontFamily};background:${e.value.style.backgroundColor}`)
    }, [
      R.value ? (o(), u("svg", {
        key: 1,
        xmlns: h(se),
        viewBox: `0 0 ${l.value.width} ${l.value.height}`,
        style: "width:100%;background:transparent;overflow:visible"
      }, [
        Y(ie),
        t.$slots["chart-background"] ? (o(), u("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: l.value.width <= 0 ? 10 : l.value.width,
          height: l.value.height <= 0 ? 10 : l.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          D(t.$slots, "chart-background", {}, void 0, !0)
        ], 8, ce)) : r("", !0),
        _("defs", null, [
          _("linearGradient", {
            x1: "0%",
            y1: "0%",
            x2: "0%",
            y2: "100%",
            id: `pill_gradient_${b.value}`
          }, [
            _("stop", {
              offset: "0%",
              "stop-color": h(M)(e.value.style.line.useColorTrend ? d.value : e.value.style.line.stroke, e.value.style.area.opacity)
            }, null, 8, fe),
            _("stop", {
              offset: "100%",
              "stop-color": e.value.style.backgroundColor
            }, null, 8, pe)
          ], 8, ye)
        ]),
        e.value.style.area.show && a.value[0] ? (o(), u("g", ge, [
          e.value.style.line.smooth ? (o(), u("path", {
            key: 0,
            d: `M ${a.value[0].x},${y.value.bottom} ${h(G)(a.value)} L ${a.value.at(-1).x},${y.value.bottom} Z`,
            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${b.value})` : h(M)(e.value.style.line.useColorTrend ? d.value : e.value.style.line.stroke, e.value.style.area.opacity),
            stroke: "none"
          }, null, 8, me)) : (o(), u("path", {
            key: 1,
            d: `M${H.value}Z`,
            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${b.value})` : h(M)(e.value.style.line.useColorTrend ? d.value : e.value.style.line.stroke, e.value.style.area.opacity),
            stroke: "none"
          }, null, 8, ke))
        ])) : r("", !0),
        e.value.style.line.smooth && a.value.length ? (o(), u("path", {
          key: 2,
          d: `M ${h(G)(a.value)}`,
          stroke: e.value.style.line.useColorTrend ? d.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, _e)) : r("", !0),
        !e.value.style.line.smooth && a.value.length ? (o(), u("path", {
          key: 3,
          d: J.value,
          stroke: e.value.style.line.useColorTrend ? d.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, be)) : r("", !0),
        m.value ? r("", !0) : (o(), u("foreignObject", {
          key: 4,
          height: l.value.height / 2,
          width: l.value.height / 2,
          x: l.value.height / 5,
          y: 8
        }, [
          _("div", xe, [
            C.value === "positive" ? (o(), L(I, {
              key: 0,
              stroke: d.value,
              name: "arrowTop",
              size: l.value.height / 2
            }, null, 8, ["stroke", "size"])) : r("", !0),
            C.value === "negative" ? (o(), L(I, {
              key: 1,
              stroke: d.value,
              name: "arrowBottom",
              size: l.value.height / 2
            }, null, 8, ["stroke", "size"])) : r("", !0),
            C.value === "neutral" ? (o(), L(I, {
              key: 2,
              stroke: d.value,
              name: "arrowRight",
              size: l.value.height / 2
            }, null, 8, ["stroke", "size"])) : r("", !0)
          ])
        ], 8, we)),
        m.value ? r("", !0) : (o(), u("text", {
          key: 5,
          x: l.value.height / 2 - l.value.height / 20,
          y: y.value.bottom,
          "text-anchor": "middle",
          fill: e.value.style.trendLabel.useColorTrend ? d.value : e.value.style.trendLabel.color,
          "font-size": e.value.style.trendLabel.fontSize,
          "font-weight": e.value.style.trendLabel.bold ? "bold" : "normal"
        }, O(h(U)({
          p: x.value > 0 ? "+" : "",
          v: x.value,
          s: "%",
          r: e.value.style.trendLabel.rounding
        })), 9, Ce)),
        a.value.length && a.value.at(-1).x !== void 0 ? (o(), u("circle", {
          key: 6,
          stroke: e.value.style.backgroundColor,
          "stroke-width": 2,
          cx: a.value.at(-1).x,
          cy: a.value.at(-1).y,
          r: 4,
          fill: d.value
        }, null, 8, Le)) : r("", !0),
        a.value.length && a.value.at(-1).x !== void 0 && e.value.style.dataLabel.show ? (o(), u("text", {
          key: 7,
          "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 ? d.value : e.value.style.dataLabel.color,
          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
        }, O(h(ue)(
          e.value.style.dataLabel.formatter,
          a.value.at(-1).value,
          h(U)({
            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, $e)) : r("", !0)
      ], 8, he)) : (o(), L(re, {
        key: 0,
        config: {
          type: "sparkline",
          style: {
            backgroundColor: e.value.style.backgroundColor,
            sparkline: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      t.$slots.source ? (o(), u("div", Ne, [
        D(t.$slots, "source", {}, void 0, !0)
      ], 512)) : r("", !0)
    ], 12, ve));
  }
}, Be = /* @__PURE__ */ de(Te, [["__scopeId", "data-v-38d02804"]]);
export {
  Be as default
};
