vue-data-ui 3.6.0 → 3.7.0

package/dist/{vue-ui-annotator-34Ld0u5M.js → vue-ui-annotator-DRaH8hXn.js}

@@ -1,12 +1,12 @@
 import { computed as L, ref as R, watch as E, onMounted as H, onBeforeUnmount as U, createBlock as x, openBlock as c, Teleport as K, createElementBlock as p, createCommentVNode as a, normalizeStyle as b, normalizeClass as g, createElementVNode as n, renderSlot as B, resolveComponent as v, createVNode as T, withCtx as N, createTextVNode as F, toDisplayString as f, withDirectives as M, vModelCheckbox as G, vModelText as D, withModifiers as A, Fragment as X, renderList as Y } from "vue";
-import { ai as V, t as q, c as J, ax as Z } from "./lib-C_mNZmhD.js";
-import { u as Q } from "./useNestedProp-CIoDlpHu.js";
-import { d as $ } from "./dom-to-png--BNgrTZV.js";
-import { u as ee } from "./usePrinter-DTzqpYKF.js";
-import te from "./BaseIcon-DLFL0M4-.js";
-import oe from "./vue-ui-accordion-SSLXLlNz.js";
+import { v as V, t as q, c as J, ax as Z } from "./lib-C5BH09_g.js";
+import { u as Q } from "./useNestedProp-CWo6bftQ.js";
+import { d as $ } from "./dom-to-png-CH2DfsJe.js";
+import { u as ee } from "./usePrinter-DCJzEiS8.js";
+import te from "./BaseIcon-CofSxalQ.js";
+import oe from "./vue-ui-accordion-DSdZUn2C.js";
 import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import { C as se } from "./ColorPicker-CjIJvLdc.js";
+import { C as se } from "./ColorPicker-e1-OSGlQ.js";
 function ie(e) {
   const o = (y) => e.isMacLike ? y.metaKey : y.ctrlKey, l = (y) => {
     const S = y;

package/dist/vue-ui-bullet-BKVJRjGh.js

@@ -0,0 +1,657 @@
+import { defineAsyncComponent as j, ref as h, computed as d, onMounted as qe, toRefs as Xe, watch as he, onBeforeUnmount as Ye, createElementBlock as n, openBlock as s, unref as r, normalizeStyle as V, normalizeClass as de, createBlock as x, createCommentVNode as u, createElementVNode as _, withCtx as f, renderSlot as i, normalizeProps as b, guardReactiveProps as p, createSlots as Je, createVNode as Ke, Fragment as G, renderList as q, toDisplayString as T, Teleport as Qe } from "vue";
+import { u as Ze, a as X } from "./useNestedProp-CWo6bftQ.js";
+import { c as et, t as tt, n as at, F as lt, l as ot, a as P, d as M, X as st, o as ge, g as fe, k as rt } from "./lib-C5BH09_g.js";
+import { t as nt, u as ut } from "./useResponsive-DfdjqQps.js";
+import { u as it } from "./usePrinter-DCJzEiS8.js";
+import { u as ct, B as vt } from "./BaseScanner-BgWxam9d.js";
+import { u as ht } from "./useSvgExport-DrjCWun4.js";
+import { u as dt } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as gt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ft } from "./useChartAccessibility-9icAAmYg.js";
+import mt from "./Legend-Web3GjlR.js";
+import yt from "./Title-DfFUb9hd.js";
+import bt from "./img-DUzJeMlr.js";
+import { _ as pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const me = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, segments: { baseColor: "#5A5A5A", dataLabels: { color: "#CCCCCC" }, ticks: { stroke: "#5A5A5A" } }, target: { color: "#1A1A1A" }, valueBar: { color: "#CCCCCC", stroke: "#5A5A5A", label: { color: "#CCCCCC" } } } } }, ye = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, segments: { baseColor: "#D32F2F", dataLabels: { color: "#424242" }, ticks: { stroke: "#424242" } }, target: { color: "#3A3A3A" }, valueBar: { color: "#3A3A3A", stroke: "#FFF8E1", label: { color: "#424242" } } } } }, be = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, segments: { baseColor: "#D32F2F", dataLabels: { color: "#BDBDBD" }, ticks: { stroke: "#BDBDBD" } }, target: { color: "#3A3A3A" }, valueBar: { color: "#3A3A3A", stroke: "#1E1E1E", label: { color: "#BDBDBD" } } } } }, pe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, segments: { baseColor: "#00AA00", dataLabels: { color: "#66CC66" }, ticks: { stroke: "#00AA00" } }, target: { color: "#023602" }, valueBar: { color: "#1b291b", stroke: "#1A1A1A", label: { color: "#66CC66" } } } } }, ke = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, segments: { baseColor: "#8F837A", dataLabels: { color: "#8A9892" }, ticks: { stroke: "#8F837A" } }, target: { color: "#40403a" }, valueBar: { color: "#8F837A", stroke: "#fbfafa", label: { color: "#8A9892" } } } } }, Ce = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", legend: { backgroundColor: "#fbfafa", color: "#50606C" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, segments: { baseColor: "#718890", dataLabels: { color: "#50606C" }, ticks: { stroke: "#50606C" } }, target: { color: "#50606C" }, valueBar: { color: "#50606C", stroke: "#fbfafa", label: { color: "#50606C" } } } } }, Ae = {
+  default: {},
+  dark: me,
+  celebration: ye,
+  celebrationNight: be,
+  hack: pe,
+  zen: ke,
+  concrete: Ce
+}, ta = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: ye,
+  celebrationNight: be,
+  concrete: Ce,
+  dark: me,
+  default: Ae,
+  hack: pe,
+  zen: ke
+}, Symbol.toStringTag, { value: "Module" })), kt = ["id"], Ct = {
+  key: 1,
+  ref: "noTitle",
+  class: "vue-data-ui-no-title-space",
+  style: "height:36px; width: 100%;background:transparent"
+}, At = ["id"], wt = ["xmlns", "viewBox"], Bt = ["width", "height"], xt = { key: 1 }, _t = ["x", "y", "height", "width", "fill", "stroke"], Lt = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], $t = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], Ft = ["x", "y", "font-size", "font-weight", "fill"], St = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Ot = { key: 3 }, Dt = ["x", "y", "fill", "font-size", "font-weight"], Et = { key: 4 }, It = ["x1", "x2", "y1", "y2", "stroke"], Tt = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Pt = ["id"], Mt = {
+  key: 0,
+  class: "vue-ui-bullet-legend-item",
+  dir: "auto"
+}, zt = { style: { "margin-right": "2px" } }, Ht = {
+  __name: "vue-ui-bullet",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(we, { expose: Be }) {
+    const xe = j(() => import("./PackageVersion-Bq_mtsqr.js")), _e = j(() => import("./PenAndPaper-HCZQTkqi.js")), Le = j(() => import("./UserOptions-B3I-s3Lw.js")), { vue_ui_bullet: $e } = Ze(), { isThemeValid: Fe, warnInvalidTheme: Se } = dt(), L = we, k = h(null), Y = h(null), J = h(0), K = h(null), Q = h(null), Oe = h(0), $ = h(null), O = h(null), Z = h(!1), A = d({
+      get: () => c.value.hasOwnProperty("value"),
+      set: (t) => t
+    }), F = d(() => c.value.segments ? Array.isArray(c.value.segments) ? c.value.segments.length ? !0 : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
+
+segments: [
+    {
+        name: string;
+        from: number;
+        to: number;
+        color?: string;
+    },
+    {...}
+]
+        `), A.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;
+    },
+    {...}
+] 
+        `), A.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
+
+segments: [
+    {
+        name: string;
+        from: number;
+        to: number;
+        color?: string;
+    },
+    {...}
+]
+        `), A.value = !1, !1)), ee = d(() => !!e.value.debug);
+    function te() {
+      if (ge(c.value) ? (fe({
+        componentName: "VueUiBullet",
+        type: "dataset",
+        debug: ee.value
+      }), D.value = !0) : F.value ? c.value.segments.forEach((t, l) => {
+        rt({
+          datasetObject: t,
+          requiredAttributes: ["name", "from", "to"]
+        }).forEach((a) => {
+          A.value = !1, fe({
+            componentName: "VueUiBullet segment",
+            type: "datasetSerieAttribute",
+            property: a,
+            index: l,
+            debug: ee.value
+          });
+        });
+      }) : (A.value = !1, D.value = !0), ge(c.value) || (D.value = e.value.loading), e.value.responsive) {
+        const t = nt(() => {
+          const { width: l, height: a } = ut({
+            chart: k.value,
+            title: e.value.style.chart.title.text ? Y.value : null,
+            legend: e.value.style.chart.legend.show ? K.value : null,
+            source: Q.value
+          });
+          requestAnimationFrame(() => {
+            E.value.width = l, E.value.height = a - 12;
+          });
+        });
+        $.value && (O.value && $.value.unobserve(O.value), $.value.disconnect()), $.value = new ResizeObserver(t), O.value = k.value.parentNode, $.value.observe(O.value);
+      }
+      e.value.style.chart.animation.show && !w.value && se(c.value.value || 0);
+    }
+    qe(() => {
+      Z.value = !0, te();
+    });
+    const C = h(et());
+    function z() {
+      const t = X({
+        userConfig: L.config,
+        defaultConfig: $e
+      }), l = t.theme;
+      if (!l) return t;
+      if (!Fe.value(t))
+        return Se(t), t;
+      const a = X({
+        userConfig: Ae[l] || L.config,
+        defaultConfig: t
+      });
+      return X({
+        userConfig: L.config,
+        defaultConfig: a
+      });
+    }
+    const e = h(z()), { loading: w, FINAL_DATASET: c, manualLoading: D } = ct({
+      ...Xe(L),
+      FINAL_CONFIG: e,
+      prepareConfig: z,
+      skeletonDataset: {
+        value: 100,
+        target: 100,
+        segments: [
+          {
+            name: "",
+            from: 0,
+            to: 33,
+            color: "#AAAAAA"
+          },
+          {
+            name: "",
+            from: 33,
+            to: 66,
+            color: "#BABABA"
+          },
+          {
+            name: "",
+            from: 66,
+            to: 100,
+            color: "#CACACA"
+          }
+        ]
+      },
+      skeletonConfig: tt({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              segments: {
+                dataLabels: { show: !1 },
+                ticks: {
+                  stroke: "#8A8A8A"
+                }
+              },
+              valueBar: {
+                label: { show: !1 }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: H, setUserOptionsVisibility: ae, keepUserOptionState: le } = gt({ config: e.value }), { svgRef: R } = ft({ config: e.value.style.chart.title });
+    he(() => L.config, (t) => {
+      w.value || (e.value = z()), H.value = !e.value.userOptions.showOnChartHover, te(), J.value += 1;
+    }, { deep: !0 });
+    const E = h({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height
+    }), De = d(() => E.value.width), Ee = d(() => E.value.height), o = d(() => {
+      const t = Ee.value, l = De.value, a = e.value.style.chart.padding.left, v = l - e.value.style.chart.padding.right, B = e.value.style.chart.padding.top, g = t - e.value.style.chart.padding.bottom;
+      return {
+        height: Math.max(1e-3, t),
+        width: Math.max(1e-3, l),
+        left: a,
+        right: v,
+        top: B,
+        bottom: g,
+        chartWidth: Math.max(1e-3, v - a),
+        chartHeight: Math.max(1e-3, g - B)
+      };
+    }), Ie = d(() => {
+      if (!F.value) return [];
+      const t = [];
+      for (let l = 0; l < c.value.segments.length; l += 1)
+        t.push(at(e.value.style.chart.segments.baseColor, l / c.value.segments.length));
+      return t;
+    }), N = d(() => F.value ? {
+      min: Math.min(...c.value.segments.map((t) => t.from)),
+      max: Math.max(...c.value.segments.map((t) => t.to))
+    } : { min: 0, max: 1 }), m = h(Te());
+    he(() => c.value, (t) => {
+      t.hasOwnProperty("value") && (D.value = !1), e.value.style.chart.animation.show && !w.value ? se(t.value || 0) : m.value = t.value || 0;
+    }, { deep: !0 });
+    function Te() {
+      return e.value.style.chart.animation.show && !w.value ? N.value.min : c.value.value || 0;
+    }
+    const oe = h(null);
+    function se(t) {
+      const l = Math.abs(t - m.value) / e.value.style.chart.animation.animationFrames;
+      function a() {
+        m.value < t ? m.value = Math.min(m.value + l, t) : m.value > t && (m.value = Math.max(m.value - l, t)), m.value !== t && (oe.value = requestAnimationFrame(a));
+      }
+      a();
+    }
+    Ye(() => {
+      cancelAnimationFrame(oe.value);
+    });
+    const y = d(() => {
+      if (!F.value)
+        return [];
+      const t = lt(N.value.min, N.value.max, e.value.style.chart.segments.ticks.divisions), l = t.min >= 0 ? 0 : Math.abs(t.min), a = {
+        x: o.value.left + (c.value.target + l) / (t.max + l) * o.value.chartWidth - e.value.style.chart.target.width / 2
+      }, v = {
+        width: (m.value + l) / (t.max + l) * o.value.chartWidth
+      }, B = t.ticks.map((g) => ({
+        value: g,
+        y: o.value.bottom + e.value.style.chart.segments.dataLabels.fontSize + 3 + e.value.style.chart.segments.dataLabels.offsetY,
+        x: o.value.left + (g + l) / (t.max + l) * o.value.chartWidth
+      }));
+      return {
+        scale: t,
+        target: a,
+        value: v,
+        ticks: B,
+        chunks: c.value.segments.map((g, Ge) => ({
+          ...g,
+          color: g.color ? ot(g.color) : Ie.value[Ge],
+          x: o.value.left + o.value.chartWidth * ((g.from + l) / (t.max + l)),
+          y: o.value.top,
+          height: o.value.chartHeight,
+          width: o.value.chartWidth * (Math.abs(g.to - g.from) / (t.max + l))
+        }))
+      };
+    }), U = d(() => !y.value || !y.value.chunks || !y.value.chunks.length ? [] : y.value.chunks.map((t) => {
+      const l = P(
+        e.value.style.chart.segments.dataLabels.formatter,
+        t.from,
+        M({
+          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
+        })
+      ), a = P(
+        e.value.style.chart.segments.dataLabels.formatter,
+        t.to,
+        M({
+          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
+        })
+      ), v = `${l} — ${a}`;
+      return {
+        ...t,
+        shape: "square",
+        value: v,
+        display: `${t.name}: ${v}`
+      };
+    })), Pe = d(() => ({
+      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: re, isImaging: ne, generatePdf: ue, generateImage: ie } = it({
+      elementId: `bullet_${C.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-bullet",
+      options: e.value.userOptions.print
+    }), Me = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), S = h(!1);
+    function ce(t) {
+      S.value = t, Oe.value += 1;
+    }
+    function ze() {
+      return y.value;
+    }
+    const I = h(!1);
+    function W() {
+      I.value = !I.value;
+    }
+    async function He({ scale: t = 2 } = {}) {
+      if (!k.value) return;
+      const { width: l, height: a } = k.value.getBoundingClientRect(), v = l / a, { imageUri: B, base64: g } = await bt({ domElement: k.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: B,
+        base64: g,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: a,
+        aspectRatio: v
+      };
+    }
+    const Re = d(() => U.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), Ne = d(() => e.value.style.chart.backgroundColor), Ue = d(() => e.value.style.chart.legend), We = d(() => e.value.style.chart.title), { exportSvg: je, getSvg: Ve } = ht({
+      svg: R,
+      title: We,
+      legend: Ue,
+      legendItems: Re,
+      backgroundColor: Ne
+    });
+    function ve({ isCb: t }) {
+      t ? e.value.userOptions.callbacks.svg(Ve()) : je();
+    }
+    return Be({
+      getData: ze,
+      getImage: He,
+      generatePdf: ue,
+      generateImage: ie,
+      generateSvg: ve,
+      toggleAnnotator: W,
+      toggleFullscreen: ce
+    }), (t, l) => (s(), n("div", {
+      ref_key: "bulletChart",
+      ref: k,
+      class: de(`vue-data-ui-component vue-ui-bullet ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: V(`font-family:${e.value.style.fontFamily};width:100%;background:${e.value.style.chart.backgroundColor}`),
+      id: `bullet_${C.value}`,
+      onMouseenter: l[0] || (l[0] = () => r(ae)(!0)),
+      onMouseleave: l[1] || (l[1] = () => r(ae)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), x(r(_e), {
+        key: 0,
+        svgRef: r(R),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: I.value,
+        onClose: W
+      }, {
+        "annotator-action-close": f(() => [
+          i(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": f(({ color: a }) => [
+          i(t.$slots, "annotator-action-color", b(p({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": f(({ mode: a }) => [
+          i(t.$slots, "annotator-action-draw", b(p({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": f(({ disabled: a }) => [
+          i(t.$slots, "annotator-action-undo", b(p({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": f(({ disabled: a }) => [
+          i(t.$slots, "annotator-action-redo", b(p({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": f(({ disabled: a }) => [
+          i(t.$slots, "annotator-action-delete", b(p({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : u("", !0),
+      Me.value ? (s(), n("div", Ct, null, 512)) : u("", !0),
+      e.value.style.chart.title.text ? (s(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Y,
+        style: "width:100%;background:transparent;"
+      }, [
+        (s(), x(yt, {
+          lineHeight: "1.3rem",
+          key: `title_${J.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)) : u("", !0),
+      _("div", {
+        id: `legend-top-${C.value}`
+      }, null, 8, At),
+      e.value.userOptions.show && A.value && (r(le) || r(H)) ? (s(), x(r(Le), {
+        key: 3,
+        ref: "details",
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: r(re),
+        isImaging: r(ne),
+        uid: C.value,
+        hasTooltip: !1,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: !1,
+        hasTable: !1,
+        hasLabel: !1,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: S.value,
+        chartElement: k.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: I.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: ce,
+        onGeneratePdf: r(ue),
+        onGenerateImage: r(ie),
+        onGenerateSvg: ve,
+        onToggleAnnotator: W,
+        style: V({
+          visibility: r(le) ? r(H) ? "visible" : "hidden" : "visible"
+        })
+      }, Je({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: f(({ isOpen: a, color: v }) => [
+            i(t.$slots, "menuIcon", b(p({ isOpen: a, color: v })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: f(() => [
+            i(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: f(() => [
+            i(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: f(() => [
+            i(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: f(({ toggleFullscreen: a, isFullscreen: v }) => [
+            i(t.$slots, "optionFullscreen", b(p({ toggleFullscreen: a, isFullscreen: v })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: f(({ toggleAnnotator: a, isAnnotator: v }) => [
+            i(t.$slots, "optionAnnotator", b(p({ toggleAnnotator: a, isAnnotator: v })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : u("", !0),
+      (s(), n("svg", {
+        ref_key: "svgRef",
+        ref: R,
+        xmlns: r(st),
+        class: de({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value, "vue-ui-bullet-svg": !0 }),
+        viewBox: `0 0 ${o.value.width} ${o.value.height}`,
+        style: V(`width: 100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Ke(r(xe)),
+        t.$slots["chart-background"] ? (s(), n("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: o.value.width,
+          height: o.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          i(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Bt)) : u("", !0),
+        F.value ? (s(), n("g", xt, [
+          (s(!0), n(G, null, q(y.value.chunks, (a) => (s(), n("rect", {
+            x: a.x,
+            y: a.y,
+            height: a.height,
+            width: a.width,
+            fill: a.color,
+            "stroke-width": 1,
+            stroke: e.value.style.chart.backgroundColor,
+            style: { transition: "x 0.3s ease-in-out, width 0.3s ease-in-out" }
+          }, null, 8, _t))), 256)),
+          !e.value.style.chart.target.onTop && e.value.style.chart.target.show ? (s(), n("rect", {
+            key: 0,
+            x: y.value.target.x,
+            y: o.value.top + (o.value.chartHeight - o.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
+            height: o.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, Lt)) : u("", !0),
+          _("rect", {
+            x: o.value.left,
+            y: o.value.top + (o.value.chartHeight - o.value.chartHeight * e.value.style.chart.valueBar.heightRatio) / 2,
+            height: o.value.chartHeight * e.value.style.chart.valueBar.heightRatio,
+            width: y.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, $t),
+          e.value.style.chart.valueBar.label.show ? (s(), n("text", {
+            key: 1,
+            x: o.value.left + y.value.value.width,
+            y: o.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"
+          }, T(r(P)(
+            e.value.style.chart.segments.dataLabels.formatter,
+            m.value,
+            r(M)({
+              p: e.value.style.chart.segments.dataLabels.prefix,
+              v: m.value,
+              s: e.value.style.chart.segments.dataLabels.suffix,
+              r: e.value.style.chart.segments.dataLabels.rounding
+            })
+          )), 9, Ft)) : u("", !0),
+          e.value.style.chart.target.onTop && e.value.style.chart.target.show ? (s(), n("rect", {
+            key: 2,
+            x: y.value.target.x,
+            y: o.value.top + (o.value.chartHeight - o.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
+            height: o.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,
+            style: { transition: "x 0.3s ease-in-out" }
+          }, null, 8, St)) : u("", !0),
+          e.value.style.chart.segments.dataLabels.show ? (s(), n("g", Ot, [
+            (s(!0), n(G, null, q(y.value.ticks, (a) => (s(), n("text", {
+              x: a.x,
+              y: a.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"
+            }, T(r(P)(
+              e.value.style.chart.segments.dataLabels.formatter,
+              a.value,
+              r(M)({
+                p: e.value.style.chart.segments.dataLabels.prefix,
+                v: a.value,
+                s: e.value.style.chart.segments.dataLabels.suffix,
+                r: e.value.style.chart.segments.dataLabels.rounding
+              })
+            )), 9, Dt))), 256))
+          ])) : u("", !0),
+          e.value.style.chart.segments.dataLabels.show && e.value.style.chart.segments.ticks.show ? (s(), n("g", Et, [
+            (s(!0), n(G, null, q(y.value.ticks, (a) => (s(), n("line", {
+              x1: a.x,
+              x2: a.x,
+              y1: o.value.bottom,
+              y2: o.value.bottom + 3,
+              stroke: e.value.style.chart.segments.ticks.stroke,
+              "stroke-width": 1,
+              "stroke-linecap": "round"
+            }, null, 8, It))), 256))
+          ])) : u("", !0)
+        ])) : u("", !0),
+        i(t.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, wt)),
+      t.$slots.watermark ? (s(), n("div", Tt, [
+        i(t.$slots, "watermark", b(p({ isPrinting: r(re) || r(ne) })), void 0, !0)
+      ])) : u("", !0),
+      _("div", {
+        id: `legend-bottom-${C.value}`
+      }, null, 8, Pt),
+      Z.value ? (s(), x(Qe, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${C.value}` : `#legend-bottom-${C.value}`
+      }, [
+        _("div", {
+          ref_key: "chartLegend",
+          ref: K
+        }, [
+          e.value.style.chart.legend.show ? (s(), x(mt, {
+            key: 0,
+            clickable: !1,
+            legendSet: U.value,
+            config: Pe.value
+          }, {
+            item: f(({ legend: a }) => [
+              r(w) ? u("", !0) : (s(), n("div", Mt, [
+                _("span", zt, T(a.name) + ":", 1),
+                _("span", null, T(a.value), 1)
+              ]))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : u("", !0),
+          i(t.$slots, "legend", { legend: U.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : u("", !0),
+      t.$slots.source ? (s(), n("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Q,
+        dir: "auto"
+      }, [
+        i(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : u("", !0),
+      r(w) ? (s(), x(vt, { key: 7 })) : u("", !0)
+    ], 46, kt));
+  }
+}, Rt = /* @__PURE__ */ pt(Ht, [["__scopeId", "data-v-1be1eac4"]]), aa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Rt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  ta as a,
+  aa as b,
+  Rt as v
+};