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