vue-data-ui 2.3.27 → 2.3.29

package/dist/vue-ui-quick-chart-CtWhs_2c.js

@@ -0,0 +1,1374 @@
+import { ref as T, computed as G, onMounted as et, onBeforeUnmount as tt, openBlock as a, createElementBlock as l, normalizeClass as oe, normalizeStyle as F, createBlock as Ue, unref as m, createSlots as at, withCtx as Q, renderSlot as D, normalizeProps as X, guardReactiveProps as ce, createCommentVNode as x, toDisplayString as E, createElementVNode as w, Fragment as g, renderList as A, mergeProps as ze, createVNode as he, pushScopeId as lt, popScopeId as ot } from "vue";
+import { u as ut, c as it, t as nt, a as rt, p as U, b as st, d as $e, m as vt, A as De, X as dt, j as ct, k as fe, n as Ce, i as H, f as M, M as Ve, w as Se, x as Pe } from "./index-BlXzlBwZ.js";
+import { t as ht, u as ft } from "./useResponsive-NZB-WLRF.js";
+import we from "./BaseIcon-BG_bJS3R.js";
+import { _ as gt } from "./Tooltip-B11OahTD.js";
+import { u as xt, U as yt } from "./usePrinter-CZ8F5Cth.js";
+import { S as pt } from "./Slicer-DaEfxscP.js";
+import { u as qe } from "./useNestedProp-BoNl5H_z.js";
+import { _ as mt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const L = {
+  LINE: "LINE",
+  BAR: "BAR",
+  DONUT: "DONUT"
+}, kt = ["SERIE", "SERIES", "DATA", "VALUE", "VALUES", "NUM"];
+function bt({ dataset: n, barLineSwitch: z = 6 }) {
+  let f = null, R = null, V = 0;
+  if ((typeof n == "number" || typeof n == "string") && console.warn(`The provided dataset (${n}) is not sufficient to build a chart`), ge(n) && (ue(n) && (n.length < z ? f = L.BAR : f = L.LINE, R = n, V = n.length), Te(n))) {
+    if (!wt(n))
+      return console.warn("The objects in the dataset array have a different data structure. Either keys or value types are different."), !1;
+    const te = Object.keys(n[0]), ie = Object.values(n[0]);
+    if (!te.some((C) => _t(C)))
+      return console.warn("The data type of the dataset objects in the array must contain one of the following keys: DATA, SERIES, VALUE, VALUES, NUM. Casing is not important."), !1;
+    We(ie, (C) => typeof C == "number") && (f = L.DONUT, R = n), We(ie, (C) => Array.isArray(C) && ue(C)) && (je(n) > z ? f = L.LINE : f = L.BAR, V = je(n), R = n.map((C) => ({
+      ...C,
+      data: At(C, (j) => ue(j))
+    }))), n = n.map((C) => Ge(C)), R = R.map((C) => Ge(C));
+  }
+  return ge(n) && [...new Set(n.flatMap((te) => Array.isArray(te)))][0], {
+    dataset: n,
+    type: f,
+    usableDataset: R,
+    maxSeriesLength: V
+  };
+}
+function He(n) {
+  return !n || ge(n) && !n.length;
+}
+function ge(n) {
+  return Array.isArray(n);
+}
+function ue(n) {
+  if (!ge(n) || He(n)) return !1;
+  const z = n.map((f) => Number(f));
+  return ![...new Set(z.flatMap((f) => typeof f == "number" && !isNaN(f)))].includes(!1);
+}
+function Te(n) {
+  return !ge(n) || He(n) || !![...new Set(n.flatMap((f) => typeof f == "object" && !Array.isArray(f)))].includes(!1) ? !1 : !n.map((f) => Object.keys(f).length > 0).includes(!1);
+}
+function St(n, z) {
+  const f = Object.keys(n).sort(), R = Object.keys(z).sort();
+  if (f.length !== R.length)
+    return !1;
+  for (let V = 0; V < f.length; V += 1) {
+    const W = f[V], ee = R[V];
+    if (W !== ee || typeof n[W] != typeof z[ee])
+      return !1;
+  }
+  return !0;
+}
+function wt(n) {
+  if (n.length <= 1) return !0;
+  for (let z = 0; z < n.length; z += 1)
+    for (let f = z + 1; f < n.length; f += 1)
+      if (!St(n[z], n[f]))
+        return !1;
+  return !0;
+}
+function _t(n) {
+  return kt.includes(n.toUpperCase());
+}
+function We(n, z) {
+  let f = [];
+  for (let R = 0; R < n.length; R += 1)
+    f.push(z(n[R]));
+  return f.includes(!0);
+}
+function je(n) {
+  return Math.max(...[...n].flatMap((z) => Object.values(z).filter((f) => ue(f)).map((f) => f.length)));
+}
+function At(n, z) {
+  return Object.values(n).filter((f) => z(f))[0];
+}
+function Ge(n) {
+  const z = {};
+  for (let f in n)
+    n.hasOwnProperty(f) && (z[f.toUpperCase()] = n[f]);
+  return z;
+}
+const Xe = (n) => (lt("data-v-8c2953ad"), n = n(), ot(), n), Lt = ["id"], zt = ["xmlns", "viewBox"], $t = ["id"], Ct = ["id"], Pt = /* @__PURE__ */ Xe(() => /* @__PURE__ */ w("feColorMatrix", {
+  type: "saturate",
+  values: "0"
+}, null, -1)), Tt = ["id"], Et = ["flood-color"], It = {
+  key: 0,
+  class: "donut-label-connectors"
+}, Rt = ["d", "stroke", "stroke-width", "filter"], Ft = ["cx", "cy", "r", "fill"], Ot = ["cx", "cy", "r", "fill", "filter"], Nt = { class: "donut" }, Mt = ["d", "fill", "stroke", "stroke-width", "filter"], Bt = ["d", "onMouseenter", "onClick"], Ut = {
+  key: 1,
+  class: "donut-labels quick-animation"
+}, Dt = ["cx", "cy", "fill", "filter"], Vt = ["text-anchor", "x", "y", "fill", "font-size", "filter"], qt = ["text-anchor", "x", "y", "fill", "font-size", "filter"], Wt = {
+  key: 2,
+  class: "donut-hollow quick-animation"
+}, jt = ["x", "y", "font-size", "fill"], Gt = ["x", "y", "font-size", "fill"], Ht = {
+  key: 0,
+  class: "line-grid"
+}, Xt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Yt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Zt = {
+  key: 1,
+  class: "line-axis"
+}, Jt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Kt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Qt = {
+  key: 2,
+  class: "yLabels"
+}, ea = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ta = ["x", "y", "font-size", "fill"], aa = {
+  key: 3,
+  class: "periodLabels"
+}, la = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], oa = ["font-size", "text-anchor", "fill", "transform"], ua = { class: "plots" }, ia = { class: "line-plot-series" }, na = ["d", "stroke", "stroke-width"], ra = ["d", "stroke", "stroke-width"], sa = ["d", "stroke", "stroke-width"], va = ["d", "stroke", "stroke-width"], da = ["cx", "cy", "fill", "stroke"], ca = {
+  key: 4,
+  class: "dataLabels"
+}, ha = ["font-size", "fill", "x", "y"], fa = { class: "tooltip-traps" }, ga = ["x", "y", "height", "width", "fill", "onMouseenter", "onClick"], xa = {
+  key: 0,
+  class: "line-grid"
+}, ya = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ma = {
+  key: 1,
+  class: "line-axis"
+}, ka = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ba = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Sa = {
+  key: 2,
+  class: "yLabels"
+}, wa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], _a = ["x", "y", "font-size", "fill"], Aa = {
+  key: 3,
+  class: "periodLabels"
+}, La = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], za = ["font-size", "text-anchor", "transform", "fill"], $a = { class: "plots" }, Ca = ["x", "width", "height", "y", "fill", "stroke", "stroke-width"], Pa = ["to"], Ta = ["from", "to"], Ea = {
+  key: 4,
+  class: "dataLabels"
+}, Ia = ["x", "y", "font-size", "fill"], Ra = { class: "tooltip-traps" }, Fa = ["x", "y", "height", "width", "fill", "onMouseenter", "onClick"], Oa = {
+  key: 3,
+  class: "axis-labels"
+}, Na = { key: 0 }, Ma = ["font-size", "fill", "x", "y"], Ba = { key: 1 }, Ua = ["font-size", "fill", "x", "y"], Da = { key: 2 }, Va = ["font-size", "fill", "transform"], qa = { key: 3 }, Wa = ["font-size", "fill", "transform"], ja = {
+  key: 2,
+  class: "vue-data-ui-watermark"
+}, Ga = ["onClick"], Ha = ["onClick"], Xa = ["onClick"], Ya = {
+  key: 1,
+  class: "vue-ui-quick-chart-not-processable"
+}, Za = /* @__PURE__ */ Xe(() => /* @__PURE__ */ w("span", null, "Dataset is not processable", -1)), Ja = {
+  __name: "vue-ui-quick-chart",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: [Array, Object, String, Number],
+      default() {
+        return null;
+      }
+    }
+  },
+  emits: ["selectDatapoint", "selectLegend"],
+  setup(n, { expose: z, emit: f }) {
+    const R = n, { vue_ui_quick_chart: V } = ut(), W = T(null), ee = T(null), te = T(null), ie = T(null), C = T(it()), j = T(!1), ne = T(null), Y = T(""), q = T(null), S = T([]), Ee = T(0), _e = T(0), e = G(() => {
+      const r = qe({
+        userConfig: R.config,
+        defaultConfig: V
+      });
+      return r.theme ? {
+        ...qe({
+          userConfig: nt.vue_ui_quick_chart[r.theme] || R.config,
+          defaultConfig: r
+        }),
+        customPalette: rt[r.theme] || U
+      } : r;
+    }), re = G(() => st(e.value.customPalette)), xe = G(() => {
+      const r = bt({ dataset: R.dataset, barLineSwitch: e.value.chartIsBarUnderDatasetLength });
+      return r || console.error("VueUiQuickChart : Dataset is not processable"), r;
+    }), _ = T(xe.value), Ye = G(() => !!_.value), I = G(() => _.value ? _.value.type : null), { isPrinting: ye, isImaging: pe, generatePdf: Ie, generateImage: Re } = xt({
+      elementId: `${I.value}_${C.value}`,
+      fileName: e.value.title || I.value
+    }), k = T({
+      width: e.value.width,
+      height: e.value.height
+    }), me = T({
+      showTooltip: e.value.showTooltip
+    }), ke = T(null);
+    et(() => {
+      if (e.value.responsive) {
+        const r = ht(() => {
+          const { width: c, height: t } = ft({
+            chart: W.value,
+            title: e.value.title ? ee.value : null,
+            legend: e.value.showLegend ? te.value : null,
+            slicer: [L.BAR, L.LINE].includes(I.value) && e.value.zoomXy && _.value.maxSeriesLength > 1 ? ie.value : null
+          });
+          k.value.width = c, k.value.height = t;
+        });
+        ke.value = new ResizeObserver(r), ke.value.observe(W.value.parentNode);
+      }
+    }), tt(() => {
+      ke.value && ke.value.disconnect();
+    });
+    const Ze = G(() => {
+      switch (I.value) {
+        case L.LINE:
+          return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
+        case L.BAR:
+          return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
+        case L.DONUT:
+          return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
+        default:
+          return `0 0 ${k.value.width <= 0 ? 10 : k.value.width} ${k.value.height <= 0 ? 10 : k.value.height}`;
+      }
+    });
+    function Fe(r) {
+      return [...r].map((c) => c.value).reduce((c, t) => c + t, 0);
+    }
+    function se(r) {
+      return e.value.blurOnHover && ![null, void 0].includes(q.value) && q.value !== r ? `url(#blur_${C.value})` : "";
+    }
+    function Oe(r, c) {
+      S.value.includes(r) ? S.value = S.value.filter((t) => t !== r) : S.value.length < c && S.value.push(r);
+    }
+    const Ne = T(null), Me = T(null), be = T(!1);
+    function Je(r, c) {
+      be.value = !0;
+      let t = r.value;
+      if (S.value.includes(r.id)) {
+        let s = function() {
+          t > i ? (be.value = !1, cancelAnimationFrame(Me.value), _.value = {
+            ..._.value,
+            dataset: _.value.dataset.map((h, N) => r.id === `donut_${N}` ? {
+              ...h,
+              value: i,
+              VALUE: i
+            } : h)
+          }) : (t += i * 0.025, _.value = {
+            ..._.value,
+            dataset: _.value.dataset.map((h, N) => r.id === `donut_${N}` ? {
+              ...h,
+              value: t,
+              VALUE: t
+            } : h)
+          }, Me.value = requestAnimationFrame(s));
+        };
+        S.value = S.value.filter((h) => h !== r.id);
+        const i = xe.value.dataset.find((h, N) => r.id === `donut_${N}`).VALUE;
+        s();
+      } else if (c.length > 1) {
+        let i = function() {
+          t < 0.1 ? (be.value = !1, cancelAnimationFrame(Ne.value), S.value.push(r.id), _.value = {
+            ..._.value,
+            dataset: _.value.dataset.map((s, h) => r.id === `donut_${h}` ? {
+              ...s,
+              value: 0,
+              VALUE: 0
+            } : s)
+          }) : (t /= 1.1, _.value = {
+            ..._.value,
+            dataset: _.value.dataset.map((s, h) => r.id === `donut_${h}` ? {
+              ...s,
+              value: t,
+              VALUE: t
+            } : s)
+          }, Ne.value = requestAnimationFrame(i));
+        };
+        i();
+      }
+    }
+    const $ = G(() => {
+      if (I.value !== L.DONUT) return null;
+      const r = _.value.dataset.map((o, u) => ({
+        ...o,
+        value: o.VALUE || o.DATA || o.SERIE || o.VALUES || o.NUM || 0,
+        name: o.NAME || o.DESCRIPTION || o.TITLE || o.LABEL || `Serie ${u}`,
+        id: `donut_${u}`
+      })).map((o, u) => ({
+        ...o,
+        color: o.COLOR ? $e(o.COLOR) : re.value[u + e.value.paletteStartIndex] || U[u + e.value.paletteStartIndex] || U[(u + e.value.paletteStartIndex) % U.length],
+        immutableValue: o.value
+      }));
+      function c(o, u) {
+        return M({
+          v: isNaN(o.value / Fe(u)) ? 0 : o.value / Fe(u) * 100,
+          s: "%",
+          r: e.value.dataLabelRoundingPercentage
+        });
+      }
+      function t(o) {
+        return o.proportion * 100 > e.value.donutHideLabelUnderPercentage;
+      }
+      function i(o, u) {
+        const p = xe.value.dataset.find((P, O) => `donut_${O}` === o).VALUE;
+        return Math.abs(String(Number(p.toFixed(0))).length - String(Number(u.toFixed(0))).length);
+      }
+      function s({ datapoint: o, seriesIndex: u }) {
+        ne.value = { datapoint: o, seriesIndex: u, config: e.value, dataset: r }, q.value = o.id;
+        const p = e.value.tooltipCustomFormat;
+        if (Se(p) && Pe(() => p({
+          datapoint: o,
+          seriesIndex: u,
+          series: r,
+          config: e.value
+        })))
+          Y.value = p({
+            datapoint: o,
+            seriesIndex: u,
+            series: r,
+            config: e.value
+          });
+        else {
+          let y = "";
+          y += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`, y += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${o.color}"/></svg>`, y += `<b>${H(
+            e.value.formatter,
+            o.value,
+            M({
+              p: e.value.valuePrefix,
+              v: o.value,
+              s: e.value.valueSuffix,
+              r: e.value.dataLabelRoundingValue
+            }),
+            { datapoint: o, seriesIndex: u }
+          )}</b>`, y += `<span>(${M({ v: o.proportion * 100, s: "%", r: e.value.dataLabelRoundingPercentage })})</span></div>`, Y.value = `<div>${y}</div>`;
+        }
+        j.value = !0;
+      }
+      function h() {
+        j.value = !1, q.value = null;
+      }
+      const N = {
+        centerX: k.value.width / 2,
+        centerY: k.value.height / 2
+      }, B = r.filter((o) => !S.value.includes(o.id)).map((o) => o.value || 0).reduce((o, u) => o + u, 0), ae = r.map((o, u) => ({
+        ...o,
+        proportion: (o.value || 0) / B,
+        value: o.value || 0,
+        absoluteValue: xe.value.dataset.find((p, y) => `donut_${y}` === o.id).VALUE
+      })), Z = k.value.width / 2, le = k.value.height / 2, J = k.value.height * e.value.donutRadiusRatio;
+      return {
+        dataset: ae.filter((o) => !S.value.includes(o.id)),
+        legend: ae,
+        drawingArea: N,
+        displayArcPercentage: c,
+        isArcBigEnough: t,
+        useTooltip: s,
+        killTooltip: h,
+        getSpaces: i,
+        total: B,
+        cx: Z,
+        cy: le,
+        radius: J,
+        chart: vt(
+          { series: r.filter((o) => !S.value.includes(o.id)) },
+          Z,
+          le,
+          J,
+          J,
+          1.99999,
+          2,
+          1,
+          360,
+          105.25,
+          k.value.height * e.value.donutThicknessRatio
+        )
+      };
+    }), b = T({
+      start: 0,
+      end: _.value.maxSeriesLength
+    });
+    function Ke() {
+      b.value = {
+        start: 0,
+        end: _.value.maxSeriesLength
+      }, _e.value += 1;
+    }
+    const d = G(() => {
+      if (I.value !== L.LINE) return null;
+      const r = {
+        height: k.value.height,
+        width: k.value.width
+      }, c = {
+        left: e.value.xyPaddingLeft,
+        top: e.value.xyPaddingTop,
+        right: r.width - e.value.xyPaddingRight,
+        bottom: r.height - e.value.xyPaddingBottom,
+        width: r.width - e.value.xyPaddingLeft - e.value.xyPaddingRight,
+        height: r.height - e.value.xyPaddingTop - e.value.xyPaddingBottom
+      };
+      let t = [];
+      ue(_.value.dataset) && (t = [
+        {
+          values: _.value.dataset.slice(b.value.start, b.value.end),
+          absoluteIndices: _.value.dataset.map((o, u) => u).slice(b.value.start, b.value.end),
+          name: e.value.title,
+          color: re.value[e.value.paletteStartIndex] || U[e.value.paletteStartIndex],
+          id: "line_0"
+        }
+      ]), Te(_.value.dataset) && (t = _.value.dataset.map((o, u) => ({
+        ...o,
+        values: o.VALUE || o.DATA || o.SERIE || o.VALUES || o.NUM || 0,
+        name: o.NAME || o.DESCRIPTION || o.TITLE || o.LABEL || `Serie ${u}`,
+        id: `line_${u}`
+      })).map((o, u) => ({
+        ...o,
+        color: o.COLOR ? $e(o.COLOR) : re.value[u + e.value.paletteStartIndex] || U[u + e.value.paletteStartIndex] || U[(u + e.value.paletteStartIndex) % U.length],
+        values: o.values.slice(b.value.start, b.value.end),
+        absoluteIndices: o.values.map((p, y) => y).slice(b.value.start, b.value.end)
+      })));
+      const i = {
+        max: Math.max(...t.filter((o) => !S.value.includes(o.id)).flatMap((o) => o.values)),
+        min: Math.min(...t.filter((o) => !S.value.includes(o.id)).flatMap((o) => o.values)),
+        maxSeries: Math.max(...t.map((o) => o.values.length))
+      }, s = De(i.min < 0 ? i.min : 0, i.max < 0 ? 0 : i.max, e.value.xyScaleSegments), h = i.min < 0 ? Math.abs(i.min) : 0, N = i.max < 0 ? c.top : c.bottom - h / (s.max + h) * c.height, B = c.width / i.maxSeries, ae = s.ticks.map((o) => ({
+        y: c.bottom - c.height * ((o + h) / (s.max + h)),
+        x: c.left - 8,
+        value: o
+      })), Z = t.map((o, u) => ({
+        ...o,
+        coordinates: o.values.map((p, y) => ({
+          x: c.left + B * (y + 1) - B / 2,
+          y: c.bottom - (p + h) / (s.max + h) * c.height,
+          value: p
+        }))
+      })).map((o) => {
+        let u = [];
+        return o.coordinates.forEach((p) => {
+          u.push(`${p.x},${p.y} `);
+        }), {
+          ...o,
+          linePath: u.join(" ")
+        };
+      });
+      function le(o) {
+        q.value = o;
+        const u = t.map((y) => ({
+          ...y,
+          value: y.values[o],
+          absoluteIndex: y.absoluteIndices[o]
+        })).filter((y) => !S.value.includes(y.id));
+        ne.value = { datapoint: u, seriesIndex: o, config: e.value, dataset: t };
+        const p = e.value.tooltipCustomFormat;
+        if (Se(p) && Pe(() => p({
+          datapoint: u,
+          seriesIndex: o,
+          series: t,
+          config: e.value
+        })))
+          Y.value = p({
+            datapoint: u,
+            seriesIndex: o,
+            series: t,
+            config: e.value
+          });
+        else {
+          let y = "";
+          e.value.xyPeriods[u[0].absoluteIndex] && (y += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${e.value.xyPeriods[u[0].absoluteIndex]}</div>`), u.forEach((P, O) => {
+            y += `
+                    <div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
+                        <svg viewBox="0 0 12 12" height="14" width="12"><circle cx="6" cy="6" r="6" stroke="none" fill="${P.color}"/></svg>
+                        <span>${P.name}:</span>
+                        <b>${H(
+              e.value.formatter,
+              P.value,
+              M({
+                p: e.value.valuePrefix,
+                v: P.value,
+                s: e.value.valueSuffix,
+                r: e.value.dataLabelRoundingValue
+              }),
+              { datapoint: P, seriesIndex: O }
+            )}
+                        </b>
+                    </div>
+                `;
+          }), Y.value = y;
+        }
+        j.value = !0;
+      }
+      function J() {
+        q.value = null, j.value = !1;
+      }
+      return {
+        absoluteZero: N,
+        dataset: Z.filter((o) => !S.value.includes(o.id)),
+        legend: Z,
+        drawingArea: c,
+        extremes: i,
+        slotSize: B,
+        yLabels: ae,
+        useTooltip: le,
+        killTooltip: J
+      };
+    }), v = G(() => {
+      if (I.value !== L.BAR) return null;
+      const r = {
+        height: k.value.height,
+        width: k.value.width
+      }, c = {
+        left: e.value.xyPaddingLeft,
+        top: e.value.xyPaddingTop,
+        right: r.width - e.value.xyPaddingRight,
+        bottom: r.height - e.value.xyPaddingBottom,
+        width: r.width - e.value.xyPaddingLeft - e.value.xyPaddingRight,
+        height: r.height - e.value.xyPaddingTop - e.value.xyPaddingBottom
+      };
+      let t = [];
+      ue(_.value.dataset) && (t = [
+        {
+          values: _.value.dataset.slice(b.value.start, b.value.end),
+          absoluteIndices: _.value.dataset.map((u, p) => p).slice(b.value.start, b.value.end),
+          name: e.value.title,
+          color: re.value[e.value.paletteStartIndex] || U[e.value.paletteStartIndex],
+          id: "bar_0"
+        }
+      ]), Te(_.value.dataset) && (t = _.value.dataset.map((u, p) => ({
+        ...u,
+        values: u.VALUE || u.DATA || u.SERIE || u.VALUES || u.NUM || 0,
+        name: u.NAME || u.DESCRIPTION || u.TITLE || u.LABEL || `Serie ${p}`,
+        id: `bar_${p}`
+      })).map((u, p) => ({
+        ...u,
+        color: u.COLOR ? $e(u.COLOR) : re.value[p + e.value.paletteStartIndex] || U[p + e.value.paletteStartIndex] || U[(p + e.value.paletteStartIndex) % U.length],
+        values: u.values.slice(b.value.start, b.value.end),
+        absoluteIndices: u.values.map((y, P) => P).slice(b.value.start, b.value.end)
+      })));
+      const i = {
+        max: Math.max(...t.filter((u) => !S.value.includes(u.id)).flatMap((u) => u.values)) < 0 ? 0 : Math.max(...t.filter((u) => !S.value.includes(u.id)).flatMap((u) => u.values)),
+        min: Math.min(...t.filter((u) => !S.value.includes(u.id)).flatMap((u) => u.values)),
+        maxSeries: Math.max(...t.filter((u) => !S.value.includes(u.id)).map((u) => u.values.length))
+      }, s = De(i.min < 0 ? i.min : 0, i.max, e.value.xyScaleSegments), h = s.min < 0 ? Math.abs(s.min) : 0, N = c.bottom - h / (s.max + h) * c.height, B = c.width / i.maxSeries, ae = s.ticks.map((u) => ({
+        y: c.bottom - c.height * ((u + h) / (s.max + h)),
+        x: c.left - 8,
+        value: u
+      })), Z = t.map((u, p) => ({
+        ...u,
+        coordinates: u.values.map((y, P) => {
+          const O = (y + h) / (i.max + h) * c.height, ve = Math.abs(y) / Math.abs(i.min) * (c.height - N), Le = h / (i.max + h) * c.height, de = B / t.filter((K) => !S.value.includes(K.id)).length - e.value.barGap / t.filter((K) => !S.value.includes(K.id)).length;
+          return {
+            x: c.left + B * P + de * p + e.value.barGap / 2,
+            y: y > 0 ? c.bottom - O : N,
+            height: y > 0 ? O - Le : ve,
+            value: y,
+            width: de
+          };
+        })
+      })), le = t.filter((u) => !S.value.includes(u.id)).map((u, p) => ({
+        ...u,
+        coordinates: u.values.map((y, P) => {
+          const O = (y + h) / (i.max + h) * c.height, ve = Math.abs(y) / (i.max + h) * c.height, Le = h / (i.max + h) * c.height, de = B / t.filter((K) => !S.value.includes(K.id)).length - e.value.barGap / t.filter((K) => !S.value.includes(K.id)).length;
+          return {
+            x: c.left + B * P + de * p + e.value.barGap / 2,
+            y: y > 0 ? c.bottom - O : N,
+            height: y > 0 ? O - Le : ve,
+            value: y,
+            width: de
+          };
+        })
+      }));
+      function J(u) {
+        q.value = u;
+        const p = t.map((P) => ({
+          ...P,
+          value: P.values[u],
+          absoluteIndex: P.absoluteIndices[u]
+        })).filter((P) => !S.value.includes(P.id));
+        ne.value = { datapoint: p, seriesIndex: u, config: e.value, dataset: t };
+        const y = e.value.tooltipCustomFormat;
+        if (Se(y) && Pe(() => y({
+          datapoint: p,
+          seriesIndex: u,
+          series: t,
+          config: e.value
+        })))
+          Y.value = y({
+            point: p,
+            seriesIndex: u,
+            series: t,
+            config: e.value
+          });
+        else {
+          let P = "";
+          e.value.xyPeriods[p[0].absoluteIndex] && (P += `<div style="border-bottom:1px solid ${e.value.tooltipBorderColor};padding-bottom:6px;margin-bottom:3px;">${e.value.xyPeriods[p[0].absoluteIndex]}</div>`), p.forEach((O, ve) => {
+            P += `
+                    <div style="display:flex; flex-wrap: wrap; align-items:center; gap:3px;">
+                        <svg viewBox="0 0 12 12" height="14" width="12"><rect x=0 y="0" width="12" height="12" rx="1" stroke="none" fill="${O.color}"/></svg>
+                        <span>${O.name}:</span>
+                        <b>${H(
+              e.value.formatter,
+              O.value,
+              M({
+                p: e.value.valuePrefix,
+                v: O.value,
+                s: e.value.valueSuffix,
+                r: e.value.dataLabelRoundingValue
+              }),
+              { datapoint: O, seriesIndex: ve }
+            )}
+                        </b>
+                    </div>
+                `;
+          }), Y.value = P;
+        }
+        j.value = !0;
+      }
+      function o() {
+        j.value = !1, q.value = null;
+      }
+      return {
+        absoluteZero: N,
+        dataset: le.filter((u) => !S.value.includes(u.id)),
+        legend: Z,
+        drawingArea: c,
+        extremes: i,
+        slotSize: B,
+        yLabels: ae,
+        useTooltip: J,
+        killTooltip: o
+      };
+    }), Ae = T(!1);
+    function Qe(r) {
+      Ae.value = r, Ee.value += 1;
+    }
+    function Be() {
+      me.value.showTooltip = !me.value.showTooltip;
+    }
+    return z({
+      generatePdf: Ie,
+      generateImage: Re,
+      toggleTooltip: Be
+    }), (r, c) => Ye.value ? (a(), l("div", {
+      key: 0,
+      id: `${I.value}_${C.value}`,
+      ref_key: "quickChart",
+      ref: W,
+      class: oe({ "vue-ui-quick-chart": !0, "vue-data-ui-wrapper-fullscreen": Ae.value }),
+      style: F(`background:${e.value.backgroundColor};color:${e.value.color};font-family:${e.value.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`)
+    }, [
+      e.value.showUserOptions ? (a(), Ue(yt, {
+        ref: "details",
+        key: `user_option_${Ee.value}`,
+        backgroundColor: e.value.backgroundColor,
+        color: e.value.color,
+        isPrinting: m(ye),
+        isImaging: m(pe),
+        uid: C.value,
+        hasTooltip: e.value.userOptionsButtons.tooltip && e.value.showTooltip,
+        hasPdf: e.value.userOptionsButtons.pdf,
+        hasImg: e.value.userOptionsButtons.img,
+        hasFullscreen: e.value.userOptionsButtons.fullscreen,
+        hasXls: !1,
+        isTooltip: me.value.showTooltip,
+        isFullscreen: Ae.value,
+        titles: { ...e.value.userOptionsButtonTitles },
+        chartElement: W.value,
+        onToggleFullscreen: Qe,
+        onGeneratePdf: m(Ie),
+        onGenerateImage: m(Re),
+        onToggleTooltip: Be
+      }, at({ _: 2 }, [
+        r.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: Q(() => [
+            D(r.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        r.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: Q(() => [
+            D(r.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        r.$slots.optionImg ? {
+          name: "optionImg",
+          fn: Q(() => [
+            D(r.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        r.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: Q(({ toggleFullscreen: t, isFullscreen: i }) => [
+            D(r.$slots, "optionFullscreen", X(ce({ toggleFullscreen: t, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "3"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : x("", !0),
+      e.value.title ? (a(), l("div", {
+        key: 1,
+        ref_key: "quickChartTitle",
+        ref: ee,
+        class: "vue-ui-quick-chart-title",
+        style: F(`background:${e.value.backgroundColor};color:${e.value.color};font-size:${e.value.titleFontSize}px;font-weight:${e.value.titleBold ? "bold" : "normal"};text-align:${e.value.titleTextAlign}`)
+      }, E(e.value.title), 5)) : x("", !0),
+      (a(), l("svg", {
+        xmlns: m(dt),
+        viewBox: Ze.value,
+        style: F(`max-width:100%;overflow:visible;background:${e.value.backgroundColor};color:${e.value.color}`)
+      }, [
+        w("defs", null, [
+          w("filter", {
+            id: `blur_${C.value}`,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%"
+          }, [
+            w("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: 2,
+              id: `blur_std_${C.value}`
+            }, null, 8, Ct),
+            Pt
+          ], 8, $t),
+          w("filter", {
+            id: `shadow_${C.value}`,
+            "color-interpolation-filters": "sRGB"
+          }, [
+            w("feDropShadow", {
+              dx: "0",
+              dy: "0",
+              stdDeviation: "10",
+              "flood-opacity": "0.5",
+              "flood-color": e.value.donutShadowColor
+            }, null, 8, Et)
+          ], 8, Tt)
+        ]),
+        I.value === L.DONUT ? (a(), l(g, { key: 0 }, [
+          e.value.showDataLabels ? (a(), l("g", It, [
+            (a(!0), l(g, null, A($.value.chart, (t, i) => (a(), l(g, null, [
+              $.value.isArcBigEnough(t) ? (a(), l("path", {
+                key: 0,
+                d: m(ct)(t, { x: (e.value.width || k.value.width) / 2, y: (e.value.height || k.value.height) / 2 }, 16, 16, !1, !1, e.value.donutLabelMarkerStrokeWidth),
+                stroke: t.color,
+                "stroke-width": e.value.donutLabelMarkerStrokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                fill: "none",
+                filter: se(t.id)
+              }, null, 8, Rt)) : x("", !0)
+            ], 64))), 256))
+          ])) : x("", !0),
+          w("circle", {
+            class: "donut-hollow",
+            cx: (e.value.width || k.value.width) / 2,
+            cy: (e.value.height || k.value.height) / 2,
+            r: (e.value.height || k.value.height) * e.value.donutRadiusRatio,
+            fill: e.value.backgroundColor
+          }, null, 8, Ft),
+          w("circle", {
+            cx: $.value.cx,
+            cy: $.value.cy,
+            r: $.value.radius,
+            fill: e.value.backgroundColor,
+            filter: e.value.donutUseShadow ? `url(#shadow_${C.value})` : ""
+          }, null, 8, Ot),
+          w("g", Nt, [
+            (a(!0), l(g, null, A($.value.chart, (t, i) => (a(), l("path", {
+              d: t.arcSlice,
+              fill: t.color,
+              stroke: e.value.backgroundColor,
+              "stroke-width": e.value.donutStrokeWidth,
+              filter: se(t.id)
+            }, null, 8, Mt))), 256)),
+            (a(!0), l(g, null, A($.value.chart, (t, i) => (a(), l("path", {
+              d: t.arcSlice,
+              fill: "transparent",
+              onMouseenter: (s) => $.value.useTooltip({ datapoint: t, seriesIndex: i }),
+              onMouseout: c[0] || (c[0] = (s) => $.value.killTooltip()),
+              onClick: (s) => f("selectDatapoint", t)
+            }, null, 40, Bt))), 256))
+          ]),
+          e.value.showDataLabels ? (a(), l("g", Ut, [
+            (a(!0), l(g, null, A($.value.chart, (t, i) => (a(), l(g, null, [
+              $.value.isArcBigEnough(t) ? (a(), l("circle", {
+                key: 0,
+                cx: m(fe)(t).x,
+                cy: m(Ce)(t) - 3.7,
+                fill: t.color,
+                r: 3,
+                filter: se(t.id)
+              }, null, 8, Dt)) : x("", !0),
+              $.value.isArcBigEnough(t) ? (a(), l("text", {
+                key: 1,
+                "text-anchor": m(fe)(t, !0, 20).anchor,
+                x: m(fe)(t, !0).x,
+                y: m(Ce)(t),
+                fill: e.value.color,
+                "font-size": e.value.dataLabelFontSize,
+                filter: se(t.id)
+              }, E($.value.displayArcPercentage(t, $.value.chart)) + " (" + E(m(H)(
+                e.value.formatter,
+                t.value,
+                m(M)({
+                  p: e.value.valuePrefix,
+                  v: t.value,
+                  s: e.value.valueSuffix,
+                  r: e.value.dataLabelRoundingValue
+                }),
+                { datapoint: t, seriesIndex: i }
+              )) + ") ", 9, Vt)) : x("", !0),
+              $.value.isArcBigEnough(t, !0, 20) ? (a(), l("text", {
+                key: 2,
+                "text-anchor": m(fe)(t).anchor,
+                x: m(fe)(t, !0).x,
+                y: m(Ce)(t) + e.value.dataLabelFontSize,
+                fill: e.value.color,
+                "font-size": e.value.dataLabelFontSize,
+                filter: se(t.id)
+              }, E(t.name), 9, qt)) : x("", !0)
+            ], 64))), 256))
+          ])) : x("", !0),
+          e.value.donutShowTotal ? (a(), l("g", Wt, [
+            w("text", {
+              "text-anchor": "middle",
+              x: $.value.drawingArea.centerX,
+              y: $.value.drawingArea.centerY - e.value.donutTotalLabelFontSize / 2,
+              "font-size": e.value.donutTotalLabelFontSize,
+              fill: e.value.color
+            }, E(e.value.donutTotalLabelText), 9, jt),
+            w("text", {
+              "text-anchor": "middle",
+              x: $.value.drawingArea.centerX,
+              y: $.value.drawingArea.centerY + e.value.donutTotalLabelFontSize,
+              "font-size": e.value.donutTotalLabelFontSize,
+              fill: e.value.color
+            }, E(m(M)({
+              p: e.value.valuePrefix,
+              v: $.value.total,
+              s: e.value.valueSuffix,
+              r: e.value.dataLabelRoundingValue
+            })), 9, Gt)
+          ])) : x("", !0)
+        ], 64)) : x("", !0),
+        I.value === L.LINE ? (a(), l(g, { key: 1 }, [
+          e.value.xyShowGrid ? (a(), l("g", Ht, [
+            (a(!0), l(g, null, A(d.value.yLabels, (t) => (a(), l(g, null, [
+              t.y <= d.value.drawingArea.bottom ? (a(), l("line", {
+                key: 0,
+                x1: d.value.drawingArea.left,
+                x2: d.value.drawingArea.right,
+                y1: t.y,
+                y2: t.y,
+                stroke: e.value.xyGridStroke,
+                "stroke-width": e.value.xyGridStrokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, Xt)) : x("", !0)
+            ], 64))), 256)),
+            (a(!0), l(g, null, A(d.value.extremes.maxSeries + 1, (t, i) => (a(), l("line", {
+              x1: d.value.drawingArea.left + d.value.slotSize * i,
+              x2: d.value.drawingArea.left + d.value.slotSize * i,
+              y1: d.value.drawingArea.top,
+              y2: d.value.drawingArea.bottom,
+              stroke: e.value.xyGridStroke,
+              "stroke-width": e.value.xyGridStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, Yt))), 256))
+          ])) : x("", !0),
+          e.value.xyShowAxis ? (a(), l("g", Zt, [
+            w("line", {
+              x1: d.value.drawingArea.left,
+              x2: d.value.drawingArea.left,
+              y1: d.value.drawingArea.top,
+              y2: d.value.drawingArea.bottom,
+              stroke: e.value.xyAxisStroke,
+              "stroke-width": e.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, Jt),
+            w("line", {
+              x1: d.value.drawingArea.left,
+              x2: d.value.drawingArea.right,
+              y1: d.value.absoluteZero,
+              y2: d.value.absoluteZero,
+              stroke: e.value.xyAxisStroke,
+              "stroke-width": e.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, Kt)
+          ])) : x("", !0),
+          e.value.xyShowScale ? (a(), l("g", Qt, [
+            (a(!0), l(g, null, A(d.value.yLabels, (t, i) => (a(), l(g, null, [
+              t.y <= d.value.drawingArea.bottom ? (a(), l("line", {
+                key: 0,
+                x1: t.x + 4,
+                x2: d.value.drawingArea.left,
+                y1: t.y,
+                y2: t.y,
+                stroke: e.value.xyAxisStroke,
+                "stroke-width": e.value.xyAxisStrokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, ea)) : x("", !0),
+              t.y <= d.value.drawingArea.bottom ? (a(), l("text", {
+                key: 1,
+                x: t.x,
+                y: t.y + e.value.xyLabelsYFontSize / 3,
+                "text-anchor": "end",
+                "font-size": e.value.xyLabelsYFontSize,
+                fill: e.value.color
+              }, E(m(H)(
+                e.value.formatter,
+                t.value,
+                m(M)({
+                  p: e.value.valuePrefix,
+                  v: t.value,
+                  s: e.value.valueSuffix,
+                  r: e.value.dataLabelRoundingValue
+                }),
+                { datapoint: t, seriesIndex: i }
+              )), 9, ta)) : x("", !0)
+            ], 64))), 256))
+          ])) : x("", !0),
+          e.value.xyShowScale && e.value.xyPeriods.length ? (a(), l("g", aa, [
+            (a(!0), l(g, null, A(e.value.xyPeriods.slice(b.value.start, b.value.end), (t, i) => (a(), l("line", {
+              x1: d.value.drawingArea.left + d.value.slotSize * (i + 1) - d.value.slotSize / 2,
+              x2: d.value.drawingArea.left + d.value.slotSize * (i + 1) - d.value.slotSize / 2,
+              y1: d.value.drawingArea.bottom,
+              y2: d.value.drawingArea.bottom + 4,
+              stroke: e.value.xyAxisStroke,
+              "stroke-width": e.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, la))), 256)),
+            (a(!0), l(g, null, A(e.value.xyPeriods.slice(b.value.start, b.value.end), (t, i) => (a(), l("text", {
+              "font-size": e.value.xyLabelsXFontSize,
+              "text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
+              fill: e.value.color,
+              transform: `translate(${d.value.drawingArea.left + d.value.slotSize * (i + 1) - d.value.slotSize / 2}, ${d.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}), rotate(${e.value.xyPeriodLabelsRotation})`
+            }, E(t), 9, oa))), 256))
+          ])) : x("", !0),
+          w("g", ua, [
+            (a(!0), l(g, null, A(d.value.dataset, (t, i) => (a(), l("g", ia, [
+              e.value.lineSmooth ? (a(), l(g, { key: 0 }, [
+                w("path", {
+                  d: `M ${m(Ve)(t.coordinates)}`,
+                  stroke: e.value.backgroundColor,
+                  "stroke-width": e.value.lineStrokeWidth + 1,
+                  "stroke-linecap": "round",
+                  fill: "none",
+                  class: oe({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
+                  style: { transition: "all 0.3s ease-in-out" }
+                }, null, 10, na),
+                w("path", {
+                  d: `M ${m(Ve)(t.coordinates)}`,
+                  stroke: t.color,
+                  "stroke-width": e.value.lineStrokeWidth,
+                  "stroke-linecap": "round",
+                  fill: "none",
+                  class: oe({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
+                  style: { transition: "all 0.3s ease-in-out" }
+                }, null, 10, ra)
+              ], 64)) : (a(), l(g, { key: 1 }, [
+                w("path", {
+                  d: `M ${t.linePath}`,
+                  stroke: e.value.backgroundColor,
+                  "stroke-width": e.value.lineStrokeWidth + 1,
+                  "stroke-linecap": "round",
+                  fill: "none",
+                  class: oe({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
+                  style: { transition: "all 0.3s ease-in-out" }
+                }, null, 10, sa),
+                w("path", {
+                  d: `M ${t.linePath}`,
+                  stroke: t.color,
+                  "stroke-width": e.value.lineStrokeWidth,
+                  "stroke-linecap": "round",
+                  fill: "none",
+                  class: oe({ "quick-animation": !0, "vue-data-ui-line-animated": e.value.lineAnimated }),
+                  style: { transition: "all 0.3s ease-in-out" }
+                }, null, 10, va)
+              ], 64)),
+              (a(!0), l(g, null, A(t.coordinates, (s, h) => (a(), l("circle", {
+                cx: s.x,
+                cy: s.y,
+                r: 3,
+                fill: t.color,
+                stroke: e.value.backgroundColor,
+                "stroke-width": "0.5",
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, null, 8, da))), 256))
+            ]))), 256))
+          ]),
+          e.value.showDataLabels ? (a(), l("g", ca, [
+            (a(!0), l(g, null, A(d.value.dataset, (t, i) => (a(), l(g, null, [
+              (a(!0), l(g, null, A(t.coordinates, (s, h) => (a(), l("text", {
+                "text-anchor": "middle",
+                "font-size": e.value.dataLabelFontSize,
+                fill: t.color,
+                x: s.x,
+                y: s.y - e.value.dataLabelFontSize / 2,
+                class: "quick-animation",
+                style: { transition: "all 0.3s ease-in-out" }
+              }, E(m(H)(
+                e.value.formatter,
+                s.value,
+                m(M)({
+                  p: e.value.valuePrefix,
+                  v: s.value,
+                  s: e.value.valueSuffix,
+                  r: e.value.dataLabelRoundingValue
+                }),
+                { datapoint: s, seriesIndex: h }
+              )), 9, ha))), 256))
+            ], 64))), 256))
+          ])) : x("", !0),
+          w("g", fa, [
+            (a(!0), l(g, null, A(d.value.extremes.maxSeries, (t, i) => (a(), l("rect", {
+              x: d.value.drawingArea.left + i * d.value.slotSize,
+              y: d.value.drawingArea.top,
+              height: d.value.drawingArea.height <= 0 ? 1e-5 : d.value.drawingArea.height,
+              width: d.value.slotSize <= 0 ? 1e-5 : d.value.slotSize,
+              fill: q.value === i ? e.value.xyHighlighterColor : "transparent",
+              style: F(`opacity:${e.value.xyHighlighterOpacity}`),
+              onMouseenter: (s) => d.value.useTooltip(i),
+              onMouseleave: c[1] || (c[1] = (s) => d.value.killTooltip()),
+              onClick: (s) => f("selectDatapoint", d.value.dataset.map((h) => ({
+                ...h,
+                value: h.values[i]
+              })))
+            }, null, 44, ga))), 256))
+          ])
+        ], 64)) : x("", !0),
+        I.value === L.BAR ? (a(), l(g, { key: 2 }, [
+          e.value.xyShowGrid ? (a(), l("g", xa, [
+            (a(!0), l(g, null, A(v.value.yLabels, (t) => (a(), l(g, null, [
+              t.y <= v.value.drawingArea.bottom ? (a(), l("line", {
+                key: 0,
+                x1: v.value.drawingArea.left,
+                x2: v.value.drawingArea.right,
+                y1: t.y,
+                y2: t.y,
+                stroke: e.value.xyGridStroke,
+                "stroke-width": e.value.xyGridStrokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, ya)) : x("", !0)
+            ], 64))), 256)),
+            (a(!0), l(g, null, A(v.value.extremes.maxSeries + 1, (t, i) => (a(), l("line", {
+              x1: v.value.drawingArea.left + v.value.slotSize * i,
+              x2: v.value.drawingArea.left + v.value.slotSize * i,
+              y1: v.value.drawingArea.top,
+              y2: v.value.drawingArea.bottom,
+              stroke: e.value.xyGridStroke,
+              "stroke-width": e.value.xyGridStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, pa))), 256))
+          ])) : x("", !0),
+          e.value.xyShowAxis ? (a(), l("g", ma, [
+            w("line", {
+              x1: v.value.drawingArea.left,
+              x2: v.value.drawingArea.left,
+              y1: v.value.drawingArea.top,
+              y2: v.value.drawingArea.bottom,
+              stroke: e.value.xyAxisStroke,
+              "stroke-width": e.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, ka),
+            w("line", {
+              x1: v.value.drawingArea.left,
+              x2: v.value.drawingArea.right,
+              y1: v.value.absoluteZero,
+              y2: v.value.absoluteZero,
+              stroke: e.value.xyAxisStroke,
+              "stroke-width": e.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, ba)
+          ])) : x("", !0),
+          e.value.xyShowScale ? (a(), l("g", Sa, [
+            (a(!0), l(g, null, A(v.value.yLabels, (t, i) => (a(), l(g, null, [
+              t.y <= v.value.drawingArea.bottom ? (a(), l("line", {
+                key: 0,
+                x1: t.x + 4,
+                x2: v.value.drawingArea.left,
+                y1: t.y,
+                y2: t.y,
+                stroke: e.value.xyAxisStroke,
+                "stroke-width": e.value.xyAxisStrokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, wa)) : x("", !0),
+              t.y <= v.value.drawingArea.bottom ? (a(), l("text", {
+                key: 1,
+                x: t.x,
+                y: t.y + e.value.xyLabelsYFontSize / 3,
+                "text-anchor": "end",
+                "font-size": e.value.xyLabelsYFontSize,
+                fill: e.value.color
+              }, E(m(H)(
+                e.value.formatter,
+                t.value,
+                m(M)({
+                  p: e.value.valuePrefix,
+                  v: t.value,
+                  s: e.value.valueSuffix,
+                  r: e.value.dataLabelRoundingValue
+                }),
+                { datapoint: t, seriesIndex: i }
+              )), 9, _a)) : x("", !0)
+            ], 64))), 256))
+          ])) : x("", !0),
+          e.value.xyShowScale && e.value.xyPeriods.length ? (a(), l("g", Aa, [
+            (a(!0), l(g, null, A(e.value.xyPeriods.slice(b.value.start, b.value.end), (t, i) => (a(), l("line", {
+              x1: v.value.drawingArea.left + v.value.slotSize * (i + 1) - v.value.slotSize / 2,
+              x2: v.value.drawingArea.left + v.value.slotSize * (i + 1) - v.value.slotSize / 2,
+              y1: v.value.drawingArea.bottom,
+              y2: v.value.drawingArea.bottom + 4,
+              stroke: e.value.xyAxisStroke,
+              "stroke-width": e.value.xyAxisStrokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, La))), 256)),
+            (a(!0), l(g, null, A(e.value.xyPeriods.slice(b.value.start, b.value.end), (t, i) => (a(), l("text", {
+              "font-size": e.value.xyLabelsXFontSize,
+              "text-anchor": e.value.xyPeriodLabelsRotation > 0 ? "start" : e.value.xyPeriodLabelsRotation < 0 ? "end" : "middle",
+              transform: `translate(${v.value.drawingArea.left + v.value.slotSize * (i + 1) - v.value.slotSize / 2}, ${v.value.drawingArea.bottom + e.value.xyLabelsXFontSize + 6}) rotate(${e.value.xyPeriodLabelsRotation})`,
+              fill: e.value.color
+            }, E(t), 9, za))), 256))
+          ])) : x("", !0),
+          w("g", $a, [
+            (a(!0), l(g, null, A(v.value.dataset, (t, i) => (a(), l(g, null, [
+              (a(!0), l(g, null, A(t.coordinates, (s, h) => (a(), l("rect", {
+                x: s.x,
+                width: s.width <= 0 ? 1e-5 : s.width,
+                height: s.height <= 0 ? 1e-5 : s.height,
+                y: s.y,
+                fill: t.color,
+                stroke: e.value.backgroundColor,
+                "stroke-width": e.value.barStrokeWidth,
+                "stroke-linecap": "round",
+                class: oe({ "vue-data-ui-bar-animated": e.value.barAnimated && s.value < 0 })
+              }, [
+                e.value.barAnimated && s.value > 0 && !m(ye) && !m(pe) ? (a(), l("animate", {
+                  key: 0,
+                  attributeName: "height",
+                  from: 0,
+                  to: s.height,
+                  dur: "0.5s"
+                }, null, 8, Pa)) : x("", !0),
+                e.value.barAnimated && s.value > 0 && !m(ye) && !m(pe) ? (a(), l("animate", {
+                  key: 1,
+                  attributeName: "y",
+                  from: v.value.absoluteZero,
+                  to: v.value.absoluteZero - s.height,
+                  dur: "0.5s"
+                }, null, 8, Ta)) : x("", !0)
+              ], 10, Ca))), 256))
+            ], 64))), 256))
+          ]),
+          e.value.showDataLabels ? (a(), l("g", Ea, [
+            (a(!0), l(g, null, A(v.value.dataset, (t, i) => (a(), l(g, null, [
+              (a(!0), l(g, null, A(t.coordinates, (s, h) => (a(), l("text", {
+                x: s.x + s.width / 2,
+                y: s.y - e.value.dataLabelFontSize / 2,
+                "text-anchor": "middle",
+                "font-size": e.value.dataLabelFontSize,
+                fill: t.color,
+                class: "quick-animation"
+              }, E(m(H)(
+                e.value.formatter,
+                s.value,
+                m(M)({
+                  p: e.value.valuePrefix,
+                  v: s.value,
+                  s: e.value.valueSuffix,
+                  r: e.value.dataLabelRoundingValue
+                }),
+                { datapoint: s, seriesIndex: h }
+              )), 9, Ia))), 256))
+            ], 64))), 256))
+          ])) : x("", !0),
+          w("g", Ra, [
+            (a(!0), l(g, null, A(v.value.extremes.maxSeries, (t, i) => (a(), l("rect", {
+              x: v.value.drawingArea.left + i * v.value.slotSize,
+              y: v.value.drawingArea.top,
+              height: v.value.drawingArea.height <= 0 ? 1e-5 : v.value.drawingArea.height,
+              width: v.value.slotSize <= 0 ? 1e-5 : v.value.slotSize,
+              fill: q.value === i ? e.value.xyHighlighterColor : "transparent",
+              style: F(`opacity:${e.value.xyHighlighterOpacity}`),
+              onMouseenter: (s) => v.value.useTooltip(i),
+              onMouseleave: c[2] || (c[2] = (s) => v.value.killTooltip()),
+              onClick: (s) => f("selectDatapoint", v.value.dataset.map((h) => ({
+                ...h,
+                value: h.values[i]
+              })))
+            }, null, 44, Fa))), 256))
+          ])
+        ], 64)) : x("", !0),
+        [L.LINE, L.BAR].includes(I.value) ? (a(), l("g", Oa, [
+          e.value.xAxisLabel && I.value === L.LINE ? (a(), l("g", Na, [
+            w("text", {
+              "font-size": e.value.axisLabelsFontSize,
+              fill: e.value.color,
+              "text-anchor": "middle",
+              x: d.value.drawingArea.left + d.value.drawingArea.width / 2,
+              y: k.value.height - e.value.axisLabelsFontSize / 3
+            }, E(e.value.xAxisLabel), 9, Ma)
+          ])) : x("", !0),
+          e.value.xAxisLabel && I.value === L.BAR ? (a(), l("g", Ba, [
+            w("text", {
+              "font-size": e.value.axisLabelsFontSize,
+              fill: e.value.color,
+              "text-anchor": "middle",
+              x: v.value.drawingArea.left + v.value.drawingArea.width / 2,
+              y: k.value.height - e.value.axisLabelsFontSize / 3
+            }, E(e.value.xAxisLabel), 9, Ua)
+          ])) : x("", !0),
+          e.value.yAxisLabel && I.value === L.LINE ? (a(), l("g", Da, [
+            w("text", {
+              "font-size": e.value.axisLabelsFontSize,
+              fill: e.value.color,
+              transform: `translate(${e.value.axisLabelsFontSize}, ${d.value.drawingArea.top + d.value.drawingArea.height / 2}) rotate(-90)`,
+              "text-anchor": "middle"
+            }, E(e.value.yAxisLabel), 9, Va)
+          ])) : x("", !0),
+          e.value.yAxisLabel && I.value === L.BAR ? (a(), l("g", qa, [
+            w("text", {
+              "font-size": e.value.axisLabelsFontSize,
+              fill: e.value.color,
+              transform: `translate(${e.value.axisLabelsFontSize}, ${v.value.drawingArea.top + v.value.drawingArea.height / 2}) rotate(-90)`,
+              "text-anchor": "middle"
+            }, E(e.value.yAxisLabel), 9, Wa)
+          ])) : x("", !0)
+        ])) : x("", !0)
+      ], 12, zt)),
+      r.$slots.watermark ? (a(), l("div", ja, [
+        D(r.$slots, "watermark", X(ce({ isPrinting: m(ye) || m(pe) })), void 0, !0)
+      ])) : x("", !0),
+      [L.BAR, L.LINE].includes(I.value) && e.value.zoomXy && _.value.maxSeriesLength > 1 ? (a(), l("div", {
+        key: `slicer_${_e.value}`,
+        ref_key: "quickChartSlicer",
+        ref: ie
+      }, [
+        (a(), Ue(pt, {
+          key: `slicer_${_e.value}`,
+          background: e.value.zoomColor,
+          borderColor: e.value.backgroundColor,
+          fontSize: e.value.zoomFontSize,
+          useResetSlot: e.value.zoomUseResetSlot,
+          labelLeft: e.value.xyPeriods[b.value.start] ? e.value.xyPeriods[b.value.start] : "",
+          labelRight: e.value.xyPeriods[b.value.end - 1] ? e.value.xyPeriods[b.value.end - 1] : "",
+          textColor: e.value.color,
+          inputColor: e.value.zoomColor,
+          selectColor: e.value.zoomHighlightColor,
+          max: _.value.maxSeriesLength,
+          min: 0,
+          valueStart: b.value.start,
+          valueEnd: b.value.end,
+          start: b.value.start,
+          "onUpdate:start": c[3] || (c[3] = (t) => b.value.start = t),
+          end: b.value.end,
+          "onUpdate:end": c[4] || (c[4] = (t) => b.value.end = t),
+          onReset: Ke
+        }, {
+          "reset-action": Q(({ reset: t }) => [
+            D(r.$slots, "reset-action", X(ce({ reset: t })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end"]))
+      ])) : x("", !0),
+      e.value.showLegend ? (a(), l("div", {
+        key: 4,
+        ref_key: "quickChartLegend",
+        ref: te,
+        class: "vue-ui-quick-chart-legend",
+        style: F(`background:${e.value.backgroundColor};color:${e.value.color}`)
+      }, [
+        I.value === L.DONUT ? (a(!0), l(g, { key: 0 }, A($.value.legend, (t, i) => (a(), l("div", {
+          class: "vue-ui-quick-chart-legend-item",
+          onClick: (s) => {
+            Je(t, $.value.dataset), f("selectLegend", t);
+          },
+          style: F(`cursor: ${$.value.legend.length > 1 ? "pointer" : "default"}; opacity:${S.value.includes(t.id) ? "0.5" : "1"}`)
+        }, [
+          e.value.useCustomLegend ? D(r.$slots, "legend", X(ze({ key: 0 }, { legend: t })), void 0, !0) : (a(), l(g, { key: 1 }, [
+            he(we, {
+              name: e.value.legendIcon,
+              stroke: t.color,
+              size: e.value.legendIconSize
+            }, null, 8, ["name", "stroke", "size"]),
+            w("span", {
+              style: F(`font-size:${e.value.legendFontSize}px`)
+            }, E(t.name), 5),
+            w("span", {
+              style: F(`font-size:${e.value.legendFontSize}px;font-variant-numeric:tabular-nums`)
+            }, E(S.value.includes(t.id) ? "-" : m(H)(
+              e.value.formatter,
+              t.absoluteValue,
+              m(M)({
+                p: e.value.valuePrefix,
+                v: t.absoluteValue,
+                s: e.value.valueSuffix,
+                r: e.value.dataLabelRoundingValue
+              }),
+              { datapoint: t, seriesIndex: i }
+            )), 5),
+            S.value.includes(t.id) ? (a(), l("span", {
+              key: 0,
+              style: F(`font-size:${e.value.legendFontSize}px`)
+            }, " ( - % ) ", 4)) : be.value ? (a(), l("span", {
+              key: 1,
+              style: F(`font-size:${e.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
+            }, " ( - % ) ", 4)) : (a(), l("span", {
+              key: 2,
+              style: F(`font-size:${e.value.legendFontSize}px; font-variant-numeric: tabular-nums;`)
+            }, " (" + E(m(M)({
+              v: t.value / $.value.total * 100,
+              s: "%",
+              r: e.value.dataLabelRoundingPercentage
+            })) + ") ", 5))
+          ], 64))
+        ], 12, Ga))), 256)) : x("", !0),
+        I.value === L.LINE ? (a(!0), l(g, { key: 1 }, A(d.value.legend, (t, i) => (a(), l("div", {
+          class: "vue-ui-quick-chart-legend-item",
+          onClick: (s) => {
+            Oe(t.id, d.value.legend.length - 1), f("selectLegend", t);
+          },
+          style: F(`cursor: ${d.value.legend.length > 1 ? "pointer" : "default"}; opacity:${S.value.includes(t.id) ? "0.5" : "1"}`)
+        }, [
+          e.value.useCustomLegend ? D(r.$slots, "legend", X(ze({ key: 0 }, { legend: t })), void 0, !0) : (a(), l(g, { key: 1 }, [
+            he(we, {
+              name: e.value.legendIcon,
+              stroke: t.color,
+              size: e.value.legendIconSize
+            }, null, 8, ["name", "stroke", "size"]),
+            w("span", {
+              style: F(`font-size:${e.value.legendFontSize}px`)
+            }, E(t.name), 5)
+          ], 64))
+        ], 12, Ha))), 256)) : x("", !0),
+        I.value === L.BAR ? (a(!0), l(g, { key: 2 }, A(v.value.legend, (t, i) => (a(), l("div", {
+          class: "vue-ui-quick-chart-legend-item",
+          onClick: (s) => {
+            Oe(t.id, v.value.legend.length - 1), f("selectLegend", t);
+          },
+          style: F(`cursor: ${v.value.legend.length > 1 ? "pointer" : "default"}; opacity:${S.value.includes(t.id) ? "0.5" : "1"}`)
+        }, [
+          e.value.useCustomLegend ? D(r.$slots, "legend", X(ze({ key: 0 }, { legend: t })), void 0, !0) : (a(), l(g, { key: 1 }, [
+            he(we, {
+              name: e.value.legendIcon,
+              stroke: t.color,
+              size: e.value.legendIconSize
+            }, null, 8, ["name", "stroke", "size"]),
+            w("span", {
+              style: F(`font-size:${e.value.legendFontSize}px`)
+            }, E(t.name), 5)
+          ], 64))
+        ], 12, Xa))), 256)) : x("", !0)
+      ], 4)) : x("", !0),
+      he(gt, {
+        show: me.value.showTooltip && j.value,
+        backgroundColor: e.value.backgroundColor,
+        color: e.value.color,
+        borderRadius: e.value.tooltipBorderRadius,
+        borderColor: e.value.tooltipBorderColor,
+        borderWidth: e.value.tooltipBorderWidth,
+        fontSize: e.value.tooltipFontSize,
+        backgroundOpacity: e.value.tooltipBackgroundOpacity,
+        position: e.value.tooltipPosition,
+        offsetY: e.value.tooltipOffsetY,
+        parent: W.value,
+        content: Y.value,
+        isCustom: m(Se)(e.value.tooltipCustomFormat)
+      }, {
+        "tooltip-before": Q(() => [
+          D(r.$slots, "tooltip-before", X(ce({ ...ne.value })), void 0, !0)
+        ]),
+        "tooltip-after": Q(() => [
+          D(r.$slots, "tooltip-after", X(ce({ ...ne.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"])
+    ], 14, Lt)) : (a(), l("div", Ya, [
+      he(we, {
+        name: "circleCancel",
+        stroke: "red"
+      }),
+      Za
+    ]));
+  }
+}, nl = /* @__PURE__ */ mt(Ja, [["__scopeId", "data-v-8c2953ad"]]);
+export {
+  nl as default
+};