vue-data-ui 3.4.9 → 3.5.1

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 (151) hide show
  1. package/README.md +114 -37
  2. package/dist/{ColorPicker-J5wOPCeB.js → ColorPicker-ChuwChMo.js} +58 -56
  3. package/dist/{NonSvgPenAndPaper-C7TRn0_3.js → NonSvgPenAndPaper-DVgKKLIf.js} +1 -1
  4. package/dist/{PackageVersion-CTUqGqWV.js → PackageVersion-DQvyATVa.js} +1 -1
  5. package/dist/PenAndPaper-SZQIAgkg.js +388 -0
  6. package/dist/{Title-l36lOBMx.js → Title-isbiM8i8.js} +1 -1
  7. package/dist/components/vue-ui-3d-bar.js +1 -1
  8. package/dist/components/vue-ui-accordion.js +1 -1
  9. package/dist/components/vue-ui-age-pyramid.js +1 -1
  10. package/dist/components/vue-ui-annotator.js +1 -1
  11. package/dist/components/vue-ui-bullet.js +1 -1
  12. package/dist/components/vue-ui-candlestick.js +1 -1
  13. package/dist/components/vue-ui-carousel-table.js +1 -1
  14. package/dist/components/vue-ui-chestnut.js +1 -1
  15. package/dist/components/vue-ui-chord.js +1 -1
  16. package/dist/components/vue-ui-circle-pack.js +1 -1
  17. package/dist/components/vue-ui-cursor.js +1 -1
  18. package/dist/components/vue-ui-dashboard.js +1 -1
  19. package/dist/components/vue-ui-digits.js +1 -1
  20. package/dist/components/vue-ui-donut-evolution.js +1 -1
  21. package/dist/components/vue-ui-donut.js +1 -1
  22. package/dist/components/vue-ui-dumbbell.js +1 -1
  23. package/dist/components/vue-ui-flow.js +1 -1
  24. package/dist/components/vue-ui-funnel.js +1 -1
  25. package/dist/components/vue-ui-galaxy.js +1 -1
  26. package/dist/components/vue-ui-gauge.js +1 -1
  27. package/dist/components/vue-ui-gizmo.js +1 -1
  28. package/dist/components/vue-ui-heatmap.js +1 -1
  29. package/dist/components/vue-ui-history-plot.js +1 -1
  30. package/dist/components/vue-ui-horizontal-bar.js +1 -1
  31. package/dist/components/vue-ui-kpi.js +1 -1
  32. package/dist/components/vue-ui-mini-loader.js +1 -1
  33. package/dist/components/vue-ui-molecule.js +1 -1
  34. package/dist/components/vue-ui-mood-radar.js +1 -1
  35. package/dist/components/vue-ui-nested-donuts.js +1 -1
  36. package/dist/components/vue-ui-onion.js +1 -1
  37. package/dist/components/vue-ui-parallel-coordinate-plot.js +1 -1
  38. package/dist/components/vue-ui-quadrant.js +1 -1
  39. package/dist/components/vue-ui-quick-chart.js +1 -1
  40. package/dist/components/vue-ui-radar.js +1 -1
  41. package/dist/components/vue-ui-rating.js +1 -1
  42. package/dist/components/vue-ui-relation-circle.js +1 -1
  43. package/dist/components/vue-ui-ridgeline.js +1 -1
  44. package/dist/components/vue-ui-rings.js +1 -1
  45. package/dist/components/vue-ui-scatter.js +1 -1
  46. package/dist/components/vue-ui-skeleton.js +1 -1
  47. package/dist/components/vue-ui-smiley.js +1 -1
  48. package/dist/components/vue-ui-spark-trend.js +1 -1
  49. package/dist/components/vue-ui-sparkbar.js +1 -1
  50. package/dist/components/vue-ui-sparkgauge.js +1 -1
  51. package/dist/components/vue-ui-sparkhistogram.js +1 -1
  52. package/dist/components/vue-ui-sparkline.js +1 -1
  53. package/dist/components/vue-ui-sparkstackbar.js +1 -1
  54. package/dist/components/vue-ui-stackbar.js +1 -1
  55. package/dist/components/vue-ui-strip-plot.js +1 -1
  56. package/dist/components/vue-ui-table-heatmap.js +1 -1
  57. package/dist/components/vue-ui-table-sparkline.js +1 -1
  58. package/dist/components/vue-ui-table.js +1 -1
  59. package/dist/components/vue-ui-thermometer.js +1 -1
  60. package/dist/components/vue-ui-timer.js +1 -1
  61. package/dist/components/vue-ui-tiremarks.js +1 -1
  62. package/dist/components/vue-ui-treemap.js +1 -1
  63. package/dist/components/vue-ui-vertical-bar.js +1 -1
  64. package/dist/components/vue-ui-waffle.js +1 -1
  65. package/dist/components/vue-ui-wheel.js +1 -1
  66. package/dist/components/vue-ui-word-cloud.js +1 -1
  67. package/dist/components/vue-ui-world.js +1 -1
  68. package/dist/components/vue-ui-xy-canvas.js +1 -1
  69. package/dist/components/vue-ui-xy.js +1 -1
  70. package/dist/style.css +1 -1
  71. package/dist/types/vue-data-ui.d.ts +17 -8
  72. package/dist/{useNestedProp-BjZe1Y85.js → useNestedProp-DjGXw6S9.js} +22 -8
  73. package/dist/{vue-data-ui-DjxWWa78.js → vue-data-ui-B_RxfmEm.js} +113 -107
  74. package/dist/vue-data-ui.js +64 -64
  75. package/dist/{vue-ui-3d-bar-CLE7f9pl.js → vue-ui-3d-bar-CMNYyVa2.js} +454 -434
  76. package/dist/{vue-ui-accordion-CZ0thhxa.js → vue-ui-accordion-CqhVCfc2.js} +1 -1
  77. package/dist/{vue-ui-age-pyramid-D73uIOPm.js → vue-ui-age-pyramid-Vqa9iYXE.js} +180 -160
  78. package/dist/{vue-ui-annotator-BylDgUVb.js → vue-ui-annotator-nNv10fBm.js} +3 -3
  79. package/dist/{vue-ui-bullet-Bybo0xK2.js → vue-ui-bullet-BWEBeYV5.js} +190 -170
  80. package/dist/{vue-ui-candlestick-D_FyMdqH.js → vue-ui-candlestick-BoLzL0g1.js} +201 -181
  81. package/dist/{vue-ui-carousel-table-BvMlNdVo.js → vue-ui-carousel-table-Bi6wvUUU.js} +2 -2
  82. package/dist/{vue-ui-chestnut-DA0g0bDV.js → vue-ui-chestnut-BGz1TLXG.js} +375 -355
  83. package/dist/vue-ui-chord-CebhS7ln.js +1153 -0
  84. package/dist/{vue-ui-circle-pack-BPDm-ro5.js → vue-ui-circle-pack-7PJVyKjp.js} +289 -269
  85. package/dist/{vue-ui-cursor-ik59bfC4.js → vue-ui-cursor-qYLAwvzn.js} +1 -1
  86. package/dist/vue-ui-dashboard-DcmMvhgM.js +432 -0
  87. package/dist/{vue-ui-digits-ByNNcWXi.js → vue-ui-digits-DyE8eU1m.js} +1 -1
  88. package/dist/vue-ui-donut-CxZcJFTo.js +1681 -0
  89. package/dist/{vue-ui-donut-evolution-Ca3Svr0B.js → vue-ui-donut-evolution-BVYL-BUJ.js} +480 -444
  90. package/dist/{vue-ui-dumbbell-CxCE2luV.js → vue-ui-dumbbell-QxZn86A3.js} +210 -190
  91. package/dist/{vue-ui-flow-DEvwXd4W.js → vue-ui-flow-DEI5LRch.js} +339 -319
  92. package/dist/{vue-ui-funnel-Bgcx7xia.js → vue-ui-funnel-B_A5orFg.js} +218 -198
  93. package/dist/{vue-ui-galaxy-BWr1EMob.js → vue-ui-galaxy-CUoDRr-O.js} +313 -277
  94. package/dist/{vue-ui-gauge-DQricvo2.js → vue-ui-gauge-46tSRZN5.js} +311 -291
  95. package/dist/{vue-ui-gizmo-C-fKe3io.js → vue-ui-gizmo-BOgbsXao.js} +2 -2
  96. package/dist/{vue-ui-heatmap-B-o_i7Hu.js → vue-ui-heatmap-DKKjl1A2.js} +303 -283
  97. package/dist/{vue-ui-history-plot-DzQ9DPUJ.js → vue-ui-history-plot-C6p_aThr.js} +478 -442
  98. package/dist/{vue-ui-kpi-BGGff8LM.js → vue-ui-kpi-B1yJ83aF.js} +2 -2
  99. package/dist/{vue-ui-mini-loader-CSF-7TJL.js → vue-ui-mini-loader-BudcNBg-.js} +1 -1
  100. package/dist/{vue-ui-molecule-I2OhrCR2.js → vue-ui-molecule-L90GnHee.js} +156 -136
  101. package/dist/{vue-ui-mood-radar-BAT7kZUy.js → vue-ui-mood-radar-Dhigm5rw.js} +266 -246
  102. package/dist/{vue-ui-nested-donuts-CjhJDAQi.js → vue-ui-nested-donuts-D0MCLs5n.js} +597 -557
  103. package/dist/vue-ui-onion-B7yPJ3gL.js +915 -0
  104. package/dist/vue-ui-parallel-coordinate-plot-DY21ivNe.js +1051 -0
  105. package/dist/{vue-ui-quadrant-DGnasrCR.js → vue-ui-quadrant-b0vMRaq-.js} +532 -495
  106. package/dist/{vue-ui-quick-chart-Cam_sWet.js → vue-ui-quick-chart-VK2EN7sh.js} +288 -268
  107. package/dist/{vue-ui-radar-DNI9WI2R.js → vue-ui-radar-B5Vkoz9M.js} +412 -373
  108. package/dist/{vue-ui-rating-CiMoFM_c.js → vue-ui-rating-BH4DW1ZY.js} +1 -1
  109. package/dist/{vue-ui-relation-circle-Dj1jhcsl.js → vue-ui-relation-circle-XHbE-ZUX.js} +228 -208
  110. package/dist/{vue-ui-ridgeline-adIls6bj.js → vue-ui-ridgeline-CAMNq-p_.js} +517 -481
  111. package/dist/vue-ui-rings-ImGOqm_J.js +855 -0
  112. package/dist/vue-ui-scatter-CterNJYe.js +1590 -0
  113. package/dist/{vue-ui-skeleton-DUdI2uOO.js → vue-ui-skeleton-CykXHWj-.js} +2 -2
  114. package/dist/{vue-ui-smiley-sGFRbn31.js → vue-ui-smiley-DnGm6qrK.js} +1 -1
  115. package/dist/{vue-ui-spark-trend-DxpRfUJz.js → vue-ui-spark-trend-N1AsNQJA.js} +2 -2
  116. package/dist/{vue-ui-sparkbar-B44oER5n.js → vue-ui-sparkbar-Bvsi5DTT.js} +2 -2
  117. package/dist/{vue-ui-sparkgauge-ix12NZ7M.js → vue-ui-sparkgauge-DyJmWCWT.js} +2 -2
  118. package/dist/{vue-ui-sparkhistogram-Cs-QDYBR.js → vue-ui-sparkhistogram-5eKrkmSb.js} +143 -140
  119. package/dist/{vue-ui-sparkline-Cb8ZmyUq.js → vue-ui-sparkline-ChKAzlVq.js} +2 -2
  120. package/dist/vue-ui-sparkstackbar-BXNy6nuw.js +441 -0
  121. package/dist/vue-ui-stackbar-1IwvUYBO.js +1827 -0
  122. package/dist/{vue-ui-strip-plot-BjG-Jxnb.js → vue-ui-strip-plot-B1wGxP8-.js} +245 -225
  123. package/dist/{vue-ui-table-DdBdLrAL.js → vue-ui-table-DSsIrT4L.js} +3 -3
  124. package/dist/{vue-ui-table-heatmap-BqCEBoUf.js → vue-ui-table-heatmap-DXFHy7-E.js} +1 -1
  125. package/dist/{vue-ui-table-sparkline-EpCo2Be5.js → vue-ui-table-sparkline-DpqY_4ay.js} +2 -2
  126. package/dist/vue-ui-thermometer-CMKvSA8p.js +584 -0
  127. package/dist/{vue-ui-timer-Br3wp8hG.js → vue-ui-timer-BpdCY_wg.js} +3 -3
  128. package/dist/vue-ui-tiremarks-CNipzVli.js +450 -0
  129. package/dist/vue-ui-treemap-DPE8SY0_.js +1330 -0
  130. package/dist/{vue-ui-vertical-bar-yfbEfLqy.js → vue-ui-vertical-bar-ZU1GCbX0.js} +484 -448
  131. package/dist/{vue-ui-waffle-m-9sqQik.js → vue-ui-waffle-z7nuSuSV.js} +398 -362
  132. package/dist/vue-ui-wheel-DLRoRjeM.js +663 -0
  133. package/dist/{vue-ui-word-cloud-vNwswYZD.js → vue-ui-word-cloud-D2r5E3pP.js} +248 -228
  134. package/dist/{vue-ui-world-BsCNyZy_.js → vue-ui-world-goXYnTyM.js} +287 -267
  135. package/dist/{vue-ui-xy-CIrw1lWQ.js → vue-ui-xy-NDDbNbds.js} +1263 -1227
  136. package/dist/{vue-ui-xy-canvas-DXnLFwW3.js → vue-ui-xy-canvas-2a6NlQe3.js} +338 -322
  137. package/package.json +4 -4
  138. package/dist/PenAndPaper-DSvu9dwa.js +0 -373
  139. package/dist/vue-ui-chord-CDgzolI-.js +0 -1133
  140. package/dist/vue-ui-dashboard-CeJwbiON.js +0 -412
  141. package/dist/vue-ui-donut-DjQXHBJE.js +0 -1645
  142. package/dist/vue-ui-onion-DTY2p87s.js +0 -873
  143. package/dist/vue-ui-parallel-coordinate-plot-C8aWTcNn.js +0 -1014
  144. package/dist/vue-ui-rings-CnTMFK6R.js +0 -813
  145. package/dist/vue-ui-scatter-fzR2c0St.js +0 -1554
  146. package/dist/vue-ui-sparkstackbar-BiRZ51OU.js +0 -424
  147. package/dist/vue-ui-stackbar-DubS6Pg8.js +0 -1708
  148. package/dist/vue-ui-thermometer-DTnfnf9z.js +0 -564
  149. package/dist/vue-ui-tiremarks-CrC_tlIx.js +0 -430
  150. package/dist/vue-ui-treemap-kyuyi2ES.js +0 -1294
  151. package/dist/vue-ui-wheel-BasM7FWt.js +0 -643
@@ -1,1294 +0,0 @@
1
- import { defineAsyncComponent as ge, useSlots as Hl, onMounted as Qt, computed as y, ref as b, shallowRef as J, toRefs as El, watch as Ue, onBeforeUnmount as Wl, createElementBlock as w, openBlock as h, unref as p, normalizeStyle as ue, normalizeClass as yt, createBlock as re, createCommentVNode as M, createElementVNode as R, createVNode as Ge, createSlots as el, withCtx as O, renderSlot as $, normalizeProps as me, guardReactiveProps as ye, Fragment as Xe, renderList as bt, withKeys as tl, withModifiers as wt, mergeProps as kt, createTextVNode as qe, toDisplayString as Ye, Teleport as Ul, resolveDynamicComponent as Gl, nextTick as Xl } from "vue";
2
- import { c as je, t as ql, b as Yl, p as L, e as jl, o as ll, f as Zl, h as Le, a as Ze, d as De, X as Ct, S as ol, J as al, G as nl, P as Kl, Q as Jl, H as Ql, ap as $t, aq as Ke } from "./lib-C_mNZmhD.js";
3
- import { t as eo, u as to } from "./useResponsive-DfdjqQps.js";
4
- import { u as lo, a as sl } from "./useNestedProp-BjZe1Y85.js";
5
- import { u as oo, B as ao } from "./BaseScanner-BgWxam9d.js";
6
- import { u as no } from "./usePrinter-DTzqpYKF.js";
7
- import { u as so } from "./useUserOptionState-BIvW1Kz7.js";
8
- import { u as uo } from "./useChartAccessibility-9icAAmYg.js";
9
- import ro from "./img-BecE5qXd.js";
10
- import io from "./Title-l36lOBMx.js";
11
- import { t as co } from "./themes-AUNCOb2G.js";
12
- import vo from "./Legend-G6GMcdAc.js";
13
- import ul from "./BaseIcon-BmMbm4d0.js";
14
- import { u as ho } from "./useSvgExport-DrjCWun4.js";
15
- import { _ as fo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
16
- function rl(n, i) {
17
- const u = n.length;
18
- if (u === 0)
19
- throw new Error(`Max aspect ratio cannot be computed: ${n} is an empty array`);
20
- {
21
- let c = 1 / 0, r = -1 / 0, f = 0;
22
- for (let m = 0; m < u; m += 1) {
23
- const g = n[m].normalizedValue;
24
- g < c && (c = g), g > r && (r = g), f += g;
25
- }
26
- return Math.max(
27
- i ** 2 * r / f ** 2,
28
- f ** 2 / (i ** 2 * c)
29
- );
30
- }
31
- }
32
- function il(n) {
33
- const { xOffset: i, yOffset: u, width: c, height: r } = n;
34
- return {
35
- x0: i,
36
- y0: u,
37
- x1: i + c,
38
- y1: u + r
39
- };
40
- }
41
- function po(n, i, u) {
42
- if (n.length === 0)
43
- return !0;
44
- {
45
- const c = n.concat(i), r = rl(
46
- n,
47
- u
48
- ), f = rl(c, u);
49
- return r >= f;
50
- }
51
- }
52
- function go(n) {
53
- const i = [], u = n.length;
54
- for (let c = 0; c < u; c += 1) {
55
- const r = n[c], f = r.length;
56
- for (let d = 0; d < f; d += 1)
57
- i.push(r[d]);
58
- }
59
- return i;
60
- }
61
- function mo(n, i) {
62
- const u = {
63
- ...i,
64
- children: n
65
- };
66
- return vl(u);
67
- }
68
- function yo(n) {
69
- return (n.x1 - n.x0) * (n.y1 - n.y0);
70
- }
71
- function cl(n, i) {
72
- const { width: u, height: c, xOffset: r, yOffset: f } = xt(i), d = n.length, m = n.map((T) => T.normalizedValue || 0).reduce((T, D) => T + D, 0), g = m / c, Q = m / u;
73
- let E = r, x = f;
74
- const _ = [];
75
- if (u >= c) {
76
- for (let T = 0; T < d; T += 1) {
77
- const D = n[T], q = x + D.normalizedValue / g, I = {
78
- x0: E,
79
- y0: x,
80
- x1: E + g,
81
- y1: q
82
- }, P = Object.assign({}, D, I);
83
- x = q, _.push(P);
84
- }
85
- return _;
86
- } else {
87
- for (let T = 0; T < d; T += 1) {
88
- const D = n[T], q = E + D.normalizedValue / Q, I = {
89
- x0: E,
90
- y0: x,
91
- x1: q,
92
- y1: x + Q
93
- }, P = Object.assign({}, D, I);
94
- E = q, _.push(P);
95
- }
96
- return _;
97
- }
98
- }
99
- function bo(n) {
100
- const i = xt(n), u = i.width, c = i.height;
101
- return Math.min(u, c);
102
- }
103
- function wo(n, i) {
104
- const u = n.length, c = n.map((g) => g.value ?? 0).reduce((g, Q) => g + Q, 0), r = i / c, f = [];
105
- let d, m;
106
- for (let g = 0; g < u; g += 1)
107
- m = n[g], d = Object.assign({}, m, {
108
- normalizedValue: m.value * (r || 0)
109
- }), f.push(d);
110
- return f;
111
- }
112
- function xt(n) {
113
- const { x0: i, y0: u, x1: c, y1: r } = n;
114
- return {
115
- xOffset: i,
116
- yOffset: u,
117
- width: c - i,
118
- height: r - u
119
- };
120
- }
121
- function ko(n, i, u, c) {
122
- let r = n, f = i, d = u, m = c;
123
- for (; ; ) {
124
- const g = r.length;
125
- if (g === 0) {
126
- const _ = cl(f, d);
127
- return m.concat(_);
128
- }
129
- const Q = bo(d), E = r[0], x = r.slice(1, g);
130
- if (po(f, E, Q)) {
131
- const _ = f.concat(E);
132
- r = x, f = _, d = d, m = m;
133
- } else {
134
- const _ = f.length;
135
- let T = 0;
136
- for (let P = 0; P < _; P += 1)
137
- T += f[P].normalizedValue;
138
- const D = Co(d, T), q = cl(f, d), I = m.concat(q);
139
- r = r, f = [], d = D, m = I;
140
- }
141
- }
142
- }
143
- function vl(n) {
144
- if (typeof n.children > "u" || !n.children.length)
145
- return [n];
146
- {
147
- const i = wo(
148
- n.children,
149
- yo(n)
150
- ), u = ko(i, [], n, []), c = u.length, r = [];
151
- for (let d = 0; d < c; d += 1)
152
- r.push(vl(u[d]));
153
- return go(r);
154
- }
155
- }
156
- function Co(n, i) {
157
- const { width: u, height: c, xOffset: r, yOffset: f } = xt(n);
158
- if (u >= c) {
159
- const d = i / c, m = u - d, g = {
160
- xOffset: r + d,
161
- yOffset: f,
162
- width: m,
163
- height: c
164
- };
165
- return il(g);
166
- } else {
167
- const d = i / u, m = c - d, g = {
168
- xOffset: r,
169
- yOffset: f + d,
170
- width: u,
171
- height: m
172
- };
173
- return il(g);
174
- }
175
- }
176
- const $o = ["id"], xo = ["id"], To = ["tabindex", "onClick", "onKeydown", "data-last-crumb", "onMouseenter", "onFocus"], So = { class: "vue-ui-treemap-crumb-unit" }, Oo = { class: "vue-ui-treemap-crumb-unit-label" }, _o = {
177
- key: 0,
178
- style: { width: "24px", display: "flex", "align-items": "center" }
179
- }, Ao = {
180
- key: 0,
181
- class: "vue-ui-treemap-crumb-unit-arrow"
182
- }, Fo = ["xmlns", "viewBox"], Mo = { key: 0 }, Io = ["id"], No = ["stop-color"], Lo = ["stop-color"], Do = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter", "onMouseleave"], zo = ["innerHTML"], Ro = ["x", "y", "height", "width"], Po = {
183
- key: 5,
184
- class: "vue-data-ui-watermark"
185
- }, Bo = ["id"], Vo = ["onClick"], Ho = ["innerHTML"], Eo = {
186
- __name: "vue-ui-treemap",
187
- props: {
188
- config: {
189
- type: Object,
190
- default() {
191
- return {};
192
- }
193
- },
194
- dataset: {
195
- type: Array,
196
- default() {
197
- return [];
198
- }
199
- }
200
- },
201
- emits: ["selectLegend", "selectDatapoint"],
202
- setup(n, { expose: i, emit: u }) {
203
- const c = ge(() => import("./DataTable-BT7VF2ua.js")), r = ge(() => import("./PenAndPaper-DSvu9dwa.js")), f = ge(() => import("./vue-ui-accordion-CZ0thhxa.js")), d = ge(() => import("./Tooltip-oWCO1HKy.js")), m = ge(() => import("./UserOptions-CGnQt6Fd.js")), g = ge(() => import("./PackageVersion-CTUqGqWV.js")), Q = ge(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_treemap: E } = lo(), x = n, _ = u, T = Hl();
204
- Qt(() => {
205
- T["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
206
- });
207
- const D = y(() => !!x.dataset && x.dataset.length), q = y(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), I = b(je()), P = b(!1), Je = b(""), ie = b(!1), Tt = b(0), W = b([]), U = J(null), St = J(null), Ot = J(null), _t = J(null), At = J(null), Ft = b(0), Qe = b(0), et = b(0), F = b([]), tt = b(null), Mt = b(!1), Ae = b(null), lt = b(null), t = b(st()), { loading: be, FINAL_DATASET: ot, manualLoading: dl } = oo({
208
- ...El(x),
209
- FINAL_CONFIG: t,
210
- prepareConfig: st,
211
- skeletonDataset: [
212
- {
213
- name: "_",
214
- value: 53,
215
- color: "#CACACA90",
216
- children: [
217
- { name: "_", value: 21 },
218
- { name: "_", value: 13 },
219
- { name: "_", value: 8 },
220
- { name: "_", value: 5 },
221
- { name: "_", value: 3 },
222
- { name: "_", value: 2 },
223
- { name: "_", value: 1 }
224
- ]
225
- }
226
- ],
227
- skeletonConfig: ql({
228
- defaultConfig: t.value,
229
- userConfig: {
230
- userOptions: { show: !1 },
231
- style: {
232
- chart: {
233
- backgroundColor: "#999999",
234
- layout: {
235
- labels: {
236
- showDefaultLabels: !1
237
- },
238
- rects: {
239
- stroke: "#6A6A6A"
240
- }
241
- },
242
- legend: {
243
- backgroundColor: "transparent"
244
- }
245
- }
246
- }
247
- }
248
- })
249
- }), { userOptionsVisible: at, setUserOptionsVisibility: It, keepUserOptionState: Nt } = so({ config: t.value }), { svgRef: nt } = uo({ config: t.value.style.chart.title });
250
- function st() {
251
- const e = sl({
252
- userConfig: x.config,
253
- defaultConfig: E
254
- });
255
- return e.theme ? {
256
- ...sl({
257
- userConfig: co.vue_ui_treemap[e.theme] || x.config,
258
- defaultConfig: e
259
- }),
260
- customPalette: Yl[e.theme] || L
261
- } : e;
262
- }
263
- Ue(() => x.config, (e) => {
264
- be.value || (t.value = st()), at.value = !t.value.userOptions.showOnChartHover, Ft.value += 1, Qe.value += 1, et.value += 1, z.value.showTable = t.value.table.show, z.value.showTooltip = t.value.style.chart.tooltip.show;
265
- }, { deep: !0 });
266
- const { isPrinting: Lt, isImaging: Dt, generatePdf: zt, generateImage: Rt } = no({
267
- elementId: `treemap_${I.value}`,
268
- fileName: t.value.style.chart.title.text || "vue-ui-treemap",
269
- options: t.value.userOptions.print
270
- }), hl = y(() => t.value.userOptions.show && !t.value.style.chart.title.text), ze = y(() => jl(t.value.customPalette)), z = b({
271
- showTable: t.value.table.show,
272
- showTooltip: t.value.style.chart.tooltip.show
273
- });
274
- Ue(t, () => {
275
- z.value = {
276
- showTable: t.value.table.show,
277
- showTooltip: t.value.style.chart.tooltip.show
278
- };
279
- }, { immediate: !0 });
280
- const Fe = b({
281
- height: t.value.style.chart.height,
282
- width: t.value.style.chart.width
283
- });
284
- function fl(e) {
285
- const o = U.value, l = Fe.value.height;
286
- if (!o || !l) return e;
287
- const a = o.getBoundingClientRect();
288
- return e * (l / a.height);
289
- }
290
- function pl() {
291
- if (!tt.value || Y.value.length <= 1) return 0;
292
- const e = tt.value, o = getComputedStyle(e), l = e.offsetHeight + parseFloat(o.marginTop || "0") + parseFloat(o.marginBottom || "0") + parseFloat(o.paddingTop || "0") + parseFloat(o.paddingBottom || "0");
293
- return fl(l);
294
- }
295
- const B = y(() => {
296
- const e = t.value.style.chart.padding, o = Fe.value.width, l = Fe.value.height, a = pl(), s = e.left, v = o - e.right, k = e.top, N = l - e.bottom - a;
297
- return {
298
- left: s,
299
- top: k,
300
- right: v,
301
- bottom: N,
302
- width: v - s,
303
- height: Math.max(0, N - k),
304
- vbWidth: o,
305
- vbHeight: l - a,
306
- offsetY: a
307
- };
308
- }), V = b(ot.value), ee = b(V.value), Pt = J(/* @__PURE__ */ new Map());
309
- function Bt(e) {
310
- Array.isArray(e) && e.forEach((o, l) => {
311
- o.id || (o.id = je());
312
- let a = Le(o.color) || Pt.value.get(o.id) || ze.value[l] || L[l] || L[l % L.length];
313
- a = Le(a), Pt.value.set(o.id, a), o.color = a, Vt(o, a);
314
- });
315
- }
316
- function Vt(e, o) {
317
- Array.isArray(e.children) && e.children.forEach((l) => {
318
- l.id || (l.id = je()), l.parentId = e.id, l.color = o, Vt(l, o);
319
- });
320
- }
321
- function gl() {
322
- if (!F.value.length)
323
- ee.value = V.value.slice();
324
- else {
325
- const e = F.value[F.value.length - 1], o = le(e);
326
- ee.value = o?.children?.slice() || [];
327
- }
328
- }
329
- Ue(
330
- () => ot.value,
331
- () => {
332
- V.value = ot.value, Bt(V.value), gl(), et.value += 1, Qe.value += 1;
333
- },
334
- { deep: !0, immediate: !0, flush: "post" }
335
- );
336
- const te = J(null), we = J(null);
337
- Qt(() => {
338
- Mt.value = !0, yl();
339
- });
340
- const ml = y(() => t.value.debug);
341
- function yl() {
342
- if (ll(x.dataset) && Zl({
343
- componentName: "VueUiTreemap",
344
- type: "dataset",
345
- debug: ml.value
346
- }), Bt(V.value), ll(x.dataset) || (dl.value = t.value.loading), t.value.responsive) {
347
- const e = eo(() => {
348
- const { width: o, height: l } = to({
349
- chart: U.value,
350
- title: t.value.style.chart.title.text ? St.value : null,
351
- legend: t.value.style.chart.legend.show ? Ot.value : null,
352
- source: _t.value,
353
- noTitle: At.value
354
- });
355
- requestAnimationFrame(() => {
356
- Fe.value.width = o, Fe.value.height = l - 12;
357
- });
358
- });
359
- te.value && (we.value && te.value.unobserve(we.value), te.value.disconnect()), te.value = new ResizeObserver(e), we.value = U.value.parentNode, te.value.observe(we.value);
360
- }
361
- }
362
- Wl(() => {
363
- te.value && (we.value && te.value.unobserve(we.value), te.value.disconnect());
364
- });
365
- const Me = y(() => ee.value.map((e, o) => ({
366
- ...e,
367
- color: Le(e.color) || ze.value[o] || L[o] || L[o % L.length]
368
- })).filter((e) => !W.value.includes(e.id))), ke = y(() => V.value.filter((e) => !W.value.includes(e.id)).map((e) => e.value || 0).reduce((e, o) => e + o, 0)), ut = y({
369
- get() {
370
- let e = [...Me.value];
371
- return t.value.style.chart.layout.sorted && (e = [...Me.value].sort((o, l) => l.value - o.value)), e.map((o) => ({
372
- ...o
373
- }));
374
- },
375
- set(e) {
376
- return e;
377
- }
378
- });
379
- function Ht(e, o) {
380
- return e.value / o;
381
- }
382
- function bl(e, o, l) {
383
- const a = t.value.style.chart.layout.rects.colorRatio - Ht(o, l);
384
- return ol(e, a < 0 ? 0 : a);
385
- }
386
- function Et(e, o, l, a) {
387
- return e.map((s, v) => {
388
- const k = bl(Le(o) || ze.value[v] || L[v] || L[v % L.length], s, a), N = Ht(s, a);
389
- return {
390
- ...s,
391
- color: k,
392
- proportion: N,
393
- parentName: l,
394
- children: s.children ? Et(s.children, k, s.name, a) : void 0
395
- };
396
- });
397
- }
398
- const Ie = y(() => {
399
- const e = ut.value.map((o) => Number(o.value) || 0).reduce((o, l) => o + l, 0) || 1;
400
- return mo(
401
- ut.value.map((o) => {
402
- const l = o.children ? o.children.reduce((a, s) => a + (Number(s.value) || 0), 0) : o.value;
403
- return {
404
- value: o.value,
405
- id: o.id || je(),
406
- proportion: (Number(o.value) || 0) / e,
407
- children: o.children ? Et(
408
- o.children.sort((a, s) => (s.value || 0) - (a.value || 0)),
409
- o.color,
410
- o.name,
411
- l || 1
412
- ) : void 0,
413
- color: o.color,
414
- name: o.name
415
- };
416
- }),
417
- {
418
- x0: B.value.left,
419
- y0: B.value.top,
420
- x1: B.value.left + B.value.width,
421
- y1: B.value.top + B.value.height
422
- }
423
- );
424
- });
425
- function Ce({ y0: e, y1: o }) {
426
- return o - e <= 0 ? 1e-4 : o - e;
427
- }
428
- function $e({ x0: e, x1: o }) {
429
- return o - e <= 0 ? 1e-4 : o - e;
430
- }
431
- function xe(e) {
432
- const o = t.value.style.chart.layout.labels, l = o.fontSize, a = o.minFontSize, s = o.fontSize * 2, v = 0.5, k = 0.6, N = 1, ce = 0.9;
433
- let oe = e.proportion;
434
- if (!(typeof oe == "number" && isFinite(oe))) {
435
- const Ee = Math.max(1e-6, $e(e) * Ce(e)), ve = Math.max(1e-6, B.value.width * B.value.height);
436
- oe = Ee / ve;
437
- }
438
- const He = Math.pow(Math.min(1, Math.max(0, oe)), v), ae = k + (N - k) * He;
439
- let ne = l * ae;
440
- const dt = Math.max(1e-4, Math.min($e(e), Ce(e)));
441
- return ne = Math.min(ne, dt * ce), ne = Math.max(a, Math.min(s, ne)), ne;
442
- }
443
- function Wt(e) {
444
- ie.value = e, Tt.value += 1;
445
- }
446
- const Te = y(() => ({
447
- startX: 0,
448
- startY: 0,
449
- width: B.value.vbWidth,
450
- height: B.value.vbHeight
451
- }));
452
- function le(e, o = V.value) {
453
- for (const l of o) {
454
- if (l.id === e)
455
- return l;
456
- if (l.children) {
457
- const a = le(e, l.children);
458
- if (a)
459
- return a;
460
- }
461
- }
462
- return null;
463
- }
464
- const Se = y(() => F.value.length > 0);
465
- function Re(e, o) {
466
- if (!e) {
467
- ee.value = V.value.slice(), _("selectDatapoint", void 0), F.value = [];
468
- return;
469
- }
470
- t.value.events.datapointClick && t.value.events.datapointClick({ datapoint: e, seriesIndex: o });
471
- const l = le(e.id);
472
- if (l && l.children?.length)
473
- F.value.push(l.id), ee.value = l.children.slice(), _("selectDatapoint", e);
474
- else if (e.parentId) {
475
- F.value.push(e.parentId);
476
- const a = le(e.parentId);
477
- ee.value = a.children.slice(), _("selectDatapoint", e);
478
- } else if (F.value.length > 0) {
479
- F.value.pop();
480
- const a = F.value[F.value.length - 1];
481
- if (a) {
482
- const s = le(a);
483
- ee.value = s.children.slice();
484
- } else
485
- ee.value = V.value.slice(), F.value = [], _("selectDatapoint", void 0);
486
- }
487
- }
488
- function wl(e) {
489
- return !!(le(e.id)?.children?.length || e.parentId);
490
- }
491
- const Y = y(() => {
492
- const e = [
493
- { id: null, label: "All" }
494
- ];
495
- if (F.value.length > 0) {
496
- let o = le(F.value[F.value.length - 1]);
497
- const l = [];
498
- for (; o; )
499
- l.unshift(o), o = o.parentId ? le(o.parentId) : null;
500
- for (const a of l)
501
- e.push({
502
- id: a.id,
503
- label: a.name,
504
- node: a
505
- });
506
- }
507
- return e;
508
- }), G = J(null), rt = y(() => V.value.map((e, o) => ({
509
- ...e,
510
- color: Le(e.color) || ze.value[o] || L[o] || L[o % L.length],
511
- shape: "square"
512
- })).sort((e, o) => o.value - e.value).map((e, o) => {
513
- const l = e.value / V.value.map((a) => a.value).reduce((a, s) => a + s, 0);
514
- return {
515
- ...e,
516
- proportion: l,
517
- opacity: W.value.includes(e.id) ? 0.5 : 1,
518
- display: `${e.name}${t.value.style.chart.legend.showPercentage || t.value.style.chart.legend.showValue ? ": " : ""}${t.value.style.chart.legend.showValue ? Ze(
519
- t.value.style.chart.layout.labels.formatter,
520
- e.value,
521
- De({
522
- p: t.value.style.chart.layout.labels.prefix,
523
- v: e.value,
524
- s: t.value.style.chart.layout.labels.suffix,
525
- r: t.value.style.chart.legend.roundingValue
526
- }),
527
- { datapoint: e }
528
- ) : ""}${t.value.style.chart.legend.showPercentage ? W.value.includes(e.id) ? `${t.value.style.chart.legend.showValue ? " (" : ""}- %${t.value.style.chart.legend.showValue ? ")" : ""}` : `${t.value.style.chart.legend.showValue ? " (" : ""}${isNaN(e.value / ke.value) ? "-" : (e.value / ke.value * 100).toFixed(t.value.style.chart.legend.roundingPercentage)}%${t.value.style.chart.legend.showValue ? ")" : ""}` : ""}`
529
- };
530
- })), kl = y(() => ({
531
- cy: "treemap-div-legend",
532
- backgroundColor: t.value.style.chart.legend.backgroundColor,
533
- color: t.value.style.chart.legend.color,
534
- fontSize: t.value.style.chart.legend.fontSize,
535
- paddingBottom: 12,
536
- fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
537
- }));
538
- function Ut(e) {
539
- G.value = null, W.value.includes(e.id) ? W.value = W.value.filter((o) => o !== e.id) : W.value.length < x.dataset.length - 1 && W.value.push(e.id), _("selectLegend", ut.value);
540
- }
541
- function Cl({ datapoint: e, seriesIndex: o }) {
542
- G.value = null, P.value = !1, t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: e, seriesIndex: o });
543
- }
544
- const it = b(null);
545
- function $l({ datapoint: e, seriesIndex: o }) {
546
- t.value.events.datapointEnter && t.value.events.datapointEnter({ datapoint: e, seriesIndex: o }), G.value = e, it.value = { datapoint: e, seriesIndex: o, config: t.value, series: Me.value };
547
- const l = t.value.style.chart.tooltip.customFormat;
548
- if (nl(l) && Ql(() => l({
549
- seriesIndex: o,
550
- datapoint: e,
551
- series: Me.value,
552
- config: t.value
553
- })))
554
- Je.value = l({
555
- seriesIndex: o,
556
- datapoint: e,
557
- series: Me.value,
558
- config: t.value
559
- });
560
- else {
561
- let a = "";
562
- a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${e.name}</div>`, a += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" stroke="none" fill="${e.color}"/></svg>`, a += `<b>${Ze(
563
- t.value.style.chart.layout.labels.formatter,
564
- e.value,
565
- De({
566
- p: t.value.style.chart.layout.labels.prefix,
567
- v: e.value,
568
- s: t.value.style.chart.layout.labels.suffix,
569
- r: t.value.style.chart.tooltip.roundingValue
570
- }),
571
- { datapoint: e, seriesIndex: o }
572
- )}</b>`, Je.value = `<div>${a}</div>`;
573
- }
574
- P.value = !0;
575
- }
576
- const j = y(() => {
577
- const e = Ie.value.map((l) => ({
578
- name: l.name,
579
- color: l.color
580
- })), o = Ie.value.map((l) => l.value);
581
- return { head: e, body: o };
582
- });
583
- function ct(e = null) {
584
- Xl(() => {
585
- const o = j.value.head.map((s, v) => [[
586
- s.name
587
- ], [j.value.body[v]], [isNaN(j.value.body[v] / ke.value) ? "-" : j.value.body[v] / ke.value * 100]]), l = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(o), a = Kl(l);
588
- e ? e(a) : Jl({ csvContent: a, title: t.value.style.chart.title.text || "vue-ui-treemap" });
589
- });
590
- }
591
- const Pe = y(() => {
592
- const e = [
593
- t.value.table.columnNames.series,
594
- t.value.table.columnNames.value,
595
- t.value.table.columnNames.percentage
596
- ], o = j.value.head.map((s, v) => {
597
- const k = Ze(
598
- t.value.style.chart.layout.labels.formatter,
599
- j.value.body[v],
600
- De({
601
- p: t.value.style.chart.layout.labels.prefix,
602
- v: j.value.body[v],
603
- s: t.value.style.chart.layout.labels.suffix,
604
- r: t.value.table.td.roundingValue
605
- })
606
- );
607
- return [
608
- {
609
- color: s.color,
610
- name: s.name,
611
- shape: "square"
612
- },
613
- k,
614
- isNaN(j.value.body[v] / ke.value) ? "-" : De({
615
- v: j.value.body[v] / ke.value * 100,
616
- s: "%",
617
- r: t.value.table.td.roundingPercentage
618
- })
619
- ];
620
- }), l = {
621
- th: {
622
- backgroundColor: t.value.table.th.backgroundColor,
623
- color: t.value.table.th.color,
624
- outline: t.value.table.th.outline
625
- },
626
- td: {
627
- backgroundColor: t.value.table.td.backgroundColor,
628
- color: t.value.table.td.color,
629
- outline: t.value.table.td.outline
630
- },
631
- breakpoint: t.value.table.responsiveBreakpoint
632
- };
633
- return {
634
- colNames: [
635
- t.value.table.columnNames.series,
636
- t.value.table.columnNames.value
637
- ],
638
- head: e,
639
- body: o,
640
- config: l
641
- };
642
- });
643
- function xl() {
644
- return Ie.value;
645
- }
646
- function Gt() {
647
- z.value.showTable = !z.value.showTable;
648
- }
649
- function Xt() {
650
- z.value.showTooltip = !z.value.showTooltip;
651
- }
652
- const Be = b(!1);
653
- function vt() {
654
- Be.value = !Be.value;
655
- }
656
- const Ve = b(null);
657
- function qt(e) {
658
- Ve.value = e;
659
- }
660
- function Yt() {
661
- Ve.value = null;
662
- }
663
- async function Tl({ scale: e = 2 } = {}) {
664
- if (!U.value) return;
665
- const { width: o, height: l } = U.value.getBoundingClientRect(), a = o / l, { imageUri: s, base64: v } = await ro({ domElement: U.value, base64: !0, img: !0, scale: e });
666
- return {
667
- imageUri: s,
668
- base64: v,
669
- title: t.value.style.chart.title.text,
670
- width: o,
671
- height: l,
672
- aspectRatio: a
673
- };
674
- }
675
- const Ne = y(() => {
676
- const e = t.value.table.useDialog && !t.value.table.show, o = z.value.showTable;
677
- return {
678
- component: e ? Q : f,
679
- title: `${t.value.style.chart.title.text}${t.value.style.chart.title.subtitle.text ? `: ${t.value.style.chart.title.subtitle.text}` : ""}`,
680
- props: e ? {
681
- backgroundColor: t.value.table.th.backgroundColor,
682
- color: t.value.table.th.color,
683
- headerColor: t.value.table.th.color,
684
- headerBg: t.value.table.th.backgroundColor,
685
- isFullscreen: ie.value,
686
- fullscreenParent: U.value,
687
- forcedWidth: Math.min(800, window.innerWidth * 0.8)
688
- } : {
689
- hideDetails: !0,
690
- config: {
691
- open: o,
692
- maxHeight: 1e4,
693
- body: {
694
- backgroundColor: t.value.style.chart.backgroundColor,
695
- color: t.value.style.chart.color
696
- },
697
- head: {
698
- backgroundColor: t.value.style.chart.backgroundColor,
699
- color: t.value.style.chart.color
700
- }
701
- }
702
- }
703
- };
704
- });
705
- Ue(() => z.value.showTable, (e) => {
706
- t.value.table.show || (e && t.value.table.useDialog && Ae.value ? Ae.value.open() : "close" in Ae.value && Ae.value.close());
707
- });
708
- function jt() {
709
- z.value.showTable = !1, lt.value && lt.value.setTableIconState(!1);
710
- }
711
- const Sl = y(() => rt.value.map((e) => ({
712
- ...e,
713
- name: e.display
714
- }))), Ol = y(() => t.value.style.chart.backgroundColor), _l = y(() => t.value.style.chart.legend), Al = y(() => t.value.style.chart.title), { exportSvg: Fl, getSvg: Ml } = ho({
715
- svg: nt,
716
- title: Al,
717
- legend: _l,
718
- legendItems: Sl,
719
- backgroundColor: Ol
720
- });
721
- async function Zt({ isCb: e }) {
722
- if (e) {
723
- const { blob: o, url: l, text: a, dataUrl: s } = await Ml();
724
- t.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: s });
725
- } else
726
- Fl();
727
- }
728
- function Il({ rect: e, seriesIndex: o }) {
729
- const l = t.value.style.chart.layout.labels.name.show, a = t.value.style.chart.layout.labels.value.show;
730
- if (!l && !a) return "";
731
- const s = Math.max(2, xe(e) / 3), v = Math.max(8, xe(e)), k = v * 1.2, N = Math.max(0, $e(e) - s * 2), ce = Math.max(0, Ce(e) - s * 2);
732
- if (N <= 2 || ce <= v * 0.8) return "";
733
- const oe = t.value.style.fontFamily, He = t.value.style.chart.layout.labels.name.bold ? "600" : "400", ae = t.value.style.chart.layout.labels.value.bold ? "600" : "400", ne = al(e.color), dt = l ? String(e.name ?? "") : "", Ee = a ? Ze(
734
- t.value.style.chart.layout.labels.formatter,
735
- e.value,
736
- De({
737
- p: t.value.style.chart.layout.labels.prefix,
738
- v: e.value,
739
- s: t.value.style.chart.layout.labels.suffix,
740
- r: t.value.style.chart.layout.labels.rounding
741
- }),
742
- { datapoint: e, seriesIndex: o }
743
- ) : "";
744
- function ve(he, fe = v, _e = "400") {
745
- const H = document.createElementNS(Ct, "svg");
746
- H.setAttribute("width", "0"), H.setAttribute("height", "0"), H.style.position = "absolute", H.style.visibility = "hidden", H.style.pointerEvents = "none";
747
- const X = document.createElementNS(Ct, "text");
748
- X.setAttribute("font-size", String(fe)), X.setAttribute("font-family", oe), X.setAttribute("font-weight", String(_e)), X.textContent = he || "", H.appendChild(X), document.body.appendChild(H);
749
- const Jt = X.getComputedTextLength();
750
- return document.body.removeChild(H), Jt;
751
- }
752
- function Ll(he, fe, _e, H, X, Jt) {
753
- const Rl = String(he).split(/\s+/).filter(Boolean), A = [];
754
- let se = "";
755
- function pe(S) {
756
- return ve(S, _e, H) <= fe;
757
- }
758
- function Pl(S) {
759
- if (pe(S)) return [S];
760
- const K = [];
761
- let C = 0;
762
- for (; C < S.length; ) {
763
- let pt = 1, gt = S.length - C, mt = 1;
764
- for (; pt <= gt; ) {
765
- const We = pt + gt >> 1, Vl = S.slice(C, C + We);
766
- pe(Vl) ? (mt = We, pt = We + 1) : gt = We - 1;
767
- }
768
- K.push(S.slice(C, C + mt)), C += mt;
769
- }
770
- return K;
771
- }
772
- const Bl = Rl.flatMap((S) => Pl(S));
773
- for (const S of Bl) {
774
- const K = se ? se + " " + S : S;
775
- if (pe(K))
776
- se = K;
777
- else if (se && A.push(se), se = S, A.length === X - 1) break;
778
- }
779
- if (se && A.length < X && A.push(se), A.length === X) {
780
- const S = A[A.length - 1];
781
- if (!pe(S)) {
782
- let C = S;
783
- for (; C.length && !pe(C); ) C = C.slice(0, -1);
784
- A[A.length - 1] = C;
785
- }
786
- let K = A[A.length - 1] + "…";
787
- if (!pe(K)) {
788
- let C = A[A.length - 1];
789
- for (; C.length && !pe(C + "…"); ) C = C.slice(0, -1);
790
- K = C + "…";
791
- }
792
- A[A.length - 1] = K;
793
- }
794
- return A;
795
- }
796
- const Dl = a ? 1 : 0, Kt = Math.max(0, Math.floor(ce / k) - Dl);
797
- if (Kt <= 0) {
798
- if (!a) return "";
799
- const he = e.x0 + s, fe = e.y0 + s + v, _e = $t(Ee);
800
- return ve(_e, v, ae) <= N ? `
801
- <text
802
- x="${he}"
803
- y="${fe}"
804
- font-size="${v}"
805
- font-family="${Ke(oe)}"
806
- font-weight="${ae}"
807
- fill="${Ke(ne)}"
808
- >
809
- ${_e}
810
- </text>` : "";
811
- }
812
- const de = l ? Ll(dt, N, v, He, Kt) : [];
813
- let Oe = v, Z = String(Ee);
814
- if (a) {
815
- for (; ve(Z, Oe, ae) > N && Oe > Math.max(8, v * 0.75); )
816
- Oe -= 1;
817
- if (ve(Z, Oe, ae) > N) {
818
- for (; Z.length && ve(Z + "…", Oe, ae) > N; )
819
- Z = Z.slice(0, -1);
820
- if (Z += "…", !Z.length) return "";
821
- }
822
- }
823
- if (de.length * k + (a ? k : 0) > ce) {
824
- for (; de.length && de.length * k + (a ? k : 0) > ce; )
825
- de.pop();
826
- if (!de.length && (!a || k > ce)) return "";
827
- }
828
- const ht = e.x0 + s, zl = e.y0 + s + v, ft = [];
829
- return l && de.forEach((he, fe) => {
830
- ft.push(
831
- `
832
- <tspan
833
- x="${ht}"
834
- dy="${fe === 0 ? 0 : k}"
835
- font-weight="${He}"
836
- >
837
- ${$t(he)}
838
- </tspan>`
839
- );
840
- }), a && ft.push(
841
- `
842
- <tspan
843
- x="${ht}"
844
- dy="${de.length ? k : 0}"
845
- font-weight="${ae}"
846
- font-size="${Oe}"
847
- >
848
- ${$t(Z)}
849
- </tspan>`
850
- ), `<text
851
- x="${ht}"
852
- y="${zl}"
853
- font-size="${v}"
854
- font-family="${Ke(oe)}"
855
- fill="${Ke(ne)}"
856
- paint-order="stroke"
857
- stroke="transparent"
858
- stroke-width="0"
859
- style="transition: all 0.2s ease-in-out;"
860
- >
861
- ${ft.join("")}
862
- </text>`;
863
- }
864
- function Nl(e) {
865
- const o = t.value.style.chart.layout.rects.borderRadius, l = $e(e), a = Ce(e);
866
- return Math.min(o, Math.min(l, a) / 6);
867
- }
868
- return i({
869
- getData: xl,
870
- getImage: Tl,
871
- generateCsv: ct,
872
- generateImage: Rt,
873
- generateSvg: Zt,
874
- generatePdf: zt,
875
- toggleTable: Gt,
876
- toggleTooltip: Xt,
877
- toggleAnnotator: vt,
878
- toggleFullscreen: Wt
879
- }), (e, o) => (h(), w("div", {
880
- ref_key: "treemapChart",
881
- ref: U,
882
- class: yt(`vue-data-ui-component vue-ui-treemap ${ie.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
883
- style: ue(`font-family:${t.value.style.fontFamily};width:100%; ${t.value.responsive ? "height: 100%;" : ""} text-align:center;background:${t.value.style.chart.backgroundColor}`),
884
- id: `treemap_${I.value}`,
885
- onMouseenter: o[2] || (o[2] = () => p(It)(!0)),
886
- onMouseleave: o[3] || (o[3] = () => p(It)(!1))
887
- }, [
888
- t.value.userOptions.buttons.annotator ? (h(), re(p(r), {
889
- key: 0,
890
- svgRef: p(nt),
891
- backgroundColor: t.value.style.chart.backgroundColor,
892
- color: t.value.style.chart.color,
893
- active: Be.value,
894
- onClose: vt
895
- }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : M("", !0),
896
- hl.value ? (h(), w("div", {
897
- key: 1,
898
- ref_key: "noTitle",
899
- ref: At,
900
- class: "vue-data-ui-no-title-space",
901
- style: "height:36px; width: 100%;background:transparent"
902
- }, null, 512)) : M("", !0),
903
- t.value.style.chart.title.text ? (h(), w("div", {
904
- key: 2,
905
- ref_key: "chartTitle",
906
- ref: St,
907
- style: ue(`width:100%;background:${t.value.style.chart.backgroundColor};padding-bottom:6px`)
908
- }, [
909
- (h(), re(io, {
910
- key: `title_${Ft.value}`,
911
- config: {
912
- title: {
913
- cy: "treemap-div-title",
914
- ...t.value.style.chart.title
915
- },
916
- subtitle: {
917
- cy: "treemap-div-subtitle",
918
- ...t.value.style.chart.title.subtitle
919
- }
920
- }
921
- }, null, 8, ["config"]))
922
- ], 4)) : M("", !0),
923
- R("div", {
924
- id: `legend-top-${I.value}`
925
- }, null, 8, xo),
926
- t.value.userOptions.show && D.value && (p(Nt) || p(at)) ? (h(), re(p(m), {
927
- ref_key: "userOptionsRef",
928
- ref: lt,
929
- key: `user_option_${Tt.value}`,
930
- backgroundColor: t.value.style.chart.backgroundColor,
931
- color: t.value.style.chart.color,
932
- isPrinting: p(Lt),
933
- isImaging: p(Dt),
934
- uid: I.value,
935
- hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
936
- hasPdf: t.value.userOptions.buttons.pdf,
937
- hasXls: t.value.userOptions.buttons.csv,
938
- hasImg: t.value.userOptions.buttons.img,
939
- hasSvg: t.value.userOptions.buttons.svg,
940
- hasTable: t.value.userOptions.buttons.table,
941
- hasFullscreen: t.value.userOptions.buttons.fullscreen,
942
- isFullscreen: ie.value,
943
- isTooltip: z.value.showTooltip,
944
- titles: { ...t.value.userOptions.buttonTitles },
945
- chartElement: U.value,
946
- position: t.value.userOptions.position,
947
- hasAnnotator: t.value.userOptions.buttons.annotator,
948
- isAnnotation: Be.value,
949
- callbacks: t.value.userOptions.callbacks,
950
- printScale: t.value.userOptions.print.scale,
951
- tableDialog: t.value.table.useDialog,
952
- onToggleFullscreen: Wt,
953
- onGeneratePdf: p(zt),
954
- onGenerateCsv: ct,
955
- onGenerateImage: p(Rt),
956
- onGenerateSvg: Zt,
957
- onToggleTable: Gt,
958
- onToggleTooltip: Xt,
959
- onToggleAnnotator: vt,
960
- style: ue({
961
- visibility: p(Nt) ? p(at) ? "visible" : "hidden" : "visible"
962
- })
963
- }, el({ _: 2 }, [
964
- e.$slots.menuIcon ? {
965
- name: "menuIcon",
966
- fn: O(({ isOpen: l, color: a }) => [
967
- $(e.$slots, "menuIcon", me(ye({ isOpen: l, color: a })), void 0, !0)
968
- ]),
969
- key: "0"
970
- } : void 0,
971
- e.$slots.optionTooltip ? {
972
- name: "optionTooltip",
973
- fn: O(() => [
974
- $(e.$slots, "optionTooltip", {}, void 0, !0)
975
- ]),
976
- key: "1"
977
- } : void 0,
978
- e.$slots.optionPdf ? {
979
- name: "optionPdf",
980
- fn: O(() => [
981
- $(e.$slots, "optionPdf", {}, void 0, !0)
982
- ]),
983
- key: "2"
984
- } : void 0,
985
- e.$slots.optionCsv ? {
986
- name: "optionCsv",
987
- fn: O(() => [
988
- $(e.$slots, "optionCsv", {}, void 0, !0)
989
- ]),
990
- key: "3"
991
- } : void 0,
992
- e.$slots.optionImg ? {
993
- name: "optionImg",
994
- fn: O(() => [
995
- $(e.$slots, "optionImg", {}, void 0, !0)
996
- ]),
997
- key: "4"
998
- } : void 0,
999
- e.$slots.optionSvg ? {
1000
- name: "optionSvg",
1001
- fn: O(() => [
1002
- $(e.$slots, "optionSvg", {}, void 0, !0)
1003
- ]),
1004
- key: "5"
1005
- } : void 0,
1006
- e.$slots.optionTable ? {
1007
- name: "optionTable",
1008
- fn: O(() => [
1009
- $(e.$slots, "optionTable", {}, void 0, !0)
1010
- ]),
1011
- key: "6"
1012
- } : void 0,
1013
- e.$slots.optionFullscreen ? {
1014
- name: "optionFullscreen",
1015
- fn: O(({ toggleFullscreen: l, isFullscreen: a }) => [
1016
- $(e.$slots, "optionFullscreen", me(ye({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
1017
- ]),
1018
- key: "7"
1019
- } : void 0,
1020
- e.$slots.optionAnnotator ? {
1021
- name: "optionAnnotator",
1022
- fn: O(({ toggleAnnotator: l, isAnnotator: a }) => [
1023
- $(e.$slots, "optionAnnotator", me(ye({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
1024
- ]),
1025
- key: "8"
1026
- } : void 0
1027
- ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : M("", !0),
1028
- Y.value.length > 1 ? (h(), w("nav", {
1029
- key: 4,
1030
- class: "vue-ui-treemap-breadcrumbs",
1031
- "data-dom-to-png-ignore": "",
1032
- ref_key: "breadcrumbsNav",
1033
- ref: tt
1034
- }, [
1035
- (h(!0), w(Xe, null, bt(Y.value, (l, a) => (h(), w("span", {
1036
- role: "button",
1037
- tabindex: a < Y.value.length - 1 ? 0 : void 0,
1038
- key: l.id || "root",
1039
- onClick: (s) => a === Y.value.length - 1 ? () => {
1040
- } : Re(l.node),
1041
- onKeydown: [
1042
- tl(wt((s) => a === Y.value.length - 1 ? void 0 : Re(l.node), ["prevent"]), ["enter"]),
1043
- tl(wt((s) => a === Y.value.length - 1 ? void 0 : Re(l.node), ["prevent"]), ["space"])
1044
- ],
1045
- class: "vue-ui-treemap-crumb",
1046
- "data-last-crumb": a === Y.value.length - 1,
1047
- style: ue({
1048
- color: t.value.style.chart.color
1049
- }),
1050
- onMouseenter: (s) => qt(a),
1051
- onMouseleave: Yt,
1052
- onFocus: (s) => qt(a),
1053
- onBlur: Yt
1054
- }, [
1055
- R("span", So, [
1056
- R("span", Oo, [
1057
- $(e.$slots, "breadcrumb-label", kt({ ref_for: !0 }, { crumb: l, isRoot: a === 0, isFocus: Ve.value === a }), () => [
1058
- a === 0 ? (h(), w("div", _o, [
1059
- Ge(ul, {
1060
- name: Ve.value === 0 ? "homeFilled" : "home",
1061
- stroke: t.value.style.chart.color
1062
- }, null, 8, ["name", "stroke"])
1063
- ])) : (h(), w(Xe, { key: 1 }, [
1064
- qe(Ye(l.label), 1)
1065
- ], 64))
1066
- ], !0)
1067
- ]),
1068
- a < Y.value.length - 1 ? (h(), w("span", Ao, [
1069
- $(e.$slots, "breadcrumb-arrow", {}, () => [
1070
- o[4] || (o[4] = qe(" › ", -1))
1071
- ], !0)
1072
- ])) : M("", !0)
1073
- ])
1074
- ], 44, To))), 128))
1075
- ], 512)) : M("", !0),
1076
- (h(), w("svg", {
1077
- ref_key: "svgRef",
1078
- ref: nt,
1079
- xmlns: p(Ct),
1080
- class: yt({ "vue-data-ui-fullscreen--on": ie.value, "vue-data-ui-fulscreen--off": !ie.value, "vue-data-ui-zoom-plus": !Se.value, "vue-data-ui-zoom-minus": Se.value, loading: p(be) }),
1081
- viewBox: `${Te.value.startX} ${Te.value.startY} ${Te.value.width <= 0 ? 10 : Te.value.width} ${Te.value.height <= 0 ? 10 : Te.value.height}`,
1082
- style: ue(`max-width:100%; overflow: hidden; background:transparent;color:${t.value.style.chart.color}`)
1083
- }, [
1084
- Ge(p(g)),
1085
- (h(!0), w(Xe, null, bt(Ie.value, (l, a) => (h(), w("g", {
1086
- key: `tgrad_${l.id}`
1087
- }, [
1088
- t.value.style.chart.layout.rects.gradient.show ? (h(), w("defs", Mo, [
1089
- R("radialGradient", {
1090
- id: `tgrad_${l.id}`,
1091
- gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
1092
- }, [
1093
- R("stop", {
1094
- offset: "18%",
1095
- "stop-color": l.color
1096
- }, null, 8, No),
1097
- R("stop", {
1098
- offset: "100%",
1099
- "stop-color": p(ol)(l.color, t.value.style.chart.layout.rects.gradient.intensity / 100)
1100
- }, null, 8, Lo)
1101
- ], 8, Io)
1102
- ])) : M("", !0)
1103
- ]))), 128)),
1104
- (h(!0), w(Xe, null, bt(Ie.value, (l, a) => (h(), w("g", {
1105
- key: `k_${l.id}`
1106
- }, [
1107
- R("rect", {
1108
- x: l.x0,
1109
- y: l.y0,
1110
- height: Ce(l),
1111
- width: $e(l),
1112
- fill: q.value ? l.color : t.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${l.id})` : l.color,
1113
- rx: Nl(l),
1114
- stroke: G.value && G.value.id === l.id ? t.value.style.chart.layout.rects.selected.stroke : t.value.style.chart.layout.rects.stroke,
1115
- "stroke-width": G.value && G.value.id === l.id ? t.value.style.chart.layout.rects.selected.strokeWidth : t.value.style.chart.layout.rects.strokeWidth,
1116
- onClick: wt((s) => Re(l, a), ["stop"]),
1117
- onMouseenter: () => $l({
1118
- datapoint: l,
1119
- seriesIndex: a
1120
- }),
1121
- onMouseleave: (s) => Cl({ datapoint: l, seriesIndex: a }),
1122
- style: ue(`opacity:${G.value ? G.value.id === l.id ? 1 : t.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
1123
- class: yt([
1124
- "vue-ui-treemap-rect",
1125
- wl(l) ? "vue-data-ui-zoom-plus" : Se.value ? "vue-data-ui-zoom-minus" : ""
1126
- ])
1127
- }, null, 46, Do),
1128
- !e.$slots.rect && !p(be) && t.value.style.chart.layout.labels.showDefaultLabels ? (h(), w("g", {
1129
- key: 0,
1130
- style: { "pointer-events": "none" },
1131
- innerHTML: Il({ rect: l, seriesIndex: a })
1132
- }, null, 8, zo)) : M("", !0),
1133
- (h(), w("foreignObject", {
1134
- x: l.x0,
1135
- y: l.y0,
1136
- height: Ce(l),
1137
- width: $e(l),
1138
- class: "vue-ui-treemap-cell-foreignObject"
1139
- }, [
1140
- R("div", {
1141
- style: ue({
1142
- width: `calc(100% - ${xe(l) / 1.5}px)`,
1143
- height: `calc(100% - ${xe(l) / 1.5}px)`,
1144
- padding: `${xe(l) / 3}px`
1145
- }),
1146
- class: "vue-ui-treemap-cell"
1147
- }, [
1148
- p(be) ? M("", !0) : $(e.$slots, "rect", kt({
1149
- key: 0,
1150
- ref_for: !0
1151
- }, {
1152
- rect: l,
1153
- shouldShow: l.proportion > t.value.style.chart.layout.labels.hideUnderProportion || Se.value,
1154
- fontSize: xe(l),
1155
- isZoom: Se.value,
1156
- textColor: p(al)(l.color)
1157
- }), void 0, !0)
1158
- ], 4)
1159
- ], 8, Ro))
1160
- ]))), 128)),
1161
- $(e.$slots, "svg", me(ye({ svg: B.value, isZoom: Se.value, rect: G.value, config: t.value })), void 0, !0)
1162
- ], 14, Fo)),
1163
- e.$slots.watermark ? (h(), w("div", Po, [
1164
- $(e.$slots, "watermark", me(ye({ isPrinting: p(Lt) || p(Dt) })), void 0, !0)
1165
- ])) : M("", !0),
1166
- R("div", {
1167
- id: `legend-bottom-${I.value}`
1168
- }, null, 8, Bo),
1169
- Mt.value ? (h(), re(Ul, {
1170
- key: 6,
1171
- to: t.value.style.chart.legend.position === "top" ? `#legend-top-${I.value}` : `#legend-bottom-${I.value}`
1172
- }, [
1173
- R("div", {
1174
- ref_key: "chartLegend",
1175
- ref: Ot
1176
- }, [
1177
- t.value.style.chart.legend.show ? (h(), re(vo, {
1178
- key: `legend_${et.value}`,
1179
- legendSet: rt.value,
1180
- config: kl.value,
1181
- id: `treemap_legend_${I.value}`,
1182
- onClickMarker: o[0] || (o[0] = ({ legend: l }) => Ut(l))
1183
- }, {
1184
- item: O(({ legend: l, index: a }) => [
1185
- p(be) ? M("", !0) : (h(), w("div", {
1186
- key: 0,
1187
- onClick: (s) => Ut(l),
1188
- style: ue(`opacity:${W.value.includes(l.id) ? 0.5 : 1}`)
1189
- }, Ye(l.display), 13, Vo))
1190
- ]),
1191
- _: 1
1192
- }, 8, ["legendSet", "config", "id"])) : $(e.$slots, "legend", {
1193
- key: 1,
1194
- legend: rt.value
1195
- }, void 0, !0)
1196
- ], 512)
1197
- ], 8, ["to"])) : M("", !0),
1198
- e.$slots.source ? (h(), w("div", {
1199
- key: 7,
1200
- ref_key: "source",
1201
- ref: _t,
1202
- dir: "auto"
1203
- }, [
1204
- $(e.$slots, "source", {}, void 0, !0)
1205
- ], 512)) : M("", !0),
1206
- Ge(p(d), {
1207
- show: z.value.showTooltip && P.value,
1208
- backgroundColor: t.value.style.chart.tooltip.backgroundColor,
1209
- color: t.value.style.chart.tooltip.color,
1210
- fontSize: t.value.style.chart.tooltip.fontSize,
1211
- borderRadius: t.value.style.chart.tooltip.borderRadius,
1212
- borderColor: t.value.style.chart.tooltip.borderColor,
1213
- borderWidth: t.value.style.chart.tooltip.borderWidth,
1214
- backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
1215
- position: t.value.style.chart.tooltip.position,
1216
- offsetY: t.value.style.chart.tooltip.offsetY,
1217
- parent: U.value,
1218
- content: Je.value,
1219
- isFullscreen: ie.value,
1220
- isCustom: p(nl)(t.value.style.chart.tooltip.customFormat),
1221
- smooth: t.value.style.chart.tooltip.smooth,
1222
- backdropFilter: t.value.style.chart.tooltip.backdropFilter,
1223
- smoothForce: t.value.style.chart.tooltip.smoothForce,
1224
- smoothSnapThreshold: t.value.style.chart.tooltip.smoothSnapThreshold
1225
- }, {
1226
- "tooltip-before": O(() => [
1227
- $(e.$slots, "tooltip-before", me(ye({ ...it.value })), void 0, !0)
1228
- ]),
1229
- "tooltip-after": O(() => [
1230
- $(e.$slots, "tooltip-after", me(ye({ ...it.value })), void 0, !0)
1231
- ]),
1232
- _: 3
1233
- }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
1234
- D.value && t.value.userOptions.buttons.table ? (h(), re(Gl(Ne.value.component), kt({ key: 8 }, Ne.value.props, {
1235
- ref_key: "tableUnit",
1236
- ref: Ae,
1237
- onClose: jt
1238
- }), el({
1239
- content: O(() => [
1240
- (h(), re(p(c), {
1241
- key: `table_${Qe.value}`,
1242
- colNames: Pe.value.colNames,
1243
- head: Pe.value.head,
1244
- body: Pe.value.body,
1245
- config: Pe.value.config,
1246
- title: t.value.table.useDialog ? "" : Ne.value.title,
1247
- withCloseButton: !t.value.table.useDialog,
1248
- onClose: jt
1249
- }, {
1250
- th: O(({ th: l }) => [
1251
- R("div", {
1252
- innerHTML: l,
1253
- style: { display: "flex", "align-items": "center" }
1254
- }, null, 8, Ho)
1255
- ]),
1256
- td: O(({ td: l }) => [
1257
- qe(Ye(l.name || l), 1)
1258
- ]),
1259
- _: 1
1260
- }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
1261
- ]),
1262
- _: 2
1263
- }, [
1264
- t.value.table.useDialog ? {
1265
- name: "title",
1266
- fn: O(() => [
1267
- qe(Ye(Ne.value.title), 1)
1268
- ]),
1269
- key: "0"
1270
- } : void 0,
1271
- t.value.table.useDialog ? {
1272
- name: "actions",
1273
- fn: O(() => [
1274
- R("button", {
1275
- tabindex: "0",
1276
- class: "vue-ui-user-options-button",
1277
- onClick: o[1] || (o[1] = (l) => ct(t.value.userOptions.callbacks.csv))
1278
- }, [
1279
- Ge(ul, {
1280
- name: "excel",
1281
- stroke: Ne.value.props.color
1282
- }, null, 8, ["stroke"])
1283
- ])
1284
- ]),
1285
- key: "1"
1286
- } : void 0
1287
- ]), 1040)) : M("", !0),
1288
- p(be) ? (h(), re(ao, { key: 9 })) : M("", !0)
1289
- ], 46, $o));
1290
- }
1291
- }, na = /* @__PURE__ */ fo(Eo, [["__scopeId", "data-v-ef2ff701"]]);
1292
- export {
1293
- na as default
1294
- };