vue-data-ui 2.4.51 → 2.4.52

package/dist/{vue-ui-funnel-hcbE4yky.js → vue-ui-funnel-CxO1aav3.js}

@@ -1,13 +1,13 @@
-import { useCssVars as _e, computed as c, onMounted as Le, ref as i, watch as Te, openBlock as s, createElementBlock as u, normalizeClass as T, normalizeStyle as $, unref as r, createBlock as A, createCommentVNode as b, createSlots as Ae, withCtx as p, renderSlot as k, normalizeProps as X, guardReactiveProps as j, createElementVNode as C, mergeProps as H, Fragment as M, renderList as B, toDisplayString as U, createTextVNode as Ne, nextTick as ze } from "vue";
-import { u as Se, o as Oe, e as fe, g as Pe, c as Fe, d as De, l as Ie, i as V, f as G, X as Me, G as Be, t as Ue, q as Ve, r as Ge, F as Y } from "./index-BbPeL8Gp.js";
-import { u as be } from "./useNestedProp-BN8claGG.js";
-import { u as Re, U as Ee } from "./usePrinter-DaybDVqP.js";
-import { _ as Xe } from "./Title-aSAft5dl.js";
-import { P as je } from "./PenAndPaper-ZdZEumki.js";
-import { D as He } from "./DataTable-DGf6RrOJ.js";
-import Ye from "./vue-ui-accordion-5d5iVpr7.js";
+import { useCssVars as _e, computed as c, onMounted as Le, ref as i, watch as Te, openBlock as s, createElementBlock as u, normalizeClass as T, normalizeStyle as $, unref as r, createBlock as A, createCommentVNode as b, createSlots as Ae, withCtx as p, renderSlot as k, normalizeProps as X, guardReactiveProps as j, createElementVNode as C, mergeProps as Y, Fragment as M, renderList as B, toDisplayString as U, createTextVNode as Ne, nextTick as ze } from "vue";
+import { u as Oe, o as Se, e as fe, g as Pe, c as Fe, d as De, l as Ie, i as V, f as G, X as Me, G as Be, t as Ue, q as Ve, r as Ge, F as q } from "./index-K5uyh1gA.js";
+import { u as be } from "./useNestedProp-DifqJZAs.js";
+import { u as Re, U as Ee } from "./usePrinter-p_ZZlGc9.js";
+import { _ as He } from "./Title-aMb2ETf7.js";
+import { P as Xe } from "./PenAndPaper-BycdTwSP.js";
+import { D as je } from "./DataTable-COkA4Nyz.js";
+import Ye from "./vue-ui-accordion-CsJT7Az3.js";
 import { t as qe, u as We } from "./useResponsive-CoxXLe23.js";
-import Je from "./vue-ui-skeleton-Bniq21d9.js";
+import Je from "./vue-ui-skeleton-BhA2lIT6.js";
 import { u as Ke } from "./useUserOptionState-BIvW1Kz7.js";
 import { _ as Qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"], lt = ["stop-color"], st = ["stop-color"], ot = ["stroke", "stroke-width"], nt = ["stroke", "stroke-width"], rt = ["x", "y", "font-size", "fill", "font-weight"], ut = ["points", "fill"], it = ["stroke", "stroke-width", "rx"], ct = ["x", "y", "font-size", "fill", "font-weight"], vt = ["x", "y", "font-size", "fill", "font-weight"], dt = {
@@ -32,12 +32,12 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
   setup(me, { expose: ye }) {
     const m = me;
     _e((a) => ({
-      "5fd0b76e": xe.value
+      "2b4b0562": xe.value
     }));
-    const { vue_ui_funnel: ge } = Se(), _ = c(() => !!m.dataset && m.dataset.length);
-    Le(q);
-    function q() {
-      if (Oe(m.dataset) ? fe({
+    const { vue_ui_funnel: ge } = Oe(), _ = c(() => !!m.dataset && m.dataset.length);
+    Le(W);
+    function W() {
+      if (Se(m.dataset) ? fe({
         componentName: "VueUiFunnel",
         type: "dataset"
       }) : m.dataset.forEach((a, l) => {
@@ -56,23 +56,23 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
         const a = qe(() => {
           const { width: l, height: t } = We({
             chart: N.value,
-            title: e.value.style.chart.title.text ? ee.value : null,
-            source: Z.value,
-            noTitle: Q.value
+            title: e.value.style.chart.title.text ? te.value : null,
+            source: ee.value,
+            noTitle: Z.value
           });
-          h.value.height = t, h.value.width = l, g.value = ce(), v.value.circles = Y({
+          h.value.height = t, h.value.width = l, g.value = ce(), v.value.circles = q({
             relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.circles.dataLabels.fontSize,
             threshold: 10,
             fallback: 10
-          }), v.value.names = Y({
+          }), v.value.names = q({
             relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.bars.dataLabels.name.fontSize,
             threshold: 10,
             fallback: 10
-          }), v.value.values = Y({
+          }), v.value.values = q({
             relator: Math.min(l, t),
             adjuster: 600,
             source: e.value.style.chart.bars.dataLabels.value.fontSize,
@@ -80,11 +80,11 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
             fallback: 10
           });
         });
-        te.value = new ResizeObserver(a), te.value.observe(N.value.parentNode);
+        ae.value = new ResizeObserver(a), ae.value.observe(N.value.parentNode);
       }
     }
-    const N = i(null), z = i(Fe()), W = i(0), J = i(0), K = i(0), Q = i(null), Z = i(null), ee = i(null), te = i(null), w = i(!1);
-    function ae() {
+    const N = i(null), z = i(Fe()), J = i(0), K = i(0), Q = i(0), Z = i(null), ee = i(null), te = i(null), ae = i(null), w = i(!1);
+    function le() {
       const a = be({
         userConfig: m.config,
         defaultConfig: ge
@@ -97,11 +97,11 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
       } : a;
     }
     const e = c({
-      get: () => ae(),
+      get: () => le(),
       set: (a) => a
-    }), { userOptionsVisible: le, setUserOptionsVisibility: se, keepUserOptionState: oe } = Ke({ config: e.value });
+    }), { userOptionsVisible: R, setUserOptionsVisibility: se, keepUserOptionState: oe } = Ke({ config: e.value });
     Te(() => m.config, (a) => {
-      e.value = ae(), q(), J.value += 1, K.value += 1, v.value.circles = e.value.style.chart.circles.dataLabels.fontSize, v.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, v.value.values = e.value.style.chart.bars.dataLabels.value.fontSize;
+      e.value = le(), R.value = !e.value.showOnChartHover, W(), K.value += 1, Q.value += 1, v.value.circles = e.value.style.chart.circles.dataLabels.fontSize, v.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, v.value.values = e.value.style.chart.bars.dataLabels.value.fontSize;
     }, { deep: !0 });
     const { isPrinting: ne, isImaging: re, generatePdf: ue, generateImage: ie } = Re({
       elementId: `funnel_${z.value}`,
@@ -159,18 +159,18 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
       y1: o.value[0].cy,
       x2: o.value.at(-1).cx,
       y2: o.value.at(-1).cy
-    })), S = i(!1);
+    })), O = i(!1);
     function we(a) {
-      S.value = a, W.value += 1;
+      O.value = a, J.value += 1;
     }
     const xe = c(() => `${y.value.length * 150}ms`), D = i(!1);
-    function R() {
+    function E() {
       D.value = !D.value;
     }
     function de() {
       F.value.showTable = !F.value.showTable;
     }
-    const O = c(() => {
+    const S = c(() => {
       const a = y.value.map((t) => ({
         name: t.name,
         color: t.color
@@ -181,18 +181,18 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], l = O.value.head.map((f, d) => {
+      ], l = S.value.head.map((f, d) => {
         const P = V(
           e.value.style.chart.bars.dataLabels.value.formatter,
-          O.value.body[d],
+          S.value.body[d],
           G({
             p: e.value.style.chart.bars.dataLabels.value.prefix,
-            v: O.value.body[d],
+            v: S.value.body[d],
             s: e.value.style.chart.bars.dataLabels.value.suffix,
             r: e.value.table.td.roundingValue
           }),
           { datapoint: o.value[d] }
-        ), E = V(
+        ), H = V(
           e.value.style.chart.circles.dataLabels.formatter,
           o.value[d].proportion * 100,
           G({
@@ -205,7 +205,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
         return [
           { color: f.color, name: f.name },
           P,
-          E
+          H
         ];
       }), t = {
         th: {
@@ -233,9 +233,9 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
     });
     function he() {
       ze(() => {
-        const a = O.value.head.map((n, f) => [[
+        const a = S.value.head.map((n, f) => [[
           n.name
-        ], [O.value.body[f]], [o.value[f].proportion * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(a), t = Ve(l);
+        ], [S.value.body[f]], [o.value[f].proportion * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(a), t = Ve(l);
         Ge({ csvContent: t, title: e.value.style.chart.title.text || "vue-ui-funnel" });
       });
     }
@@ -248,39 +248,39 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
       generateCsv: he,
       generateImage: ie,
       toggleTable: de,
-      toggleAnnotator: R
+      toggleAnnotator: E
     }), (a, l) => (s(), u("div", {
       ref_key: "funnelChart",
       ref: N,
-      class: T(`vue-ui-funnel ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      class: T(`vue-ui-funnel ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: $(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `funnel_${z.value}`,
       onMouseenter: l[1] || (l[1] = () => r(se)(!0)),
       onMouseleave: l[2] || (l[2] = () => r(se)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), A(je, {
+      e.value.userOptions.buttons.annotator ? (s(), A(Xe, {
         key: 0,
         parent: N.value,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: D.value,
-        onClose: R
+        onClose: E
       }, null, 8, ["parent", "backgroundColor", "color", "active"])) : b("", !0),
       pe.value ? (s(), u("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Q,
+        ref: Z,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : b("", !0),
       e.value.style.chart.title.text ? (s(), u("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ee,
+        ref: te,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (s(), A(Xe, {
-          key: `title_${J.value}`,
+        (s(), A(He, {
+          key: `title_${K.value}`,
           config: {
             title: {
               cy: "funnel-div-title",
@@ -293,9 +293,9 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
           }
         }, null, 8, ["config"]))
       ], 512)) : b("", !0),
-      e.value.userOptions.show && _.value && (r(oe) || r(le)) ? (s(), A(Ee, {
+      e.value.userOptions.show && _.value && (r(oe) || r(R)) ? (s(), A(Ee, {
         ref: "details",
-        key: `user_option_${W.value}`,
+        key: `user_option_${J.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: r(ne),
@@ -308,20 +308,20 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: !1,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: S.value,
+        isFullscreen: O.value,
         chartElement: N.value,
         position: e.value.userOptions.position,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: D.value,
-        onToggleAnnotator: R,
+        onToggleAnnotator: E,
         onToggleFullscreen: we,
         onGeneratePdf: r(ue),
         onGenerateImage: r(ie),
         onToggleTable: de,
         onGenerateCsv: he,
         style: $({
-          visibility: r(oe) ? r(le) ? "visible" : "hidden" : "visible"
+          visibility: r(oe) ? r(R) ? "visible" : "hidden" : "visible"
         })
       }, Ae({ _: 2 }, [
         a.$slots.optionPdf ? {
@@ -370,7 +370,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
       _.value ? (s(), u("svg", {
         key: 4,
         xmlns: r(Me),
-        class: T({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
+        class: T({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
         viewBox: `0 0 ${h.value.width <= 0 ? 10 : h.value.width} ${h.value.height <= 0 ? 10 : h.value.height}`,
         style: $(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
@@ -397,7 +397,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
             }, null, 8, st)
           ], 8, tt)
         ]),
-        e.value.style.chart.circleLinks.show ? (s(), u("line", H({ key: 0 }, Ce.value, {
+        e.value.style.chart.circleLinks.show ? (s(), u("line", Y({ key: 0 }, Ce.value, {
           stroke: e.value.style.chart.circleLinks.color,
           "stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
           "stroke-linecap": "round",
@@ -409,7 +409,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
             strokeDashoffset: e.value.useCssAnimation ? g.value.height : 0
           }
         }), null, 16, ot)) : b("", !0),
-        (s(!0), u(M, null, B(o.value, ({ cx: t, cy: n, r: f, fill: d }, P) => (s(), u("circle", H({ cx: t, cy: n, r: f, fill: d }, {
+        (s(!0), u(M, null, B(o.value, ({ cx: t, cy: n, r: f, fill: d }, P) => (s(), u("circle", Y({ cx: t, cy: n, r: f, fill: d }, {
           stroke: e.value.style.chart.circles.stroke,
           "stroke-width": e.value.style.chart.circles.strokeWidth,
           class: {
@@ -453,7 +453,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
             transition: e.value.useCssAnimation ? `all ${150 * y.value.length}ms ease-in` : "none"
           })
         }, null, 14, ut)) : b("", !0),
-        (s(!0), u(M, null, B(o.value, ({ x: t, y: n, height: f, width: d, fill: P }, E) => (s(), u("rect", H({ x: t, y: n, height: f, width: d, fill: P }, {
+        (s(!0), u(M, null, B(o.value, ({ x: t, y: n, height: f, width: d, fill: P }, H) => (s(), u("rect", Y({ x: t, y: n, height: f, width: d, fill: P }, {
           stroke: e.value.style.chart.bars.stroke,
           "stroke-width": e.value.style.chart.bars.strokeWidth,
           rx: e.value.style.chart.bars.borderRadius,
@@ -461,7 +461,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
             animated: e.value.useCssAnimation && !w.value
           },
           style: {
-            animationDelay: `${150 * E}ms`
+            animationDelay: `${150 * H}ms`
           }
         }), null, 16, it))), 256)),
         (s(!0), u(M, null, B(o.value, (t, n) => (s(), u("g", null, [
@@ -527,7 +527,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
       a.$slots.source ? (s(), u("div", {
         key: 7,
         ref_key: "source",
-        ref: Z,
+        ref: ee,
         dir: "auto"
       }, [
         k(a.$slots, "source", {}, void 0, !0)
@@ -549,8 +549,8 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
         }
       }, {
         content: p(() => [
-          (s(), A(He, {
-            key: `table_${K.value}`,
+          (s(), A(je, {
+            key: `table_${Q.value}`,
             colNames: I.value.colNames,
             head: I.value.head,
             body: I.value.body,
@@ -574,7 +574,7 @@ const Ze = ["id"], et = ["xmlns", "viewBox"], tt = ["id"], at = ["stop-color"],
       }, 8, ["config"])) : b("", !0)
     ], 46, Ze));
   }
-}, Tt = /* @__PURE__ */ Qe(ft, [["__scopeId", "data-v-d6b244bd"]]);
+}, Tt = /* @__PURE__ */ Qe(ft, [["__scopeId", "data-v-11626943"]]);
 export {
   Tt as default
 };

package/dist/vue-ui-funnel-QQGqK4OD.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("./index-BkXYJDpD.cjs"),W=require("./useNestedProp-C6IvqE-r.cjs"),J=require("./usePrinter-DHv-BwME.cjs"),se=require("./Title-B7ruS8yl.cjs"),ue=require("./PenAndPaper-DDheVRNG.cjs"),ie=require("./DataTable-CwAdpLng.cjs"),ce=require("./vue-ui-accordion-kr18wKfc.cjs"),K=require("./useResponsive-BJ7DTGpm.cjs"),ve=require("./vue-ui-skeleton-BTN1PKkz.cjs"),de=require("./useUserOptionState-BgepsfED.cjs"),he=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),me=["id"],fe=["xmlns","viewBox"],pe=["id"],be=["stop-color"],ye=["stop-color"],ge=["stop-color"],ke=["stroke","stroke-width"],Ce=["stroke","stroke-width"],we=["x","y","font-size","fill","font-weight"],xe=["points","fill"],Le=["stroke","stroke-width","rx"],Be=["x","y","font-size","fill","font-weight"],$e=["x","y","font-size","fill","font-weight"],Se={key:5,class:"vue-data-ui-watermark"},_e=["innerHTML"],Ne={__name:"vue-ui-funnel",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},setup(Q,{expose:Z}){const d=Q;e.useCssVars(l=>({"2b4b0562":re.value}));const{vue_ui_funnel:ee}=r.useConfig(),b=e.computed(()=>!!d.dataset&&d.dataset.length);e.onMounted(z);function z(){if(r.objectIsEmpty(d.dataset)?r.error({componentName:"VueUiFunnel",type:"dataset"}):d.dataset.forEach((l,o)=>{r.getMissingDatasetAttributes({datasetObject:l,requiredAttributes:["name","value"]}).forEach(a=>{b.value=!1,r.error({componentName:"VueUiFunnel",type:"datasetSerieAttribute",property:a,index:o})})}),t.value.responsive){const l=K.throttle(()=>{const{width:o,height:a}=K.useResponsive({chart:g.value,title:t.value.style.chart.title.text?O.value:null,source:V.value,noTitle:E.value});c.value.height=a,c.value.width=o,m.value=H(),u.value.circles=r.translateSize({relator:Math.min(o,a),adjuster:600,source:t.value.style.chart.circles.dataLabels.fontSize,threshold:10,fallback:10}),u.value.names=r.translateSize({relator:Math.min(o,a),adjuster:600,source:t.value.style.chart.bars.dataLabels.name.fontSize,threshold:10,fallback:10}),u.value.values=r.translateSize({relator:Math.min(o,a),adjuster:600,source:t.value.style.chart.bars.dataLabels.value.fontSize,threshold:10,fallback:10})});D.value=new ResizeObserver(l),D.value.observe(g.value.parentNode)}}const g=e.ref(null),k=e.ref(r.createUid()),T=e.ref(0),A=e.ref(0),P=e.ref(0),E=e.ref(null),V=e.ref(null),O=e.ref(null),D=e.ref(null),f=e.ref(!1);function F(){const l=W.useNestedProp({userConfig:d.config,defaultConfig:ee});return l.theme?{...W.useNestedProp({userConfig:r.themes.vue_ui_funnel[l.theme]||d.config,defaultConfig:l})}:l}const t=e.computed({get:()=>F(),set:l=>l}),{userOptionsVisible:S,setUserOptionsVisibility:I,keepUserOptionState:M}=de.useUserOptionState({config:t.value});e.watch(()=>d.config,l=>{t.value=F(),S.value=!t.value.showOnChartHover,z(),A.value+=1,P.value+=1,u.value.circles=t.value.style.chart.circles.dataLabels.fontSize,u.value.names=t.value.style.chart.bars.dataLabels.name.fontSize,u.value.values=t.value.style.chart.bars.dataLabels.value.fontSize},{deep:!0});const{isPrinting:q,isImaging:R,generatePdf:U,generateImage:G}=J.usePrinter({elementId:`funnel_${k.value}`,fileName:t.value.style.chart.title.text||"vue-ui-funnel"}),te=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),L=e.ref({showTable:t.value.table.show}),u=e.ref({circles:t.value.style.chart.circles.dataLabels.fontSize,names:t.value.style.chart.bars.dataLabels.name.fontSize,values:t.value.style.chart.bars.dataLabels.value.fontSize}),c=e.computed({get:()=>({height:t.value.style.chart.height,width:t.value.style.chart.width}),set:l=>l}),h=e.computed(()=>b.value?d.dataset.map((l,o)=>({...l,color:l.color?r.convertColorToHex(l.color):r.lightenHexColor(t.value.style.chart.bars.defaultColor,o/d.dataset.length)})):[]);setTimeout(()=>{f.value=!0},h.value.length*150);function H(){const l=t.value.style.chart.padding.left,o=t.value.style.chart.padding.top;return{left:l,top:o,right:c.value.width-t.value.style.chart.padding.right,bottom:c.value.height-t.value.style.chart.padding.bottom,width:c.value.width-l-t.value.style.chart.padding.right,height:c.value.height-o-t.value.style.chart.padding.bottom}}const m=e.ref(H()),y=e.computed(()=>m.value.height/d.dataset.length),p=e.computed(()=>y.value*t.value.style.chart.bars.gapRatio),j=e.computed(()=>m.value.width*t.value.style.chart.barCircleSpacingRatio),n=e.computed(()=>h.value.map((l,o)=>{const a=y.value-p.value,s=m.value.top+p.value/2*o+(y.value-p.value/2)*o+p.value/2,v=l.value/h.value[0].value,i=(m.value.width-a-j.value)*(l.value/h.value[0].value);return{...l,cx:m.value.left+a/2,cy:s+a/2,datapointIndex:o,fill:l.color,height:Math.max(a,0),proportion:v,r:Math.max(a/2,0),width:Math.max(i,0),x:m.value.left+a+j.value,y:s}})),ae=e.computed(()=>{const l=n.value.map(o=>`${o.x+o.width},${o.y+(y.value-p.value)/2}`);return`${n.value[0].x},${n.value[0].y+(y.value-p.value)/2} ${l.toString()} ${n.value.at(-1).x},${n.value.at(-1).y+(y.value-p.value)/2}`}),le=e.computed(()=>({x1:n.value[0].cx,y1:n.value[0].cy,x2:n.value.at(-1).cx,y2:n.value.at(-1).cy})),C=e.ref(!1);function oe(l){C.value=l,T.value+=1}const re=e.computed(()=>`${h.value.length*150}ms`),B=e.ref(!1);function _(){B.value=!B.value}function X(){L.value.showTable=!L.value.showTable}const w=e.computed(()=>{const l=h.value.map(a=>({name:a.name,color:a.color})),o=h.value.map(a=>a.value);return{head:l,body:o}}),$=e.computed(()=>{const l=[t.value.table.columnNames.series,t.value.table.columnNames.value,t.value.table.columnNames.percentage],o=w.value.head.map((v,i)=>{const x=r.applyDataLabel(t.value.style.chart.bars.dataLabels.value.formatter,w.value.body[i],r.dataLabel({p:t.value.style.chart.bars.dataLabels.value.prefix,v:w.value.body[i],s:t.value.style.chart.bars.dataLabels.value.suffix,r:t.value.table.td.roundingValue}),{datapoint:n.value[i]}),N=r.applyDataLabel(t.value.style.chart.circles.dataLabels.formatter,n.value[i].proportion*100,r.dataLabel({v:n.value[i].proportion*100,s:"%",r:t.value.table.td.roundingPercentage}),{datapoint:n.value[i]});return[{color:v.color,name:v.name},x,N]}),a={th:{backgroundColor:t.value.table.th.backgroundColor,color:t.value.table.th.color,outline:t.value.table.th.outline},td:{backgroundColor:t.value.table.td.backgroundColor,color:t.value.table.td.color,outline:t.value.table.td.outline},breakpoint:t.value.table.responsiveBreakpoint};return{colNames:[t.value.table.columnNames.series,t.value.table.columnNames.value,t.value.table.columnNames.percentage],head:l,body:o,config:a}});function Y(){e.nextTick(()=>{const l=w.value.head.map((s,v)=>[[s.name],[w.value.body[v]],[n.value[v].proportion*100]]),o=[[t.value.style.chart.title.text],[t.value.style.chart.title.subtitle.text],[[t.value.table.columnNames.series],[t.value.table.columnNames.value],["%"]]].concat(l),a=r.createCsvContent(o);r.downloadCsv({csvContent:a,title:t.value.style.chart.title.text||"vue-ui-funnel"})})}function ne(){return h.value}return Z({getData:ne,generatePdf:U,generateCsv:Y,generateImage:G,toggleTable:X,toggleAnnotator:_}),(l,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"funnelChart",ref:g,class:e.normalizeClass(`vue-ui-funnel ${C.value?"vue-data-ui-wrapper-fullscreen":""} ${t.value.useCssAnimation?"":"vue-ui-dna"}`),style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width:100%; ${t.value.responsive?"height:100%;":""} text-align:center;background:${t.value.style.chart.backgroundColor}`),id:`funnel_${k.value}`,onMouseenter:o[1]||(o[1]=()=>e.unref(I)(!0)),onMouseleave:o[2]||(o[2]=()=>e.unref(I)(!1))},[t.value.userOptions.buttons.annotator?(e.openBlock(),e.createBlock(ue.PenAndPaper,{key:0,parent:g.value,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,active:B.value,onClose:_},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),te.value?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:E,class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},null,512)):e.createCommentVNode("",!0),t.value.style.chart.title.text?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"chartTitle",ref:O,style:"width:100%;background:transparent;padding-bottom:24px"},[(e.openBlock(),e.createBlock(se._sfc_main,{key:`title_${A.value}`,config:{title:{cy:"funnel-div-title",...t.value.style.chart.title},subtitle:{cy:"funnel-div-subtitle",...t.value.style.chart.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),t.value.userOptions.show&&b.value&&(e.unref(M)||e.unref(S))?(e.openBlock(),e.createBlock(J.UserOptions,{ref:"details",key:`user_option_${T.value}`,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,isPrinting:e.unref(q),isImaging:e.unref(R),uid:k.value,hasTooltip:!1,hasPdf:t.value.userOptions.buttons.pdf,hasImg:t.value.userOptions.buttons.img,hasXls:t.value.userOptions.buttons.csv,hasTable:t.value.userOptions.buttons.table,hasLabel:!1,hasFullscreen:t.value.userOptions.buttons.fullscreen,isFullscreen:C.value,chartElement:g.value,position:t.value.userOptions.position,titles:{...t.value.userOptions.buttonTitles},hasAnnotator:t.value.userOptions.buttons.annotator,isAnnotation:B.value,onToggleAnnotator:_,onToggleFullscreen:oe,onGeneratePdf:e.unref(U),onGenerateImage:e.unref(G),onToggleTable:X,onGenerateCsv:Y,style:e.normalizeStyle({visibility:e.unref(M)?e.unref(S)?"visible":"hidden":"visible"})},e.createSlots({_:2},[l.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,l.$slots.optionCsv?{name:"optionCsv",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionCsv",{},void 0,!0)]),key:"1"}:void 0,l.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionImg",{},void 0,!0)]),key:"2"}:void 0,l.$slots.optionTable?{name:"optionTable",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionTable",{},void 0,!0)]),key:"3"}:void 0,l.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:a,isFullscreen:s})=>[e.renderSlot(l.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:a,isFullscreen:s})),void 0,!0)]),key:"4"}:void 0,l.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:a,isAnnotator:s})=>[e.renderSlot(l.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:a,isAnnotator:s})),void 0,!0)]),key:"5"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasXls","hasTable","hasFullscreen","isFullscreen","chartElement","position","titles","hasAnnotator","isAnnotation","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),b.value?(e.openBlock(),e.createElementBlock("svg",{key:4,xmlns:e.unref(r.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":C.value,"vue-data-ui-fulscreen--off":!C.value}),viewBox:`0 0 ${c.value.width<=0?10:c.value.width} ${c.value.height<=0?10:c.value.height}`,style:e.normalizeStyle(`max-width:100%; overflow: visible; background:transparent;color:${t.value.style.chart.color}`)},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`funnel_area_${k.value}`,x1:"0%",x2:"100%",y1:"0%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":t.value.style.chart.backgroundColor,"stop-opacity":0},null,8,be),e.createElementVNode("stop",{offset:"20%","stop-color":t.value.style.chart.area.color},null,8,ye),e.createElementVNode("stop",{offset:"100%","stop-color":t.value.style.chart.area.color},null,8,ge)],8,pe)]),t.value.style.chart.circleLinks.show?(e.openBlock(),e.createElementBlock("line",e.mergeProps({key:0},le.value,{stroke:t.value.style.chart.circleLinks.color,"stroke-width":12*t.value.style.chart.circleLinks.widthRatio,"stroke-linecap":"round",class:{animated:t.value.useCssAnimation},style:{strokeDasharray:t.value.useCssAnimation?m.value.height:0,strokeDashoffset:t.value.useCssAnimation?m.value.height:0}}),null,16,ke)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,({cx:a,cy:s,r:v,fill:i},x)=>(e.openBlock(),e.createElementBlock("circle",e.mergeProps({cx:a,cy:s,r:v,fill:i},{stroke:t.value.style.chart.circles.stroke,"stroke-width":t.value.style.chart.circles.strokeWidth,class:{animated:t.value.useCssAnimation&&!f.value},style:{animationDelay:`${150*x}ms`}}),null,16,Ce))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(a,s)=>(e.openBlock(),e.createElementBlock("text",{x:a.cx,y:a.cy+u.value.circles/3+t.value.style.chart.circles.dataLabels.offsetY,"text-anchor":"middle","font-size":u.value.circles,fill:t.value.style.chart.circles.dataLabels.adaptColorToBackground?e.unref(r.adaptColorToBackground)(a.color):t.value.style.chart.circles.dataLabels.color,"font-weight":t.value.style.chart.circles.dataLabels.bold?"bold":"normal",class:e.normalizeClass({animated:t.value.useCssAnimation&&!f.value}),style:e.normalizeStyle({animationDelay:`${150*s}ms`})},e.toDisplayString(e.unref(r.applyDataLabel)(t.value.style.chart.circles.dataLabels.formatter,a.proportion*100,e.unref(r.dataLabel)({v:a.proportion*100,s:"%",r:t.value.style.chart.circles.dataLabels.rounding}),{datapoint:a})),15,we))),256)),t.value.style.chart.area.show?(e.openBlock(),e.createElementBlock("polygon",{key:1,points:ae.value,fill:`url(#funnel_area_${k.value})`,class:e.normalizeClass({animated:t.value.useCssAnimation&&!f.value}),style:e.normalizeStyle({transition:t.value.useCssAnimation?`all ${150*h.value.length}ms ease-in`:"none"})},null,14,xe)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,({x:a,y:s,height:v,width:i,fill:x},N)=>(e.openBlock(),e.createElementBlock("rect",e.mergeProps({x:a,y:s,height:v,width:i,fill:x},{stroke:t.value.style.chart.bars.stroke,"stroke-width":t.value.style.chart.bars.strokeWidth,rx:t.value.style.chart.bars.borderRadius,class:{animated:t.value.useCssAnimation&&!f.value},style:{animationDelay:`${150*N}ms`}}),null,16,Le))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(a,s)=>(e.openBlock(),e.createElementBlock("g",null,[e.createElementVNode("text",{x:a.x+a.width+t.value.style.chart.bars.dataLabels.name.offsetX+12,y:a.cy-u.value.names/2+t.value.style.chart.bars.dataLabels.name.offsetY,"text-anchor":"start","font-size":u.value.names,fill:t.value.style.chart.bars.dataLabels.name.color,"font-weight":t.value.style.chart.bars.dataLabels.name.bold?"bold":"normal",class:e.normalizeClass({animated:t.value.useCssAnimation&&!f.value}),style:e.normalizeStyle({animationDelay:`${150*s}ms`})},e.toDisplayString(a.name),15,Be),e.createElementVNode("text",{x:a.x+a.width+t.value.style.chart.bars.dataLabels.value.offsetX+12,y:a.cy+u.value.values+t.value.style.chart.bars.dataLabels.value.offsetY,"text-anchor":"start","font-size":u.value.values,fill:t.value.style.chart.bars.dataLabels.value.color,"font-weight":t.value.style.chart.bars.dataLabels.value.bold?"bold":"normal",class:e.normalizeClass({animated:t.value.useCssAnimation&&!f.value}),style:e.normalizeStyle({animationDelay:`${150*s}ms`})},e.toDisplayString(e.unref(r.applyDataLabel)(t.value.style.chart.bars.dataLabels.value.formatter,a.value,e.unref(r.dataLabel)({p:t.value.style.chart.bars.dataLabels.value.prefix,v:a.value,s:t.value.style.chart.bars.dataLabels.value.suffix,r:t.value.style.chart.bars.dataLabels.value.rounding}),{datapoint:a})),15,$e)]))),256)),e.renderSlot(l.$slots,"svg",{svg:c.value},void 0,!0)],14,fe)):e.createCommentVNode("",!0),l.$slots.watermark?(e.openBlock(),e.createElementBlock("div",Se,[e.renderSlot(l.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(q)||e.unref(R)})),void 0,!0)])):e.createCommentVNode("",!0),b.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(ve.default,{key:6,config:{type:"verticalBar",style:{backgroundColor:t.value.style.chart.backgroundColor,verticalBar:{axis:{color:"#CCCCCC"},color:"#CCCCCC"}}}},null,8,["config"])),l.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:7,ref_key:"source",ref:V,dir:"auto"},[e.renderSlot(l.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),b.value?(e.openBlock(),e.createBlock(ce.default,{key:8,hideDetails:"",config:{open:L.value.showTable,maxHeight:1e4,body:{backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color},head:{backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color}}},{content:e.withCtx(()=>[(e.openBlock(),e.createBlock(ie.DataTable,{key:`table_${P.value}`,colNames:$.value.colNames,head:$.value.head,body:$.value.body,config:$.value.config,title:`${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text?` : ${t.value.style.chart.title.subtitle.text}`:""}`,onClose:o[0]||(o[0]=a=>L.value.showTable=!1)},{th:e.withCtx(({th:a})=>[e.createElementVNode("div",{innerHTML:a,style:{display:"flex","align-items":"center"}},null,8,_e)]),td:e.withCtx(({td:a})=>[e.createTextVNode(e.toDisplayString(a.name?a.name:a),1)]),_:1},8,["colNames","head","body","config","title"]))]),_:1},8,["config"])):e.createCommentVNode("",!0)],46,me))}},ze=he._export_sfc(Ne,[["__scopeId","data-v-11626943"]]);exports.default=ze;