import { computed as c, ref as b, watch as U, onMounted as re, openBlock as r, createElementBlock as i, normalizeStyle as C, renderSlot as M, normalizeProps as ie, guardReactiveProps as de, createElementVNode as f, toDisplayString as X, createCommentVNode as h, unref as v, createVNode as ve, Fragment as D, renderList as P, createBlock as ce } from "vue";
import { u as he, c as ye, t as fe, C as q, a0 as T, o as pe, e as Z, g as ge, w as I, a1 as me, a2 as be, X as ke, s as V, S as H, a3 as Y, i as J, f as K } from "./index-OhfEeW2N.js";
import { u as Q } from "./useNestedProp-Cwjz-hIm.js";
import _e from "./vue-ui-skeleton-CZBWPZpy.js";
import { t as xe, u as we } from "./useResponsive-CoxXLe23.js";
import { _ as $e } from "./PackageVersion-DBbbI7TU.js";
import { _ as Le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ne = ["id"], Ce = ["xmlns", "viewBox"], Me = ["width", "height"], Ie = ["id"], Ve = ["stop-color"], Se = ["stop-color"], ze = ["id"], Ae = ["stop-color"], We = ["stop-color"], De = ["id"], Pe = ["stop-color"], Te = ["stop-color"], Fe = { key: 1 }, Oe = ["d", "fill"], Be = ["d", "fill"], Ee = ["d", "stroke", "stroke-width"], Ge = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], je = ["x", "y", "width", "height", "fill", "rx"], Re = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ue = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray", "stroke-width"], Xe = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], qe = ["x", "y", "font-size", "font-weight", "fill"], Ze = ["x", "y", "height", "width", "onMouseenter", "onClick"], He = {
  __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: S }) {
    const s = _, { vue_ui_sparkline: ee } = he(), $ = c(() => !!s.dataset && s.dataset.length), p = b(ye()), z = b(null), F = b(null), O = b(null), e = c({
      get: () => B(),
      set: (t) => t
    });
    function B() {
      const t = Q({
        userConfig: s.config,
        defaultConfig: ee
      });
      let l = {};
      return t.theme ? l = {
        ...Q({
          userConfig: fe.vue_ui_sparkline[t.theme] || s.config,
          defaultConfig: t
        })
      } : l = t, s.config && q(s.config, "style.scaleMin") ? l.style.scaleMin = s.config.style.scaleMin : l.style.scaleMin = null, s.config && q(s.config, "style.scaleMax") ? l.style.scaleMax = s.config.style.scaleMax : l.style.scaleMax = null, l;
    }
    const L = c(() => T({
      data: s.dataset,
      threshold: e.value.downsample.threshold
    }));
    U(() => s.config, (t) => {
      e.value = B(), G(), u.value.chartWidth = e.value.style.chartWidth;
    }, { deep: !0 }), U(() => s.dataset, (t) => {
      k.value = T({
        data: s.dataset.map((l) => ({
          ...l,
          value: [void 0].includes(l.value) ? null : l.value
        })),
        threshold: e.value.downsample.threshold
      });
    }, { deep: !0 });
    const k = b(te());
    function te() {
      return T({
        data: s.dataset.map((t) => e.value.style.animation.show ? {
          ...t,
          value: null
        } : {
          ...t,
          value: [void 0].includes(t.value) ? null : t.value
        }),
        threshold: e.value.downsample.threshold
      });
    }
    const E = b(null);
    re(() => {
      if (G(), e.value.style.animation.show && s.dataset.length > 1) {
        let a = function() {
          l < L.value.length ? (k.value.push(L.value[l]), setTimeout(() => {
            requestAnimationFrame(a);
          }, t)) : k.value = L.value, l += 1;
        };
        k.value = [];
        const t = e.value.style.animation.animationFrames / s.dataset.length;
        let l = 0;
        a();
      }
    });
    function G() {
      if (pe(s.dataset) ? Z({
        componentName: "VueUiSparkline",
        type: "dataset"
      }) : s.dataset.forEach((t, l) => {
        ge({
          datasetObject: t,
          requiredAttributes: ["period", "value"]
        }).forEach((a) => {
          Z({
            componentName: "VueUiSparkline",
            type: "datasetSerieAttribute",
            property: a,
            index: l
          });
        });
      }), e.value.responsive) {
        const t = xe(() => {
          const { width: l, height: a } = we({
            chart: z.value,
            title: e.value.style.title.show && s.showInfo ? F.value : null,
            source: O.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;
          });
        });
        E.value = new ResizeObserver(t), E.value.observe(z.value.parentNode);
      }
    }
    const u = b({
      height: 80 * s.heightRatio,
      width: 500,
      chartWidth: e.value.style.chartWidth,
      padding: s.forcedPadding
    }), o = c(() => {
      const { top: t, right: l, bottom: a, left: n } = e.value.style.padding;
      return {
        top: t,
        left: n,
        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 + n : u.value.padding + n,
        width: s.showInfo && e.value.style.dataLabel.show ? u.value.chartWidth - n - l : u.value.width - u.value.padding - n - l,
        height: u.value.height - t - a
      };
    }), A = c(() => [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), ae = c(() => [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), x = c(() => {
      const t = A.value >= 0 ? 0 : A.value;
      return Math.abs(t);
    }), le = c(() => ae.value + x.value), N = c(() => o.value.bottom - o.value.height * W(x.value));
    function W(t) {
      return t / le.value;
    }
    const g = c(() => L.value.length - 1), d = c(() => 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;
      return {
        absoluteValue: a,
        period: t.period,
        plotValue: a + x.value,
        toMax: W(a + x.value),
        x: o.value.start + l * (o.value.width / (g.value + 1) > u.padding ? u.padding : o.value.width / (g.value + 1)),
        y: o.value.bottom - o.value.height * W(a + x.value),
        id: `plot_${p.value}_${l}`,
        color: w.value ? e.value.style.bar.color : e.value.style.area.useGradient ? I(e.value.style.line.color, 0.05 * (1 - l / g.value)) : e.value.style.line.color,
        width: o.value.width / (g.value + 1) > u.padding ? u.padding : o.value.width / (g.value + 1)
      };
    })), ue = c(() => {
      const t = { x: d.value[0].x || 0, y: (u.value.height || 0) - 6 }, l = { x: d.value[d.value.length - 1].x || 0, y: (u.value.height || 0) - 6 }, a = [];
      return d.value.forEach((n) => {
        a.push(`${n.x || 0},${n.y || 0} `);
      }), [t.x, t.y, ...a, l.x, l.y].toString();
    }), y = b(void 0);
    function se(t, l) {
      y.value = t, S("hoverIndex", { index: l });
    }
    function oe() {
      y.value = void 0, S("hoverIndex", { index: void 0 });
    }
    const m = c(() => {
      if ($.value) {
        const t = d.value.map((a) => a.absoluteValue), l = t.reduce((a, n) => a + n, 0);
        return {
          latest: d.value[d.value.length - 1].absoluteValue,
          sum: l,
          average: l / d.value.length,
          median: me(t),
          trend: be(d.value.map(({ x: a, y: n, absoluteValue: R }) => ({
            x: a,
            y: n,
            value: R
          }))).trend
        };
      } else
        return {
          latest: null,
          sum: null,
          average: null,
          median: null,
          trend: null
        };
    }), j = c(() => $.value ? e.value.style.dataLabel.valueType === "latest" ? m.value.latest : e.value.style.dataLabel.valueType === "sum" ? m.value.sum : e.value.style.dataLabel.valueType === "average" ? m.value.average : 0 : 0), w = c(() => e.value.type && e.value.type === "bar");
    function ne(t, l) {
      S("selectDatapoint", { datapoint: t, index: l });
    }
    return (t, l) => (r(), i("div", {
      ref_key: "sparklineChart",
      ref: z,
      class: "vue-ui-sparkline",
      id: p.value,
      style: C(`width:100%;font-family:${e.value.style.fontFamily};`)
    }, [
      M(t.$slots, "before", ie(de({
        selected: y.value,
        latest: m.value.latest,
        sum: m.value.sum,
        average: m.value.average,
        median: m.value.median,
        trend: m.value.trend
      })), void 0, !0),
      e.value.style.title.show && _.showInfo ? (r(), i("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: F,
        class: "vue-ui-sparkline-title",
        style: C(`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: C(`padding:${e.value.style.title.textAlign === "left" ? "0 0 0 12px" : e.value.style.title.textAlign === "right" ? "0 12px 0 0" : "0"}`)
        }, X(y.value ? y.value.period : e.value.style.title.text), 5)
      ], 4)) : h("", !0),
      $.value ? (r(), i("svg", {
        key: 1,
        xmlns: v(ke),
        viewBox: `0 0 ${u.value.width} ${u.value.height}`,
        style: C(`background:${e.value.style.backgroundColor};overflow:visible`)
      }, [
        ve($e),
        t.$slots["chart-background"] ? (r(), i("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, Me)) : h("", !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": v(V)(v(I)(e.value.style.area.color, 0.05), e.value.style.area.opacity)
            }, null, 8, Ve),
            f("stop", {
              offset: "100%",
              "stop-color": v(V)(e.value.style.area.color, e.value.style.area.opacity)
            }, null, 8, Se)
          ], 8, Ie),
          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, Ae),
            f("stop", {
              offset: "100%",
              "stop-color": v(I)(e.value.style.bar.color, 0.05)
            }, null, 8, We)
          ], 8, ze),
          f("linearGradient", {
            x2: "0%",
            y2: "100%",
            id: `sparkline_bar_gradient_neg_${p.value}`
          }, [
            f("stop", {
              offset: "0%",
              "stop-color": v(I)(e.value.style.bar.color, 0.05)
            }, null, 8, Pe),
            f("stop", {
              offset: "100%",
              "stop-color": e.value.style.bar.color
            }, null, 8, Te)
          ], 8, De)
        ]),
        e.value.style.area.show && !w.value && d.value[0] ? (r(), i("g", Fe, [
          e.value.style.line.smooth ? (r(), i("path", {
            key: 0,
            d: `M ${d.value[0].x},${o.value.bottom} ${v(H)(d.value)} L ${d.value.at(-1).x},${o.value.bottom} Z`,
            fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${p.value})` : v(V)(e.value.style.area.color, e.value.style.area.opacity)
          }, null, 8, Oe)) : (r(), i("path", {
            key: 1,
            d: `M${ue.value}Z`,
            fill: e.value.style.area.useGradient ? `url(#sparkline_gradient_${p.value})` : v(V)(e.value.style.area.color, e.value.style.area.opacity)
          }, null, 8, Be))
        ])) : h("", !0),
        e.value.style.line.smooth && !w.value ? (r(), i("path", {
          key: 2,
          d: `M ${v(H)(d.value)}`,
          stroke: e.value.style.line.color,
          fill: "none",
          "stroke-width": e.value.style.line.strokeWidth,
          "stroke-linecap": "round"
        }, null, 8, Ee)) : h("", !0),
        (r(!0), i(D, null, P(d.value, (a, n) => (r(), i("g", null, [
          n < d.value.length - 1 && !e.value.style.line.smooth && !w.value ? (r(), i("line", {
            key: 0,
            x1: a.x,
            x2: d.value[n + 1].x,
            y1: a.y || 0,
            y2: d.value[n + 1].y || 0,
            stroke: a.color,
            "stroke-width": e.value.style.line.strokeWidth,
            "stroke-linecap": "round",
            "stroke-linejoin": "round",
            "shape-rendering": "geometricPrecision"
          }, null, 8, Ge)) : h("", !0),
          w.value ? (r(), i("rect", {
            key: 1,
            x: a.x - a.width / 2,
            y: a.absoluteValue > 0 ? a.y : N.value,
            width: a.width,
            height: Math.abs(a.y - N.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, je)) : h("", !0),
          e.value.style.verticalIndicator.show && (y.value && a.id === y.value.id || _.selectedIndex === n) ? (r(), i("line", {
            key: 2,
            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, Re)) : h("", !0)
        ]))), 256)),
        A.value < 0 ? (r(), i("line", {
          key: 3,
          x1: o.value.start,
          x2: o.value.start + o.value.width - 16,
          y1: v(Y)(N.value, o.value.bottom),
          y2: v(Y)(N.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, Ue)) : h("", !0),
        e.value.style.plot.show ? (r(!0), i(D, { key: 4 }, P(d.value, (a, n) => (r(), i("g", null, [
          y.value && a.id === y.value.id || _.selectedIndex === n ? (r(), i("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, Xe)) : h("", !0)
        ]))), 256)) : h("", !0),
        _.showInfo && e.value.style.dataLabel.show ? (r(), i("text", {
          key: 5,
          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
        }, X(y.value ? v(J)(
          e.value.style.dataLabel.formatter,
          y.value.absoluteValue,
          v(K)({ p: e.value.style.dataLabel.prefix, v: y.value.absoluteValue, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue }),
          { datapoint: y.value }
        ) : v(J)(
          e.value.style.dataLabel.formatter,
          j.value,
          v(K)({ p: e.value.style.dataLabel.prefix, v: j.value, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.roundingValue })
        )), 9, qe)) : h("", !0),
        (r(!0), i(D, null, P(d.value, (a, n) => (r(), i("rect", {
          x: a.x - (o.value.width / (g.value + 1) > u.value.padding ? u.value.padding : o.value.width / (g.value + 1)) / 2,
          y: o.value.top - 6,
          height: o.value.height + 6,
          width: o.value.width / (g.value + 1) > u.value.padding ? u.value.padding : o.value.width / (g.value + 1),
          fill: "transparent",
          onMouseenter: (R) => se(a, n),
          onMouseleave: oe,
          onClick: () => ne(a, n)
        }, null, 40, Ze))), 256)),
        M(t.$slots, "svg", { svg: u.value }, void 0, !0)
      ], 12, Ce)) : h("", !0),
      t.$slots.source ? (r(), i("div", {
        key: 2,
        ref_key: "source",
        ref: O,
        dir: "auto"
      }, [
        M(t.$slots, "source", {}, void 0, !0)
      ], 512)) : h("", !0),
      $.value ? h("", !0) : (r(), ce(_e, {
        key: 3,
        config: {
          type: "sparkline",
          style: {
            backgroundColor: e.value.style.backgroundColor,
            sparkline: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 12, Ne));
  }
}, lt = /* @__PURE__ */ Le(He, [["__scopeId", "data-v-db8c64e5"]]);
export {
  lt as default
};
