vue-data-ui 2.3.3 → 2.3.5

package/dist/vue-ui-xy-canvas-DnLWrf0e.js

@@ -0,0 +1,1006 @@
+import { ref as c, computed as b, watch as le, onMounted as da, onBeforeUnmount as ha, openBlock as O, createElementBlock as de, normalizeStyle as U, normalizeClass as ya, createVNode as he, createCommentVNode as te, createBlock as A, unref as Y, createSlots as fa, withCtx as m, renderSlot as C, normalizeProps as oe, guardReactiveProps as ue, createElementVNode as Z, toDisplayString as _e, createTextVNode as ga } from "vue";
+import { u as pa, c as ba, t as ma, a as xa, p as E, b as La, z as ye, f as G, d as De, T as ka, o as Ca, e as wa, v as He, w as Sa, n as za, q as $a, r as V, l as Ta } from "./index-BMCvLyab.js";
+import { d as Ma, c as Ra, a as We, t as Oa, l as k, r as fe, b as I, p as Be, u as Ia } from "./useResponsive-NZB-WLRF.js";
+import { _ as Pa } from "./Tooltip-ZnJAz6dl.js";
+import { L as Fa } from "./Legend-DHpoRTAE.js";
+import { _ as Ea } from "./Title-BNPZwnkp.js";
+import { S as Na } from "./Slicer-Bdb1BlrC.js";
+import { u as _a, U as Da } from "./usePrinter-BuuBz5JR.js";
+import Ha from "./vue-ui-accordion-CLlVxx3Q.js";
+import { D as Wa } from "./DataTable-CaB7GIwQ.js";
+import Ba from "./vue-ui-skeleton-BisWX1sO.js";
+import { u as Xe } from "./useNestedProp-CkP8xhG_.js";
+import { _ as Xa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ua = ["id"], Aa = ["onClick"], Ya = ["innerHTML"], Za = {
+  __name: "vue-ui-xy-canvas",
+  props: {
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend"],
+  setup(ge, { expose: Ue, emit: Ae }) {
+    const N = ge, { vue_ui_xy_canvas: Ye } = pa(), re = c(ba()), j = c(null), S = c(null), D = c(null), s = c(null), y = c(1), T = c(1), q = c(!1), d = c(null), J = c(""), pe = c(null), w = c([]), _ = c(1), P = c(!0), z = c(!0), se = c(null), be = c(0), me = c(0), ne = c(!1), xe = c(null), Le = c(null), ke = c(null), ie = b(() => !!N.dataset && N.dataset.length), a = b(() => {
+      const e = Xe({
+        userConfig: N.config,
+        defaultConfig: Ye
+      });
+      return e.theme ? {
+        ...Xe({
+          userConfig: ma.vue_ui_xy_canvas[e.theme] || N.config,
+          defaultConfig: e
+        }),
+        customPalette: xa[e.theme] || E
+      } : e;
+    }), Ce = c(a.value.style.chart.aspectRatio), { isPrinting: Ze, isImaging: Ge, generatePdf: we, generateImage: Se } = _a({
+      elementId: `xy_canvas_${re.value}`,
+      fileName: a.value.style.chart.title.text || "vue-ui-xy-canvas"
+    }), r = c({
+      showTable: a.value.table.show,
+      showDataLabels: a.value.style.chart.dataLabels.show,
+      stacked: a.value.style.chart.stacked,
+      showTooltip: a.value.style.chart.tooltip.show
+    });
+    function Ve(e) {
+      ne.value = e, me.value += 1;
+    }
+    const ze = b(() => La(a.value.customPalette)), F = b(() => Math.max(...H.value.filter((e, t) => !w.value.includes(e.absoluteIndex)).map((e) => e.series.length))), l = b(() => {
+      const e = y.value - y.value * (a.value.style.chart.paddingProportions.left + a.value.style.chart.paddingProportions.right);
+      return {
+        canvasWidth: y.value,
+        canvasHeight: T.value,
+        left: y.value * a.value.style.chart.paddingProportions.left,
+        top: T.value * a.value.style.chart.paddingProportions.top,
+        right: y.value - y.value * a.value.style.chart.paddingProportions.right,
+        bottom: T.value - T.value * a.value.style.chart.paddingProportions.bottom,
+        width: e,
+        height: T.value - T.value * (a.value.style.chart.paddingProportions.top + a.value.style.chart.paddingProportions.bottom),
+        slot: e / (u.value.end - u.value.start)
+      };
+    });
+    function $e(e, t) {
+      return e / t;
+    }
+    function je({ hasAutoScale: e, series: t, min: o, max: i, scale: v, yOffset: f, individualHeight: n, stackIndex: g = null }) {
+      return t.map((L, ce) => {
+        const $ = v.min < 0 ? Math.abs(v.min) : 0, M = $e(L + $, $ + v.max);
+        let R, W;
+        e && (R = Math.abs(v.min), W = $e(L + R, v.max + R));
+        let B = 0;
+        return g === null ? B = l.value.bottom - l.value.height * (e ? W : M) : B = l.value.bottom - f - n * (e ? W : M), {
+          x: l.value.left + l.value.slot * ce + l.value.slot / 2,
+          y: B,
+          value: L
+        };
+      });
+    }
+    const p = b(() => {
+      const e = Math.min(...H.value.filter((n, g) => !w.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(u.value.start, u.value.end))), t = Math.max(...H.value.filter((n, g) => !w.value.includes(n.absoluteIndex)).flatMap((n) => n.series.slice(u.value.start, u.value.end))), o = ye(e < 0 ? e : 0, t === e ? e + 1 < 0 ? 0 : e + 1 : t < 0 ? 0 : t, a.value.style.chart.scale.ticks), i = o.min < 0 ? Math.abs(o.min) : 0, v = l.value.bottom - l.value.height * (i / (o.max + i)), f = o.ticks.map((n) => ({
+        y: l.value.bottom - l.value.height * ((n + i) / (o.max + i)),
+        x: l.value.left - 8,
+        value: n
+      }));
+      return {
+        absoluteMin: i,
+        max: t,
+        min: e,
+        scale: o,
+        yLabels: f,
+        zero: v
+      };
+    }), qe = b(() => h.value.map((e) => `
+            <div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
+                <svg viewBox="0 0 10 10" height="12" width="12">
+                    <circle cx="5" cy="5" r="5" fill="${e.color}"/>
+                </svg>
+                <span>${e.name ? e.name + ": " : ""}</span>
+                <span>${G({
+      p: e.prefix || "",
+      v: e.series[d.value],
+      s: e.suffix || "",
+      r: e.rounding || 0
+    })}</span>
+            </div>
+        `)), H = b(() => N.dataset.map((e, t) => ({
+      ...e,
+      absoluteIndex: t,
+      color: De(e.color || ze.value[t] || E[t] || E[t % E.length])
+    }))), h = b(() => ka(H.value.filter((e, t) => !w.value.includes(e.absoluteIndex))).map((e, t) => ({
+      ...e,
+      series: e.series.slice(u.value.start, u.value.end)
+    })).map((e, t) => {
+      let o = Math.min(...e.series) || 0, i = Math.max(...e.series) || 1;
+      o === i && (o = o >= 0 ? i - 1 : o, i = i >= 0 ? i : o + 1);
+      const f = {
+        ratios: e.series.filter((X) => ![null, void 0].includes(X)).map((X) => (X - o) / (i - o)),
+        valueMin: o,
+        valueMax: i
+      }, n = e.scaleSteps || a.value.style.chart.scale.ticks;
+      let g;
+      e.autoScaling ? g = ye(f.valueMin, f.valueMax, n) : g = ye(f.valueMin < 0 ? f.valueMin : 0, f.valueMax <= 0 ? 0 : f.valueMax, n);
+      const L = r.value.stacked ? l.value.height * (1 - e.cumulatedStackRatio) : 0, ce = r.value.stacked ? l.value.height / a.value.style.chart.stackGap : 0, $ = r.value.stacked ? l.value.height * e.stackRatio - ce : l.value.height, M = g.min < 0 ? Math.abs(g.min) : 0;
+      let R;
+      e.autoScaling && r.value.stacked && i <= 0 ? R = l.value.bottom - L - $ : R = l.value.bottom - L - $ * (M / (g.max + M));
+      const W = g.ticks.map((X, ca) => ({
+        y: l.value.bottom - L - $ * (ca / (g.ticks.length - 1)),
+        x: l.value.left - 8,
+        value: X
+      })), B = je({
+        hasAutoScale: r.value.stacked && e.autoScaling,
+        series: e.series,
+        min: r.value.stacked ? o : p.value.min,
+        max: r.value.stacked ? i : p.value.max,
+        scale: r.value.stacked ? g : p.value.scale,
+        yOffset: L,
+        individualHeight: $,
+        stackIndex: r.value.stacked ? t : null
+      });
+      return {
+        ...e,
+        coordinatesLine: B,
+        min: o,
+        max: i,
+        localScale: g,
+        localZero: R,
+        localMin: M,
+        localYLabels: W,
+        yOffset: L,
+        individualHeight: $
+      };
+    })), u = c({
+      start: 0,
+      end: F.value
+    });
+    function Je() {
+      u.value = {
+        start: 0,
+        end: F.value
+      }, be.value += 1;
+    }
+    const Ke = b(() => h.value.filter((e) => ["line", "plot", void 0].includes(e.type))), x = b(() => h.value.filter((e) => e.type === "bar"));
+    function Qe() {
+      if (!S.value)
+        return;
+      const e = D.value.offsetWidth, t = D.value.offsetHeight;
+      S.value.width = e * _.value * 2, S.value.height = t * _.value * 2, y.value = e * _.value * 2, T.value = t * _.value * 2, s.value.scale(_.value, _.value), ve();
+    }
+    function ea() {
+      if (s.value.fillStyle = a.value.style.chart.backgroundColor, s.value.fillRect(0, 0, l.value.canvasWidth, l.value.canvasHeight), r.value.stacked)
+        a.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < a.value.style.chart.grid.y.verticalLines.hideUnderXLength && h.value.forEach((e) => {
+          for (let t = 0; t < u.value.end - u.value.start + 1; t += 1)
+            k(
+              s.value,
+              [
+                {
+                  x: l.value.left + l.value.slot * t,
+                  y: l.value.bottom - e.yOffset - e.individualHeight
+                },
+                {
+                  x: l.value.left + l.value.slot * t,
+                  y: l.value.bottom - e.yOffset
+                }
+              ],
+              {
+                color: a.value.style.chart.grid.y.verticalLines.color
+              }
+            );
+        }), a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? h.value.forEach((e) => {
+          e.localYLabels.forEach((t, o) => {
+            o < e.localYLabels.length - 1 && fe(
+              s.value,
+              [
+                { x: l.value.left, y: t.y },
+                { x: l.value.right, y: t.y },
+                { x: l.value.right, y: e.localYLabels[o + 1].y },
+                { x: l.value.left, y: e.localYLabels[o + 1].y }
+              ],
+              {
+                fillColor: o % 2 === 0 ? "transparent" : a.value.style.chart.grid.x.horizontalLines.color + V[a.value.style.chart.grid.x.horizontalLines.opacity],
+                strokeColor: "transparent"
+              }
+            );
+          });
+        }) : h.value.forEach((e) => {
+          e.localYLabels.slice(u.value.start, u.value.end).forEach((t) => {
+            k(
+              s.value,
+              [
+                { x: l.value.left, y: t.y },
+                { x: l.value.right, y: t.y }
+              ],
+              {
+                color: a.value.style.chart.grid.x.horizontalLines.color
+              }
+            );
+          });
+        })), a.value.style.chart.grid.zeroLine.show && h.value.forEach((e) => {
+          k(
+            s.value,
+            [
+              { x: l.value.left, y: e.localZero },
+              { x: l.value.right, y: e.localZero }
+            ],
+            {
+              color: a.value.style.chart.grid.zeroLine.color,
+              lineDash: a.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+            }
+          );
+        }), a.value.style.chart.grid.y.axisLabels.show && h.value.forEach((e) => {
+          k(
+            s.value,
+            [
+              { x: l.value.left, y: l.value.bottom - e.yOffset },
+              { x: l.value.left, y: l.value.bottom - e.yOffset - e.individualHeight }
+            ],
+            {
+              color: e.color
+            }
+          ), k(
+            s.value,
+            [
+              { x: l.value.right, y: l.value.bottom - e.yOffset },
+              { x: l.value.right, y: l.value.bottom - e.yOffset - e.individualHeight }
+            ],
+            {
+              color: e.color
+            }
+          ), e.localYLabels.forEach((t) => {
+            I(
+              s.value,
+              G({
+                p: e.prefix || a.value.style.chart.grid.y.axisLabels.prefix || "",
+                v: t.value,
+                s: e.suffix || a.value.style.chart.grid.y.axisLabels.suffix || "",
+                r: e.rounding || a.value.style.chart.grid.y.axisLabels.rounding || 0
+              }),
+              t.x + a.value.style.chart.grid.y.axisLabels.offsetX,
+              t.y,
+              {
+                align: "right",
+                font: `${Math.round(y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+                color: e.color
+              }
+            );
+          });
+        }), h.value.forEach((e) => {
+          I(
+            s.value,
+            e.name,
+            y.value / 35,
+            l.value.bottom - e.yOffset - e.individualHeight / 2,
+            {
+              align: "center",
+              rotation: -90,
+              color: e.color,
+              font: `${Math.round(y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`
+            }
+          );
+        });
+      else {
+        if (a.value.style.chart.grid.y.verticalLines.show && u.value.end - u.value.start < a.value.style.chart.grid.y.verticalLines.hideUnderXLength)
+          for (let e = 0; e < u.value.end - u.value.start + 1; e += 1)
+            k(
+              s.value,
+              [
+                { x: l.value.left + l.value.slot * e, y: l.value.top },
+                { x: l.value.left + l.value.slot * e, y: l.value.bottom }
+              ],
+              {
+                color: a.value.style.chart.grid.y.verticalLines.color
+              }
+            );
+        a.value.style.chart.grid.x.horizontalLines.show && (a.value.style.chart.grid.x.horizontalLines.alternate ? p.value.yLabels.forEach((e, t) => {
+          t < p.value.yLabels.length - 1 && fe(
+            s.value,
+            [
+              { x: l.value.left, y: e.y },
+              { x: l.value.right, y: e.y },
+              { x: l.value.right, y: p.value.yLabels[t + 1].y },
+              { x: l.value.left, y: p.value.yLabels[t + 1].y }
+            ],
+            {
+              fillColor: t % 2 === 0 ? "transparent" : a.value.style.chart.grid.x.horizontalLines.color + V[a.value.style.chart.grid.x.horizontalLines.opacity],
+              strokeColor: "transparent"
+            }
+          );
+        }) : p.value.yLabels.forEach((e) => {
+          k(
+            s.value,
+            [
+              { x: l.value.left, y: e.y },
+              { x: l.value.right, y: e.y }
+            ],
+            {
+              color: a.value.style.chart.grid.x.horizontalLines.color
+            }
+          );
+        })), a.value.style.chart.grid.y.showAxis && k(
+          s.value,
+          [
+            { x: l.value.left, y: l.value.top },
+            { x: l.value.left, y: l.value.bottom }
+          ],
+          {
+            color: a.value.style.chart.grid.y.axisColor,
+            lineWidth: a.value.style.chart.grid.y.axisThickness
+          }
+        ), a.value.style.chart.grid.x.showAxis && k(
+          s.value,
+          [
+            { x: l.value.left, y: l.value.bottom },
+            { x: l.value.right, y: l.value.bottom }
+          ],
+          {
+            color: a.value.style.chart.grid.x.axisColor,
+            lineWidth: a.value.style.chart.grid.x.axisThickness
+          }
+        ), a.value.style.chart.grid.zeroLine.show && k(
+          s.value,
+          [
+            { x: l.value.left, y: p.value.zero },
+            { x: l.value.right, y: p.value.zero }
+          ],
+          {
+            color: a.value.style.chart.grid.zeroLine.color,
+            lineDash: a.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
+          }
+        ), a.value.style.chart.grid.y.axisLabels.show && p.value.yLabels.forEach((e) => {
+          I(
+            s.value,
+            G({
+              p: a.value.style.chart.grid.y.axisLabels.prefix || "",
+              v: e.value,
+              s: a.value.style.chart.grid.y.axisLabels.suffix || "",
+              r: a.value.style.chart.grid.y.axisLabels.rounding || 0
+            }),
+            e.x + a.value.style.chart.grid.y.axisLabels.offsetX,
+            e.y,
+            {
+              align: "right",
+              font: `${Math.round(y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+              color: a.value.style.chart.grid.y.axisLabels.color
+            }
+          );
+        });
+      }
+      a.value.style.chart.grid.y.axisName && I(
+        s.value,
+        a.value.style.chart.grid.y.axisName,
+        y.value - y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2,
+        l.value.bottom - l.value.height / 2,
+        {
+          font: `${Math.round(y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+          color: a.value.style.chart.color,
+          align: "center",
+          rotation: 90
+        }
+      ), a.value.style.chart.grid.x.axisName && I(
+        s.value,
+        a.value.style.chart.grid.x.axisName,
+        y.value / 2,
+        T.value,
+        {
+          font: `${Math.round(y.value / 40 * a.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+          color: a.value.style.chart.color,
+          align: "center"
+        }
+      );
+    }
+    function aa(e) {
+      for (let t = 0; t < e.coordinatesLine.length; t += 1) {
+        const o = (d.value === t ? y.value / 150 : a.value.style.chart.line.plots.show ? y.value / 200 : 0) * a.value.style.chart.line.plots.radiusRatio;
+        We(
+          s.value,
+          { x: e.coordinatesLine[t].x, y: e.coordinatesLine[t].y },
+          o,
+          {
+            color: a.value.style.chart.backgroundColor,
+            fillStyle: e.color,
+            strokeColor: "transparent"
+          }
+        );
+      }
+    }
+    function la(e) {
+      for (let t = 0; t < e.coordinatesLine.length; t += 1)
+        I(
+          s.value,
+          G({
+            p: e.prefix || "",
+            v: e.coordinatesLine[t].value,
+            s: e.suffix || "",
+            r: e.rounding || 0
+          }),
+          e.coordinatesLine[t].x,
+          e.coordinatesLine[t].y + a.value.style.chart.dataLabels.offsetY,
+          {
+            align: "center",
+            font: `${Math.round(y.value / 40 * a.value.style.chart.dataLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+            color: a.value.style.chart.dataLabels.useSerieColor ? e.color : a.value.style.chart.dataLabels.color,
+            strokeColor: a.value.style.chart.backgroundColor,
+            lineWidth: 0.8
+          }
+        );
+    }
+    function ta() {
+      for (let e = u.value.start; e < u.value.end; e += 1)
+        (u.value.end - u.value.start < a.value.style.chart.grid.y.timeLabels.modulo || u.value.end - u.value.start >= a.value.style.chart.grid.y.timeLabels.modulo && (e % Math.floor((u.value.end - u.value.start) / a.value.style.chart.grid.y.timeLabels.modulo) === 0 || e === d.value + u.value.start)) && I(
+          s.value,
+          a.value.style.chart.grid.y.timeLabels.values[e] || e + 1,
+          l.value.left + l.value.slot * (e - u.value.start) + l.value.slot / 2,
+          l.value.bottom + y.value / a.value.style.chart.grid.y.timeLabels.offsetY,
+          {
+            align: a.value.style.chart.grid.y.timeLabels.rotation === 0 ? "center" : a.value.style.chart.grid.y.timeLabels.rotation > 0 ? "left" : "right",
+            font: `${Math.round(y.value / 40 * a.value.style.chart.grid.y.timeLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+            color: a.value.style.chart.grid.y.timeLabels.color + V[d.value !== null ? d.value + u.value.start === e ? 100 : 20 : 100],
+            rotation: a.value.style.chart.grid.y.timeLabels.rotation
+          }
+        );
+    }
+    function Te() {
+      k(
+        s.value,
+        [
+          { x: l.value.left + l.value.slot * d.value + l.value.slot / 2, y: l.value.top },
+          { x: l.value.left + l.value.slot * d.value + l.value.slot / 2, y: l.value.bottom }
+        ],
+        {
+          color: a.value.style.chart.selector.color,
+          lineDash: a.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
+          lineWidth: 2,
+          linceCap: "round"
+        }
+      );
+    }
+    function oa() {
+      x.value.forEach((e, t) => {
+        for (let o = 0; o < e.coordinatesLine.length; o += 1)
+          fe(
+            s.value,
+            [
+              {
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)),
+                y: r.value.stacked ? e.localZero : p.value.zero
+              },
+              {
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)) + l.value.slot * 0.8 / (r.value.stacked ? 1 : x.value.length),
+                y: r.value.stacked ? e.localZero : p.value.zero
+              },
+              {
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)) + l.value.slot * 0.8 / (r.value.stacked ? 1 : x.value.length),
+                y: e.coordinatesLine[o].y
+              },
+              {
+                x: l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)),
+                y: e.coordinatesLine[o].y
+              }
+            ],
+            {
+              strokeColor: a.value.style.chart.backgroundColor,
+              gradient: {
+                type: "linear",
+                start: {
+                  x: e.coordinatesLine[o].x,
+                  y: e.coordinatesLine[o].y
+                },
+                end: {
+                  x: e.coordinatesLine[o].x,
+                  y: r.value.stacked ? e.localZero : p.value.zero
+                },
+                stops: [
+                  { offset: 0, color: e.color },
+                  { offset: 1, color: Ta(e.color, 0.5) }
+                ]
+              }
+            }
+          ), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && I(
+            s.value,
+            G({
+              p: e.prefix || "",
+              v: e.coordinatesLine[o].value,
+              s: e.suffix || "",
+              r: e.rounding || 0
+            }),
+            l.value.left + l.value.slot * o + l.value.slot / 10 + (r.value.stacked ? 0 : l.value.slot / x.value.length * t - (t === 0 ? 0 : l.value.slot / (5 * x.value.length) * t)) + l.value.slot * 0.4 / (r.value.stacked ? 1 : x.value.length),
+            (e.coordinatesLine[o].value < 0 ? r.value.stacked ? e.localZero : p.value.zero : e.coordinatesLine[o].y) + a.value.style.chart.dataLabels.offsetY,
+            {
+              align: "center",
+              font: `${Math.round(y.value / 40 * a.value.style.chart.dataLabels.fontSizeRatio)}px ${a.value.style.fontFamily}`,
+              color: a.value.style.chart.dataLabels.useSerieColor ? e.color : a.value.style.chart.dataLabels.color,
+              strokeColor: a.value.style.chart.backgroundColor,
+              lineWidth: 0.8
+            }
+          );
+      });
+    }
+    function ua(e) {
+      e.useArea ? r.value.stacked ? Be(
+        s.value,
+        [{ x: e.coordinatesLine[0].x, y: e.localZero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: e.localZero }],
+        {
+          fillColor: e.color + V[a.value.style.chart.area.opacity],
+          strokeColor: "transparent"
+        }
+      ) : Be(
+        s.value,
+        [{ x: e.coordinatesLine[0].x, y: p.value.zero }, ...e.coordinatesLine, { x: e.coordinatesLine.at(-1).x, y: p.value.zero }],
+        {
+          fillColor: e.color + V[a.value.style.chart.area.opacity],
+          strokeColor: "transparent"
+        }
+      ) : k(s.value, e.coordinatesLine, {
+        color: e.color,
+        lineWidth: 3
+      });
+    }
+    function ra() {
+      h.value.forEach((e, t) => {
+        k(
+          s.value,
+          [
+            { x: l.value.left, y: l.value.bottom - e.yOffset },
+            { x: l.value.right, y: l.value.bottom - e.yOffset }
+          ],
+          {
+            color: a.value.style.chart.grid.x.horizontalLines.color,
+            lineWidth: 1
+          }
+        );
+      });
+    }
+    function ve() {
+      ea(), P.value ? (z.value && d.value !== null && a.value.style.chart.selector.show && Te(), oa(), r.value.stacked && a.value.style.chart.grid.x.showAxis && ra(), Ke.value.forEach((e) => {
+        (e.type === "line" || !e.type) && ua(e), z.value && (aa(e), r.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && la(e));
+      }), se.value = Ra(S.value)) : (se.value && s.value.drawImage(se.value, 0, 0), z.value && d.value !== null && a.value.style.chart.selector.show && Te(), z.value && d.value !== null && h.value.forEach((e) => {
+        if (e.type === "line" || !e.type || e.type === "plot") {
+          if (!e.coordinatesLine[d.value]) return;
+          e.coordinatesLine[d.value].x !== void 0 && e.coordinatesLine[d.value].y !== void 0 && We(
+            s.value,
+            {
+              x: e.coordinatesLine[d.value].x,
+              y: e.coordinatesLine[d.value].y
+            },
+            y.value / 150 * a.value.style.chart.line.plots.radiusRatio,
+            {
+              color: a.value.style.chart.backgroundColor,
+              fillStyle: e.color,
+              strokeColor: "transparent"
+            }
+          );
+        }
+      })), a.value.style.chart.grid.y.timeLabels.show && ta(), P.value = !1;
+    }
+    const K = Ma(() => {
+      z.value = !0, Qe();
+    }, F.value > 200 ? 10 : 1, !z.value);
+    function sa(e) {
+      const { left: t } = S.value.getBoundingClientRect(), o = e.clientX - t;
+      if (o * 2 < l.value.left || o * 2 > l.value.right) {
+        q.value = !1, d.value = null;
+        return;
+      }
+      const i = o * 2 - l.value.left;
+      if (d.value = Math.floor(i / l.value.slot), q.value = !0, !z.value) return;
+      let v = "";
+      const f = a.value.style.chart.tooltip.customFormat;
+      He(f) && Sa(() => f({
+        seriesIndex: d.value,
+        datapoint: h.value.map((n) => ({
+          shape: n.shape || null,
+          name: n.name,
+          color: n.color,
+          type: n.type || "line",
+          value: n.series.find((g, L) => L === d.value)
+        })),
+        series: h.value,
+        config: a.value
+      })) ? J.value = f({
+        seriesIndex: d.value,
+        datapoint: h.value.map((n) => ({
+          shape: n.shape || null,
+          name: n.name,
+          color: n.color,
+          type: n.type || "line",
+          value: n.series.find((g, L) => L === d.value)
+        })),
+        series: h.value,
+        config: a.value
+      }) : (a.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value] && (v += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${a.value.style.chart.tooltip.borderColor}; width:100%">${a.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[d.value]}</div>`), v += qe.value.join(""), J.value = v), z.value = !1;
+    }
+    le(() => d.value, (e) => {
+      K();
+    }), le(() => u.value, (e) => {
+      P.value = !0, ve();
+    }, {
+      deep: !0
+    }), le(() => r.value.showDataLabels, (e) => {
+      P.value = !0, ve();
+    }), le(() => r.value.stacked, (e) => {
+      P.value = !0, z.value = !0, K();
+    });
+    function na() {
+      q.value = !1, d.value = null, J.value = "";
+    }
+    const Q = c(null), ee = c(null);
+    da(() => {
+      if (Ca(N.dataset) ? wa({
+        componentName: "VueUiXyCanvas",
+        type: "dataset"
+      }) : S.value && (s.value = S.value.getContext("2d", { willReadFrequently: !0 })), a.value.responsive) {
+        const e = Oa(() => {
+          const { width: t, height: o } = Ia({
+            chart: j.value,
+            title: a.value.style.chart.title.text ? xe.value : null,
+            legend: a.value.style.chart.legend.show ? Le.value : null,
+            slicer: a.value.style.chart.zoom.show && F.value > 1 ? ke.value : null
+          });
+          Ce.value = `${t} / ${o}`;
+        });
+        Q.value = new ResizeObserver(e), Q.value.observe(j.value.parentNode);
+      }
+      ee.value = new ResizeObserver((e) => {
+        for (const t of e)
+          t.contentBoxSize && D.value && (P.value = !0, K());
+      }), ee.value.observe(D.value);
+    }), ha(() => {
+      ee.value && ee.value.disconnect(), Q.value && Q.value.disconnect();
+    });
+    function Me(e) {
+      Ae("selectLegend", h.value.find((t) => t.absoluteIndex === e)), w.value.includes(e) ? w.value = w.value.filter((t) => t !== e) : w.value.push(e), P.value = !0, K();
+    }
+    const Re = b(() => H.value.map((e, t) => ({
+      ...e,
+      name: e.name,
+      color: De(e.color) || ze.value[t] || E[t] || E[t % E.length],
+      shape: e.shape || "circle",
+      prefix: e.prefix || "",
+      suffix: e.suffix || "",
+      rounding: e.rounding || 0
+    })).map((e) => ({
+      ...e,
+      opacity: w.value.includes(e.absoluteIndex) ? 0.5 : 1,
+      segregate: () => Me(e.absoluteIndex),
+      isSegregated: w.value.includes(e.absoluteIndex)
+    }))), ia = b(() => ({
+      cy: "donut-div-legend",
+      backgroundColor: a.value.style.chart.legend.backgroundColor,
+      color: a.value.style.chart.legend.color,
+      fontSize: a.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: a.value.style.chart.legend.bold ? "bold" : ""
+    })), ae = b(() => {
+      const e = [""].concat(h.value.map((v) => v.name)).concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>');
+      let t = [];
+      for (let v = 0; v < F.value; v += 1) {
+        const f = h.value.map((n) => n.series[v] ?? 0).reduce((n, g) => n + g, 0);
+        t.push([a.value.style.chart.grid.y.timeLabels.values.slice(u.value.start, u.value.end)[v] ?? v + 1].concat(h.value.map((n) => (n.series[v] ?? 0).toFixed(a.value.table.rounding))).concat((f ?? 0).toFixed(a.value.table.rounding)));
+      }
+      const o = {
+        th: {
+          backgroundColor: a.value.table.th.backgroundColor,
+          color: a.value.table.th.color,
+          outline: a.value.table.th.outline
+        },
+        td: {
+          backgroundColor: a.value.table.td.backgroundColor,
+          color: a.value.table.td.color,
+          outline: a.value.table.td.outline
+        },
+        breakpoint: a.value.table.responsiveBreakpoint
+      }, i = [a.value.table.columnNames.period].concat(h.value.map((v) => v.name)).concat(a.value.table.columnNames.total);
+      return { head: e, body: t.slice(0, u.value.end - u.value.start), config: o, colNames: i };
+    }), Oe = b(() => {
+      if (h.value.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
+      const e = h.value.map((o) => ({
+        label: o.name,
+        color: o.color,
+        type: o.type
+      })), t = [];
+      for (let o = u.value.start; o < u.value.end; o += 1) {
+        const i = [a.value.style.chart.grid.y.timeLabels.values[o] || o + 1];
+        h.value.forEach((v) => {
+          i.push(Number((v.series[o] || 0).toFixed(a.value.table.rounding)));
+        }), t.push(i);
+      }
+      return { head: e, body: t };
+    });
+    function Ie() {
+      const e = [[a.value.style.chart.title.text], [a.value.style.chart.title.subtitle.text], [""]], t = ["", ...Oe.value.head.map((f) => f.label)], o = Oe.value.body, i = e.concat([t]).concat(o), v = za(i);
+      $a({ csvContent: v, title: a.value.style.chart.title.text || "vue-ui-xy-canvas" });
+    }
+    function va() {
+      return h.value;
+    }
+    function Pe() {
+      r.value.showTable = !r.value.showTable;
+    }
+    function Fe() {
+      r.value.showDataLabels = !r.value.showDataLabels;
+    }
+    function Ee() {
+      r.value.stacked = !r.value.stacked;
+    }
+    function Ne() {
+      r.value.showTooltip = !r.value.showTooltip;
+    }
+    return Ue({
+      getData: va,
+      generateCsv: Ie,
+      generatePdf: we,
+      generateImage: Se,
+      toggleTable: Pe,
+      toggleLabels: Fe,
+      toggleStack: Ee,
+      toggleTooltip: Ne
+    }), (e, t) => (O(), de("div", {
+      style: U(`width:100%; position: relative;${a.value.responsive ? "height: 100%" : ""}`),
+      ref_key: "xy",
+      ref: j,
+      id: `xy_canvas_${re.value}`,
+      class: ya(`vue-ui-donut ${ne.value ? "vue-data-ui-wrapper-fullscreen" : ""}`)
+    }, [
+      a.value.style.chart.title.text ? (O(), de("div", {
+        key: 0,
+        ref_key: "chartTitle",
+        ref: xe,
+        style: U(`width:100%;background:${a.value.style.chart.backgroundColor};`)
+      }, [
+        he(Ea, {
+          config: {
+            title: {
+              cy: "xy-canvas-title",
+              ...a.value.style.chart.title
+            },
+            subtitle: {
+              cy: "xy-canvas-subtitle",
+              ...a.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 4)) : te("", !0),
+      a.value.userOptions.show && ie.value ? (O(), A(Da, {
+        ref: "details",
+        key: `user_option_${me.value}`,
+        backgroundColor: a.value.style.chart.backgroundColor,
+        color: a.value.style.chart.color,
+        isPrinting: Y(Ze),
+        isImaging: Y(Ge),
+        uid: re.value,
+        hasTooltip: a.value.userOptions.buttons.tooltip && a.value.style.chart.tooltip.show,
+        hasPdf: a.value.userOptions.buttons.pdf,
+        hasImg: a.value.userOptions.buttons.img,
+        hasXls: a.value.userOptions.buttons.csv,
+        hasLabel: a.value.userOptions.buttons.labels,
+        hasStack: ge.dataset.length > 1 && a.value.userOptions.buttons.stack,
+        hasFullscreen: a.value.userOptions.buttons.fullscreen,
+        hasTable: u.value.end - u.value.start < 200 && a.value.userOptions.buttons.table,
+        isFullscreen: ne.value,
+        isTooltip: r.value.showTooltip,
+        isStacked: r.value.stacked,
+        titles: { ...a.value.userOptions.buttonTitles },
+        chartElement: j.value,
+        onToggleFullscreen: Ve,
+        onGeneratePdf: Y(we),
+        onGenerateCsv: Ie,
+        onGenerateImage: Y(Se),
+        onToggleTable: Pe,
+        onToggleLabels: Fe,
+        onToggleStack: Ee,
+        onToggleTooltip: Ne
+      }, fa({ _: 2 }, [
+        e.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: m(() => [
+            C(e.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: m(() => [
+            C(e.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: m(() => [
+            C(e.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        e.$slots.optionImg ? {
+          name: "optionImg",
+          fn: m(() => [
+            C(e.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        e.$slots.optionTable ? {
+          name: "optionTable",
+          fn: m(() => [
+            C(e.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        e.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: m(() => [
+            C(e.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        e.$slots.optionStack ? {
+          name: "optionStack",
+          fn: m(() => [
+            C(e.$slots, "optionStack", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        e.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: m(({ toggleFullscreen: o, isFullscreen: i }) => [
+            C(e.$slots, "optionFullscreen", oe(ue({ toggleFullscreen: o, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasLabel", "hasStack", "hasFullscreen", "hasTable", "isFullscreen", "isTooltip", "isStacked", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : te("", !0),
+      Z("div", {
+        class: "vue-ui-xy-canvas",
+        style: U(`position: relative; aspect-ratio: ${Ce.value}`),
+        ref_key: "container",
+        ref: D
+      }, [
+        ie.value ? (O(), de("canvas", {
+          key: 0,
+          ref_key: "canvas",
+          ref: S,
+          style: { width: "100%", height: "100%" },
+          onMousemove: t[0] || (t[0] = (o) => sa(o)),
+          onMouseleave: na
+        }, null, 544)) : (O(), A(Ba, {
+          key: 1,
+          config: {
+            type: "line",
+            style: {
+              backgroundColor: a.value.style.chart.backgroundColor,
+              line: {
+                axis: {
+                  color: "#CCCCCC"
+                },
+                path: {
+                  color: "#CCCCCC",
+                  strokeWidth: 0.5
+                }
+              }
+            }
+          }
+        }, null, 8, ["config"])),
+        he(Pa, {
+          show: r.value.showTooltip && q.value,
+          backgroundColor: a.value.style.chart.tooltip.backgroundColor,
+          color: a.value.style.chart.tooltip.color,
+          fontSize: a.value.style.chart.tooltip.fontSize,
+          borderRadius: a.value.style.chart.tooltip.borderRadius,
+          borderColor: a.value.style.chart.tooltip.borderColor,
+          borderWidth: a.value.style.chart.tooltip.borderWidth,
+          parent: S.value,
+          content: J.value,
+          backgroundOpacity: a.value.style.chart.tooltip.backgroundOpacity,
+          isCustom: Y(He)(a.value.style.chart.tooltip.customFormat)
+        }, {
+          "tooltip-before": m(() => [
+            C(e.$slots, "tooltip-before", oe(ue({ ...pe.value })), void 0, !0)
+          ]),
+          "tooltip-after": m(() => [
+            C(e.$slots, "tooltip-after", oe(ue({ ...pe.value })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "parent", "content", "backgroundOpacity", "isCustom"])
+      ], 4),
+      Z("div", {
+        ref_key: "chartSlicer",
+        ref: ke,
+        style: U(`width:100%;background:${a.value.style.chart.backgroundColor}`),
+        "data-html2canvas-ignore": ""
+      }, [
+        a.value.style.chart.zoom.show && F.value > 1 ? (O(), A(Na, {
+          key: `slicer_${be.value}`,
+          background: a.value.style.chart.zoom.color,
+          borderColor: a.value.style.chart.backgroundColor,
+          fontSize: a.value.style.chart.zoom.fontSize,
+          useResetSlot: a.value.style.chart.zoom.useResetSlot,
+          labelLeft: a.value.style.chart.grid.y.timeLabels.values[u.value.start] ? a.value.style.chart.grid.y.timeLabels.values[u.value.start] : "",
+          labelRight: a.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] ? a.value.style.chart.grid.y.timeLabels.values[u.value.end - 1] : "",
+          textColor: a.value.style.chart.color,
+          inputColor: a.value.style.chart.zoom.color,
+          selectColor: a.value.style.chart.zoom.highlightColor,
+          max: F.value,
+          min: 0,
+          valueStart: u.value.start,
+          valueEnd: u.value.end,
+          start: u.value.start,
+          "onUpdate:start": t[1] || (t[1] = (o) => u.value.start = o),
+          end: u.value.end,
+          "onUpdate:end": t[2] || (t[2] = (o) => u.value.end = o),
+          onReset: Je
+        }, {
+          "reset-action": m(({ reset: o }) => [
+            C(e.$slots, "reset-action", oe(ue({ reset: o })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end"])) : te("", !0)
+      ], 4),
+      Z("div", {
+        ref_key: "chartLegend",
+        ref: Le
+      }, [
+        a.value.style.chart.legend.show && ie.value ? (O(), A(Fa, {
+          key: 0,
+          legendSet: Re.value,
+          config: ia.value,
+          onClickMarker: t[3] || (t[3] = ({ i: o }) => Me(o))
+        }, {
+          item: m(({ legend: o, index: i }) => [
+            Z("div", {
+              onClick: (v) => o.segregate(),
+              style: U(`opacity:${w.value.includes(i) ? 0.5 : 1}`)
+            }, _e(o.name), 13, Aa)
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : C(e.$slots, "legend", {
+          key: 1,
+          legend: Re.value
+        }, void 0, !0)
+      ], 512),
+      u.value.end - u.value.start < 200 ? (O(), A(Ha, {
+        key: 2,
+        hideDetails: "",
+        config: {
+          open: r.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: a.value.style.chart.backgroundColor,
+            color: a.value.style.chart.color
+          },
+          head: {
+            backgroundColor: a.value.style.chart.backgroundColor,
+            color: a.value.style.chart.color
+          }
+        }
+      }, {
+        content: m(() => [
+          he(Wa, {
+            colNames: ae.value.colNames,
+            head: ae.value.head,
+            body: ae.value.body,
+            config: ae.value.config,
+            title: `${a.value.style.chart.title.text}${a.value.style.chart.title.subtitle.text ? ` : ${a.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: t[4] || (t[4] = (o) => r.value.showTable = !1)
+          }, {
+            th: m(({ th: o }) => [
+              Z("div", { innerHTML: o }, null, 8, Ya)
+            ]),
+            td: m(({ td: o }) => [
+              ga(_e(o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"])
+        ]),
+        _: 1
+      }, 8, ["config"])) : te("", !0)
+    ], 14, Ua));
+  }
+}, rl = /* @__PURE__ */ Xa(Za, [["__scopeId", "data-v-8ae56fe6"]]);
+export {
+  rl as default
+};