vue-data-ui 2.3.2 → 2.3.4

package/dist/vue-ui-heatmap-DwqQqEsk.js

@@ -0,0 +1,598 @@
+import { useCssVars as ke, computed as c, ref as g, onMounted as Ce, openBlock as s, createElementBlock as n, normalizeClass as G, normalizeStyle as f, createVNode as q, createCommentVNode as y, createBlock as K, unref as z, createSlots as $e, withCtx as w, renderSlot as _, normalizeProps as J, guardReactiveProps as Q, Fragment as T, renderList as S, createElementVNode as u, toDisplayString as p, withKeys as Le, createTextVNode as ze, nextTick as Te } from "vue";
+import { u as Se, o as Ae, e as de, c as Z, t as Ne, g as Me, H as ee, X as Fe, C as Ve, f as ve, v as Ie, w as Oe, n as Pe, q as Be } from "./index-uOtklCCx.js";
+import { _ as Re } from "./Title-2iks1ziC.js";
+import { u as Ee, U as Ge } from "./usePrinter-B6xQCyL-.js";
+import { _ as He } from "./Tooltip-C3phqKuU.js";
+import Xe from "./vue-ui-skeleton-BM9rwmxY.js";
+import Ue from "./BaseIcon-7_g11dRj.js";
+import je from "./vue-ui-accordion-HJPf7My0.js";
+import { u as ce } from "./useNestedProp-BgWkUab_.js";
+import { _ as De } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const We = ["id"], Ye = ["xmlns", "viewBox"], qe = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], Ke = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"], Je = ["font-size", "font-weight", "fill", "x", "y"], Qe = ["x", "y", "width", "height", "onMouseover"], Ze = { key: 0 }, el = ["font-size", "fill", "x", "y", "font-weight"], ll = { key: 0 }, tl = ["x", "y", "font-size", "fill", "font-weight"], al = { key: 1 }, ol = ["x", "y", "width", "height", "stroke", "stroke-width"], sl = { key: 2 }, ul = ["id"], nl = ["stop-color"], il = ["stop-color"], rl = ["x", "y", "font-size", "fill"], dl = ["x", "y", "height", "rx", "fill"], vl = ["x", "y", "font-size", "fill"], cl = ["stroke", "x1", "x2", "y1", "y2"], yl = ["fill", "d"], hl = { key: 3 }, gl = {
+  id: "colorScaleHorizontal",
+  x1: "0%",
+  x2: "100%",
+  y1: "0%",
+  y2: "0%"
+}, pl = ["stop-color"], fl = ["stop-color"], bl = ["x", "y", "width", "height", "rx"], ml = ["x", "y", "font-size", "fill"], xl = ["x", "y", "font-size", "fill"], wl = ["stroke", "x1", "x2", "y1", "y2"], _l = ["fill", "d"], kl = { class: "vue-ui-data-table" }, Cl = { key: 0 }, $l = ["data-cell"], Ll = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, zl = ["data-cell"], Tl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Sl = {
+  __name: "vue-ui-heatmap",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(P, { expose: ye }) {
+    const d = P;
+    ke((l) => ({
+      "2d7e5208": l.tdo
+    }));
+    const { vue_ui_heatmap: he } = Se(), B = c(() => !!d.dataset && d.dataset.length);
+    Ae(d.dataset) && de({
+      componentName: "VueUiHeatmap",
+      type: "dataset"
+    });
+    const N = g(Z()), H = g(null), ge = g(null), X = g(!1), U = g(""), le = g(void 0), M = g(null), te = g(0), ae = g(null), oe = g(!1), e = c(() => {
+      const l = ce({
+        userConfig: d.config,
+        defaultConfig: he
+      });
+      return l.theme ? {
+        ...ce({
+          userConfig: Ne.vue_ui_heatmap[l.theme] || d.config,
+          defaultConfig: l
+        })
+      } : l;
+    }), { isPrinting: pe, isImaging: fe, generatePdf: se, generateImage: ue } = Ee({
+      elementId: `heatmap__${N.value}`,
+      fileName: e.value.style.title.text || "vue-ui-heatmap"
+    }), b = g({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    }), be = c(() => e.value.table.responsiveBreakpoint);
+    function me() {
+      new ResizeObserver((a) => {
+        a.forEach((o) => {
+          oe.value = o.contentRect.width < be.value;
+        });
+      }).observe(ae.value);
+    }
+    Ce(me);
+    const A = c(() => Math.max(...d.dataset.flatMap((l) => (l.values || []).length))), m = c(() => {
+      const l = e.value.style.layout.padding.top + e.value.style.layout.padding.bottom + d.dataset.length * e.value.style.layout.cells.height, a = e.value.style.layout.padding.left + e.value.style.layout.padding.right + (A.value < d.dataset.length ? d.dataset.length : A.value) * e.value.style.layout.cells.height, o = l + (e.value.style.legend.show ? e.value.style.legend.position === "right" ? 0 : e.value.style.layout.cells.height * 2 : 0);
+      return {
+        height: l,
+        heightWithLegend: o,
+        width: a
+      };
+    }), R = c(() => e.value.style.legend.position), t = c(() => ({
+      top: e.value.style.layout.padding.top,
+      left: e.value.style.layout.padding.left,
+      right: m.value.width - e.value.style.layout.padding.right - (R.value === "right" && e.value.style.legend.show ? 92 : 0),
+      bottom: m.value.height - e.value.style.layout.padding.bottom,
+      height: m.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom,
+      width: m.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left - (R.value === "right" && e.value.style.legend.show ? 92 : 0)
+    })), j = c(() => i.value.height * d.dataset.length), x = c(() => Math.max(...d.dataset.flatMap((l) => l.values))), F = c(() => Math.min(...d.dataset.flatMap((l) => l.values))), L = c(() => {
+      const l = d.dataset.flatMap((o) => o.values);
+      return l.reduce((o, r) => o + r, 0) / l.length;
+    }), i = c(() => ({
+      width: t.value.width / A.value,
+      height: t.value.width / (A.value < d.dataset.length ? d.dataset.length : A.value)
+    })), k = c(() => {
+      const l = e.value.style.layout.dataLabels.yAxis.values.length ? e.value.style.layout.dataLabels.yAxis.values : d.dataset.map((o) => o.name), a = e.value.style.layout.dataLabels.xAxis.values;
+      return {
+        yLabels: l,
+        xLabels: a.slice(0, A.value)
+      };
+    }), E = c(() => (d.dataset.forEach((l, a) => {
+      Me({
+        datasetObject: l,
+        requiredAttributes: ["values"]
+      }).forEach((o) => {
+        de({
+          componentName: "VueUiHeatmap",
+          type: "datasetSerieAttribute",
+          property: "values",
+          index: a
+        });
+      });
+    }), d.dataset.map((l) => ({
+      ...l,
+      temperatures: (l.values || []).map((a, o) => a >= L.value ? {
+        side: "up",
+        color: ee(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, F.value, x.value, a),
+        ratio: Math.abs(Math.abs(a - L.value) / Math.abs(x.value - L.value)) > 1 ? 1 : Math.abs(Math.abs(a - L.value) / Math.abs(x.value - L.value)),
+        value: a,
+        yAxisName: l.name,
+        xAxisName: k.value.xLabels[o],
+        id: `vue-data-ui-heatmap-cell-${Z()}`
+      } : {
+        side: "down",
+        ratio: Math.abs(1 - Math.abs(a) / Math.abs(L.value)) > 1 ? 1 : Math.abs(1 - Math.abs(a) / Math.abs(L.value)),
+        color: ee(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, F.value, x.value, a),
+        value: a,
+        yAxisName: l.name,
+        xAxisName: k.value.xLabels[o],
+        id: `vue-data-ui-heatmap-cell-${Z()}`
+      })
+    })))), C = g(null), D = g(null);
+    function xe(l, a, o, r) {
+      M.value = { x: o, y: r }, console.log(l);
+      const { value: v, yAxisName: h, xAxisName: $, id: _e } = l;
+      le.value = _e, C.value = v, D.value = {
+        datapoint: l,
+        seriesIndex: a,
+        series: E.value,
+        config: e.value
+      }, X.value = !0;
+      let W = "";
+      const Y = e.value.style.tooltip.customFormat;
+      Ie(Y) && Oe(() => Y({
+        datapoint: l,
+        seriesIndex: a,
+        series: E.value,
+        config: e.value
+      })) ? U.value = Y({
+        datapoint: l,
+        seriesIndex: a,
+        series: E.value,
+        config: e.value
+      }) : (W += `<div>${h} ${$ ? `${$}` : ""}</div>`, W += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor};font-weight:bold;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center"><span style="color:${ee(e.value.style.layout.cells.colors.cold, e.value.style.layout.cells.colors.hot, F.value, x.value, v)}">⬤</span><span>${isNaN(v) ? "-" : ve({ p: e.value.style.layout.dataLabels.prefix, v, s: e.value.style.layout.dataLabels.suffix, r: e.value.style.tooltip.roundingValue })}</span></div>`, U.value = `<div style="font-size:${e.value.style.tooltip.fontSize}px">${W}</div>`);
+    }
+    const V = c(() => t.value.top + j.value * (1 - C.value / x.value)), I = c(() => t.value.left + (m.value.width - t.value.left - e.value.style.layout.padding.right) * (C.value / x.value));
+    c(() => {
+      const l = d.dataset.map((o) => ({
+        name: o.name
+      })), a = d.dataset.map((o) => o.values);
+      return { head: l, body: a };
+    });
+    function ne() {
+      Te(() => {
+        const l = ["", ...d.dataset.map((v, h) => v.name)], a = [];
+        for (let v = 0; v < k.value.xLabels.length; v += 1) {
+          const h = [k.value.xLabels[v]];
+          for (let $ = 0; $ < d.dataset.length; $ += 1)
+            h.push([d.dataset[$].values[v]]);
+          a.push(h);
+        }
+        const o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([l]).concat(a), r = Pe(o);
+        Be({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
+      });
+    }
+    const O = g(!1);
+    function we(l) {
+      O.value = l, te.value += 1;
+    }
+    function ie() {
+      b.value.showTable = !b.value.showTable;
+    }
+    function re() {
+      b.value.showTooltip = !b.value.showTooltip;
+    }
+    return ye({
+      generatePdf: se,
+      generateCsv: ne,
+      generateImage: ue,
+      toggleTable: ie,
+      toggleTooltip: re
+    }), (l, a) => (s(), n("div", {
+      ref_key: "heatmapChart",
+      ref: H,
+      class: G(`vue-ui-heatmap ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: f(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.title.text ? "" : "padding-top:36px"};background:${e.value.style.backgroundColor}`),
+      id: `heatmap__${N.value}`
+    }, [
+      e.value.style.title.text ? (s(), n("div", {
+        key: 0,
+        style: f(`width:100%;background:${e.value.style.backgroundColor}`)
+      }, [
+        q(Re, {
+          config: {
+            title: {
+              cy: "heatmap-div-title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "heatmap-div-subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"])
+      ], 4)) : y("", !0),
+      e.value.userOptions.show && B.value ? (s(), K(Ge, {
+        ref_key: "details",
+        ref: ge,
+        key: `user_options_${te.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: z(fe),
+        isPrinting: z(pe),
+        uid: N.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: O.value,
+        isTooltip: b.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: H.value,
+        onToggleFullscreen: we,
+        onGeneratePdf: z(se),
+        onGenerateCsv: ne,
+        onGenerateImage: z(ue),
+        onToggleTable: ie,
+        onToggleTooltip: re
+      }, $e({ _: 2 }, [
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: w(() => [
+            _(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: w(() => [
+            _(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: w(() => [
+            _(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: w(() => [
+            _(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: w(() => [
+            _(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: w(({ toggleFullscreen: o, isFullscreen: r }) => [
+            _(l.$slots, "optionFullscreen", J(Q({ toggleFullscreen: o, isFullscreen: r })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : y("", !0),
+      B.value ? (s(), n("svg", {
+        key: 2,
+        xmlns: z(Fe),
+        class: G({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        viewBox: `0 0 ${m.value.width} ${m.value.heightWithLegend}`,
+        style: f(`max-width:100%;overflow:visible;background:${e.value.style.backgroundColor};color:${e.value.style.color}`)
+      }, [
+        (s(!0), n(T, null, S(E.value, (o, r) => (s(), n("g", null, [
+          (s(!0), n(T, null, S(o.temperatures, (v, h) => (s(), n("g", null, [
+            u("rect", {
+              x: t.value.left + i.value.width * h + e.value.style.layout.cells.spacing / 2,
+              y: t.value.top + i.value.height * r + e.value.style.layout.cells.spacing / 2,
+              width: i.value.width - e.value.style.layout.cells.spacing,
+              height: i.value.height - e.value.style.layout.cells.spacing,
+              fill: e.value.style.layout.cells.colors.underlayer,
+              stroke: e.value.style.backgroundColor,
+              "stroke-width": e.value.style.layout.cells.spacing
+            }, null, 8, qe),
+            u("rect", {
+              x: t.value.left + i.value.width * h + e.value.style.layout.cells.spacing / 2,
+              y: t.value.top + i.value.height * r + e.value.style.layout.cells.spacing / 2,
+              width: i.value.width - e.value.style.layout.cells.spacing,
+              height: i.value.height - e.value.style.layout.cells.spacing,
+              fill: v.color,
+              stroke: e.value.style.backgroundColor,
+              "stroke-width": e.value.style.layout.cells.spacing
+            }, null, 8, Ke),
+            e.value.style.layout.cells.value.show ? (s(), n("text", {
+              key: 0,
+              "text-anchor": "middle",
+              "font-size": e.value.style.layout.cells.value.fontSize,
+              "font-weight": e.value.style.layout.cells.value.bold ? "bold" : "normal",
+              fill: z(Ve)(v.color),
+              x: t.value.left + i.value.width * h + i.value.width / 2,
+              y: t.value.top + i.value.height * r + i.value.height / 2 + e.value.style.layout.cells.value.fontSize / 3
+            }, p(e.value.style.layout.dataLabels.prefix) + p(Number(v.value.toFixed(e.value.style.layout.cells.value.roundingValue)).toLocaleString()) + p(e.value.style.layout.dataLabels.suffix), 9, Je)) : y("", !0)
+          ]))), 256)),
+          (s(!0), n(T, null, S(o.temperatures, (v, h) => (s(), n("g", null, [
+            u("rect", {
+              x: t.value.left + i.value.width * h,
+              y: t.value.top + i.value.height * r,
+              width: i.value.width,
+              height: i.value.height,
+              fill: "transparent",
+              stroke: "none",
+              onMouseover: ($) => xe(v, r, t.value.left + i.value.width * h, t.value.top + i.value.height * r),
+              onMouseout: a[0] || (a[0] = ($) => {
+                X.value = !1, le.value = void 0, C.value = null, M.value = null;
+              })
+            }, null, 40, Qe)
+          ]))), 256)),
+          e.value.style.layout.dataLabels.yAxis.show ? (s(), n("g", Ze, [
+            u("text", {
+              "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
+              fill: e.value.style.layout.dataLabels.yAxis.color,
+              x: t.value.left + e.value.style.layout.dataLabels.yAxis.offsetX - 6,
+              y: t.value.top + i.value.height * r + i.value.height / 2 + e.value.style.layout.dataLabels.yAxis.fontSize / 3 + e.value.style.layout.dataLabels.yAxis.offsetY,
+              "text-anchor": "end",
+              "font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
+            }, p(k.value.yLabels[r]), 9, el)
+          ])) : y("", !0)
+        ]))), 256)),
+        e.value.style.layout.dataLabels.xAxis.show ? (s(), n("g", ll, [
+          (s(!0), n(T, null, S(k.value.xLabels, (o, r) => (s(), n("text", {
+            x: t.value.left + i.value.width / 2 + t.value.width / k.value.xLabels.length * r + e.value.style.layout.dataLabels.xAxis.offsetX,
+            y: t.value.top + e.value.style.layout.dataLabels.xAxis.offsetY - 6,
+            "text-anchor": "middle",
+            "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
+            fill: e.value.style.layout.dataLabels.xAxis.color,
+            "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
+          }, p(o), 9, tl))), 256))
+        ])) : y("", !0),
+        M.value ? (s(), n("g", al, [
+          u("rect", {
+            style: { "pointer-events": "none" },
+            x: M.value.x - e.value.style.layout.cells.selected.border / 2 + e.value.style.layout.cells.spacing,
+            y: M.value.y - e.value.style.layout.cells.selected.border / 2 + e.value.style.layout.cells.spacing,
+            width: i.value.width - e.value.style.layout.cells.spacing + e.value.style.layout.cells.selected.border - e.value.style.layout.cells.spacing,
+            height: i.value.height - e.value.style.layout.cells.spacing + e.value.style.layout.cells.selected.border - e.value.style.layout.cells.spacing,
+            fill: "transparent",
+            stroke: e.value.style.layout.cells.selected.color,
+            "stroke-width": e.value.style.layout.cells.selected.border,
+            rx: 1
+          }, null, 8, ol)
+        ])) : y("", !0),
+        e.value.style.legend.show && R.value === "right" ? (s(), n("g", sl, [
+          u("defs", null, [
+            u("linearGradient", {
+              id: `colorScaleVertical_${N.value}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              u("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.cells.colors.hot
+              }, null, 8, nl),
+              u("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.layout.cells.colors.cold
+              }, null, 8, il)
+            ], 8, ul)
+          ]),
+          u("text", {
+            x: t.value.right + 36 + 18,
+            y: t.value.top - e.value.style.legend.fontSize * 1.5,
+            "text-anchor": "middle",
+            "font-size": e.value.style.legend.fontSize * 2,
+            fill: e.value.style.legend.color
+          }, p(Number(x.value.toFixed(e.value.style.legend.roundingValue)).toLocaleString()), 9, rl),
+          u("rect", {
+            x: t.value.right + 36,
+            y: t.value.top,
+            width: 36,
+            height: j.value,
+            rx: e.value.style.legend.scaleBorderRadius,
+            fill: `url(#colorScaleVertical_${N.value})`
+          }, null, 8, dl),
+          u("text", {
+            x: t.value.right + 36 + 18,
+            y: t.value.top + j.value + e.value.style.legend.fontSize * 2.5,
+            "text-anchor": "middle",
+            "font-size": e.value.style.legend.fontSize * 2,
+            fill: e.value.style.legend.color
+          }, p(Number(F.value.toFixed(e.value.style.legend.roundingValue)).toLocaleString()), 9, vl),
+          C.value !== null ? (s(), n("line", {
+            key: 0,
+            stroke: e.value.style.backgroundColor,
+            "stroke-width": "2",
+            x1: t.value.right + 36,
+            x2: t.value.right + 72,
+            y1: V.value,
+            y2: V.value
+          }, null, 8, cl)) : y("", !0),
+          C.value !== null ? (s(), n("path", {
+            key: 1,
+            fill: e.value.style.color,
+            stroke: "none",
+            d: `M ${t.value.right + 36},${V.value} ${t.value.right + 26},${V.value - 8} ${t.value.right + 26},${V.value + 8}z`
+          }, null, 8, yl)) : y("", !0)
+        ])) : y("", !0),
+        e.value.style.legend.show && R.value === "bottom" ? (s(), n("g", hl, [
+          u("defs", null, [
+            u("linearGradient", gl, [
+              u("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.cells.colors.cold
+              }, null, 8, pl),
+              u("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.layout.cells.colors.hot
+              }, null, 8, fl)
+            ])
+          ]),
+          u("rect", {
+            x: t.value.left,
+            y: t.value.bottom + e.value.style.layout.cells.height,
+            width: m.value.width - t.value.left - e.value.style.layout.padding.right,
+            height: e.value.style.layout.cells.height,
+            rx: e.value.style.legend.scaleBorderRadius > e.value.style.layout.cells.height / 2 ? e.value.style.layout.cells.height / 2 : e.value.style.legend.scaleBorderRadius,
+            fill: "url(#colorScaleHorizontal)"
+          }, null, 8, bl),
+          u("text", {
+            x: t.value.left,
+            y: t.value.bottom + e.value.style.layout.cells.height * 2 + e.value.style.legend.fontSize * 2,
+            "text-anchor": "start",
+            "font-size": e.value.style.legend.fontSize * 2,
+            fill: e.value.style.legend.color
+          }, p(Number(F.value.toFixed(e.value.style.legend.roundingValue)).toLocaleString()), 9, ml),
+          u("text", {
+            x: t.value.right,
+            y: t.value.bottom + e.value.style.layout.cells.height * 2 + e.value.style.legend.fontSize * 2,
+            "text-anchor": "end",
+            "font-size": e.value.style.legend.fontSize * 2,
+            fill: e.value.style.legend.color
+          }, p(Number(x.value.toFixed(e.value.style.legend.roundingValue)).toLocaleString()), 9, xl),
+          C.value !== null ? (s(), n("line", {
+            key: 0,
+            stroke: e.value.style.backgroundColor,
+            "stroke-width": "2",
+            x1: I.value,
+            x2: I.value,
+            y1: t.value.bottom + e.value.style.layout.cells.height,
+            y2: t.value.bottom + e.value.style.layout.cells.height * 2
+          }, null, 8, wl)) : y("", !0),
+          C.value !== null ? (s(), n("path", {
+            key: 1,
+            fill: e.value.style.color,
+            stroke: "none",
+            d: `M ${I.value},${t.value.bottom + e.value.style.layout.cells.height} ${I.value - 12},${t.value.bottom + e.value.style.layout.cells.height - 20} ${I.value + 12},${t.value.bottom + e.value.style.layout.cells.height - 20}z`
+          }, null, 8, _l)) : y("", !0)
+        ])) : y("", !0),
+        _(l.$slots, "svg", { svg: m.value }, void 0, !0)
+      ], 14, Ye)) : y("", !0),
+      B.value ? y("", !0) : (s(), K(Xe, {
+        key: 3,
+        config: {
+          type: "heatmap",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            heatmap: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      q(He, {
+        show: b.value.showTooltip && X.value,
+        backgroundColor: e.value.style.tooltip.backgroundColor,
+        color: e.value.style.tooltip.color,
+        borderRadius: e.value.style.tooltip.borderRadius,
+        borderColor: e.value.style.tooltip.borderColor,
+        borderWidth: e.value.style.tooltip.borderWidth,
+        fontSize: e.value.style.tooltip.fontSize,
+        backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
+        parent: H.value,
+        content: U.value,
+        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": w(() => [
+          _(l.$slots, "tooltip-before", J(Q({ ...D.value })), void 0, !0)
+        ]),
+        "tooltip-after": w(() => [
+          _(l.$slots, "tooltip-after", J(Q({ ...D.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
+      B.value ? (s(), K(je, {
+        key: 4,
+        hideDetails: "",
+        config: {
+          open: b.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: e.value.style.backgroundColor,
+            color: e.value.style.color
+          },
+          head: {
+            backgroundColor: e.value.style.backgroundColor,
+            color: e.value.style.color
+          }
+        }
+      }, {
+        content: w(() => [
+          u("div", {
+            ref_key: "tableContainer",
+            ref: ae,
+            class: "vue-ui-heatmap-table"
+          }, [
+            u("div", {
+              style: "width:100%;overflow-x:auto;padding-top:36px;position:relative",
+              class: G({ "vue-ui-responsive": oe.value })
+            }, [
+              u("div", {
+                role: "button",
+                tabindex: "0",
+                style: f(`width:32px; position: absolute; top: 0; left:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.value.table.th.backgroundColor};`),
+                onClick: a[1] || (a[1] = (o) => b.value.showTable = !1),
+                onKeypress: a[2] || (a[2] = Le((o) => b.value.showTable = !1, ["enter"]))
+              }, [
+                q(Ue, {
+                  name: "close",
+                  stroke: e.value.table.th.color,
+                  "stroke-width": 2
+                }, null, 8, ["stroke"])
+              ], 36),
+              u("table", kl, [
+                u("caption", {
+                  style: f(`backgroundColor:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                }, [
+                  ze(p(e.value.style.title.text) + " ", 1),
+                  e.value.style.title.subtitle.text ? (s(), n("span", Cl, p(e.value.style.title.subtitle.text), 1)) : y("", !0)
+                ], 4),
+                u("thead", null, [
+                  u("tr", {
+                    role: "row",
+                    style: f(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
+                  }, [
+                    u("th", {
+                      style: f(`outline:${e.value.table.th.outline};padding-right:6px`)
+                    }, null, 4),
+                    (s(!0), n(T, null, S(P.dataset, (o, r) => (s(), n("th", {
+                      align: "right",
+                      style: f(`outline:${e.value.table.th.outline};padding-right:6px`)
+                    }, p(o.name), 5))), 256))
+                  ], 4)
+                ]),
+                u("tbody", null, [
+                  (s(!0), n(T, null, S(k.value.xLabels, (o, r) => (s(), n("tr", {
+                    role: "row",
+                    class: G({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": r % 2 === 0, "vue-ui-data-table__tbody__row-odd": r % 2 !== 0 }),
+                    style: f(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
+                  }, [
+                    u("td", {
+                      "data-cell": e.value.table.colNames.xAxis,
+                      class: "vue-ui-data-table__tbody__td",
+                      style: f(`outline:${e.value.table.td.outline}`)
+                    }, [
+                      u("div", Ll, p(o), 1)
+                    ], 12, $l),
+                    (s(!0), n(T, null, S(P.dataset, (v, h) => (s(), n("td", {
+                      class: "vue-ui-data-table__tbody__td",
+                      "data-cell": P.dataset[h].name,
+                      style: f(`outline:${e.value.table.td.outline}`)
+                    }, [
+                      u("div", Tl, p(isNaN(v.values[r]) ? "-" : z(ve)({ p: e.value.style.layout.dataLabels.prefix, v: v.values[r], s: e.value.style.layout.dataLabels.suffix, r: e.value.table.td.roundingValue })), 1)
+                    ], 12, zl))), 256))
+                  ], 6))), 256))
+                ])
+              ])
+            ], 2)
+          ], 512)
+        ]),
+        _: 1
+      }, 8, ["config"])) : y("", !0)
+    ], 14, We));
+  }
+}, El = /* @__PURE__ */ De(Sl, [["__scopeId", "data-v-52af0be2"]]);
+export {
+  El as default
+};

package/dist/vue-ui-kpi-F4qkJ_U-.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d=require("./useNestedProp-2kIU-7On.cjs"),i=require("./index-p5gfZSvB.cjs"),m={__name:"vue-ui-kpi",props:{config:{type:Object,default(){return{}}},dataset:{type:Number,default:0}},setup(o){const a=o,{vue_ui_kpi:r}=i.useConfig(),e=t.computed(()=>d.useNestedProp({userConfig:a.config,defaultConfig:r})),v=t.ref((typeof a.dataset=="number",a.dataset)),u=t.ref(e.value.useAnimation?e.value.animationValueStart:v.value);return t.onMounted(()=>{const l=e.value.animationFrames,n=a.dataset/l;function s(){u.value+=n,u.value<a.dataset?requestAnimationFrame(s):u.value=a.dataset}e.value.useAnimation&&(u.value=0,s())}),(l,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(`vue-ui-kpi ${e.value.layoutClass}`),style:t.normalizeStyle(`background:${e.value.backgroundColor}; ${e.value.layoutCss}`)},[t.createElementVNode("div",{class:t.normalizeClass(`vue-ui-kpi-title ${e.value.titleClass}`),style:t.normalizeStyle(`font-family: ${e.value.fontFamily}; font-size:${e.value.titleFontSize}px; color:${e.value.titleColor}; font-weight:${e.value.titleBold?"bold":"normal"}; ${e.value.titleCss}`)},[t.renderSlot(l.$slots,"title",{comment:o.dataset}),t.createTextVNode(" "+t.toDisplayString(e.value.title),1)],6),t.renderSlot(l.$slots,"comment-before",{comment:o.dataset}),t.createElementVNode("div",{class:t.normalizeClass(`vue-ui-kpi-value ${e.value.valueClass}`),style:t.normalizeStyle(`font-family: ${e.value.fontFamily}; font-size:${e.value.valueFontSize}px; color:${e.value.valueColor}; font-weight:${e.value.valueBold?"bold":"normal"}; ${e.value.valueCss}`)},[t.renderSlot(l.$slots,"value",{comment:o.dataset}),t.createTextVNode(" "+t.toDisplayString(t.unref(i.dataLabel)({p:e.value.prefix,v:u.value,s:e.value.suffix,r:e.value.valueRounding})),1)],6),t.renderSlot(l.$slots,"comment-after",{comment:o.dataset})],6))}};exports.default=m;

package/dist/vue-ui-kpi-h8elYTcA.js

@@ -0,0 +1,54 @@
+import { computed as p, ref as r, onMounted as y, openBlock as C, createElementBlock as g, normalizeClass as s, normalizeStyle as n, createElementVNode as m, renderSlot as u, createTextVNode as f, toDisplayString as d, unref as k } from "vue";
+import { u as F } from "./useNestedProp-BgWkUab_.js";
+import { u as b, f as N } from "./index-uOtklCCx.js";
+const A = {
+  __name: "vue-ui-kpi",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(l) {
+    const a = l, { vue_ui_kpi: c } = b(), e = p(() => F({
+      userConfig: a.config,
+      defaultConfig: c
+    })), $ = r((typeof a.dataset == "number", a.dataset)), o = r(e.value.useAnimation ? e.value.animationValueStart : $.value);
+    return y(() => {
+      const t = e.value.animationFrames, i = a.dataset / t;
+      function v() {
+        o.value += i, o.value < a.dataset ? requestAnimationFrame(v) : o.value = a.dataset;
+      }
+      e.value.useAnimation && (o.value = 0, v());
+    }), (t, i) => (C(), g("div", {
+      class: s(`vue-ui-kpi ${e.value.layoutClass}`),
+      style: n(`background:${e.value.backgroundColor}; ${e.value.layoutCss}`)
+    }, [
+      m("div", {
+        class: s(`vue-ui-kpi-title ${e.value.titleClass}`),
+        style: n(`font-family: ${e.value.fontFamily}; font-size:${e.value.titleFontSize}px; color:${e.value.titleColor}; font-weight:${e.value.titleBold ? "bold" : "normal"}; ${e.value.titleCss}`)
+      }, [
+        u(t.$slots, "title", { comment: l.dataset }),
+        f(" " + d(e.value.title), 1)
+      ], 6),
+      u(t.$slots, "comment-before", { comment: l.dataset }),
+      m("div", {
+        class: s(`vue-ui-kpi-value ${e.value.valueClass}`),
+        style: n(`font-family: ${e.value.fontFamily}; font-size:${e.value.valueFontSize}px; color:${e.value.valueColor}; font-weight:${e.value.valueBold ? "bold" : "normal"}; ${e.value.valueCss}`)
+      }, [
+        u(t.$slots, "value", { comment: l.dataset }),
+        f(" " + d(k(N)({ p: e.value.prefix, v: o.value, s: e.value.suffix, r: e.value.valueRounding })), 1)
+      ], 6),
+      u(t.$slots, "comment-after", { comment: l.dataset })
+    ], 6));
+  }
+};
+export {
+  A as default
+};

package/dist/vue-ui-mini-loader-C_8B2Pm6.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("./useNestedProp-2kIU-7On.cjs"),n=require("./index-p5gfZSvB.cjs"),m=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),g=["xmlns","viewBox"],C={key:0},_=["stroke"],h=["stroke"],M=["stroke"],y={key:1},B=["stroke"],f={key:2},L=["stroke"],b={__name:"vue-ui-mini-loader",props:{config:{type:Object,default(){return{}}}},setup(u){const a=u;e.useCssVars(k=>({"221651ee":c.value,d11bae38:d.value,d85c00de:p.value}));const{vue_ui_mini_loader:i}=n.useConfig(),t=e.computed(()=>v.useNestedProp({userConfig:a.config,defaultConfig:i})),s=e.ref({onion:"-10 -10 84 84",line:"-10 -10 112 84",bar:"-10 -10 106 84"}),r=e.computed(()=>({gutter:`stroke:${t.value.line.gutterColor};opacity:${t.value.line.gutterOpacity};`,gutterBlur:`filter:blur(${t.value.line.gutterBlur}px);`})),l=e.computed(()=>({gutter:`stroke:${t.value.bar.gutterColor};opacity:${t.value.bar.gutterOpacity};`,gutterBlur:`filter:blur(${t.value.bar.gutterBlur}px);`})),o=e.computed(()=>({gutter:`stroke:${t.value.onion.gutterColor};opacity:${t.value.onion.gutterOpacity};`,gutterBlur:`filter:blur(${t.value.onion.gutterBlur}px);`})),c=e.computed(()=>`blur(${t.value.onion.trackBlur}px) hue-rotate(${t.value.onion.trackHueRotate}deg)`),d=e.computed(()=>`blur(${t.value.line.trackBlur}px) hue-rotate(${t.value.line.trackHueRotate}deg)`),p=e.computed(()=>`blur(${t.value.bar.trackBlur}px) hue-rotate(${t.value.bar.trackHueRotate}deg)`);return(k,x)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(n.XMLNS),viewBox:s.value[t.value.type],style:{background:"transparent"},width:"100%"},[t.value.type==="onion"?(e.openBlock(),e.createElementBlock("g",C,[e.createElementVNode("path",{d:"M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3","stroke-width":"4",fill:"none","stroke-linecap":"round",style:e.normalizeStyle(o.value.gutter+o.value.gutterBlur)},null,4),e.createElementVNode("path",{d:"M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13","stroke-width":"4",fill:"none","stroke-linecap":"round",style:e.normalizeStyle(o.value.gutter+o.value.gutterBlur)},null,4),e.createElementVNode("path",{d:"M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25","stroke-width":"4",fill:"none","stroke-linecap":"round",style:e.normalizeStyle(o.value.gutter+o.value.gutterBlur)},null,4),e.createElementVNode("path",{d:"M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3",stroke:t.value.onion.trackColor,"stroke-width":"4",fill:"none","stroke-linecap":"round",class:"onion-animated"},null,8,_),e.createElementVNode("path",{d:"M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13",stroke:t.value.onion.trackColor,"stroke-width":"4",fill:"none","stroke-linecap":"round",class:"onion-animated"},null,8,h),e.createElementVNode("path",{d:"M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25",stroke:t.value.onion.trackColor,"stroke-width":"4",fill:"none","stroke-linecap":"round",class:"onion-animated"},null,8,M)])):e.createCommentVNode("",!0),t.value.type==="line"?(e.openBlock(),e.createElementBlock("g",y,[e.createElementVNode("path",{d:"M 3 62 C 6 57 6 48 11 45 C 16 44 17 53 22 52 C 27 49 25 32 30 31 C 34 29 37 47 42 47 C 46 47 45 38 49 36 C 53 34 56 45 61 45 C 66 45 65 24 69 24 C 73 22 75 35 79 34 C 84 34 83 11 91 5","stroke-width":"4",fill:"none","stroke-linecap":"round",style:e.normalizeStyle(r.value.gutter+r.value.gutterBlur)},null,4),e.createElementVNode("path",{d:"M 3 62 C 6 57 6 48 11 45 C 16 44 17 53 22 52 C 27 49 25 32 30 31 C 34 29 37 47 42 47 C 46 47 45 38 49 36 C 53 34 56 45 61 45 C 66 45 65 24 69 24 C 73 22 75 35 79 34 C 84 34 83 11 91 5",stroke:t.value.line.trackColor,"stroke-width":"4",fill:"none","stroke-linecap":"round",class:"line-animated"},null,8,B)])):e.createCommentVNode("",!0),t.value.type==="bar"?(e.openBlock(),e.createElementBlock("g",f,[e.createElementVNode("path",{d:"M 3 62 L 3 44 M 12 62 L 12 49 M 21 62 L 21 37 M 30 62 L 30 29 M 39 62 L 39 43 M 48 62 L 48 16 M 57 62 L 57 24 M 66 62 L 66 35 M 75 62 L 75 20 M 84 62 L 84 5","stroke-width":"4",fill:"none","stroke-linecap":"round",style:e.normalizeStyle(l.value.gutter+l.value.gutterBlur)},null,4),e.createElementVNode("path",{d:"M 3 62 L 3 44 M 12 62 L 12 49 M 21 62 L 21 37 M 30 62 L 30 29 M 39 62 L 39 43 M 48 62 L 48 16 M 57 62 L 57 24 M 66 62 L 66 35 M 75 62 L 75 20 M 84 62 L 84 5",stroke:t.value.bar.trackColor,"stroke-width":"4",fill:"none","stroke-linecap":"round",class:"bar-animated"},null,8,L)])):e.createCommentVNode("",!0)],8,g))}},N=m._export_sfc(b,[["__scopeId","data-v-20f54e0e"]]);exports.default=N;