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