vue-data-ui 3.0.0-next.0 → 3.0.0-next.2

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 (102) hide show
  1. package/README.md +108 -67
  2. package/dist/{Arrow-CzFtSJ1v.js → Arrow-Dck2Ea5K.js} +1 -1
  3. package/dist/{BaseDraggableDialog-0S5xhs2P.js → BaseDraggableDialog-CatHZ1ns.js} +2 -2
  4. package/dist/{BaseIcon-DoDjTdD5.js → BaseIcon-BmZ4MREl.js} +1 -1
  5. package/dist/{ColorPicker-BGRchgqQ.js → ColorPicker-C1MXyD9Q.js} +2 -2
  6. package/dist/{DataTable-BBbOgI-a.js → DataTable-CgL0Rz0x.js} +2 -2
  7. package/dist/{Legend-Q4bOb-Nf.js → Legend-CYbP3Kfg.js} +12 -11
  8. package/dist/{NonSvgPenAndPaper-DNKRvsBB.js → NonSvgPenAndPaper-CcbcJm_U.js} +3 -3
  9. package/dist/{PackageVersion-D0VPY8-5.js → PackageVersion-CAkNkiIG.js} +1 -1
  10. package/dist/{PenAndPaper-DhBJsnob.js → PenAndPaper-Cx1-5zdD.js} +32 -32
  11. package/dist/{Shape-DbsLJ-SE.js → Shape-DBXkGxKt.js} +1 -1
  12. package/dist/{Slicer-DZEFp2GU.js → Slicer-nrMi5hzj.js} +2 -2
  13. package/dist/{SparkTooltip-CoOJR62O.js → SparkTooltip-fNzL4pIU.js} +1 -1
  14. package/dist/{Title-D29apS4l.js → Title-pVYRzQXY.js} +1 -1
  15. package/dist/Tooltip-NwATo4ZJ.js +157 -0
  16. package/dist/{UserOptions-Bdit7AWO.js → UserOptions-DAsRxxrf.js} +137 -129
  17. package/dist/{dom-to-png-BdPIrHOF.js → dom-to-png-BF_4H_6u.js} +1 -1
  18. package/dist/img-ku4zevVD.js +33 -0
  19. package/dist/{index-DMqAxz7R.js → index-BzfnuLnw.js} +1199 -1135
  20. package/dist/pdf-CguiIsUc.js +58 -0
  21. package/dist/style.css +1 -1
  22. package/dist/types/vue-data-ui.d.cts +1051 -217
  23. package/dist/types/vue-data-ui.d.ts +1051 -217
  24. package/dist/useLoading-Bt5Doa8m.js +28 -0
  25. package/dist/{useNestedProp-YgN3FV_8.js → useNestedProp-DorElw91.js} +1 -1
  26. package/dist/{usePrinter-COkTjv6C.js → usePrinter-C9qkgv0r.js} +2 -2
  27. package/dist/vue-data-ui-DQef_oFO.js +314 -0
  28. package/dist/vue-data-ui.js +13 -13
  29. package/dist/{vue-ui-3d-bar-Ojgjl20n.js → vue-ui-3d-bar-DPSamIA-.js} +261 -245
  30. package/dist/{vue-ui-accordion-P6eFHGQp.js → vue-ui-accordion-DgZK-qDz.js} +3 -3
  31. package/dist/{vue-ui-age-pyramid-IcMpAhiw.js → vue-ui-age-pyramid-DVeGKvf9.js} +233 -217
  32. package/dist/{vue-ui-annotator-Bk7d86-x.js → vue-ui-annotator-6ikkK-FK.js} +2 -2
  33. package/dist/{vue-ui-bullet-DCvWbCPk.js → vue-ui-bullet-Bg4hfFk2.js} +172 -156
  34. package/dist/{vue-ui-candlestick-DCf-88Yv.js → vue-ui-candlestick-Bi59FGXn.js} +271 -254
  35. package/dist/{vue-ui-carousel-table-DEsl0XUh.js → vue-ui-carousel-table-DitKhrFT.js} +17 -16
  36. package/dist/{vue-ui-chestnut-Cg10-3wu.js → vue-ui-chestnut-D8wGAZod.js} +419 -403
  37. package/dist/{vue-ui-chord-BWYzR6vf.js → vue-ui-chord-C-uTVCDP.js} +256 -240
  38. package/dist/{vue-ui-circle-pack-CO2Ra2-5.js → vue-ui-circle-pack-CPy6xcxv.js} +230 -214
  39. package/dist/{vue-ui-cursor-BbYHJDbV.js → vue-ui-cursor-Dd7vUd0q.js} +2 -2
  40. package/dist/{vue-ui-dashboard-DkCnNuse.js → vue-ui-dashboard-CKurbu8M.js} +62 -62
  41. package/dist/{vue-ui-digits-DRsphHt2.js → vue-ui-digits-DfdZI11G.js} +2 -2
  42. package/dist/{vue-ui-donut-evolution-B5F2-0bh.js → vue-ui-donut-evolution-CKbLO8yR.js} +370 -357
  43. package/dist/vue-ui-donut-tECBFvud.js +1532 -0
  44. package/dist/{vue-ui-dumbbell-DqqSxoSh.js → vue-ui-dumbbell-DI5Lj3r_.js} +216 -200
  45. package/dist/{vue-ui-flow-CTIcUJgV.js → vue-ui-flow-CjU48s9z.js} +217 -201
  46. package/dist/{vue-ui-funnel-k7KD7Xoc.js → vue-ui-funnel-DM_5vHZ4.js} +213 -197
  47. package/dist/{vue-ui-galaxy-C9EHaP4I.js → vue-ui-galaxy-ocvZgZJx.js} +215 -202
  48. package/dist/{vue-ui-gauge-CBiM_1-n.js → vue-ui-gauge-DajNoY-D.js} +220 -204
  49. package/dist/{vue-ui-gizmo-CAc7b2oK.js → vue-ui-gizmo-DTnzeQbm.js} +3 -3
  50. package/dist/{vue-ui-heatmap-B3ubrP2v.js → vue-ui-heatmap-CfBS8jQe.js} +244 -224
  51. package/dist/{vue-ui-history-plot-XCqccO3b.js → vue-ui-history-plot-BuOPWQoP.js} +268 -252
  52. package/dist/{vue-ui-kpi-DTGMDjaZ.js → vue-ui-kpi-DLGHOIRj.js} +3 -3
  53. package/dist/{vue-ui-mini-loader-Cn_7nvVq.js → vue-ui-mini-loader-CHAHi4c9.js} +2 -2
  54. package/dist/{vue-ui-molecule-BugMXFAK.js → vue-ui-molecule-R5-oDFeW.js} +204 -188
  55. package/dist/{vue-ui-mood-radar-Cv4dHZPL.js → vue-ui-mood-radar-Ddf2gaES.js} +206 -190
  56. package/dist/vue-ui-nested-donuts-CksklV83.js +1177 -0
  57. package/dist/{vue-ui-onion-Bha2hRAb.js → vue-ui-onion-D2n4zUkV.js} +196 -180
  58. package/dist/{vue-ui-parallel-coordinate-plot-DWJ2DWx4.js → vue-ui-parallel-coordinate-plot-CNWQqlxf.js} +194 -178
  59. package/dist/{vue-ui-quadrant-BKHZoTml.js → vue-ui-quadrant-CxNj2FEx.js} +321 -305
  60. package/dist/{vue-ui-quick-chart-D_k3lbU8.js → vue-ui-quick-chart-Bm_VmhJR.js} +347 -331
  61. package/dist/{vue-ui-radar-Co4EOjSk.js → vue-ui-radar-DSYMQJ6K.js} +193 -177
  62. package/dist/{vue-ui-rating-dtNN0EdX.js → vue-ui-rating-BiQpwXnc.js} +2 -2
  63. package/dist/{vue-ui-relation-circle-CR4UpQzM.js → vue-ui-relation-circle-Cdxe78Bm.js} +188 -172
  64. package/dist/{vue-ui-ridgeline-BKX97EnR.js → vue-ui-ridgeline-DpeM2hRi.js} +212 -196
  65. package/dist/{vue-ui-rings-EPTwyt6D.js → vue-ui-rings-BenmQHKv.js} +223 -210
  66. package/dist/{vue-ui-scatter-BlxzblSR.js → vue-ui-scatter-mDMY1H6U.js} +288 -273
  67. package/dist/{vue-ui-skeleton-CjN2ZdgT.js → vue-ui-skeleton-Ch_XkFuP.js} +3 -3
  68. package/dist/{vue-ui-smiley-DdF_ErYG.js → vue-ui-smiley-DTig5lTU.js} +2 -2
  69. package/dist/{vue-ui-spark-trend-RdOlCuT9.js → vue-ui-spark-trend-BkDsp8E0.js} +3 -3
  70. package/dist/{vue-ui-sparkbar-DWufRGcN.js → vue-ui-sparkbar-CgqoyBOm.js} +3 -3
  71. package/dist/{vue-ui-sparkgauge-IP1O3qyT.js → vue-ui-sparkgauge-B4jR_Y62.js} +3 -3
  72. package/dist/{vue-ui-sparkhistogram-Cnv9xZ8H.js → vue-ui-sparkhistogram-DfxjglLy.js} +4 -4
  73. package/dist/{vue-ui-sparkline-CYgeD5V3.js → vue-ui-sparkline-M3QR8xJE.js} +3 -3
  74. package/dist/{vue-ui-sparkstackbar-BCwoK9xd.js → vue-ui-sparkstackbar-B2Ls-Mb8.js} +3 -3
  75. package/dist/{vue-ui-stackbar-CqFIvfrK.js → vue-ui-stackbar-DIHkn6__.js} +497 -474
  76. package/dist/{vue-ui-strip-plot-Dq-kDRai.js → vue-ui-strip-plot-B_ZLbu2D.js} +241 -225
  77. package/dist/{vue-ui-table-vaIdQnPl.js → vue-ui-table-BhymhDOh.js} +3 -3
  78. package/dist/{vue-ui-table-heatmap-U_Td0cdh.js → vue-ui-table-heatmap-DokRh4dS.js} +26 -25
  79. package/dist/{vue-ui-table-sparkline-DkOaHx5L.js → vue-ui-table-sparkline-DxBZGKZJ.js} +8 -7
  80. package/dist/{vue-ui-thermometer-CzckBZgs.js → vue-ui-thermometer-e2L6IdF-.js} +170 -154
  81. package/dist/{vue-ui-timer-DSdUshUs.js → vue-ui-timer-BG2EwK3o.js} +5 -5
  82. package/dist/vue-ui-tiremarks-nzQH7woJ.js +358 -0
  83. package/dist/vue-ui-treemap-CZxyi6fl.js +965 -0
  84. package/dist/{vue-ui-vertical-bar-Dd4sYeAC.js → vue-ui-vertical-bar-DahdX1Sn.js} +382 -360
  85. package/dist/{vue-ui-waffle-DusUVY6y.js → vue-ui-waffle-D399D4UE.js} +234 -221
  86. package/dist/vue-ui-wheel-DtcwtHzJ.js +352 -0
  87. package/dist/{vue-ui-word-cloud-_7uYjJ5A.js → vue-ui-word-cloud-CTDceQsf.js} +249 -233
  88. package/dist/{vue-ui-world-COIyBHII.js → vue-ui-world-BjNSbqMZ.js} +239 -223
  89. package/dist/vue-ui-xy-BkTP-JpK.js +2958 -0
  90. package/dist/{vue-ui-xy-canvas-CuYRyub2.js → vue-ui-xy-canvas-BKAowbe0.js} +447 -431
  91. package/package.json +2 -2
  92. package/dist/Tooltip-hVZUY_s5.js +0 -149
  93. package/dist/img-BeMVTwmF.js +0 -20
  94. package/dist/pdf-DPxOdzfi.js +0 -51
  95. package/dist/useMouse-AicQS8Vf.js +0 -13
  96. package/dist/vue-data-ui-nceqWRts.js +0 -301
  97. package/dist/vue-ui-donut-DSE7ubVv.js +0 -1315
  98. package/dist/vue-ui-nested-donuts-CYe0Are_.js +0 -1154
  99. package/dist/vue-ui-tiremarks-B2WWklqG.js +0 -342
  100. package/dist/vue-ui-treemap-D1dgDhjG.js +0 -952
  101. package/dist/vue-ui-wheel-ClsKBh52.js +0 -336
  102. package/dist/vue-ui-xy-C_OUyzTC.js +0 -3135
@@ -1,1154 +0,0 @@
1
- import { defineAsyncComponent as E, computed as $, ref as h, watch as lt, onMounted as at, nextTick as ot, shallowRef as st, onBeforeUnmount as zt, createElementBlock as i, openBlock as n, unref as r, normalizeStyle as ue, normalizeClass as U, createBlock as R, createCommentVNode as m, createVNode as ut, createSlots as Mt, withCtx as L, renderSlot as x, normalizeProps as Y, guardReactiveProps as X, createElementVNode as g, Fragment as T, renderList as F, toDisplayString as S, withDirectives as nt, vShow as rt, createTextVNode as ne } from "vue";
2
- import { u as Et, c as Ut, t as Rt, p as Ce, a as Bt, G as D, o as Gt, e as W, b as Yt, d as Xt, m as _e, f as N, X as Wt, s as qt, L as Ht, k as Te, n as q, i as K, x as it, q as Jt, r as Kt, y as Qt, v as Fe, T as dt } from "./index-DMqAxz7R.js";
3
- import { t as Zt, u as jt } from "./useResponsive-DfdjqQps.js";
4
- import { u as ct } from "./useNestedProp-YgN3FV_8.js";
5
- import { u as el } from "./usePrinter-COkTjv6C.js";
6
- import { u as tl } from "./useUserOptionState-BIvW1Kz7.js";
7
- import { u as ll } from "./useChartAccessibility-9icAAmYg.js";
8
- import al from "./Title-D29apS4l.js";
9
- import ol from "./Legend-Q4bOb-Nf.js";
10
- import { _ as sl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
11
- const ul = ["id"], nl = ["xmlns", "viewBox"], rl = ["width", "height"], il = ["id"], dl = ["offset", "stop-color"], cl = ["offset", "stop-opacity"], vl = ["id"], hl = ["id"], fl = ["id"], pl = ["flood-color"], yl = ["d", "fill", "stroke", "stroke-width", "filter"], bl = ["d", "fill", "stroke", "stroke-width"], gl = { key: 1 }, ml = ["d", "fill"], wl = { key: 2 }, kl = ["x", "y", "font-size", "font-weight", "fill"], $l = { key: 3 }, Ll = ["filter"], xl = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], Cl = ["opacity", "text-anchor", "x", "y", "fill", "font-size", "font-weight"], _l = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Tl = ["d", "fill", "onMouseenter", "onClick"], Fl = {
12
- key: 5,
13
- class: "vue-data-ui-watermark"
14
- }, Nl = {
15
- key: 0,
16
- class: "vue-ui-nested-donuts-legend-title"
17
- }, Ol = ["onClick"], Al = ["innerHTML"], Il = {
18
- __name: "vue-ui-nested-donuts",
19
- props: {
20
- config: {
21
- type: Object,
22
- default() {
23
- return {};
24
- }
25
- },
26
- dataset: {
27
- type: Array,
28
- default() {
29
- return [];
30
- }
31
- }
32
- },
33
- emits: ["selectLegend", "selectDatapoint"],
34
- setup(vt, { expose: ht, emit: ft }) {
35
- const pt = E(() => import("./vue-ui-accordion-P6eFHGQp.js")), yt = E(() => import("./DataTable-BBbOgI-a.js")), bt = E(() => import("./PackageVersion-D0VPY8-5.js")), gt = E(() => import("./PenAndPaper-DhBJsnob.js")), mt = E(() => import("./vue-ui-skeleton-CjN2ZdgT.js")), wt = E(() => import("./Tooltip-hVZUY_s5.js")), kt = E(() => import("./UserOptions-Bdit7AWO.js")), { vue_ui_nested_donuts: $t } = Et(), C = vt, Q = $(() => !!C.dataset && C.dataset.length), y = h(Ut()), re = h(!1), ie = h(""), Lt = h(null), Ne = h(0), H = h(null), Oe = h(null), de = h(null), Ae = h(null), Ie = h(null), Se = h(0), Ve = h(0), Pe = h(0), z = h(!0), M = h([]), J = h([]), B = h(!1);
36
- function xt(l) {
37
- B.value = l, Ne.value += 1;
38
- }
39
- const e = $({
40
- get: () => Ee(),
41
- set: (l) => l
42
- }), { userOptionsVisible: ce, setUserOptionsVisibility: De, keepUserOptionState: ze } = tl({ config: e.value }), { svgRef: Me } = ll({
43
- config: e.value.style.chart.title
44
- });
45
- function Ee() {
46
- const l = ct({
47
- userConfig: C.config,
48
- defaultConfig: $t
49
- });
50
- return l.theme ? {
51
- ...ct({
52
- userConfig: Bt.vue_ui_nested_donuts[l.theme] || C.config,
53
- defaultConfig: l
54
- }),
55
- customPalette: Rt[l.theme] || Ce
56
- } : l;
57
- }
58
- lt(
59
- () => C.config,
60
- (l) => {
61
- e.value = Ee(), ce.value = !e.value.userOptions.showOnChartHover, ve(), Se.value += 1, Ve.value += 1, Pe.value += 1, k.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip.show, f.value.width = e.value.style.chart.width, f.value.height = e.value.style.chart.height;
62
- },
63
- { deep: !0 }
64
- );
65
- const Ue = $(() => {
66
- const { top: l, right: s, bottom: a, left: o } = e.value.style.chart.padding;
67
- return {
68
- css: `padding:${l}px ${s}px ${a}px ${o}px`,
69
- top: l,
70
- right: s,
71
- bottom: a,
72
- left: o
73
- };
74
- });
75
- function Ct(l, s = 1e3, a = 50) {
76
- return new Promise((o) => {
77
- const t = l.length;
78
- M.value = Array(t).fill(0), J.value = [];
79
- let u = 0;
80
- l.forEach((c, v) => {
81
- setTimeout(() => {
82
- const O = performance.now();
83
- function d(p) {
84
- const _ = Math.min((p - O) / s, 1), ge = dt(_), me = c * ge;
85
- M.value[v] = me, M.value = [...M.value];
86
- const oe = [];
87
- let we = 0;
88
- C.dataset.forEach((se, ke) => {
89
- const St = Fe(se.series.reduce(
90
- (Le, xe) => Le + Fe(D(xe.values).reduce((Pt, Dt) => Pt + Dt, 0)),
91
- 0
92
- )), Vt = Fe(M.value.slice(we, we + se.series.length).reduce((Le, xe) => Le + xe, 0)), $e = St - Vt;
93
- $e > Number.MIN_VALUE && oe.push({
94
- name: "__ghost__",
95
- arcOf: se.name,
96
- arcOfId: `${y.value}_${ke}`,
97
- id: `ghost_${y.value}_${ke}`,
98
- seriesIndex: -1,
99
- datasetIndex: ke,
100
- color: "transparent",
101
- value: $e,
102
- fullValue: $e,
103
- absoluteValues: [],
104
- ghost: !0
105
- }), we += se.series.length;
106
- }), J.value = oe, _ < 1 ? requestAnimationFrame(d) : (u += 1, u === t && o());
107
- }
108
- requestAnimationFrame(d);
109
- }, v * a);
110
- });
111
- });
112
- }
113
- at(async () => {
114
- if (ve(), e.value.startAnimation?.show) {
115
- const s = C.dataset.flatMap((a) => a.series).map(
116
- (a) => D(a.values).reduce((o, t) => o + t, 0)
117
- );
118
- M.value = s.map(() => 0), z.value = !0, J.value = C.dataset.map((a, o) => {
119
- const t = a.series.reduce(
120
- (u, c) => u + D(c.values).reduce((v, O) => v + O, 0),
121
- 0
122
- );
123
- return {
124
- name: "__ghost__",
125
- arcOf: a.name,
126
- arcOfId: `${y.value}_${o}`,
127
- id: `ghost_${y.value}_${o}`,
128
- seriesIndex: -1,
129
- datasetIndex: o,
130
- color: "transparent",
131
- value: t,
132
- fullValue: t,
133
- absoluteValues: [],
134
- ghost: !0
135
- };
136
- }), await ot(), Ct(
137
- s,
138
- e.value.startAnimation.durationMs,
139
- e.value.startAnimation.staggerMs
140
- ).then(() => {
141
- z.value = !1, J.value = [];
142
- });
143
- } else
144
- z.value = !1;
145
- });
146
- const V = st(null), G = st(null);
147
- at(() => {
148
- ve();
149
- });
150
- function ve() {
151
- if (Gt(C.dataset) && W({
152
- componentName: "VueUiNestedDonuts",
153
- type: "dataset"
154
- }), e.value.responsive) {
155
- const l = Zt(() => {
156
- const { width: s, height: a } = jt({
157
- chart: H.value,
158
- title: e.value.style.chart.title.text ? Oe.value : null,
159
- legend: e.value.style.chart.legend.show ? de.value : null,
160
- source: Ae.value,
161
- noTitle: Ie.value,
162
- padding: Ue.value
163
- });
164
- requestAnimationFrame(() => {
165
- f.value.width = s, f.value.height = a;
166
- });
167
- });
168
- V.value && (G.value && V.value.unobserve(G.value), V.value.disconnect()), V.value = new ResizeObserver(l), G.value = H.value.parentNode, V.value.observe(G.value);
169
- }
170
- }
171
- zt(() => {
172
- V.value && (G.value && V.value.unobserve(G.value), V.value.disconnect());
173
- });
174
- const { isPrinting: Re, isImaging: Be, generatePdf: Ge, generateImage: Ye } = el({
175
- elementId: `nested_donuts_${y.value}`,
176
- fileName: e.value.style.chart.title.text || "vue-ui-nested-donuts",
177
- options: e.value.userOptions.print
178
- }), _t = $(() => e.value.userOptions.show && !e.value.style.chart.title.text), Tt = $(() => Yt(e.value.customPalette)), k = h({
179
- dataLabels: {
180
- show: e.value.style.chart.layout.labels.dataLabels.show
181
- },
182
- showTable: e.value.table.show,
183
- showTooltip: e.value.style.chart.tooltip.show
184
- }), f = h({
185
- width: e.value.style.chart.width,
186
- height: e.value.style.chart.height
187
- }), Xe = ft;
188
- function Ft({ datapoint: l, index: s }) {
189
- Xe("selectDatapoint", { datapoint: l, index: s });
190
- }
191
- function We({
192
- from: l,
193
- to: s,
194
- duration: a,
195
- onUpdate: o,
196
- onDone: t,
197
- easing: u = dt
198
- }) {
199
- const c = performance.now();
200
- function v(O) {
201
- const d = Math.min((O - c) / a, 1), p = u(d), _ = l + (s - l) * p;
202
- o(_, d), d < 1 ? requestAnimationFrame(v) : (o(s, 1), t && t());
203
- }
204
- requestAnimationFrame(v);
205
- }
206
- const w = h([]), A = $(() => {
207
- C.dataset.forEach((s, a) => {
208
- [null, void 0].includes(s.name) && W({
209
- componentName: "VueUiNestedDonuts",
210
- type: "datasetSerieAttribute",
211
- property: "name",
212
- index: a
213
- }), [null, void 0].includes(s.series) ? W({
214
- componentName: "VueUiNestedDonuts",
215
- type: "datasetSerieAttribute",
216
- property: "series",
217
- index: a
218
- }) : s.series.length === 0 ? W({
219
- componentName: "VueUiNestedDonuts",
220
- type: "datasetAttributeEmpty",
221
- property: `series at index ${a}`
222
- }) : s.series.forEach((o, t) => {
223
- [null, void 0].includes(o.name) && W({
224
- componentName: "VueUiNestedDonuts",
225
- type: "datasetSerieAttribute",
226
- property: "name",
227
- index: t,
228
- key: "serie"
229
- }), [null, void 0].includes(o.values) && W({
230
- componentName: "VueUiNestedDonuts",
231
- type: "datasetSerieAttribute",
232
- property: "values",
233
- index: t,
234
- key: "serie"
235
- });
236
- });
237
- });
238
- let l = 0;
239
- return C.dataset.map((s, a) => ({
240
- ...s,
241
- total: s.series.filter((o) => !w.value.includes(o.id)).map((o) => D(o.values).reduce((t, u) => t + u, 0)).reduce((o, t) => o + t, 0),
242
- datasetIndex: a,
243
- id: `${y.value}_${a}`,
244
- series: s.series.map((o, t) => {
245
- const u = D(o.values).reduce((c, v) => c + v, 0);
246
- return {
247
- name: o.name,
248
- arcOf: s.name,
249
- arcOfId: `${y.value}_${a}`,
250
- id: `${y.value}_${a}_${t}`,
251
- seriesIndex: t,
252
- datasetIndex: a,
253
- color: Xt(o.color) || Tt.value[t] || Ce[t % Ce.length],
254
- value: z.value ? M.value[l++] ?? 0 : u,
255
- absoluteValues: o.values || []
256
- };
257
- })
258
- }));
259
- }), I = $(() => Math.min(f.value.height, f.value.width) * (e.value.style.chart.layout.donut.strokeWidth / 512)), qe = $(() => [...A.value].map((l, s) => {
260
- const a = l.series.filter((o) => !w.value.includes(o.id)).map((o) => o.value).reduce((o, t) => o + t, 0);
261
- return {
262
- ...l,
263
- total: a,
264
- series: l.series.filter((o) => !w.value.includes(o.id)).map((o) => ({
265
- ...o,
266
- proportion: o.value / a
267
- }))
268
- };
269
- }));
270
- function Nt(l, s, a) {
271
- let o = 0;
272
- for (let t = 0; t < l.length; t += 1)
273
- a.includes(l[t]) && (o += 1);
274
- return o < s;
275
- }
276
- const b = h(qe.value);
277
- lt(
278
- () => qe.value,
279
- (l) => b.value = l
280
- );
281
- function he(l) {
282
- Xe("selectLegend", l);
283
- const s = C.dataset.flatMap(
284
- (d, p) => d.series.map((_, ge) => ({
285
- value: D(_.values).reduce((me, oe) => me + oe, 0),
286
- id: `${y.value}_${p}_${ge}`,
287
- arcOfId: `${y.value}_${p}`
288
- }))
289
- ).find((d) => d.id === l.id);
290
- if (!s) return;
291
- const a = A.value.flatMap((d) => d.series).find((d) => d.id === l.id)?.value ?? 0, o = b.value.flatMap((d) => d.series).find((d) => d.id === l.id);
292
- let u = o ? o.value : 0;
293
- const c = A.value.find(
294
- (d) => d.id === s.arcOfId
295
- );
296
- if (!c) return;
297
- const v = c.series.map((d) => d.id), O = Nt(
298
- v,
299
- v.length - 1,
300
- w.value
301
- );
302
- w.value.includes(l.id) ? (w.value = w.value.filter((d) => d !== l.id), e.value.serieToggleAnimation.show ? We({
303
- from: u,
304
- to: a,
305
- duration: e.value.serieToggleAnimation.durationMs,
306
- onUpdate: (d) => {
307
- b.value = b.value.map((p) => ({
308
- ...p,
309
- series: p.series.map((_) => _.id === l.id ? { ..._, value: d } : _)
310
- }));
311
- }
312
- }) : b.value = b.value.map((d) => ({
313
- ...d,
314
- series: d.series.map((p) => p.id === l.id ? { ...p, value: a } : p)
315
- }))) : O && (e.value.serieToggleAnimation.show ? We({
316
- from: u,
317
- to: 0,
318
- duration: e.value.serieToggleAnimation.durationMs,
319
- onUpdate: (d) => {
320
- b.value = b.value.map((p) => ({
321
- ...p,
322
- series: p.series.map((_) => _.id === l.id ? { ..._, value: d } : _)
323
- }));
324
- },
325
- onDone: () => {
326
- w.value.push(l.id);
327
- }
328
- }) : (b.value = b.value.map((d) => ({
329
- ...d,
330
- series: d.series.map((p) => p.id === l.id ? { ...p, value: 0 } : p)
331
- })), w.value.push(l.id)));
332
- }
333
- const Z = $(() => I.value / A.value.length * e.value.style.chart.layout.donut.spacingRatio), He = $(() => b.value.map((l, s) => I.value - s * I.value / A.value.length)), j = $(() => b.value.map((l, s) => {
334
- const a = Math.abs(l.series.map((v) => v.value).reduce((v, O) => v + O, 0)) > 0, o = I.value - s * I.value / b.value.length, t = z.value ? J.value.find((v) => v.datasetIndex === s) : null, u = [...l.series, ...t ? [t] : []].map((v) => ({
335
- ...v,
336
- value: v.value < 1e-11 ? Number.MIN_VALUE : v.value
337
- })), c = _e(
338
- { series: [
339
- { name: "_", color: e.value.style.chart.layout.donut.emptyFill, value: 1 }
340
- ] },
341
- f.value.width / 2,
342
- f.value.height / 2,
343
- o,
344
- o,
345
- 1.99999,
346
- 2,
347
- 1,
348
- 360,
349
- 105.25,
350
- Z.value
351
- );
352
- return {
353
- ...l,
354
- hasData: a,
355
- radius: o,
356
- skeleton: c,
357
- donut: _e(
358
- { series: u },
359
- f.value.width / 2,
360
- f.value.height / 2,
361
- o,
362
- o,
363
- 1.99999,
364
- 2,
365
- 1,
366
- 360,
367
- 105.25,
368
- Z.value
369
- )
370
- };
371
- })), Je = $(() => [...A.value].map((l, s) => {
372
- const a = s * I.value / A.value.length;
373
- return {
374
- sizeRatio: a,
375
- donut: _e(
376
- { series: [{ value: 1 }] },
377
- f.value.width / 2,
378
- f.value.height / 2,
379
- I.value - a,
380
- I.value - a,
381
- 1.99999,
382
- 2,
383
- 1,
384
- 360,
385
- 105.25,
386
- I.value / A.value.length * e.value.style.chart.layout.donut.spacingRatio
387
- )[0]
388
- };
389
- })), Ke = h(null), ee = h(null), te = h(null), fe = h(null);
390
- function Ot({ datapoint: l, _relativeIndex: s, seriesIndex: a }) {
391
- Ke.value = l.arcOfId, ee.value = l.id, te.value = a, fe.value = {
392
- datapoint: l,
393
- seriesIndex: a,
394
- series: b.value,
395
- config: e.value
396
- };
397
- const o = e.value.style.chart.tooltip.customFormat;
398
- if (it(o) && Qt(
399
- () => o({
400
- seriesIndex: a,
401
- datapoint: l,
402
- series: b.value,
403
- config: e.value
404
- })
405
- ))
406
- ie.value = o({
407
- seriesIndex: a,
408
- datapoint: l,
409
- series: b.value,
410
- config: e.value
411
- });
412
- else {
413
- let t = "";
414
- if (e.value.style.chart.tooltip.showAllItemsAtIndex && w.value.length === 0) {
415
- const u = b.value.map((c) => c.series.find((v) => v.seriesIndex === a));
416
- u.forEach((c, v) => {
417
- if (!c) return "";
418
- t += `
419
- <div style="display:flex; flex-direction: column; justify-content:flex-start; align-items:flex-start;padding:6px 0; ${v < u.length - 1 ? `border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor}` : ""}">
420
- <div style="display:flex; flex-direction: row; gap: 3px; justify-content:flex-start; align-items:center;">
421
- <svg viewBox="0 0 20 20" height="${e.value.style.chart.tooltip.fontSize}" width="${e.value.style.chart.tooltip.fontSize}">
422
- <circle cx="10" cy="10" r="10" fill="${c.color}"/>
423
- </svg>
424
- <span>
425
- ${c.arcOf ?? ""} - ${c.name}
426
- </span>
427
- </div>
428
- <span>
429
- ${e.value.style.chart.tooltip.showValue ? `<b>${K(
430
- e.value.style.chart.layout.labels.dataLabels.formatter,
431
- l.value,
432
- N({
433
- p: e.value.style.chart.layout.labels.dataLabels.prefix,
434
- v: l.value,
435
- s: e.value.style.chart.layout.labels.dataLabels.suffix,
436
- r: e.value.style.chart.tooltip.roundingValue
437
- }),
438
- { datapoint: l, seriesIndex: a }
439
- )}
440
- </b>` : ""}
441
- ${e.value.style.chart.tooltip.showPercentage ? `(${N({
442
- v: c.proportion * 100,
443
- s: "%",
444
- r: e.value.style.chart.tooltip.roundingPercentage
445
- })})` : ""}
446
- </span>
447
- </div>
448
- `;
449
- });
450
- } else
451
- t += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${l.arcOf ?? ""} - ${l.name}</div>`, t += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${l.color}"/></svg>`, e.value.style.chart.tooltip.showValue && (t += `<b>${K(
452
- e.value.style.chart.layout.labels.dataLabels.formatter,
453
- l.value,
454
- N({
455
- p: e.value.style.chart.layout.labels.dataLabels.prefix,
456
- v: l.value,
457
- s: e.value.style.chart.layout.labels.dataLabels.suffix,
458
- r: e.value.style.chart.tooltip.roundingValue
459
- }),
460
- { datapoint: l, seriesIndex: a }
461
- )}</b>`), e.value.style.chart.tooltip.showPercentage && (e.value.style.chart.tooltip.showValue ? t += `<span>(${N({
462
- v: l.proportion * 100,
463
- s: "%",
464
- r: e.value.style.chart.tooltip.roundingPercentage
465
- })})</span></div>` : t += `<b>${N({
466
- v: l.proportion * 100,
467
- s: "%",
468
- r: e.value.style.chart.tooltip.roundingPercentage
469
- })}</b></div>`);
470
- ie.value = `<div style="font-size:${e.value.style.chart.tooltip.fontSize}px">${t}</div>`;
471
- }
472
- re.value = !0;
473
- }
474
- function pe(l) {
475
- return l.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
476
- }
477
- function Qe(l, s) {
478
- if (!e.value.useBlurOnHover)
479
- return "";
480
- if (e.value.style.chart.tooltip.showAllItemsAtIndex && w.value.length === 0)
481
- return [null, void 0].includes(te.value) || te.value === s ? "" : `url(#blur_${y.value})`;
482
- if (!e.value.style.chart.tooltip.showAllItemsAtIndex || w.value.length)
483
- return [null, void 0].includes(ee.value) || ee.value === l.id ? "" : `url(#blur_${y.value})`;
484
- }
485
- const ye = $(() => A.value.map((l, s) => {
486
- const a = l.series.filter(
487
- (t) => !w.value.includes(t.id)
488
- ), o = z.value ? a.map((t) => {
489
- const u = C.dataset[s].series.findIndex(
490
- (c) => c.name === t.name
491
- );
492
- return D(
493
- C.dataset[s].series[u].values
494
- ).reduce((c, v) => c + v, 0);
495
- }).reduce((t, u) => t + u, 0) : a.map((t) => t.value).reduce((t, u) => t + u, 0);
496
- return l.series.map((t, u) => {
497
- const c = D(C.dataset[s].series[u].values).reduce(
498
- (O, d) => O + d,
499
- 0
500
- ), v = z.value ? c : t.value;
501
- return {
502
- name: t.name,
503
- color: t.color,
504
- value: v,
505
- shape: "circle",
506
- arcOf: t.arcOf,
507
- id: t.id,
508
- seriesIndex: u,
509
- datasetIndex: s,
510
- total: o,
511
- opacity: w.value.includes(t.id) ? 0.5 : 1,
512
- segregate: () => he(t),
513
- isSegregated: w.value.includes(t.id)
514
- };
515
- });
516
- })), At = $(() => ({
517
- cy: "nested-donuts-legend",
518
- backgroundColor: e.value.style.chart.legend.backgroundColor,
519
- color: e.value.style.chart.legend.color,
520
- fontSize: e.value.style.chart.legend.fontSize,
521
- paddingBottom: 12,
522
- fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
523
- })), P = $(() => {
524
- const l = b.value.flatMap((a) => a.series.map((o) => ({
525
- name: `${a.name} - ${o.name}`,
526
- color: o.color,
527
- total: a.total
528
- }))), s = b.value.flatMap((a) => a.series.map((o) => o.value));
529
- return { head: l, body: s };
530
- });
531
- function Ze(l = null) {
532
- ot(() => {
533
- const s = P.value.head.map((t, u) => [
534
- [t.name],
535
- [P.value.body[u]],
536
- [
537
- isNaN(P.value.body[u] / t.total) ? "-" : P.value.body[u] / t.total * 100
538
- ]
539
- ]), a = [
540
- [e.value.style.chart.title.text],
541
- [e.value.style.chart.title.subtitle.text],
542
- [[""], ["val"], ["%"]]
543
- ].concat(s), o = Jt(a);
544
- l ? l(o) : Kt({
545
- csvContent: o,
546
- title: e.value.style.chart.title.text || "vue-ui-nested-donuts"
547
- });
548
- });
549
- }
550
- const le = $(() => {
551
- const l = [
552
- e.value.table.columnNames.series,
553
- e.value.table.columnNames.value,
554
- e.value.table.columnNames.percentage
555
- ], s = P.value.head.map((t, u) => {
556
- const c = N({
557
- p: e.value.style.chart.layout.labels.dataLabels.prefix,
558
- v: P.value.body[u],
559
- s: e.value.style.chart.layout.labels.dataLabels.suffix,
560
- r: e.value.table.td.roundingValue
561
- });
562
- return [
563
- {
564
- color: t.color,
565
- name: t.name
566
- },
567
- c,
568
- isNaN(P.value.body[u] / t.total) ? "-" : N({
569
- v: P.value.body[u] / t.total * 100,
570
- s: "%",
571
- r: e.value.table.td.roundingPercentage
572
- })
573
- ];
574
- }), a = {
575
- th: {
576
- backgroundColor: e.value.table.th.backgroundColor,
577
- color: e.value.table.th.color,
578
- outline: e.value.table.th.outline
579
- },
580
- td: {
581
- backgroundColor: e.value.table.td.backgroundColor,
582
- color: e.value.table.td.color,
583
- outline: e.value.table.td.outline
584
- },
585
- breakpoint: e.value.table.responsiveBreakpoint
586
- };
587
- return {
588
- colNames: [
589
- e.value.table.columnNames.series,
590
- e.value.table.columnNames.value,
591
- e.value.table.columnNames.percentage
592
- ],
593
- head: l,
594
- body: s,
595
- config: a
596
- };
597
- });
598
- function It() {
599
- return A.value;
600
- }
601
- function je() {
602
- k.value.showTable = !k.value.showTable;
603
- }
604
- function et() {
605
- k.value.dataLabels.show = !k.value.dataLabels.show;
606
- }
607
- function tt() {
608
- k.value.showTooltip = !k.value.showTooltip;
609
- }
610
- const ae = h(!1);
611
- function be() {
612
- ae.value = !ae.value;
613
- }
614
- return ht({
615
- getData: It,
616
- generatePdf: Ge,
617
- generateCsv: Ze,
618
- generateImage: Ye,
619
- toggleTable: je,
620
- toggleLabels: et,
621
- toggleTooltip: tt,
622
- toggleAnnotator: be
623
- }), (l, s) => (n(), i("div", {
624
- ref_key: "nestedDonutsChart",
625
- ref: H,
626
- class: U(`vue-ui-nested-donuts ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
627
- style: ue(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
628
- id: `nested_donuts_${y.value}`,
629
- onMouseenter: s[3] || (s[3] = () => r(De)(!0)),
630
- onMouseleave: s[4] || (s[4] = () => r(De)(!1))
631
- }, [
632
- e.value.userOptions.buttons.annotator ? (n(), R(r(gt), {
633
- key: 0,
634
- svgRef: r(Me),
635
- backgroundColor: e.value.style.chart.backgroundColor,
636
- color: e.value.style.chart.color,
637
- active: ae.value,
638
- onClose: be
639
- }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
640
- _t.value ? (n(), i("div", {
641
- key: 1,
642
- ref_key: "noTitle",
643
- ref: Ie,
644
- class: "vue-data-ui-no-title-space",
645
- style: "height:36px; width: 100%;background:transparent"
646
- }, null, 512)) : m("", !0),
647
- e.value.style.chart.title.text ? (n(), i("div", {
648
- key: 2,
649
- ref_key: "chartTitle",
650
- ref: Oe
651
- }, [
652
- (n(), R(al, {
653
- key: `title_${Se.value}`,
654
- config: {
655
- title: {
656
- cy: "donut-div-title",
657
- ...e.value.style.chart.title
658
- },
659
- subtitle: {
660
- cy: "donut-div-subtitle",
661
- ...e.value.style.chart.title.subtitle
662
- }
663
- }
664
- }, null, 8, ["config"]))
665
- ], 512)) : m("", !0),
666
- e.value.userOptions.show && Q.value && (r(ze) || r(ce)) ? (n(), R(r(kt), {
667
- ref: "details",
668
- key: `user_option_${Ne.value}`,
669
- backgroundColor: e.value.style.chart.backgroundColor,
670
- color: e.value.style.chart.color,
671
- isPrinting: r(Re),
672
- isImaging: r(Be),
673
- uid: y.value,
674
- hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
675
- hasPdf: e.value.userOptions.buttons.pdf,
676
- hasXls: e.value.userOptions.buttons.csv,
677
- hasImg: e.value.userOptions.buttons.img,
678
- hasTable: e.value.userOptions.buttons.table,
679
- hasLabel: e.value.userOptions.buttons.labels,
680
- hasFullscreen: e.value.userOptions.buttons.fullscreen,
681
- isFullscreen: B.value,
682
- isTooltip: k.value.showTooltip,
683
- titles: { ...e.value.userOptions.buttonTitles },
684
- chartElement: H.value,
685
- position: e.value.userOptions.position,
686
- hasAnnotator: e.value.userOptions.buttons.annotator,
687
- isAnnotation: ae.value,
688
- callbacks: e.value.userOptions.callbacks,
689
- onToggleFullscreen: xt,
690
- onGeneratePdf: r(Ge),
691
- onGenerateCsv: Ze,
692
- onGenerateImage: r(Ye),
693
- onToggleTable: je,
694
- onToggleLabels: et,
695
- onToggleTooltip: tt,
696
- onToggleAnnotator: be,
697
- style: ue({
698
- visibility: r(ze) ? r(ce) ? "visible" : "hidden" : "visible"
699
- })
700
- }, Mt({ _: 2 }, [
701
- l.$slots.menuIcon ? {
702
- name: "menuIcon",
703
- fn: L(({ isOpen: a, color: o }) => [
704
- x(l.$slots, "menuIcon", Y(X({ isOpen: a, color: o })), void 0, !0)
705
- ]),
706
- key: "0"
707
- } : void 0,
708
- l.$slots.optionTooltip ? {
709
- name: "optionTooltip",
710
- fn: L(() => [
711
- x(l.$slots, "optionTooltip", {}, void 0, !0)
712
- ]),
713
- key: "1"
714
- } : void 0,
715
- l.$slots.optionPdf ? {
716
- name: "optionPdf",
717
- fn: L(() => [
718
- x(l.$slots, "optionPdf", {}, void 0, !0)
719
- ]),
720
- key: "2"
721
- } : void 0,
722
- l.$slots.optionCsv ? {
723
- name: "optionCsv",
724
- fn: L(() => [
725
- x(l.$slots, "optionCsv", {}, void 0, !0)
726
- ]),
727
- key: "3"
728
- } : void 0,
729
- l.$slots.optionImg ? {
730
- name: "optionImg",
731
- fn: L(() => [
732
- x(l.$slots, "optionImg", {}, void 0, !0)
733
- ]),
734
- key: "4"
735
- } : void 0,
736
- l.$slots.optionTable ? {
737
- name: "optionTable",
738
- fn: L(() => [
739
- x(l.$slots, "optionTable", {}, void 0, !0)
740
- ]),
741
- key: "5"
742
- } : void 0,
743
- l.$slots.optionLabels ? {
744
- name: "optionLabels",
745
- fn: L(() => [
746
- x(l.$slots, "optionLabels", {}, void 0, !0)
747
- ]),
748
- key: "6"
749
- } : void 0,
750
- l.$slots.optionFullscreen ? {
751
- name: "optionFullscreen",
752
- fn: L(({ toggleFullscreen: a, isFullscreen: o }) => [
753
- x(l.$slots, "optionFullscreen", Y(X({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
754
- ]),
755
- key: "7"
756
- } : void 0,
757
- l.$slots.optionAnnotator ? {
758
- name: "optionAnnotator",
759
- fn: L(({ toggleAnnotator: a, isAnnotator: o }) => [
760
- x(l.$slots, "optionAnnotator", Y(X({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
761
- ]),
762
- key: "8"
763
- } : void 0
764
- ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0),
765
- Q.value ? (n(), i("svg", {
766
- key: 4,
767
- ref_key: "svgRef",
768
- ref: Me,
769
- xmlns: r(Wt),
770
- class: U({
771
- "vue-data-ui-fullscreen--on": B.value,
772
- "vue-data-ui-fulscreen--off": !B.value
773
- }),
774
- viewBox: `0 0 ${f.value.width <= 0 ? 1e-3 : f.value.width} ${f.value.height < 0 ? 1e-3 : f.value.height}`,
775
- style: ue(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${Ue.value.css}`)
776
- }, [
777
- ut(r(bt)),
778
- l.$slots["chart-background"] ? (n(), i("foreignObject", {
779
- key: 0,
780
- x: 0,
781
- y: 0,
782
- width: f.value.width <= 0 ? 1e-3 : f.value.width,
783
- height: f.value.height < 0 ? 1e-3 : f.value.height,
784
- style: {
785
- pointerEvents: "none"
786
- }
787
- }, [
788
- x(l.$slots, "chart-background", {}, void 0, !0)
789
- ], 8, rl)) : m("", !0),
790
- g("defs", null, [
791
- (n(!0), i(T, null, F(Je.value, (a, o) => (n(), i("radialGradient", {
792
- id: `radial_${y.value}_${o}`
793
- }, [
794
- s[5] || (s[5] = g("stop", {
795
- offset: "0%",
796
- "stop-color": "#FFFFFF",
797
- "stop-opacity": "0"
798
- }, null, -1)),
799
- g("stop", {
800
- offset: `${(1 - Z.value / He.value[o]) * 100}%`,
801
- "stop-color": r(qt)("#FFFFFF", 0),
802
- "stop-opacity": "0"
803
- }, null, 8, dl),
804
- g("stop", {
805
- offset: `${(1 - Z.value / He.value[o] / 2) * 100}%`,
806
- "stop-color": "#FFFFFF",
807
- "stop-opacity": e.value.style.chart.gradientIntensity / 100
808
- }, null, 8, cl),
809
- s[6] || (s[6] = g("stop", {
810
- offset: "100%",
811
- "stop-color": "#FFFFFF",
812
- "stop-opacity": "0"
813
- }, null, -1))
814
- ], 8, il))), 256))
815
- ]),
816
- g("defs", null, [
817
- g("filter", {
818
- id: `blur_${y.value}`,
819
- x: "-50%",
820
- y: "-50%",
821
- width: "200%",
822
- height: "200%"
823
- }, [
824
- g("feGaussianBlur", {
825
- in: "SourceGraphic",
826
- stdDeviation: 2,
827
- id: `blur_std_${y.value}`
828
- }, null, 8, hl),
829
- s[7] || (s[7] = g("feColorMatrix", {
830
- type: "saturate",
831
- values: "0"
832
- }, null, -1))
833
- ], 8, vl),
834
- g("filter", {
835
- id: `shadow_${y.value}`,
836
- "color-interpolation-filters": "sRGB"
837
- }, [
838
- g("feDropShadow", {
839
- dx: "0",
840
- dy: "0",
841
- stdDeviation: "10",
842
- "flood-opacity": "0.5",
843
- "flood-color": e.value.style.chart.layout.donut.shadowColor
844
- }, null, 8, pl)
845
- ], 8, fl)
846
- ]),
847
- (n(!0), i(T, null, F(j.value, (a, o) => (n(), i("g", null, [
848
- a.hasData ? (n(!0), i(T, { key: 0 }, F(a.donut.filter((t) => !t.ghost), (t, u) => (n(), i("g", null, [
849
- g("path", {
850
- class: "vue-ui-donut-arc-path",
851
- d: t.arcSlice,
852
- fill: t.color,
853
- stroke: e.value.style.chart.backgroundColor,
854
- "stroke-width": e.value.style.chart.layout.donut.borderWidth,
855
- filter: Qe(t, u)
856
- }, null, 8, yl)
857
- ]))), 256)) : (n(!0), i(T, { key: 1 }, F(a.skeleton, (t, u) => (n(), i("g", null, [
858
- g("path", {
859
- class: "vue-ui-donut-arc-path",
860
- d: t.arcSlice,
861
- fill: t.color,
862
- stroke: e.value.style.chart.backgroundColor,
863
- "stroke-width": e.value.style.chart.layout.donut.borderWidth
864
- }, null, 8, bl)
865
- ]))), 256))
866
- ]))), 256)),
867
- e.value.style.chart.useGradient ? (n(), i("g", gl, [
868
- (n(!0), i(T, null, F(Je.value, (a, o) => (n(), i("g", null, [
869
- g("path", {
870
- d: a.donut.arcSlice,
871
- fill: `url(#radial_${y.value}_${o})`,
872
- stroke: "transparent",
873
- "stroke-width": "0"
874
- }, null, 8, ml)
875
- ]))), 256))
876
- ])) : m("", !0),
877
- e.value.style.chart.layout.labels.dataLabels.showDonutName ? (n(), i("g", wl, [
878
- (n(!0), i(T, null, F(j.value, (a, o) => (n(), i("g", null, [
879
- (n(!0), i(T, null, F(a.donut, (t, u) => (n(), i("g", null, [
880
- u === 0 && f.value.width && f.value.height ? (n(), i("text", {
881
- key: 0,
882
- class: U({ animated: e.value.useCssAnimation }),
883
- x: f.value.width / 2,
884
- y: t.startY - e.value.style.chart.layout.labels.dataLabels.fontSize + e.value.style.chart.layout.labels.dataLabels.donutNameOffsetY,
885
- "text-anchor": "middle",
886
- "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
887
- "font-weight": e.value.style.chart.layout.labels.dataLabels.boldDonutName ? "bold" : "normal",
888
- fill: e.value.style.chart.layout.labels.dataLabels.color
889
- }, S(e.value.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? r(Ht)({
890
- source: a.name,
891
- length: e.value.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize
892
- }) : a.name), 11, kl)) : m("", !0)
893
- ]))), 256))
894
- ]))), 256))
895
- ])) : m("", !0),
896
- e.value.style.chart.layout.labels.dataLabels.show ? (n(), i("g", $l, [
897
- (n(!0), i(T, null, F(j.value, (a, o) => (n(), i("g", null, [
898
- (n(!0), i(T, null, F(a.donut.filter((t) => !t.ghost), (t, u) => (n(), i("g", {
899
- filter: Qe(t, u)
900
- }, [
901
- nt(g("text", {
902
- class: U({ animated: e.value.useCssAnimation }),
903
- opacity: pe(t) ? 1 : 0,
904
- "text-anchor": r(q)(t, !0).anchor,
905
- x: r(q)(
906
- t,
907
- !1,
908
- e.value.style.chart.layout.labels.dataLabels.offsetX
909
- ).x || 0,
910
- y: r(Te)(
911
- t,
912
- e.value.style.chart.layout.labels.dataLabels.offsetY,
913
- e.value.style.chart.layout.labels.dataLabels.offsetY
914
- ),
915
- fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? t.color : e.value.style.chart.layout.labels.dataLabels.color,
916
- "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
917
- "font-weight": e.value.style.chart.layout.labels.dataLabels.boldPercentage ? "bold" : "normal"
918
- }, S(r(N)({
919
- v: t.proportion * 100,
920
- s: "%",
921
- r: e.value.style.chart.layout.labels.dataLabels.roundingPercentage
922
- })), 11, xl), [
923
- [
924
- rt,
925
- k.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage
926
- ]
927
- ]),
928
- nt(g("text", {
929
- class: U({ animated: e.value.useCssAnimation }),
930
- opacity: pe(t) ? 1 : 0,
931
- "text-anchor": r(q)(t, !0).anchor,
932
- x: r(q)(
933
- t,
934
- !1,
935
- e.value.style.chart.layout.labels.dataLabels.offsetX
936
- ).x || 0,
937
- y: r(Te)(
938
- t,
939
- e.value.style.chart.layout.labels.dataLabels.offsetY,
940
- e.value.style.chart.layout.labels.dataLabels.offsetY
941
- ) + e.value.style.chart.layout.labels.dataLabels.fontSize,
942
- fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? t.color : e.value.style.chart.layout.labels.dataLabels.color,
943
- "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
944
- "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
945
- }, " (" + S(r(K)(
946
- e.value.style.chart.layout.labels.dataLabels.formatter,
947
- t.value,
948
- r(N)({
949
- p: e.value.style.chart.layout.labels.dataLabels.prefix,
950
- v: t.value,
951
- s: e.value.style.chart.layout.labels.dataLabels.suffix,
952
- r: e.value.style.chart.layout.labels.dataLabels.roundingValue
953
- }),
954
- { datapoint: t, seriesIndex: o, datapointIndex: u }
955
- )) + ") ", 11, Cl), [
956
- [
957
- rt,
958
- k.value.dataLabels.show && e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue
959
- ]
960
- ]),
961
- pe(t) && k.value.dataLabels.show && !e.value.style.chart.layout.labels.dataLabels.showPercentage && e.value.style.chart.layout.labels.dataLabels.showValue ? (n(), i("text", {
962
- key: 0,
963
- class: U({ animated: e.value.useCssAnimation }),
964
- "text-anchor": r(q)(t, !0).anchor,
965
- x: r(q)(
966
- t,
967
- !1,
968
- e.value.style.chart.layout.labels.dataLabels.offsetX
969
- ).x || 0,
970
- y: r(Te)(
971
- t,
972
- e.value.style.chart.layout.labels.dataLabels.offsetY,
973
- e.value.style.chart.layout.labels.dataLabels.offsetY
974
- ),
975
- fill: e.value.style.chart.layout.labels.dataLabels.useSerieColor ? t.color : e.value.style.chart.layout.labels.dataLabels.color,
976
- "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
977
- "font-weight": e.value.style.chart.layout.labels.dataLabels.boldValue ? "bold" : "normal"
978
- }, S(r(K)(
979
- e.value.style.chart.layout.labels.dataLabels.formatter,
980
- t.value,
981
- r(N)({
982
- p: e.value.style.chart.layout.labels.dataLabels.prefix,
983
- v: t.value,
984
- s: e.value.style.chart.layout.labels.dataLabels.suffix,
985
- r: e.value.style.chart.layout.labels.dataLabels.roundingValue
986
- }),
987
- { datapoint: t, seriesIndex: o, datapointIndex: u }
988
- )), 11, _l)) : m("", !0)
989
- ], 8, Ll))), 256))
990
- ]))), 256))
991
- ])) : m("", !0),
992
- (n(!0), i(T, null, F(j.value, (a, o) => (n(), i("g", null, [
993
- (n(!0), i(T, null, F(a.donut, (t, u) => (n(), i("g", null, [
994
- g("path", {
995
- d: t.arcSlice,
996
- fill: Lt.value === o ? "rgba(0,0,0,0.1)" : "transparent",
997
- onMouseenter: (c) => Ot({
998
- datapoint: t,
999
- seriesIndex: t.seriesIndex
1000
- }),
1001
- onClick: (c) => Ft({ datapoint: t, index: u }),
1002
- onMouseleave: s[0] || (s[0] = (c) => {
1003
- re.value = !1, Ke.value = null, ee.value = null, te.value = null;
1004
- })
1005
- }, null, 40, Tl)
1006
- ]))), 256))
1007
- ]))), 256)),
1008
- x(l.$slots, "svg", { svg: f.value }, void 0, !0)
1009
- ], 14, nl)) : m("", !0),
1010
- l.$slots.watermark ? (n(), i("div", Fl, [
1011
- x(l.$slots, "watermark", Y(X({ isPrinting: r(Re) || r(Be) })), void 0, !0)
1012
- ])) : m("", !0),
1013
- Q.value ? m("", !0) : (n(), R(r(mt), {
1014
- key: 6,
1015
- config: {
1016
- type: "donut",
1017
- style: {
1018
- backgroundColor: e.value.style.chart.backgroundColor,
1019
- donut: {
1020
- color: "#CCCCCC"
1021
- }
1022
- }
1023
- }
1024
- }, null, 8, ["config"])),
1025
- ut(r(wt), {
1026
- show: k.value.showTooltip && re.value,
1027
- backgroundColor: e.value.style.chart.tooltip.backgroundColor,
1028
- color: e.value.style.chart.tooltip.color,
1029
- borderRadius: e.value.style.chart.tooltip.borderRadius,
1030
- borderColor: e.value.style.chart.tooltip.borderColor,
1031
- borderWidth: e.value.style.chart.tooltip.borderWidth,
1032
- fontSize: e.value.style.chart.tooltip.fontSize,
1033
- backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
1034
- position: e.value.style.chart.tooltip.position,
1035
- offsetY: e.value.style.chart.tooltip.offsetY,
1036
- parent: H.value,
1037
- content: ie.value,
1038
- isFullscreen: B.value,
1039
- isCustom: r(it)(e.value.style.chart.tooltip.customFormat)
1040
- }, {
1041
- "tooltip-before": L(() => [
1042
- x(l.$slots, "tooltip-before", Y(X({ ...fe.value })), void 0, !0)
1043
- ]),
1044
- "tooltip-after": L(() => [
1045
- x(l.$slots, "tooltip-after", Y(X({ ...fe.value })), void 0, !0)
1046
- ]),
1047
- _: 3
1048
- }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
1049
- e.value.style.chart.legend.show ? (n(), i("div", {
1050
- key: 7,
1051
- ref_key: "chartLegend",
1052
- ref: de,
1053
- class: U({ "vue-ui-nested-donuts-legend": ye.value.length > 1 })
1054
- }, [
1055
- (n(!0), i(T, null, F(ye.value, (a, o) => (n(), R(ol, {
1056
- key: `legend_${o}_${Pe.value}`,
1057
- legendSet: a,
1058
- config: At.value,
1059
- onClickMarker: s[1] || (s[1] = ({ legend: t }) => he(t))
1060
- }, {
1061
- legendTitle: L(({ titleSet: t }) => [
1062
- t[0] && t[0].arcOf ? (n(), i("div", Nl, S(t[0].arcOf), 1)) : m("", !0)
1063
- ]),
1064
- item: L(({ legend: t, index: u }) => [
1065
- g("div", {
1066
- onClick: (c) => he(t),
1067
- style: ue(`opacity:${w.value.includes(t.id) ? 0.5 : 1}`)
1068
- }, [
1069
- ne(S(t.name) + ": " + S(r(K)(
1070
- e.value.style.chart.layout.labels.dataLabels.formatter,
1071
- t.value,
1072
- r(N)({
1073
- p: e.value.style.chart.layout.labels.dataLabels.prefix,
1074
- v: t.value,
1075
- s: e.value.style.chart.layout.labels.dataLabels.suffix,
1076
- r: e.value.style.chart.legend.roundingValue
1077
- }),
1078
- { datapoint: t, seriesIndex: u }
1079
- )) + " ", 1),
1080
- w.value.includes(t.id) ? (n(), i(T, { key: 1 }, [
1081
- ne(" ( - % ) ")
1082
- ], 64)) : (n(), i(T, { key: 0 }, [
1083
- ne(" (" + S(isNaN(t.value / t.total) ? "-" : r(N)({
1084
- v: t.value / t.total * 100,
1085
- s: "%",
1086
- r: e.value.style.chart.legend.roundingPercentage
1087
- })) + ") ", 1)
1088
- ], 64))
1089
- ], 12, Ol)
1090
- ]),
1091
- _: 2
1092
- }, 1032, ["legendSet", "config"]))), 128))
1093
- ], 2)) : m("", !0),
1094
- e.value.style.chart.legend.show ? m("", !0) : (n(), i("div", {
1095
- key: 8,
1096
- ref_key: "chartLegend",
1097
- ref: de
1098
- }, [
1099
- x(l.$slots, "legend", { legend: ye.value }, void 0, !0)
1100
- ], 512)),
1101
- l.$slots.source ? (n(), i("div", {
1102
- key: 9,
1103
- ref_key: "source",
1104
- ref: Ae,
1105
- dir: "auto"
1106
- }, [
1107
- x(l.$slots, "source", {}, void 0, !0)
1108
- ], 512)) : m("", !0),
1109
- Q.value ? (n(), R(r(pt), {
1110
- key: 10,
1111
- hideDetails: "",
1112
- config: {
1113
- open: k.value.showTable,
1114
- maxHeight: 1e4,
1115
- body: {
1116
- backgroundColor: e.value.style.chart.backgroundColor,
1117
- color: e.value.style.chart.color
1118
- },
1119
- head: {
1120
- backgroundColor: e.value.style.chart.backgroundColor,
1121
- color: e.value.style.chart.color
1122
- }
1123
- }
1124
- }, {
1125
- content: L(() => [
1126
- (n(), R(r(yt), {
1127
- key: `table_${Ve.value}`,
1128
- colNames: le.value.colNames,
1129
- head: le.value.head,
1130
- body: le.value.body,
1131
- config: le.value.config,
1132
- title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
1133
- onClose: s[2] || (s[2] = (a) => k.value.showTable = !1)
1134
- }, {
1135
- th: L(({ th: a }) => [
1136
- g("div", {
1137
- innerHTML: a,
1138
- style: { display: "flex", "align-items": "center" }
1139
- }, null, 8, Al)
1140
- ]),
1141
- td: L(({ td: a }) => [
1142
- ne(S(a.name || a), 1)
1143
- ]),
1144
- _: 1
1145
- }, 8, ["colNames", "head", "body", "config", "title"]))
1146
- ]),
1147
- _: 1
1148
- }, 8, ["config"])) : m("", !0)
1149
- ], 46, ul));
1150
- }
1151
- }, Gl = /* @__PURE__ */ sl(Il, [["__scopeId", "data-v-0b97ffd5"]]);
1152
- export {
1153
- Gl as default
1154
- };