vue-data-ui 2.3.54 → 2.3.56

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

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