vue-data-ui 3.0.22 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/{Arrow-C3_2GkYQ.js → Arrow-DvG07exK.js} +1 -1
  2. package/dist/{BaseDraggableDialog-BhxUDwEm.js → BaseDraggableDialog-O7900pGp.js} +72 -59
  3. package/dist/{BaseIcon-B717hnWR.js → BaseIcon-DHtro8us.js} +1 -1
  4. package/dist/{useLoading-D7YHNtLX.js → BaseScanner-BgWxam9d.js} +11 -11
  5. package/dist/{ColorPicker-CH5_RNaK.js → ColorPicker-CpWzNn4r.js} +2 -2
  6. package/dist/DataTable-DJjA2_wf.js +140 -0
  7. package/dist/Legend-2-dC7DVb.js +72 -0
  8. package/dist/{NonSvgPenAndPaper-DCJGSteM.js → NonSvgPenAndPaper-DHeE4Yuv.js} +3 -3
  9. package/dist/{PackageVersion-CE7HSich.js → PackageVersion-DU12WH3O.js} +1 -1
  10. package/dist/{PenAndPaper-BMHsOtT8.js → PenAndPaper-B7QEDgx4.js} +3 -3
  11. package/dist/{Shape-C3J8aKNH.js → Shape-Dj2Hl33H.js} +1 -1
  12. package/dist/{Slicer-BEBDljWA.js → Slicer-D99HytqX.js} +2 -2
  13. package/dist/{SparkTooltip-CVSZQtoP.js → SparkTooltip-B-wL07rI.js} +1 -1
  14. package/dist/{Title-BL-IjQmj.js → Title-Dq2_Z9kR.js} +1 -1
  15. package/dist/{Tooltip-CCnDaboi.js → Tooltip-Y219DXZO.js} +1 -1
  16. package/dist/{UserOptions-BWMV0_Ze.js → UserOptions-BuGfCdAY.js} +2 -2
  17. package/dist/{dom-to-png-DwUGURhV.js → dom-to-png-BhciAKaM.js} +1 -1
  18. package/dist/{img-DsVqerdt.js → img-JOqdlnUs.js} +1 -1
  19. package/dist/{index-BHb_mcWF.js → index-CDQbCd41.js} +37 -2
  20. package/dist/{pdf-Ckt8JtYf.js → pdf-Dd-LIJqz.js} +1 -1
  21. package/dist/style.css +1 -1
  22. package/dist/types/vue-data-ui.d.cts +35 -0
  23. package/dist/types/vue-data-ui.d.ts +35 -0
  24. package/dist/{useAutoSizeLabelsInsideViewbox-Cy946l1e.js → useAutoSizeLabelsInsideViewbox-Bky5KGFZ.js} +1 -1
  25. package/dist/{useNestedProp-aC9S6EFJ.js → useNestedProp-BPEHGiYX.js} +1 -1
  26. package/dist/{usePrinter-B7rhbRrT.js → usePrinter-Bnl1YeUU.js} +2 -2
  27. package/dist/{vue-data-ui-Bu7qDtf0.js → vue-data-ui-DcNYz3cZ.js} +64 -64
  28. package/dist/vue-data-ui.js +1 -1
  29. package/dist/vue-ui-3d-bar-BNIFAeN-.js +1369 -0
  30. package/dist/{vue-ui-accordion-DsnF0JuK.js → vue-ui-accordion-Bf_LHFFX.js} +3 -3
  31. package/dist/{vue-ui-age-pyramid-s8xyb3Gf.js → vue-ui-age-pyramid-Bz-l1afR.js} +333 -286
  32. package/dist/{vue-ui-annotator-DRacM62z.js → vue-ui-annotator-BcfRH2BF.js} +2 -2
  33. package/dist/{vue-ui-bullet-DdDrdyOJ.js → vue-ui-bullet-DK1aM9fX.js} +8 -8
  34. package/dist/{vue-ui-candlestick-BsNnInNt.js → vue-ui-candlestick-D6mMjvtu.js} +453 -406
  35. package/dist/{vue-ui-carousel-table-Ci9mrUBd.js → vue-ui-carousel-table-Vp5f238W.js} +4 -4
  36. package/dist/{vue-ui-chestnut-fHfJNK0V.js → vue-ui-chestnut-BKc4v-lf.js} +509 -459
  37. package/dist/vue-ui-chord-CquhRjf0.js +1100 -0
  38. package/dist/vue-ui-circle-pack-D6zLgxa3.js +755 -0
  39. package/dist/{vue-ui-cursor-Bk5LHg5V.js → vue-ui-cursor-DIXb2S93.js} +2 -2
  40. package/dist/{vue-ui-dashboard-CjZMEYs6.js → vue-ui-dashboard-DmiriAK7.js} +62 -62
  41. package/dist/{vue-ui-digits-nDIvHyRB.js → vue-ui-digits-CLAIo9gW.js} +2 -2
  42. package/dist/{vue-ui-donut-CF9FdxfC.js → vue-ui-donut-C8h_tCSO.js} +477 -431
  43. package/dist/{vue-ui-donut-evolution-f5k-Yu3N.js → vue-ui-donut-evolution-C3r0YhKz.js} +482 -435
  44. package/dist/{vue-ui-dumbbell-Dm3gsrzi.js → vue-ui-dumbbell-D-t4M00E.js} +443 -398
  45. package/dist/vue-ui-flow-D7_D_UNm.js +900 -0
  46. package/dist/vue-ui-funnel-B0QOfZRz.js +666 -0
  47. package/dist/vue-ui-galaxy-Ccw5uNes.js +744 -0
  48. package/dist/{vue-ui-gauge-DkDpUAN7.js → vue-ui-gauge-DvW7nFmK.js} +8 -8
  49. package/dist/{vue-ui-gizmo-BD5fLs8r.js → vue-ui-gizmo-WGQxvGPy.js} +4 -4
  50. package/dist/vue-ui-heatmap-BQkLujyp.js +1127 -0
  51. package/dist/{vue-ui-history-plot-ICoBBO-y.js → vue-ui-history-plot-eU33r_Ot.js} +408 -361
  52. package/dist/{vue-ui-kpi-Dp2M2EFo.js → vue-ui-kpi-CKg2i71M.js} +3 -3
  53. package/dist/{vue-ui-mini-loader-C5672jjA.js → vue-ui-mini-loader-BmkGQsm_.js} +2 -2
  54. package/dist/vue-ui-molecule-Dlu0hjSg.js +702 -0
  55. package/dist/{vue-ui-mood-radar-B-qhYUcB.js → vue-ui-mood-radar-DQaxfw9R.js} +342 -291
  56. package/dist/{vue-ui-nested-donuts-V6BvP3pF.js → vue-ui-nested-donuts-Djj9Aw_i.js} +548 -502
  57. package/dist/{vue-ui-onion-BKqqbWbg.js → vue-ui-onion-ZgsErXis.js} +363 -317
  58. package/dist/vue-ui-parallel-coordinate-plot-B5fB22Jc.js +979 -0
  59. package/dist/vue-ui-quadrant-CMevCtXH.js +1483 -0
  60. package/dist/{vue-ui-quick-chart-BVZSdQeT.js → vue-ui-quick-chart-DcparKSX.js} +7 -7
  61. package/dist/vue-ui-radar-DFbxoKCK.js +858 -0
  62. package/dist/{vue-ui-rating-CncrxDCY.js → vue-ui-rating-ZUpxCWrk.js} +2 -2
  63. package/dist/{vue-ui-relation-circle-VYM1dclx.js → vue-ui-relation-circle-eNKJY4Sx.js} +8 -8
  64. package/dist/vue-ui-ridgeline-D4shpQZd.js +1204 -0
  65. package/dist/vue-ui-rings-TdTHMbsa.js +785 -0
  66. package/dist/{vue-ui-scatter-D2b-u5dv.js → vue-ui-scatter-CVuV9ljU.js} +594 -548
  67. package/dist/{vue-ui-skeleton-BTuBaaE_.js → vue-ui-skeleton-CFxBU2-p.js} +3 -3
  68. package/dist/{vue-ui-smiley-D1UxJNbV.js → vue-ui-smiley-Har3B3aQ.js} +2 -2
  69. package/dist/{vue-ui-spark-trend-BCP0BWMI.js → vue-ui-spark-trend-FPk-XEwI.js} +4 -4
  70. package/dist/{vue-ui-sparkbar-eBo-RSvE.js → vue-ui-sparkbar-V3eJ0w0t.js} +4 -4
  71. package/dist/{vue-ui-sparkgauge-DberOXWX.js → vue-ui-sparkgauge-DKTGkWnJ.js} +4 -4
  72. package/dist/{vue-ui-sparkhistogram-CoKQGG5X.js → vue-ui-sparkhistogram-DJsgFwHs.js} +5 -5
  73. package/dist/{vue-ui-sparkline-B_L4UNES.js → vue-ui-sparkline-Dmrm5SL5.js} +4 -4
  74. package/dist/{vue-ui-sparkstackbar-iAaRIyqb.js → vue-ui-sparkstackbar-B0Pl7VMI.js} +4 -4
  75. package/dist/{vue-ui-stackbar-B_0PJ7R2.js → vue-ui-stackbar-CNsgBPhj.js} +525 -479
  76. package/dist/{vue-ui-strip-plot-CWkA4l9P.js → vue-ui-strip-plot-CYAWwYOM.js} +390 -343
  77. package/dist/{vue-ui-table-CILVy7YP.js → vue-ui-table-Dn6H98rP.js} +3 -3
  78. package/dist/{vue-ui-table-heatmap-DL2n2Z7p.js → vue-ui-table-heatmap-COI9LRqC.js} +5 -5
  79. package/dist/{vue-ui-table-sparkline-DOt2EKpe.js → vue-ui-table-sparkline-B7Gg5FfJ.js} +4 -4
  80. package/dist/{vue-ui-thermometer-BTP1ic_T.js → vue-ui-thermometer-Bgynq5El.js} +8 -8
  81. package/dist/{vue-ui-timer-Bc-zJH9j.js → vue-ui-timer-CXng51v5.js} +5 -5
  82. package/dist/{vue-ui-tiremarks-B9n528e1.js → vue-ui-tiremarks-Cy1U3hO1.js} +7 -7
  83. package/dist/vue-ui-treemap-BsvIvRmE.js +1092 -0
  84. package/dist/{vue-ui-vertical-bar-CK2j09gJ.js → vue-ui-vertical-bar-DHqWeDIf.js} +512 -464
  85. package/dist/{vue-ui-waffle-DJkqgqlR.js → vue-ui-waffle-D1Mscj3N.js} +416 -370
  86. package/dist/{vue-ui-wheel-CcbgpIUr.js → vue-ui-wheel-DpV-N5tF.js} +7 -7
  87. package/dist/vue-ui-word-cloud-MaNQ3Kdk.js +811 -0
  88. package/dist/{vue-ui-world-DLmB_Z96.js → vue-ui-world-DYz6zw3x.js} +512 -466
  89. package/dist/{vue-ui-xy-KmrNT6qh.js → vue-ui-xy-B1nqNbzw.js} +1559 -1508
  90. package/dist/vue-ui-xy-canvas-D4wd-Asd.js +1291 -0
  91. package/package.json +1 -1
  92. package/dist/DataTable-Y5T9UxMO.js +0 -133
  93. package/dist/Legend-DkU3at-b.js +0 -72
  94. package/dist/vue-ui-3d-bar-CBfQ3Pcb.js +0 -1323
  95. package/dist/vue-ui-chord-0wf798ls.js +0 -1049
  96. package/dist/vue-ui-circle-pack-CuRHG8gr.js +0 -709
  97. package/dist/vue-ui-flow-K7UBguES.js +0 -852
  98. package/dist/vue-ui-funnel-DoDZbsTp.js +0 -620
  99. package/dist/vue-ui-galaxy-BsDlHxzE.js +0 -691
  100. package/dist/vue-ui-heatmap-DOT2tBy_.js +0 -1078
  101. package/dist/vue-ui-molecule-DgqVh2k0.js +0 -656
  102. package/dist/vue-ui-parallel-coordinate-plot-BZf24Zur.js +0 -927
  103. package/dist/vue-ui-quadrant-S58B2LrQ.js +0 -1432
  104. package/dist/vue-ui-radar-Dh67mQ9E.js +0 -807
  105. package/dist/vue-ui-ridgeline-CsByERvm.js +0 -1157
  106. package/dist/vue-ui-rings-CR2UfgnV.js +0 -739
  107. package/dist/vue-ui-treemap-Cl9qo9O-.js +0 -1046
  108. package/dist/vue-ui-word-cloud-CZ_TRf4o.js +0 -765
  109. package/dist/vue-ui-xy-canvas-6VYNyX6a.js +0 -1243
@@ -1,620 +0,0 @@
1
- import { useCssVars as De, computed as d, defineAsyncComponent as O, ref as h, shallowRef as ge, onMounted as Re, onBeforeUnmount as Me, watch as Be, createElementBlock as i, openBlock as n, unref as s, normalizeStyle as _, normalizeClass as z, createBlock as N, createCommentVNode as b, createSlots as Ee, withCtx as g, renderSlot as m, normalizeProps as E, guardReactiveProps as V, createVNode as Ve, createElementVNode as w, mergeProps as J, Fragment as U, renderList as G, toDisplayString as j, createTextVNode as Ue, nextTick as Ge } from "vue";
2
- import { u as je, c as He, o as Xe, f as pe, g as Ye, e as qe, l as We, k as H, i as X, X as Je, F as Ke, E as K, b as Qe, v as Ze, w as et } from "./index-BHb_mcWF.js";
3
- import { u as ke } from "./useNestedProp-aC9S6EFJ.js";
4
- import { u as tt } from "./usePrinter-B7rhbRrT.js";
5
- import { t as at, u as lt } from "./useResponsive-DfdjqQps.js";
6
- import { u as st } from "./useUserOptionState-BIvW1Kz7.js";
7
- import { u as ot } from "./useChartAccessibility-9icAAmYg.js";
8
- import nt from "./Title-BL-IjQmj.js";
9
- import rt from "./img-DsVqerdt.js";
10
- import { _ as ut } from "./_plugin-vue_export-helper-CHgC5LLL.js";
11
- const it = ["id"], ct = ["xmlns", "viewBox"], vt = ["width", "height"], dt = ["id"], ht = ["stop-color"], ft = ["stop-color"], bt = ["stop-color"], mt = ["stroke", "stroke-width"], yt = ["stroke", "stroke-width"], gt = ["x", "y", "font-size", "fill", "font-weight"], pt = ["points", "fill"], kt = ["stroke", "stroke-width", "rx"], Ct = ["x", "y", "font-size", "fill", "font-weight"], wt = ["x", "y", "font-size", "fill", "font-weight"], $t = {
12
- key: 5,
13
- class: "vue-data-ui-watermark"
14
- }, xt = ["innerHTML"], Lt = {
15
- __name: "vue-ui-funnel",
16
- props: {
17
- config: {
18
- type: Object,
19
- default() {
20
- return {};
21
- }
22
- },
23
- dataset: {
24
- type: Array,
25
- default() {
26
- return [];
27
- }
28
- }
29
- },
30
- setup(Ce, { expose: we }) {
31
- De((t) => ({
32
- 83613044: Pe.value
33
- }));
34
- const $e = O(() => import("./vue-ui-accordion-DsnF0JuK.js")), xe = O(() => import("./DataTable-Y5T9UxMO.js")), Le = O(() => import("./PackageVersion-CE7HSich.js")), _e = O(() => import("./PenAndPaper-BMHsOtT8.js")), Ae = O(() => import("./vue-ui-skeleton-BTuBaaE_.js")), Te = O(() => import("./UserOptions-BWMV0_Ze.js")), { vue_ui_funnel: Se } = je(), y = Ce, $ = h(null), P = h(He()), Q = h(0), Z = h(0), ee = h(0), te = h(null), ae = h(null), le = h(null), C = ge(null), A = ge(null), x = h(!1), T = d(() => !!y.dataset && y.dataset.length);
35
- Re(se);
36
- function se() {
37
- if (Xe(y.dataset) ? pe({
38
- componentName: "VueUiFunnel",
39
- type: "dataset"
40
- }) : y.dataset.forEach((t, l) => {
41
- Ye({
42
- datasetObject: t,
43
- requiredAttributes: ["name", "value"]
44
- }).forEach((a) => {
45
- T.value = !1, pe({
46
- componentName: "VueUiFunnel",
47
- type: "datasetSerieAttribute",
48
- property: a,
49
- index: l
50
- });
51
- });
52
- }), e.value.responsive) {
53
- const t = at(() => {
54
- const { width: l, height: a } = lt({
55
- chart: $.value,
56
- title: e.value.style.chart.title.text ? le.value : null,
57
- source: ae.value,
58
- noTitle: te.value
59
- });
60
- requestAnimationFrame(() => {
61
- v.value.height = a, v.value.width = l, k.value = he(), e.value.responsiveProportionalSizing ? (c.value.circles = K({
62
- relator: Math.min(l, a),
63
- adjuster: 600,
64
- source: e.value.style.chart.circles.dataLabels.fontSize,
65
- threshold: 10,
66
- fallback: 10
67
- }), c.value.names = K({
68
- relator: Math.min(l, a),
69
- adjuster: 600,
70
- source: e.value.style.chart.bars.dataLabels.name.fontSize,
71
- threshold: 10,
72
- fallback: 10
73
- }), c.value.values = K({
74
- relator: Math.min(l, a),
75
- adjuster: 600,
76
- source: e.value.style.chart.bars.dataLabels.value.fontSize,
77
- threshold: 10,
78
- fallback: 10
79
- })) : (c.value.circles = e.value.style.chart.circles.dataLabels.fontSize, c.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, c.value.values = e.value.style.chart.bars.dataLabels.value.fontSize);
80
- });
81
- });
82
- C.value && (A.value && C.value.unobserve(A.value), C.value.disconnect()), C.value = new ResizeObserver(t), A.value = $.value.parentNode, C.value.observe(A.value);
83
- }
84
- }
85
- Me(() => {
86
- C.value && (A.value && C.value.unobserve(A.value), C.value.disconnect());
87
- });
88
- function oe() {
89
- const t = ke({
90
- userConfig: y.config,
91
- defaultConfig: Se
92
- });
93
- return t.theme ? {
94
- ...ke({
95
- userConfig: Qe.vue_ui_funnel[t.theme] || y.config,
96
- defaultConfig: t
97
- })
98
- } : t;
99
- }
100
- const e = d({
101
- get: () => oe(),
102
- set: (t) => t
103
- }), { userOptionsVisible: Y, setUserOptionsVisibility: ne, keepUserOptionState: re } = st({ config: e.value }), { svgRef: ue } = ot({ config: e.value.style.chart.title });
104
- Be(() => y.config, (t) => {
105
- e.value = oe(), Y.value = !e.value.userOptions.showOnChartHover, se(), Z.value += 1, ee.value += 1, c.value.circles = e.value.style.chart.circles.dataLabels.fontSize, c.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, c.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, I.value.showTable = e.value.table.show;
106
- }, { deep: !0 });
107
- const { isPrinting: ie, isImaging: ce, generatePdf: ve, generateImage: de } = tt({
108
- elementId: `funnel_${P.value}`,
109
- fileName: e.value.style.chart.title.text || "vue-ui-funnel",
110
- options: e.value.userOptions.print
111
- }), Oe = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), I = h({
112
- showTable: e.value.table.show
113
- }), c = h({
114
- circles: e.value.style.chart.circles.dataLabels.fontSize,
115
- names: e.value.style.chart.bars.dataLabels.name.fontSize,
116
- values: e.value.style.chart.bars.dataLabels.value.fontSize
117
- }), v = d({
118
- get: () => ({
119
- height: e.value.style.chart.height,
120
- width: e.value.style.chart.width
121
- }),
122
- set: (t) => t
123
- }), p = d(() => T.value ? y.dataset.map((t, l) => ({
124
- ...t,
125
- color: t.color ? qe(t.color) : We(e.value.style.chart.bars.defaultColor, l / y.dataset.length)
126
- })) : []);
127
- setTimeout(() => {
128
- x.value = !0;
129
- }, p.value.length * 150);
130
- function he() {
131
- const t = e.value.style.chart.padding.left, l = e.value.style.chart.padding.top;
132
- return {
133
- left: t,
134
- top: l,
135
- right: v.value.width - e.value.style.chart.padding.right,
136
- bottom: v.value.height - e.value.style.chart.padding.bottom,
137
- width: v.value.width - t - e.value.style.chart.padding.right,
138
- height: v.value.height - l - e.value.style.chart.padding.bottom
139
- };
140
- }
141
- const k = h(he()), S = d(() => k.value.height / y.dataset.length), L = d(() => S.value * e.value.style.chart.bars.gapRatio), fe = d(() => k.value.width * e.value.style.chart.barCircleSpacingRatio), r = d(() => p.value.map((t, l) => {
142
- const a = S.value - L.value, o = k.value.top + L.value / 2 * l + (S.value - L.value / 2) * l + L.value / 2, f = t.value / p.value[0].value, u = (k.value.width - a - fe.value) * (t.value / p.value[0].value);
143
- return {
144
- ...t,
145
- cx: k.value.left + a / 2,
146
- cy: o + a / 2,
147
- datapointIndex: l,
148
- fill: t.color,
149
- height: Math.max(a, 0),
150
- proportion: f,
151
- r: Math.max(a / 2, 0),
152
- width: Math.max(u, 0),
153
- x: k.value.left + a + fe.value,
154
- y: o
155
- };
156
- })), ze = d(() => {
157
- const t = r.value.map((l) => `${l.x + l.width},${l.y + (S.value - L.value) / 2}`);
158
- return `${r.value[0].x},${r.value[0].y + (S.value - L.value) / 2} ${t.toString()} ${r.value.at(-1).x},${r.value.at(-1).y + (S.value - L.value) / 2}`;
159
- }), Ne = d(() => ({
160
- x1: r.value[0].cx,
161
- y1: r.value[0].cy,
162
- x2: r.value.at(-1).cx,
163
- y2: r.value.at(-1).cy
164
- })), F = h(!1);
165
- function be(t) {
166
- F.value = t, Q.value += 1;
167
- }
168
- const Pe = d(() => `${p.value.length * 150}ms`), M = h(!1);
169
- function q() {
170
- M.value = !M.value;
171
- }
172
- function me() {
173
- I.value.showTable = !I.value.showTable;
174
- }
175
- const D = d(() => {
176
- const t = p.value.map((a) => ({
177
- name: a.name,
178
- color: a.color
179
- })), l = p.value.map((a) => a.value);
180
- return { head: t, body: l };
181
- }), B = d(() => {
182
- const t = [
183
- e.value.table.columnNames.series,
184
- e.value.table.columnNames.value,
185
- e.value.table.columnNames.percentage
186
- ], l = D.value.head.map((f, u) => {
187
- const R = H(
188
- e.value.style.chart.bars.dataLabels.value.formatter,
189
- D.value.body[u],
190
- X({
191
- p: e.value.style.chart.bars.dataLabels.value.prefix,
192
- v: D.value.body[u],
193
- s: e.value.style.chart.bars.dataLabels.value.suffix,
194
- r: e.value.table.td.roundingValue
195
- }),
196
- { datapoint: r.value[u] }
197
- ), W = H(
198
- e.value.style.chart.circles.dataLabels.formatter,
199
- r.value[u].proportion * 100,
200
- X({
201
- v: r.value[u].proportion * 100,
202
- s: "%",
203
- r: e.value.table.td.roundingPercentage
204
- }),
205
- { datapoint: r.value[u] }
206
- );
207
- return [
208
- { color: f.color, name: f.name },
209
- R,
210
- W
211
- ];
212
- }), a = {
213
- th: {
214
- backgroundColor: e.value.table.th.backgroundColor,
215
- color: e.value.table.th.color,
216
- outline: e.value.table.th.outline
217
- },
218
- td: {
219
- backgroundColor: e.value.table.td.backgroundColor,
220
- color: e.value.table.td.color,
221
- outline: e.value.table.td.outline
222
- },
223
- breakpoint: e.value.table.responsiveBreakpoint
224
- };
225
- return {
226
- colNames: [
227
- e.value.table.columnNames.series,
228
- e.value.table.columnNames.value,
229
- e.value.table.columnNames.percentage
230
- ],
231
- head: t,
232
- body: l,
233
- config: a
234
- };
235
- });
236
- function ye(t = null) {
237
- Ge(() => {
238
- const l = D.value.head.map((f, u) => [[
239
- f.name
240
- ], [D.value.body[u]], [r.value[u].proportion * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(l), o = Ze(a);
241
- t ? t(o) : et({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-funnel" });
242
- });
243
- }
244
- function Ie() {
245
- return p.value;
246
- }
247
- async function Fe({ scale: t = 2 } = {}) {
248
- if (!$.value) return;
249
- const { width: l, height: a } = $.value.getBoundingClientRect(), o = l / a, { imageUri: f, base64: u } = await rt({ domElement: $.value, base64: !0, img: !0, scale: t });
250
- return {
251
- imageUri: f,
252
- base64: u,
253
- title: e.value.style.chart.title.text,
254
- width: l,
255
- height: a,
256
- aspectRatio: o
257
- };
258
- }
259
- return we({
260
- getData: Ie,
261
- getImage: Fe,
262
- generatePdf: ve,
263
- generateCsv: ye,
264
- generateImage: de,
265
- toggleTable: me,
266
- toggleAnnotator: q,
267
- toggleFullscreen: be
268
- }), (t, l) => (n(), i("div", {
269
- ref_key: "funnelChart",
270
- ref: $,
271
- class: z(`vue-ui-funnel ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
272
- style: _(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
273
- id: `funnel_${P.value}`,
274
- onMouseenter: l[1] || (l[1] = () => s(ne)(!0)),
275
- onMouseleave: l[2] || (l[2] = () => s(ne)(!1))
276
- }, [
277
- e.value.userOptions.buttons.annotator ? (n(), N(s(_e), {
278
- key: 0,
279
- svgRef: s(ue),
280
- backgroundColor: e.value.style.chart.backgroundColor,
281
- color: e.value.style.chart.color,
282
- active: M.value,
283
- onClose: q
284
- }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
285
- Oe.value ? (n(), i("div", {
286
- key: 1,
287
- ref_key: "noTitle",
288
- ref: te,
289
- class: "vue-data-ui-no-title-space",
290
- style: "height:36px; width: 100%;background:transparent"
291
- }, null, 512)) : b("", !0),
292
- e.value.style.chart.title.text ? (n(), i("div", {
293
- key: 2,
294
- ref_key: "chartTitle",
295
- ref: le,
296
- style: "width:100%;background:transparent;padding-bottom:24px"
297
- }, [
298
- (n(), N(nt, {
299
- key: `title_${Z.value}`,
300
- config: {
301
- title: {
302
- cy: "funnel-div-title",
303
- ...e.value.style.chart.title
304
- },
305
- subtitle: {
306
- cy: "funnel-div-subtitle",
307
- ...e.value.style.chart.title.subtitle
308
- }
309
- }
310
- }, null, 8, ["config"]))
311
- ], 512)) : b("", !0),
312
- e.value.userOptions.show && T.value && (s(re) || s(Y)) ? (n(), N(s(Te), {
313
- ref: "details",
314
- key: `user_option_${Q.value}`,
315
- backgroundColor: e.value.style.chart.backgroundColor,
316
- color: e.value.style.chart.color,
317
- isPrinting: s(ie),
318
- isImaging: s(ce),
319
- uid: P.value,
320
- hasTooltip: !1,
321
- hasPdf: e.value.userOptions.buttons.pdf,
322
- hasImg: e.value.userOptions.buttons.img,
323
- hasXls: e.value.userOptions.buttons.csv,
324
- hasTable: e.value.userOptions.buttons.table,
325
- hasLabel: !1,
326
- hasFullscreen: e.value.userOptions.buttons.fullscreen,
327
- isFullscreen: F.value,
328
- chartElement: $.value,
329
- position: e.value.userOptions.position,
330
- titles: { ...e.value.userOptions.buttonTitles },
331
- hasAnnotator: e.value.userOptions.buttons.annotator,
332
- isAnnotation: M.value,
333
- callbacks: e.value.userOptions.callbacks,
334
- printScale: e.value.userOptions.print.scale,
335
- onToggleAnnotator: q,
336
- onToggleFullscreen: be,
337
- onGeneratePdf: s(ve),
338
- onGenerateImage: s(de),
339
- onToggleTable: me,
340
- onGenerateCsv: ye,
341
- style: _({
342
- visibility: s(re) ? s(Y) ? "visible" : "hidden" : "visible"
343
- })
344
- }, Ee({ _: 2 }, [
345
- t.$slots.menuIcon ? {
346
- name: "menuIcon",
347
- fn: g(({ isOpen: a, color: o }) => [
348
- m(t.$slots, "menuIcon", E(V({ isOpen: a, color: o })), void 0, !0)
349
- ]),
350
- key: "0"
351
- } : void 0,
352
- t.$slots.optionPdf ? {
353
- name: "optionPdf",
354
- fn: g(() => [
355
- m(t.$slots, "optionPdf", {}, void 0, !0)
356
- ]),
357
- key: "1"
358
- } : void 0,
359
- t.$slots.optionCsv ? {
360
- name: "optionCsv",
361
- fn: g(() => [
362
- m(t.$slots, "optionCsv", {}, void 0, !0)
363
- ]),
364
- key: "2"
365
- } : void 0,
366
- t.$slots.optionImg ? {
367
- name: "optionImg",
368
- fn: g(() => [
369
- m(t.$slots, "optionImg", {}, void 0, !0)
370
- ]),
371
- key: "3"
372
- } : void 0,
373
- t.$slots.optionTable ? {
374
- name: "optionTable",
375
- fn: g(() => [
376
- m(t.$slots, "optionTable", {}, void 0, !0)
377
- ]),
378
- key: "4"
379
- } : void 0,
380
- t.$slots.optionFullscreen ? {
381
- name: "optionFullscreen",
382
- fn: g(({ toggleFullscreen: a, isFullscreen: o }) => [
383
- m(t.$slots, "optionFullscreen", E(V({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
384
- ]),
385
- key: "5"
386
- } : void 0,
387
- t.$slots.optionAnnotator ? {
388
- name: "optionAnnotator",
389
- fn: g(({ toggleAnnotator: a, isAnnotator: o }) => [
390
- m(t.$slots, "optionAnnotator", E(V({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
391
- ]),
392
- key: "6"
393
- } : void 0
394
- ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
395
- T.value ? (n(), i("svg", {
396
- key: 4,
397
- ref_key: "svgRef",
398
- ref: ue,
399
- xmlns: s(Je),
400
- class: z({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
401
- viewBox: `0 0 ${v.value.width <= 0 ? 10 : v.value.width} ${v.value.height <= 0 ? 10 : v.value.height}`,
402
- style: _(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
403
- }, [
404
- Ve(s(Le)),
405
- t.$slots["chart-background"] ? (n(), i("foreignObject", {
406
- key: 0,
407
- x: 0,
408
- y: 0,
409
- width: v.value.width <= 0 ? 10 : v.value.width,
410
- height: v.value.height <= 0 ? 10 : v.value.height,
411
- style: {
412
- pointerEvents: "none"
413
- }
414
- }, [
415
- m(t.$slots, "chart-background", {}, void 0, !0)
416
- ], 8, vt)) : b("", !0),
417
- w("defs", null, [
418
- w("linearGradient", {
419
- id: `funnel_area_${P.value}`,
420
- x1: "0%",
421
- x2: "100%",
422
- y1: "0%",
423
- y2: "0%"
424
- }, [
425
- w("stop", {
426
- offset: "0%",
427
- "stop-color": e.value.style.chart.backgroundColor,
428
- "stop-opacity": 0
429
- }, null, 8, ht),
430
- w("stop", {
431
- offset: "20%",
432
- "stop-color": e.value.style.chart.area.color
433
- }, null, 8, ft),
434
- w("stop", {
435
- offset: "100%",
436
- "stop-color": e.value.style.chart.area.color
437
- }, null, 8, bt)
438
- ], 8, dt)
439
- ]),
440
- e.value.style.chart.circleLinks.show ? (n(), i("line", J({ key: 1 }, Ne.value, {
441
- stroke: e.value.style.chart.circleLinks.color,
442
- "stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
443
- "stroke-linecap": "round",
444
- class: {
445
- animated: e.value.useCssAnimation
446
- },
447
- style: {
448
- strokeDasharray: e.value.useCssAnimation ? k.value.height : 0,
449
- strokeDashoffset: e.value.useCssAnimation ? k.value.height : 0
450
- }
451
- }), null, 16, mt)) : b("", !0),
452
- (n(!0), i(U, null, G(r.value, ({ cx: a, cy: o, r: f, fill: u }, R) => (n(), i("circle", J({ ref_for: !0 }, { cx: a, cy: o, r: f, fill: u }, {
453
- stroke: e.value.style.chart.circles.stroke,
454
- "stroke-width": e.value.style.chart.circles.strokeWidth,
455
- class: {
456
- animated: e.value.useCssAnimation && !x.value
457
- },
458
- style: {
459
- animationDelay: `${150 * R}ms`
460
- }
461
- }), null, 16, yt))), 256)),
462
- (n(!0), i(U, null, G(r.value, (a, o) => (n(), i("text", {
463
- x: a.cx,
464
- y: a.cy + c.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
465
- "text-anchor": "middle",
466
- "font-size": c.value.circles,
467
- fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(Ke)(a.color) : e.value.style.chart.circles.dataLabels.color,
468
- "font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
469
- class: z({
470
- animated: e.value.useCssAnimation && !x.value
471
- }),
472
- style: _({
473
- animationDelay: `${150 * o}ms`
474
- })
475
- }, j(s(H)(
476
- e.value.style.chart.circles.dataLabels.formatter,
477
- a.proportion * 100,
478
- s(X)({
479
- v: a.proportion * 100,
480
- s: "%",
481
- r: e.value.style.chart.circles.dataLabels.rounding
482
- }),
483
- { datapoint: a }
484
- )), 15, gt))), 256)),
485
- e.value.style.chart.area.show ? (n(), i("polygon", {
486
- key: 2,
487
- points: ze.value,
488
- fill: `url(#funnel_area_${P.value})`,
489
- class: z({
490
- animated: e.value.useCssAnimation && !x.value
491
- }),
492
- style: _({
493
- transition: e.value.useCssAnimation ? `all ${150 * p.value.length}ms ease-in` : "none"
494
- })
495
- }, null, 14, pt)) : b("", !0),
496
- (n(!0), i(U, null, G(r.value, ({ x: a, y: o, height: f, width: u, fill: R }, W) => (n(), i("rect", J({ ref_for: !0 }, { x: a, y: o, height: f, width: u, fill: R }, {
497
- stroke: e.value.style.chart.bars.stroke,
498
- "stroke-width": e.value.style.chart.bars.strokeWidth,
499
- rx: e.value.style.chart.bars.borderRadius,
500
- class: {
501
- animated: e.value.useCssAnimation && !x.value
502
- },
503
- style: {
504
- animationDelay: `${150 * W}ms`
505
- }
506
- }), null, 16, kt))), 256)),
507
- (n(!0), i(U, null, G(r.value, (a, o) => (n(), i("g", null, [
508
- w("text", {
509
- x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
510
- y: a.cy - c.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
511
- "text-anchor": "start",
512
- "font-size": c.value.names,
513
- fill: e.value.style.chart.bars.dataLabels.name.color,
514
- "font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
515
- class: z({
516
- animated: e.value.useCssAnimation && !x.value
517
- }),
518
- style: _({
519
- animationDelay: `${150 * o}ms`
520
- })
521
- }, j(a.name), 15, Ct),
522
- w("text", {
523
- x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
524
- y: a.cy + c.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
525
- "text-anchor": "start",
526
- "font-size": c.value.values,
527
- fill: e.value.style.chart.bars.dataLabels.value.color,
528
- "font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
529
- class: z({
530
- animated: e.value.useCssAnimation && !x.value
531
- }),
532
- style: _({
533
- animationDelay: `${150 * o}ms`
534
- })
535
- }, j(s(H)(
536
- e.value.style.chart.bars.dataLabels.value.formatter,
537
- a.value,
538
- s(X)({
539
- p: e.value.style.chart.bars.dataLabels.value.prefix,
540
- v: a.value,
541
- s: e.value.style.chart.bars.dataLabels.value.suffix,
542
- r: e.value.style.chart.bars.dataLabels.value.rounding
543
- }),
544
- { datapoint: a }
545
- )), 15, wt)
546
- ]))), 256)),
547
- m(t.$slots, "svg", { svg: v.value }, void 0, !0)
548
- ], 14, ct)) : b("", !0),
549
- t.$slots.watermark ? (n(), i("div", $t, [
550
- m(t.$slots, "watermark", E(V({ isPrinting: s(ie) || s(ce) })), void 0, !0)
551
- ])) : b("", !0),
552
- T.value ? b("", !0) : (n(), N(s(Ae), {
553
- key: 6,
554
- config: {
555
- type: "verticalBar",
556
- style: {
557
- backgroundColor: e.value.style.chart.backgroundColor,
558
- verticalBar: {
559
- axis: {
560
- color: "#CCCCCC"
561
- },
562
- color: "#CCCCCC"
563
- }
564
- }
565
- }
566
- }, null, 8, ["config"])),
567
- t.$slots.source ? (n(), i("div", {
568
- key: 7,
569
- ref_key: "source",
570
- ref: ae,
571
- dir: "auto"
572
- }, [
573
- m(t.$slots, "source", {}, void 0, !0)
574
- ], 512)) : b("", !0),
575
- T.value ? (n(), N(s($e), {
576
- key: 8,
577
- hideDetails: "",
578
- config: {
579
- open: I.value.showTable,
580
- maxHeight: 1e4,
581
- body: {
582
- backgroundColor: e.value.style.chart.backgroundColor,
583
- color: e.value.style.chart.color
584
- },
585
- head: {
586
- backgroundColor: e.value.style.chart.backgroundColor,
587
- color: e.value.style.chart.color
588
- }
589
- }
590
- }, {
591
- content: g(() => [
592
- (n(), N(s(xe), {
593
- key: `table_${ee.value}`,
594
- colNames: B.value.colNames,
595
- head: B.value.head,
596
- body: B.value.body,
597
- config: B.value.config,
598
- title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
599
- onClose: l[0] || (l[0] = (a) => I.value.showTable = !1)
600
- }, {
601
- th: g(({ th: a }) => [
602
- w("div", {
603
- innerHTML: a,
604
- style: { display: "flex", "align-items": "center" }
605
- }, null, 8, xt)
606
- ]),
607
- td: g(({ td: a }) => [
608
- Ue(j(a.name ? a.name : a), 1)
609
- ]),
610
- _: 1
611
- }, 8, ["colNames", "head", "body", "config", "title"]))
612
- ]),
613
- _: 1
614
- }, 8, ["config"])) : b("", !0)
615
- ], 46, it));
616
- }
617
- }, Dt = /* @__PURE__ */ ut(Lt, [["__scopeId", "data-v-08e58142"]]);
618
- export {
619
- Dt as default
620
- };