vue-data-ui 2.2.92 → 2.2.94

package/dist/vue-ui-galaxy-DXX5yivT.js

@@ -1,482 +0,0 @@
-import { computed as v, onMounted as be, ref as u, openBlock as r, createElementBlock as n, normalizeClass as N, normalizeStyle as S, createVNode as z, createCommentVNode as d, createBlock as F, unref as C, createSlots as me, withCtx as i, renderSlot as h, normalizeProps as W, guardReactiveProps as A, createElementVNode as x, Fragment as Q, renderList as Z, createTextVNode as ee, toDisplayString as I, nextTick as ke } from "vue";
-import { _ as Ce, i as xe, j as te, k as we, e as le, f as $e, p as L, g as Te, h as _e, I as Pe, n as O, X as Ne, y as ae, D as Se, z as Fe, v as Ie, w as Le } from "./data-table-d-VcuH-r.js";
-import { t as Oe } from "./themes-lgjsYHsH.js";
-import { L as Ee } from "./legend-DJCYLsl_.js";
-import { u as oe, _ as Ve } from "./title-BF-9Qcni.js";
-import { _ as Be } from "./tooltip-D85WEOKi.js";
-import { U as De } from "./user-options-DZgCz8UA.js";
-import { u as Ge, a as Me, S as ze, A as We } from "./vue-ui-3d-bar-DW7kGJSz.js";
-const Ae = ["id"], He = ["xmlns", "viewBox"], Ue = ["id"], Xe = ["stdDeviation"], je = ["d", "stroke", "stroke-width"], Re = ["d", "stroke", "stroke-width"], Ye = ["filter"], qe = ["d", "stroke", "stroke-width"], Je = ["d", "stroke-width", "onMouseenter", "onClick"], Ke = ["onClick"], Qe = { key: 0 }, Ze = { key: 1 }, et = ["innerHTML"], tt = {
-  __name: "vue-ui-galaxy",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  emits: ["selectLegend", "selectDatapoint"],
-  setup(se, { expose: re, emit: H }) {
-    const f = se, { vue_ui_galaxy: ue } = Ge(), _ = v(() => !!f.dataset && f.dataset.length);
-    be(() => {
-      xe(f.dataset) ? te({
-        componentName: "VueUiGalaxy",
-        type: "dataset"
-      }) : f.dataset.forEach((t, a) => {
-        we({
-          datasetObject: t,
-          requiredAttributes: ["name", "values"]
-        }).forEach((l) => {
-          te({
-            componentName: "VueUiGalaxy",
-            type: "datasetSerieAttribute",
-            property: l,
-            index: a
-          });
-        });
-      });
-    });
-    const w = u(le()), E = u(null), ne = u(null), V = u(!1), B = u(""), y = u(null), U = u(0), e = v(() => {
-      const t = oe({
-        userConfig: f.config,
-        defaultConfig: ue
-      });
-      return t.theme ? {
-        ...oe({
-          userConfig: Oe.vue_ui_galaxy[t.theme] || f.config,
-          defaultConfig: t
-        }),
-        customPalette: $e[t.theme] || L
-      } : t;
-    }), { isPrinting: ie, isImaging: ce, generatePdf: X, generateImage: j } = Me({
-      elementId: `galaxy_${w.value}`,
-      fileName: e.value.style.chart.title.text || "vue-ui-galaxy"
-    }), ve = v(() => Te(e.value.customPalette)), p = u({
-      dataLabels: {
-        show: e.value.style.chart.layout.labels.dataLabels.show
-      },
-      showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
-    }), D = u({
-      height: 180,
-      // or 250 if non fibo
-      width: 250
-    }), c = u([]);
-    function G(t) {
-      c.value.includes(t.id) ? c.value = c.value.filter((a) => a !== t.id) : c.value.push(t.id), H("selectLegend", $.value.map((a) => ({
-        name: a.name,
-        color: a.color,
-        value: a.value
-      })));
-    }
-    const m = v(() => f.dataset.map((t, a) => ({
-      name: t.name,
-      color: _e(t.color) || ve.value[a] || L[a] || L[a % L.length],
-      value: t.values ? t.values.reduce((l, o) => l + o, 0) : 0,
-      absoluteValues: t.values || [0],
-      id: le(),
-      seriesIndex: a
-    })).sort((t, a) => a.value - t.value));
-    function de() {
-      return m.value.map((t) => ({
-        name: t.name,
-        color: t.color,
-        value: t.value
-      }));
-    }
-    const g = v(() => m.value.filter((t) => !c.value.includes(t.id)).map((t) => t.value).reduce((t, a) => t + a, 0)), he = u(190), R = v(() => m.value.filter((t) => !c.value.includes(t.id))), $ = v(() => {
-      const t = [];
-      for (let a = 0; a < R.value.length; a += 1) {
-        const l = R.value[a];
-        let o = l.value / g.value * he.value;
-        a > 0 && t.length && (o += t[a - 1].points), t.push({
-          points: o,
-          ...l,
-          seriesIndex: a,
-          proportion: l.value / g.value,
-          path: Pe({
-            points: o,
-            startX: 115 + e.value.style.chart.layout.arcs.offsetX,
-            startY: 90 + e.value.style.chart.layout.arcs.offsetY
-          })
-        });
-      }
-      return t.filter((a, l) => !c.value.includes(a.id)).toSorted((a, l) => l.points - a.points);
-    }), T = u(!1);
-    function ye(t) {
-      T.value = t, U.value += 1;
-    }
-    const M = u(null);
-    function ge({ datapoint: t, _relativeIndex: a, seriesIndex: l, show: o = !1 }) {
-      M.value = {
-        datapoint: t,
-        seriesIndex: l,
-        series: m.value,
-        config: e.value
-      }, V.value = o, y.value = t.id;
-      let s = "";
-      const k = e.value.style.chart.tooltip.customFormat;
-      ae(k) && Fe(() => k({
-        seriesIndex: l,
-        datapoint: t,
-        series: m.value,
-        config: e.value
-      })) ? B.value = k({
-        seriesIndex: l,
-        datapoint: t,
-        series: m.value,
-        config: e.value
-      }) : (s += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.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="${t.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (s += `<b>${O({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: t.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>(${(t.proportion * 100).toFixed(e.value.style.chart.tooltip.roundingPercentage)}%)</span></div>` : s += `<b>${(t.proportion * 100).toFixed(e.value.style.chart.tooltip.roundingPercentage)}%</b></div>`), B.value = `<div>${s}</div>`);
-    }
-    const Y = v(() => m.value.map((t, a) => ({
-      ...t,
-      proportion: (t.value || 0) / f.dataset.map((l) => (l.values || []).reduce((o, s) => o + s, 0)).reduce((l, o) => l + o, 0),
-      opacity: c.value.includes(t.id) ? 0.5 : 1,
-      shape: t.shape || "circle",
-      segregate: () => G(t),
-      isSegregated: c.value.includes(t.id)
-    }))), fe = v(() => ({
-      cy: "galaxy-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" : ""
-    })), b = v(() => {
-      const t = $.value.map((l) => ({
-        name: l.name,
-        color: l.color
-      })), a = $.value.map((l) => l.value);
-      return { head: t, body: a };
-    });
-    function q() {
-      ke(() => {
-        const t = b.value.head.map((o, s) => [[
-          o.name
-        ], [b.value.body[s]], [isNaN(b.value.body[s] / g.value) ? "-" : b.value.body[s] / g.value * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = Ie(a);
-        Le({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-galaxy" });
-      });
-    }
-    const P = 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>',
-        O({ 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%"
-      ], a = b.value.head.map((s, k) => {
-        const pe = O({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: b.value.body[k], s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue });
-        return [
-          {
-            color: s.color,
-            name: s.name
-          },
-          pe,
-          isNaN(b.value.body[k] / g.value) ? "-" : (b.value.body[k] / 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
-      };
-      return {
-        colNames: [
-          e.value.table.columnNames.series,
-          e.value.table.columnNames.value,
-          e.value.table.columnNames.percentage
-        ],
-        head: t,
-        body: a,
-        config: l
-      };
-    });
-    function J() {
-      p.value.showTable = !p.value.showTable;
-    }
-    function K() {
-      p.value.showTooltip = !p.value.showTooltip;
-    }
-    return re({
-      getData: de,
-      generatePdf: X,
-      generateCsv: q,
-      generateImage: j,
-      toggleTable: J,
-      toggleTooltip: K
-    }), (t, a) => (r(), n("div", {
-      ref_key: "galaxyChart",
-      ref: E,
-      class: N(`vue-ui-galaxy ${T.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: S(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
-      id: `galaxy_${w.value}`
-    }, [
-      e.value.style.chart.title.text ? (r(), n("div", {
-        key: 0,
-        style: S(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:24px`)
-      }, [
-        z(Ve, {
-          config: {
-            title: {
-              cy: "galaxy-div-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "galaxy-div-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"])
-      ], 4)) : d("", !0),
-      e.value.userOptions.show && _.value ? (r(), F(De, {
-        ref_key: "details",
-        ref: ne,
-        key: `user_option_${U.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: C(ie),
-        isImaging: C(ce),
-        uid: w.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: p.value.showTooltip,
-        isFullscreen: T.value,
-        titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: E.value,
-        onToggleFullscreen: ye,
-        onGeneratePdf: C(X),
-        onGenerateCsv: q,
-        onGenerateImage: C(j),
-        onToggleTable: J,
-        onToggleTooltip: K
-      }, me({ _: 2 }, [
-        t.$slots.optionTooltip ? {
-          name: "optionTooltip",
-          fn: i(() => [
-            h(t.$slots, "optionTooltip", {}, void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: i(() => [
-            h(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionCsv ? {
-          name: "optionCsv",
-          fn: i(() => [
-            h(t.$slots, "optionCsv", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: i(() => [
-            h(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionTable ? {
-          name: "optionTable",
-          fn: i(() => [
-            h(t.$slots, "optionTable", {}, void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: i(({ toggleFullscreen: l, isFullscreen: o }) => [
-            h(t.$slots, "optionFullscreen", W(A({ toggleFullscreen: l, isFullscreen: o })), 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"])) : d("", !0),
-      _.value ? (r(), n("svg", {
-        key: 2,
-        xmlns: C(Ne),
-        class: N({ "vue-data-ui-fullscreen--on": T.value, "vue-data-ui-fulscreen--off": !T.value }),
-        viewBox: `0 0 ${D.value.width} ${D.value.height}`,
-        style: S(`max-width:100%; overflow: visible; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
-      }, [
-        x("defs", null, [
-          x("filter", {
-            id: `blur_${w.value}`,
-            x: "-50%",
-            y: "-50%",
-            width: "200%",
-            height: "200%"
-          }, [
-            x("feGaussianBlur", {
-              in: "SourceGraphic",
-              stdDeviation: 100 / e.value.style.chart.layout.arcs.gradient.intensity
-            }, null, 8, Xe)
-          ], 8, Ue)
-        ]),
-        (r(!0), n(Q, null, Z($.value, (l) => (r(), n("g", null, [
-          l.value ? (r(), n("path", {
-            key: 0,
-            d: l.path,
-            fill: "none",
-            stroke: e.value.style.chart.backgroundColor,
-            "stroke-width": (e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth) * (y.value === l.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1),
-            "stroke-linecap": "round"
-          }, null, 8, je)) : d("", !0),
-          l.value ? (r(), n("path", {
-            key: 1,
-            d: l.path,
-            fill: "none",
-            stroke: l.color,
-            "stroke-width": e.value.style.chart.layout.arcs.strokeWidth * (y.value === l.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1),
-            "stroke-linecap": "round",
-            class: N(`${y.value && y.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
-          }, null, 10, Re)) : d("", !0),
-          l.value && e.value.style.chart.layout.arcs.gradient.show ? (r(), n("g", {
-            key: 2,
-            filter: `url(#blur_${w.value})`
-          }, [
-            x("path", {
-              d: l.path,
-              fill: "none",
-              stroke: e.value.style.chart.layout.arcs.gradient.color,
-              "stroke-width": e.value.style.chart.layout.arcs.strokeWidth / 2 * (y.value === l.id && e.value.style.chart.layout.arcs.hoverEffect.show ? e.value.style.chart.layout.arcs.hoverEffect.multiplicator : 1),
-              "stroke-linecap": "round",
-              class: N(`vue-ui-galaxy-gradient ${y.value && y.value !== l.id && e.value.useBlurOnHover ? "vue-ui-galaxy-blur" : ""}`)
-            }, null, 10, qe)
-          ], 8, Ye)) : d("", !0)
-        ]))), 256)),
-        (r(!0), n(Q, null, Z($.value, (l, o) => (r(), n("g", null, [
-          l.value ? (r(), n("path", {
-            key: 0,
-            d: l.path,
-            fill: "none",
-            stroke: "transparent",
-            "stroke-width": e.value.style.chart.layout.arcs.strokeWidth + e.value.style.chart.layout.arcs.borderWidth,
-            "stroke-linecap": "round",
-            onMouseenter: (s) => ge({
-              datapoint: l,
-              relativeIndex: o,
-              seriesIndex: l.seriesIndex,
-              show: !0
-            }),
-            onMouseleave: a[0] || (a[0] = (s) => {
-              V.value = !1, y.value = null;
-            }),
-            onClick: (s) => H("selectDatapoint", l)
-          }, null, 40, Je)) : d("", !0)
-        ]))), 256)),
-        h(t.$slots, "svg", { svg: D.value }, void 0, !0)
-      ], 14, He)) : d("", !0),
-      _.value ? d("", !0) : (r(), F(ze, {
-        key: 3,
-        config: {
-          type: "galaxy",
-          style: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            galaxy: {
-              color: "#CCCCCC"
-            }
-          }
-        }
-      }, null, 8, ["config"])),
-      e.value.style.chart.legend.show ? (r(), F(Ee, {
-        key: 4,
-        legendSet: Y.value,
-        config: fe.value,
-        onClickMarker: a[1] || (a[1] = ({ legend: l }) => G(l))
-      }, {
-        item: i(({ legend: l, index: o }) => [
-          x("div", {
-            onClick: (s) => G(l),
-            style: S(`opacity:${c.value.includes(l.id) ? 0.5 : 1}`)
-          }, [
-            ee(I(l.name) + ": " + I(C(O)({ 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),
-            c.value.includes(l.id) ? (r(), n("span", Ze, " ( - % ) ")) : (r(), n("span", Qe, " (" + I(isNaN(l.value / g.value) ? "-" : (l.value / g.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
-          ], 12, Ke)
-        ]),
-        _: 1
-      }, 8, ["legendSet", "config"])) : d("", !0),
-      h(t.$slots, "legend", { legend: Y.value }, void 0, !0),
-      z(Be, {
-        show: p.value.showTooltip && V.value,
-        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: E.value,
-        content: B.value,
-        isCustom: C(ae)(e.value.style.chart.tooltip.customFormat)
-      }, {
-        "tooltip-before": i(() => [
-          h(t.$slots, "tooltip-before", W(A({ ...M.value })), void 0, !0)
-        ]),
-        "tooltip-after": i(() => [
-          h(t.$slots, "tooltip-after", W(A({ ...M.value })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "parent", "content", "isCustom"]),
-      _.value ? (r(), F(We, {
-        key: 5,
-        hideDetails: "",
-        config: {
-          open: p.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: i(() => [
-          z(Se, {
-            colNames: P.value.colNames,
-            head: P.value.head,
-            body: P.value.body,
-            config: P.value.config,
-            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: a[2] || (a[2] = (l) => p.value.showTable = !1)
-          }, {
-            th: i(({ th: l }) => [
-              x("div", {
-                innerHTML: l,
-                style: { display: "flex", "align-items": "center" }
-              }, null, 8, et)
-            ]),
-            td: i(({ td: l }) => [
-              ee(I(l.name || l), 1)
-            ]),
-            _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
-        ]),
-        _: 1
-      }, 8, ["config"])) : d("", !0)
-    ], 14, Ae));
-  }
-}, ct = /* @__PURE__ */ Ce(tt, [["__scopeId", "data-v-53c416de"]]);
-export {
-  ct as default
-};