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