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