vue-data-ui 2.3.30 → 2.3.32

package/dist/vue-ui-stackbar-B0dWToaf.js

@@ -1,765 +0,0 @@
-import { computed as y, ref as h, onMounted as xe, openBlock as u, createElementBlock as n, normalizeClass as ke, normalizeStyle as A, renderSlot as p, createVNode as Z, createCommentVNode as d, createBlock as H, unref as w, createSlots as Ae, withCtx as m, normalizeProps as M, guardReactiveProps as O, Fragment as x, renderList as $, createElementVNode as R, toDisplayString as z, createTextVNode as He } from "vue";
-import { u as Ee, c as we, o as Be, e as Ce, g as Ue, t as We, a as Ge, p as G, b as Xe, d as Ye, _ as Je, A as j, X as qe, l as Ke, D as Qe, f as V, v as Ze, w as $e, i as Le, x as je, q as et, r as tt } from "./index-BlXzlBwZ.js";
-import { u as _e } from "./useNestedProp-BoNl5H_z.js";
-import { t as at, u as lt } from "./useResponsive-NZB-WLRF.js";
-import { u as ot, U as rt } from "./usePrinter-CZ8F5Cth.js";
-import { S as st } from "./Slicer-DaEfxscP.js";
-import { _ as ut } from "./Tooltip-B11OahTD.js";
-import { _ as it } from "./Title-eBTH8iGJ.js";
-import { L as nt } from "./Legend-CkQ_zypV.js";
-import ct from "./vue-ui-accordion-wHRG3nXl.js";
-import { D as vt } from "./DataTable-CsPidn0_.js";
-import dt from "./vue-ui-skeleton-CJ2R5R6u.js";
-import { _ as ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const gt = ["id"], yt = ["xmlns", "viewBox"], bt = { key: 0 }, ft = ["id"], pt = ["stop-color"], mt = ["stop-color"], xt = ["stop-color"], kt = ["x1", "x2", "y1", "y2", "stroke"], wt = ["x1", "x2", "y1", "y2", "stroke"], Ct = ["d", "fill", "stroke", "stroke-width"], $t = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Lt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _t = ["x", "y", "font-size", "fill", "font-weight"], St = ["transform", "font-size", "fill", "font-weight"], Tt = ["x", "y", "font-size", "fill", "font-weight"], zt = { key: 0 }, Nt = ["x", "y", "font-size", "font-weight", "fill"], Rt = ["x1", "x2", "y1", "y2", "stroke"], Pt = ["x", "y", "font-size", "font-weight", "fill"], Ft = ["text-anchor", "font-size", "font-weight", "fill", "transform"], Mt = ["x", "y", "width", "height", "onClick", "onMouseenter", "fill"], Ot = {
-  key: 3,
-  class: "vue-data-ui-watermark"
-}, Vt = ["onClick"], Dt = ["innerHTML"], It = {
-  __name: "vue-ui-stackbar",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectDatapoint", "selectLegend"],
-  setup(ee, { expose: Se, emit: te }) {
-    const _ = ee, { vue_ui_stackbar: Te } = Ee(), P = y({
-      get() {
-        return !!_.dataset && _.dataset.length;
-      },
-      set(a) {
-        return a;
-      }
-    }), D = h(null), X = h(we()), Y = h(!1), ae = h(null), J = h(""), L = h([]), le = h(0), oe = h(null), re = h(null), se = h(null), ue = h(0), q = h(!1), K = h(null);
-    xe(() => {
-      Be(_.dataset) ? Ce({
-        componentName: "VueUiStackbar",
-        type: "dataset"
-      }) : _.dataset.forEach((a, l) => {
-        Ue({
-          datasetObject: a,
-          requiredAttributes: ["name", "series"]
-        }).forEach((t) => {
-          P.value = !1, Ce({
-            componentName: "VueUiStackbar",
-            type: "datasetSerieAttribute",
-            property: t,
-            index: l
-          });
-        });
-      });
-    });
-    const e = y(() => {
-      const a = _e({
-        userConfig: _.config,
-        defaultConfig: Te
-      });
-      return a.theme ? {
-        ..._e({
-          userConfig: We.vue_ui_stackbar[a.theme] || _.config,
-          defaultConfig: a
-        }),
-        customPalette: Ge[a.theme] || G
-      } : a;
-    }), C = h({
-      dataLabels: {
-        show: e.value.style.chart.bars.dataLabels.show
-      },
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    }), { isPrinting: ie, isImaging: ne, generatePdf: ce, generateImage: ve } = ot({
-      elementId: `stackbar_${X.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-stackbar"
-    }), E = h({
-      width: e.value.style.chart.width,
-      height: e.value.style.chart.height,
-      paddingRatio: {
-        top: e.value.style.chart.padding.top / e.value.style.chart.height,
-        right: e.value.style.chart.padding.right / e.value.style.chart.width,
-        bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
-        left: e.value.style.chart.padding.left / e.value.style.chart.width
-      }
-    }), ze = y(() => Xe(e.value.customPalette)), de = h(null);
-    xe(() => {
-      if (e.value.responsive) {
-        const a = at(() => {
-          const { width: l, height: t } = lt({
-            chart: D.value,
-            title: e.value.style.chart.title.text ? oe.value : null,
-            legend: e.value.style.chart.legend.show ? re.value : null,
-            slicer: e.value.style.chart.zoom.show && B.value > 1 ? se.value : null
-          });
-          E.value.width = l, E.value.height = t;
-        });
-        de.value = new ResizeObserver(a), de.value.observe(D.value.parentNode);
-      }
-    });
-    const s = y(() => {
-      const { height: a, width: l } = E.value, { right: t } = E.value.paddingRatio, o = e.value.style.chart.padding.top, r = l - l * t, i = a - e.value.style.chart.padding.bottom, g = e.value.style.chart.padding.left, f = l - g - l * t, k = a - o - e.value.style.chart.padding.bottom;
-      return {
-        chartHeight: a,
-        chartWidth: l,
-        top: o,
-        right: r,
-        bottom: i,
-        left: g,
-        width: f,
-        height: k
-      };
-    }), F = y(() => _.dataset.map((a, l) => {
-      const t = Ye(a.color) || ze.value[l] || G[l] || G[l % G.length];
-      return {
-        ...a,
-        absoluteIndex: l,
-        id: we(),
-        color: t
-      };
-    })), B = y(() => Math.max(...F.value.filter((a) => !L.value.includes(a.id)).map((a) => a.series.length))), c = h({
-      start: 0,
-      end: Math.max(..._.dataset.map((a) => a.series.length))
-    });
-    function Ne() {
-      c.value = {
-        start: 0,
-        end: Math.max(..._.dataset.map((a) => a.series.length))
-      }, ue.value += 1;
-    }
-    const b = y(() => {
-      const a = s.value.width / (c.value.end - c.value.start);
-      return a <= 0 ? 0 : a;
-    }), N = y(() => Je(F.value.filter((a) => !L.value.includes(a.id))).slice(c.value.start, c.value.end)), Q = y(() => {
-      const a = Math.max(...N.value), l = j(0, a, e.value.style.chart.grid.scale.ticks);
-      return l.ticks.map((t) => ({
-        y: s.value.bottom - s.value.height * (t / l.max),
-        x: s.value.left - 8,
-        value: t
-      }));
-    }), U = y(() => e.value.style.chart.grid.x.timeLabels.values.slice(c.value.start, c.value.end)), v = y(() => {
-      if (!P.value) return [];
-      let a = Array(B.value).fill(0);
-      const l = s.value.height, t = Math.max(...N.value), r = j(0, t, e.value.style.chart.grid.scale.ticks).max;
-      return F.value.filter((i) => !L.value.includes(i.id)).map((i) => {
-        const g = i.series.slice(c.value.start, c.value.end);
-        return {
-          ...i,
-          proportions: g.map((f, k) => e.value.style.chart.bars.distributed ? (f || 0) / N.value[k] : (f || 0) / r),
-          series: g,
-          x: g.map((f, k) => s.value.left + b.value * k + b.value * e.value.style.chart.bars.gapRatio / 4),
-          y: g.map((f, k) => {
-            const S = e.value.style.chart.bars.distributed ? (f || 0) / N.value[k] : (f || 0) / r, I = l * S, T = l - I - a[k];
-            return a[k] += I, T + s.value.top;
-          }),
-          height: g.map((f, k) => {
-            const S = e.value.style.chart.bars.distributed ? (f || 0) / N.value[k] : (f || 0) / r;
-            return l * S <= 0 ? 0 : l * S;
-          })
-        };
-      });
-    }), Re = y(() => {
-      const a = Math.max(...N.value), t = j(0, a, e.value.style.chart.grid.scale.ticks).max;
-      return N.value.map((o, r) => ({
-        value: o,
-        y: (1 - o / t) * s.value.height
-      }));
-    });
-    function he(a, l, t, o) {
-      return Le(
-        e.value.style.chart.bars.dataLabels.formatter,
-        a,
-        V({
-          p: e.value.style.chart.bars.dataLabels.prefix,
-          v: a,
-          s: e.value.style.chart.bars.dataLabels.suffix,
-          r: e.value.style.chart.bars.dataLabels.rounding
-        }),
-        { datapoint: l, seriesIndex: t, datapointIndex: o }
-      );
-    }
-    function Pe(a, l, t, o) {
-      return Le(
-        e.value.style.chart.bars.dataLabels.formatter,
-        a,
-        V({
-          v: a,
-          s: "%",
-          r: e.value.style.chart.bars.dataLabels.rounding
-        }),
-        { datapoint: l, seriesIndex: t, datapointIndex: o }
-      );
-    }
-    function Fe(a) {
-      const l = JSON.parse(JSON.stringify(v.value)).map((t) => ({
-        name: t.name,
-        value: t.series[a] === 0 ? 0 : t.series[a] || null,
-        proportion: t.proportions[a] || null,
-        color: t.color,
-        id: t.id
-      }));
-      te("selectDatapoint", { datapoint: l, period: U.value[a] });
-    }
-    function Me(a) {
-      K.value = a, Y.value = !0;
-      const l = e.value.style.chart.tooltip.customFormat, t = JSON.parse(JSON.stringify(v.value)).map((r) => ({
-        name: r.name,
-        value: r.series[a] === 0 ? 0 : r.series[a] || null,
-        proportion: r.proportions[a] || null,
-        color: r.color,
-        id: r.id
-      })), o = t.map((r) => r.value).reduce((r, i) => r + i, 0);
-      if ($e(l) && je(() => l({
-        seriesIndex: a,
-        datapoint: t,
-        series: v.value,
-        config: e.value
-      })))
-        J.value = l({
-          seriesIndex: a,
-          datapoint: t,
-          series: v.value,
-          config: e.value
-        });
-      else {
-        const {
-          showValue: r,
-          showPercentage: i,
-          borderColor: g,
-          roundingValue: f,
-          roundingPercentage: k
-        } = e.value.style.chart.tooltip;
-        let S = "";
-        U.value[a] && (S += `<div style="width:100%;text-align:center;border-bottom:1px solid ${g};padding-bottom:6px;margin-bottom:3px;">${U.value[a]}</div>`);
-        const I = [
-          r && i ? "(" : "",
-          r && i ? ")" : ""
-        ];
-        t.reverse().forEach((T) => {
-          S += `
-                <div style="display:flex;flex-direction:row;align-items:center;gap:4px">
-                    <svg viewBox="0 0 12 12" height="14" width="14"><rect rx="1" x="0" y="0" height="12" width="12" stroke="none" fill="${e.value.style.chart.bars.gradient.show ? `url(#gradient_${T.id})` : T.color}"/></svg>
-                    ${T.name}${r || i ? ":" : ""} ${r ? V({
-            p: e.value.style.chart.bars.dataLabels.prefix,
-            v: T.value,
-            s: e.value.style.chart.bars.dataLabels.suffix,
-            r: f
-          }) : ""} ${I[0]}${i ? V({
-            v: isNaN(T.value / o) ? 0 : T.value / o * 100,
-            s: "%",
-            r: k
-          }) : ""}${I[1]}
-                </div>
-            `;
-        }), J.value = `<div>${S}</div>`;
-      }
-    }
-    function Oe(a) {
-      q.value = a, le.value += 1;
-    }
-    function ge() {
-      C.value.showTable = !C.value.showTable;
-    }
-    function ye() {
-      C.value.dataLabels.show = !C.value.dataLabels.show;
-    }
-    function be() {
-      C.value.showTooltip = !C.value.showTooltip;
-    }
-    function Ve() {
-      return v.value;
-    }
-    const fe = y(() => {
-      if (v.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
-      const a = v.value.map(({ name: t, color: o }) => ({
-        label: t,
-        color: o
-      })), l = [];
-      for (let t = c.value.start; t < c.value.end; t += 1) {
-        const o = [e.value.style.chart.grid.x.timeLabels.values[t] || t + 1];
-        F.value.forEach((r) => {
-          o.push(Number((r.series[t] || 0).toFixed(e.value.table.td.roundingValue)));
-        }), l.push(o);
-      }
-      return { head: a, body: l };
-    });
-    function pe() {
-      const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = ["", ...fe.value.head.map((i) => i.label)], t = fe.value.body, o = a.concat([l]).concat(t), r = et(o);
-      tt({ csvContent: r, title: e.value.style.chart.title.text || "vue-ui-stackbar" });
-    }
-    const W = y(() => {
-      const a = [""].concat(v.value.map((r) => r.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
-      let l = [];
-      for (let r = 0; r < B.value; r += 1) {
-        const i = v.value.map((g) => g.series[r] ?? 0).reduce((g, f) => g + f, 0);
-        l.push([e.value.style.chart.grid.x.timeLabels.values.slice(c.value.start, c.value.end)[r] ?? r + 1].concat(v.value.map((g) => (g.series[r] ?? 0).toFixed(e.value.table.td.roundingValue))).concat((i ?? 0).toFixed(e.value.table.td.roundingValue)));
-      }
-      const 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
-      }, o = [e.value.table.columnNames.period].concat(v.value.map((r) => r.name)).concat(e.value.table.columnNames.total);
-      return { head: a, body: l.slice(0, c.value.end - c.value.start), config: t, colNames: o };
-    });
-    function De(a, l) {
-      if (te("selectLegend", v.value.find((t) => t.absoluteIndex === a)), L.value.includes(l.id))
-        L.value = L.value.filter((t) => t !== l.id);
-      else {
-        if (L.value.length === F.value.length - 1) return;
-        L.value.push(l.id);
-      }
-    }
-    const me = y(() => F.value.map((a, l) => ({
-      ...a,
-      shape: "square"
-    })).map((a) => ({
-      ...a,
-      opacity: L.value.includes(a.id) ? 0.5 : 1,
-      segregate: () => De(a.absoluteIndex, a),
-      isSegregated: L.value.includes(a.id)
-    }))), Ie = y(() => ({
-      cy: "stackbar-legend",
-      backgroundColor: e.value.style.chart.legend.backgroundColor,
-      color: e.value.style.chart.legend.color,
-      fontSize: e.value.style.chart.legend.fontSize,
-      paddingBottom: 12,
-      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    }));
-    return Se({
-      getData: Ve,
-      generatePdf: ce,
-      generateCsv: pe,
-      generateImage: ve,
-      toggleTable: ge,
-      toggleLabels: ye,
-      toggleTooltip: be
-    }), (a, l) => (u(), n("div", {
-      id: `stackbar_${X.value}`,
-      ref_key: "stackbarChart",
-      ref: D,
-      class: ke({ "vue-ui-stackbar": !0, "vue-data-ui-wrapper-fullscreen": q.value }),
-      style: A(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`)
-    }, [
-      p(a.$slots, "userConfig", {}, void 0, !0),
-      e.value.style.chart.title.text ? (u(), n("div", {
-        key: 0,
-        ref_key: "chartTitle",
-        ref: oe,
-        style: A(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:24px`)
-      }, [
-        Z(it, {
-          config: {
-            title: {
-              cy: "stackbar-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "stackbar-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"])
-      ], 4)) : d("", !0),
-      e.value.userOptions.show && P.value ? (u(), H(rt, {
-        ref: "details",
-        key: `user_option_${le.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: w(ie),
-        isImaging: w(ne),
-        uid: X.value,
-        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
-        hasPdf: e.value.userOptions.buttons.pdf,
-        hasImg: e.value.userOptions.buttons.img,
-        hasXls: e.value.userOptions.buttons.csv,
-        hasTable: e.value.userOptions.buttons.table,
-        hasLabel: e.value.userOptions.buttons.labels,
-        hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: q.value,
-        chartElement: D.value,
-        isTooltip: C.value.showTooltip,
-        titles: { ...e.value.userOptions.buttonTitles },
-        onToggleFullscreen: Oe,
-        onGeneratePdf: w(ce),
-        onGenerateCsv: pe,
-        onGenerateImage: w(ve),
-        onToggleTable: ge,
-        onToggleLabels: ye,
-        onToggleTooltip: be
-      }, Ae({ _: 2 }, [
-        a.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: m(() => [
-            p(a.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        a.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: m(() => [
-            p(a.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        a.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: m(() => [
-            p(a.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        a.$slots.optionImg ? {
-          name: "optionImg",
-          fn: m(() => [
-            p(a.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        a.$slots.optionTable ? {
-          name: "optionTable",
-          fn: m(() => [
-            p(a.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        a.$slots.optionLabels ? {
-          name: "optionLabels",
-          fn: m(() => [
-            p(a.$slots, "optionLabels", {}, void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        a.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: m(({ toggleFullscreen: t, isFullscreen: o }) => [
-            p(a.$slots, "optionFullscreen", M(O({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
-          ]),
-          key: "6"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "chartElement", "isTooltip", "titles", "onGeneratePdf", "onGenerateImage"])) : d("", !0),
-      P.value ? (u(), n("svg", {
-        key: 2,
-        xmlns: w(qe),
-        viewBox: `0 0 ${s.value.chartWidth <= 0 ? 10 : s.value.chartWidth} ${s.value.chartHeight <= 0 ? 10 : s.value.chartHeight}`,
-        style: A(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
-      }, [
-        e.value.style.chart.bars.gradient.show ? (u(), n("defs", bt, [
-          (u(!0), n(x, null, $(v.value, (t, o) => (u(), n("linearGradient", {
-            id: `gradient_${t.id}`,
-            x1: "0%",
-            y1: "0%",
-            x2: "0%",
-            y2: "100%"
-          }, [
-            R("stop", {
-              offset: "0%",
-              "stop-color": t.color
-            }, null, 8, pt),
-            R("stop", {
-              offset: "61.8%",
-              "stop-color": w(Ke)(t.color, e.value.style.chart.bars.gradient.intensity / 100)
-            }, null, 8, mt),
-            R("stop", {
-              offset: "100%",
-              "stop-color": t.color
-            }, null, 8, xt)
-          ], 8, ft))), 256))
-        ])) : d("", !0),
-        e.value.style.chart.grid.x.showHorizontalLines ? (u(!0), n(x, { key: 1 }, $(Q.value, (t, o) => (u(), n("line", {
-          x1: s.value.left,
-          x2: s.value.right,
-          y1: t.y,
-          y2: t.y,
-          stroke: e.value.style.chart.grid.x.axisColor,
-          "stroke-width": 1
-        }, null, 8, kt))), 256)) : d("", !0),
-        e.value.style.chart.grid.y.showVerticalLines ? (u(!0), n(x, { key: 2 }, $(c.value.end - c.value.start + 1, (t, o) => (u(), n("line", {
-          x1: s.value.left + b.value * o,
-          x2: s.value.left + b.value * o,
-          y1: s.value.top,
-          y2: s.value.bottom,
-          stroke: e.value.style.chart.grid.y.axisColor,
-          "stroke-width": 1
-        }, null, 8, wt))), 256)) : d("", !0),
-        (u(!0), n(x, null, $(v.value, (t, o) => (u(), n("g", null, [
-          (u(!0), n(x, null, $(t.x, (r, i) => (u(), n("path", {
-            d: o === v.value.length - 1 && v.value.at(-1).series[i] || !v.value.at(-1).series[i] && o < v.value.length - 1 && v.value[o].series[i] && !v.value[o + 1].series[i] ? `M ${r},${t.y[i]} 
-                            h ${b.value * (1 - e.value.style.chart.bars.gapRatio / 2) - e.value.style.chart.bars.borderRadius} 
-                            a ${e.value.style.chart.bars.borderRadius},${e.value.style.chart.bars.borderRadius} 0 0 1 ${e.value.style.chart.bars.borderRadius},${e.value.style.chart.bars.borderRadius} 
-                            v ${t.height[i] - e.value.style.chart.bars.borderRadius < 0 ? 0 : t.height[i] - e.value.style.chart.bars.borderRadius} 
-                            h -${b.value * (1 - e.value.style.chart.bars.gapRatio / 2)} 
-                            v -${t.height[i] - e.value.style.chart.bars.borderRadius < 0 ? 0 : t.height[i] - e.value.style.chart.bars.borderRadius} 
-                            a ${e.value.style.chart.bars.borderRadius},${e.value.style.chart.bars.borderRadius} 0 0 1 ${e.value.style.chart.bars.borderRadius},-${e.value.style.chart.bars.borderRadius} z` : `M ${r},${t.y[i]} 
-                            h ${b.value * (1 - e.value.style.chart.bars.gapRatio / 2)} 
-                            v ${t.height[i] < 0 ? 0 : t.height[i]} 
-                            h -${b.value * (1 - e.value.style.chart.bars.gapRatio / 2)} z`,
-            fill: e.value.style.chart.bars.gradient.show ? `url(#gradient_${t.id})` : t.color,
-            stroke: e.value.style.chart.backgroundColor,
-            "stroke-width": e.value.style.chart.bars.strokeWidth,
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            class: ke({ "vue-data-ui-bar-animated": e.value.useCssAnimation })
-          }, null, 10, Ct))), 256))
-        ]))), 256)),
-        e.value.style.chart.grid.x.showAxis ? (u(), n("line", {
-          key: 3,
-          x1: s.value.left,
-          x2: s.value.right,
-          y1: s.value.bottom,
-          y2: s.value.bottom,
-          stroke: e.value.style.chart.grid.x.axisColor,
-          "stroke-width": e.value.style.chart.grid.x.axisThickness,
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
-        }, null, 8, $t)) : d("", !0),
-        e.value.style.chart.grid.y.showAxis && !e.value.style.chart.bars.distributed ? (u(), n("line", {
-          key: 4,
-          x1: s.value.left,
-          x2: s.value.left,
-          y1: s.value.top,
-          y2: s.value.bottom,
-          stroke: e.value.style.chart.grid.y.axisColor,
-          "stroke-width": e.value.style.chart.grid.y.axisThickness,
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
-        }, null, 8, Lt)) : d("", !0),
-        e.value.style.chart.grid.x.axisName.show && e.value.style.chart.grid.x.axisName.text ? (u(), n("text", {
-          key: 5,
-          x: s.value.left + s.value.width / 2,
-          y: s.value.chartHeight + e.value.style.chart.grid.x.axisName.offsetY,
-          "font-size": e.value.style.chart.grid.x.axisName.fontSize,
-          fill: e.value.style.chart.grid.x.axisName.color,
-          "font-weight": e.value.style.chart.grid.x.axisName.bold ? "bold" : "normal",
-          "text-anchor": "middle"
-        }, z(e.value.style.chart.grid.x.axisName.text), 9, _t)) : d("", !0),
-        e.value.style.chart.grid.y.axisName.show && e.value.style.chart.grid.y.axisName.text ? (u(), n("text", {
-          key: 6,
-          transform: `translate(${e.value.style.chart.grid.y.axisName.fontSize + e.value.style.chart.grid.y.axisName.offsetX}, ${s.value.top + s.value.height / 2}) rotate(-90)`,
-          "font-size": e.value.style.chart.grid.y.axisName.fontSize,
-          fill: e.value.style.chart.grid.y.axisName.color,
-          "font-weight": e.value.style.chart.grid.y.axisName.bold ? "bold" : "normal",
-          "text-anchor": "middle"
-        }, z(e.value.style.chart.grid.y.axisName.text), 9, St)) : d("", !0),
-        C.value.dataLabels.show ? (u(), n(x, { key: 7 }, [
-          (u(!0), n(x, null, $(v.value, (t, o) => (u(), n("g", null, [
-            (u(!0), n(x, null, $(t.x, (r, i) => (u(), n("text", {
-              x: r + b.value * (1 - e.value.style.chart.bars.gapRatio / 2) / 2,
-              y: t.y[i] + t.proportions[i] * s.value.height / 2 + e.value.style.chart.bars.dataLabels.fontSize / 3,
-              "font-size": e.value.style.chart.bars.dataLabels.fontSize,
-              fill: e.value.style.chart.bars.dataLabels.adaptColorToBackground ? w(Qe)(t.color) : e.value.style.chart.bars.dataLabels.color,
-              "font-weight": e.value.style.chart.bars.dataLabels.bold ? "bold" : "normal",
-              "text-anchor": "middle"
-            }, z(e.value.style.chart.bars.showDistributedPercentage && e.value.style.chart.bars.distributed ? Pe(t.proportions[i] * 100, t, o, i) : he(t.series[i], t, o, i)), 9, Tt))), 256))
-          ]))), 256)),
-          e.value.style.chart.bars.totalValues.show && v.value.length > 1 ? (u(), n("g", zt, [
-            (u(!0), n(x, null, $(Re.value, (t, o) => (u(), n("text", {
-              x: s.value.left + b.value * o + b.value / 2,
-              y: (e.value.style.chart.bars.distributed ? s.value.top - e.value.style.chart.bars.totalValues.fontSize / 3 : t.y) + e.value.style.chart.bars.totalValues.offsetY,
-              "text-anchor": "middle",
-              "font-size": e.value.style.chart.bars.totalValues.fontSize,
-              "font-weight": e.value.style.chart.bars.totalValues.bold ? "bold" : "normal",
-              fill: e.value.style.chart.bars.totalValues.color
-            }, z(he(t.value, t, o)), 9, Nt))), 256))
-          ])) : d("", !0)
-        ], 64)) : d("", !0),
-        e.value.style.chart.grid.y.axisLabels.show && !e.value.style.chart.bars.distributed ? (u(), n(x, { key: 8 }, [
-          (u(!0), n(x, null, $(Q.value, (t, o) => (u(), n("line", {
-            x1: s.value.left,
-            x2: s.value.left - 6,
-            y1: t.y,
-            y2: t.y,
-            stroke: e.value.style.chart.grid.x.axisColor,
-            "stroke-width": 1
-          }, null, 8, Rt))), 256)),
-          (u(!0), n(x, null, $(Q.value, (t, o) => (u(), n("text", {
-            x: t.x,
-            y: t.y + e.value.style.chart.grid.y.axisLabels.fontSize / 3,
-            "font-size": e.value.style.chart.grid.y.axisLabels.fontSize,
-            "font-weight": e.value.style.chart.grid.y.axisLabels.bold ? "bold" : "normal",
-            fill: e.value.style.chart.grid.y.axisLabels.color,
-            "text-anchor": "end"
-          }, z(w(V)({
-            p: e.value.style.chart.bars.dataLabels.prefix,
-            v: t.value,
-            s: e.value.style.chart.bars.dataLabels.suffix,
-            r: e.value.style.chart.grid.y.axisLabels.rounding
-          })), 9, Pt))), 256))
-        ], 64)) : d("", !0),
-        e.value.style.chart.grid.x.timeLabels.show ? (u(!0), n(x, { key: 9 }, $(U.value, (t, o) => (u(), n("text", {
-          "text-anchor": e.value.style.chart.grid.x.timeLabels.rotation > 0 ? "start" : e.value.style.chart.grid.x.timeLabels.rotation < 0 ? "end" : "middle",
-          "font-size": e.value.style.chart.grid.x.timeLabels.fontSize,
-          "font-weight": e.value.style.chart.grid.x.timeLabels.bold ? "bold" : "normal",
-          fill: e.value.style.chart.grid.x.timeLabels.color,
-          transform: `translate(${s.value.left + b.value * o + b.value / 2}, ${s.value.bottom + e.value.style.chart.grid.x.timeLabels.fontSize * 1.3 + e.value.style.chart.grid.x.timeLabels.offsetY}), rotate(${e.value.style.chart.grid.x.timeLabels.rotation})`
-        }, z(t), 9, Ft))), 256)) : d("", !0),
-        C.value.showTooltip ? (u(!0), n(x, { key: 10 }, $(c.value.end - c.value.start, (t, o) => (u(), n("rect", {
-          x: s.value.left + o * b.value,
-          y: s.value.top,
-          width: b.value,
-          height: s.value.height,
-          onClick: (r) => Fe(o),
-          onMouseenter: (r) => Me(o),
-          onMouseleave: l[0] || (l[0] = (r) => {
-            K.value = null, Y.value = !1;
-          }),
-          fill: o === K.value ? e.value.style.chart.highlighter.color + w(Ze)[e.value.style.chart.highlighter.opacity] : "transparent"
-        }, null, 40, Mt))), 256)) : d("", !0),
-        p(a.$slots, "svg", M(O({ ...s.value })), void 0, !0)
-      ], 12, yt)) : d("", !0),
-      a.$slots.watermark ? (u(), n("div", Ot, [
-        p(a.$slots, "watermark", M(O({ isPrinting: w(ie) || w(ne) })), void 0, !0)
-      ])) : d("", !0),
-      P.value ? d("", !0) : (u(), H(dt, {
-        key: 4,
-        config: {
-          type: "bar",
-          style: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            bar: {
-              axis: {
-                color: "#CCCCCC"
-              },
-              color: "#CCCCCC"
-            }
-          }
-        }
-      }, null, 8, ["config"])),
-      R("div", {
-        ref_key: "chartSlicer",
-        ref: se,
-        style: A(`width:100%;background:${e.value.style.chart.backgroundColor}`),
-        "data-html2canvas-ignore": ""
-      }, [
-        e.value.style.chart.zoom.show && B.value > 1 ? (u(), H(st, {
-          key: `slicer_${ue.value}`,
-          background: e.value.style.chart.zoom.color,
-          borderColor: e.value.style.chart.backgroundColor,
-          fontSize: e.value.style.chart.zoom.fontSize,
-          useResetSlot: e.value.style.chart.zoom.useResetSlot,
-          labelLeft: e.value.style.chart.grid.x.timeLabels.values[c.value.start] ? e.value.style.chart.grid.x.timeLabels.values[c.value.start] : "",
-          labelRight: e.value.style.chart.grid.x.timeLabels.values[c.value.end - 1] ? e.value.style.chart.grid.x.timeLabels.values[c.value.end - 1] : "",
-          textColor: e.value.style.chart.color,
-          inputColor: e.value.style.chart.zoom.color,
-          selectColor: e.value.style.chart.zoom.highlightColor,
-          max: Math.max(...ee.dataset.map((t) => t.series.length)),
-          min: 0,
-          valueStart: c.value.start,
-          valueEnd: c.value.end,
-          start: c.value.start,
-          "onUpdate:start": l[1] || (l[1] = (t) => c.value.start = t),
-          end: c.value.end,
-          "onUpdate:end": l[2] || (l[2] = (t) => c.value.end = t),
-          onReset: Ne
-        }, {
-          "reset-action": m(({ reset: t }) => [
-            p(a.$slots, "reset-action", M(O({ reset: t })), void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end"])) : d("", !0)
-      ], 4),
-      Z(ut, {
-        show: C.value.showTooltip && Y.value,
-        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
-        color: e.value.style.chart.tooltip.color,
-        fontSize: e.value.style.chart.tooltip.fontSize,
-        borderRadius: e.value.style.chart.tooltip.borderRadius,
-        borderColor: e.value.style.chart.tooltip.borderColor,
-        borderWidth: e.value.style.chart.tooltip.borderWidth,
-        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
-        position: e.value.style.chart.tooltip.position,
-        offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: D.value,
-        content: J.value,
-        isCustom: w($e)(e.value.style.chart.tooltip.customFormat)
-      }, {
-        "tooltip-before": m(() => [
-          p(a.$slots, "tooltip-before", M(O({ ...ae.value })), void 0, !0)
-        ]),
-        "tooltip-after": m(() => [
-          p(a.$slots, "tooltip-after", M(O({ ...ae.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      R("div", {
-        ref_key: "chartLegend",
-        ref: re
-      }, [
-        e.value.style.chart.legend.show && P.value ? (u(), H(nt, {
-          key: 0,
-          legendSet: me.value,
-          config: Ie.value,
-          onClickMarker: l[3] || (l[3] = ({ legend: t }) => t.segregate())
-        }, {
-          item: m(({ legend: t }) => [
-            R("div", {
-              onClick: (o) => t.segregate(),
-              style: A(`opacity:${L.value.includes(t.id) ? 0.5 : 1}`)
-            }, z(t.name), 13, Vt)
-          ]),
-          _: 1
-        }, 8, ["legendSet", "config"])) : p(a.$slots, "legend", {
-          key: 1,
-          legend: me.value
-        }, void 0, !0)
-      ], 512),
-      c.value.end - c.value.start < 200 ? (u(), H(ct, {
-        key: 5,
-        hideDetails: "",
-        config: {
-          open: C.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: m(() => [
-          Z(vt, {
-            colNames: W.value.colNames,
-            head: W.value.head,
-            body: W.value.body,
-            config: W.value.config,
-            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: l[4] || (l[4] = (t) => C.value.showTable = !1)
-          }, {
-            th: m(({ th: t }) => [
-              R("div", { innerHTML: t }, null, 8, Dt)
-            ]),
-            td: m(({ td: t }) => [
-              He(z(isNaN(Number(t)) ? t : w(V)({
-                p: e.value.style.chart.bars.dataLabels.prefix,
-                v: t,
-                s: e.value.style.chart.bars.dataLabels.suffix,
-                r: e.value.table.td.roundingValue
-              })), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
-        ]),
-        _: 1
-      }, 8, ["config"])) : d("", !0)
-    ], 14, gt));
-  }
-}, Zt = /* @__PURE__ */ ht(It, [["__scopeId", "data-v-63fd67c1"]]);
-export {
-  Zt as default
-};