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