vue-data-ui 2.3.3 → 2.3.4

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

@@ -0,0 +1,624 @@
+import { computed as m, ref as f, onMounted as Z, onBeforeUnmount as fe, openBlock as o, createElementBlock as r, normalizeClass as J, normalizeStyle as F, createVNode as K, createCommentVNode as g, createBlock as I, unref as y, createSlots as ge, withCtx as _, renderSlot as $, normalizeProps as me, guardReactiveProps as pe, Fragment as C, renderList as w, createElementVNode as n, toDisplayString as L, createTextVNode as Q, nextTick as _e } from "vue";
+import { u as xe, c as ee, t as ke, o as Ce, e as te, g as we, z as $e, f as z, X as le, l as ae, h as se, n as Le, q as ze } from "./index-uOtklCCx.js";
+import { t as Xe, u as Ae } from "./useResponsive-NZB-WLRF.js";
+import { _ as Se } from "./Title-2iks1ziC.js";
+import { u as Ne, U as Te } from "./usePrinter-B6xQCyL-.js";
+import { D as Pe } from "./DataTable-CwaOlAsy.js";
+import Ge from "./vue-ui-skeleton-BM9rwmxY.js";
+import { L as Me } from "./Legend-CxvJTjEm.js";
+import De from "./vue-ui-accordion-HJPf7My0.js";
+import { u as oe } from "./useNestedProp-BgWkUab_.js";
+import { _ as Fe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ie = ["id"], Oe = ["xmlns", "viewBox"], Ve = { key: 0 }, Ee = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], We = { key: 1 }, He = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Re = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Be = { key: 2 }, Ue = ["x", "y", "font-size", "fill", "font-weight"], je = ["x", "y", "font-size", "fill"], qe = { key: 3 }, Ye = ["x", "y", "font-size", "fill", "font-weight"], Ze = ["id"], Je = ["stop-color"], Ke = ["stop-color"], Qe = ["stop-color"], et = ["id"], tt = ["stop-color"], lt = ["stop-color"], at = ["stop-color"], st = ["id"], ot = ["stop-color"], rt = ["stop-color"], nt = ["id"], ut = ["stop-color"], it = ["stop-color"], ct = { key: 0 }, dt = ["d", "fill"], vt = { key: 1 }, ht = ["x", "y", "height", "width", "fill"], yt = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], bt = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], ft = { key: 2 }, gt = ["x", "y", "fill", "font-size"], mt = { key: 3 }, pt = ["x", "y", "fill", "font-size"], _t = ["xmlns", "height", "width"], xt = ["fill"], kt = ["innerHTML"], Ct = {
+  __name: "vue-ui-dumbbell",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(re, { expose: ne, emit: wt }) {
+    const p = re, { vue_ui_dumbbell: ue } = xe(), X = m({
+      get() {
+        return !!p.dataset && p.dataset.length;
+      },
+      set(l) {
+        return l;
+      }
+    }), d = f(ee()), E = f(0), S = f(null), W = f(null), H = f(null), e = m(() => {
+      const l = oe({
+        userConfig: p.config,
+        defaultConfig: ue
+      });
+      return l.theme ? {
+        ...oe({
+          userConfig: ke.vue_ui_dumbbell[l.theme] || p.config,
+          defaultConfig: l
+        })
+      } : l;
+    }), N = f(null);
+    Z(() => {
+      if (Ce(p.dataset) ? te({
+        componentName: "VueUiDumbbell",
+        type: "dataset"
+      }) : p.dataset.forEach((l, u) => {
+        we({
+          datasetObject: l,
+          requiredAttributes: ["name", "start", "end"]
+        }).forEach((t) => {
+          X.value = !1, te({
+            componentName: "VueUiDumbbell",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: u
+          });
+        });
+      }), e.value.responsive) {
+        const l = Xe(() => {
+          const { width: u, height: t } = Ae({
+            chart: S.value,
+            title: e.value.style.chart.title.text ? W.value : null,
+            legend: e.value.style.chart.legend.show ? H.value : null
+          });
+          P.value = u, v.value = t / p.dataset.length, h.value = G();
+        });
+        N.value = new ResizeObserver(l), N.value.observe(S.value.parentNode);
+      }
+    }), fe(() => {
+      N.value && N.value.disconnect();
+    });
+    const { isPrinting: ie, isImaging: ce, generatePdf: R, generateImage: B } = Ne({
+      elementId: `dumbbell_${d.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-dumbbell"
+    }), T = f({
+      showTable: e.value.table.show
+    }), x = m(() => p.dataset.map((l, u) => ({
+      ...l,
+      id: ee()
+    }))), O = m(() => ({
+      max: Math.max(...x.value.flatMap((l) => [l.start, l.end])),
+      min: Math.min(...x.value.flatMap((l) => [l.start, l.end]))
+    })), i = m(() => $e(O.value.min < 0 ? O.value.min : 0, O.value.max, e.value.style.chart.grid.scaleSteps)), v = f(e.value.style.chart.rowHeight), P = f(e.value.style.chart.width), a = m(() => {
+      const l = v.value, u = e.value.style.chart.padding.left + e.value.style.chart.padding.right + P.value, t = e.value.style.chart.padding.top + e.value.style.chart.padding.bottom + l * p.dataset.length, s = i.value.ticks.length * (P.value / i.value.ticks.length);
+      return {
+        left: e.value.style.chart.padding.left,
+        right: u - e.value.style.chart.padding.right,
+        top: e.value.style.chart.padding.top,
+        bottom: t - e.value.style.chart.padding.bottom,
+        width: P.value,
+        height: l * p.dataset.length,
+        rowHeight: l,
+        absoluteHeight: t,
+        absoluteWidth: u,
+        widthPlotReference: s
+      };
+    });
+    function G() {
+      return x.value.map((l, u) => {
+        const t = a.value.left + (l.start + Math.abs(i.value.min)) / (i.value.max + Math.abs(i.value.min)) * a.value.widthPlotReference, s = a.value.left + (l.end + Math.abs(i.value.min)) / (i.value.max + Math.abs(i.value.min)) * a.value.widthPlotReference, c = t + (s - t) / 2;
+        return {
+          ...l,
+          startX: t,
+          endX: s,
+          centerX: c,
+          y: a.value.top + u * v.value + v.value / 2,
+          endVal: l.start
+        };
+      });
+    }
+    const h = f([]), U = f(null), de = m(() => x.value.map((l) => l.end).reduce((l, u) => l + u, 0));
+    Z(() => {
+      h.value = G();
+      let l = h.value.map((t) => t.start).reduce((t, s) => t + s, 0);
+      function u() {
+        const t = x.value.map((s) => s.end - s.start);
+        l >= de.value ? (cancelAnimationFrame(U.value), h.value = G()) : (h.value = h.value.map((s, c) => {
+          s.endVal += t[c] * (e.value.animationSpeed / 100);
+          const b = a.value.left + (s.start + Math.abs(i.value.min)) / (i.value.max + Math.abs(i.value.min)) * a.value.widthPlotReference, D = a.value.left + (s.endVal + Math.abs(i.value.min)) / (i.value.max + Math.abs(i.value.min)) * a.value.widthPlotReference, V = b + (D - b) / 2;
+          return {
+            ...s,
+            startX: b,
+            endX: D,
+            centerX: V,
+            y: a.value.top + c * v.value + v.value / 2,
+            endVal: s.endVal
+          };
+        }), l = h.value.map((s) => s.endVal).reduce((s, c) => s + c, 0), U.value = requestAnimationFrame(u));
+      }
+      e.value.useAnimation ? u() : h.value = G();
+    });
+    const j = m(() => [
+      { name: e.value.style.chart.legend.labelStart, color: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${d.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_${d.value})` : e.value.style.chart.plots.endColor }
+    ]), ve = m(() => ({
+      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" : ""
+    })), k = m(() => {
+      const l = h.value.map((t) => ({
+        name: t.name
+      })), u = h.value.map((t) => ({
+        start: t.start,
+        end: t.end
+      }));
+      return { head: l, body: u };
+    }), M = m(() => {
+      const l = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.start,
+        e.value.table.columnNames.end,
+        e.value.table.columnNames.progression
+      ], u = k.value.head.map((c, b) => {
+        const D = z({
+          p: e.value.style.chart.labels.prefix,
+          v: k.value.body[b].start,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        }), V = z({
+          p: e.value.style.chart.labels.prefix,
+          v: k.value.body[b].end,
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        }), be = z({
+          v: 100 * (k.value.body[b].end / k.value.body[b].start - 1),
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        });
+        return [
+          { name: c.name },
+          D,
+          V,
+          be
+        ];
+      }), 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: u,
+        config: t
+      };
+    });
+    function q() {
+      _e(() => {
+        const l = k.value.head.map((s, c) => [[
+          s.name
+        ], [k.value.body[c].start], [k.value.body[c].end]]), u = [[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(l), t = Le(u);
+        ze({ csvContent: t, title: e.value.style.chart.title.text || "vue-ui-dumbbell" });
+      });
+    }
+    const A = f(!1);
+    function he(l) {
+      A.value = l, E.value += 1;
+    }
+    function ye() {
+      return h.value;
+    }
+    function Y() {
+      T.value.showTable = !T.value.showTable;
+    }
+    return ne({
+      getData: ye,
+      generatePdf: R,
+      generateCsv: q,
+      generateImage: B,
+      toggleTable: Y
+    }), (l, u) => (o(), r("div", {
+      ref_key: "dumbbellChart",
+      ref: S,
+      class: J(`vue-ui-dumbbell ${A.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: F(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      id: `dumbbell_${d.value}`
+    }, [
+      e.value.style.chart.title.text ? (o(), r("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: W,
+        style: F(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:24px`)
+      }, [
+        K(Se, {
+          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"])
+      ], 4)) : g("", !0),
+      e.value.userOptions.show && X.value ? (o(), I(Te, {
+        ref: "details",
+        key: `user_option_${E.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: y(ie),
+        isImaging: y(ce),
+        uid: d.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: A.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: S.value,
+        onToggleFullscreen: he,
+        onGeneratePdf: y(R),
+        onGenerateCsv: q,
+        onGenerateImage: y(B),
+        onToggleTable: Y
+      }, ge({ _: 2 }, [
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: _(() => [
+            $(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: _(() => [
+            $(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: _(() => [
+            $(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: _(() => [
+            $(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: _(({ toggleFullscreen: t, isFullscreen: s }) => [
+            $(l.$slots, "optionFullscreen", me(pe({ toggleFullscreen: t, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : g("", !0),
+      X.value ? (o(), r("svg", {
+        key: 2,
+        xmlns: y(le),
+        class: J({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
+        viewBox: `0 0 ${a.value.absoluteWidth <= 0 ? 10 : a.value.absoluteWidth} ${a.value.absoluteHeight <= 0 ? 10 : a.value.absoluteHeight}`,
+        style: F(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+      }, [
+        e.value.style.chart.grid.verticalGrid.show ? (o(), r("g", Ve, [
+          (o(!0), r(C, null, w(i.value.ticks, (t, s) => (o(), r("line", {
+            x1: a.value.left + s * a.value.width / (i.value.ticks.length - 1),
+            x2: a.value.left + s * a.value.width / (i.value.ticks.length - 1),
+            y1: a.value.top,
+            y2: a.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, Ee))), 256))
+        ])) : g("", !0),
+        e.value.style.chart.grid.horizontalGrid.show ? (o(), r("g", We, [
+          (o(!0), r(C, null, w(x.value, (t, s) => (o(), r("line", {
+            x1: a.value.left,
+            x2: a.value.right,
+            y1: a.value.top + s * v.value,
+            y2: a.value.top + s * v.value,
+            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, He))), 256)),
+          n("line", {
+            x1: a.value.left,
+            x2: a.value.right,
+            y1: a.value.bottom,
+            y2: a.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, Re)
+        ])) : g("", !0),
+        e.value.style.chart.labels.yAxisLabels.show ? (o(), r("g", Be, [
+          (o(!0), r(C, null, w(x.value, (t, s) => (o(), r("text", {
+            x: a.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
+            y: a.value.top + s * v.value + (e.value.style.chart.labels.yAxisLabels.showProgression ? v.value / 3 : v.value / 2) + 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"
+          }, L(t.name), 9, Ue))), 256)),
+          e.value.style.chart.labels.yAxisLabels.showProgression ? (o(!0), r(C, { key: 0 }, w(x.value, (t, s) => (o(), r("text", {
+            x: a.value.left - 6 + e.value.style.chart.labels.yAxisLabels.offsetX,
+            y: a.value.top + s * v.value + v.value / 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"
+          }, L(y(z)({
+            v: 100 * (t.end / t.start - 1),
+            s: "%",
+            r: e.value.style.chart.labels.yAxisLabels.rounding
+          })), 9, je))), 256)) : g("", !0)
+        ])) : g("", !0),
+        e.value.style.chart.labels.xAxisLabels.show ? (o(), r("g", qe, [
+          (o(!0), r(C, null, w(i.value.ticks, (t, s) => (o(), r("text", {
+            x: a.value.left + s * (a.value.width / (i.value.ticks.length - 1)),
+            y: a.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize + e.value.style.chart.labels.xAxisLabels.offsetY,
+            "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": "middle"
+          }, L(y(z)({
+            p: e.value.style.chart.labels.prefix,
+            v: t,
+            s: e.value.style.chart.labels.suffix,
+            r: e.value.style.chart.labels.xAxisLabels.rounding
+          })), 9, Ye))), 256))
+        ])) : g("", !0),
+        n("defs", null, [
+          n("radialGradient", {
+            id: `start_grad_${d.value}`,
+            fy: "30%"
+          }, [
+            n("stop", {
+              offset: "10%",
+              "stop-color": y(ae)(e.value.style.chart.plots.startColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, Je),
+            n("stop", {
+              offset: "90%",
+              "stop-color": y(se)(e.value.style.chart.plots.startColor, 0.1)
+            }, null, 8, Ke),
+            n("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.startColor
+            }, null, 8, Qe)
+          ], 8, Ze),
+          n("radialGradient", {
+            id: `end_grad_${d.value}`,
+            fy: "30%"
+          }, [
+            n("stop", {
+              offset: "10%",
+              "stop-color": y(ae)(e.value.style.chart.plots.endColor, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, tt),
+            n("stop", {
+              offset: "90%",
+              "stop-color": y(se)(e.value.style.chart.plots.endColor, 0.1)
+            }, null, 8, lt),
+            n("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.chart.plots.endColor
+            }, null, 8, at)
+          ], 8, et)
+        ]),
+        (o(!0), r(C, null, w(h.value, (t, s) => (o(), r("g", null, [
+          n("defs", null, [
+            n("linearGradient", {
+              id: `grad_positive_${d.value}`,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%"
+            }, [
+              n("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, ot),
+              n("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, rt)
+            ], 8, st),
+            n("linearGradient", {
+              id: `grad_negative_${d.value}`,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%"
+            }, [
+              n("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.chart.plots.endColor
+              }, null, 8, ut),
+              n("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.plots.startColor
+              }, null, 8, it)
+            ], 8, nt)
+          ]),
+          e.value.style.chart.plots.link.type === "curved" ? (o(), r("g", ct, [
+            n("path", {
+              d: `M 
+                            ${t.startX},${t.y + e.value.style.chart.plots.radius / 2} 
+                            C ${t.centerX},${t.y} ${t.centerX},${t.y} 
+                            ${t.endX},${t.y + e.value.style.chart.plots.radius / 2}
+                            L ${t.endX},${t.y - e.value.style.chart.plots.radius / 2}
+                            C ${t.centerX},${t.y} ${t.centerX},${t.y}
+                            ${t.startX},${t.y - e.value.style.chart.plots.radius / 2}
+                            Z
+                        `,
+              fill: t.endX > t.startX ? `url(#grad_positive_${d.value})` : `url(#grad_negative_${d.value})`
+            }, null, 8, dt)
+          ])) : (o(), r("g", vt, [
+            n("rect", {
+              x: t.endX > t.startX ? t.startX : t.endX,
+              y: t.y - e.value.style.chart.plots.link.strokeWidth / 2,
+              height: e.value.style.chart.plots.link.strokeWidth,
+              width: Math.abs(t.endX - t.startX),
+              fill: t.endX > t.startX ? `url(#grad_positive_${d.value})` : `url(#grad_negative_${d.value})`
+            }, null, 8, ht)
+          ])),
+          n("circle", {
+            cx: t.startX,
+            cy: t.y,
+            r: e.value.style.chart.plots.radius,
+            fill: e.value.style.chart.plots.gradient.show ? `url(#start_grad_${d.value})` : e.value.style.chart.plots.startColor,
+            stroke: e.value.style.chart.plots.stroke,
+            "stroke-width": e.value.style.chart.plots.strokeWidth
+          }, null, 8, yt),
+          n("circle", {
+            cx: t.endX,
+            cy: t.y,
+            r: e.value.style.chart.plots.radius,
+            fill: e.value.style.chart.plots.gradient.show ? `url(#end_grad_${d.value})` : e.value.style.chart.plots.endColor,
+            stroke: e.value.style.chart.plots.stroke,
+            "stroke-width": e.value.style.chart.plots.strokeWidth
+          }, null, 8, bt),
+          e.value.style.chart.labels.startLabels.show ? (o(), r("g", ft, [
+            (o(!0), r(C, null, w(h.value, (c, b) => (o(), r("text", {
+              x: c.startX,
+              y: a.value.top + (b + 1) * v.value - e.value.style.chart.labels.startLabels.fontSize / 3 + e.value.style.chart.labels.startLabels.offsetY,
+              fill: 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"
+            }, L(y(z)({
+              p: e.value.style.chart.labels.prefix,
+              v: c.start,
+              s: e.value.style.chart.labels.suffix,
+              r: e.value.style.chart.labels.startLabels.rounding
+            })), 9, gt))), 256))
+          ])) : g("", !0),
+          e.value.style.chart.labels.endLabels.show ? (o(), r("g", mt, [
+            (o(!0), r(C, null, w(h.value, (c, b) => (o(), r("text", {
+              x: c.endX,
+              y: a.value.top + b * v.value + e.value.style.chart.labels.endLabels.fontSize + e.value.style.chart.labels.endLabels.offsetY,
+              fill: 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"
+            }, L(y(z)({
+              p: e.value.style.chart.labels.prefix,
+              v: c.end,
+              s: e.value.style.chart.labels.suffix,
+              r: e.value.style.chart.labels.endLabels.rounding
+            })), 9, pt))), 256))
+          ])) : g("", !0)
+        ]))), 256)),
+        $(l.$slots, "svg", { svg: a.value }, void 0, !0)
+      ], 14, Oe)) : g("", !0),
+      X.value ? g("", !0) : (o(), I(Ge, {
+        key: 3,
+        config: {
+          type: "dumbbell",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            dumbbell: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      n("div", {
+        ref_key: "chartLegend",
+        ref: H
+      }, [
+        e.value.style.chart.legend.show && X.value ? (o(), I(Me, {
+          key: 0,
+          legendSet: j.value,
+          config: ve.value
+        }, {
+          item: _(({ legend: t }) => [
+            n("div", {
+              style: F(`display:flex;align-items:center;gap:4px;font-size:${e.value.style.chart.legend.fontSize}px`)
+            }, [
+              (o(), r("svg", {
+                xmlns: y(le),
+                viewBox: "0 0 20 20",
+                height: e.value.style.chart.legend.fontSize,
+                width: e.value.style.chart.legend.fontSize
+              }, [
+                n("circle", {
+                  cx: 10,
+                  cy: 10,
+                  r: 9,
+                  fill: t.color
+                }, null, 8, xt)
+              ], 8, _t)),
+              Q(" " + L(t.name), 1)
+            ], 4)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : $(l.$slots, "legend", {
+          key: 1,
+          legend: j.value
+        }, void 0, !0)
+      ], 512),
+      X.value ? (o(), I(De, {
+        key: 4,
+        hideDetails: "",
+        config: {
+          open: T.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: _(() => [
+          K(Pe, {
+            colNames: M.value.colNames,
+            head: M.value.head,
+            body: M.value.body,
+            config: M.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: u[0] || (u[0] = (t) => T.value.showTable = !1)
+          }, {
+            th: _(({ th: t }) => [
+              n("div", {
+                innerHTML: t,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, kt)
+            ]),
+            td: _(({ td: t }) => [
+              Q(L(t.name || t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : g("", !0)
+    ], 14, Ie));
+  }
+}, Dt = /* @__PURE__ */ Fe(Ct, [["__scopeId", "data-v-576f289b"]]);
+export {
+  Dt as default
+};