import { useCssVars as K, computed as _, onMounted as Q, ref as N, watch as Z, openBlock as a, createElementBlock as s, normalizeStyle as $, createElementVNode as h, createTextVNode as ee, toDisplayString as p, unref as n, createCommentVNode as c, createVNode as te, renderSlot as D, Fragment as f, renderList as g, normalizeClass as I, createBlock as V } from "vue";
import { u as le, o as ae, e as E, g as se, c as oe, t as ue, s as b, i as H, f as F, X as re, w as z } from "./index-CxkSLqkR.js";
import { u as O } from "./useNestedProp-Cl0RLl8U.js";
import { _ as ie } from "./Shape-Ci6tClcc.js";
import ne from "./vue-ui-skeleton-BNcyfNtG.js";
import { _ as ve } from "./PackageVersion-CZWTAkjP.js";
import { _ as de } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ce = { key: 0 }, ye = { key: 1 }, he = ["xmlns", "viewBox"], fe = ["width", "height"], ge = ["id"], pe = ["stop-color"], be = ["stop-color"], me = ["id"], _e = ["stop-color"], xe = ["stop-color"], ke = ["id"], we = ["stop-color"], $e = ["stop-color"], Ce = { key: 1 }, Le = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], ze = { key: 2 }, Se = ["x", "y", "font-size", "font-weight", "fill"], Me = ["x", "y", "font-size", "fill"], Ae = ["x", "y", "font-size", "fill"], Ne = ["height", "width", "x", "onMouseover", "stroke", "stroke-width", "rx", "stroke-dasharray", "onClick"], De = {
  key: 2,
  ref: "source",
  dir: "auto"
}, Ie = {
  __name: "vue-ui-sparkhistogram",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectDatapoint"],
  setup(W, { emit: B }) {
    const d = W;
    K((l) => ({
      "9e84af8a": Y.value
    }));
    const { vue_ui_sparkhistogram: U } = le(), S = _(() => !!d.dataset && d.dataset.length);
    Q(() => {
      M();
    });
    function M() {
      ae(d.dataset) ? E({
        componentName: "VueUiSparkHistogram",
        type: "dataset"
      }) : d.dataset.forEach((l, r) => {
        se({
          datasetObject: l,
          requiredAttributes: ["value"]
        }).forEach((t) => {
          E({
            componentName: "VueUiSparkHistogram",
            type: "datasetSerieAttribute",
            property: t,
            index: r
          });
        });
      });
    }
    const m = N(oe()), e = _({
      get: () => A(),
      set: (l) => l
    });
    function A() {
      const l = O({
        userConfig: d.config,
        defaultConfig: U
      });
      return l.theme ? {
        ...O({
          userConfig: ue.vue_ui_sparkhistogram[l.theme] || d.config,
          defaultConfig: l
        })
      } : l;
    }
    Z(() => d.config, (l) => {
      e.value = A(), M();
    }, { deep: !0 });
    const v = _(() => {
      const l = e.value.style.layout.height, r = e.value.style.layout.width, t = e.value.style.layout.padding.top, o = l - e.value.style.layout.padding.bottom, y = e.value.style.layout.padding.left, x = r - e.value.style.layout.padding.right, k = t + (l - t - e.value.style.layout.padding.bottom) / 2, C = l - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom, w = r - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
      return {
        bottom: o,
        centerY: k,
        drawingHeight: C,
        drawingWidth: w,
        height: l,
        left: y,
        right: x,
        top: t,
        width: r
      };
    }), j = _(() => Math.max(...d.dataset.map((l) => Math.abs(l.value || 0))));
    function X(l) {
      return Math.abs(l) / j.value;
    }
    const i = _(() => d.dataset.map((l, r) => {
      const t = X(l.value || 0), o = v.value.drawingHeight * t, y = v.value.drawingWidth / d.dataset.length, x = y * (e.value.style.bars.gap / 100), k = y - x, C = v.value.centerY - o / 2, w = v.value.left + (x / 2 + r * y), q = v.value.left + r * y, L = typeof l.intensity > "u" ? 100 : Math.round(l.intensity * 100), R = l.color ? l.color : l.value >= 0 ? b(e.value.style.bars.colors.positive, L) : b(e.value.style.bars.colors.negative, L), T = l.color ? l.color : l.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, P = l.color ? `url(#gradient_datapoint_${r}_${m.value})` : l.value >= 0 ? `url(#gradient_positive_${r}_${m.value})` : `url(#gradient_negative_${r}_${m.value})`, J = w + k / 2;
      return {
        ...l,
        color: R,
        gradient: P,
        height: o,
        intensity: L,
        proportion: t,
        stroke: T,
        textAnchor: J,
        trapX: q,
        unitWidth: y,
        width: k,
        x: w,
        y: C
      };
    })), u = N(null);
    function G(l, r) {
      B("selectDatapoint", { datapoint: l, index: r });
    }
    const Y = _(() => `${e.value.style.animation.speedMs}ms`);
    return (l, r) => (a(), s("div", {
      style: $(`width:100%;background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily}`),
      onMouseleave: r[1] || (r[1] = (t) => u.value = null)
    }, [
      e.value.style.title.text ? (a(), s("div", {
        key: 0,
        style: $(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${e.value.style.title.margin};padding: 0 6px;text-align:${e.value.style.title.textAlign}`)
      }, [
        h("div", {
          style: $(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
        }, [
          ee(p(e.value.style.title.text) + " ", 1),
          u.value !== null ? (a(), s("span", ce, "- " + p(i.value[u.value].timeLabel || "") + " " + p(n(H)(
            e.value.style.labels.value.formatter,
            i.value[u.value].value,
            n(F)({
              p: e.value.style.labels.value.prefix,
              v: i.value[u.value].value,
              s: e.value.style.labels.value.suffix,
              r: e.value.style.labels.value.rounding
            }),
            { datapoint: i.value[u.value], seriesIndex: u.value }
          )), 1)) : c("", !0),
          ![void 0, null].includes(u.value) && ![null, void 0].includes(i.value[u.value].valueLabel) ? (a(), s("span", ye, "(" + p(i.value[u.value].valueLabel || 0) + ")", 1)) : c("", !0)
        ], 4),
        e.value.style.title.subtitle.text ? (a(), s("div", {
          key: 0,
          style: $(`font-size:${e.value.style.title.subtitle.fontSize}px;color:${e.value.style.title.subtitle.color};font-weight:${e.value.style.title.subtitle.bold ? "bold" : "normal"}`)
        }, p(e.value.style.title.subtitle.text), 5)) : c("", !0)
      ], 4)) : c("", !0),
      S.value ? (a(), s("svg", {
        key: 1,
        xmlns: n(re),
        viewBox: `0 0 ${v.value.width} ${v.value.height}`,
        style: { overflow: "visible" }
      }, [
        te(ve),
        l.$slots["chart-background"] ? (a(), s("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: v.value.width,
          height: v.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          D(l.$slots, "chart-background", {}, void 0, !0)
        ], 8, fe)) : c("", !0),
        h("defs", null, [
          (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("radialGradient", {
            id: `gradient_positive_${o}_${m.value}`,
            cy: "50%",
            cx: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            h("stop", {
              offset: "0%",
              "stop-color": n(b)(n(z)(e.value.style.bars.colors.positive, 0.05), t.intensity)
            }, null, 8, pe),
            h("stop", {
              offset: "100%",
              "stop-color": n(b)(e.value.style.bars.colors.positive, t.intensity)
            }, null, 8, be)
          ], 8, ge))), 256)),
          (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("radialGradient", {
            id: `gradient_negative_${o}_${m.value}`,
            cy: "50%",
            cx: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            h("stop", {
              offset: "0%",
              "stop-color": n(b)(n(z)(e.value.style.bars.colors.negative, 0.05), t.intensity)
            }, null, 8, _e),
            h("stop", {
              offset: "100%",
              "stop-color": n(b)(e.value.style.bars.colors.negative, t.intensity)
            }, null, 8, xe)
          ], 8, me))), 256)),
          (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("radialGradient", {
            id: `gradient_datapoint_${o}_${m.value}`,
            cy: "50%",
            cx: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            h("stop", {
              offset: "0%",
              "stop-color": n(b)(n(z)(t.color, 0.05), t.intensity)
            }, null, 8, we),
            h("stop", {
              offset: "100%",
              "stop-color": n(b)(t.color, t.intensity)
            }, null, 8, $e)
          ], 8, ke))), 256))
        ]),
        !e.value.style.bars.shape || e.value.style.bars.shape === "square" ? (a(), s("g", Ce, [
          (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("rect", {
            x: t.x,
            y: t.y,
            height: t.height,
            width: t.width,
            fill: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
            stroke: t.stroke,
            "stroke-width": e.value.style.bars.strokeWidth,
            rx: `${e.value.style.bars.borderRadius * t.proportion / 12}%`,
            class: I({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
          }, null, 10, Le))), 256))
        ])) : (a(), s("g", ze, [
          (a(!0), s(f, null, g(i.value, (t, o) => (a(), V(ie, {
            plot: { x: t.x + t.width / 2, y: t.y + t.height / 2 },
            color: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
            shape: e.value.style.bars.shape,
            radius: t.height * 0.4,
            class: I({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
          }, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
        ])),
        (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("text", {
          "text-anchor": "middle",
          x: t.textAnchor,
          y: t.y - e.value.style.labels.value.fontSize / 3 + e.value.style.labels.value.offsetY,
          "font-size": e.value.style.labels.value.fontSize,
          "font-weight": e.value.style.labels.value.bold ? "bold" : "normal",
          fill: e.value.style.labels.value.color
        }, p(n(H)(
          e.value.style.labels.value.formatter,
          t.value,
          n(F)({
            p: e.value.style.labels.value.prefix,
            v: t.value,
            s: e.value.style.labels.value.suffix,
            r: e.value.style.labels.value.rounding
          }),
          { datapoint: i.value[u.value], seriesIndex: u.value }
        )), 9, Se))), 256)),
        (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("g", null, [
          t.valueLabel ? (a(), s("text", {
            key: 0,
            x: t.textAnchor,
            y: t.y + t.height + e.value.style.labels.valueLabel.fontSize,
            "font-size": e.value.style.labels.valueLabel.fontSize,
            "text-anchor": "middle",
            fill: e.value.style.labels.valueLabel.color
          }, p(t.valueLabel), 9, Me)) : c("", !0)
        ]))), 256)),
        (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("g", null, [
          t.timeLabel ? (a(), s("text", {
            key: 0,
            x: t.textAnchor,
            y: v.value.height - e.value.style.labels.timeLabel.fontSize / 2,
            "font-size": e.value.style.labels.timeLabel.fontSize,
            fill: e.value.style.labels.timeLabel.color,
            "text-anchor": "middle"
          }, p(t.timeLabel), 9, Ae)) : c("", !0)
        ]))), 256)),
        (a(!0), s(f, null, g(i.value, (t, o) => (a(), s("g", null, [
          h("rect", {
            height: v.value.height,
            width: t.unitWidth,
            fill: "transparent",
            x: t.trapX,
            y: 0,
            onMouseover: (y) => u.value = o,
            onMouseleave: r[0] || (r[0] = (y) => u.value = null),
            stroke: u.value !== null && u.value === o ? e.value.style.selector.stroke : "",
            "stroke-width": u.value !== null && u.value === o ? e.value.style.selector.strokeWidth : 0,
            rx: e.value.style.selector.borderRadius,
            "stroke-dasharray": e.value.style.selector.strokeDasharray,
            onClick: () => G(t, o)
          }, null, 40, Ne)
        ]))), 256))
      ], 8, he)) : c("", !0),
      l.$slots.source ? (a(), s("div", De, [
        D(l.$slots, "source", {}, void 0, !0)
      ], 512)) : c("", !0),
      S.value ? c("", !0) : (a(), V(ne, {
        key: 3,
        config: {
          type: "sparkHistogram",
          style: {
            backgroundColor: e.value.style.backgroundColor,
            sparkHistogram: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 36));
  }
}, Ue = /* @__PURE__ */ de(Ie, [["__scopeId", "data-v-ad438c17"]]);
export {
  Ue as default
};
