vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-dumbbell-DIMiCY4r.js

@@ -0,0 +1,1380 @@
+import { defineAsyncComponent as G, computed as b, ref as h, toRefs as rl, watch as fe, shallowRef as ct, onMounted as vt, onBeforeUnmount as dt, watchEffect as ul, openBlock as n, createElementBlock as v, unref as c, normalizeStyle as le, normalizeClass as ht, createElementVNode as i, toDisplayString as _, createBlock as T, createCommentVNode as g, withCtx as m, renderSlot as p, normalizeProps as C, guardReactiveProps as w, createSlots as ft, createVNode as yt, Fragment as A, renderList as X, withDirectives as ae, vShow as se, Teleport as il, createTextVNode as Xe, resolveDynamicComponent as cl, mergeProps as vl, nextTick as bt } from "vue";
+import { j as gt, t as pt, o as dl, q as mt, r as hl, K as kt, D as fl, l as S, k as B, X as xt, u as _t, x as oe, w as ne, a0 as yl, a1 as bl } from "./lib-DBptbyyI.js";
+import { t as ze, u as gl } from "./useResponsive-DfdjqQps.js";
+import { u as pl } from "./useConfig-DO94Aj5s.js";
+import { u as ml } from "./usePrinter-CEpYU3r5.js";
+import { u as kl, B as xl } from "./BaseScanner-BhhkKVoj.js";
+import { u as _l } from "./useSvgExport-ByUukOZt.js";
+import { u as Ie } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Cl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as wl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as $l } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Ll } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Al from "./img-LXxMLmCg.js";
+import Sl from "./Title-BeMKE1cj.js";
+import Nl from "./vue_ui_dumbbell-BCOHDiPk.js";
+import Ml from "./Legend-CS7Xo5LK.js";
+import { A as Tl } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as Xl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const zl = ["id"], Il = ["id"], Pl = ["id"], Dl = { style: { position: "relative" } }, Ol = ["xmlns", "viewBox", "aria-describedby"], Fl = ["x", "y", "width", "height"], Hl = { key: 1 }, El = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Gl = { key: 2 }, Bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Rl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Vl = ["transform", "font-size", "fill"], Ul = ["x", "y", "font-size", "fill", "font-weight", "onMouseenter", "onMouseleave", "onClick"], Wl = ["x", "y", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], ql = ["x", "y", "font-size", "fill"], Kl = ["transform", "font-size", "fill", "font-weight", "text-anchor"], jl = ["d", "stroke", "stroke-width", "stroke-dasharray"], Yl = ["d", "stroke", "stroke-width", "stroke-dasharray"], Zl = ["x", "y", "height", "width", "fill"], Jl = ["transform", "fill", "font-size"], Ql = ["id"], ea = ["stop-color"], ta = ["stop-color"], la = ["stop-color"], aa = ["id"], sa = ["stop-color"], oa = ["stop-color"], na = ["stop-color"], ra = ["id"], ua = ["stop-color"], ia = ["stop-color"], ca = ["stop-color"], va = ["id"], da = ["stop-color"], ha = ["stop-color"], fa = ["stop-color"], ya = ["id"], ba = ["stop-color"], ga = ["stop-color"], pa = ["stop-color"], ma = ["id"], ka = ["stop-color"], xa = ["stop-color"], _a = ["id"], Ca = ["stop-color"], wa = ["stop-color"], $a = { key: 0 }, La = { key: 0 }, Aa = ["d", "fill"], Sa = { key: 1 }, Na = ["x", "y", "height", "width", "fill"], Ma = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ta = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Xa = { key: 7 }, za = ["x", "y", "fill", "font-size"], Ia = { key: 8 }, Pa = ["x", "y", "fill", "font-size"], Da = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Oa = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Fa = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Ha = ["id"], Ea = ["xmlns", "height", "width"], Ga = ["fill"], Ba = ["innerHTML"], Ra = {
+  __name: "vue-ui-dumbbell",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint", "copyAlt"],
+  setup(Ct, { expose: wt, emit: $t }) {
+    const Lt = G(() => import("./BaseIcon-Cb3zzG6s.js")), At = G(() => import("./vue-ui-accordion-nvggWcGN.js")), St = G(() => import("./DataTable-DT2kIdQ6.js")), Nt = G(() => import("./PenAndPaper-Ct3qJ4lA.js")), Mt = G(() => import("./UserOptions-rW2fRf3V.js")), Tt = G(() => import("./PackageVersion-DPO-OOVI.js")), Xt = G(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_dumbbell: zt } = pl(), { isThemeValid: It, warnInvalidTheme: Pt } = Cl(), $ = Ct, Dt = $t, re = b({
+      get() {
+        return !!$.dataset && $.dataset.length;
+      },
+      set(l) {
+        return l;
+      }
+    }), f = h(gt()), Pe = h(0), z = h(null), De = h(null), Oe = h(null), Fe = h(null), He = h(null), Ee = h(0), Ge = h(0), Be = h(0), Re = h(!1), j = h(null), ye = h(null), ue = h(!1), ie = h(!1), be = h(null), ge = h(null), ce = h(null), pe = h(null), I = h(null), u = h(null), L = h(null), me = h(!1), H = h(!1), e = h(Ce()), Y = b(() => e.value.userOptions.useCursorPointer), Ot = b(() => pt({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        useAnimation: !1,
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            padding: {
+              top: 12,
+              right: 12,
+              bottom: 12,
+              left: 12
+            },
+            grid: {
+              horizontalGrid: { stroke: "#6A6A6A" },
+              verticalGrid: { stroke: "#6A6A6A" }
+            },
+            labels: {
+              axis: {
+                yLabel: "",
+                xLabel: ""
+              },
+              xAxisLabels: { show: !1 },
+              yAxisLabels: { show: !1 },
+              endLabels: { show: !1 },
+              startLabels: { show: !1 }
+            },
+            legend: {
+              backgroundColor: "transparent"
+            },
+            plots: {
+              endColor: "#969696",
+              startColor: "#DBDBDB",
+              stroke: "#6A6A6A",
+              evaluationColors: { enable: !1 }
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: ke, FINAL_DATASET: xe, manualLoading: Ft } = kl({
+      ...rl($),
+      FINAL_CONFIG: e,
+      prepareConfig: Ce,
+      skeletonDataset: $.config?.skeletonDataset ?? [
+        { name: "_", start: 21, end: 34 },
+        { name: "_", start: 13, end: 21 },
+        { name: "_", start: 8, end: 13 },
+        { name: "_", start: 5, end: 8 },
+        { name: "_", start: 3, end: 5 }
+      ],
+      skeletonConfig: pt({
+        defaultConfig: e.value,
+        userConfig: Ot.value
+      })
+    }), { userOptionsVisible: _e, setUserOptionsVisibility: Ve, keepUserOptionState: Ue } = wl({ config: e.value }), { svgRef: Z } = $l({ config: e.value.style.chart.title });
+    function Ce() {
+      const l = Ie({
+        userConfig: $.config,
+        defaultConfig: zt
+      }), s = l.theme;
+      if (!s) return l;
+      if (!It.value(l))
+        return Pt(l), l;
+      const t = Ie({
+        userConfig: Nl[s] || $.config,
+        defaultConfig: l
+      });
+      return Ie({
+        userConfig: $.config,
+        defaultConfig: t
+      });
+    }
+    fe(() => $.config, (l) => {
+      ke.value || (e.value = Ce()), _e.value = !e.value.userOptions.showOnChartHover, qe(), Ee.value += 1, Ge.value += 1, Be.value += 1, U.value = e.value.style.chart.rowHeight, W.value = e.value.style.chart.width, E.value.showTable = e.value.table.show;
+    }, { deep: !0 }), fe(() => xe.value, (l) => {
+      Array.isArray(l) && l.length > 0 && (Ft.value = !1), Qe(), et();
+    }, { deep: !0 });
+    const P = ct(null), R = ct(null);
+    vt(() => {
+      Re.value = !0, qe();
+    });
+    const We = b(() => !!e.value.debug);
+    function qe() {
+      if (dl($.dataset) ? mt({
+        componentName: "VueUiDumbbell",
+        type: "dataset",
+        debug: We.value
+      }) : $.dataset.forEach((l, s) => {
+        hl({
+          datasetObject: l,
+          requiredAttributes: ["name", "start", "end"]
+        }).forEach((t) => {
+          re.value = !1, mt({
+            componentName: "VueUiDumbbell",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: s,
+            debug: We.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = ze(() => {
+          const { width: s, height: t } = gl({
+            chart: z.value,
+            title: e.value.style.chart.title.text ? De.value : null,
+            legend: e.value.style.chart.legend.show ? Oe.value : null,
+            source: Fe.value,
+            noTitle: He.value
+          }), a = e.value.style.chart.title.text ? 24 : 0, r = e.value.style.chart.legend.show ? 24 : 0;
+          requestAnimationFrame(async () => {
+            W.value = Math.max(0.1, s), U.value = Math.max(0.1, (Math.max(0.1, t) - (a + r)) / xe.value.length), st();
+          });
+        });
+        P.value && (R.value && P.value.unobserve(R.value), P.value.disconnect()), P.value = new ResizeObserver(l), R.value = z.value.parentNode, P.value.observe(R.value);
+      }
+      st();
+    }
+    dt(() => {
+      M.value != null && (cancelAnimationFrame(M.value), M.value = null), P.value && (R.value && P.value.unobserve(R.value), P.value.disconnect());
+    });
+    const { isPrinting: we, isImaging: $e, generatePdf: Ke, generateImage: je } = ml({
+      elementId: `dumbbell_${f.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-dumbbell",
+      options: e.value.userOptions.print
+    }), Ht = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), E = h({
+      showTable: e.value.table.show
+    });
+    fe(e, () => {
+      E.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 });
+    const V = b(() => xe.value.map((l, s) => ({
+      ...l,
+      start: kt(l.start),
+      end: kt(l.end),
+      id: l.id ?? `${String(l.name)}__${String(l.start)}__${String(l.end)}__${gt()}`
+    }))), Ye = b(() => {
+      const l = e.value.style.chart.grid, s = V.value.flatMap((y) => [y.start, y.end]).map((y) => Number(y)).filter((y) => Number.isFinite(y)), t = s.length ? Math.min(...s) : 0, a = s.length ? Math.max(...s) : 0, r = l.scaleMin ?? Math.min(t, 0), d = l.scaleMax ?? a;
+      return { min: r, max: d };
+    }), N = b(() => fl(Ye.value.min, Ye.value.max, e.value.style.chart.grid.scaleSteps)), U = h(e.value.style.chart.rowHeight), W = h(e.value.style.chart.width);
+    function Et() {
+      let l = 0;
+      ge.value && (l = Array.from(ge.value.querySelectorAll("text")).reduce((a, r) => {
+        const d = r.getComputedTextLength();
+        return d > a ? d : a;
+      }, 0));
+      const s = be.value ? be.value.getBoundingClientRect().width : 0;
+      return l + s + (s ? 24 + e.value.style.chart.labels.axis.yLabelOffsetX : 0);
+    }
+    const Le = h(0), Gt = ze((l) => {
+      Le.value = l;
+    }, 100);
+    ul((l) => {
+      const s = ce.value;
+      if (!s) return;
+      const t = new ResizeObserver((a) => {
+        Gt(a[0].contentRect.height);
+      });
+      t.observe(s), l(() => t.disconnect());
+    }), dt(() => {
+      Le.value = 0;
+    });
+    const Ze = b(() => {
+      H.value;
+      let l = 0;
+      pe.value && (l = pe.value.getBBox().height);
+      let s = 0;
+      return ce.value && (s = Le.value), l + s;
+    }), Ae = b(() => V.value.length);
+    function Je(l, s, t) {
+      const a = Number(l), r = Number(s.min), d = Number(s.max), y = Number(t.width);
+      if (!Number.isFinite(a) || !Number.isFinite(r) || !Number.isFinite(d) || !Number.isFinite(y))
+        return t.left;
+      const x = d - r;
+      return x <= 0 ? t.left : t.left + (a - r) / x * y;
+    }
+    const o = b(() => {
+      H.value;
+      const l = Et(), s = e.value.style.chart.padding, t = e.value.style.chart.labels.axis.xLabel ? e.value.style.chart.labels.axis.xLabelOffsetY : 0, a = U.value * Ae.value - Ze.value - s.top - s.bottom - t, r = a / Ae.value, d = U.value * Ae.value, y = W.value - l - s.left - s.right, x = N.value.ticks.length * (y / N.value.ticks.length);
+      return {
+        left: e.value.style.chart.padding.left + l,
+        right: W.value - e.value.style.chart.padding.right,
+        top: e.value.style.chart.padding.top,
+        bottom: d - e.value.style.chart.padding.bottom - Ze.value - t,
+        width: y,
+        height: a,
+        rowHeight: r,
+        absoluteHeight: d,
+        widthPlotReference: x
+      };
+    }), D = b(() => Math.min(U.value / 2 * 0.7, e.value.style.chart.plots.radius)), J = h([]), k = b({
+      get() {
+        const l = o.value, s = N.value;
+        return J.value.map((t, a) => {
+          const r = Je(t.start, s, l), d = Je(t.endVal, s, l), y = r + (d - r) / 2, x = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end > t.start, F = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end < t.start, it = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end === t.start || [null, void 0].includes(t.start) || [null, void 0].includes(t.end), nl = x ? e.value.style.chart.plots.evaluationColors.positive : F ? e.value.style.chart.plots.evaluationColors.negative : e.value.style.chart.plots.evaluationColors.neutral;
+          return {
+            ...t,
+            isPositive: x,
+            isNegative: F,
+            isNeutral: it,
+            evaluationColor: nl,
+            evaluationGrad: `url(#${x ? "positive" : F ? "negative" : "neutral"}_grad_${f.value})`,
+            startX: r,
+            endX: d,
+            centerX: y,
+            y: l.top + a * l.rowHeight + l.rowHeight / 2
+          };
+        });
+      },
+      set(l) {
+        J.value = l;
+      }
+    });
+    function Qe() {
+      J.value = V.value.map((l) => {
+        const s = Number(l.start);
+        return {
+          ...l,
+          endVal: Number.isFinite(s) ? s : 0
+        };
+      });
+    }
+    const M = h(null);
+    vt(() => {
+      et();
+    });
+    function et() {
+      if (M.value != null && (cancelAnimationFrame(M.value), M.value = null), Qe(), !e.value.useAnimation) {
+        k.value = J.value.map((a) => {
+          const r = Number(a.end);
+          return { ...a, endVal: Number.isFinite(r) ? r : a.endVal };
+        });
+        return;
+      }
+      const l = Math.max(1, Math.min(100, e.value.animationSpeed || 100)) / 100, s = V.value.map((a) => {
+        const r = Number(a.start), d = Number(a.end), y = Number.isFinite(r) ? r : 0;
+        return (Number.isFinite(d) ? d : y) - y;
+      }), t = () => {
+        let a = !0;
+        k.value = J.value.map((r, d) => {
+          const y = Number.isFinite(Number(r.end)) ? Number(r.end) : r.endVal, x = r.endVal + s[d] * l, F = s[d] >= 0 ? Math.min(x, y) : Math.max(x, y);
+          return F !== y && (a = !1), { ...r, endVal: F };
+        }), a ? M.value = null : M.value = requestAnimationFrame(t);
+      };
+      M.value = requestAnimationFrame(t);
+    }
+    const Se = b(() => e.value.style.chart.plots.evaluationColors.enable ? [
+      { name: e.value.style.chart.legend.labelNegative, color: e.value.style.chart.plots.gradient.show ? `url(#negative_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.negative },
+      { name: e.value.style.chart.legend.labelNeutral, color: e.value.style.chart.plots.gradient.show ? `url(#neutral_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.neutral },
+      { name: e.value.style.chart.legend.labelPositive, color: e.value.style.chart.plots.gradient.show ? `url(#positive_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.positive }
+    ] : [
+      { name: e.value.style.chart.legend.labelStart, color: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${f.value})` : e.value.style.chart.plots.startColor },
+      { name: e.value.style.chart.legend.labelEnd, color: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${f.value})` : e.value.style.chart.plots.endColor }
+    ]), Bt = b(() => ({
+      cy: "donut-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,
+      paddingTop: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), O = b(() => {
+      const l = k.value.map((t) => ({
+        name: t.name
+      })), s = k.value.map((t) => ({
+        start: t.start,
+        end: t.end
+      }));
+      return { head: l, body: s };
+    }), q = b(() => {
+      const l = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.start,
+        e.value.table.columnNames.end,
+        e.value.table.columnNames.progression
+      ], s = O.value.head.map((r, d) => {
+        const y = S({
+          p: e.value.style.chart.labels.prefix,
+          v: O.value.body[d].start,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        }), x = S({
+          p: e.value.style.chart.labels.prefix,
+          v: O.value.body[d].end,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        }), F = S({
+          v: 100 * (O.value.body[d].end / O.value.body[d].start - 1),
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        });
+        return [
+          { name: r.name },
+          y,
+          x,
+          F
+        ];
+      }), t = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.start,
+          e.value.table.columnNames.end,
+          e.value.table.columnNames.progression
+        ],
+        head: l,
+        body: s,
+        config: t
+      };
+    });
+    function Ne(l = null) {
+      bt(() => {
+        const s = O.value.head.map((r, d) => [[
+          r.name
+        ], [O.value.body[d].start], [O.value.body[d].end]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.start], [e.value.table.columnNames.end]]].concat(s), a = yl(t);
+        l ? l(a) : bl({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
+      });
+    }
+    const K = h(!1);
+    function tt(l) {
+      K.value = l, Pe.value += 1;
+    }
+    function Rt() {
+      return V.value;
+    }
+    function lt() {
+      E.value.showTable = !E.value.showTable;
+    }
+    const Q = h(!1);
+    function Me() {
+      Q.value = !Q.value;
+    }
+    async function Vt({ scale: l = 2 } = {}) {
+      if (!z.value) return;
+      const { width: s, height: t } = z.value.getBoundingClientRect(), a = s / t, { imageUri: r, base64: d } = await Al({ domElement: z.value, base64: !0, img: !0, scale: l });
+      return {
+        imageUri: r,
+        base64: d,
+        title: e.value.style.chart.title.text,
+        width: s,
+        height: t,
+        aspectRatio: a
+      };
+    }
+    const at = b(() => N.value.ticks), Ut = b(() => ({ start: 0, end: at.value.length }));
+    Ll({
+      timeLabelsEls: ce,
+      timeLabels: at,
+      slicer: Ut,
+      configRef: e,
+      rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: W,
+      height: U,
+      targetClass: ".vue-ui-dumbbell-scale-label",
+      rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
+    });
+    function Wt({
+      rowHeight: l,
+      fontSize: s,
+      showProgression: t
+    }) {
+      if (!t) return !1;
+      const a = l / 3, r = l / 1.3, d = Math.abs(r - a), y = s * 1.2;
+      return d < y;
+    }
+    const qt = /* @__PURE__ */ (() => {
+      let l = null, s = 0;
+      const t = 1;
+      return (a) => {
+        if (a === H.value) {
+          l = null, s = 0;
+          return;
+        }
+        l === null || l !== a ? (l = a, s = 1) : (s += 1, s >= t && (H.value = a, l = null, s = 0));
+      };
+    })(), st = ze(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const l = Wt({
+            rowHeight: o.value.rowHeight,
+            fontSize: e.value.style.chart.labels.yAxisLabels.fontSize,
+            showProgression: e.value.style.chart.labels.yAxisLabels.showProgression
+          });
+          qt(l);
+        });
+      });
+    }, 100);
+    function ve({ datapoint: l, seriesIndex: s }) {
+      I.value = s, u.value = l, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: s });
+    }
+    function de({ datapoint: l, seriesIndex: s }) {
+      I.value = null, u.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: s });
+    }
+    function he({ datapoint: l, seriesIndex: s }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: s });
+    }
+    const Te = b(() => {
+      if (u.value === null) return 0;
+      const l = ![null, void 0].includes(u.value.start), s = ![null, void 0].includes(u.value.end);
+      return l && s ? Math.min(u.value.startX, u.value.endX) + Math.abs(u.value.startX - u.value.endX) / 2 : l && !s ? u.value.startX : s && !l ? u.value.endX : null;
+    }), Kt = b(() => {
+      if (u.value === null) return "";
+      const l = ![null, void 0].includes(u.value.start), s = ![null, void 0].includes(u.value.end);
+      let t = "", a = "";
+      return l && (t = B(
+        e.value.style.chart.labels.formatter,
+        u.value.start,
+        S({
+          p: e.value.style.chart.labels.prefix,
+          v: u.value.start,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.style.chart.labels.startLabels.rounding
+        }),
+        { datapoint: u.value, seriesIndex: I.value }
+      )), s && (a = B(
+        e.value.style.chart.labels.formatter,
+        u.value.end,
+        S({
+          p: e.value.style.chart.labels.prefix,
+          v: u.value.end,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.style.chart.labels.startLabels.rounding
+        }),
+        { datapoint: u.value, seriesIndex: I.value }
+      )), l && s ? `${t} → ${a}` : l && !s ? t : s && !l ? a : "";
+    }), ee = b(() => {
+      const l = e.value.table.useDialog && !e.value.table.show, s = E.value.showTable;
+      return {
+        component: l ? Xt : At,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: l ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: K.value,
+          fullscreenParent: z.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: Y.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: s,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    fe(() => E.value.showTable, (l) => {
+      e.value.table.show || (l && e.value.table.useDialog && j.value ? j.value.open() : "close" in j.value && j.value.close());
+    });
+    function ot() {
+      E.value.showTable = !1, ye.value && ye.value.setTableIconState(!1);
+    }
+    const jt = b(() => Se.value.map((l) => ({
+      ...l,
+      shape: "circle"
+    }))), Yt = b(() => e.value.style.chart.backgroundColor), Zt = b(() => e.value.style.chart.legend), Jt = b(() => e.value.style.chart.title), { exportSvg: Qt, getSvg: el } = _l({
+      svg: Z,
+      title: Jt,
+      legend: Zt,
+      legendItems: jt,
+      backgroundColor: Yt
+    });
+    async function nt({ isCb: l }) {
+      ie.value = !0, await bt();
+      try {
+        if (l) {
+          const { blob: s, url: t, text: a, dataUrl: r } = await el();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: s, url: t, text: a, dataUrl: r }));
+        } else
+          await Promise.resolve(Qt());
+      } finally {
+        ie.value = !1;
+      }
+    }
+    function tl(l) {
+      if (l?.stage === "start") {
+        ue.value = !0;
+        return;
+      }
+      if (l?.stage === "end") {
+        ue.value = !1;
+        return;
+      }
+      je();
+    }
+    async function rt() {
+      if (Dt("copyAlt", {
+        config: e.value,
+        dataset: k.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: k.value
+      }));
+    }
+    function ll(l) {
+      const s = k.value.length;
+      return s ? (l % s + s) % s : null;
+    }
+    function ut() {
+      if (L.value !== null) {
+        const l = k.value[L.value];
+        l && de({
+          datapoint: l,
+          seriesIndex: L.value
+        });
+      }
+      L.value = null, I.value = null, u.value = null;
+    }
+    function al() {
+      L.value = null, me.value = !0;
+    }
+    function sl() {
+      ut(), me.value = !1;
+    }
+    function ol(l) {
+      if (!Z.value || Q.value || document.activeElement !== Z.value || !k.value.length) return;
+      const s = ["ArrowUp", "ArrowLeft"].includes(l.key), t = ["ArrowDown", "ArrowRight"].includes(l.key), a = l.key === "Enter" || l.key === " ", r = l.key === "Escape";
+      if (!s && !t && !a && !r) return;
+      if (l.preventDefault(), l.stopPropagation(), r) {
+        ut();
+        return;
+      }
+      if (a) {
+        if (L.value === null) return;
+        const x = k.value[L.value];
+        if (!x) return;
+        he({
+          datapoint: x,
+          seriesIndex: L.value
+        });
+        return;
+      }
+      let d = L.value;
+      d === null ? d = t ? 0 : k.value.length - 1 : d = ll(d + (t ? 1 : -1));
+      const y = k.value[d];
+      y && (L.value = d, ve({
+        datapoint: y,
+        seriesIndex: d
+      }));
+    }
+    const te = b(() => ({
+      head: q.value.head,
+      body: q.value.body.map((l) => [
+        l[0]?.name ?? "",
+        l[1],
+        l[2],
+        l[3]
+      ]),
+      caption: e.value.a11y.translations.tableCaption,
+      notice: e.value.a11y.translations.tableAvailable
+    }));
+    return wt({
+      getData: Rt,
+      getImage: Vt,
+      generatePdf: Ke,
+      generateCsv: Ne,
+      generateImage: je,
+      generateSvg: nt,
+      toggleTable: lt,
+      toggleAnnotator: Me,
+      toggleFullscreen: tt,
+      copyAlt: rt
+    }), (l, s) => (n(), v("div", {
+      ref_key: "dumbbellChart",
+      ref: z,
+      class: ht(`vue-data-ui-component vue-ui-dumbbell ${K.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: le(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      id: `dumbbell_${f.value}`,
+      onMouseenter: s[1] || (s[1] = () => c(Ve)(!0)),
+      onMouseleave: s[2] || (s[2] = () => c(Ve)(!1))
+    }, [
+      i("div", {
+        id: `chart-instructions-${f.value}`,
+        class: "sr-only"
+      }, [
+        i("p", null, _(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Il),
+      te.value.body.length ? (n(), T(Tl, {
+        key: 0,
+        uid: f.value,
+        head: te.value.head,
+        body: te.value.body,
+        caption: te.value.caption,
+        notice: te.value.notice
+      }, null, 8, ["uid", "head", "body", "caption", "notice"])) : g("", !0),
+      e.value.userOptions.buttons.annotator ? (n(), T(c(Nt), {
+        key: 1,
+        svgRef: c(Z),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Q.value,
+        isCursorPointer: Y.value,
+        onClose: Me
+      }, {
+        "annotator-action-close": m(() => [
+          p(l.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": m(({ color: t }) => [
+          p(l.$slots, "annotator-action-color", C(w({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": m(({ mode: t }) => [
+          p(l.$slots, "annotator-action-draw", C(w({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": m(({ disabled: t }) => [
+          p(l.$slots, "annotator-action-undo", C(w({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": m(({ disabled: t }) => [
+          p(l.$slots, "annotator-action-redo", C(w({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": m(({ disabled: t }) => [
+          p(l.$slots, "annotator-action-delete", C(w({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : g("", !0),
+      Ht.value ? (n(), v("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: He,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : g("", !0),
+      e.value.style.chart.title.text ? (n(), v("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: De,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (n(), T(Sl, {
+          key: `title_${Ee.value}`,
+          config: {
+            title: {
+              cy: "donut-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "donut-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : g("", !0),
+      i("div", {
+        id: `legend-top-${f.value}`
+      }, null, 8, Pl),
+      e.value.userOptions.show && re.value && (c(Ue) || c(_e)) ? (n(), T(c(Mt), {
+        ref_key: "userOptionsRef",
+        ref: ye,
+        key: `user_option_${Pe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(we),
+        isImaging: c($e),
+        uid: f.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: K.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: z.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: Q.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: Y.value,
+        onToggleFullscreen: tt,
+        onGeneratePdf: c(Ke),
+        onGenerateCsv: Ne,
+        onGenerateImage: tl,
+        onGenerateSvg: nt,
+        onToggleTable: lt,
+        onToggleAnnotator: Me,
+        onCopyAlt: rt,
+        style: le({
+          visibility: c(Ue) ? c(_e) ? "visible" : "hidden" : "visible"
+        })
+      }, ft({ _: 2 }, [
+        l.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: m(({ isOpen: t, color: a }) => [
+            p(l.$slots, "menuIcon", C(w({ isOpen: t, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: m(() => [
+            p(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: m(() => [
+            p(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: m(() => [
+            p(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: m(() => [
+            p(l.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: m(() => [
+            p(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: m(({ toggleFullscreen: t, isFullscreen: a }) => [
+            p(l.$slots, "optionFullscreen", C(w({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: m(({ toggleAnnotator: t, isAnnotator: a }) => [
+            p(l.$slots, "optionAnnotator", C(w({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        l.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: m(({ altCopy: t }) => [
+            p(l.$slots, "optionAltCopy", C(w({ altCopy: t })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : g("", !0),
+      i("div", Dl, [
+        (n(), v("svg", {
+          ref_key: "svgRef",
+          ref: Z,
+          xmlns: c(xt),
+          class: ht({ "vue-data-ui-fullscreen--on": K.value, "vue-data-ui-fulscreen--off": !K.value }),
+          viewBox: `0 0 ${W.value} ${o.value.absoluteHeight <= 0 ? 10 : o.value.absoluteHeight}`,
+          style: le(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`),
+          "aria-describedby": `chart-instructions-${f.value}`,
+          tabindex: "0",
+          onFocus: al,
+          onBlur: sl,
+          onKeydown: ol
+        }, [
+          yt(c(Tt)),
+          l.$slots["chart-background"] ? (n(), v("foreignObject", {
+            key: 0,
+            x: o.value.left,
+            y: o.value.top,
+            width: Math.max(0.1, o.value.width),
+            height: Math.max(0.1, o.value.height),
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            p(l.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Fl)) : g("", !0),
+          e.value.style.chart.grid.verticalGrid.show ? (n(), v("g", Hl, [
+            (n(!0), v(A, null, X(N.value.ticks, (t, a) => (n(), v("line", {
+              x1: o.value.left + a * o.value.width / (N.value.ticks.length - 1),
+              x2: o.value.left + a * o.value.width / (N.value.ticks.length - 1),
+              y1: o.value.top,
+              y2: o.value.bottom,
+              stroke: e.value.style.chart.grid.verticalGrid.stroke,
+              "stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray
+            }, null, 8, El))), 256))
+          ])) : g("", !0),
+          e.value.style.chart.grid.horizontalGrid.show ? (n(), v("g", Gl, [
+            (n(!0), v(A, null, X(V.value, (t, a) => (n(), v("line", {
+              x1: o.value.left,
+              x2: o.value.right,
+              y1: o.value.top + a * o.value.rowHeight,
+              y2: o.value.top + a * o.value.rowHeight,
+              stroke: e.value.style.chart.grid.horizontalGrid.stroke,
+              "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
+            }, null, 8, Bl))), 256)),
+            i("line", {
+              x1: o.value.left,
+              x2: o.value.right,
+              y1: o.value.bottom,
+              y2: o.value.bottom,
+              stroke: e.value.style.chart.grid.horizontalGrid.stroke,
+              "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray
+            }, null, 8, Rl)
+          ])) : g("", !0),
+          e.value.style.chart.labels.axis.yLabel ? (n(), v("text", {
+            key: 3,
+            ref_key: "yAxisLabel",
+            ref: be,
+            transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${o.value.absoluteHeight / 2}), rotate(-90)`,
+            "font-size": e.value.style.chart.labels.axis.fontSize,
+            fill: e.value.style.chart.labels.axis.color,
+            "text-anchor": "middle"
+          }, _(e.value.style.chart.labels.axis.yLabel), 9, Vl)) : g("", !0),
+          e.value.style.chart.labels.yAxisLabels.show ? (n(), v("g", {
+            key: 4,
+            ref_key: "serieLabels",
+            ref: ge
+          }, [
+            (n(!0), v(A, null, X(k.value, (t, a) => (n(), v("text", {
+              class: "vue-ui-dumbbell-serie-name",
+              key: `serieLabel_${t.id}_${a}`,
+              x: o.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
+              y: o.value.top + a * o.value.rowHeight + (!e.value.style.chart.labels.yAxisLabels.showProgression || H.value ? o.value.rowHeight / 2 : o.value.rowHeight / 3) + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
+              "font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
+              fill: e.value.style.chart.labels.yAxisLabels.color,
+              "font-weight": e.value.style.chart.labels.yAxisLabels.bold ? "bold" : "normal",
+              "text-anchor": "end",
+              onMouseenter: (r) => ve({ datapoint: t, seriesIndex: a }),
+              onMouseleave: (r) => de({ datapoint: t, seriesIndex: a }),
+              onClick: (r) => he({ datapoint: t, seriesIndex: a })
+            }, _(t.name) + " " + _(H.value && e.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : `(${c(B)(
+              e.value.style.chart.labels.yAxisLabels.formatter,
+              100 * (t.end / t.start - 1),
+              c(S)({
+                v: 100 * (t.end / t.start - 1),
+                s: "%",
+                r: e.value.style.chart.labels.yAxisLabels.rounding
+              }),
+              { datapoint: t }
+            )})` : ""), 41, Ul))), 128)),
+            e.value.style.chart.labels.yAxisLabels.showProgression && !H.value ? (n(!0), v(A, { key: 0 }, X(k.value, (t, a) => (n(), v("text", {
+              class: "vue-ui-dumbbell-serie-value",
+              x: o.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
+              y: o.value.top + a * o.value.rowHeight + o.value.rowHeight / 1.3 + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
+              "font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
+              fill: e.value.style.chart.labels.yAxisLabels.color,
+              "text-anchor": "end",
+              onMouseenter: (r) => ve({ datapoint: t, seriesIndex: a }),
+              onMouseleave: (r) => de({ datapoint: t, seriesIndex: a }),
+              onClick: (r) => he({ datapoint: t, seriesIndex: a })
+            }, _([null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : c(B)(
+              e.value.style.chart.labels.yAxisLabels.formatter,
+              100 * (t.end / t.start - 1),
+              c(S)({
+                v: 100 * (t.end / t.start - 1),
+                s: "%",
+                r: e.value.style.chart.labels.yAxisLabels.rounding
+              }),
+              { datapoint: t }
+            )), 41, Wl))), 256)) : g("", !0)
+          ], 512)) : g("", !0),
+          e.value.style.chart.labels.axis.xLabel ? (n(), v("text", {
+            key: 5,
+            ref_key: "xAxisLabel",
+            ref: pe,
+            x: o.value.left + o.value.width / 2,
+            y: o.value.absoluteHeight - e.value.style.chart.labels.axis.fontSize / 3,
+            "font-size": e.value.style.chart.labels.axis.fontSize,
+            fill: e.value.style.chart.labels.axis.color,
+            "text-anchor": "middle"
+          }, _(e.value.style.chart.labels.axis.xLabel), 9, ql)) : g("", !0),
+          e.value.style.chart.labels.xAxisLabels.show ? (n(), v("g", {
+            key: 6,
+            ref_key: "scaleLabels",
+            ref: ce
+          }, [
+            (n(!0), v(A, null, X(N.value.ticks, (t, a) => (n(), v("text", {
+              class: "vue-ui-dumbbell-scale-label",
+              key: `tick_${a}`,
+              transform: `translate(${o.value.left + a * (o.value.width / (N.value.ticks.length - 1))}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
+              "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
+              fill: e.value.style.chart.labels.xAxisLabels.color,
+              "font-weight": e.value.style.chart.labels.xAxisLabels.bold ? "bold" : "normal",
+              "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
+            }, _(c(B)(
+              e.value.style.chart.labels.formatter,
+              t,
+              c(S)({
+                p: e.value.style.chart.labels.prefix,
+                v: t,
+                s: e.value.style.chart.labels.suffix,
+                r: e.value.style.chart.labels.xAxisLabels.rounding
+              }),
+              { datapoint: t, seriesIndex: a }
+            )), 9, Kl))), 128))
+          ], 512)) : g("", !0),
+          ae(i("g", null, [
+            ae(i("path", {
+              d: `M ${u.value ? u.value.startX : o.value.left},${o.value.top} ${u.value ? u.value.startX : o.value.left},${o.value.bottom}`,
+              stroke: u.value ? e.value.style.chart.plots.evaluationColors.enable ? u.value.evaluationColor : e.value.style.chart.plots.startColor : "transparent",
+              "stroke-width": e.value.style.chart.comparisonLines.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.comparisonLines.strokeDasharray,
+              style: { transition: "all 0.3s ease-in-out" }
+            }, null, 8, jl), [
+              [se, u.value !== null && ![null, void 0].includes(u.value.start)]
+            ]),
+            ae(i("path", {
+              d: `M ${u.value ? u.value.endX : o.value.left},${o.value.top} ${u.value ? u.value.endX : o.value.left},${o.value.bottom}`,
+              stroke: u.value ? e.value.style.chart.plots.evaluationColors.enable ? u.value.evaluationColor : e.value.style.chart.plots.endColor : "transparent",
+              "stroke-width": e.value.style.chart.comparisonLines.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.comparisonLines.strokeDasharray,
+              style: { transition: "all 0.3s ease-in-out" }
+            }, null, 8, Yl), [
+              [se, u.value !== null && ![null, void 0].includes(u.value.end)]
+            ]),
+            ae(i("rect", {
+              x: u.value ? Math.min(u.value.startX, u.value.endX) : o.value.left,
+              y: o.value.top,
+              height: Math.max(0.1, o.value.height),
+              width: u.value ? Math.max(0.1, Math.abs(u.value.endX - u.value.startX)) : 0,
+              fill: u.value ? c(_t)(e.value.style.chart.comparisonLines.rectColor, e.value.style.chart.comparisonLines.rectOpacity) : "transparent",
+              style: { transition: "all 0.3s ease-in-out" }
+            }, null, 8, Zl), [
+              [se, e.value.style.chart.comparisonLines.showRect && u.value !== null && ![null, void 0].includes(u.value.start) && ![null, void 0].includes(u.value.end)]
+            ]),
+            ae(i("text", {
+              transform: `translate(${Te.value == null ? 0 : Te.value}, ${o.value.top - 6})`,
+              fill: e.value.style.chart.comparisonLines.labelColor,
+              "font-size": e.value.style.chart.comparisonLines.labelFontSize,
+              "text-anchor": "middle",
+              style: { transition: "all 0.3s ease-in-out" }
+            }, _(Kt.value), 9, Jl), [
+              [se, u.value !== null && Te.value !== null && e.value.style.chart.comparisonLines.showLabel]
+            ])
+          ], 512), [
+            [se, e.value.style.chart.comparisonLines.show && I.value !== null]
+          ]),
+          i("defs", null, [
+            i("radialGradient", {
+              id: `start_grad_${f.value}`,
+              fy: "30%"
+            }, [
+              i("stop", {
+                offset: "10%",
+                "stop-color": c(oe)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
+              }, null, 8, ea),
+              i("stop", {
+                offset: "90%",
+                "stop-color": c(ne)(e.value.style.chart.plots.startColor, 0.1)
+              }, null, 8, ta),
+              i("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, la)
+            ], 8, Ql),
+            i("radialGradient", {
+              id: `end_grad_${f.value}`,
+              fy: "30%"
+            }, [
+              i("stop", {
+                offset: "10%",
+                "stop-color": c(oe)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
+              }, null, 8, sa),
+              i("stop", {
+                offset: "90%",
+                "stop-color": c(ne)(e.value.style.chart.plots.endColor, 0.1)
+              }, null, 8, oa),
+              i("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, na)
+            ], 8, aa),
+            i("radialGradient", {
+              id: `positive_grad_${f.value}`,
+              fy: "30%"
+            }, [
+              i("stop", {
+                offset: "10%",
+                "stop-color": c(oe)(e.value.style.chart.plots.evaluationColors.positive, e.value.style.chart.plots.gradient.intensity / 100)
+              }, null, 8, ua),
+              i("stop", {
+                offset: "90%",
+                "stop-color": c(ne)(e.value.style.chart.plots.evaluationColors.positive, 0.1)
+              }, null, 8, ia),
+              i("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.evaluationColors.positive
+              }, null, 8, ca)
+            ], 8, ra),
+            i("radialGradient", {
+              id: `negative_grad_${f.value}`,
+              fy: "30%"
+            }, [
+              i("stop", {
+                offset: "10%",
+                "stop-color": c(oe)(e.value.style.chart.plots.evaluationColors.negative, e.value.style.chart.plots.gradient.intensity / 100)
+              }, null, 8, da),
+              i("stop", {
+                offset: "90%",
+                "stop-color": c(ne)(e.value.style.chart.plots.evaluationColors.negative, 0.1)
+              }, null, 8, ha),
+              i("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.evaluationColors.negative
+              }, null, 8, fa)
+            ], 8, va),
+            i("radialGradient", {
+              id: `neutral_grad_${f.value}`,
+              fy: "30%"
+            }, [
+              i("stop", {
+                offset: "10%",
+                "stop-color": c(oe)(e.value.style.chart.plots.evaluationColors.neutral, e.value.style.chart.plots.gradient.intensity / 100)
+              }, null, 8, ba),
+              i("stop", {
+                offset: "90%",
+                "stop-color": c(ne)(e.value.style.chart.plots.evaluationColors.neutral, 0.1)
+              }, null, 8, ga),
+              i("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.evaluationColors.neutral
+              }, null, 8, pa)
+            ], 8, ya)
+          ]),
+          (n(!0), v(A, null, X(k.value, (t, a) => (n(), v("g", {
+            key: `plot_${a}_${t.id}`
+          }, [
+            i("defs", null, [
+              i("linearGradient", {
+                id: `grad_pos_${f.value}`,
+                x1: "0%",
+                x2: "100%",
+                y1: "0%",
+                y2: "0%"
+              }, [
+                i("stop", {
+                  offset: "0%",
+                  "stop-color": e.value.style.chart.plots.startColor
+                }, null, 8, ka),
+                i("stop", {
+                  offset: "100%",
+                  "stop-color": e.value.style.chart.plots.endColor
+                }, null, 8, xa)
+              ], 8, ma),
+              i("linearGradient", {
+                id: `grad_neg_${f.value}`,
+                x1: "0%",
+                x2: "100%",
+                y1: "0%",
+                y2: "0%"
+              }, [
+                i("stop", {
+                  offset: "0%",
+                  "stop-color": e.value.style.chart.plots.endColor
+                }, null, 8, Ca),
+                i("stop", {
+                  offset: "100%",
+                  "stop-color": e.value.style.chart.plots.startColor
+                }, null, 8, wa)
+              ], 8, _a)
+            ]),
+            ![void 0, null].includes(t.end) && ![void 0, null].includes(t.start) ? (n(), v("g", $a, [
+              e.value.style.chart.plots.link.type === "curved" ? (n(), v("g", La, [
+                i("path", {
+                  d: `M 
+                                    ${t.startX},${t.y + D.value / 2} 
+                                    C ${t.centerX},${t.y} ${t.centerX},${t.y} 
+                                    ${t.endX},${t.y + D.value / 2}
+                                    L ${t.endX},${t.y - D.value / 2}
+                                    C ${t.centerX},${t.y} ${t.centerX},${t.y}
+                                    ${t.startX},${t.y - D.value / 2}
+                                    Z
+                                `,
+                  fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${f.value})` : `url(#grad_neg_${f.value})`
+                }, null, 8, Aa)
+              ])) : (n(), v("g", Sa, [
+                i("rect", {
+                  x: t.endX > t.startX ? t.startX : t.endX,
+                  y: t.y - e.value.style.chart.plots.link.strokeWidth / 2,
+                  height: Math.max(0.01, e.value.style.chart.plots.link.strokeWidth),
+                  width: Math.max(0.01, Math.abs(t.endX - t.startX)),
+                  fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${f.value})` : `url(#grad_neg_${f.value})`
+                }, null, 8, Na)
+              ]))
+            ])) : g("", !0),
+            [null, void 0].includes(t.start) ? g("", !0) : (n(), v("circle", {
+              key: 1,
+              cx: t.startX,
+              cy: t.y,
+              r: D.value,
+              fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#start_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.startColor,
+              stroke: e.value.style.chart.plots.stroke,
+              "stroke-width": e.value.style.chart.plots.strokeWidth
+            }, null, 8, Ma)),
+            [null, void 0].includes(t.end) ? g("", !0) : (n(), v("circle", {
+              key: 2,
+              cx: t.endX,
+              cy: t.y,
+              r: D.value,
+              fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#end_grad_${f.value})` : e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : e.value.style.chart.plots.endColor,
+              stroke: e.value.style.chart.plots.stroke,
+              "stroke-width": e.value.style.chart.plots.strokeWidth
+            }, null, 8, Ta))
+          ]))), 128)),
+          e.value.style.chart.labels.startLabels.show ? (n(), v("g", Xa, [
+            (n(!0), v(A, null, X(k.value, (t, a) => (n(), v("g", {
+              key: `start_label_${a}_${t.id}`
+            }, [
+              [null, void 0].includes(t.start) ? g("", !0) : (n(), v("text", {
+                key: 0,
+                x: t.startX,
+                y: t.y + D.value * 2 + e.value.style.chart.labels.startLabels.fontSize / 2,
+                fill: e.value.style.chart.plots.evaluationColors.enable && e.value.style.chart.labels.startLabels.useEvaluationColor ? t.evaluationColor : e.value.style.chart.labels.startLabels.useStartColor ? e.value.style.chart.plots.startColor : e.value.style.chart.labels.startLabels.color,
+                "font-size": e.value.style.chart.labels.startLabels.fontSize,
+                "text-anchor": "middle"
+              }, _(c(B)(
+                e.value.style.chart.labels.formatter,
+                t.start,
+                c(S)({
+                  p: e.value.style.chart.labels.prefix,
+                  v: t.start,
+                  s: e.value.style.chart.labels.suffix,
+                  r: e.value.style.chart.labels.startLabels.rounding
+                }),
+                { datapoint: t, seriesIndex: a }
+              )), 9, za))
+            ]))), 128))
+          ])) : g("", !0),
+          e.value.style.chart.labels.endLabels.show ? (n(), v("g", Ia, [
+            (n(!0), v(A, null, X(k.value, (t, a) => (n(), v("g", {
+              key: `end_label_${a}_${t.id}`
+            }, [
+              [null, void 0].includes(t.end) ? g("", !0) : (n(), v("text", {
+                key: 0,
+                x: t.endX,
+                y: t.y - (D.value * 2 - e.value.style.chart.labels.startLabels.fontSize / 3),
+                fill: e.value.style.chart.plots.evaluationColors.enable && e.value.style.chart.labels.endLabels.useEvaluationColor ? t.evaluationColor : e.value.style.chart.labels.endLabels.useEndColor ? e.value.style.chart.plots.endColor : e.value.style.chart.labels.endLabels.color,
+                "font-size": e.value.style.chart.labels.endLabels.fontSize,
+                "text-anchor": "middle"
+              }, _(c(B)(
+                e.value.style.chart.labels.formatter,
+                t.end,
+                c(S)({
+                  p: e.value.style.chart.labels.prefix,
+                  v: t.end,
+                  s: e.value.style.chart.labels.suffix,
+                  r: e.value.style.chart.labels.endLabels.rounding
+                }),
+                { datapoint: t, seriesIndex: a }
+              )), 9, Pa))
+            ]))), 128))
+          ])) : g("", !0),
+          i("g", null, [
+            (n(!0), v(A, null, X(k.value, (t, a) => (n(), v("rect", {
+              x: o.value.left,
+              y: o.value.top + a * Math.max(0.1, o.value.rowHeight),
+              width: Math.max(0.1, o.value.width),
+              height: Math.max(0.1, o.value.rowHeight),
+              fill: I.value !== null && I.value === a ? c(_t)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
+              onMouseenter: (r) => ve({ datapoint: t, seriesIndex: a }),
+              onMouseleave: (r) => de({ datapoint: t, seriesIndex: a }),
+              onClick: (r) => he({ datapoint: t, seriesIndex: a })
+            }, null, 40, Da))), 256))
+          ]),
+          p(l.$slots, "svg", {
+            svg: {
+              ...o.value,
+              isPrintingImg: c(we) | c($e) | ue.value,
+              isPrintingSvg: ie.value
+            }
+          }, void 0, !0)
+        ], 46, Ol)),
+        l.$slots.hint ? (n(), v("div", Oa, [
+          p(l.$slots, "hint", C(w({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: me.value })), void 0, !0)
+        ])) : g("", !0)
+      ]),
+      l.$slots.watermark ? (n(), v("div", Fa, [
+        p(l.$slots, "watermark", C(w({ isPrinting: c(we) || c($e) || ue.value || ie.value })), void 0, !0)
+      ])) : g("", !0),
+      i("div", {
+        id: `legend-bottom-${f.value}`
+      }, null, 8, Ha),
+      Re.value ? (n(), T(il, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${f.value}` : `#legend-bottom-${f.value}`
+      }, [
+        i("div", {
+          ref_key: "chartLegend",
+          ref: Oe
+        }, [
+          e.value.style.chart.legend.show && re.value ? (n(), T(Ml, {
+            key: `legend_${Be.value}`,
+            legendSet: Se.value,
+            config: Bt.value,
+            clickable: !1
+          }, {
+            item: m(({ legend: t }) => [
+              i("div", {
+                style: le(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
+              }, [
+                (n(), v("svg", {
+                  xmlns: c(xt),
+                  viewBox: "0 0 20 20",
+                  height: e.value.style.chart.legend.fontSize,
+                  width: e.value.style.chart.legend.fontSize
+                }, [
+                  i("circle", {
+                    cx: 10,
+                    cy: 10,
+                    r: 9,
+                    fill: t.color
+                  }, null, 8, Ga)
+                ], 8, Ea)),
+                c(ke) ? g("", !0) : (n(), v(A, { key: 0 }, [
+                  Xe(_(t.name), 1)
+                ], 64))
+              ], 4)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : p(l.$slots, "legend", {
+            key: 1,
+            legend: Se.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : g("", !0),
+      l.$slots.source ? (n(), v("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Fe,
+        dir: "auto"
+      }, [
+        p(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : g("", !0),
+      re.value && e.value.userOptions.buttons.table ? (n(), T(cl(ee.value.component), vl({ key: 8 }, ee.value.props, {
+        ref_key: "tableUnit",
+        ref: j,
+        onClose: ot
+      }), ft({
+        content: m(() => [
+          (n(), T(c(St), {
+            key: `table_${Ge.value}`,
+            colNames: q.value.colNames,
+            head: q.value.head,
+            body: q.value.body,
+            config: q.value.config,
+            title: e.value.table.useDialog ? "" : ee.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: Y.value,
+            onClose: ot
+          }, {
+            th: m(({ th: t }) => [
+              i("div", {
+                innerHTML: t,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ba)
+            ]),
+            td: m(({ td: t }) => [
+              Xe(_(t.name || t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: m(() => [
+            Xe(_(ee.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: m(() => [
+            i("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: s[0] || (s[0] = (t) => Ne(e.value.userOptions.callbacks.csv)),
+              style: le({ cursor: Y.value ? "pointer" : "default" })
+            }, [
+              yt(c(Lt), {
+                name: "fileCsv",
+                stroke: ee.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : g("", !0),
+      p(l.$slots, "skeleton", {}, () => [
+        c(ke) ? (n(), T(xl, { key: 0 })) : g("", !0)
+      ], !0)
+    ], 46, zl));
+  }
+}, us = /* @__PURE__ */ Xl(Ra, [["__scopeId", "data-v-e6b69583"]]);
+export {
+  us as default
+};