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