vue-data-ui 2.3.3 → 2.3.5

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

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