vue-data-ui 2.2.92 → 2.2.94

package/dist/vue-ui-rings-BuXeijvb.js

@@ -1,507 +0,0 @@
-import { ref as n, computed as v, onMounted as xe, onBeforeUnmount as _e, openBlock as c, createElementBlock as m, normalizeClass as R, normalizeStyle as x, createVNode as U, createCommentVNode as L, createBlock as V, unref as C, createSlots as Ne, withCtx as h, renderSlot as f, normalizeProps as H, guardReactiveProps as j, Fragment as ae, renderList as se, createElementVNode as w, createTextVNode as ue, toDisplayString as B, nextTick as Fe } from "vue";
-import { _ as Pe, e as ne, f as Se, p as T, i as Le, j as re, k as Ie, g as Oe, h as ie, n as D, X as Me, x as ze, o as Ae, D as Re, y as Ve, z as Be, v as De, w as We } from "./data-table-d-VcuH-r.js";
-import { t as Ee, u as Ge } from "./vue-ui-age-pyramid-4hcuKpFY.js";
-import { t as Ue } from "./themes-lgjsYHsH.js";
-import { u as ve, _ as He } from "./title-BF-9Qcni.js";
-import { U as je } from "./user-options-DZgCz8UA.js";
-import { _ as Xe } from "./tooltip-D85WEOKi.js";
-import { L as qe } from "./legend-DJCYLsl_.js";
-import { u as Je, a as Ke, S as Qe, A as Ye } from "./vue-ui-3d-bar-DW7kGJSz.js";
-const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], lt = ["stop-color"], ot = ["stop-color"], at = ["stroke", "cx", "cy", "r", "fill"], st = ["stroke-width", "cx", "cy", "r", "fill"], ut = ["cx", "cy", "r", "onMouseenter"], nt = ["onClick"], rt = { key: 0 }, it = { key: 1 }, vt = ["innerHTML"], ct = {
-  __name: "vue-ui-rings",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectLegend"],
-  setup(ce, { expose: de, emit: he }) {
-    const p = ce, { vue_ui_rings: pe } = Je(), _ = n(!1), I = v(() => !!p.dataset && p.dataset.length), N = n(ne()), ge = n(null), O = n(!1), W = n(""), $ = n(null), X = n(0), F = n(null), q = n(null), J = n(null), e = v(() => {
-      const t = ve({
-        userConfig: p.config,
-        defaultConfig: pe
-      });
-      return t.theme ? {
-        ...ve({
-          userConfig: Ue.vue_ui_rings[t.theme] || p.config,
-          defaultConfig: t
-        }),
-        customPalette: Se[t.theme] || T
-      } : t;
-    }), M = n(null);
-    xe(() => {
-      if (Le(p.dataset) ? re({
-        componentName: "VueUiRings",
-        type: "dataset"
-      }) : p.dataset.forEach((t, o) => {
-        Ie({
-          datasetObject: t,
-          requiredAttributes: ["name", "values"]
-        }).forEach((l) => {
-          re({
-            componentName: "VueUiRings",
-            type: "datasetSerieAttribute",
-            property: l,
-            index: o
-          });
-        });
-      }), e.value.responsive) {
-        const t = Ee(() => {
-          const { width: o, height: l } = Ge({
-            chart: F.value,
-            title: e.value.style.chart.title.text ? q.value : null,
-            legend: e.value.style.chart.legend.show ? J.value : null
-          });
-          u.value.width = o, u.value.height = l;
-        });
-        M.value = new ResizeObserver(t), M.value.observe(F.value.parentNode);
-      }
-      setTimeout(() => {
-        _.value = !0;
-      }, 600);
-    }), _e(() => {
-      M.value && M.value.disconnect();
-    });
-    const { isPrinting: fe, isImaging: ye, generatePdf: K, generateImage: Q } = Ke({
-      elementId: `rings_${N.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-rings"
-    }), Y = v(() => Oe(e.value.customPalette)), b = n({
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    }), u = n({
-      height: 360,
-      width: 360
-    }), me = v(() => Math.min(u.value.height, u.value.width)), r = n([]);
-    function E(t) {
-      r.value.includes(t) ? r.value = r.value.filter((o) => o !== t) : r.value.push(t), he("selectLegend", i.value.map((o) => ({
-        name: o.name,
-        color: o.color,
-        value: o.value
-      })));
-    }
-    const be = v(() => Math.max(
-      ...z.value.filter((t) => !r.value.includes(t.uid)).map(({ value: t }) => t)
-    ));
-    function Z(t) {
-      return t / be.value;
-    }
-    const z = v(() => p.dataset.map(({ values: t, name: o, color: l = null }, a) => {
-      const s = (t || []).reduce((y, S) => y + S, 0);
-      return {
-        name: o,
-        color: l || ie(l) || Y.value[a] || T[a] || T[a % T.length],
-        value: s,
-        proportion: s / p.dataset.map((y) => (y.values || []).reduce((S, Te) => S + Te, 0)).reduce((y, S) => y + S, 0),
-        uid: ne()
-      };
-    })), ee = v(() => z.value.map((t) => ({
-      ...t,
-      shape: "circle",
-      opacity: r.value.includes(t.uid) ? 0.5 : 1,
-      segregate: () => E(t.uid),
-      isSegregated: r.value.includes(t.uid)
-    })).toSorted((t, o) => o.value - t.value)), ke = v(() => ({
-      cy: "rings-div-legend",
-      backgroundColor: e.value.style.chart.legend.backgroundColor,
-      color: e.value.style.chart.legend.color,
-      fontSize: e.value.style.chart.legend.fontSize,
-      paddingBottom: 12,
-      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), g = v(() => z.value.filter((t) => !r.value.includes(t.uid)).map(({ value: t }) => t).reduce((t, o) => t + o, 0)), i = v(() => z.value.filter((t) => !r.value.includes(t.uid)).map(({ name: t, value: o, color: l = null, uid: a }, s) => ({
-      uid: a,
-      name: t,
-      color: l || ie(l) || Y.value[s] || T[s] || T[s % T.length],
-      value: o,
-      proportion: Z(o),
-      percentage: o / g.value * 100,
-      strokeWidth: e.value.style.chart.layout.rings.strokeWidth * Z(o)
-    })).toSorted((t, o) => o.value - t.value));
-    function Ce() {
-      return i.value.map(
-        ({ name: t, color: o, value: l, absoluteValues: a, percentage: s }) => ({
-          name: t,
-          color: o,
-          value: l,
-          absoluteValues: a,
-          percentage: s
-        })
-      );
-    }
-    const d = v(() => me.value - e.value.style.chart.layout.rings.strokeWidth * 2), G = n(null);
-    function we(t, o) {
-      if (r.value.length === p.dataset.length) return;
-      G.value = {
-        datapoint: o,
-        seriesIndex: t,
-        series: i.value,
-        config: e.value
-      }, $.value = t;
-      const l = i.value[t], a = e.value.style.chart.tooltip.customFormat;
-      if (Ve(a) && Be(() => a({
-        seriesIndex: t,
-        datapoint: o,
-        series: i.value,
-        config: e.value
-      })))
-        W.value = a({
-          seriesIndex: t,
-          datapoint: o,
-          series: i.value,
-          config: e.value
-        });
-      else {
-        let s = "";
-        s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.name}</div>`, s += `<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="${l.color}" /></svg>`, e.value.style.chart.tooltip.showValue && (s += `<b>${D({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: l.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.style.chart.tooltip.roundingValue })}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? s += `<span>(${(l.value / g.value * 100).toFixed(
-          e.value.style.chart.tooltip.roundingPercentage
-        )}%)</span></div>` : s += `<b>${(l.value / g.value * 100).toFixed(
-          e.value.style.chart.tooltip.roundingPercentage
-        )}%</b></div>`), W.value = s;
-      }
-      O.value = !0;
-    }
-    const k = v(() => {
-      const t = i.value.map((l) => ({
-        name: l.name,
-        color: l.color
-      })), o = i.value.map((l) => l.value);
-      return { head: t, body: o };
-    }), A = v(() => {
-      const t = [
-        ' <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>',
-        D({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: g.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
-        "100%"
-      ], o = k.value.head.map((s, y) => [
-        {
-          color: s.color,
-          name: s.name
-        },
-        D({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: k.value.body[y], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
-        isNaN(k.value.body[y] / g.value) ? "-" : (k.value.body[y] / g.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
-      ]), l = {
-        th: {
-          backgroundColor: e.value.table.th.backgroundColor,
-          color: e.value.table.th.color,
-          outline: e.value.table.th.outline
-        },
-        td: {
-          backgroundColor: e.value.table.td.backgroundColor,
-          color: e.value.table.td.color,
-          outline: e.value.table.td.outline
-        },
-        breakpoint: e.value.table.responsiveBreakpoint
-      }, a = [
-        e.value.table.columnNames.series,
-        e.value.table.columnNames.value,
-        e.value.table.columnNames.percentage
-      ];
-      return {
-        head: t,
-        body: o,
-        config: l,
-        colNames: a
-      };
-    });
-    function te() {
-      Fe(() => {
-        const t = k.value.head.map((a, s) => [[
-          a.name
-        ], [k.value.body[s]], [isNaN(k.value.body[s] / g.value) ? "-" : k.value.body[s] / g.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = De(o);
-        We({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-rings" });
-      });
-    }
-    const P = n(!1);
-    function $e(t) {
-      P.value = t, X.value += 1;
-    }
-    function le() {
-      b.value.showTable = !b.value.showTable;
-    }
-    function oe() {
-      b.value.showTooltip = !b.value.showTooltip;
-    }
-    return de({
-      getData: Ce,
-      generatePdf: K,
-      generateCsv: te,
-      generateImage: Q,
-      toggleTable: le,
-      toggleTooltip: oe
-    }), (t, o) => (c(), m("div", {
-      ref_key: "ringsChart",
-      ref: F,
-      class: R(`vue-ui-rings ${P.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: x(`font-family:${e.value.style.fontFamily};text-align:center;width:100%;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
-      id: `rings_${N.value}`,
-      onMouseleave: o[3] || (o[3] = (l) => {
-        $.value = null, O.value = !1;
-      })
-    }, [
-      e.value.style.chart.title.text ? (c(), m("div", {
-        key: 0,
-        ref_key: "chartTitle",
-        ref: q,
-        style: x(`width:100%;background:${e.value.style.chart.backgroundColor}`)
-      }, [
-        U(He, {
-          config: {
-            title: {
-              cy: "rings-div-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "rings-div-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"])
-      ], 4)) : L("", !0),
-      e.value.userOptions.show && I.value ? (c(), V(je, {
-        ref_key: "details",
-        ref: ge,
-        key: `user_options_${X.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: C(fe),
-        isImaging: C(ye),
-        uid: N.value,
-        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
-        hasPdf: e.value.userOptions.buttons.pdf,
-        hasXls: e.value.userOptions.buttons.csv,
-        hasImg: e.value.userOptions.buttons.img,
-        hasTable: e.value.userOptions.buttons.table,
-        hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isTooltip: b.value.showTooltip,
-        isFullscreen: P.value,
-        titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: F.value,
-        onToggleFullscreen: $e,
-        onGeneratePdf: C(K),
-        onGenerateCsv: te,
-        onGenerateImage: C(Q),
-        onToggleTable: le,
-        onToggleTooltip: oe
-      }, Ne({ _: 2 }, [
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: h(() => [
-            f(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: h(() => [
-            f(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: h(() => [
-            f(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: h(() => [
-            f(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: h(() => [
-            f(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: h(({ toggleFullscreen: l, isFullscreen: a }) => [
-            f(t.$slots, "optionFullscreen", H(j({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
-          ]),
-          key: "5"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : L("", !0),
-      I.value ? (c(), m("svg", {
-        key: 2,
-        xmlns: C(Me),
-        class: R({ "vue-data-ui-fullscreen--on": P.value, "vue-data-ui-fulscreen--off": !P.value }),
-        viewBox: `0 0 ${u.value.width <= 0 ? 10 : u.value.width} ${u.value.height <= 0 ? 10 : u.value.height}`,
-        style: x(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
-      }, [
-        (c(!0), m(ae, null, se(i.value, (l, a) => (c(), m("radialGradient", {
-          cx: "50%",
-          cy: "30%",
-          r: "50%",
-          fx: "50%",
-          fy: "50%",
-          id: `gradient_${N.value}_${a}`
-        }, [
-          w("stop", {
-            offset: "0%",
-            "stop-color": `${C(ze)(l.color, 0.05)}${C(Ae)[100 - e.value.style.chart.layout.rings.gradient.intensity]}`
-          }, null, 8, lt),
-          w("stop", {
-            offset: "100%",
-            "stop-color": l.color
-          }, null, 8, ot)
-        ], 8, tt))), 256)),
-        (c(!0), m(ae, null, se(i.value, (l, a) => (c(), m("g", null, [
-          w("circle", {
-            class: R({
-              "vue-ui-rings-item": _.value && e.value.useCssAnimation,
-              "vue-rings-item-onload": !_.value && e.value.useCssAnimation,
-              "vue-ui-rings-opacity": $.value !== null && $.value !== a
-            }),
-            style: x(`animation-delay:${a * 100}ms`),
-            stroke: e.value.style.chart.layout.rings.stroke,
-            cx: u.value.width / 2,
-            cy: a === 0 ? u.value.height / 2 : u.value.height / 2 + d.value * i.value[0].proportion / 2 - d.value * l.proportion / 2 - 2 * (a + 1),
-            r: d.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : d.value * l.proportion / 2 * 0.9,
-            fill: e.value.style.chart.layout.rings.gradient.underlayerColor
-          }, null, 14, at),
-          w("circle", {
-            class: R({
-              "vue-ui-rings-item": _.value && e.value.useCssAnimation,
-              "vue-rings-item-onload": !_.value && e.value.useCssAnimation,
-              "vue-ui-rings-shadow": e.value.style.chart.layout.rings.useShadow,
-              "vue-ui-rings-blur": $.value !== null && $.value !== a
-            }),
-            style: x(`animation-delay:${a * 100}ms`),
-            stroke: "none",
-            "stroke-width": l.strokeWidth < 0.5 ? 0.5 : l.strokeWidth,
-            cx: u.value.width / 2,
-            cy: a === 0 ? u.value.height / 2 : u.value.height / 2 + d.value * i.value[0].proportion / 2 - d.value * l.proportion / 2 - 2 * (a + 1),
-            r: d.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : d.value * l.proportion / 2 * 0.9,
-            fill: e.value.style.chart.layout.rings.gradient.show ? `url(#gradient_${N.value}_${a})` : l.color
-          }, null, 14, st),
-          w("circle", {
-            "data-cy-trap": "",
-            stroke: "none",
-            cx: u.value.width / 2,
-            cy: a === 0 ? u.value.height / 2 : u.value.height / 2 + d.value * i.value[0].proportion / 2 - d.value * l.proportion / 2 - 2 * (a + 1),
-            r: d.value * l.proportion / 2 * 0.9 <= 0 ? 1e-4 : d.value * l.proportion / 2 * 0.9,
-            fill: "transparent",
-            onMouseenter: (s) => we(a, l),
-            onMouseleave: o[0] || (o[0] = (s) => {
-              $.value = null, O.value = !1;
-            })
-          }, null, 40, ut)
-        ]))), 256)),
-        f(t.$slots, "svg", { svg: u.value }, void 0, !0)
-      ], 14, et)) : L("", !0),
-      I.value ? L("", !0) : (c(), V(Qe, {
-        key: 3,
-        config: {
-          type: "rings",
-          style: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            rings: {
-              color: "#CCCCCC"
-            }
-          }
-        }
-      }, null, 8, ["config"])),
-      w("div", {
-        ref_key: "chartLegend",
-        ref: J
-      }, [
-        e.value.style.chart.legend.show ? (c(), V(qe, {
-          key: 0,
-          legendSet: ee.value,
-          config: ke.value,
-          onClickMarker: o[1] || (o[1] = ({ legend: l }) => E(l.uid))
-        }, {
-          item: h(({ legend: l }) => [
-            w("div", {
-              "data-cy-legend-item": "",
-              onClick: (a) => E(l.uid),
-              style: x(`opacity:${r.value.includes(l.uid) ? 0.5 : 1}`)
-            }, [
-              ue(B(l.name) + ": " + B(C(D)({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: l.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.style.chart.legend.roundingValue })) + " ", 1),
-              r.value.includes(l.uid) ? (c(), m("span", it, " ( - % ) ")) : (c(), m("span", rt, " (" + B(isNaN(l.value / g.value) ? "-" : (l.value / g.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
-            ], 12, nt)
-          ]),
-          _: 1
-        }, 8, ["legendSet", "config"])) : f(t.$slots, "legend", {
-          key: 1,
-          legend: ee.value
-        }, void 0, !0)
-      ], 512),
-      U(Xe, {
-        show: b.value.showTooltip && O.value && r.value.length < p.dataset.length,
-        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
-        color: e.value.style.chart.tooltip.color,
-        borderRadius: e.value.style.chart.tooltip.borderRadius,
-        borderColor: e.value.style.chart.tooltip.borderColor,
-        borderWidth: e.value.style.chart.tooltip.borderWidth,
-        fontSize: e.value.style.chart.tooltip.fontSize,
-        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
-        parent: F.value,
-        content: W.value,
-        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
-      }, {
-        "tooltip-before": h(() => [
-          f(t.$slots, "tooltip-before", H(j({ ...G.value })), void 0, !0)
-        ]),
-        "tooltip-after": h(() => [
-          f(t.$slots, "tooltip-after", H(j({ ...G.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
-      I.value ? (c(), V(Ye, {
-        key: 4,
-        hideDetails: "",
-        config: {
-          open: b.value.showTable,
-          maxHeight: 1e4,
-          body: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          },
-          head: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          }
-        }
-      }, {
-        content: h(() => [
-          U(Re, {
-            colNames: A.value.colNames,
-            head: A.value.head,
-            body: A.value.body,
-            config: A.value.config,
-            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: o[2] || (o[2] = (l) => b.value.showTable = !1)
-          }, {
-            th: h(({ th: l }) => [
-              w("div", {
-                innerHTML: l,
-                style: { display: "flex", "align-items": "center" }
-              }, null, 8, vt)
-            ]),
-            td: h(({ td: l }) => [
-              ue(B(l.name || l), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
-        ]),
-        _: 1
-      }, 8, ["config"])) : L("", !0)
-    ], 46, Ze));
-  }
-}, Ct = /* @__PURE__ */ Pe(ct, [["__scopeId", "data-v-956d6194"]]);
-export {
-  Ct as default
-};