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