import { useCssVars as Q, unref as t, computed as _, onMounted as Z, ref as N, watch as tt, openBlock as l, createElementBlock as a, normalizeStyle as $, createElementVNode as f, createTextVNode as et, toDisplayString as v, createCommentVNode as y, createVNode as st, renderSlot as D, Fragment as g, renderList as p, normalizeClass as I, createBlock as V } from "vue";
import { u as ot, o as lt, e as E, g as at, c as rt, t as it, s as b, i as H, f as F, X as nt, w as z } from "./index-WrV3SAID.js";
import { u as O } from "./useNestedProp-Cj0kHD7k.js";
import { _ as ut } from "./Shape-DNIrFW-J.js";
import dt from "./vue-ui-skeleton-Qec_XSRf.js";
import { _ as ct } from "./PackageVersion-1NslmM8M.js";
import { _ as yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ht = { key: 0 }, ft = { key: 1 }, gt = ["xmlns", "viewBox"], pt = ["width", "height"], vt = ["id"], bt = ["stop-color"], mt = ["stop-color"], _t = ["id"], xt = ["stop-color"], kt = ["stop-color"], wt = ["id"], $t = ["stop-color"], Ct = ["stop-color"], Lt = { key: 1 }, zt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], St = { key: 2 }, Mt = ["x", "y", "font-size", "font-weight", "fill"], At = ["x", "y", "font-size", "fill"], Nt = ["x", "y", "font-size", "fill"], Dt = ["height", "width", "x", "onMouseover", "stroke", "stroke-width", "rx", "stroke-dasharray", "onClick"], It = {
  key: 2,
  ref: "source",
  dir: "auto"
}, Vt = {
  __name: "vue-ui-sparkhistogram",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectDatapoint"],
  setup(W, { emit: B }) {
    Q((o) => ({
      bc5cc542: t(q)
    }));
    const { vue_ui_sparkhistogram: U } = ot(), c = W, S = _(() => !!c.dataset && c.dataset.length);
    Z(() => {
      M();
    });
    function M() {
      lt(c.dataset) ? E({
        componentName: "VueUiSparkHistogram",
        type: "dataset"
      }) : c.dataset.forEach((o, n) => {
        at({
          datasetObject: o,
          requiredAttributes: ["value"]
        }).forEach((s) => {
          E({
            componentName: "VueUiSparkHistogram",
            type: "datasetSerieAttribute",
            property: s,
            index: n
          });
        });
      });
    }
    const m = N(rt()), e = _({
      get: () => A(),
      set: (o) => o
    });
    function A() {
      const o = O({
        userConfig: c.config,
        defaultConfig: U
      });
      return o.theme ? {
        ...O({
          userConfig: it.vue_ui_sparkhistogram[o.theme] || c.config,
          defaultConfig: o
        })
      } : o;
    }
    tt(() => c.config, (o) => {
      e.value = A(), M();
    }, { deep: !0 });
    const d = _(() => {
      const o = e.value.style.layout.height, n = e.value.style.layout.width, s = e.value.style.layout.padding.top, r = o - e.value.style.layout.padding.bottom, h = e.value.style.layout.padding.left, x = n - e.value.style.layout.padding.right, k = s + (o - s - e.value.style.layout.padding.bottom) / 2, C = o - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom, w = n - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
      return {
        bottom: r,
        centerY: k,
        drawingHeight: C,
        drawingWidth: w,
        height: o,
        left: h,
        right: x,
        top: s,
        width: n
      };
    }), j = _(() => Math.max(...c.dataset.map((o) => Math.abs(o.value || 0))));
    function X(o) {
      return Math.abs(o) / j.value;
    }
    const u = _(() => c.dataset.map((o, n) => {
      const s = X(o.value || 0), r = d.value.drawingHeight * s, h = d.value.drawingWidth / c.dataset.length, x = h * (e.value.style.bars.gap / 100), k = h - x, C = d.value.centerY - r / 2, w = d.value.left + (x / 2 + n * h), R = d.value.left + n * h, L = typeof o.intensity > "u" ? 100 : Math.round(o.intensity * 100), T = o.color ? o.color : o.value >= 0 ? b(e.value.style.bars.colors.positive, L) : b(e.value.style.bars.colors.negative, L), P = o.color ? o.color : o.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, J = o.color ? `url(#gradient_datapoint_${n}_${m.value})` : o.value >= 0 ? `url(#gradient_positive_${n}_${m.value})` : `url(#gradient_negative_${n}_${m.value})`, K = w + k / 2;
      return {
        ...o,
        color: T,
        gradient: J,
        height: r,
        intensity: L,
        proportion: s,
        stroke: P,
        textAnchor: K,
        trapX: R,
        unitWidth: h,
        width: k,
        x: w,
        y: C
      };
    })), i = N(null), G = B;
    function Y(o, n) {
      G("selectDatapoint", { datapoint: o, index: n });
    }
    const q = _(() => `${e.value.style.animation.speedMs}ms`);
    return (o, n) => (l(), a("div", {
      style: $(`width:100%;background:${t(e).style.backgroundColor};font-family:${t(e).style.fontFamily}`),
      onMouseleave: n[1] || (n[1] = (s) => i.value = null)
    }, [
      t(e).style.title.text ? (l(), a("div", {
        key: 0,
        style: $(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${t(e).style.title.margin};padding: 0 6px;text-align:${t(e).style.title.textAlign}`)
      }, [
        f("div", {
          style: $(`font-size:${t(e).style.title.fontSize}px;color:${t(e).style.title.color};font-weight:${t(e).style.title.bold ? "bold" : "normal"}`)
        }, [
          et(v(t(e).style.title.text) + " ", 1),
          t(i) !== null ? (l(), a("span", ht, "- " + v(t(u)[t(i)].timeLabel || "") + " " + v(t(H)(
            t(e).style.labels.value.formatter,
            t(u)[t(i)].value,
            t(F)({
              p: t(e).style.labels.value.prefix,
              v: t(u)[t(i)].value,
              s: t(e).style.labels.value.suffix,
              r: t(e).style.labels.value.rounding
            }),
            { datapoint: t(u)[t(i)], seriesIndex: t(i) }
          )), 1)) : y("", !0),
          ![void 0, null].includes(t(i)) && ![null, void 0].includes(t(u)[t(i)].valueLabel) ? (l(), a("span", ft, "(" + v(t(u)[t(i)].valueLabel || 0) + ")", 1)) : y("", !0)
        ], 4),
        t(e).style.title.subtitle.text ? (l(), a("div", {
          key: 0,
          style: $(`font-size:${t(e).style.title.subtitle.fontSize}px;color:${t(e).style.title.subtitle.color};font-weight:${t(e).style.title.subtitle.bold ? "bold" : "normal"}`)
        }, v(t(e).style.title.subtitle.text), 5)) : y("", !0)
      ], 4)) : y("", !0),
      t(S) ? (l(), a("svg", {
        key: 1,
        xmlns: t(nt),
        viewBox: `0 0 ${t(d).width} ${t(d).height}`,
        style: { overflow: "visible" }
      }, [
        st(ct),
        o.$slots["chart-background"] ? (l(), a("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: t(d).width,
          height: t(d).height,
          style: {
            pointerEvents: "none"
          }
        }, [
          D(o.$slots, "chart-background", {}, void 0, !0)
        ], 8, pt)) : y("", !0),
        f("defs", null, [
          (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("radialGradient", {
            id: `gradient_positive_${r}_${t(m)}`,
            cy: "50%",
            cx: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            f("stop", {
              offset: "0%",
              "stop-color": t(b)(t(z)(t(e).style.bars.colors.positive, 0.05), s.intensity)
            }, null, 8, bt),
            f("stop", {
              offset: "100%",
              "stop-color": t(b)(t(e).style.bars.colors.positive, s.intensity)
            }, null, 8, mt)
          ], 8, vt))), 256)),
          (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("radialGradient", {
            id: `gradient_negative_${r}_${t(m)}`,
            cy: "50%",
            cx: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            f("stop", {
              offset: "0%",
              "stop-color": t(b)(t(z)(t(e).style.bars.colors.negative, 0.05), s.intensity)
            }, null, 8, xt),
            f("stop", {
              offset: "100%",
              "stop-color": t(b)(t(e).style.bars.colors.negative, s.intensity)
            }, null, 8, kt)
          ], 8, _t))), 256)),
          (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("radialGradient", {
            id: `gradient_datapoint_${r}_${t(m)}`,
            cy: "50%",
            cx: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            f("stop", {
              offset: "0%",
              "stop-color": t(b)(t(z)(s.color, 0.05), s.intensity)
            }, null, 8, $t),
            f("stop", {
              offset: "100%",
              "stop-color": t(b)(s.color, s.intensity)
            }, null, 8, Ct)
          ], 8, wt))), 256))
        ]),
        !t(e).style.bars.shape || t(e).style.bars.shape === "square" ? (l(), a("g", Lt, [
          (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("rect", {
            x: s.x,
            y: s.y,
            height: s.height,
            width: s.width,
            fill: t(e).style.bars.colors.gradient.show ? s.gradient : s.color,
            stroke: s.stroke,
            "stroke-width": t(e).style.bars.strokeWidth,
            rx: `${t(e).style.bars.borderRadius * s.proportion / 12}%`,
            class: I({ "vue-ui-sparkhistogram-shape": t(e).style.animation.show })
          }, null, 10, zt))), 256))
        ])) : (l(), a("g", St, [
          (l(!0), a(g, null, p(t(u), (s, r) => (l(), V(ut, {
            plot: { x: s.x + s.width / 2, y: s.y + s.height / 2 },
            color: t(e).style.bars.colors.gradient.show ? s.gradient : s.color,
            shape: t(e).style.bars.shape,
            radius: s.height * 0.4,
            class: I({ "vue-ui-sparkhistogram-shape": t(e).style.animation.show })
          }, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
        ])),
        (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("text", {
          "text-anchor": "middle",
          x: s.textAnchor,
          y: s.y - t(e).style.labels.value.fontSize / 3 + t(e).style.labels.value.offsetY,
          "font-size": t(e).style.labels.value.fontSize,
          "font-weight": t(e).style.labels.value.bold ? "bold" : "normal",
          fill: t(e).style.labels.value.color
        }, v(t(H)(
          t(e).style.labels.value.formatter,
          s.value,
          t(F)({
            p: t(e).style.labels.value.prefix,
            v: s.value,
            s: t(e).style.labels.value.suffix,
            r: t(e).style.labels.value.rounding
          }),
          { datapoint: t(u)[t(i)], seriesIndex: t(i) }
        )), 9, Mt))), 256)),
        (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("g", null, [
          s.valueLabel ? (l(), a("text", {
            key: 0,
            x: s.textAnchor,
            y: s.y + s.height + t(e).style.labels.valueLabel.fontSize,
            "font-size": t(e).style.labels.valueLabel.fontSize,
            "text-anchor": "middle",
            fill: t(e).style.labels.valueLabel.color
          }, v(s.valueLabel), 9, At)) : y("", !0)
        ]))), 256)),
        (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("g", null, [
          s.timeLabel ? (l(), a("text", {
            key: 0,
            x: s.textAnchor,
            y: t(d).height - t(e).style.labels.timeLabel.fontSize / 2,
            "font-size": t(e).style.labels.timeLabel.fontSize,
            fill: t(e).style.labels.timeLabel.color,
            "text-anchor": "middle"
          }, v(s.timeLabel), 9, Nt)) : y("", !0)
        ]))), 256)),
        (l(!0), a(g, null, p(t(u), (s, r) => (l(), a("g", null, [
          f("rect", {
            height: t(d).height,
            width: s.unitWidth,
            fill: "transparent",
            x: s.trapX,
            y: 0,
            onMouseover: (h) => i.value = r,
            onMouseleave: n[0] || (n[0] = (h) => i.value = null),
            stroke: t(i) !== null && t(i) === r ? t(e).style.selector.stroke : "",
            "stroke-width": t(i) !== null && t(i) === r ? t(e).style.selector.strokeWidth : 0,
            rx: t(e).style.selector.borderRadius,
            "stroke-dasharray": t(e).style.selector.strokeDasharray,
            onClick: () => Y(s, r)
          }, null, 40, Dt)
        ]))), 256))
      ], 8, gt)) : y("", !0),
      o.$slots.source ? (l(), a("div", It, [
        D(o.$slots, "source", {}, void 0, !0)
      ], 512)) : y("", !0),
      t(S) ? y("", !0) : (l(), V(dt, {
        key: 3,
        config: {
          type: "sparkHistogram",
          style: {
            backgroundColor: t(e).style.backgroundColor,
            sparkHistogram: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 36));
  }
}, jt = /* @__PURE__ */ yt(Vt, [["__scopeId", "data-v-c1906709"]]);
export {
  jt as default
};
