vue-data-ui 3.0.0-next.6 → 3.0.0-next.60

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

@@ -0,0 +1,1119 @@
+import { defineAsyncComponent as U, computed as g, ref as h, toRefs as $t, watch as ge, shallowRef as je, onMounted as Ye, onBeforeUnmount as Ze, watchEffect as Lt, createElementBlock as c, openBlock as n, unref as i, normalizeStyle as ee, normalizeClass as Je, createBlock as F, createCommentVNode as f, createElementVNode as v, createSlots as At, withCtx as x, renderSlot as p, normalizeProps as te, guardReactiveProps as le, createVNode as Nt, withDirectives as W, Fragment as C, renderList as A, toDisplayString as _, vShow as q, createTextVNode as Ke, nextTick as St } from "vue";
+import { u as Mt, c as Qe, t as Xt, b as zt, o as Tt, f as et, g as It, h as tt, D as Ot, i as w, k as H, X as lt, s as at, l as j, j as Y, v as Ft, w as Ht } from "./index-BLtc1AIS.js";
+import { t as me, u as Pt } from "./useResponsive-DfdjqQps.js";
+import { u as Dt } from "./usePrinter-fqbzwh0l.js";
+import { u as Gt, B as Et } from "./useLoading-Bt5Doa8m.js";
+import { u as st } from "./useNestedProp-DExlTpuj.js";
+import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Bt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Vt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Ut from "./img-ChLGv8nO.js";
+import Wt from "./Title-DEKAfzRX.js";
+import qt from "./Legend-VD0VB7l7.js";
+import { _ as jt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Yt = ["id"], Zt = ["xmlns", "viewBox"], Jt = ["x", "y", "width", "height"], Kt = { key: 1 }, Qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], el = { key: 2 }, tl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], al = ["transform", "font-size", "fill"], sl = ["x", "y", "font-size", "fill", "font-weight", "onMouseenter", "onMouseleave", "onClick"], ol = ["x", "y", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], nl = ["x", "y", "font-size", "fill"], rl = ["transform", "font-size", "fill", "font-weight", "text-anchor"], ul = ["d", "stroke", "stroke-width", "stroke-dasharray"], il = ["d", "stroke", "stroke-width", "stroke-dasharray"], cl = ["x", "y", "height", "width", "fill"], vl = ["transform", "fill", "font-size"], dl = ["id"], hl = ["stop-color"], yl = ["stop-color"], fl = ["stop-color"], bl = ["id"], gl = ["stop-color"], ml = ["stop-color"], pl = ["stop-color"], xl = ["id"], _l = ["stop-color"], kl = ["stop-color"], Cl = ["stop-color"], wl = ["id"], $l = ["stop-color"], Ll = ["stop-color"], Al = ["stop-color"], Nl = ["id"], Sl = ["stop-color"], Ml = ["stop-color"], Xl = ["stop-color"], zl = ["id"], Tl = ["stop-color"], Il = ["stop-color"], Ol = ["id"], Fl = ["stop-color"], Hl = ["stop-color"], Pl = { key: 0 }, Dl = { key: 0 }, Gl = ["d", "fill"], El = { key: 1 }, Rl = ["x", "y", "height", "width", "fill"], Bl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Vl = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Ul = { key: 7 }, Wl = ["x", "y", "fill", "font-size"], ql = { key: 8 }, jl = ["x", "y", "fill", "font-size"], Yl = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Zl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Jl = ["xmlns", "height", "width"], Kl = ["fill"], Ql = ["innerHTML"], ea = {
+  __name: "vue-ui-dumbbell",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(ot, { expose: nt, emit: ta }) {
+    const rt = U(() => import("./vue-ui-accordion-EMAj3Ykx.js")), ut = U(() => import("./DataTable-C_tJHvMd.js")), it = U(() => import("./PenAndPaper-D6wazxlT.js")), ct = U(() => import("./UserOptions-D2G7II3G.js")), vt = U(() => import("./PackageVersion-5S8ajCUS.js")), { vue_ui_dumbbell: dt } = Mt(), N = ot, Z = g({
+      get() {
+        return !!N.dataset && N.dataset.length;
+      },
+      set(l) {
+        return l;
+      }
+    }), b = h(Qe()), pe = h(0), T = h(null), xe = h(null), _e = h(null), ke = h(null), Ce = h(null), we = h(0), $e = h(0), Le = h(0), ae = h(null), se = h(null), J = h(null), oe = h(null), I = h(null), r = h(null), O = h(!1), e = h(ie()), { loading: ne, FINAL_DATASET: re, manualLoading: ht } = Gt({
+      ...$t(N),
+      FINAL_CONFIG: e,
+      prepareConfig: ie,
+      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: Xt({
+        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: ue, setUserOptionsVisibility: Ae, keepUserOptionState: Ne } = Rt({ config: e.value }), { svgRef: Se } = Bt({ config: e.value.style.chart.title });
+    function ie() {
+      const l = st({
+        userConfig: N.config,
+        defaultConfig: dt
+      });
+      return l.theme ? {
+        ...st({
+          userConfig: zt.vue_ui_dumbbell[l.theme] || N.config,
+          defaultConfig: l
+        })
+      } : l;
+    }
+    ge(() => N.config, (l) => {
+      ne.value || (e.value = ie()), ue.value = !e.value.userOptions.showOnChartHover, Xe(), we.value += 1, $e.value += 1, Le.value += 1, E.value = e.value.style.chart.rowHeight, R.value = e.value.style.chart.width, D.value.showTable = e.value.table.show;
+    }, { deep: !0 }), ge(() => re.value, (l) => {
+      Array.isArray(l) && l.length > 0 && (ht.value = !1), De(), Ge();
+    }, { deep: !0 });
+    const S = je(null), P = je(null);
+    Ye(() => {
+      Xe();
+    });
+    const Me = g(() => !!e.value.debug);
+    function Xe() {
+      if (Tt(N.dataset) ? et({
+        componentName: "VueUiDumbbell",
+        type: "dataset",
+        debug: Me.value
+      }) : N.dataset.forEach((l, s) => {
+        It({
+          datasetObject: l,
+          requiredAttributes: ["name", "start", "end"]
+        }).forEach((t) => {
+          Z.value = !1, et({
+            componentName: "VueUiDumbbell",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: s,
+            debug: Me.value
+          });
+        });
+      }), e.value.responsive) {
+        const l = me(() => {
+          const { width: s, height: t } = Pt({
+            chart: T.value,
+            title: e.value.style.chart.title.text ? xe.value : null,
+            legend: e.value.style.chart.legend.show ? _e.value : null,
+            source: ke.value,
+            noTitle: Ce.value
+          }), a = e.value.style.chart.title.text ? 24 : 0, u = e.value.style.chart.legend.show ? 24 : 0;
+          requestAnimationFrame(async () => {
+            R.value = Math.max(0.1, s), E.value = Math.max(0.1, (Math.max(0.1, t) - (a + u)) / re.value.length), We();
+          });
+        });
+        S.value && (P.value && S.value.unobserve(P.value), S.value.disconnect()), S.value = new ResizeObserver(l), P.value = T.value.parentNode, S.value.observe(P.value);
+      }
+      We();
+    }
+    Ze(() => {
+      L.value != null && (cancelAnimationFrame(L.value), L.value = null), S.value && (P.value && S.value.unobserve(P.value), S.value.disconnect());
+    });
+    const { isPrinting: ze, isImaging: Te, generatePdf: Ie, generateImage: Oe } = Dt({
+      elementId: `dumbbell_${b.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-dumbbell",
+      options: e.value.userOptions.print
+    }), yt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), D = h({
+      showTable: e.value.table.show
+    });
+    ge(e, () => {
+      D.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 });
+    const G = g(() => re.value.map((l, s) => ({
+      ...l,
+      start: tt(l.start),
+      end: tt(l.end),
+      id: l.id ?? `${String(l.name)}__${String(l.start)}__${String(l.end)}__${Qe()}`
+    }))), Fe = g(() => {
+      const l = e.value.style.chart.grid, s = G.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, u = l.scaleMin ?? Math.min(t, 0), d = l.scaleMax ?? a;
+      return { min: u, max: d };
+    }), $ = g(() => Ot(Fe.value.min, Fe.value.max, e.value.style.chart.grid.scaleSteps)), E = h(e.value.style.chart.rowHeight), R = h(e.value.style.chart.width);
+    function ft() {
+      let l = 0;
+      se.value && (l = Array.from(se.value.querySelectorAll("text")).reduce((a, u) => {
+        const d = u.getComputedTextLength();
+        return d > a ? d : a;
+      }, 0));
+      const s = ae.value ? ae.value.getBoundingClientRect().width : 0;
+      return l + s + (s ? 24 + e.value.style.chart.labels.axis.yLabelOffsetX : 0);
+    }
+    const ce = h(0), bt = me((l) => {
+      ce.value = l;
+    }, 100);
+    Lt((l) => {
+      const s = J.value;
+      if (!s) return;
+      const t = new ResizeObserver((a) => {
+        bt(a[0].contentRect.height);
+      });
+      t.observe(s), l(() => t.disconnect());
+    }), Ze(() => {
+      ce.value = 0;
+    });
+    const He = g(() => {
+      O.value;
+      let l = 0;
+      oe.value && (l = oe.value.getBBox().height);
+      let s = 0;
+      return J.value && (s = ce.value), l + s;
+    }), ve = g(() => G.value.length);
+    function Pe(l, s, t) {
+      const a = Number(l), u = Number(s.min), d = Number(s.max), y = Number(t.width);
+      if (!Number.isFinite(a) || !Number.isFinite(u) || !Number.isFinite(d) || !Number.isFinite(y))
+        return t.left;
+      const m = d - u;
+      return m <= 0 ? t.left : t.left + (a - u) / m * y;
+    }
+    const o = g(() => {
+      O.value;
+      const l = ft(), s = e.value.style.chart.padding, t = e.value.style.chart.labels.axis.xLabel ? e.value.style.chart.labels.axis.xLabelOffsetY : 0, a = E.value * ve.value - He.value - s.top - s.bottom - t, u = a / ve.value, d = E.value * ve.value, y = R.value - l - s.left - s.right, m = $.value.ticks.length * (y / $.value.ticks.length);
+      return {
+        left: e.value.style.chart.padding.left + l,
+        right: R.value - e.value.style.chart.padding.right,
+        top: e.value.style.chart.padding.top,
+        bottom: d - e.value.style.chart.padding.bottom - He.value - t,
+        width: y,
+        height: a,
+        rowHeight: u,
+        absoluteHeight: d,
+        widthPlotReference: m
+      };
+    }), M = g(() => Math.min(E.value / 2 * 0.7, e.value.style.chart.plots.radius)), B = h([]), k = g({
+      get() {
+        const l = o.value, s = $.value;
+        return B.value.map((t, a) => {
+          const u = Pe(t.start, s, l), d = Pe(t.endVal, s, l), y = u + (d - u) / 2, m = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end > t.start, z = ![null, void 0].includes(t.start) && ![null, void 0].includes(t.end) && t.end < t.start, qe = ![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), wt = m ? e.value.style.chart.plots.evaluationColors.positive : z ? e.value.style.chart.plots.evaluationColors.negative : e.value.style.chart.plots.evaluationColors.neutral;
+          return {
+            ...t,
+            isPositive: m,
+            isNegative: z,
+            isNeutral: qe,
+            evaluationColor: wt,
+            evaluationGrad: `url(#${m ? "positive" : z ? "negative" : "neutral"}_grad_${b.value})`,
+            startX: u,
+            endX: d,
+            centerX: y,
+            y: l.top + a * l.rowHeight + l.rowHeight / 2
+          };
+        });
+      },
+      set(l) {
+        B.value = l;
+      }
+    });
+    function De() {
+      B.value = G.value.map((l) => {
+        const s = Number(l.start);
+        return {
+          ...l,
+          endVal: Number.isFinite(s) ? s : 0
+        };
+      });
+    }
+    const L = h(null);
+    Ye(() => {
+      Ge();
+    });
+    function Ge() {
+      if (L.value != null && (cancelAnimationFrame(L.value), L.value = null), De(), !e.value.useAnimation) {
+        k.value = B.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, s = G.value.map((a) => {
+        const u = Number(a.start), d = Number(a.end), y = Number.isFinite(u) ? u : 0;
+        return (Number.isFinite(d) ? d : y) - y;
+      }), t = () => {
+        let a = !0;
+        k.value = B.value.map((u, d) => {
+          const y = Number.isFinite(Number(u.end)) ? Number(u.end) : u.endVal, m = u.endVal + s[d] * l, z = s[d] >= 0 ? Math.min(m, y) : Math.max(m, y);
+          return z !== y && (a = !1), { ...u, endVal: z };
+        }), a ? L.value = null : L.value = requestAnimationFrame(t);
+      };
+      L.value = requestAnimationFrame(t);
+    }
+    const Ee = 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 }
+    ]), gt = 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 = k.value.map((t) => ({
+        name: t.name
+      })), s = k.value.map((t) => ({
+        start: t.start,
+        end: t.end
+      }));
+      return { head: l, body: s };
+    }), K = g(() => {
+      const l = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.start,
+        e.value.table.columnNames.end,
+        e.value.table.columnNames.progression
+      ], s = X.value.head.map((u, d) => {
+        const y = w({
+          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
+        }), m = w({
+          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
+        }), z = w({
+          v: 100 * (X.value.body[d].end / X.value.body[d].start - 1),
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        });
+        return [
+          { name: u.name },
+          y,
+          m,
+          z
+        ];
+      }), 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 Re(l = null) {
+      St(() => {
+        const s = 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(s), a = Ft(t);
+        l ? l(a) : Ht({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
+      });
+    }
+    const V = h(!1);
+    function Be(l) {
+      V.value = l, pe.value += 1;
+    }
+    function mt() {
+      return G.value;
+    }
+    function Ve() {
+      D.value.showTable = !D.value.showTable;
+    }
+    const Q = h(!1);
+    function de() {
+      Q.value = !Q.value;
+    }
+    async function pt({ scale: l = 2 } = {}) {
+      if (!T.value) return;
+      const { width: s, height: t } = T.value.getBoundingClientRect(), a = s / t, { imageUri: u, base64: d } = await Ut({ domElement: T.value, base64: !0, img: !0, scale: l });
+      return {
+        imageUri: u,
+        base64: d,
+        title: e.value.style.chart.title.text,
+        width: s,
+        height: t,
+        aspectRatio: a
+      };
+    }
+    const Ue = g(() => $.value.ticks), xt = g(() => ({ start: 0, end: Ue.value.length }));
+    Vt({
+      timeLabelsEls: J,
+      timeLabels: Ue,
+      slicer: xt,
+      configRef: e,
+      rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate"],
+      isAutoSize: !1,
+      width: R,
+      height: E,
+      targetClass: ".vue-ui-dumbbell-scale-label"
+    });
+    function _t({
+      rowHeight: l,
+      fontSize: s,
+      showProgression: t
+    }) {
+      if (!t) return !1;
+      const a = l / 3, u = l / 1.3, d = Math.abs(u - a), y = s * 1.2;
+      return d < y;
+    }
+    const kt = /* @__PURE__ */ (() => {
+      let l = null, s = 0;
+      const t = 1;
+      return (a) => {
+        if (a === O.value) {
+          l = null, s = 0;
+          return;
+        }
+        l === null || l !== a ? (l = a, s = 1) : (s += 1, s >= t && (O.value = a, l = null, s = 0));
+      };
+    })(), We = me(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const l = _t({
+            rowHeight: o.value.rowHeight,
+            fontSize: e.value.style.chart.labels.yAxisLabels.fontSize,
+            showProgression: e.value.style.chart.labels.yAxisLabels.showProgression
+          });
+          kt(l);
+        });
+      });
+    }, 100);
+    function he({ datapoint: l, seriesIndex: s }) {
+      I.value = s, r.value = l, e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: l, seriesIndex: s });
+    }
+    function ye({ datapoint: l, seriesIndex: s }) {
+      I.value = null, r.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: s });
+    }
+    function fe({ datapoint: l, seriesIndex: s }) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: s });
+    }
+    const be = g(() => {
+      if (r.value === null) return 0;
+      const l = ![null, void 0].includes(r.value.start), s = ![null, void 0].includes(r.value.end);
+      return l && s ? Math.min(r.value.startX, r.value.endX) + Math.abs(r.value.startX - r.value.endX) / 2 : l && !s ? r.value.startX : s && !l ? r.value.endX : null;
+    }), Ct = g(() => {
+      if (r.value === null) return "";
+      const l = ![null, void 0].includes(r.value.start), s = ![null, void 0].includes(r.value.end);
+      let t = "", a = "";
+      return l && (t = H(
+        e.value.style.chart.labels.formatter,
+        r.value.start,
+        w({
+          p: e.value.style.chart.labels.prefix,
+          v: r.value.start,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.style.chart.labels.startLabels.rounding
+        }),
+        { datapoint: r.value, seriesIndex: I.value }
+      )), s && (a = H(
+        e.value.style.chart.labels.formatter,
+        r.value.end,
+        w({
+          p: e.value.style.chart.labels.prefix,
+          v: r.value.end,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.style.chart.labels.startLabels.rounding
+        }),
+        { datapoint: r.value, seriesIndex: I.value }
+      )), l && s ? `${t} → ${a}` : l && !s ? t : s && !l ? a : "";
+    });
+    return nt({
+      getData: mt,
+      getImage: pt,
+      generatePdf: Ie,
+      generateCsv: Re,
+      generateImage: Oe,
+      toggleTable: Ve,
+      toggleAnnotator: de,
+      toggleFullscreen: Be
+    }), (l, s) => (n(), c("div", {
+      ref_key: "dumbbellChart",
+      ref: T,
+      class: Je(`vue-ui-dumbbell ${V.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: ee(`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: s[1] || (s[1] = () => i(Ae)(!0)),
+      onMouseleave: s[2] || (s[2] = () => i(Ae)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (n(), F(i(it), {
+        key: 0,
+        svgRef: i(Se),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Q.value,
+        onClose: de
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
+      yt.value ? (n(), c("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Ce,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : f("", !0),
+      e.value.style.chart.title.text ? (n(), c("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: xe,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (n(), F(Wt, {
+          key: `title_${we.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)) : f("", !0),
+      e.value.userOptions.show && Z.value && (i(Ne) || i(ue)) ? (n(), F(i(ct), {
+        ref: "details",
+        key: `user_option_${pe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: i(ze),
+        isImaging: i(Te),
+        uid: b.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: V.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: T.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,
+        onToggleFullscreen: Be,
+        onGeneratePdf: i(Ie),
+        onGenerateCsv: Re,
+        onGenerateImage: i(Oe),
+        onToggleTable: Ve,
+        onToggleAnnotator: de,
+        style: ee({
+          visibility: i(Ne) ? i(ue) ? "visible" : "hidden" : "visible"
+        })
+      }, At({ _: 2 }, [
+        l.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: x(({ isOpen: t, color: a }) => [
+            p(l.$slots, "menuIcon", te(le({ isOpen: t, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: x(() => [
+            p(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: x(() => [
+            p(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: x(() => [
+            p(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: x(() => [
+            p(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: x(({ toggleFullscreen: t, isFullscreen: a }) => [
+            p(l.$slots, "optionFullscreen", te(le({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: x(({ toggleAnnotator: t, isAnnotator: a }) => [
+            p(l.$slots, "optionAnnotator", te(le({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      (n(), c("svg", {
+        ref_key: "svgRef",
+        ref: Se,
+        xmlns: i(lt),
+        class: Je({ "vue-data-ui-fullscreen--on": V.value, "vue-data-ui-fulscreen--off": !V.value }),
+        viewBox: `0 0 ${R.value} ${o.value.absoluteHeight <= 0 ? 10 : o.value.absoluteHeight}`,
+        style: ee(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Nt(i(vt)),
+        l.$slots["chart-background"] ? (n(), c("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, Jt)) : f("", !0),
+        e.value.style.chart.grid.verticalGrid.show ? (n(), c("g", Kt, [
+          (n(!0), c(C, null, A($.value.ticks, (t, a) => (n(), c("line", {
+            x1: o.value.left + a * o.value.width / ($.value.ticks.length - 1),
+            x2: o.value.left + a * o.value.width / ($.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, Qt))), 256))
+        ])) : f("", !0),
+        e.value.style.chart.grid.horizontalGrid.show ? (n(), c("g", el, [
+          (n(!0), c(C, null, A(G.value, (t, a) => (n(), c("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, tl))), 256)),
+          v("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, ll)
+        ])) : f("", !0),
+        e.value.style.chart.labels.axis.yLabel ? (n(), c("text", {
+          key: 3,
+          ref_key: "yAxisLabel",
+          ref: ae,
+          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, al)) : f("", !0),
+        e.value.style.chart.labels.yAxisLabels.show ? (n(), c("g", {
+          key: 4,
+          ref_key: "serieLabels",
+          ref: se
+        }, [
+          (n(!0), c(C, null, A(k.value, (t, a) => (n(), c("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 || O.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: (u) => he({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => ye({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => fe({ datapoint: t, seriesIndex: a })
+          }, _(t.name) + " " + _(O.value && e.value.style.chart.labels.yAxisLabels.showProgression ? [null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : `(${i(H)(
+            e.value.style.chart.labels.yAxisLabels.formatter,
+            100 * (t.end / t.start - 1),
+            i(w)({
+              v: 100 * (t.end / t.start - 1),
+              s: "%",
+              r: e.value.style.chart.labels.yAxisLabels.rounding
+            }),
+            { datapoint: t }
+          )})` : ""), 41, sl))), 128)),
+          e.value.style.chart.labels.yAxisLabels.showProgression && !O.value ? (n(!0), c(C, { key: 0 }, A(k.value, (t, a) => (n(), c("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: (u) => he({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => ye({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => fe({ datapoint: t, seriesIndex: a })
+          }, _([null, void 0].includes(t.start) || [null, void 0].includes(t.end) ? "" : i(H)(
+            e.value.style.chart.labels.yAxisLabels.formatter,
+            100 * (t.end / t.start - 1),
+            i(w)({
+              v: 100 * (t.end / t.start - 1),
+              s: "%",
+              r: e.value.style.chart.labels.yAxisLabels.rounding
+            }),
+            { datapoint: t }
+          )), 41, ol))), 256)) : f("", !0)
+        ], 512)) : f("", !0),
+        e.value.style.chart.labels.axis.xLabel ? (n(), c("text", {
+          key: 5,
+          ref_key: "xAxisLabel",
+          ref: oe,
+          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, nl)) : f("", !0),
+        e.value.style.chart.labels.xAxisLabels.show ? (n(), c("g", {
+          key: 6,
+          ref_key: "scaleLabels",
+          ref: J
+        }, [
+          (n(!0), c(C, null, A($.value.ticks, (t, a) => (n(), c("text", {
+            class: "vue-ui-dumbbell-scale-label",
+            key: `tick_${a}`,
+            transform: `translate(${o.value.left + a * (o.value.width / ($.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"
+          }, _(i(H)(
+            e.value.style.chart.labels.formatter,
+            t,
+            i(w)({
+              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, rl))), 128))
+        ], 512)) : f("", !0),
+        W(v("g", null, [
+          W(v("path", {
+            d: `M ${r.value ? r.value.startX : o.value.left},${o.value.top} ${r.value ? r.value.startX : o.value.left},${o.value.bottom}`,
+            stroke: r.value ? e.value.style.chart.plots.evaluationColors.enable ? r.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, ul), [
+            [q, r.value !== null && ![null, void 0].includes(r.value.start)]
+          ]),
+          W(v("path", {
+            d: `M ${r.value ? r.value.endX : o.value.left},${o.value.top} ${r.value ? r.value.endX : o.value.left},${o.value.bottom}`,
+            stroke: r.value ? e.value.style.chart.plots.evaluationColors.enable ? r.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, il), [
+            [q, r.value !== null && ![null, void 0].includes(r.value.end)]
+          ]),
+          W(v("rect", {
+            x: r.value ? Math.min(r.value.startX, r.value.endX) : o.value.left,
+            y: o.value.top,
+            height: Math.max(0.1, o.value.height),
+            width: r.value ? Math.max(0.1, Math.abs(r.value.endX - r.value.startX)) : 0,
+            fill: r.value ? i(at)(e.value.style.chart.comparisonLines.rectColor, e.value.style.chart.comparisonLines.rectOpacity) : "transparent",
+            style: { transition: "all 0.3s ease-in-out" }
+          }, null, 8, cl), [
+            [q, e.value.style.chart.comparisonLines.showRect && r.value !== null && ![null, void 0].includes(r.value.start) && ![null, void 0].includes(r.value.end)]
+          ]),
+          W(v("text", {
+            transform: `translate(${be.value == null ? 0 : be.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" }
+          }, _(Ct.value), 9, vl), [
+            [q, r.value !== null && be.value !== null && e.value.style.chart.comparisonLines.showLabel]
+          ])
+        ], 512), [
+          [q, e.value.style.chart.comparisonLines.show && I.value !== null]
+        ]),
+        v("defs", null, [
+          v("radialGradient", {
+            id: `start_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            v("stop", {
+              offset: "10%",
+              "stop-color": i(j)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, hl),
+            v("stop", {
+              offset: "90%",
+              "stop-color": i(Y)(e.value.style.chart.plots.startColor, 0.1)
+            }, null, 8, yl),
+            v("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.startColor
+            }, null, 8, fl)
+          ], 8, dl),
+          v("radialGradient", {
+            id: `end_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            v("stop", {
+              offset: "10%",
+              "stop-color": i(j)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, gl),
+            v("stop", {
+              offset: "90%",
+              "stop-color": i(Y)(e.value.style.chart.plots.endColor, 0.1)
+            }, null, 8, ml),
+            v("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.endColor
+            }, null, 8, pl)
+          ], 8, bl),
+          v("radialGradient", {
+            id: `positive_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            v("stop", {
+              offset: "10%",
+              "stop-color": i(j)(e.value.style.chart.plots.evaluationColors.positive, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, _l),
+            v("stop", {
+              offset: "90%",
+              "stop-color": i(Y)(e.value.style.chart.plots.evaluationColors.positive, 0.1)
+            }, null, 8, kl),
+            v("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.evaluationColors.positive
+            }, null, 8, Cl)
+          ], 8, xl),
+          v("radialGradient", {
+            id: `negative_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            v("stop", {
+              offset: "10%",
+              "stop-color": i(j)(e.value.style.chart.plots.evaluationColors.negative, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, $l),
+            v("stop", {
+              offset: "90%",
+              "stop-color": i(Y)(e.value.style.chart.plots.evaluationColors.negative, 0.1)
+            }, null, 8, Ll),
+            v("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.evaluationColors.negative
+            }, null, 8, Al)
+          ], 8, wl),
+          v("radialGradient", {
+            id: `neutral_grad_${b.value}`,
+            fy: "30%"
+          }, [
+            v("stop", {
+              offset: "10%",
+              "stop-color": i(j)(e.value.style.chart.plots.evaluationColors.neutral, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Sl),
+            v("stop", {
+              offset: "90%",
+              "stop-color": i(Y)(e.value.style.chart.plots.evaluationColors.neutral, 0.1)
+            }, null, 8, Ml),
+            v("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.evaluationColors.neutral
+            }, null, 8, Xl)
+          ], 8, Nl)
+        ]),
+        (n(!0), c(C, null, A(k.value, (t, a) => (n(), c("g", {
+          key: `plot_${a}_${t.id}`
+        }, [
+          v("defs", null, [
+            v("linearGradient", {
+              id: `grad_pos_${b.value}`,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%"
+            }, [
+              v("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, Tl),
+              v("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, Il)
+            ], 8, zl),
+            v("linearGradient", {
+              id: `grad_neg_${b.value}`,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%"
+            }, [
+              v("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, Fl),
+              v("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, Hl)
+            ], 8, Ol)
+          ]),
+          ![void 0, null].includes(t.end) && ![void 0, null].includes(t.start) ? (n(), c("g", Pl, [
+            e.value.style.chart.plots.link.type === "curved" ? (n(), c("g", Dl, [
+              v("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, Gl)
+            ])) : (n(), c("g", El, [
+              v("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, Rl)
+            ]))
+          ])) : f("", !0),
+          [null, void 0].includes(t.start) ? f("", !0) : (n(), c("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, Bl)),
+          [null, void 0].includes(t.end) ? f("", !0) : (n(), c("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, Vl))
+        ]))), 128)),
+        e.value.style.chart.labels.startLabels.show ? (n(), c("g", Ul, [
+          (n(!0), c(C, null, A(k.value, (t, a) => (n(), c("g", {
+            key: `start_label_${a}_${t.id}`
+          }, [
+            [null, void 0].includes(t.start) ? f("", !0) : (n(), c("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"
+            }, _(i(H)(
+              e.value.style.chart.labels.formatter,
+              t.start,
+              i(w)({
+                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, Wl))
+          ]))), 128))
+        ])) : f("", !0),
+        e.value.style.chart.labels.endLabels.show ? (n(), c("g", ql, [
+          (n(!0), c(C, null, A(k.value, (t, a) => (n(), c("g", {
+            key: `end_label_${a}_${t.id}`
+          }, [
+            [null, void 0].includes(t.end) ? f("", !0) : (n(), c("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"
+            }, _(i(H)(
+              e.value.style.chart.labels.formatter,
+              t.end,
+              i(w)({
+                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, jl))
+          ]))), 128))
+        ])) : f("", !0),
+        v("g", null, [
+          (n(!0), c(C, null, A(k.value, (t, a) => (n(), c("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 ? i(at)(e.value.style.chart.highlighter.color, e.value.style.chart.highlighter.opacity) : "transparent",
+            onMouseenter: (u) => he({ datapoint: t, seriesIndex: a }),
+            onMouseleave: (u) => ye({ datapoint: t, seriesIndex: a }),
+            onClick: (u) => fe({ datapoint: t, seriesIndex: a })
+          }, null, 40, Yl))), 256))
+        ]),
+        p(l.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, Zt)),
+      l.$slots.watermark ? (n(), c("div", Zl, [
+        p(l.$slots, "watermark", te(le({ isPrinting: i(ze) || i(Te) })), void 0, !0)
+      ])) : f("", !0),
+      v("div", {
+        ref_key: "chartLegend",
+        ref: _e
+      }, [
+        e.value.style.chart.legend.show && Z.value ? (n(), F(qt, {
+          key: `legend_${Le.value}`,
+          legendSet: Ee.value,
+          config: gt.value,
+          clickable: !1
+        }, {
+          item: x(({ legend: t }) => [
+            v("div", {
+              style: ee(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
+            }, [
+              (n(), c("svg", {
+                xmlns: i(lt),
+                viewBox: "0 0 20 20",
+                height: e.value.style.chart.legend.fontSize,
+                width: e.value.style.chart.legend.fontSize
+              }, [
+                v("circle", {
+                  cx: 10,
+                  cy: 10,
+                  r: 9,
+                  fill: t.color
+                }, null, 8, Kl)
+              ], 8, Jl)),
+              i(ne) ? f("", !0) : (n(), c(C, { key: 0 }, [
+                Ke(_(t.name), 1)
+              ], 64))
+            ], 4)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : p(l.$slots, "legend", {
+          key: 1,
+          legend: Ee.value
+        }, void 0, !0)
+      ], 512),
+      l.$slots.source ? (n(), c("div", {
+        key: 5,
+        ref_key: "source",
+        ref: ke,
+        dir: "auto"
+      }, [
+        p(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      Z.value ? (n(), F(i(rt), {
+        key: 6,
+        hideDetails: "",
+        config: {
+          open: D.value.showTable,
+          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
+          }
+        }
+      }, {
+        content: x(() => [
+          (n(), F(i(ut), {
+            key: `table_${$e.value}`,
+            colNames: K.value.colNames,
+            head: K.value.head,
+            body: K.value.body,
+            config: K.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: s[0] || (s[0] = (t) => D.value.showTable = !1)
+          }, {
+            th: x(({ th: t }) => [
+              v("div", {
+                innerHTML: t,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ql)
+            ]),
+            td: x(({ td: t }) => [
+              Ke(_(t.name || t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : f("", !0),
+      i(ne) ? (n(), F(Et, { key: 7 })) : f("", !0)
+    ], 46, Yt));
+  }
+}, fa = /* @__PURE__ */ jt(ea, [["__scopeId", "data-v-e9195160"]]);
+export {
+  fa as default
+};