vue-data-ui 2.4.1 → 2.4.2

package/dist/{vue-ui-onion-D9o6Rcgu.js → vue-ui-onion-LsEhBe4x.js}

@@ -1,20 +1,21 @@
-import { computed as d, ref as n, watch as he, onMounted as Ne, onBeforeUnmount as Re, openBlock as s, createElementBlock as u, normalizeClass as z, normalizeStyle as W, createBlock as C, createCommentVNode as b, unref as v, createSlots as Ae, withCtx as h, renderSlot as g, normalizeProps as Y, guardReactiveProps as B, createVNode as fe, Fragment as M, renderList as F, createElementVNode as _, toDisplayString as T, createTextVNode as De, nextTick as Le } from "vue";
-import { u as ze, c as Ye, t as Be, a as Ve, p as ge, b as Xe, o as Ge, e as j, d as Ue, X as Ee, f as N, i as q, x as pe, q as He, r as We, y as je } from "./index-DDXisDKy.js";
-import { t as qe, u as Je } from "./useResponsive-NZB-WLRF.js";
-import { _ as Ke } from "./Title-DYNLqCCT.js";
-import { u as Qe, U as Ze } from "./usePrinter-8ofTb2MJ.js";
-import { L as et } from "./Legend-DXLiSLHd.js";
-import { D as tt } from "./DataTable-DL2agEJ3.js";
-import { _ as at } from "./Tooltip-CICAYyQj.js";
-import lt from "./vue-ui-skeleton-B2sRnIXX.js";
-import ot from "./vue-ui-accordion-D_1fE5EF.js";
-import { u as ye } from "./useNestedProp-S1UXxUgm.js";
-import { _ as rt } from "./PackageVersion-DtnhR89q.js";
-import { _ as st } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ct = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], dt = ["id"], vt = ["stdDeviation"], ht = ["filter"], ft = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], gt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], pt = { key: 1 }, yt = ["onMouseenter"], mt = ["x", "y", "font-size", "fill", "font-weight"], bt = {
-  key: 3,
+import { computed as d, ref as s, watch as ge, onMounted as Re, onBeforeUnmount as De, openBlock as n, createElementBlock as u, normalizeClass as V, normalizeStyle as q, createBlock as C, createCommentVNode as y, unref as v, createSlots as Le, withCtx as h, renderSlot as f, normalizeProps as S, guardReactiveProps as M, createVNode as pe, Fragment as F, renderList as N, createElementVNode as _, toDisplayString as P, createTextVNode as ze, nextTick as Ye } from "vue";
+import { u as Be, c as Ve, t as Xe, a as Ge, p as ye, b as Ue, o as Ee, e as J, d as He, X as We, f as R, i as K, x as me, q as je, r as qe, y as Je } from "./index-DnVHQ2xI.js";
+import { t as Ke, u as Qe } from "./useResponsive-NZB-WLRF.js";
+import { _ as Ze } from "./Title-5VmBwT4i.js";
+import { u as et, U as tt } from "./usePrinter-BEeNAqS5.js";
+import { L as at } from "./Legend-CYF2gpXG.js";
+import { D as lt } from "./DataTable-DTk7C4Pr.js";
+import { _ as ot } from "./Tooltip-Cj4EF7v1.js";
+import rt from "./vue-ui-skeleton-aZmkNzAe.js";
+import nt from "./vue-ui-accordion-DspS4q3f.js";
+import { u as be } from "./useNestedProp-Cox0K0Y5.js";
+import { _ as st } from "./PackageVersion-CvCRsT5_.js";
+import { P as ut } from "./PenAndPaper-Jb0pLt3G.js";
+import { _ as it } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ct = ["id"], dt = ["xmlns", "viewBox"], vt = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ht = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], ft = ["id"], gt = ["stdDeviation"], pt = ["filter"], yt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], mt = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "onMouseenter"], bt = { key: 1 }, kt = ["onMouseenter"], $t = ["x", "y", "font-size", "fill", "font-weight"], wt = {
+  key: 4,
   class: "vue-data-ui-watermark"
-}, kt = ["onClick"], $t = ["innerHTML"], wt = {
+}, Ct = ["onClick"], xt = ["innerHTML"], Tt = {
   __name: "vue-ui-onion",
   props: {
     config: {
@@ -31,34 +32,34 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
     }
   },
   emits: ["selectLegend"],
-  setup(me, { expose: be, emit: ke }) {
-    const k = me, { vue_ui_onion: $e } = ze(), R = d(() => !!k.dataset && k.dataset.length), x = n(Ye()), we = n(null), J = n(0), A = n(!1), V = n(""), p = n([]), P = n(null), K = n(null), Q = n(null), Z = n(0), ee = n(0), te = n(0), e = d({
-      get: () => ae(),
+  setup(ke, { expose: $e, emit: we }) {
+    const k = ke, { vue_ui_onion: Ce } = Be(), D = d(() => !!k.dataset && k.dataset.length), x = s(Ve()), xe = s(null), Q = s(0), L = s(!1), X = s(""), p = s([]), T = s(null), Z = s(null), ee = s(null), te = s(0), ae = s(0), le = s(0), e = d({
+      get: () => oe(),
       set: (a) => a
     });
-    function ae() {
-      const a = ye({
+    function oe() {
+      const a = be({
         userConfig: k.config,
-        defaultConfig: $e
+        defaultConfig: Ce
       });
       return a.theme ? {
-        ...ye({
-          userConfig: Be.vue_ui_onion[a.theme] || k.config,
+        ...be({
+          userConfig: Xe.vue_ui_onion[a.theme] || k.config,
           defaultConfig: a
         }),
-        customPalette: Ve[a.theme] || ge
+        customPalette: Ge[a.theme] || ye
       } : a;
     }
-    he(() => k.config, (a) => {
-      e.value = ae(), ne(), Z.value += 1, ee.value += 1, te.value += 1;
+    ge(() => k.config, (a) => {
+      e.value = oe(), ie(), te.value += 1, ae.value += 1, le.value += 1;
     }, { deep: !0 });
-    const { isPrinting: le, isImaging: oe, generatePdf: re, generateImage: se } = Qe({
+    const { isPrinting: re, isImaging: ne, generatePdf: se, generateImage: ue } = et({
       elementId: `vue-ui-onion_${x.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-onion"
-    }), xe = d(() => Xe(e.value.customPalette)), $ = n({
+    }), Te = d(() => Ue(e.value.customPalette)), $ = s({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), r = n({
+    }), r = s({
       height: 512,
       width: 512,
       padding: {
@@ -68,28 +69,28 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
         bottom: 64
       },
       minRadius: 64
-    }), D = n(null);
-    Ne(() => {
-      ne();
+    }), z = s(null);
+    Re(() => {
+      ie();
     });
-    function ne() {
-      if (Ge(k.dataset) && j({
+    function ie() {
+      if (Ee(k.dataset) && J({
         componentName: "VueUiOnion",
         type: "dataset"
       }), e.value.responsive) {
-        const o = qe(() => {
-          const { width: t, height: l } = Je({
-            chart: P.value,
-            title: e.value.style.chart.title.text ? K.value : null,
-            legend: e.value.style.chart.legend.show ? Q.value : null
+        const o = Ke(() => {
+          const { width: t, height: l } = Qe({
+            chart: T.value,
+            title: e.value.style.chart.title.text ? Z.value : null,
+            legend: e.value.style.chart.legend.show ? ee.value : null
           });
           r.value.width = t, r.value.height = l, r.value.padding.top = Math.max(t, l) * 0.125, r.value.padding.right = Math.max(t, l) * 0.125, r.value.padding.bottom = Math.max(t, l) * 0.125, r.value.padding.left = Math.max(t, l) * 0.125, r.value.minRadius = Math.min(t, l) * 0.125;
         });
-        D.value = new ResizeObserver(o), D.value.observe(P.value.parentNode);
+        z.value = new ResizeObserver(o), z.value.observe(T.value.parentNode);
       }
     }
-    Re(() => {
-      D.value && D.value.disconnect();
+    De(() => {
+      z.value && z.value.disconnect();
     });
     const i = d(() => ({
       top: r.value.padding.top,
@@ -103,12 +104,12 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
       minRadius: r.value.minRadius,
       maxRadius: Math.min(r.value.width, r.value.height) - r.value.padding.top * 2
     })), c = d(() => (k.dataset.forEach((a, o) => {
-      [null, void 0].includes(a.name) && j({
+      [null, void 0].includes(a.name) && J({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
         property: "name",
         index: o
-      }), [void 0].includes(a.percentage) && j({
+      }), [void 0].includes(a.percentage) && J({
         componentName: "VueUiOnion",
         type: "datasetSerieAttribute",
         property: "percentage",
@@ -120,23 +121,23 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
         ...a,
         percentage: a.percentage || 0,
         targetPercentage: a.percentage || 0,
-        color: Ue(a.color) || xe.value[o] || ge[o],
+        color: He(a.color) || Te.value[o] || ye[o],
         id: t,
         shape: "circle",
         opacity: p.value.includes(t) ? 0.5 : 1,
         absoluteIndex: o,
-        segregate: () => ue(t),
+        segregate: () => ce(t),
         isSegregated: p.value.includes(t)
       };
-    }))), O = n(c.value), Ce = d(() => e.value.useStartAnimation), _e = n(null), Te = d(() => Math.max(...c.value.map((a) => a.percentage))), X = n(!1);
-    he(() => c.value, Pe, { immediate: !0 });
-    function Pe() {
-      if (Ce.value && !X.value) {
+    }))), O = s(c.value), _e = d(() => e.value.useStartAnimation), Pe = s(null), Oe = d(() => Math.max(...c.value.map((a) => a.percentage))), G = s(!1);
+    ge(() => c.value, Ae, { immediate: !0 });
+    function Ae() {
+      if (_e.value && !G.value) {
         let o = function() {
-          a >= Te.value ? (cancelAnimationFrame(_e.value), O.value = c.value, X.value = !0) : (O.value = c.value.map((t) => ({
+          a >= Oe.value ? (cancelAnimationFrame(Pe.value), O.value = c.value, G.value = !0) : (O.value = c.value.map((t) => ({
             ...t,
             percentage: a < t.targetPercentage ? a : t.targetPercentage
-          })), a += 1, requestAnimationFrame(o), X.value = !0);
+          })), a += 1, requestAnimationFrame(o), G.value = !0);
         };
         O.value = c.value.map((t) => ({
           ...t,
@@ -147,36 +148,36 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
       } else
         O.value = c.value;
     }
-    const Oe = d(() => ({
+    const Ie = d(() => ({
       cy: "onion-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), Ie = d(() => c.value.filter((a) => !p.value.includes(a.id)).length), w = d(() => {
+    })), Se = d(() => c.value.filter((a) => !p.value.includes(a.id)).length), w = d(() => {
       const a = Math.min(i.value.width, i.value.height) / 2 / c.value.length;
       return {
         gutter: (a > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : a) * e.value.style.chart.layout.gutter.width,
         track: (a > e.value.style.chart.layout.maxThickness ? e.value.style.chart.layout.maxThickness : a) * e.value.style.chart.layout.track.width
       };
-    }), y = d(() => O.value.filter((a) => !p.value.includes(a.id)).map((a, o) => {
-      const t = (i.value.maxRadius - w.value.track) / Ie.value / 2 * (1 + o), l = i.value.centerY - t;
+    }), m = d(() => O.value.filter((a) => !p.value.includes(a.id)).map((a, o) => {
+      const t = (i.value.maxRadius - w.value.track) / Se.value / 2 * (1 + o), l = i.value.centerY - t;
       return {
         percentage: a.percentage || 0,
         ...a,
         labelY: l,
         radius: t,
-        path: Se(t, a.percentage || 0)
+        path: Me(t, a.percentage || 0)
       };
     }));
-    function Se(a, o) {
-      const t = 2 * Math.PI * a, l = t * 0.75, f = `${l} ${t}`, S = l * (1 - o / 100);
+    function Me(a, o) {
+      const t = 2 * Math.PI * a, l = t * 0.75, g = `${l} ${t}`, I = l * (1 - o / 100);
       return {
         bgDashArray: `${l} ${t}`,
         bgDashOffset: 0,
-        dashArray: f,
-        dashOffset: S,
+        dashArray: g,
+        dashOffset: I,
         fullOffset: 0,
         active: `
             M ${i.value.centerX},${i.value.centerY - a} 
@@ -185,21 +186,21 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
         `.trim()
       };
     }
-    function ue(a) {
-      p.value.includes(a) ? p.value = p.value.filter((o) => o !== a) : p.value.push(a), ke("selectLegend", y.value);
+    function ce(a) {
+      p.value.includes(a) ? p.value = p.value.filter((o) => o !== a) : p.value.push(a), we("selectLegend", m.value);
     }
-    function Me() {
-      return y.value;
+    function Fe() {
+      return m.value;
     }
-    const G = d(() => {
-      const a = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = y.value.map((t) => [
+    const U = d(() => {
+      const a = [e.value.table.translations.serie, e.value.table.translations.percentage, e.value.table.translations.value], o = m.value.map((t) => [
         t.name,
         t.percentage,
         t.value
       ]);
       return { head: a, body: o };
-    }), L = d(() => {
-      const a = G.value.head, o = y.value.map((l) => [
+    }), Y = d(() => {
+      const a = U.value.head, o = m.value.map((l) => [
         `<span style="color:${l.color}">⬤</span> ${l.name}`,
         `${Number(l.percentage ?? 0).toFixed(e.value.table.td.roundingPercentage).toLocaleString()}%`,
         `${l.prefix || ""}${[null, void 0, NaN, "NaN"].includes(l.value) ? "-" : l.value.toFixed(e.value.table.td.roundingValue).toLocaleString()}${l.suffix || ""}`
@@ -218,82 +219,95 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
       };
       return { head: a, body: o, config: t, colNames: a };
     });
-    function ie() {
-      Le(() => {
-        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = G.value.head, t = G.value.body, l = a.concat([o]).concat(t), f = He(l);
-        We({ csvContent: f, title: e.value.style.chart.title.text || "vue-ui-onion" });
+    function de() {
+      Ye(() => {
+        const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = U.value.head, t = U.value.body, l = a.concat([o]).concat(t), g = je(l);
+        qe({ csvContent: g, title: e.value.style.chart.title.text || "vue-ui-onion" });
       });
     }
-    const m = n(void 0), I = n(!1);
-    function Fe(a) {
-      I.value = a, J.value += 1;
+    const b = s(void 0), A = s(!1);
+    function Ne(a) {
+      A.value = a, Q.value += 1;
     }
-    const U = n(null);
-    function ce({ datapoint: a, seriesIndex: o, show: t = !0 }) {
+    const E = s(null);
+    function ve({ datapoint: a, seriesIndex: o, show: t = !0 }) {
       const l = a.absoluteIndex;
-      m.value = o, U.value = {
+      b.value = o, E.value = {
         datapoint: a,
         seriesIndex: l,
         series: c.value,
         config: e.value
-      }, A.value = t;
-      let f = "";
-      const S = e.value.style.chart.tooltip.customFormat;
-      if (pe(S) && je(() => S({
+      }, L.value = t;
+      let g = "";
+      const I = e.value.style.chart.tooltip.customFormat;
+      if (me(I) && Je(() => I({
         seriesIndex: l,
         datapoint: a,
         series: c.value,
         config: e.value
       })))
-        V.value = S({
+        X.value = I({
           seriesIndex: l,
           datapoint: a,
           series: c.value,
           config: e.value
         });
       else {
-        const E = e.value.style.chart.tooltip.showPercentage, H = e.value.style.chart.tooltip.showValue;
-        f += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${a.color}"/></svg><span></span>${a.name}</span></div>`, f += `<div style="width:100%;text-align:left;"><b>${E ? N({ p: "", v: a.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${E && H ? "(" : ""}${H ? q(
+        const W = e.value.style.chart.tooltip.showPercentage, j = e.value.style.chart.tooltip.showValue;
+        g += `<div style="width: 100%; border-bottom: 1px solid ${e.value.style.chart.tooltip.borderColor}; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${a.color}"/></svg><span></span>${a.name}</span></div>`, g += `<div style="width:100%;text-align:left;"><b>${W ? R({ p: "", v: a.percentage, s: "%", r: e.value.style.chart.tooltip.roundingPercentage }) : ""}</b> ${W && j ? "(" : ""}${j ? K(
           e.value.style.chart.layout.labels.value.formatter,
           a.value,
-          N({
+          R({
             p: a.prefix || "",
             v: a.value,
             s: a.suffix || "",
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: a, seriesIndex: o }
-        ) : ""}${E && H ? ")" : ""}</div>`, V.value = `<div>${f}</div>`;
+        ) : ""}${W && j ? ")" : ""}</div>`, X.value = `<div>${g}</div>`;
       }
     }
-    function de() {
+    function he() {
       $.value.showTable = !$.value.showTable;
     }
-    function ve() {
+    function fe() {
       $.value.showTooltip = !$.value.showTooltip;
     }
-    return be({
-      getData: Me,
-      generatePdf: re,
-      generateCsv: ie,
-      generateImage: se,
-      toggleTable: de,
-      toggleTooltip: ve
-    }), (a, o) => (s(), u("div", {
-      class: z(`vue-ui-onion ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+    const B = s(!1);
+    function H() {
+      B.value = !B.value;
+    }
+    return $e({
+      getData: Fe,
+      generatePdf: se,
+      generateCsv: de,
+      generateImage: ue,
+      toggleTable: he,
+      toggleTooltip: fe,
+      toggleAnnotator: H
+    }), (a, o) => (n(), u("div", {
+      class: V(`vue-ui-onion ${A.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "onionChart",
-      ref: P,
+      ref: T,
       id: `vue-ui-onion_${x.value}`,
-      style: W(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`)
+      style: q(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`)
     }, [
-      e.value.style.chart.title.text ? (s(), u("div", {
+      e.value.userOptions.buttons.annotator ? (n(), C(ut, {
         key: 0,
+        parent: T.value,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: B.value,
+        onClose: H
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
+      e.value.style.chart.title.text ? (n(), u("div", {
+        key: 1,
         ref_key: "chartTitle",
-        ref: K,
+        ref: Z,
         style: "width:100%;background:transparent"
       }, [
-        (s(), C(Ke, {
-          key: `title_${Z.value}`,
+        (n(), C(Ze, {
+          key: `title_${te.value}`,
           config: {
             title: {
               cy: "onion-div-title",
@@ -305,15 +319,15 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : b("", !0),
-      e.value.userOptions.show && R.value ? (s(), C(Ze, {
+      ], 512)) : y("", !0),
+      e.value.userOptions.show && D.value ? (n(), C(tt, {
         ref_key: "details",
-        ref: we,
-        key: `user_options${J.value}`,
+        ref: xe,
+        key: `user_options${Q.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: v(oe),
-        isPrinting: v(le),
+        isImaging: v(ne),
+        isPrinting: v(re),
         uid: x.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -321,70 +335,80 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: I.value,
+        isFullscreen: A.value,
         isTooltip: $.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: P.value,
+        chartElement: T.value,
         position: e.value.userOptions.position,
-        onToggleFullscreen: Fe,
-        onGeneratePdf: v(re),
-        onGenerateCsv: ie,
-        onGenerateImage: v(se),
-        onToggleTable: de,
-        onToggleTooltip: ve
-      }, Ae({ _: 2 }, [
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: B.value,
+        onToggleFullscreen: Ne,
+        onGeneratePdf: v(se),
+        onGenerateCsv: de,
+        onGenerateImage: v(ue),
+        onToggleTable: he,
+        onToggleTooltip: fe,
+        onToggleAnnotator: H
+      }, Le({ _: 2 }, [
         a.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: h(() => [
-            g(a.$slots, "optionTooltip", {}, void 0, !0)
+            f(a.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         a.$slots.optionPdf ? {
           name: "optionPdf",
           fn: h(() => [
-            g(a.$slots, "optionPdf", {}, void 0, !0)
+            f(a.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         a.$slots.optionCsv ? {
           name: "optionCsv",
           fn: h(() => [
-            g(a.$slots, "optionCsv", {}, void 0, !0)
+            f(a.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         a.$slots.optionImg ? {
           name: "optionImg",
           fn: h(() => [
-            g(a.$slots, "optionImg", {}, void 0, !0)
+            f(a.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         a.$slots.optionTable ? {
           name: "optionTable",
           fn: h(() => [
-            g(a.$slots, "optionTable", {}, void 0, !0)
+            f(a.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         a.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: h(({ toggleFullscreen: t, isFullscreen: l }) => [
-            g(a.$slots, "optionFullscreen", Y(B({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+            f(a.$slots, "optionFullscreen", S(M({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
           ]),
           key: "5"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: h(({ toggleAnnotator: t, isAnnotator: l }) => [
+            f(a.$slots, "optionAnnotator", S(M({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "onGeneratePdf", "onGenerateImage"])) : b("", !0),
-      R.value ? (s(), u("svg", {
-        key: 2,
-        xmlns: v(Ee),
-        class: z({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      D.value ? (n(), u("svg", {
+        key: 3,
+        xmlns: v(We),
+        class: V({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
         viewBox: `0 0 ${r.value.width <= 0 ? 1e-4 : r.value.width} ${r.value.height <= 0 ? 1e-4 : r.value.height}`,
-        style: W(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+        style: q(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        fe(rt),
-        (s(!0), u(M, null, F(y.value, (t, l) => (s(), u("circle", {
+        pe(st),
+        (n(!0), u(F, null, N(m.value, (t, l) => (n(), u("circle", {
           cx: i.value.centerX,
           cy: i.value.centerY,
           r: t.radius <= 0 ? 1e-4 : t.radius,
@@ -394,10 +418,10 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
           "stroke-dasharray": t.path.bgDashArray,
           "stroke-dashoffset": t.path.fullOffset,
           "stroke-linecap": "round",
-          class: z({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value !== l }),
+          class: V({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value !== l }),
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, it))), 256)),
-        (s(!0), u(M, null, F(y.value, (t, l) => (s(), u("circle", {
+        }, null, 10, vt))), 256)),
+        (n(!0), u(F, null, N(m.value, (t, l) => (n(), u("circle", {
           cx: i.value.centerX,
           cy: i.value.centerY,
           r: t.radius < 0 ? 1e-4 : t.radius,
@@ -406,10 +430,10 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
           fill: "none",
           "stroke-dasharray": t.path.dashArray,
           "stroke-dashoffset": t.path.dashOffset,
-          class: z({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value !== l }),
+          class: V({ "vue-ui-onion-path": !0, "vue-ui-onion-blur": e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value !== l }),
           "stroke-linecap": "round",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-        }, null, 10, ct))), 256)),
+        }, null, 10, ht))), 256)),
         _("defs", null, [
           _("filter", {
             id: `blur_${x.value}`,
@@ -421,14 +445,14 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
             _("feGaussianBlur", {
               in: "SourceGraphic",
               stdDeviation: 100 / e.value.style.chart.gradientIntensity
-            }, null, 8, vt)
-          ], 8, dt)
+            }, null, 8, gt)
+          ], 8, ft)
         ]),
-        e.value.style.chart.useGradient ? (s(), u("g", {
+        e.value.style.chart.useGradient ? (n(), u("g", {
           key: 0,
           filter: `url(#blur_${x.value})`
         }, [
-          (s(!0), u(M, null, F(y.value, (t, l) => (s(), u("circle", {
+          (n(!0), u(F, null, N(m.value, (t, l) => (n(), u("circle", {
             cx: i.value.centerX,
             cy: i.value.centerY,
             r: t.radius <= 0 ? 1e-4 : t.radius,
@@ -439,9 +463,9 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
             "stroke-dasharray": t.path.dashArray,
             "stroke-dashoffset": t.path.dashOffset,
             style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
-          }, null, 8, ft))), 256))
-        ], 8, ht)) : b("", !0),
-        (s(!0), u(M, null, F(y.value, (t, l) => (s(), u("circle", {
+          }, null, 8, yt))), 256))
+        ], 8, pt)) : y("", !0),
+        (n(!0), u(F, null, N(m.value, (t, l) => (n(), u("circle", {
           "data-cy-trap": "",
           cx: i.value.centerX,
           cy: i.value.centerY,
@@ -454,68 +478,68 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
           "stroke-linecap": "round",
           class: "vue-ui-onion-path",
           style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" },
-          onMouseenter: (f) => ce({
+          onMouseenter: (g) => ve({
             datapoint: t,
             show: !0,
             seriesIndex: l
           }),
-          onMouseleave: o[0] || (o[0] = (f) => {
-            m.value = void 0, A.value = !1;
+          onMouseleave: o[0] || (o[0] = (g) => {
+            b.value = void 0, L.value = !1;
           })
-        }, null, 40, gt))), 256)),
-        e.value.style.chart.layout.labels.show ? (s(), u("g", pt, [
-          (s(!0), u(M, null, F(y.value, (t, l) => (s(), u("g", {
-            onMouseenter: (f) => ce({
+        }, null, 40, mt))), 256)),
+        e.value.style.chart.layout.labels.show ? (n(), u("g", bt, [
+          (n(!0), u(F, null, N(m.value, (t, l) => (n(), u("g", {
+            onMouseenter: (g) => ve({
               datapoint: t,
               show: !0,
               seriesIndex: l
             }),
-            onMouseleave: o[1] || (o[1] = (f) => {
-              m.value = void 0, A.value = !1;
+            onMouseleave: o[1] || (o[1] = (g) => {
+              b.value = void 0, L.value = !1;
             })
           }, [
-            p.value.includes(t.id) ? b("", !0) : (s(), u("text", {
+            p.value.includes(t.id) ? y("", !0) : (n(), u("text", {
               key: 0,
               x: r.value.width / 2 - w.value.gutter * 0.8 + e.value.style.chart.layout.labels.offsetX,
               y: t.labelY + e.value.style.chart.layout.labels.offsetY,
               "text-anchor": "end",
               "font-size": e.value.style.chart.layout.labels.fontSize,
-              fill: e.value.useBlurOnHover && ![null, void 0].includes(m.value) && m.value === l ? t.color : e.value.style.chart.layout.labels.color,
+              fill: e.value.useBlurOnHover && ![null, void 0].includes(b.value) && b.value === l ? t.color : e.value.style.chart.layout.labels.color,
               "font-weight": e.value.style.chart.layout.labels.bold ? "bold" : "normal"
-            }, T(t.name ? t.name + ": " : "") + " " + T(e.value.style.chart.layout.labels.percentage.show ? v(N)({
+            }, P(t.name ? t.name + ": " : "") + " " + P(e.value.style.chart.layout.labels.percentage.show ? v(R)({
               v: t.percentage,
               s: "%",
               r: e.value.style.chart.layout.labels.roundingPercentage
-            }) : "") + " " + T(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${v(q)(
+            }) : "") + " " + P(!e.value.style.chart.layout.labels.percentage.show && e.value.style.chart.layout.labels.value.show ? `: ${v(K)(
               e.value.style.chart.layout.labels.value.formatter,
               t.value,
-              v(N)({
+              v(R)({
                 p: t.prefix || "",
                 v: t.value || 0,
                 s: t.suffix || "",
                 r: e.value.style.chart.layout.labels.roundingValue
               }),
               { datapoint: t, seriesIndex: l }
-            )}` : `${e.value.style.chart.layout.labels.value.show && t.value ? `(${v(q)(
+            )}` : `${e.value.style.chart.layout.labels.value.show && t.value ? `(${v(K)(
               e.value.style.chart.layout.labels.value.formatter,
               t.value,
-              v(N)({
+              v(R)({
                 p: t.prefix || "",
                 v: t.value || 0,
                 s: t.suffix || "",
                 r: e.value.style.chart.layout.labels.roundingValue
               }),
               { datapoint: t, seriesIndex: l }
-            )})` : ""}`), 9, mt))
-          ], 40, yt))), 256))
-        ])) : b("", !0),
-        g(a.$slots, "svg", { svg: r.value }, void 0, !0)
-      ], 14, ut)) : b("", !0),
-      a.$slots.watermark ? (s(), u("div", bt, [
-        g(a.$slots, "watermark", Y(B({ isPrinting: v(le) || v(oe) })), void 0, !0)
-      ])) : b("", !0),
-      R.value ? b("", !0) : (s(), C(lt, {
-        key: 4,
+            )})` : ""}`), 9, $t))
+          ], 40, kt))), 256))
+        ])) : y("", !0),
+        f(a.$slots, "svg", { svg: r.value }, void 0, !0)
+      ], 14, dt)) : y("", !0),
+      a.$slots.watermark ? (n(), u("div", wt, [
+        f(a.$slots, "watermark", S(M({ isPrinting: v(re) || v(ne) })), void 0, !0)
+      ])) : y("", !0),
+      D.value ? y("", !0) : (n(), C(rt, {
+        key: 5,
         config: {
           type: "onion",
           style: {
@@ -528,29 +552,29 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
       }, null, 8, ["config"])),
       _("div", {
         ref_key: "chartLegend",
-        ref: Q
+        ref: ee
       }, [
-        e.value.style.chart.legend.show ? (s(), C(et, {
-          key: `legend_${te.value}`,
+        e.value.style.chart.legend.show ? (n(), C(at, {
+          key: `legend_${le.value}`,
           legendSet: c.value,
-          config: Oe.value,
-          onClickMarker: o[2] || (o[2] = ({ legend: t }) => ue(t.id))
+          config: Ie.value,
+          onClickMarker: o[2] || (o[2] = ({ legend: t }) => ce(t.id))
         }, {
           item: h(({ legend: t }) => [
             _("div", {
               "data-cy-legend-item": "",
               onClick: (l) => t.segregate(),
-              style: W(`opacity:${p.value.includes(t.id) ? 0.5 : 1}`)
-            }, T(t.name ? t.name + ": " : "") + " " + T((t.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, kt)
+              style: q(`opacity:${p.value.includes(t.id) ? 0.5 : 1}`)
+            }, P(t.name ? t.name + ": " : "") + " " + P((t.percentage || 0).toFixed(e.value.style.chart.legend.roundingPercentage)) + "% ", 13, Ct)
           ]),
           _: 1
-        }, 8, ["legendSet", "config"])) : g(a.$slots, "legend", {
+        }, 8, ["legendSet", "config"])) : f(a.$slots, "legend", {
           key: 1,
           legend: c.value
         }, void 0, !0)
       ], 512),
-      fe(at, {
-        show: $.value.showTooltip && A.value,
+      pe(ot, {
+        show: $.value.showTooltip && L.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -560,20 +584,20 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: P.value,
-        content: V.value,
-        isCustom: v(pe)(e.value.style.chart.tooltip.customFormat)
+        parent: T.value,
+        content: X.value,
+        isCustom: v(me)(e.value.style.chart.tooltip.customFormat)
       }, {
         "tooltip-before": h(() => [
-          g(a.$slots, "tooltip-before", Y(B({ ...U.value })), void 0, !0)
+          f(a.$slots, "tooltip-before", S(M({ ...E.value })), void 0, !0)
         ]),
         "tooltip-after": h(() => [
-          g(a.$slots, "tooltip-after", Y(B({ ...U.value })), void 0, !0)
+          f(a.$slots, "tooltip-after", S(M({ ...E.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      R.value ? (s(), C(ot, {
-        key: 5,
+      D.value ? (n(), C(nt, {
+        key: 6,
         hideDetails: "",
         config: {
           open: $.value.showTable,
@@ -589,29 +613,29 @@ const nt = ["id"], ut = ["xmlns", "viewBox"], it = ["cx", "cy", "r", "stroke", "
         }
       }, {
         content: h(() => [
-          (s(), C(tt, {
-            key: `table_${ee.value}`,
-            colNames: L.value.colNames,
-            head: L.value.head,
-            body: L.value.body,
-            config: L.value.config,
+          (n(), C(lt, {
+            key: `table_${ae.value}`,
+            colNames: Y.value.colNames,
+            head: Y.value.head,
+            body: Y.value.body,
+            config: Y.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
             onClose: o[3] || (o[3] = (t) => $.value.showTable = !1)
           }, {
             th: h(({ th: t }) => [
-              De(T(t), 1)
+              ze(P(t), 1)
             ]),
             td: h(({ td: t }) => [
-              _("div", { innerHTML: t }, null, 8, $t)
+              _("div", { innerHTML: t }, null, 8, xt)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : b("", !0)
-    ], 14, nt));
+      }, 8, ["config"])) : y("", !0)
+    ], 14, ct));
   }
-}, Dt = /* @__PURE__ */ st(wt, [["__scopeId", "data-v-3e9f72db"]]);
+}, Bt = /* @__PURE__ */ it(Tt, [["__scopeId", "data-v-61bb1aef"]]);
 export {
-  Dt as default
+  Bt as default
 };