import { ref as g, computed as f, onMounted as gt, watch as J, onBeforeUnmount as ft, openBlock as o, createElementBlock as n, normalizeClass as K, unref as t, normalizeStyle as I, createBlock as k, createCommentVNode as u, createSlots as mt, withCtx as w, renderSlot as m, normalizeProps as H, guardReactiveProps as M, createVNode as yt, Fragment as T, renderList as U, createElementVNode as x, toDisplayString as L } from "vue";
import { u as vt, o as pt, e as Q, g as bt, c as kt, l as wt, D as xt, d as _t, i as $, f as B, X as Ct, t as Lt } from "./index-WrV3SAID.js";
import { u as Z } from "./useNestedProp-Cj0kHD7k.js";
import { _ as $t } from "./Title-BR-xoRp4.js";
import { L as Bt } from "./Legend-7H4oi6Sq.js";
import { u as Ot, U as At } from "./usePrinter-kVpf1iV8.js";
import { _ as Pt } from "./PackageVersion-1NslmM8M.js";
import { P as Ft } from "./PenAndPaper-BF1ZRVm3.js";
import St from "./vue-ui-skeleton-Qec_XSRf.js";
import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Mt = ["id"], Tt = {
  key: 1,
  ref: "noTitle",
  class: "vue-data-ui-no-title-space",
  style: "height:36px; width: 100%;background:transparent"
}, Ut = ["xmlns", "viewBox"], Nt = ["width", "height"], zt = { key: 1 }, Wt = ["x", "y", "height", "width", "fill", "stroke"], Et = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Dt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], Rt = ["x", "y", "font-size", "font-weight", "fill"], Vt = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], jt = { key: 3 }, Gt = ["x", "y", "fill", "font-size", "font-weight"], qt = { key: 4 }, Xt = ["x1", "x2", "y1", "y2", "stroke"], Yt = {
  key: 5,
  class: "vue-data-ui-watermark"
}, Jt = {
  class: "vue-ui-bullet-legend-item",
  dir: "auto"
}, Kt = { style: { "margin-right": "2px" } }, Qt = {
  key: 7,
  ref: "source",
  dir: "auto"
}, Zt = {
  __name: "vue-ui-bullet",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(tt, { expose: et }) {
    const { vue_ui_bullet: at } = vt(), i = tt, O = g(null), st = g(null), N = g(0), rt = g(null), lt = g(0), y = f({
      get: () => i.dataset.hasOwnProperty("value"),
      set: (a) => a
    }), p = f(() => i.dataset.segments ? Array.isArray(i.dataset.segments) ? i.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;
    },
    {...}
]
        `), y.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;
    },
    {...}
] 
        `), y.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:

segments: [
    {
        name: string;
        from: number;
        to: number;
        color?: string;
    },
    {...}
]
        `), y.value = !1, !1));
    gt(z);
    function z() {
      pt(i.dataset) ? Q({
        componentName: "VueUiBullet",
        type: "dataset"
      }) : p.value ? i.dataset.segments.forEach((a, l) => {
        bt({
          datasetObject: a,
          requiredAttributes: ["name", "from", "to"]
        }).forEach((r) => {
          y.value = !1, Q({
            componentName: "VueUiBullet segment",
            type: "datasetSerieAttribute",
            property: r,
            index: l
          });
        });
      }) : y.value = !1, e.value.style.chart.animation.show && V(i.dataset.value || 0);
    }
    const A = g(kt());
    function W() {
      const a = Z({
        userConfig: i.config,
        defaultConfig: at
      });
      return a.theme ? {
        ...Z({
          userConfig: Lt.vue_ui_bullet[a.theme] || i.config,
          defaultConfig: a
        })
      } : a;
    }
    const e = f({
      get: () => W(),
      set: (a) => a
    }), { userOptionsVisible: P, setUserOptionsVisibility: E, keepUserOptionState: D } = It({ config: e.value });
    J(() => i.config, (a) => {
      e.value = W(), P.value = !e.value.showOnChartHover, z(), N.value += 1;
    }, { deep: !0 });
    const s = f(() => {
      const a = e.value.style.chart.height, l = e.value.style.chart.width, r = e.value.style.chart.padding.left, v = l - e.value.style.chart.padding.right, C = e.value.style.chart.padding.top, d = a - e.value.style.chart.padding.bottom;
      return {
        height: a,
        width: l,
        left: r,
        right: v,
        top: C,
        bottom: d,
        chartWidth: v - r,
        chartHeight: d - C
      };
    }), ot = f(() => {
      if (!p.value) return [];
      const a = [];
      for (let l = 0; l < i.dataset.segments.length; l += 1)
        a.push(wt(e.value.style.chart.segments.baseColor, l / i.dataset.segments.length));
      return a;
    }), F = f(() => p.value ? {
      min: Math.min(...i.dataset.segments.map((a) => a.from)),
      max: Math.max(...i.dataset.segments.map((a) => a.to))
    } : { min: 0, max: 1 }), h = g(nt());
    J(() => i.dataset, (a) => {
      e.value.style.chart.animation.show ? V(a.value || 0) : h.value = a.value || 0;
    }, { deep: !0 });
    function nt() {
      return e.value.style.chart.animation.show ? F.value.min : i.dataset.value || 0;
    }
    const R = g(null);
    function V(a) {
      const l = Math.abs(a - h.value) / e.value.style.chart.animation.animationFrames;
      function r() {
        h.value < a ? h.value = Math.min(h.value + l, a) : h.value > a && (h.value = Math.max(h.value - l, a)), h.value !== a && (R.value = requestAnimationFrame(r));
      }
      r();
    }
    ft(() => {
      cancelAnimationFrame(R.value);
    });
    const c = f(() => {
      if (!p.value)
        return [];
      const a = xt(F.value.min, F.value.max, e.value.style.chart.segments.ticks.divisions), l = a.min >= 0 ? 0 : Math.abs(a.min), r = {
        x: s.value.left + (i.dataset.target + l) / (a.max + l) * s.value.chartWidth - e.value.style.chart.target.width / 2
      }, v = {
        width: (h.value + l) / (a.max + l) * s.value.chartWidth
      }, C = a.ticks.map((d) => ({
        value: d,
        y: s.value.bottom + e.value.style.chart.segments.dataLabels.fontSize + 3 + e.value.style.chart.segments.dataLabels.offsetY,
        x: s.value.left + (d + l) / (a.max + l) * s.value.chartWidth
      }));
      return {
        scale: a,
        target: r,
        value: v,
        ticks: C,
        chunks: i.dataset.segments.map((d, dt) => ({
          ...d,
          color: d.color ? _t(d.color) : ot.value[dt],
          x: s.value.left + s.value.chartWidth * ((d.from + l) / (a.max + l)),
          y: s.value.top,
          height: s.value.chartHeight,
          width: s.value.chartWidth * (Math.abs(d.to - d.from) / (a.max + l))
        }))
      };
    }), j = f(() => !c.value || !c.value.chunks || !c.value.chunks.length ? [] : c.value.chunks.map((a) => {
      const l = $(
        e.value.style.chart.segments.dataLabels.formatter,
        a.from,
        B({
          p: e.value.style.chart.segments.dataLabels.prefix,
          v: a.from,
          s: e.value.style.chart.segments.dataLabels.suffix,
          r: e.value.style.chart.segments.dataLabels.rounding
        })
      ), r = $(
        e.value.style.chart.segments.dataLabels.formatter,
        a.to,
        B({
          p: e.value.style.chart.segments.dataLabels.prefix,
          v: a.to,
          s: e.value.style.chart.segments.dataLabels.suffix,
          r: e.value.style.chart.segments.dataLabels.rounding
        })
      );
      return {
        ...a,
        shape: "square",
        value: `${l} - ${r}`
      };
    })), it = f(() => ({
      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: G, isImaging: q, generatePdf: X, generateImage: Y } = Ot({
      elementId: `bullet_${A.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-bullet"
    }), ut = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), b = g(!1);
    function ht(a) {
      b.value = a, lt.value += 1;
    }
    function ct() {
      return c.value;
    }
    const _ = g(!1);
    function S() {
      _.value = !_.value;
    }
    return et({
      getData: ct,
      generatePdf: X,
      generateImage: Y,
      toggleAnnotator: S
    }), (a, l) => (o(), n("div", {
      ref_key: "bulletChart",
      ref: O,
      class: K(`vue-ui-bullet ${t(b) ? "vue-data-ui-wrapper-fullscreen" : ""}`),
      style: I(`font-family:${t(e).style.fontFamily};width:100%;background:${t(e).style.chart.backgroundColor}`),
      id: `bullet_${t(A)}`,
      onMouseenter: l[0] || (l[0] = () => t(E)(!0)),
      onMouseleave: l[1] || (l[1] = () => t(E)(!1))
    }, [
      t(e).userOptions.buttons.annotator ? (o(), k(Ft, {
        key: 0,
        parent: t(O),
        backgroundColor: t(e).style.chart.backgroundColor,
        color: t(e).style.chart.color,
        active: t(_),
        onClose: S
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : u("", !0),
      t(ut) ? (o(), n("div", Tt, null, 512)) : u("", !0),
      t(e).style.chart.title.text ? (o(), n("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: st,
        style: "width:100%;background:transparent;"
      }, [
        (o(), k($t, {
          lineHeight: "1.3rem",
          key: `title_${t(N)}`,
          config: {
            title: {
              cy: "bullet-div-title",
              ...t(e).style.chart.title
            },
            subtitle: {
              cy: "bullet-div-subtitle",
              ...t(e).style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : u("", !0),
      t(e).userOptions.show && t(y) && (t(D) || t(P)) ? (o(), k(At, {
        key: 3,
        ref: "details",
        backgroundColor: t(e).style.chart.backgroundColor,
        color: t(e).style.chart.color,
        isPrinting: t(G),
        isImaging: t(q),
        uid: t(A),
        hasTooltip: !1,
        hasPdf: t(e).userOptions.buttons.pdf,
        hasImg: t(e).userOptions.buttons.img,
        hasXls: !1,
        hasTable: !1,
        hasLabel: !1,
        hasFullscreen: t(e).userOptions.buttons.fullscreen,
        isFullscreen: t(b),
        chartElement: t(O),
        position: t(e).userOptions.position,
        titles: { ...t(e).userOptions.buttonTitles },
        hasAnnotator: t(e).userOptions.buttons.annotator,
        isAnnotation: t(_),
        onToggleFullscreen: ht,
        onGeneratePdf: t(X),
        onGenerateImage: t(Y),
        onToggleAnnotator: S,
        style: I({
          visibility: t(D) ? t(P) ? "visible" : "hidden" : "visible"
        })
      }, mt({ _: 2 }, [
        a.$slots.optionPdf ? {
          name: "optionPdf",
          fn: w(() => [
            m(a.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        a.$slots.optionImg ? {
          name: "optionImg",
          fn: w(() => [
            m(a.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        a.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: w(({ toggleFullscreen: r, isFullscreen: v }) => [
            m(a.$slots, "optionFullscreen", H(M({ toggleFullscreen: r, isFullscreen: v })), void 0, !0)
          ]),
          key: "2"
        } : void 0,
        a.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: w(({ toggleAnnotator: r, isAnnotator: v }) => [
            m(a.$slots, "optionAnnotator", H(M({ toggleAnnotator: r, isAnnotator: v })), 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"])) : u("", !0),
      t(y) ? (o(), n("svg", {
        key: 4,
        xmlns: t(Ct),
        class: K({ "vue-data-ui-fullscreen--on": t(b), "vue-data-ui-fulscreen--off": !t(b), "vue-ui-bullet-svg": !0 }),
        viewBox: `0 0 ${t(s).width} ${t(s).height}`,
        style: I(`width: 100%; overflow: visible; background:transparent;color:${t(e).style.chart.color}`)
      }, [
        yt(Pt),
        a.$slots["chart-background"] ? (o(), n("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: t(s).width,
          height: t(s).height,
          style: {
            pointerEvents: "none"
          }
        }, [
          m(a.$slots, "chart-background", {}, void 0, !0)
        ], 8, Nt)) : u("", !0),
        t(p) ? (o(), n("g", zt, [
          (o(!0), n(T, null, U(t(c).chunks, (r) => (o(), n("rect", {
            x: r.x,
            y: r.y,
            height: r.height,
            width: r.width,
            fill: r.color,
            "stroke-width": 1,
            stroke: t(e).style.chart.backgroundColor
          }, null, 8, Wt))), 256)),
          t(e).style.chart.target.onTop ? u("", !0) : (o(), n("rect", {
            key: 0,
            x: t(c).target.x,
            y: t(s).top + (t(s).chartHeight - t(s).chartHeight * t(e).style.chart.target.heightRatio) / 2,
            height: t(s).chartHeight * t(e).style.chart.target.heightRatio,
            width: t(e).style.chart.target.width,
            rx: t(e).style.chart.target.rounded ? t(e).style.chart.target.width / 2 : 0,
            fill: t(e).style.chart.target.color,
            stroke: t(e).style.chart.target.stroke,
            "stroke-width": t(e).style.chart.target.strokeWidth
          }, null, 8, Et)),
          x("rect", {
            x: t(s).left,
            y: t(s).top + (t(s).chartHeight - t(s).chartHeight * t(e).style.chart.valueBar.heightRatio) / 2,
            height: t(s).chartHeight * t(e).style.chart.valueBar.heightRatio,
            width: t(c).value.width,
            fill: t(e).style.chart.valueBar.color,
            stroke: t(e).style.chart.valueBar.stroke,
            "stroke-width": t(e).style.chart.valueBar.strokeWidth
          }, null, 8, Dt),
          t(e).style.chart.valueBar.label.show ? (o(), n("text", {
            key: 1,
            x: t(s).left + t(c).value.width,
            y: t(s).top - 6 + t(e).style.chart.valueBar.label.offsetY,
            "font-size": t(e).style.chart.valueBar.label.fontSize,
            "font-weight": t(e).style.chart.valueBar.label.bold ? "bold" : "normal",
            fill: t(e).style.chart.valueBar.label.color,
            "text-anchor": "middle"
          }, L(t($)(
            t(e).style.chart.segments.dataLabels.formatter,
            t(h),
            t(B)({
              p: t(e).style.chart.segments.dataLabels.prefix,
              v: t(h),
              s: t(e).style.chart.segments.dataLabels.suffix,
              r: t(e).style.chart.segments.dataLabels.rounding
            })
          )), 9, Rt)) : u("", !0),
          t(e).style.chart.target.onTop ? (o(), n("rect", {
            key: 2,
            x: t(c).target.x,
            y: t(s).top + (t(s).chartHeight - t(s).chartHeight * t(e).style.chart.target.heightRatio) / 2,
            height: t(s).chartHeight * t(e).style.chart.target.heightRatio,
            width: t(e).style.chart.target.width,
            rx: t(e).style.chart.target.rounded ? t(e).style.chart.target.width / 2 : 0,
            fill: t(e).style.chart.target.color,
            stroke: t(e).style.chart.target.stroke,
            "stroke-width": t(e).style.chart.target.strokeWidth
          }, null, 8, Vt)) : u("", !0),
          t(e).style.chart.segments.dataLabels.show ? (o(), n("g", jt, [
            (o(!0), n(T, null, U(t(c).ticks, (r) => (o(), n("text", {
              x: r.x,
              y: r.y,
              "text-anchor": "middle",
              fill: t(e).style.chart.segments.dataLabels.color,
              "font-size": t(e).style.chart.segments.dataLabels.fontSize + "px",
              "font-weight": t(e).style.chart.segments.dataLabels.bold ? "bold" : "normal"
            }, L(t($)(
              t(e).style.chart.segments.dataLabels.formatter,
              r.value,
              t(B)({
                p: t(e).style.chart.segments.dataLabels.prefix,
                v: r.value,
                s: t(e).style.chart.segments.dataLabels.suffix,
                r: t(e).style.chart.segments.dataLabels.rounding
              })
            )), 9, Gt))), 256))
          ])) : u("", !0),
          t(e).style.chart.segments.dataLabels.show && t(e).style.chart.segments.ticks.show ? (o(), n("g", qt, [
            (o(!0), n(T, null, U(t(c).ticks, (r) => (o(), n("line", {
              x1: r.x,
              x2: r.x,
              y1: t(s).bottom,
              y2: t(s).bottom + 3,
              stroke: t(e).style.chart.segments.ticks.stroke,
              "stroke-width": 1,
              "stroke-linecap": "round"
            }, null, 8, Xt))), 256))
          ])) : u("", !0)
        ])) : u("", !0),
        m(a.$slots, "svg", { svg: t(s) }, void 0, !0)
      ], 14, Ut)) : u("", !0),
      a.$slots.watermark ? (o(), n("div", Yt, [
        m(a.$slots, "watermark", H(M({ isPrinting: t(G) || t(q) })), void 0, !0)
      ])) : u("", !0),
      t(y) ? u("", !0) : (o(), k(St, {
        key: 6,
        config: {
          type: "bullet",
          style: {
            backgroundColor: t(e).style.chart.backgroundColor,
            bullet: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      x("div", {
        ref_key: "chartLegend",
        ref: rt
      }, [
        t(e).style.chart.legend.show ? (o(), k(Bt, {
          key: 0,
          clickable: !1,
          legendSet: t(j),
          config: t(it)
        }, {
          item: w(({ legend: r }) => [
            x("div", Jt, [
              x("span", Kt, L(r.name) + ":", 1),
              x("span", null, L(r.value), 1)
            ])
          ]),
          _: 1
        }, 8, ["legendSet", "config"])) : u("", !0),
        m(a.$slots, "legend", { legend: t(j) }, void 0, !0)
      ], 512),
      a.$slots.source ? (o(), n("div", Qt, [
        m(a.$slots, "source", {}, void 0, !0)
      ], 512)) : u("", !0)
    ], 46, Mt));
  }
}, ce = /* @__PURE__ */ Ht(Zt, [["__scopeId", "data-v-e8a6d42d"]]);
export {
  ce as default
};
