vue-data-ui 3.5.0 → 3.5.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 (144) hide show
  1. package/README.md +26 -0
  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-Cyx_s25h.js → PackageVersion-Y7t79Jtq.js} +1 -1
  5. package/dist/PenAndPaper-SZQIAgkg.js +388 -0
  6. package/dist/{Title-l36lOBMx.js → Title-BzH_LEA3.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-CReNavA0.js} +23 -9
  73. package/dist/{vue-data-ui-DxgRqCAo.js → vue-data-ui-BRaq4hRp.js} +63 -63
  74. package/dist/vue-data-ui.js +64 -64
  75. package/dist/{vue-ui-3d-bar-DmNJp8SY.js → vue-ui-3d-bar-BB4ii8Nt.js} +454 -434
  76. package/dist/{vue-ui-accordion-CZ0thhxa.js → vue-ui-accordion-BmFTVF1a.js} +1 -1
  77. package/dist/{vue-ui-age-pyramid-CPAP3sNY.js → vue-ui-age-pyramid-8bUepd28.js} +180 -160
  78. package/dist/{vue-ui-annotator-BylDgUVb.js → vue-ui-annotator-CcpaXBNK.js} +3 -3
  79. package/dist/{vue-ui-bullet-Ce6uvCQJ.js → vue-ui-bullet-BvT4scFv.js} +190 -170
  80. package/dist/{vue-ui-candlestick-DewevWV_.js → vue-ui-candlestick-CMP7UL6z.js} +201 -181
  81. package/dist/{vue-ui-carousel-table-Dv1CDfE5.js → vue-ui-carousel-table-CzOcKsDj.js} +2 -2
  82. package/dist/{vue-ui-chestnut-D9sdFZ4E.js → vue-ui-chestnut-S787oASt.js} +375 -355
  83. package/dist/vue-ui-chord-Dl9Y4mcz.js +1153 -0
  84. package/dist/{vue-ui-circle-pack-Be74QB_0.js → vue-ui-circle-pack-CU09BzOV.js} +289 -269
  85. package/dist/{vue-ui-cursor-ik59bfC4.js → vue-ui-cursor-C3yD_TUr.js} +1 -1
  86. package/dist/vue-ui-dashboard-BfEcVRxQ.js +432 -0
  87. package/dist/{vue-ui-digits-ByNNcWXi.js → vue-ui-digits-pRh179Gg.js} +1 -1
  88. package/dist/{vue-ui-donut-BRGFcgxS.js → vue-ui-donut-B_tEm4dT.js} +462 -442
  89. package/dist/{vue-ui-donut-evolution-DJ0C-7jH.js → vue-ui-donut-evolution-DiGhMwMO.js} +293 -273
  90. package/dist/{vue-ui-dumbbell-iQJ0BUhm.js → vue-ui-dumbbell-BlF3CLbN.js} +210 -190
  91. package/dist/{vue-ui-flow-CTYFoib3.js → vue-ui-flow-BQi5L8mJ.js} +339 -319
  92. package/dist/{vue-ui-funnel-CG55Xcdy.js → vue-ui-funnel-CM_6Sare.js} +218 -198
  93. package/dist/{vue-ui-galaxy-BQrxjKZJ.js → vue-ui-galaxy-BnZA62Li.js} +201 -181
  94. package/dist/{vue-ui-gauge-Tc-0NI0Y.js → vue-ui-gauge-DAk72bez.js} +311 -291
  95. package/dist/{vue-ui-gizmo-P8h-gnLd.js → vue-ui-gizmo-BQzQlUJ8.js} +2 -2
  96. package/dist/{vue-ui-heatmap-BZimPzsL.js → vue-ui-heatmap-C9MhHWpp.js} +303 -283
  97. package/dist/{vue-ui-history-plot-BVzbuqYY.js → vue-ui-history-plot-BYQh3E8U.js} +229 -209
  98. package/dist/{vue-ui-kpi-BGGff8LM.js → vue-ui-kpi-jcrPjW4C.js} +2 -2
  99. package/dist/{vue-ui-mini-loader-CSF-7TJL.js → vue-ui-mini-loader-DTM98mRN.js} +1 -1
  100. package/dist/{vue-ui-molecule-BALqwB8c.js → vue-ui-molecule-Bd1OXvl3.js} +156 -136
  101. package/dist/{vue-ui-mood-radar-QJ5nlZby.js → vue-ui-mood-radar-DuoiTsYn.js} +266 -246
  102. package/dist/{vue-ui-nested-donuts-CmUabkkQ.js → vue-ui-nested-donuts-BTswQFjz.js} +506 -486
  103. package/dist/{vue-ui-onion-DAOCf3f8.js → vue-ui-onion-D-1U2Qgl.js} +220 -200
  104. package/dist/{vue-ui-parallel-coordinate-plot-D8jTuFjq.js → vue-ui-parallel-coordinate-plot-D-7VFHas.js} +235 -215
  105. package/dist/{vue-ui-quadrant-CO52mSRY.js → vue-ui-quadrant-CeM23s0z.js} +463 -443
  106. package/dist/{vue-ui-quick-chart-DEaVSldE.js → vue-ui-quick-chart-C0RMQzjC.js} +288 -268
  107. package/dist/{vue-ui-radar-C5V4hhbW.js → vue-ui-radar-BSfxyur3.js} +331 -311
  108. package/dist/{vue-ui-rating-CiMoFM_c.js → vue-ui-rating-tj97undO.js} +1 -1
  109. package/dist/{vue-ui-relation-circle-CbMM0Jka.js → vue-ui-relation-circle-C7uV2mIj.js} +228 -208
  110. package/dist/{vue-ui-ridgeline-CXCIRDq6.js → vue-ui-ridgeline-CYMfTlwI.js} +242 -222
  111. package/dist/{vue-ui-rings-BpUcyqo7.js → vue-ui-rings-C96aj57d.js} +189 -169
  112. package/dist/{vue-ui-scatter--Dxe-hfO.js → vue-ui-scatter-CtvOXUnx.js} +275 -255
  113. package/dist/{vue-ui-skeleton-BWq-VDzg.js → vue-ui-skeleton-87TORm6s.js} +2 -2
  114. package/dist/{vue-ui-smiley-sGFRbn31.js → vue-ui-smiley-B74geHT3.js} +1 -1
  115. package/dist/{vue-ui-spark-trend-T4J_YOa_.js → vue-ui-spark-trend-6_Ibziyv.js} +2 -2
  116. package/dist/{vue-ui-sparkbar-DnKP55Vu.js → vue-ui-sparkbar-BDCocMLI.js} +2 -2
  117. package/dist/{vue-ui-sparkgauge-BDQLP-zi.js → vue-ui-sparkgauge-CQ4Zk9-f.js} +2 -2
  118. package/dist/{vue-ui-sparkhistogram-Dm7QXrA-.js → vue-ui-sparkhistogram-BlTV9wfn.js} +143 -140
  119. package/dist/{vue-ui-sparkline-tXGDLHRy.js → vue-ui-sparkline-DWESyiqL.js} +2 -2
  120. package/dist/{vue-ui-sparkstackbar-M53Nt07M.js → vue-ui-sparkstackbar-DK_7X8mL.js} +2 -2
  121. package/dist/vue-ui-stackbar-BWuw8ff4.js +1827 -0
  122. package/dist/{vue-ui-strip-plot-BX9i3wMn.js → vue-ui-strip-plot-C1N2n39d.js} +245 -225
  123. package/dist/{vue-ui-table-7r02N9R9.js → vue-ui-table-CcuoPHgI.js} +3 -3
  124. package/dist/{vue-ui-table-heatmap-BqCEBoUf.js → vue-ui-table-heatmap-C9EMEM3Z.js} +1 -1
  125. package/dist/{vue-ui-table-sparkline-DZaAh10E.js → vue-ui-table-sparkline-BAxmZRff.js} +2 -2
  126. package/dist/vue-ui-thermometer-CDrM-WFq.js +584 -0
  127. package/dist/{vue-ui-timer-Ds-MJoW2.js → vue-ui-timer-BVsUQJz_.js} +3 -3
  128. package/dist/vue-ui-tiremarks-BQH2pNkG.js +450 -0
  129. package/dist/{vue-ui-treemap-BEvl8hiw.js → vue-ui-treemap-6WLoCHsH.js} +453 -433
  130. package/dist/{vue-ui-vertical-bar-D8dtM8sw.js → vue-ui-vertical-bar-B3gfBqD_.js} +323 -303
  131. package/dist/{vue-ui-waffle-B3q-2SCR.js → vue-ui-waffle-Bhlqo4xM.js} +219 -199
  132. package/dist/vue-ui-wheel-CqHw1WuW.js +663 -0
  133. package/dist/{vue-ui-word-cloud-ChT7uLbN.js → vue-ui-word-cloud-CKuWZGLv.js} +248 -228
  134. package/dist/{vue-ui-world-CdP4g_3_.js → vue-ui-world-C8KVyDim.js} +287 -267
  135. package/dist/{vue-ui-xy-B68qQ-gX.js → vue-ui-xy-Cz2qIEfi.js} +389 -369
  136. package/dist/{vue-ui-xy-canvas-DDngEA1s.js → vue-ui-xy-canvas-y4h7gEFp.js} +4 -4
  137. package/package.json +4 -4
  138. package/dist/PenAndPaper-DSvu9dwa.js +0 -373
  139. package/dist/vue-ui-chord-BG4dxKNA.js +0 -1133
  140. package/dist/vue-ui-dashboard-C4BLwHey.js +0 -412
  141. package/dist/vue-ui-stackbar-CkBOjryQ.js +0 -1724
  142. package/dist/vue-ui-thermometer-CFPt3MOv.js +0 -564
  143. package/dist/vue-ui-tiremarks-2eIQ6vxu.js +0 -430
  144. package/dist/vue-ui-wheel-BpirIgAG.js +0 -643
@@ -1,1133 +0,0 @@
1
- import { useCssVars as ea, defineAsyncComponent as W, ref as v, shallowRef as ut, toRefs as ta, watch as Ae, computed as p, onMounted as it, onBeforeUnmount as ct, createElementBlock as i, openBlock as r, unref as d, normalizeStyle as R, normalizeClass as F, createBlock as V, createCommentVNode as h, renderSlot as $, createElementVNode as I, createSlots as Ie, withCtx as C, normalizeProps as de, guardReactiveProps as he, withModifiers as vt, createVNode as fe, Fragment as z, renderList as q, mergeProps as dt, toDisplayString as H, Teleport as aa, resolveDynamicComponent as oa, createTextVNode as ht, nextTick as ft } from "vue";
2
- import { c as _e, t as la, b as na, p as ge, o as sa, f as gt, g as ra, e as ua, h as ia, X as ca, J as va, d as Pe, $ as da, al as ha, P as fa, Q as ga, a as ba } from "./lib-C_mNZmhD.js";
3
- import { t as pa, u as ma } from "./useResponsive-DfdjqQps.js";
4
- import { u as ya, a as bt } from "./useNestedProp-BjZe1Y85.js";
5
- import { u as ka, B as $a } from "./BaseScanner-BgWxam9d.js";
6
- import { u as wa } from "./usePrinter-DTzqpYKF.js";
7
- import { u as Ca } from "./useSvgExport-DrjCWun4.js";
8
- import { u as Ma } from "./useUserOptionState-BIvW1Kz7.js";
9
- import { u as xa } from "./useChartAccessibility-9icAAmYg.js";
10
- import Aa from "./img-BecE5qXd.js";
11
- import { _ as Ia } from "./Shape-CNXKB8O0.js";
12
- import _a from "./Title-l36lOBMx.js";
13
- import { t as Pa } from "./themes-AUNCOb2G.js";
14
- import Sa from "./Legend-G6GMcdAc.js";
15
- import { _ as Ta } from "./_plugin-vue_export-helper-CHgC5LLL.js";
16
- const Ba = ["id"], Oa = ["id"], La = ["xmlns", "viewBox"], Da = ["width", "height"], Ea = { key: 1 }, Na = ["id", "d"], Ra = { key: 2 }, Fa = ["transform"], za = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Ua = ["d", "fill", "stroke", "stroke-width"], Xa = ["d", "fill"], Va = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick", "onMouseleave"], ja = ["d", "fill", "stroke", "stroke-width"], Ga = ["d", "fill", "stroke", "stroke-width"], Ya = ["d", "fill", "stroke", "stroke-width"], Wa = { key: 0 }, qa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ha = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Qa = ["cx", "cy", "r", "stroke", "stroke-width", "fill"], Za = ["transform", "fill", "text-anchor", "font-size", "font-weight"], Ja = { key: 1 }, Ka = ["font-size", "font-weight", "fill"], eo = ["href"], to = ["transform", "text-anchor", "font-size", "font-weight", "fill", "innerHTML"], ao = {
17
- key: 4,
18
- class: "vue-data-ui-watermark"
19
- }, oo = ["id"], lo = ["onClick"], no = {
20
- key: 7,
21
- "data-dom-to-png-ignore": "",
22
- class: "reset-wrapper"
23
- }, so = { style: { "text-align": "right", width: "100%" } }, ro = {
24
- __name: "vue-ui-chord",
25
- props: {
26
- dataset: {
27
- type: Object,
28
- default() {
29
- return {};
30
- }
31
- },
32
- config: {
33
- type: Object,
34
- default() {
35
- return {};
36
- }
37
- }
38
- },
39
- emits: ["selectLegend", "selectGroup", "selectRibbon"],
40
- setup(pt, { expose: mt, emit: yt }) {
41
- ea((t) => ({
42
- v0b699be6: t.slicerColor
43
- }));
44
- const kt = W(() => import("./vue-ui-accordion-CZ0thhxa.js")), Se = W(() => import("./BaseIcon-BmMbm4d0.js")), $t = W(() => import("./DataTable-BT7VF2ua.js")), wt = W(() => import("./PackageVersion-Cyx_s25h.js")), Ct = W(() => import("./PenAndPaper-DSvu9dwa.js")), Mt = W(() => import("./UserOptions-CGnQt6Fd.js")), xt = W(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_chord: At } = ya(), B = pt, ne = yt, E = v(!!B.dataset && Object.hasOwn(B.dataset, "matrix")), w = v(_e()), M = v(null), m = v(null), g = v(null), Te = v(0), O = v(null), Be = v(null), Oe = v(null), Le = v(null), De = v(null), be = v(0), pe = v(0), me = v(0), Q = v(!1), U = ut(null), Z = ut(null), Ee = v(!1), K = v(null), ye = v(null), e = v($e()), { loading: Ne, FINAL_DATASET: x, manualLoading: ee } = ka({
45
- ...ta(B),
46
- FINAL_CONFIG: e,
47
- prepareConfig: $e,
48
- callback: () => {
49
- Promise.resolve().then(async () => {
50
- await ft(), j.value.showTable = e.value.table.show;
51
- });
52
- },
53
- skeletonDataset: {
54
- matrix: [
55
- [12e3, 6e3, 9e3, 3e3],
56
- [2e3, 1e4, 2e3, 6001],
57
- [8e3, 1600, 8e3, 8001],
58
- [1e3, 1e3, 1e3, 7001]
59
- ],
60
- labels: [],
61
- colors: ["#DBDBDB", "#C4C4C4", "#ADADAD", "#969696"]
62
- },
63
- skeletonConfig: la({
64
- defaultConfig: e.value,
65
- userConfig: {
66
- useCssAnimation: !1,
67
- userOptions: { show: !1 },
68
- table: { show: !1 },
69
- style: {
70
- chart: {
71
- backgroundColor: "#99999930",
72
- legend: {
73
- backgroundColor: "transparent"
74
- },
75
- arcs: {
76
- stroke: "#6A6A6A",
77
- labels: {
78
- show: !1
79
- }
80
- },
81
- ribbons: {
82
- stroke: "#6A6A6A",
83
- underlayerOpacity: 0,
84
- labels: {
85
- show: !1
86
- }
87
- }
88
- }
89
- }
90
- }
91
- })
92
- }), { userOptionsVisible: ke, setUserOptionsVisibility: Re, keepUserOptionState: Fe } = Ma({ config: e.value }), { svgRef: J } = xa({ config: e.value.style.chart.title }), { isPrinting: ze, isImaging: Ue, generatePdf: Xe, generateImage: Ve } = wa({
93
- elementId: `chord_${w.value}`,
94
- fileName: e.value.style.chart.title.text || "vue-ui-chord",
95
- options: e.value.userOptions.print
96
- }), j = v({
97
- showTable: e.value.table.show
98
- });
99
- function $e() {
100
- const t = bt({
101
- userConfig: B.config,
102
- defaultConfig: At
103
- });
104
- return t.theme ? {
105
- ...bt({
106
- userConfig: Pa.vue_ui_chord[t.theme] || B.config,
107
- defaultConfig: t
108
- }),
109
- customPalette: na[t.theme] || ge
110
- } : t;
111
- }
112
- Ae(() => B.config, (t) => {
113
- Ne.value || (e.value = $e()), ke.value = !e.value.userOptions.showOnChartHover, we(), be.value += 1, pe.value += 1, me.value += 1, _.value = e.value.initialRotation, j.value.showTable = e.value.table.show;
114
- }, { deep: !0 });
115
- const je = p(() => e.value.debug);
116
- Ae(() => B.dataset, () => {
117
- Ge(), we(), be.value += 1, pe.value += 1, me.value += 1;
118
- });
119
- function Ge() {
120
- if (sa(B.dataset)) {
121
- gt({
122
- componentName: "VueUiChord",
123
- type: "dataset",
124
- debug: je.value
125
- }), E.value = !1, ee.value = !0;
126
- return;
127
- }
128
- const t = ra({
129
- datasetObject: B.dataset,
130
- requiredAttributes: ["matrix"]
131
- });
132
- if (t.length) {
133
- t.forEach((s) => {
134
- gt({
135
- componentName: "VueUiChord",
136
- type: "datasetAttribute",
137
- property: s,
138
- debug: je.value
139
- });
140
- }), E.value = !1, ee.value = !0;
141
- return;
142
- }
143
- const o = B.dataset.matrix;
144
- if (!Array.isArray(o) || o.length < 2) {
145
- console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
146
-
147
- matrix:[
148
- [1, 1],
149
- [1, 1]
150
- ]`), E.value = !1, ee.value = !0;
151
- return;
152
- }
153
- const a = o.length, l = o.findIndex((s) => !Array.isArray(s) || s.length !== a);
154
- if (l !== -1) {
155
- console.warn(
156
- `VueUiChord - Invalid matrix: dataset.matrix at index ${l} has ${Array.isArray(o[l]) ? o[l].length : "NaN"} elements instead of the required ${a}
157
-
158
- dataset.matrix[${l}] = [${Array.isArray(o[l]) ? o[l].toString() : "invalid"}]`
159
- ), E.value = !1, ee.value = !0;
160
- return;
161
- }
162
- E.value = !0, ee.value = !1;
163
- }
164
- function we() {
165
- if (Ge(), e.value.responsive) {
166
- const t = pa(() => {
167
- const { width: o, height: a, heightNoTitle: l, heightSource: s, heightTitle: n, heightLegend: u } = ma({
168
- chart: O.value,
169
- title: e.value.style.chart.title.text ? Be.value : null,
170
- legend: e.value.style.chart.legend.show ? Oe.value : null,
171
- source: Le.value,
172
- noTitle: De.value
173
- }), f = n + u + s + l;
174
- o < a ? O.value.style.width = "100%" : (O.value.style.height = "100%", J.value.style.height = `calc(100% - ${f}px)`);
175
- }, 100);
176
- U.value && (Z.value && U.value.unobserve(Z.value), U.value.disconnect()), U.value = new ResizeObserver(t), Z.value = O.value.parentNode, U.value.observe(Z.value), t();
177
- }
178
- Ye.value = setTimeout(() => {
179
- Q.value = !0;
180
- }, 500);
181
- }
182
- function It() {
183
- if (!x.value || !Object.hasOwn(x.value, "matrix") || x.value.matrix.length < 2) {
184
- console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
185
-
186
- matrix:[
187
- [1, 1],
188
- [1, 1]
189
- ]`), E.value = !1;
190
- return;
191
- }
192
- x.value.matrix.forEach((t, o) => {
193
- t.length !== x.value.matrix.length && (console.warn(`VueUiChord - Invalid matrix: dataset.matrix at index ${o} has ${t.length} elements instead of the required ${x.value.matrix.length}
194
-
195
- dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should have the same length as the matrix itself (${x.value.matrix.length})`), E.value = !1);
196
- });
197
- }
198
- const Ye = v(null);
199
- it(() => {
200
- Ee.value = !0, we();
201
- });
202
- const L = v({
203
- height: 600,
204
- width: 600
205
- }), _t = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Pt = p(() => ua(e.value.customPalette)), b = p(() => ({
206
- inner: L.value.width * 0.3 * e.value.style.chart.arcs.innerRadiusRatio,
207
- outer: L.value.width * 0.34 * e.value.style.chart.arcs.outerRadiusRatio
208
- })), St = p(() => e.value.style.chart.arcs.padAngle / 100), y = p(() => ({
209
- matrix: x.value.matrix ?? [[0]],
210
- labels: x.value.labels ?? [""],
211
- colors: x.value.colors && Array.isArray(x.value.colors) && x.value.colors.length ? x.value.colors.map((t) => ia(t)) : x.value.matrix.map((t, o) => Pt.value[o] || ge[o] || ge[o % ge.length])
212
- }));
213
- function Tt(t, o) {
214
- const a = t.length, l = b.value.inner, s = new Array(a).fill(0);
215
- let n = 0;
216
- for (let c = 0; c < a; c += 1)
217
- for (let k = 0; k < a; k += 1)
218
- s[c] += t[c][k], n += t[c][k];
219
- const u = (2 * Math.PI - o * a) / n, f = [];
220
- let P = 0;
221
- for (let c = 0; c < a; c += 1) {
222
- const k = P, T = k + s[c] * u;
223
- f.push({
224
- index: c,
225
- pattern: `pattern_${w.value}_${c}`,
226
- startAngle: k,
227
- endAngle: T,
228
- name: y.value.labels[c],
229
- id: _e(),
230
- color: y.value.colors[c],
231
- proportion: s[c] / n
232
- }), P = T + o;
233
- }
234
- const S = [];
235
- for (let c = 0; c < a; c += 1) {
236
- const k = t[c].map((D, X) => ({ j: X, v: D }));
237
- k.sort((D, X) => X.v - D.v);
238
- let T = f[c].startAngle;
239
- for (const { j: D, v: X } of k) {
240
- const Y = T, le = Y + X * u;
241
- S.push({
242
- index: c,
243
- subIndex: D,
244
- pattern: `pattern_${w.value}_${c}`,
245
- startAngle: Y,
246
- endAngle: le,
247
- value: X,
248
- groupName: y.value.labels[c],
249
- groupId: f[c].id,
250
- groupColor: y.value.colors[c],
251
- midAngle: (Y + le) / 2,
252
- midBaseX: Math.cos((Y + le) / 2 - Math.PI / 2) * l,
253
- midBaseY: Math.sin((Y + le) / 2 - Math.PI / 2) * l
254
- }), T = le;
255
- }
256
- }
257
- const N = [];
258
- for (const c of S) {
259
- const k = S.find(
260
- (T) => T.index === c.subIndex && T.subIndex === c.index
261
- );
262
- N.push({ source: c, target: k, id: _e() });
263
- }
264
- return { groups: f, chords: N };
265
- }
266
- const A = p(() => {
267
- const t = Tt(y.value.matrix, St.value);
268
- return It(), t.chords.sort(
269
- (o, a) => Math.max(a.source.value, a.target.value) - Math.max(o.source.value, o.target.value)
270
- ), t;
271
- }), Bt = p(() => {
272
- const t = b.value.outer + e.value.style.chart.ribbons.labels.offset + 12, a = e.value.style.chart.ribbons.labels.fontSize * 0.6, l = [];
273
- if (m.value) {
274
- const n = m.value;
275
- if (n.source.value) {
276
- const u = String(n.source.value);
277
- l.push({
278
- id: n.id + "-src",
279
- theta: n.source.midAngle,
280
- w: u.length * a / t,
281
- midBaseX: n.source.midBaseX,
282
- midBaseY: n.source.midBaseY,
283
- groupColor: n.source.groupColor,
284
- value: n.source.value
285
- });
286
- }
287
- if (n.target && n.target.value && n.target.value !== n.source.value) {
288
- const u = String(n.target.value);
289
- l.push({
290
- id: n.id + "-tgt",
291
- theta: n.target.midAngle,
292
- w: u.length * a / t,
293
- midBaseX: n.target.midBaseX,
294
- midBaseY: n.target.midBaseY,
295
- groupColor: n.target.groupColor,
296
- value: n.target.value
297
- });
298
- }
299
- return l;
300
- }
301
- function s(n) {
302
- A.value.chords.filter((u) => u.source.groupId === n && u.source.value).forEach((u) => {
303
- {
304
- const f = String(u.source.value);
305
- l.push({
306
- id: u.id + "-src",
307
- theta: u.source.midAngle,
308
- w: f.length * a / t,
309
- midBaseX: u.source.midBaseX,
310
- midBaseY: u.source.midBaseY,
311
- groupColor: u.source.groupColor,
312
- value: u.source.value
313
- });
314
- }
315
- if (u.target && u.target.value && u.target.value !== u.source.value) {
316
- const f = String(u.target.value);
317
- l.push({
318
- id: u.id + "-tgt",
319
- theta: u.target.midAngle,
320
- w: f.length * a / t,
321
- midBaseX: u.target.midBaseX,
322
- midBaseY: u.target.midBaseY,
323
- groupColor: u.target.groupColor,
324
- value: u.target.value
325
- });
326
- }
327
- });
328
- }
329
- return g.value && s(g.value), M.value && s(M.value.id), l;
330
- }), Ot = p(() => {
331
- const t = Bt.value.map((s) => ({ ...s })).sort((s, n) => s.theta - n.theta), o = e.value.style.chart.ribbons.labels.minSeparationDeg * Math.PI / 180;
332
- let a = !0, l = 0;
333
- for (; a && l++ < 10; ) {
334
- a = !1;
335
- for (let f = 1; f < t.length; f += 1) {
336
- const P = t[f - 1], S = t[f], N = P.theta + P.w + o;
337
- S.theta < N && (S.theta = N, a = !0);
338
- }
339
- const s = t[0], n = t[t.length - 1], u = n.theta + n.w + o - 2 * Math.PI;
340
- s.theta < u && (s.theta = u, a = !0);
341
- }
342
- return t;
343
- });
344
- function We(t, o, a, l) {
345
- const s = t - Math.PI / 2, n = o - Math.PI / 2, u = Math.cos(s) * a, f = Math.sin(s) * a, P = Math.cos(n) * a, S = Math.sin(n) * a, N = Math.cos(n) * l, c = Math.sin(n) * l, k = Math.cos(s) * l, T = Math.sin(s) * l, D = o - t > Math.PI ? 1 : 0;
346
- return `M${u},${f} A${a},${a} 0 ${D} 1 ${P},${S} L${N},${c} A${l},${l} 0 ${D} 0 ${k},${T} Z`;
347
- }
348
- function se(t, o) {
349
- const a = b.value.inner, l = t.startAngle - Math.PI / 2, s = t.endAngle - Math.PI / 2, n = o.startAngle - Math.PI / 2, u = o.endAngle - Math.PI / 2, f = Math.cos(l) * a, P = Math.sin(l) * a, S = Math.cos(s) * a, N = Math.sin(s) * a, c = Math.cos(n) * a, k = Math.sin(n) * a, T = Math.cos(u) * a, D = Math.sin(u) * a, X = t.endAngle - t.startAngle > Math.PI ? 1 : 0, Y = o.endAngle - o.startAngle > Math.PI ? 1 : 0;
350
- return `M${f},${P}A${a},${a} 0 ${X} 1 ${S},${N}Q0,0 ${c},${k}A${a},${a} 0 ${Y} 1 ${T},${D}Q0,0 ${f},${P}Z`;
351
- }
352
- const qe = p(() => _.value * Math.PI / 180);
353
- function Lt(t) {
354
- return (t.startAngle + t.endAngle) / 2;
355
- }
356
- function Dt(t) {
357
- return ((Lt(t) + qe.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
358
- }
359
- function Et(t) {
360
- let o = t + qe.value;
361
- return o = (o % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), o > Math.PI ? "end" : "start";
362
- }
363
- function Nt(t) {
364
- const o = t - Math.PI / 2, a = Math.cos(o) * (b.value.outer + e.value.style.chart.arcs.labels.offset + 24), l = Math.sin(o) * (b.value.outer + e.value.style.chart.arcs.labels.offset + 24);
365
- return `translate(${a},${l})`;
366
- }
367
- function Rt(t, o, a) {
368
- const l = t - Math.PI / 2, s = o - Math.PI / 2, n = Math.cos(l) * a, u = Math.sin(l) * a, f = Math.cos(s) * a, P = Math.sin(s) * a, S = o - t > Math.PI ? 1 : 0;
369
- return `M${n},${u} A${a},${a} 0 ${S} 1 ${f},${P}`;
370
- }
371
- const _ = v(e.value.initialRotation), te = v(!1);
372
- let He = 0, Qe = 0;
373
- function Ze(t) {
374
- const o = J.value.getBoundingClientRect(), a = o.left + o.width / 2, l = o.top + o.height / 2, s = t.clientX ?? t.touches[0].clientX, n = t.clientY ?? t.touches[0].clientY;
375
- return Math.atan2(n - l, s - a);
376
- }
377
- function Je(t) {
378
- !e.value.enableRotation || ae.value || (t.preventDefault(), te.value = !0, He = _.value, Qe = Ze(t));
379
- }
380
- function re(t) {
381
- if (!te.value) return;
382
- const o = Ze(t);
383
- _.value = He + (o - Qe) * 180 / Math.PI;
384
- }
385
- function ue() {
386
- te.value = !1;
387
- }
388
- function Ke(t) {
389
- return ba(
390
- e.value.style.chart.ribbons.labels.formatter,
391
- t,
392
- Pe({
393
- p: e.value.style.chart.ribbons.labels.prefix,
394
- v: t,
395
- s: e.value.style.chart.ribbons.labels.suffix,
396
- r: e.value.style.chart.ribbons.labels.rounding
397
- })
398
- );
399
- }
400
- it(() => {
401
- window.addEventListener("mousemove", re), window.addEventListener("mouseup", ue), window.addEventListener("touchmove", re, { passive: !1 }), window.addEventListener("touchend", ue);
402
- }), ct(() => {
403
- window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", ue), window.removeEventListener("touchmove", re), window.removeEventListener("touchend", ue), clearTimeout(Ye.value), U.value && (Z.value && U.value.unobserve(Z.value), U.value.disconnect());
404
- });
405
- const ie = v(!1);
406
- function et(t) {
407
- ie.value = t, Te.value += 1;
408
- }
409
- function Ft(t, o) {
410
- e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (M.value = t);
411
- }
412
- function zt(t, o) {
413
- M.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
414
- }
415
- function Ut(t, o) {
416
- ne("selectGroup", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
417
- }
418
- function Xt(t, o) {
419
- e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (m.value = t);
420
- }
421
- function Vt(t, o) {
422
- m.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
423
- }
424
- function jt(t, o) {
425
- ne("selectRibbon", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
426
- }
427
- function tt(t) {
428
- return !g.value && !M.value && !m.value ? 0.8 : (g.value ? g.value === t.source.groupId : M.value ? M.value.id === t.source.groupId : m.value?.id === t.id) ? 1 : 0.1;
429
- }
430
- function at(t) {
431
- return !g.value && !M.value && !m.value || (g.value ? g.value === t.id : M.value ? M.value.id === t.id : [m.value?.source.groupId, m.value?.target.groupId].includes(t.id)) ? 1 : 0.3;
432
- }
433
- const ae = v(!1);
434
- function Ce() {
435
- ae.value = !ae.value;
436
- }
437
- function ot() {
438
- j.value.showTable = !j.value.showTable;
439
- }
440
- function Gt() {
441
- return A.value;
442
- }
443
- const G = v(null);
444
- function lt() {
445
- const t = e.value.initialRotation;
446
- G.value !== null && cancelAnimationFrame(G.value);
447
- const o = () => {
448
- _.value += (t - _.value) * 0.05, Math.abs(_.value - t) < 0.1 ? (_.value = t, G.value = null) : G.value = requestAnimationFrame(o);
449
- };
450
- G.value = requestAnimationFrame(o);
451
- }
452
- ct(() => {
453
- G.value !== null && cancelAnimationFrame(G.value);
454
- });
455
- function nt(t) {
456
- t === g.value ? (g.value = null, ne("selectLegend", null)) : (g.value = t, ne("selectLegend", A.value.groups.find((o) => o.id === t)));
457
- }
458
- const Me = p(() => A.value.groups.map((t, o) => ({
459
- name: t.name,
460
- color: t.color,
461
- shape: "circle",
462
- patternIndex: o,
463
- pattern: `pattern_${w.value}_${o}`,
464
- id: t.id,
465
- select: () => nt(t.id),
466
- opacity: g.value ? g.value === t.id ? 1 : 0.3 : 1
467
- }))), Yt = p(() => ({
468
- cy: "chord-div-legend",
469
- backgroundColor: e.value.style.chart.legend.backgroundColor,
470
- color: e.value.style.chart.legend.color,
471
- fontSize: e.value.style.chart.legend.fontSize,
472
- paddingBottom: 12,
473
- fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
474
- })), ce = p(() => {
475
- const t = A.value.groups.map((a, l) => ({
476
- name: a.name || l,
477
- color: a.color
478
- })), o = y.value.matrix;
479
- return { head: t, body: o };
480
- }), ve = p(() => {
481
- const t = [{ name: "", color: null }, ...ce.value.head], o = ce.value.body.map((s, n) => [
482
- ce.value.head[n],
483
- ...ce.value.body[n]
484
- ]), a = {
485
- th: {
486
- backgroundColor: e.value.table.th.backgroundColor,
487
- color: e.value.table.th.color,
488
- outline: e.value.table.th.outline
489
- },
490
- td: {
491
- backgroundColor: e.value.table.td.backgroundColor,
492
- color: e.value.table.td.color,
493
- outline: e.value.table.td.outline
494
- },
495
- breakpoint: e.value.table.responsiveBreakpoint
496
- };
497
- return {
498
- colNames: t,
499
- head: t,
500
- body: o,
501
- config: a
502
- };
503
- });
504
- function xe(t = null) {
505
- ft(() => {
506
- const o = y.value.matrix.map((s, n) => [
507
- [y.value.labels[n] || n],
508
- s
509
- ]), a = [
510
- [e.value.style.chart.title.text],
511
- [e.value.style.chart.title.subtitle.text],
512
- [
513
- [""],
514
- ...y.value.labels.map((s, n) => [s || n])
515
- ]
516
- ].concat(o), l = fa(a);
517
- t ? t(l) : ga({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-chord" });
518
- });
519
- }
520
- async function Wt({ scale: t = 2 } = {}) {
521
- if (!O.value) return;
522
- const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: s, base64: n } = await Aa({ domElement: O.value, base64: !0, img: !0, scale: t });
523
- return {
524
- imageUri: s,
525
- base64: n,
526
- title: e.value.style.chart.title.text,
527
- width: o,
528
- height: a,
529
- aspectRatio: l
530
- };
531
- }
532
- function qt(t, o) {
533
- return `${y.value.labels[o]}${e.value.style.chart.arcs.labels.showPercentage ? Pe({
534
- p: " (",
535
- v: isNaN(t.proportion) ? 0 : t.proportion * 100,
536
- s: "%)",
537
- r: e.value.style.chart.arcs.labels.roundingPercentage
538
- }) : ""}`;
539
- }
540
- const oe = p(() => {
541
- const t = e.value.table.useDialog && !e.value.table.show, o = j.value.showTable;
542
- return {
543
- component: t ? xt : kt,
544
- title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
545
- props: t ? {
546
- backgroundColor: e.value.table.th.backgroundColor,
547
- color: e.value.table.th.color,
548
- headerColor: e.value.table.th.color,
549
- headerBg: e.value.table.th.backgroundColor,
550
- isFullscreen: ie.value,
551
- fullscreenParent: O.value,
552
- forcedWidth: Math.min(800, window.innerWidth * 0.8)
553
- } : {
554
- hideDetails: !0,
555
- config: {
556
- open: o,
557
- maxHeight: 1e4,
558
- body: {
559
- backgroundColor: e.value.style.chart.backgroundColor,
560
- color: e.value.style.chart.color
561
- },
562
- head: {
563
- backgroundColor: e.value.style.chart.backgroundColor,
564
- color: e.value.style.chart.color
565
- }
566
- }
567
- }
568
- };
569
- });
570
- Ae(() => j.value.showTable, (t) => {
571
- e.value.table.show || (t && e.value.table.useDialog && K.value ? K.value.open() : "close" in K.value && K.value.close());
572
- });
573
- function st() {
574
- j.value.showTable = !1, ye.value && ye.value.setTableIconState(!1);
575
- }
576
- const Ht = p(() => e.value.style.chart.backgroundColor), Qt = p(() => e.value.style.chart.legend), Zt = p(() => e.value.style.chart.title), { exportSvg: Jt, getSvg: Kt } = Ca({
577
- svg: J,
578
- title: Zt,
579
- legend: Qt,
580
- legendItems: Me,
581
- backgroundColor: Ht
582
- });
583
- async function rt({ isCb: t }) {
584
- if (t) {
585
- const { blob: o, url: a, text: l, dataUrl: s } = await Kt();
586
- e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: s });
587
- } else
588
- Jt();
589
- }
590
- return mt({
591
- getData: Gt,
592
- getImage: Wt,
593
- generateCsv: xe,
594
- generateImage: Ve,
595
- generateSvg: rt,
596
- generatePdf: Xe,
597
- toggleAnnotator: Ce,
598
- toggleTable: ot,
599
- toggleFullscreen: et
600
- }), (t, o) => (r(), i("div", {
601
- ref_key: "chordChart",
602
- ref: O,
603
- class: F({
604
- "vue-data-ui-component": !0,
605
- "vue-ui-chord": !0,
606
- "vue-data-ui-wrapper-fullscreen": ie.value,
607
- "vue-data-ui-responsive": e.value.responsive
608
- }),
609
- style: R(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
610
- id: `chord_${w.value}`,
611
- onMouseenter: o[2] || (o[2] = () => d(Re)(!0)),
612
- onMouseleave: o[3] || (o[3] = () => d(Re)(!1))
613
- }, [
614
- e.value.userOptions.buttons.annotator && d(J) ? (r(), V(d(Ct), {
615
- key: 0,
616
- color: e.value.style.chart.color,
617
- backgroundColor: e.value.style.chart.backgroundColor,
618
- active: ae.value,
619
- svgRef: d(J),
620
- onClose: Ce
621
- }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : h("", !0),
622
- $(t.$slots, "userConfig", {}, void 0, !0),
623
- _t.value ? (r(), i("div", {
624
- key: 1,
625
- ref_key: "noTitle",
626
- ref: De,
627
- class: "vue-data-ui-no-title-space",
628
- style: "height:36px; width: 100%;background:transparent"
629
- }, null, 512)) : h("", !0),
630
- e.value.style.chart.title.text ? (r(), i("div", {
631
- key: 2,
632
- ref_key: "chartTitle",
633
- ref: Be,
634
- style: "width:100%;background:transparent;padding-bottom:24px"
635
- }, [
636
- (r(), V(_a, {
637
- key: `title_${be.value}`,
638
- config: {
639
- title: {
640
- cy: "chord-div-title",
641
- ...e.value.style.chart.title
642
- },
643
- subtitle: {
644
- cy: "chord-div-subtitle",
645
- ...e.value.style.chart.title.subtitle
646
- }
647
- }
648
- }, null, 8, ["config"]))
649
- ], 512)) : h("", !0),
650
- I("div", {
651
- id: `legend-top-${w.value}`
652
- }, null, 8, Oa),
653
- e.value.userOptions.show && E.value && (d(Fe) || d(ke)) ? (r(), V(d(Mt), {
654
- ref_key: "userOptionsRef",
655
- ref: ye,
656
- key: `user_option_${Te.value}`,
657
- backgroundColor: e.value.style.chart.backgroundColor,
658
- color: e.value.style.chart.color,
659
- isPrinting: d(ze),
660
- isImaging: d(Ue),
661
- uid: w.value,
662
- hasTooltip: !1,
663
- hasPdf: e.value.userOptions.buttons.pdf,
664
- hasImg: e.value.userOptions.buttons.img,
665
- hasSvg: e.value.userOptions.buttons.svg,
666
- hasXls: e.value.userOptions.buttons.csv,
667
- hasTable: e.value.userOptions.buttons.table,
668
- hasLabel: !1,
669
- hasFullscreen: e.value.userOptions.buttons.fullscreen,
670
- isFullscreen: ie.value,
671
- chartElement: O.value,
672
- position: e.value.userOptions.position,
673
- titles: { ...e.value.userOptions.buttonTitles },
674
- hasAnnotator: e.value.userOptions.buttons.annotator,
675
- isAnnotation: ae.value,
676
- callbacks: e.value.userOptions.callbacks,
677
- printScale: e.value.userOptions.print.scale,
678
- tableDialog: e.value.table.useDialog,
679
- onToggleFullscreen: et,
680
- onGeneratePdf: d(Xe),
681
- onGenerateCsv: xe,
682
- onGenerateImage: d(Ve),
683
- onGenerateSvg: rt,
684
- onToggleTable: ot,
685
- onToggleAnnotator: Ce,
686
- style: R({
687
- visibility: d(Fe) ? d(ke) ? "visible" : "hidden" : "visible"
688
- })
689
- }, Ie({ _: 2 }, [
690
- t.$slots.menuIcon ? {
691
- name: "menuIcon",
692
- fn: C(({ isOpen: a, color: l }) => [
693
- $(t.$slots, "menuIcon", de(he({ isOpen: a, color: l })), void 0, !0)
694
- ]),
695
- key: "0"
696
- } : void 0,
697
- t.$slots.optionPdf ? {
698
- name: "optionPdf",
699
- fn: C(() => [
700
- $(t.$slots, "optionPdf", {}, void 0, !0)
701
- ]),
702
- key: "1"
703
- } : void 0,
704
- t.$slots.optionCsv ? {
705
- name: "optionCsv",
706
- fn: C(() => [
707
- $(t.$slots, "optionCsv", {}, void 0, !0)
708
- ]),
709
- key: "2"
710
- } : void 0,
711
- t.$slots.optionImg ? {
712
- name: "optionImg",
713
- fn: C(() => [
714
- $(t.$slots, "optionImg", {}, void 0, !0)
715
- ]),
716
- key: "3"
717
- } : void 0,
718
- t.$slots.optionSvg ? {
719
- name: "optionSvg",
720
- fn: C(() => [
721
- $(t.$slots, "optionSvg", {}, void 0, !0)
722
- ]),
723
- key: "4"
724
- } : void 0,
725
- t.$slots.optionTable ? {
726
- name: "optionTable",
727
- fn: C(() => [
728
- $(t.$slots, "optionTable", {}, void 0, !0)
729
- ]),
730
- key: "5"
731
- } : void 0,
732
- t.$slots.optionFullscreen ? {
733
- name: "optionFullscreen",
734
- fn: C(({ toggleFullscreen: a, isFullscreen: l }) => [
735
- $(t.$slots, "optionFullscreen", de(he({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
736
- ]),
737
- key: "6"
738
- } : void 0,
739
- t.$slots.optionAnnotator ? {
740
- name: "optionAnnotator",
741
- fn: C(({ toggleAnnotator: a, isAnnotator: l }) => [
742
- $(t.$slots, "optionAnnotator", de(he({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
743
- ]),
744
- key: "7"
745
- } : void 0
746
- ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
747
- (r(), i("svg", {
748
- xmlns: d(ca),
749
- ref_key: "svgRef",
750
- ref: J,
751
- viewBox: `0 0 ${L.value.width} ${L.value.height}`,
752
- preserveAspectRatio: "xMidYMid meet",
753
- style: {
754
- overflow: "visible"
755
- },
756
- class: F({ "vue-ui-chord-rotating": te.value, "vue-ui-chord-idle": !te.value }),
757
- onMousedown: vt(Je, ["prevent"]),
758
- onTouchstart: vt(Je, ["prevent"])
759
- }, [
760
- fe(d(wt)),
761
- t.$slots["chart-background"] ? (r(), i("foreignObject", {
762
- key: 0,
763
- x: 0,
764
- y: 0,
765
- width: L.value.width <= 0 ? 10 : L.value.width,
766
- height: L.value.height <= 0 ? 10 : L.value.height,
767
- style: {
768
- pointerEvents: "none"
769
- }
770
- }, [
771
- $(t.$slots, "chart-background", {}, void 0, !0)
772
- ], 8, Da)) : h("", !0),
773
- e.value.style.chart.arcs.labels.curved ? (r(), i("defs", Ea, [
774
- (r(!0), i(z, null, q(A.value.groups, (a, l) => (r(), i("path", {
775
- key: `labelPath-${l}`,
776
- id: `labelPath-${l}_${w.value}`,
777
- d: Rt(
778
- a.startAngle,
779
- a.endAngle,
780
- (b.value.inner + b.value.outer) / 2 + e.value.style.chart.arcs.labels.offset
781
- ),
782
- fill: "none"
783
- }, null, 8, Na))), 128))
784
- ])) : h("", !0),
785
- t.$slots.pattern ? (r(), i("g", Ra, [
786
- (r(!0), i(z, null, q(A.value.groups, (a, l) => (r(), i("defs", null, [
787
- $(t.$slots, "pattern", dt({ ref_for: !0 }, { seriesIndex: a.index, patternId: `pattern_${w.value}_${l}` }), void 0, !0)
788
- ]))), 256))
789
- ])) : h("", !0),
790
- I("g", {
791
- transform: `translate(${L.value.width / 2}, ${L.value.height / 2}) rotate(${_.value})`
792
- }, [
793
- (r(!0), i(z, null, q(A.value.groups, (a, l) => (r(), i("g", null, [
794
- (r(), i("path", {
795
- class: F({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": e.value.useCssAnimation && !Q.value }),
796
- key: `arc-${l}`,
797
- d: We(
798
- a.startAngle,
799
- a.endAngle,
800
- b.value.outer,
801
- b.value.inner
802
- ),
803
- fill: y.value.colors[l],
804
- stroke: e.value.style.chart.arcs.stroke,
805
- "stroke-width": e.value.style.chart.arcs.strokeWidth,
806
- "stroke-linecap": "round",
807
- "stroke-linejoin": "round",
808
- style: R({
809
- opacity: at(a)
810
- }),
811
- onMouseenter: (s) => Ft(a, l),
812
- onMouseleave: (s) => zt(a, l),
813
- onClick: (s) => Ut(a, l)
814
- }, null, 46, za)),
815
- t.$slots.pattern ? (r(), i("path", {
816
- class: F({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": e.value.useCssAnimation && !Q.value }),
817
- key: `arc-${l}`,
818
- d: We(
819
- a.startAngle,
820
- a.endAngle,
821
- b.value.outer,
822
- b.value.inner
823
- ),
824
- fill: `url(#${a.pattern})`,
825
- stroke: e.value.style.chart.arcs.stroke,
826
- "stroke-width": e.value.style.chart.arcs.strokeWidth,
827
- "stroke-linecap": "round",
828
- "stroke-linejoin": "round",
829
- style: R({
830
- opacity: at(a),
831
- pointerEvents: "none"
832
- })
833
- }, null, 14, Ua)) : h("", !0)
834
- ]))), 256)),
835
- I("g", null, [
836
- (r(!0), i(z, null, q(M.value ? A.value.chords.filter((a) => a.source.groupId === M.value.id) : g.value ? A.value.chords.filter((a) => a.source.groupId === g.value) : A.value.chords, (a, l) => (r(), i(z, {
837
- key: `ribbon-${a.id}`
838
- }, [
839
- a.source.value ? (r(), i("path", {
840
- key: 0,
841
- class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
842
- d: se(a.source, a.target),
843
- fill: e.value.style.chart.backgroundColor,
844
- style: R({ opacity: e.value.style.chart.ribbons.underlayerOpacity })
845
- }, null, 14, Xa)) : h("", !0),
846
- a.source.value ? (r(), i("path", {
847
- key: 1,
848
- class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
849
- d: se(a.source, a.target),
850
- fill: y.value.colors[a.source.index],
851
- stroke: e.value.style.chart.ribbons.stroke,
852
- "stroke-width": e.value.style.chart.ribbons.strokeWidth,
853
- "stroke-linecap": "round",
854
- "stroke-linejoin": "round",
855
- style: R({ opacity: tt(a) }),
856
- onMouseenter: (s) => Xt({
857
- ...a,
858
- path: se(a.source, a.target),
859
- color: y.value.colors[a.source.index]
860
- }, l),
861
- onClick: (s) => jt({
862
- ...a,
863
- color: y.value.colors[a.source.index]
864
- }, l),
865
- onMouseleave: (s) => Vt({
866
- ...a,
867
- color: y.value.colors[a.source.index]
868
- }, l)
869
- }, null, 46, Va)) : h("", !0),
870
- a.source.value && t.$slots.pattern ? (r(), i("path", {
871
- key: 2,
872
- class: F({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
873
- d: se(a.source, a.target),
874
- fill: `url(#pattern_${w.value}_${a.source.index})`,
875
- stroke: e.value.style.chart.ribbons.stroke,
876
- "stroke-width": e.value.style.chart.ribbons.strokeWidth,
877
- "stroke-linecap": "round",
878
- "stroke-linejoin": "round",
879
- style: R({
880
- opacity: tt(a),
881
- pointerEvents: "none"
882
- })
883
- }, null, 14, ja)) : h("", !0)
884
- ], 64))), 128)),
885
- m.value ? (r(), i("path", {
886
- key: 0,
887
- d: m.value.path,
888
- fill: m.value.color,
889
- stroke: e.value.style.chart.ribbons.stroke,
890
- "stroke-width": e.value.style.chart.ribbons.strokeWidth,
891
- "stroke-linecap": "round",
892
- "stroke-linejoin": "round",
893
- class: F({ "vue-ui-chord-ribbon": !0 }),
894
- style: {
895
- pointerEvents: "none"
896
- }
897
- }, null, 8, Ga)) : h("", !0),
898
- m.value && t.$slots.pattern ? (r(), i("path", {
899
- key: 1,
900
- d: m.value.path,
901
- fill: `url(#${m.value.source.pattern})`,
902
- stroke: e.value.style.chart.ribbons.stroke,
903
- "stroke-width": e.value.style.chart.ribbons.strokeWidth,
904
- "stroke-linecap": "round",
905
- "stroke-linejoin": "round",
906
- class: F({ "vue-ui-chord-ribbon": !0 }),
907
- style: {
908
- pointerEvents: "none"
909
- }
910
- }, null, 8, Ya)) : h("", !0)
911
- ]),
912
- (M.value || m.value || g.value) && e.value.style.chart.ribbons.labels.show ? (r(), i("g", Wa, [
913
- (r(!0), i(z, null, q(Ot.value, (a) => (r(), i(z, {
914
- key: a.id
915
- }, [
916
- I("line", {
917
- x1: a.midBaseX,
918
- y1: a.midBaseY,
919
- x2: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
920
- y2: Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
921
- stroke: e.value.style.chart.backgroundColor,
922
- "stroke-width": e.value.style.chart.ribbons.labels.connector.strokeWidth * 3,
923
- "pointer-events": "none"
924
- }, null, 8, qa),
925
- I("line", {
926
- x1: a.midBaseX,
927
- y1: a.midBaseY,
928
- x2: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
929
- y2: Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
930
- stroke: e.value.style.chart.ribbons.labels.connector.stroke,
931
- "stroke-width": e.value.style.chart.ribbons.labels.connector.strokeWidth,
932
- "pointer-events": "none"
933
- }, null, 8, Ha),
934
- e.value.style.chart.ribbons.labels.marker.show ? (r(), i("circle", {
935
- key: 0,
936
- cx: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
937
- cy: Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
938
- r: e.value.style.chart.ribbons.labels.marker.radius,
939
- stroke: e.value.style.chart.ribbons.labels.marker.stroke,
940
- "stroke-width": e.value.style.chart.ribbons.labels.marker.strokeWidth,
941
- fill: a.groupColor,
942
- "pointer-events": "none"
943
- }, null, 8, Qa)) : h("", !0),
944
- I("text", {
945
- transform: `
946
- translate(
947
- ${Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 24)},
948
- ${Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 24)}
949
- ) rotate(${-_.value})
950
- `,
951
- fill: e.value.style.chart.ribbons.labels.useSerieColor ? a.groupColor : e.value.style.chart.ribbons.labels.color,
952
- "text-anchor": Et(a.theta),
953
- "font-size": e.value.style.chart.ribbons.labels.fontSize,
954
- "font-weight": e.value.style.chart.ribbons.labels.bold ? "bold" : "normal",
955
- dy: ".35em",
956
- "pointer-events": "none"
957
- }, H(Ke(a.value)), 9, Za)
958
- ], 64))), 128))
959
- ])) : h("", !0),
960
- e.value.style.chart.arcs.labels.show ? (r(), i("g", Ja, [
961
- e.value.style.chart.arcs.labels.curved ? (r(!0), i(z, { key: 0 }, q(A.value.groups, (a, l) => (r(), i("text", {
962
- class: "vue-ui-chord-label-curved",
963
- key: `curved-label-${l}`,
964
- "font-size": e.value.style.chart.arcs.labels.fontSize,
965
- "font-weight": e.value.style.chart.arcs.labels.bold ? "bold" : "normal",
966
- fill: e.value.style.chart.arcs.labels.adaptColorToBackground ? d(va)(y.value.colors[l]) : e.value.style.chart.arcs.labels.color
967
- }, [
968
- I("textPath", {
969
- href: `#labelPath-${l}_${w.value}`,
970
- startOffset: "50%",
971
- "text-anchor": "middle"
972
- }, H(y.value.labels[l]) + H(e.value.style.chart.arcs.labels.showPercentage ? d(Pe)({
973
- p: " (",
974
- v: isNaN(a.proportion) ? 0 : a.proportion * 100,
975
- s: "%)",
976
- r: e.value.style.chart.arcs.labels.roundingPercentage
977
- }) : ""), 9, eo)
978
- ], 8, Ka))), 128)) : !M.value && !m.value && !g.value ? (r(!0), i(z, { key: 1 }, q(A.value.groups, (a, l) => (r(), i("text", {
979
- class: "vue-ui-chord-label-straight",
980
- key: `label-${l}`,
981
- transform: `
982
- ${Nt((a.startAngle + a.endAngle) / 2)}
983
- rotate(${-_.value})
984
- `,
985
- dy: ".35em",
986
- "text-anchor": Dt(a) > Math.PI ? "end" : "start",
987
- "font-size": e.value.style.chart.arcs.labels.fontSize,
988
- "font-weight": e.value.style.chart.arcs.labels.bold ? "bold" : "normal",
989
- fill: e.value.style.chart.arcs.labels.color,
990
- innerHTML: d(da)({
991
- content: d(ha)(qt(a, l)),
992
- fontSize: e.value.style.chart.arcs.labels.fontSize,
993
- fill: e.value.style.chart.arcs.labels.color,
994
- x: 0,
995
- y: 0
996
- })
997
- }, null, 8, to))), 128)) : h("", !0)
998
- ])) : h("", !0)
999
- ], 8, Fa),
1000
- $(t.$slots, "svg", { svg: { height: 600, width: 600 } }, void 0, !0)
1001
- ], 42, La)),
1002
- t.$slots.watermark ? (r(), i("div", ao, [
1003
- $(t.$slots, "watermark", de(he({ isPrinting: d(ze) || d(Ue) })), void 0, !0)
1004
- ])) : h("", !0),
1005
- I("div", {
1006
- id: `legend-bottom-${w.value}`
1007
- }, null, 8, oo),
1008
- Ee.value ? (r(), V(aa, {
1009
- key: 5,
1010
- to: e.value.style.chart.legend.position === "top" ? `#legend-top-${w.value}` : `#legend-bottom-${w.value}`
1011
- }, [
1012
- I("div", {
1013
- ref_key: "chartLegend",
1014
- ref: Oe
1015
- }, [
1016
- e.value.style.chart.legend.show ? (r(), V(Sa, {
1017
- key: `legend_${me.value}`,
1018
- legendSet: Me.value,
1019
- config: Yt.value,
1020
- onClickMarker: o[0] || (o[0] = ({ legend: a }) => nt(a.id))
1021
- }, Ie({
1022
- item: C(({ legend: a }) => [
1023
- I("div", {
1024
- style: R({
1025
- opacity: g.value ? g.value === a.id ? 1 : 0.3 : 1
1026
- }),
1027
- onClick: (l) => a.select()
1028
- }, H(a.name), 13, lo)
1029
- ]),
1030
- _: 2
1031
- }, [
1032
- t.$slots.pattern ? {
1033
- name: "legend-pattern",
1034
- fn: C(({ legend: a, index: l }) => [
1035
- fe(Ia, {
1036
- shape: a.shape,
1037
- radius: 30,
1038
- stroke: "none",
1039
- plot: { x: 30, y: 30 },
1040
- fill: `url(#pattern_${w.value}_${l})`
1041
- }, null, 8, ["shape", "fill"])
1042
- ]),
1043
- key: "0"
1044
- } : void 0
1045
- ]), 1032, ["legendSet", "config"])) : h("", !0),
1046
- $(t.$slots, "legend", { legend: Me.value }, void 0, !0)
1047
- ], 512)
1048
- ], 8, ["to"])) : h("", !0),
1049
- t.$slots.source ? (r(), i("div", {
1050
- key: 6,
1051
- ref_key: "source",
1052
- ref: Le,
1053
- dir: "auto"
1054
- }, [
1055
- $(t.$slots, "source", {}, void 0, !0)
1056
- ], 512)) : h("", !0),
1057
- _.value !== e.value.initialRotation ? (r(), i("div", no, [
1058
- $(t.$slots, "reset-action", { reset: lt }, () => [
1059
- I("button", {
1060
- "data-cy-reset": "",
1061
- tabindex: "0",
1062
- role: "button",
1063
- class: "vue-data-ui-refresh-button",
1064
- style: R({
1065
- background: e.value.style.chart.backgroundColor
1066
- }),
1067
- onClick: lt
1068
- }, [
1069
- fe(d(Se), {
1070
- name: "refresh",
1071
- stroke: e.value.style.chart.color
1072
- }, null, 8, ["stroke"])
1073
- ], 4)
1074
- ], !0)
1075
- ])) : h("", !0),
1076
- E.value && e.value.userOptions.buttons.table ? (r(), V(oa(oe.value.component), dt({ key: 8 }, oe.value.props, {
1077
- ref_key: "tableUnit",
1078
- ref: K,
1079
- onClose: st
1080
- }), Ie({
1081
- content: C(() => [
1082
- (r(), V(d($t), {
1083
- key: `table_${pe.value}`,
1084
- colNames: ve.value.colNames,
1085
- head: ve.value.head,
1086
- body: ve.value.body,
1087
- config: ve.value.config,
1088
- title: e.value.table.useDialog ? "" : oe.value.title,
1089
- withCloseButton: !e.value.table.useDialog,
1090
- onClose: st
1091
- }, {
1092
- th: C(({ th: a }) => [
1093
- ht(H(a.name), 1)
1094
- ]),
1095
- td: C(({ td: a }) => [
1096
- I("div", so, H(a.name ? a.name : Ke(a)), 1)
1097
- ]),
1098
- _: 1
1099
- }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
1100
- ]),
1101
- _: 2
1102
- }, [
1103
- e.value.table.useDialog ? {
1104
- name: "title",
1105
- fn: C(() => [
1106
- ht(H(oe.value.title), 1)
1107
- ]),
1108
- key: "0"
1109
- } : void 0,
1110
- e.value.table.useDialog ? {
1111
- name: "actions",
1112
- fn: C(() => [
1113
- I("button", {
1114
- tabindex: "0",
1115
- class: "vue-ui-user-options-button",
1116
- onClick: o[1] || (o[1] = (a) => xe(e.value.userOptions.callbacks.csv))
1117
- }, [
1118
- fe(d(Se), {
1119
- name: "excel",
1120
- stroke: oe.value.props.color
1121
- }, null, 8, ["stroke"])
1122
- ])
1123
- ]),
1124
- key: "1"
1125
- } : void 0
1126
- ]), 1040)) : h("", !0),
1127
- d(Ne) ? (r(), V($a, { key: 9 })) : h("", !0)
1128
- ], 46, Ba));
1129
- }
1130
- }, Mo = /* @__PURE__ */ Ta(ro, [["__scopeId", "data-v-13f25e35"]]);
1131
- export {
1132
- Mo as default
1133
- };