import { ref as d, computed as g, onMounted as ge, watch as K, onBeforeUnmount as fe, createElementBlock as o, openBlock as r, unref as u, normalizeStyle as S, normalizeClass as Q, createBlock as k, createCommentVNode as i, createElementVNode as w, createSlots as me, withCtx as x, renderSlot as f, normalizeProps as I, guardReactiveProps as H, createVNode as ye, Fragment as M, renderList as T, toDisplayString as L } from "vue";
import { u as pe, o as be, e as Z, g as ke, c as we, l as xe, D as _e, d as Ce, i as $, f as O, X as Le, a as $e } from "./index-CTpA678x.js";
import { u as ee } from "./useNestedProp-B95uADZw.js";
import { _ as Oe } from "./Title-Dp1KpSLT.js";
import { L as Ae } from "./Legend-DESDMpLk.js";
import { u as Be, U as Pe } from "./usePrinter-WPNAmU6x.js";
import { _ as Fe } from "./PackageVersion-DqLLMNcj.js";
import { P as Se } from "./PenAndPaper-b7rqpk80.js";
import Ie from "./vue-ui-skeleton-CU4p-C4n.js";
import { u as He } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Me } from "./useChartAccessibility-BWojgys7.js";
import { _ as Te } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ue = ["id"], Ne = {
  key: 1,
  ref: "noTitle",
  class: "vue-data-ui-no-title-space",
  style: "height:36px; width: 100%;background:transparent"
}, ze = ["xmlns", "viewBox"], Re = ["width", "height"], We = { key: 1 }, Ee = ["x", "y", "height", "width", "fill", "stroke"], De = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Ve = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], je = ["x", "y", "font-size", "font-weight", "fill"], Ge = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], qe = { key: 3 }, Xe = ["x", "y", "fill", "font-size", "font-weight"], Ye = { key: 4 }, Je = ["x1", "x2", "y1", "y2", "stroke"], Ke = {
  key: 5,
  class: "vue-data-ui-watermark"
}, Qe = {
  class: "vue-ui-bullet-legend-item",
  dir: "auto"
}, Ze = { style: { "margin-right": "2px" } }, et = {
  key: 7,
  ref: "source",
  dir: "auto"
}, tt = {
  __name: "vue-ui-bullet",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(te, { expose: ae }) {
    const { vue_ui_bullet: le } = pe(), n = te, U = d(null), se = d(null), N = d(0), re = d(null), oe = d(0), m = g({
      get: () => n.dataset.hasOwnProperty("value"),
      set: (t) => t
    }), p = g(() => n.dataset.segments ? Array.isArray(n.dataset.segments) ? n.dataset.segments.length ? !0 : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:

segments: [
    {
        name: string;
        from: number;
        to: number;
        color?: string;
    },
    {...}
]
        `), m.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments must be an array of objects with this datastructure:

segments: [
    {
        name: string;
        from: number;
        to: number;
        color?: string;
    },
    {...}
] 
        `), m.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:

segments: [
    {
        name: string;
        from: number;
        to: number;
        color?: string;
    },
    {...}
]
        `), m.value = !1, !1));
    ge(z);
    function z() {
      be(n.dataset) ? Z({
        componentName: "VueUiBullet",
        type: "dataset"
      }) : p.value ? n.dataset.segments.forEach((t, s) => {
        ke({
          datasetObject: t,
          requiredAttributes: ["name", "from", "to"]
        }).forEach((l) => {
          m.value = !1, Z({
            componentName: "VueUiBullet segment",
            type: "datasetSerieAttribute",
            property: l,
            index: s
          });
        });
      }) : m.value = !1, e.value.style.chart.animation.show && j(n.dataset.value || 0);
    }
    const A = d(we());
    function R() {
      const t = ee({
        userConfig: n.config,
        defaultConfig: le
      });
      return t.theme ? {
        ...ee({
          userConfig: $e.vue_ui_bullet[t.theme] || n.config,
          defaultConfig: t
        })
      } : t;
    }
    const e = g({
      get: () => R(),
      set: (t) => t
    }), { userOptionsVisible: B, setUserOptionsVisibility: W, keepUserOptionState: E } = He({ config: e.value }), { svgRef: D } = Me({ config: e.value.style.chart.title });
    K(() => n.config, (t) => {
      e.value = R(), B.value = !e.value.userOptions.showOnChartHover, z(), N.value += 1;
    }, { deep: !0 });
    const a = g(() => {
      const t = e.value.style.chart.height, s = e.value.style.chart.width, l = e.value.style.chart.padding.left, y = s - e.value.style.chart.padding.right, C = e.value.style.chart.padding.top, v = t - e.value.style.chart.padding.bottom;
      return {
        height: t,
        width: s,
        left: l,
        right: y,
        top: C,
        bottom: v,
        chartWidth: y - l,
        chartHeight: v - C
      };
    }), ne = g(() => {
      if (!p.value) return [];
      const t = [];
      for (let s = 0; s < n.dataset.segments.length; s += 1)
        t.push(xe(e.value.style.chart.segments.baseColor, s / n.dataset.segments.length));
      return t;
    }), P = g(() => p.value ? {
      min: Math.min(...n.dataset.segments.map((t) => t.from)),
      max: Math.max(...n.dataset.segments.map((t) => t.to))
    } : { min: 0, max: 1 }), c = d(ue());
    K(() => n.dataset, (t) => {
      e.value.style.chart.animation.show ? j(t.value || 0) : c.value = t.value || 0;
    }, { deep: !0 });
    function ue() {
      return e.value.style.chart.animation.show ? P.value.min : n.dataset.value || 0;
    }
    const V = d(null);
    function j(t) {
      const s = Math.abs(t - c.value) / e.value.style.chart.animation.animationFrames;
      function l() {
        c.value < t ? c.value = Math.min(c.value + s, t) : c.value > t && (c.value = Math.max(c.value - s, t)), c.value !== t && (V.value = requestAnimationFrame(l));
      }
      l();
    }
    fe(() => {
      cancelAnimationFrame(V.value);
    });
    const h = g(() => {
      if (!p.value)
        return [];
      const t = _e(P.value.min, P.value.max, e.value.style.chart.segments.ticks.divisions), s = t.min >= 0 ? 0 : Math.abs(t.min), l = {
        x: a.value.left + (n.dataset.target + s) / (t.max + s) * a.value.chartWidth - e.value.style.chart.target.width / 2
      }, y = {
        width: (c.value + s) / (t.max + s) * a.value.chartWidth
      }, C = t.ticks.map((v) => ({
        value: v,
        y: a.value.bottom + e.value.style.chart.segments.dataLabels.fontSize + 3 + e.value.style.chart.segments.dataLabels.offsetY,
        x: a.value.left + (v + s) / (t.max + s) * a.value.chartWidth
      }));
      return {
        scale: t,
        target: l,
        value: y,
        ticks: C,
        chunks: n.dataset.segments.map((v, de) => ({
          ...v,
          color: v.color ? Ce(v.color) : ne.value[de],
          x: a.value.left + a.value.chartWidth * ((v.from + s) / (t.max + s)),
          y: a.value.top,
          height: a.value.chartHeight,
          width: a.value.chartWidth * (Math.abs(v.to - v.from) / (t.max + s))
        }))
      };
    }), G = g(() => !h.value || !h.value.chunks || !h.value.chunks.length ? [] : h.value.chunks.map((t) => {
      const s = $(
        e.value.style.chart.segments.dataLabels.formatter,
        t.from,
        O({
          p: e.value.style.chart.segments.dataLabels.prefix,
          v: t.from,
          s: e.value.style.chart.segments.dataLabels.suffix,
          r: e.value.style.chart.segments.dataLabels.rounding
        })
      ), l = $(
        e.value.style.chart.segments.dataLabels.formatter,
        t.to,
        O({
          p: e.value.style.chart.segments.dataLabels.prefix,
          v: t.to,
          s: e.value.style.chart.segments.dataLabels.suffix,
          r: e.value.style.chart.segments.dataLabels.rounding
        })
      );
      return {
        ...t,
        shape: "square",
        value: `${s} - ${l}`
      };
    })), ie = g(() => ({
      cy: "bullet-div-legend",
      backgroundColor: "transparent",
      color: e.value.style.chart.legend.color,
      fontSize: e.value.style.chart.legend.fontSize,
      paddingBottom: 6,
      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
    })), { isPrinting: q, isImaging: X, generatePdf: Y, generateImage: J } = Be({
      elementId: `bullet_${A.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-bullet"
    }), ce = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), b = d(!1);
    function he(t) {
      b.value = t, oe.value += 1;
    }
    function ve() {
      return h.value;
    }
    const _ = d(!1);
    function F() {
      _.value = !_.value;
    }
    return ae({
      getData: ve,
      generatePdf: Y,
      generateImage: J,
      toggleAnnotator: F
    }), (t, s) => (r(), o("div", {
      ref_key: "bulletChart",
      ref: U,
      class: Q(`vue-ui-bullet ${b.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      style: S(`font-family:${e.value.style.fontFamily};width:100%;background:${e.value.style.chart.backgroundColor}`),
      id: `bullet_${A.value}`,
      onMouseenter: s[0] || (s[0] = () => u(W)(!0)),
      onMouseleave: s[1] || (s[1] = () => u(W)(!1))
    }, [
      e.value.userOptions.buttons.annotator ? (r(), k(Se, {
        key: 0,
        svgRef: u(D),
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        active: _.value,
        onClose: F
      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : i("", !0),
      ce.value ? (r(), o("div", Ne, null, 512)) : i("", !0),
      e.value.style.chart.title.text ? (r(), o("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: se,
        style: "width:100%;background:transparent;"
      }, [
        (r(), k(Oe, {
          lineHeight: "1.3rem",
          key: `title_${N.value}`,
          config: {
            title: {
              cy: "bullet-div-title",
              ...e.value.style.chart.title
            },
            subtitle: {
              cy: "bullet-div-subtitle",
              ...e.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : i("", !0),
      e.value.userOptions.show && m.value && (u(E) || u(B)) ? (r(), k(Pe, {
        key: 3,
        ref: "details",
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: u(q),
        isImaging: u(X),
        uid: A.value,
        hasTooltip: !1,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasImg: e.value.userOptions.buttons.img,
        hasXls: !1,
        hasTable: !1,
        hasLabel: !1,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isFullscreen: b.value,
        chartElement: U.value,
        position: e.value.userOptions.position,
        titles: { ...e.value.userOptions.buttonTitles },
        hasAnnotator: e.value.userOptions.buttons.annotator,
        isAnnotation: _.value,
        onToggleFullscreen: he,
        onGeneratePdf: u(Y),
        onGenerateImage: u(J),
        onToggleAnnotator: F,
        style: S({
          visibility: u(E) ? u(B) ? "visible" : "hidden" : "visible"
        })
      }, me({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: x(() => [
            f(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: x(() => [
            f(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: x(({ toggleFullscreen: l, isFullscreen: y }) => [
            f(t.$slots, "optionFullscreen", I(H({ toggleFullscreen: l, isFullscreen: y })), void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: x(({ toggleAnnotator: l, isAnnotator: y }) => [
            f(t.$slots, "optionAnnotator", I(H({ toggleAnnotator: l, isAnnotator: y })), void 0, !0)
          ]),
          key: "3"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
      m.value ? (r(), o("svg", {
        key: 4,
        ref_key: "svgRef",
        ref: D,
        xmlns: u(Le),
        class: Q({ "vue-data-ui-fullscreen--on": b.value, "vue-data-ui-fulscreen--off": !b.value, "vue-ui-bullet-svg": !0 }),
        viewBox: `0 0 ${a.value.width} ${a.value.height}`,
        style: S(`width: 100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
      }, [
        ye(Fe),
        t.$slots["chart-background"] ? (r(), o("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: a.value.width,
          height: a.value.height,
          style: {
            pointerEvents: "none"
          }
        }, [
          f(t.$slots, "chart-background", {}, void 0, !0)
        ], 8, Re)) : i("", !0),
        p.value ? (r(), o("g", We, [
          (r(!0), o(M, null, T(h.value.chunks, (l) => (r(), o("rect", {
            x: l.x,
            y: l.y,
            height: l.height,
            width: l.width,
            fill: l.color,
            "stroke-width": 1,
            stroke: e.value.style.chart.backgroundColor
          }, null, 8, Ee))), 256)),
          e.value.style.chart.target.onTop ? i("", !0) : (r(), o("rect", {
            key: 0,
            x: h.value.target.x,
            y: a.value.top + (a.value.chartHeight - a.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
            height: a.value.chartHeight * e.value.style.chart.target.heightRatio,
            width: e.value.style.chart.target.width,
            rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
            fill: e.value.style.chart.target.color,
            stroke: e.value.style.chart.target.stroke,
            "stroke-width": e.value.style.chart.target.strokeWidth
          }, null, 8, De)),
          w("rect", {
            x: a.value.left,
            y: a.value.top + (a.value.chartHeight - a.value.chartHeight * e.value.style.chart.valueBar.heightRatio) / 2,
            height: a.value.chartHeight * e.value.style.chart.valueBar.heightRatio,
            width: h.value.value.width,
            fill: e.value.style.chart.valueBar.color,
            stroke: e.value.style.chart.valueBar.stroke,
            "stroke-width": e.value.style.chart.valueBar.strokeWidth
          }, null, 8, Ve),
          e.value.style.chart.valueBar.label.show ? (r(), o("text", {
            key: 1,
            x: a.value.left + h.value.value.width,
            y: a.value.top - 6 + e.value.style.chart.valueBar.label.offsetY,
            "font-size": e.value.style.chart.valueBar.label.fontSize,
            "font-weight": e.value.style.chart.valueBar.label.bold ? "bold" : "normal",
            fill: e.value.style.chart.valueBar.label.color,
            "text-anchor": "middle"
          }, L(u($)(
            e.value.style.chart.segments.dataLabels.formatter,
            c.value,
            u(O)({
              p: e.value.style.chart.segments.dataLabels.prefix,
              v: c.value,
              s: e.value.style.chart.segments.dataLabels.suffix,
              r: e.value.style.chart.segments.dataLabels.rounding
            })
          )), 9, je)) : i("", !0),
          e.value.style.chart.target.onTop ? (r(), o("rect", {
            key: 2,
            x: h.value.target.x,
            y: a.value.top + (a.value.chartHeight - a.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
            height: a.value.chartHeight * e.value.style.chart.target.heightRatio,
            width: e.value.style.chart.target.width,
            rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
            fill: e.value.style.chart.target.color,
            stroke: e.value.style.chart.target.stroke,
            "stroke-width": e.value.style.chart.target.strokeWidth
          }, null, 8, Ge)) : i("", !0),
          e.value.style.chart.segments.dataLabels.show ? (r(), o("g", qe, [
            (r(!0), o(M, null, T(h.value.ticks, (l) => (r(), o("text", {
              x: l.x,
              y: l.y,
              "text-anchor": "middle",
              fill: e.value.style.chart.segments.dataLabels.color,
              "font-size": e.value.style.chart.segments.dataLabels.fontSize + "px",
              "font-weight": e.value.style.chart.segments.dataLabels.bold ? "bold" : "normal"
            }, L(u($)(
              e.value.style.chart.segments.dataLabels.formatter,
              l.value,
              u(O)({
                p: e.value.style.chart.segments.dataLabels.prefix,
                v: l.value,
                s: e.value.style.chart.segments.dataLabels.suffix,
                r: e.value.style.chart.segments.dataLabels.rounding
              })
            )), 9, Xe))), 256))
          ])) : i("", !0),
          e.value.style.chart.segments.dataLabels.show && e.value.style.chart.segments.ticks.show ? (r(), o("g", Ye, [
            (r(!0), o(M, null, T(h.value.ticks, (l) => (r(), o("line", {
              x1: l.x,
              x2: l.x,
              y1: a.value.bottom,
              y2: a.value.bottom + 3,
              stroke: e.value.style.chart.segments.ticks.stroke,
              "stroke-width": 1,
              "stroke-linecap": "round"
            }, null, 8, Je))), 256))
          ])) : i("", !0)
        ])) : i("", !0),
        f(t.$slots, "svg", { svg: a.value }, void 0, !0)
      ], 14, ze)) : i("", !0),
      t.$slots.watermark ? (r(), o("div", Ke, [
        f(t.$slots, "watermark", I(H({ isPrinting: u(q) || u(X) })), void 0, !0)
      ])) : i("", !0),
      m.value ? i("", !0) : (r(), k(Ie, {
        key: 6,
        config: {
          type: "bullet",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            bullet: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      w("div", {
        ref_key: "chartLegend",
        ref: re
      }, [
        e.value.style.chart.legend.show ? (r(), k(Ae, {
          key: 0,
          clickable: !1,
          legendSet: G.value,
          config: ie.value
        }, {
          item: x(({ legend: l }) => [
            w("div", Qe, [
              w("span", Ze, L(l.name) + ":", 1),
              w("span", null, L(l.value), 1)
            ])
          ]),
          _: 1
        }, 8, ["legendSet", "config"])) : i("", !0),
        f(t.$slots, "legend", { legend: G.value }, void 0, !0)
      ], 512),
      t.$slots.source ? (r(), o("div", et, [
        f(t.$slots, "source", {}, void 0, !0)
      ], 512)) : i("", !0)
    ], 46, Ue));
  }
}, gt = /* @__PURE__ */ Te(tt, [["__scopeId", "data-v-fccfff27"]]);
export {
  gt as default
};
