vue-data-ui 3.6.0 → 3.7.0

package/dist/vue-ui-dumbbell-BuZT5a-d.js

@@ -0,0 +1,1258 @@
+import { defineAsyncComponent as I, computed as g, ref as h, toRefs as Zt, watch as oe, shallowRef as lt, onMounted as at, onBeforeUnmount as ot, watchEffect as Jt, createElementBlock as v, openBlock as r, unref as i, normalizeStyle as se, normalizeClass as st, createBlock as E, createCommentVNode as y, createElementVNode as c, withCtx as p, renderSlot as m, normalizeProps as S, guardReactiveProps as D, createSlots as rt, createVNode as nt, withDirectives as Z, Fragment as _, renderList as F, toDisplayString as k, vShow as J, Teleport as Kt, createTextVNode as Ae, resolveDynamicComponent as Qt, mergeProps as el, nextTick as tl } from "vue";
+import { c as ut, t as ll, o as al, g as it, k as ol, M as ct, F as sl, d as A, a as P, X as vt, s as dt, n as K, r as Q, u as rl, q as nl } from "./lib-C5BH09_g.js";
+import { t as we, u as ul } from "./useResponsive-DfdjqQps.js";
+import { u as il, a as $e } from "./useNestedProp-CWo6bftQ.js";
+import { u as cl } from "./usePrinter-DCJzEiS8.js";
+import { u as vl, B as dl } from "./BaseScanner-BgWxam9d.js";
+import { u as hl } from "./useSvgExport-DrjCWun4.js";
+import { u as bl } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as fl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as yl } from "./useChartAccessibility-9icAAmYg.js";
+import { u as gl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import pl from "./img-DUzJeMlr.js";
+import ml from "./Title-DfFUb9hd.js";
+import Cl from "./Legend-Web3GjlR.js";
+import { _ as kl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ht = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", comparisonLines: { rectColor: "#CCCCCC", labelColor: "#CCCCCC" }, plots: { stroke: "#1A1A1A" }, grid: { horizontalGrid: { stroke: "#4A4A4A" }, verticalGrid: { stroke: "#4A4A4A" } }, highlighter: { color: "#CCCCCC" }, labels: { yAxisLabels: { color: "#CCCCCC" }, xAxisLabels: { color: "#CCCCCC" } }, legend: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, bt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", plots: { startColor: "#F57C00", endColor: "#D32F2F", stroke: "#FFF8E1" }, grid: { horizontalGrid: { stroke: "#5D403780" }, verticalGrid: { stroke: "#5D403780" } }, labels: { yAxisLabels: { color: "#424242" }, xAxisLabels: { color: "#424242" } }, legend: { backgroundColor: "#FFF8E1", color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, ft = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", comparisonLines: { rectColor: "#CCCCCC", labelColor: "#CCCCCC" }, highlighter: { color: "#CCCCCC" }, plots: { startColor: "#F57C00", endColor: "#D32F2F", stroke: "#1E1E1E" }, grid: { horizontalGrid: { stroke: "#5D4037" }, verticalGrid: { stroke: "#5D4037" } }, labels: { yAxisLabels: { color: "#BDBDBD" }, xAxisLabels: { color: "#BDBDBD" } }, legend: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, yt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", plots: { startColor: "#008000", endColor: "#00FF00", stroke: "#1A1A1A" }, comparisonLines: { rectColor: "#CCCCCC", labelColor: "#99CC99" }, highlighter: { color: "#CCCCCC" }, grid: { horizontalGrid: { stroke: "#5F6A5F" }, verticalGrid: { stroke: "#5F6A5F" } }, labels: { yAxisLabels: { color: "#99CC99" }, xAxisLabels: { color: "#99CC99" } }, legend: { backgroundColor: "#1A1A1A", color: "#99AA99" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, gt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", plots: { startColor: "#DCB482", endColor: "#B9B99D", stroke: "#fbfafa" }, grid: { horizontalGrid: { show: !1 }, verticalGrid: { show: !1 } }, labels: { yAxisLabels: { color: "#8A9892" }, xAxisLabels: { show: !1 } }, legend: { backgroundColor: "#fbfafa", color: "#99AA99" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, pt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", plots: { startColor: "#718885", endColor: "#7DA9B5", stroke: "#404C5A" }, grid: { horizontalGrid: { stroke: "#829C98" }, verticalGrid: { stroke: "#829C98" } }, labels: { yAxisLabels: { color: "#61747E" }, xAxisLabels: { color: "#61747E" } }, legend: { backgroundColor: "#f6f6fb", color: "#61747E" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, mt = {
+  default: {},
+  dark: ht,
+  celebration: bt,
+  celebrationNight: ft,
+  hack: yt,
+  zen: gt,
+  concrete: pt
+}, ja = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: bt,
+  celebrationNight: ft,
+  concrete: pt,
+  dark: ht,
+  default: mt,
+  hack: yt,
+  zen: gt
+}, Symbol.toStringTag, { value: "Module" })), xl = ["id"], _l = ["id"], Al = ["xmlns", "viewBox"], wl = ["x", "y", "width", "height"], $l = { key: 1 }, Ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Sl = { key: 2 }, Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Nl = ["transform", "font-size", "fill"], zl = ["x", "y", "font-size", "fill", "font-weight", "onMouseenter", "onMouseleave", "onClick"], Ml = ["x", "y", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], Xl = ["x", "y", "font-size", "fill"], Tl = ["transform", "font-size", "fill", "font-weight", "text-anchor"], El = ["d", "stroke", "stroke-width", "stroke-dasharray"], Bl = ["d", "stroke", "stroke-width", "stroke-dasharray"], Ol = ["x", "y", "height", "width", "fill"], Gl = ["transform", "fill", "font-size"], Il = ["id"], Pl = ["stop-color"], Hl = ["stop-color"], Rl = ["stop-color"], Vl = ["id"], Ul = ["stop-color"], Wl = ["stop-color"], jl = ["stop-color"], ql = ["id"], Yl = ["stop-color"], Zl = ["stop-color"], Jl = ["stop-color"], Kl = ["id"], Ql = ["stop-color"], ea = ["stop-color"], ta = ["stop-color"], la = ["id"], aa = ["stop-color"], oa = ["stop-color"], sa = ["stop-color"], ra = ["id"], na = ["stop-color"], ua = ["stop-color"], ia = ["id"], ca = ["stop-color"], va = ["stop-color"], da = { key: 0 }, ha = { key: 0 }, ba = ["d", "fill"], fa = { key: 1 }, ya = ["x", "y", "height", "width", "fill"], ga = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], pa = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ma = { key: 7 }, Ca = ["x", "y", "fill", "font-size"], ka = { key: 8 }, xa = ["x", "y", "fill", "font-size"], _a = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Aa = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, wa = ["id"], $a = ["xmlns", "height", "width"], La = ["fill"], Sa = ["innerHTML"], Da = {
+  __name: "vue-ui-dumbbell",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(Ct, { expose: kt, emit: Na }) {
+    const xt = I(() => import("./BaseIcon-CofSxalQ.js")), _t = I(() => import("./vue-ui-accordion-DSdZUn2C.js")), At = I(() => import("./DataTable-CHaOCmsE.js")), wt = I(() => import("./PenAndPaper-HCZQTkqi.js")), $t = I(() => import("./UserOptions-B3I-s3Lw.js")), Lt = I(() => import("./PackageVersion-Bq_mtsqr.js")), St = I(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_dumbbell: Dt } = il(), { isThemeValid: Ft, warnInvalidTheme: Nt } = bl(), w = Ct, ee = g({
+      get() {
+        return !!w.dataset && w.dataset.length;
+      },
+      set(l) {
+        return l;
+      }
+    }), b = h(ut()), Le = h(0), N = h(null), Se = h(null), De = h(null), Fe = h(null), Ne = h(null), ze = h(0), Me = h(0), Xe = h(0), Te = h(!1), j = h(null), re = h(null), ne = h(null), ue = h(null), te = h(null), ie = h(null), B = h(null), n = h(null), O = h(!1), e = h(be()), { loading: ce, FINAL_DATASET: ve, manualLoading: zt } = vl({
+      ...Zt(w),
+      FINAL_CONFIG: e,
+      prepareConfig: be,
+      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: ll({
+        defaultConfig: e.value,
+        userConfig: {
+          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 }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: de, setUserOptionsVisibility: Ee, keepUserOptionState: Be } = fl({ config: e.value }), { svgRef: he } = yl({ config: e.value.style.chart.title });
+    function be() {
+      const l = $e({
+        userConfig: w.config,
+        defaultConfig: Dt
+      }), o = l.theme;
+      if (!o) return l;
+      if (!Ft.value(l))
+        return Nt(l), l;
+      const t = $e({
+        userConfig: mt[o] || w.config,
+        defaultConfig: l
+      });
+      return $e({
+        userConfig: w.config,
+        defaultConfig: t
+      });
+    }
+    oe(() => w.config, (l) => {
+      ce.value || (e.value = be()), de.value = !e.value.userOptions.showOnChartHover, Ge(), ze.value += 1, Me.value += 1, Xe.value += 1, V.value = e.value.style.chart.rowHeight, U.value = e.value.style.chart.width, G.value.showTable = e.value.table.show;
+    }, { deep: !0 }), oe(() => ve.value, (l) => {
+      Array.isArray(l) && l.length > 0 && (zt.value = !1), je(), qe();
+    }, { deep: !0 });
+    const z = lt(null), H = lt(null);
+    at(() => {
+      Te.value = !0, Ge();
+    });
+    const Oe = g(() => !!e.value.debug);
+    function Ge() {
+      if (al(w.dataset) ? it({
+        componentName: "VueUiDumbbell",
+        type: "dataset",
+        debug: Oe.value
+      }) : w.dataset.forEach((l, o) => {
+        ol({
+          datasetObject: l,
+          requiredAttributes: ["name", "start", "end"]
+        }).forEach((t) => {
+          ee.value = !1, it({
+            componentName: "VueUiDumbbell",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: o,
+            debug: Oe.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = we(() => {
+          const { width: o, height: t } = ul({
+            chart: N.value,
+            title: e.value.style.chart.title.text ? Se.value : null,
+            legend: e.value.style.chart.legend.show ? De.value : null,
+            source: Fe.value,
+            noTitle: Ne.value
+          }), a = e.value.style.chart.title.text ? 24 : 0, u = e.value.style.chart.legend.show ? 24 : 0;
+          requestAnimationFrame(async () => {
+            U.value = Math.max(0.1, o), V.value = Math.max(0.1, (Math.max(0.1, t) - (a + u)) / ve.value.length), Ke();
+          });
+        });
+        z.value && (H.value && z.value.unobserve(H.value), z.value.disconnect()), z.value = new ResizeObserver(l), H.value = N.value.parentNode, z.value.observe(H.value);
+      }
+      Ke();
+    }
+    ot(() => {
+      L.value != null && (cancelAnimationFrame(L.value), L.value = null), z.value && (H.value && z.value.unobserve(H.value), z.value.disconnect());
+    });
+    const { isPrinting: Ie, isImaging: Pe, generatePdf: He, generateImage: Re } = cl({
+      elementId: `dumbbell_${b.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-dumbbell",
+      options: e.value.userOptions.print
+    }), Mt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), G = h({
+      showTable: e.value.table.show
+    });
+    oe(e, () => {
+      G.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 });
+    const R = g(() => ve.value.map((l, o) => ({
+      ...l,
+      start: ct(l.start),
+      end: ct(l.end),
+      id: l.id ?? `${String(l.name)}__${String(l.start)}__${String(l.end)}__${ut()}`
+    }))), Ve = g(() => {
+      const l = e.value.style.chart.grid, o = R.value.flatMap((f) => [f.start, f.end]).map((f) => Number(f)).filter((f) => Number.isFinite(f)), t = o.length ? Math.min(...o) : 0, a = o.length ? Math.max(...o) : 0, u = l.scaleMin ?? Math.min(t, 0), d = l.scaleMax ?? a;
+      return { min: u, max: d };
+    }), $ = g(() => sl(Ve.value.min, Ve.value.max, e.value.style.chart.grid.scaleSteps)), V = h(e.value.style.chart.rowHeight), U = h(e.value.style.chart.width);
+    function Xt() {
+      let l = 0;
+      ue.value && (l = Array.from(ue.value.querySelectorAll("text")).reduce((a, u) => {
+        const d = u.getComputedTextLength();
+        return d > a ? d : a;
+      }, 0));
+      const o = ne.value ? ne.value.getBoundingClientRect().width : 0;
+      return l + o + (o ? 24 + e.value.style.chart.labels.axis.yLabelOffsetX : 0);
+    }
+    const fe = h(0), Tt = we((l) => {
+      fe.value = l;
+    }, 100);
+    Jt((l) => {
+      const o = te.value;
+      if (!o) return;
+      const t = new ResizeObserver((a) => {
+        Tt(a[0].contentRect.height);
+      });
+      t.observe(o), l(() => t.disconnect());
+    }), ot(() => {
+      fe.value = 0;
+    });
+    const Ue = g(() => {
+      O.value;
+      let l = 0;
+      ie.value && (l = ie.value.getBBox().height);
+      let o = 0;
+      return te.value && (o = fe.value), l + o;
+    }), ye = g(() => R.value.length);
+    function We(l, o, t) {
+      const a = Number(l), u = Number(o.min), d = Number(o.max), f = Number(t.width);
+      if (!Number.isFinite(a) || !Number.isFinite(u) || !Number.isFinite(d) || !Number.isFinite(f))
+        return t.left;
+      const C = d - u;
+      return C <= 0 ? t.left : t.left + (a - u) / C * f;
+    }
+    const s = g(() => {
+      O.value;
+      const l = Xt(), o = e.value.style.chart.padding, t = e.value.style.chart.labels.axis.xLabel ? e.value.style.chart.labels.axis.xLabelOffsetY : 0, a = V.value * ye.value - Ue.value - o.top - o.bottom - t, u = a / ye.value, d = V.value * ye.value, f = U.value - l - o.left - o.right, C = $.value.ticks.length * (f / $.value.ticks.length);
+      return {
+        left: e.value.style.chart.padding.left + l,
+        right: U.value - e.value.style.chart.padding.right,
+        top: e.value.style.chart.padding.top,
+        bottom: d - e.value.style.chart.padding.bottom - Ue.value - t,
+        width: f,
+        height: a,
+        rowHeight: u,
+        absoluteHeight: d,
+        widthPlotReference: C
+      };
+    }), M = g(() => Math.min(V.value / 2 * 0.7, e.value.style.chart.plots.radius)), q = h([]), x = g({
+      get() {
+        const l = s.value, o = $.value;
+        return q.value.map((t, a) => {
+          const u = We(t.start, o, l), d = We(t.endVal, o, l), f = u + (d - u) / 2, C = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end > t.start, T = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end < t.start, tt = ![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), Yt = C ? e.value.style.chart.plots.evaluationColors.positive : T ? e.value.style.chart.plots.evaluationColors.negative : e.value.style.chart.plots.evaluationColors.neutral;
+          return {
+            ...t,
+            isPositive: C,
+            isNegative: T,
+            isNeutral: tt,
+            evaluationColor: Yt,
+            evaluationGrad: `url(#${C ? "positive" : T ? "negative" : "neutral"}_grad_${b.value})`,
+            startX: u,
+            endX: d,
+            centerX: f,
+            y: l.top + a * l.rowHeight + l.rowHeight / 2
+          };
+        });
+      },
+      set(l) {
+        q.value = l;
+      }
+    });
+    function je() {
+      q.value = R.value.map((l) => {
+        const o = Number(l.start);
+        return {
+          ...l,
+          endVal: Number.isFinite(o) ? o : 0
+        };
+      });
+    }
+    const L = h(null);
+    at(() => {
+      qe();
+    });
+    function qe() {
+      if (L.value != null && (cancelAnimationFrame(L.value), L.value = null), je(), !e.value.useAnimation) {
+        x.value = q.value.map((a) => {
+          const u = Number(a.end);
+          return { ...a, endVal: Number.isFinite(u) ? u : a.endVal };
+        });
+        return;
+      }
+      const l = Math.max(1, Math.min(100, e.value.animationSpeed || 100)) / 100, o = R.value.map((a) => {
+        const u = Number(a.start), d = Number(a.end), f = Number.isFinite(u) ? u : 0;
+        return (Number.isFinite(d) ? d : f) - f;
+      }), t = () => {
+        let a = !0;
+        x.value = q.value.map((u, d) => {
+          const f = Number.isFinite(Number(u.end)) ? Number(u.end) : u.endVal, C = u.endVal + o[d] * l, T = o[d] >= 0 ? Math.min(C, f) : Math.max(C, f);
+          return T !== f && (a = !1), { ...u, endVal: T };
+        }), a ? L.value = null : L.value = requestAnimationFrame(t);
+      };
+      L.value = requestAnimationFrame(t);
+    }
+    const ge = g(() => 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_${b.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_${b.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_${b.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_${b.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_${b.value})` : e.value.style.chart.plots.endColor }
+    ]), Et = g(() => ({
+      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" : ""
+    })), X = g(() => {
+      const l = x.value.map((t) => ({
+        name: t.name
+      })), o = x.value.map((t) => ({
+        start: t.start,
+        end: t.end
+      }));
+      return { head: l, body: o };
+    }), le = g(() => {
+      const l = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.start,
+        e.value.table.columnNames.end,
+        e.value.table.columnNames.progression
+      ], o = X.value.head.map((u, d) => {
+        const f = A({
+          p: e.value.style.chart.labels.prefix,
+          v: X.value.body[d].start,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        }), C = A({
+          p: e.value.style.chart.labels.prefix,
+          v: X.value.body[d].end,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        }), T = A({
+          v: 100 * (X.value.body[d].end / X.value.body[d].start - 1),
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        });
+        return [
+          { name: u.name },
+          f,
+          C,
+          T
+        ];
+      }), 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: o,
+        config: t
+      };
+    });
+    function pe(l = null) {
+      tl(() => {
+        const o = X.value.head.map((u, d) => [[
+          u.name
+        ], [X.value.body[d].start], [X.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(o), a = rl(t);
+        l ? l(a) : nl({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
+      });
+    }
+    const W = h(!1);
+    function Ye(l) {
+      W.value = l, Le.value += 1;
+    }
+    function Bt() {
+      return R.value;
+    }
+    function Ze() {
+      G.value.showTable = !G.value.showTable;
+    }
+    const ae = h(!1);
+    function me() {
+      ae.value = !ae.value;
+    }
+    async function Ot({ scale: l = 2 } = {}) {
+      if (!N.value) return;
+      const { width: o, height: t } = N.value.getBoundingClientRect(), a = o / t, { imageUri: u, base64: d } = await pl({ domElement: N.value, base64: !0, img: !0, scale: l });
+      return {
+        imageUri: u,
+        base64: d,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: t,
+        aspectRatio: a
+      };
+    }
+    const Je = g(() => $.value.ticks), Gt = g(() => ({ start: 0, end: Je.value.length }));
+    gl({
+      timeLabelsEls: te,
+      timeLabels: Je,
+      slicer: Gt,
+      configRef: e,
+      rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: U,
+      height: V,
+      targetClass: ".vue-ui-dumbbell-scale-label",
+      rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
+    });
+    function It({
+      rowHeight: l,
+      fontSize: o,
+      showProgression: t
+    }) {
+      if (!t) return !1;
+      const a = l / 3, u = l / 1.3, d = Math.abs(u - a), f = o * 1.2;
+      return d < f;
+    }
+    const Pt = /* @__PURE__ */ (() => {
+      let l = null, o = 0;
+      const t = 1;
+      return (a) => {
+        if (a === O.value) {
+          l = null, o = 0;
+          return;
+        }
+        l === null || l !== a ? (l = a, o = 1) : (o += 1, o >= t && (O.value = a, l = null, o = 0));
+      };
+    })(), Ke = we(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const l = It({
+            rowHeight: s.value.rowHeight,
+            fontSize: e.value.style.chart.labels.yAxisLabels.fontSize,
+            showProgression: e.value.style.chart.labels.yAxisLabels.showProgression
+          });
+          Pt(l);
+        });
+      });
+    }, 100);
+    function Ce({ datapoint: l, seriesIndex: o }) {
+      B.value = o, n.value = l, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: o });
+    }
+    function ke({ datapoint: l, seriesIndex: o }) {
+      B.value = null, n.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: o });
+    }
+    function xe({ datapoint: l, seriesIndex: o }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: o });
+    }
+    const _e = g(() => {
+      if (n.value === null) return 0;
+      const l = ![null, void 0].includes(n.value.start), o = ![null, void 0].includes(n.value.end);
+      return l && o ? Math.min(n.value.startX, n.value.endX) + Math.abs(n.value.startX - n.value.endX) / 2 : l && !o ? n.value.startX : o && !l ? n.value.endX : null;
+    }), Ht = g(() => {
+      if (n.value === null) return "";
+      const l = ![null, void 0].includes(n.value.start), o = ![null, void 0].includes(n.value.end);
+      let t = "", a = "";
+      return l && (t = P(
+        e.value.style.chart.labels.formatter,
+        n.value.start,
+        A({
+          p: e.value.style.chart.labels.prefix,
+          v: n.value.start,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.style.chart.labels.startLabels.rounding
+        }),
+        { datapoint: n.value, seriesIndex: B.value }
+      )), o && (a = P(
+        e.value.style.chart.labels.formatter,
+        n.value.end,
+        A({
+          p: e.value.style.chart.labels.prefix,
+          v: n.value.end,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.style.chart.labels.startLabels.rounding
+        }),
+        { datapoint: n.value, seriesIndex: B.value }
+      )), l && o ? `${t} → ${a}` : l && !o ? t : o && !l ? a : "";
+    }), Y = g(() => {
+      const l = e.value.table.useDialog && !e.value.table.show, o = G.value.showTable;
+      return {
+        component: l ? St : _t,
+        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: W.value,
+          fullscreenParent: N.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: o,
+            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
+            }
+          }
+        }
+      };
+    });
+    oe(() => G.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 Qe() {
+      G.value.showTable = !1, re.value && re.value.setTableIconState(!1);
+    }
+    const Rt = g(() => ge.value.map((l) => ({
+      ...l,
+      shape: "circle"
+    }))), Vt = g(() => e.value.style.chart.backgroundColor), Ut = g(() => e.value.style.chart.legend), Wt = g(() => e.value.style.chart.title), { exportSvg: jt, getSvg: qt } = hl({
+      svg: he,
+      title: Wt,
+      legend: Ut,
+      legendItems: Rt,
+      backgroundColor: Vt
+    });
+    async function et({ isCb: l }) {
+      if (l) {
+        const { blob: o, url: t, text: a, dataUrl: u } = await qt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: t, text: a, dataUrl: u });
+      } else
+        jt();
+    }
+    return kt({
+      getData: Bt,
+      getImage: Ot,
+      generatePdf: He,
+      generateCsv: pe,
+      generateImage: Re,
+      generateSvg: et,
+      toggleTable: Ze,
+      toggleAnnotator: me,
+      toggleFullscreen: Ye
+    }), (l, o) => (r(), v("div", {
+      ref_key: "dumbbellChart",
+      ref: N,
+      class: st(`vue-data-ui-component vue-ui-dumbbell ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: se(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      id: `dumbbell_${b.value}`,
+      onMouseenter: o[1] || (o[1] = () => i(Ee)(!0)),
+      onMouseleave: o[2] || (o[2] = () => i(Ee)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), E(i(wt), {
+        key: 0,
+        svgRef: i(he),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: ae.value,
+        onClose: me
+      }, {
+        "annotator-action-close": p(() => [
+          m(l.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": p(({ color: t }) => [
+          m(l.$slots, "annotator-action-color", S(D({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": p(({ mode: t }) => [
+          m(l.$slots, "annotator-action-draw", S(D({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": p(({ disabled: t }) => [
+          m(l.$slots, "annotator-action-undo", S(D({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": p(({ disabled: t }) => [
+          m(l.$slots, "annotator-action-redo", S(D({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": p(({ disabled: t }) => [
+          m(l.$slots, "annotator-action-delete", S(D({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      Mt.value ? (r(), v("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Ne,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : y("", !0),
+      e.value.style.chart.title.text ? (r(), v("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Se,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), E(ml, {
+          key: `title_${ze.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)) : y("", !0),
+      c("div", {
+        id: `legend-top-${b.value}`
+      }, null, 8, _l),
+      e.value.userOptions.show && ee.value && (i(Be) || i(de)) ? (r(), E(i($t), {
+        ref_key: "userOptionsRef",
+        ref: re,
+        key: `user_option_${Le.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: i(Ie),
+        isImaging: i(Pe),
+        uid: b.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,
+        isFullscreen: W.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: N.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ae.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: Ye,
+        onGeneratePdf: i(He),
+        onGenerateCsv: pe,
+        onGenerateImage: i(Re),
+        onGenerateSvg: et,
+        onToggleTable: Ze,
+        onToggleAnnotator: me,
+        style: se({
+          visibility: i(Be) ? i(de) ? "visible" : "hidden" : "visible"
+        })
+      }, rt({ _: 2 }, [
+        l.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: p(({ isOpen: t, color: a }) => [
+            m(l.$slots, "menuIcon", S(D({ isOpen: t, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: p(() => [
+            m(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: p(() => [
+            m(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: p(() => [
+            m(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: p(() => [
+            m(l.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: p(() => [
+            m(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: p(({ toggleFullscreen: t, isFullscreen: a }) => [
+            m(l.$slots, "optionFullscreen", S(D({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: p(({ toggleAnnotator: t, isAnnotator: a }) => [
+            m(l.$slots, "optionAnnotator", S(D({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      (r(), v("svg", {
+        ref_key: "svgRef",
+        ref: he,
+        xmlns: i(vt),
+        class: st({ "vue-data-ui-fullscreen--on": W.value, "vue-data-ui-fulscreen--off": !W.value }),
+        viewBox: `0 0 ${U.value} ${s.value.absoluteHeight <= 0 ? 10 : s.value.absoluteHeight}`,
+        style: se(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        nt(i(Lt)),
+        l.$slots["chart-background"] ? (r(), v("foreignObject", {
+          key: 0,
+          x: s.value.left,
+          y: s.value.top,
+          width: Math.max(0.1, s.value.width),
+          height: Math.max(0.1, s.value.height),
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          m(l.$slots, "chart-background", {}, void 0, !0)
+        ], 8, wl)) : y("", !0),
+        e.value.style.chart.grid.verticalGrid.show ? (r(), v("g", $l, [
+          (r(!0), v(_, null, F($.value.ticks, (t, a) => (r(), v("line", {
+            x1: s.value.left + a * s.value.width / ($.value.ticks.length - 1),
+            x2: s.value.left + a * s.value.width / ($.value.ticks.length - 1),
+            y1: s.value.top,
+            y2: s.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, Ll))), 256))
+        ])) : y("", !0),
+        e.value.style.chart.grid.horizontalGrid.show ? (r(), v("g", Sl, [
+          (r(!0), v(_, null, F(R.value, (t, a) => (r(), v("line", {
+            x1: s.value.left,
+            x2: s.value.right,
+            y1: s.value.top + a * s.value.rowHeight,
+            y2: s.value.top + a * s.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, Dl))), 256)),
+          c("line", {
+            x1: s.value.left,
+            x2: s.value.right,
+            y1: s.value.bottom,
+            y2: s.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, Fl)
+        ])) : y("", !0),
+        e.value.style.chart.labels.axis.yLabel ? (r(), v("text", {
+          key: 3,
+          ref_key: "yAxisLabel",
+          ref: ne,
+          transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${s.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"
+        }, k(e.value.style.chart.labels.axis.yLabel), 9, Nl)) : y("", !0),
+        e.value.style.chart.labels.yAxisLabels.show ? (r(), v("g", {
+          key: 4,
+          ref_key: "serieLabels",
+          ref: ue
+        }, [
+          (r(!0), v(_, null, F(x.value, (t, a) => (r(), v("text", {
+            class: "vue-ui-dumbbell-serie-name",
+            key: `serieLabel_${t.id}_${a}`,
+            x: s.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
+            y: s.value.top + a * s.value.rowHeight + (!e.value.style.chart.labels.yAxisLabels.showProgression || O.value ? s.value.rowHeight / 2 : s.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: (u) => Ce({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => ke({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => xe({ datapoint: t, seriesIndex: a })
+          }, k(t.name) + " " + k(O.value && e.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : `(${i(P)(
+            e.value.style.chart.labels.yAxisLabels.formatter,
+            100 * (t.end / t.start - 1),
+            i(A)({
+              v: 100 * (t.end / t.start - 1),
+              s: "%",
+              r: e.value.style.chart.labels.yAxisLabels.rounding
+            }),
+            { datapoint: t }
+          )})` : ""), 41, zl))), 128)),
+          e.value.style.chart.labels.yAxisLabels.showProgression && !O.value ? (r(!0), v(_, { key: 0 }, F(x.value, (t, a) => (r(), v("text", {
+            class: "vue-ui-dumbbell-serie-value",
+            x: s.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
+            y: s.value.top + a * s.value.rowHeight + s.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: (u) => Ce({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => ke({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => xe({ datapoint: t, seriesIndex: a })
+          }, k([null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : i(P)(
+            e.value.style.chart.labels.yAxisLabels.formatter,
+            100 * (t.end / t.start - 1),
+            i(A)({
+              v: 100 * (t.end / t.start - 1),
+              s: "%",
+              r: e.value.style.chart.labels.yAxisLabels.rounding
+            }),
+            { datapoint: t }
+          )), 41, Ml))), 256)) : y("", !0)
+        ], 512)) : y("", !0),
+        e.value.style.chart.labels.axis.xLabel ? (r(), v("text", {
+          key: 5,
+          ref_key: "xAxisLabel",
+          ref: ie,
+          x: s.value.left + s.value.width / 2,
+          y: s.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"
+        }, k(e.value.style.chart.labels.axis.xLabel), 9, Xl)) : y("", !0),
+        e.value.style.chart.labels.xAxisLabels.show ? (r(), v("g", {
+          key: 6,
+          ref_key: "scaleLabels",
+          ref: te
+        }, [
+          (r(!0), v(_, null, F($.value.ticks, (t, a) => (r(), v("text", {
+            class: "vue-ui-dumbbell-scale-label",
+            key: `tick_${a}`,
+            transform: `translate(${s.value.left + a * (s.value.width / ($.value.ticks.length - 1))}, ${s.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"
+          }, k(i(P)(
+            e.value.style.chart.labels.formatter,
+            t,
+            i(A)({
+              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, Tl))), 128))
+        ], 512)) : y("", !0),
+        Z(c("g", null, [
+          Z(c("path", {
+            d: `M ${n.value ? n.value.startX : s.value.left},${s.value.top} ${n.value ? n.value.startX : s.value.left},${s.value.bottom}`,
+            stroke: n.value ? e.value.style.chart.plots.evaluationColors.enable ? n.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, El), [
+            [J, n.value !== null && ![null, void 0].includes(n.value.start)]
+          ]),
+          Z(c("path", {
+            d: `M ${n.value ? n.value.endX : s.value.left},${s.value.top} ${n.value ? n.value.endX : s.value.left},${s.value.bottom}`,
+            stroke: n.value ? e.value.style.chart.plots.evaluationColors.enable ? n.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, Bl), [
+            [J, n.value !== null && ![null, void 0].includes(n.value.end)]
+          ]),
+          Z(c("rect", {
+            x: n.value ? Math.min(n.value.startX, n.value.endX) : s.value.left,
+            y: s.value.top,
+            height: Math.max(0.1, s.value.height),
+            width: n.value ? Math.max(0.1, Math.abs(n.value.endX - n.value.startX)) : 0,
+            fill: n.value ? i(dt)(e.value.style.chart.comparisonLines.rectColor, e.value.style.chart.comparisonLines.rectOpacity) : "transparent",
+            style: { transition: "all 0.3s ease-in-out" }
+          }, null, 8, Ol), [
+            [J, e.value.style.chart.comparisonLines.showRect && n.value !== null && ![null, void 0].includes(n.value.start) && ![null, void 0].includes(n.value.end)]
+          ]),
+          Z(c("text", {
+            transform: `translate(${_e.value == null ? 0 : _e.value}, ${s.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" }
+          }, k(Ht.value), 9, Gl), [
+            [J, n.value !== null && _e.value !== null && e.value.style.chart.comparisonLines.showLabel]
+          ])
+        ], 512), [
+          [J, e.value.style.chart.comparisonLines.show && B.value !== null]
+        ]),
+        c("defs", null, [
+          c("radialGradient", {
+            id: `start_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            c("stop", {
+              offset: "10%",
+              "stop-color": i(K)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Pl),
+            c("stop", {
+              offset: "90%",
+              "stop-color": i(Q)(e.value.style.chart.plots.startColor, 0.1)
+            }, null, 8, Hl),
+            c("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.startColor
+            }, null, 8, Rl)
+          ], 8, Il),
+          c("radialGradient", {
+            id: `end_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            c("stop", {
+              offset: "10%",
+              "stop-color": i(K)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Ul),
+            c("stop", {
+              offset: "90%",
+              "stop-color": i(Q)(e.value.style.chart.plots.endColor, 0.1)
+            }, null, 8, Wl),
+            c("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.endColor
+            }, null, 8, jl)
+          ], 8, Vl),
+          c("radialGradient", {
+            id: `positive_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            c("stop", {
+              offset: "10%",
+              "stop-color": i(K)(e.value.style.chart.plots.evaluationColors.positive, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Yl),
+            c("stop", {
+              offset: "90%",
+              "stop-color": i(Q)(e.value.style.chart.plots.evaluationColors.positive, 0.1)
+            }, null, 8, Zl),
+            c("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.evaluationColors.positive
+            }, null, 8, Jl)
+          ], 8, ql),
+          c("radialGradient", {
+            id: `negative_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            c("stop", {
+              offset: "10%",
+              "stop-color": i(K)(e.value.style.chart.plots.evaluationColors.negative, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Ql),
+            c("stop", {
+              offset: "90%",
+              "stop-color": i(Q)(e.value.style.chart.plots.evaluationColors.negative, 0.1)
+            }, null, 8, ea),
+            c("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.evaluationColors.negative
+            }, null, 8, ta)
+          ], 8, Kl),
+          c("radialGradient", {
+            id: `neutral_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            c("stop", {
+              offset: "10%",
+              "stop-color": i(K)(e.value.style.chart.plots.evaluationColors.neutral, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, aa),
+            c("stop", {
+              offset: "90%",
+              "stop-color": i(Q)(e.value.style.chart.plots.evaluationColors.neutral, 0.1)
+            }, null, 8, oa),
+            c("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.evaluationColors.neutral
+            }, null, 8, sa)
+          ], 8, la)
+        ]),
+        (r(!0), v(_, null, F(x.value, (t, a) => (r(), v("g", {
+          key: `plot_${a}_${t.id}`
+        }, [
+          c("defs", null, [
+            c("linearGradient", {
+              id: `grad_pos_${b.value}`,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, na),
+              c("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, ua)
+            ], 8, ra),
+            c("linearGradient", {
+              id: `grad_neg_${b.value}`,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, ca),
+              c("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, va)
+            ], 8, ia)
+          ]),
+          ![void 0, null].includes(t.end) && ![void 0, null].includes(t.start) ? (r(), v("g", da, [
+            e.value.style.chart.plots.link.type === "curved" ? (r(), v("g", ha, [
+              c("path", {
+                d: `M 
+                                ${t.startX},${t.y + M.value / 2} 
+                                C ${t.centerX},${t.y} ${t.centerX},${t.y} 
+                                ${t.endX},${t.y + M.value / 2}
+                                L ${t.endX},${t.y - M.value / 2}
+                                C ${t.centerX},${t.y} ${t.centerX},${t.y}
+                                ${t.startX},${t.y - M.value / 2}
+                                Z
+                            `,
+                fill: e.value.style.chart.plots.evaluationColors.enable ? t.evaluationColor : t.endX > t.startX ? `url(#grad_pos_${b.value})` : `url(#grad_neg_${b.value})`
+              }, null, 8, ba)
+            ])) : (r(), v("g", fa, [
+              c("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_${b.value})` : `url(#grad_neg_${b.value})`
+              }, null, 8, ya)
+            ]))
+          ])) : y("", !0),
+          [null, void 0].includes(t.start) ? y("", !0) : (r(), v("circle", {
+            key: 1,
+            cx: t.startX,
+            cy: t.y,
+            r: M.value,
+            fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#start_grad_${b.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, ga)),
+          [null, void 0].includes(t.end) ? y("", !0) : (r(), v("circle", {
+            key: 2,
+            cx: t.endX,
+            cy: t.y,
+            r: M.value,
+            fill: e.value.style.chart.plots.gradient.show ? e.value.style.chart.plots.evaluationColors.enable ? t.evaluationGrad : `url(#end_grad_${b.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, pa))
+        ]))), 128)),
+        e.value.style.chart.labels.startLabels.show ? (r(), v("g", ma, [
+          (r(!0), v(_, null, F(x.value, (t, a) => (r(), v("g", {
+            key: `start_label_${a}_${t.id}`
+          }, [
+            [null, void 0].includes(t.start) ? y("", !0) : (r(), v("text", {
+              key: 0,
+              x: t.startX,
+              y: t.y + M.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"
+            }, k(i(P)(
+              e.value.style.chart.labels.formatter,
+              t.start,
+              i(A)({
+                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, Ca))
+          ]))), 128))
+        ])) : y("", !0),
+        e.value.style.chart.labels.endLabels.show ? (r(), v("g", ka, [
+          (r(!0), v(_, null, F(x.value, (t, a) => (r(), v("g", {
+            key: `end_label_${a}_${t.id}`
+          }, [
+            [null, void 0].includes(t.end) ? y("", !0) : (r(), v("text", {
+              key: 0,
+              x: t.endX,
+              y: t.y - (M.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"
+            }, k(i(P)(
+              e.value.style.chart.labels.formatter,
+              t.end,
+              i(A)({
+                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, xa))
+          ]))), 128))
+        ])) : y("", !0),
+        c("g", null, [
+          (r(!0), v(_, null, F(x.value, (t, a) => (r(), v("rect", {
+            x: s.value.left,
+            y: s.value.top + a * Math.max(0.1, s.value.rowHeight),
+            width: Math.max(0.1, s.value.width),
+            height: Math.max(0.1, s.value.rowHeight),
+            fill: B.value !== null && B.value === a ? i(dt)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
+            onMouseenter: (u) => Ce({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => ke({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => xe({ datapoint: t, seriesIndex: a })
+          }, null, 40, _a))), 256))
+        ]),
+        m(l.$slots, "svg", { svg: s.value }, void 0, !0)
+      ], 14, Al)),
+      l.$slots.watermark ? (r(), v("div", Aa, [
+        m(l.$slots, "watermark", S(D({ isPrinting: i(Ie) || i(Pe) })), void 0, !0)
+      ])) : y("", !0),
+      c("div", {
+        id: `legend-bottom-${b.value}`
+      }, null, 8, wa),
+      Te.value ? (r(), E(Kt, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${b.value}` : `#legend-bottom-${b.value}`
+      }, [
+        c("div", {
+          ref_key: "chartLegend",
+          ref: De
+        }, [
+          e.value.style.chart.legend.show && ee.value ? (r(), E(Cl, {
+            key: `legend_${Xe.value}`,
+            legendSet: ge.value,
+            config: Et.value,
+            clickable: !1
+          }, {
+            item: p(({ legend: t }) => [
+              c("div", {
+                style: se(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
+              }, [
+                (r(), v("svg", {
+                  xmlns: i(vt),
+                  viewBox: "0 0 20 20",
+                  height: e.value.style.chart.legend.fontSize,
+                  width: e.value.style.chart.legend.fontSize
+                }, [
+                  c("circle", {
+                    cx: 10,
+                    cy: 10,
+                    r: 9,
+                    fill: t.color
+                  }, null, 8, La)
+                ], 8, $a)),
+                i(ce) ? y("", !0) : (r(), v(_, { key: 0 }, [
+                  Ae(k(t.name), 1)
+                ], 64))
+              ], 4)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : m(l.$slots, "legend", {
+            key: 1,
+            legend: ge.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : y("", !0),
+      l.$slots.source ? (r(), v("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Fe,
+        dir: "auto"
+      }, [
+        m(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : y("", !0),
+      ee.value && e.value.userOptions.buttons.table ? (r(), E(Qt(Y.value.component), el({ key: 7 }, Y.value.props, {
+        ref_key: "tableUnit",
+        ref: j,
+        onClose: Qe
+      }), rt({
+        content: p(() => [
+          (r(), E(i(At), {
+            key: `table_${Me.value}`,
+            colNames: le.value.colNames,
+            head: le.value.head,
+            body: le.value.body,
+            config: le.value.config,
+            title: e.value.table.useDialog ? "" : Y.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Qe
+          }, {
+            th: p(({ th: t }) => [
+              c("div", {
+                innerHTML: t,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Sa)
+            ]),
+            td: p(({ td: t }) => [
+              Ae(k(t.name || t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: p(() => [
+            Ae(k(Y.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: p(() => [
+            c("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[0] || (o[0] = (t) => pe(e.value.userOptions.callbacks.csv))
+            }, [
+              nt(i(xt), {
+                name: "excel",
+                stroke: Y.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : y("", !0),
+      i(ce) ? (r(), E(dl, { key: 8 })) : y("", !0)
+    ], 46, xl));
+  }
+}, Fa = /* @__PURE__ */ kl(Da, [["__scopeId", "data-v-7b0427b6"]]), qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Fa
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  ja as a,
+  qa as b,
+  Fa as v
+};