vue-data-ui 3.23.9 → 3.23.11

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 (200) hide show
  1. package/README.md +40 -40
  2. package/dist/{Arrow-CF0VFcBH.js → Arrow-DrF4NNJO.js} +1 -1
  3. package/dist/{BaseDraggableDialog-LoqqwRtV.js → BaseDraggableDialog-Dr_Q6Yt5.js} +2 -2
  4. package/dist/{BaseIcon-BfndwIWE.js → BaseIcon-BbElSC8_.js} +1 -1
  5. package/dist/{BaseLegendToggle-DZVucLnv.js → BaseLegendToggle-CtEdLr4R.js} +1 -1
  6. package/dist/{BaseZoomControls-BZvCnZEi.js → BaseZoomControls-Cvq4UmNG.js} +2 -2
  7. package/dist/{ColorPicker--ayG2YHf.js → ColorPicker-ChOgAmCi.js} +2 -2
  8. package/dist/{DataTable-BbKgJ5UI.js → DataTable-CmyEubtT.js} +2 -2
  9. package/dist/{HillActions-BD9j_sOU.js → HillActions-3HneGJhS.js} +1 -1
  10. package/dist/{Legend-CQxUgOd-.js → Legend-BJtY2RA9.js} +2 -2
  11. package/dist/{NonSvgPenAndPaper-4ypecDg1.js → NonSvgPenAndPaper-DmxzHJtV.js} +3 -3
  12. package/dist/{PackageVersion-B629oKuX.js → PackageVersion-C0b7KAMa.js} +1 -1
  13. package/dist/{PenAndPaper-C0UZ74fa.js → PenAndPaper-CIa1F5Jq.js} +3 -3
  14. package/dist/{Shape-C21CMlWS.js → Shape-BAL5bQmA.js} +1 -1
  15. package/dist/{SlicerPreview-wUw1hFwe.js → SlicerPreview-BRRyc1p7.js} +426 -426
  16. package/dist/{SparkTooltip-CjsbIhzi.js → SparkTooltip-Bou05CV_.js} +1 -1
  17. package/dist/{Title-BE3qg9xl.js → Title-CaVA8EIw.js} +1 -1
  18. package/dist/{Tooltip-DhjyfHwz.js → Tooltip-CVxJe3UW.js} +1 -1
  19. package/dist/{UserOptions-Dt98of5H.js → UserOptions-WH7-49V0.js} +2 -2
  20. package/dist/components/arrow.js +1 -1
  21. package/dist/components/vue-ui-3d-bar.js +1 -1
  22. package/dist/components/vue-ui-accordion.js +1 -1
  23. package/dist/components/vue-ui-age-pyramid.js +1 -1
  24. package/dist/components/vue-ui-annotator.js +1 -1
  25. package/dist/components/vue-ui-bullet.js +1 -1
  26. package/dist/components/vue-ui-bump.js +1 -1
  27. package/dist/components/vue-ui-candlestick.js +1 -1
  28. package/dist/components/vue-ui-carousel-table.js +1 -1
  29. package/dist/components/vue-ui-chestnut.js +1 -1
  30. package/dist/components/vue-ui-chord.js +1 -1
  31. package/dist/components/vue-ui-circle-pack.js +1 -1
  32. package/dist/components/vue-ui-cursor.js +1 -1
  33. package/dist/components/vue-ui-dag.js +1 -1
  34. package/dist/components/vue-ui-dashboard.js +1 -1
  35. package/dist/components/vue-ui-digits.js +1 -1
  36. package/dist/components/vue-ui-donut-evolution.js +1 -1
  37. package/dist/components/vue-ui-donut.js +1 -1
  38. package/dist/components/vue-ui-dumbbell.js +1 -1
  39. package/dist/components/vue-ui-flow.js +1 -1
  40. package/dist/components/vue-ui-funnel.js +1 -1
  41. package/dist/components/vue-ui-galaxy.js +1 -1
  42. package/dist/components/vue-ui-gauge.js +1 -1
  43. package/dist/components/vue-ui-geo.js +1 -1
  44. package/dist/components/vue-ui-gizmo.js +1 -1
  45. package/dist/components/vue-ui-heatmap.js +1 -1
  46. package/dist/components/vue-ui-hill.js +1 -1
  47. package/dist/components/vue-ui-history-plot.js +1 -1
  48. package/dist/components/vue-ui-horizontal-bar.js +1 -1
  49. package/dist/components/vue-ui-icon.js +1 -1
  50. package/dist/components/vue-ui-kpi.js +1 -1
  51. package/dist/components/vue-ui-mini-loader.js +1 -1
  52. package/dist/components/vue-ui-molecule.js +1 -1
  53. package/dist/components/vue-ui-mood-radar.js +1 -1
  54. package/dist/components/vue-ui-nested-donuts.js +1 -1
  55. package/dist/components/vue-ui-onion.js +1 -1
  56. package/dist/components/vue-ui-parallel-coordinate-plot.js +1 -1
  57. package/dist/components/vue-ui-quadrant.js +1 -1
  58. package/dist/components/vue-ui-quick-chart.js +1 -1
  59. package/dist/components/vue-ui-radar.js +1 -1
  60. package/dist/components/vue-ui-rating.js +1 -1
  61. package/dist/components/vue-ui-relation-circle.js +1 -1
  62. package/dist/components/vue-ui-ridgeline.js +1 -1
  63. package/dist/components/vue-ui-rings.js +1 -1
  64. package/dist/components/vue-ui-scatter.js +1 -1
  65. package/dist/components/vue-ui-skeleton.js +1 -1
  66. package/dist/components/vue-ui-smiley.js +1 -1
  67. package/dist/components/vue-ui-spark-trend.js +1 -1
  68. package/dist/components/vue-ui-sparkbar.js +1 -1
  69. package/dist/components/vue-ui-sparkgauge.js +1 -1
  70. package/dist/components/vue-ui-sparkhistogram.js +1 -1
  71. package/dist/components/vue-ui-sparkline.js +1 -1
  72. package/dist/components/vue-ui-sparkstackbar.js +1 -1
  73. package/dist/components/vue-ui-stackbar.js +1 -1
  74. package/dist/components/vue-ui-stackline.js +1 -1
  75. package/dist/components/vue-ui-strip-plot.js +1 -1
  76. package/dist/components/vue-ui-table-heatmap.js +1 -1
  77. package/dist/components/vue-ui-table-sparkline.js +1 -1
  78. package/dist/components/vue-ui-table.js +1 -1
  79. package/dist/components/vue-ui-thermometer.js +1 -1
  80. package/dist/components/vue-ui-timer.js +1 -1
  81. package/dist/components/vue-ui-tiremarks.js +1 -1
  82. package/dist/components/vue-ui-treemap.js +1 -1
  83. package/dist/components/vue-ui-vertical-bar.js +1 -1
  84. package/dist/components/vue-ui-waffle.js +1 -1
  85. package/dist/components/vue-ui-wheel.js +1 -1
  86. package/dist/components/vue-ui-word-cloud.js +1 -1
  87. package/dist/components/vue-ui-world.js +1 -1
  88. package/dist/components/vue-ui-xy-canvas.js +1 -1
  89. package/dist/components/vue-ui-xy.js +1 -1
  90. package/dist/{dom-to-png-BYIvdTe8.js → dom-to-png-COvyU2SG.js} +1 -1
  91. package/dist/exposedLib-DrUEXSyf.js +28 -0
  92. package/dist/{img-Bnokohej.js → img-Bkzj3lDD.js} +1 -1
  93. package/dist/{labelUtils-BeVpDvTJ.js → labelUtils-iX76cA2-.js} +1 -1
  94. package/dist/{lib-Bttd6u5E.js → lib-Dqr_-I6Y.js} +166 -163
  95. package/dist/{package-C01DAl-Z.js → package-D7_0M69J.js} +1 -1
  96. package/dist/{pdf-CVIDfCrS.js → pdf-Bk_9lTdQ.js} +1 -1
  97. package/dist/{render-common-Dv5BvuwZ.js → render-common-B0f5NTO9.js} +12 -12
  98. package/dist/ssr/vue-ui-donut.js +1 -1
  99. package/dist/ssr/vue-ui-xy.js +1 -1
  100. package/dist/ssr.js +2 -2
  101. package/dist/style.css +1 -1
  102. package/dist/types/vue-data-ui.d.ts +13 -2
  103. package/dist/types/vue-ui-dag.d.ts +2 -0
  104. package/dist/{useNestedProp-vPNvh7rV.js → useNestedProp-CulPqtou.js} +1 -1
  105. package/dist/{usePrinter-DN5bYhTG.js → usePrinter-CEiH1b6R.js} +2 -2
  106. package/dist/utils.js +9 -9
  107. package/dist/{vue-data-ui-DDZLOx_v.js → vue-data-ui-BlZHZHoH.js} +69 -69
  108. package/dist/vue-data-ui.js +73 -73
  109. package/dist/{vue-ui-3d-bar-C9Y9Uklb.js → vue-ui-3d-bar-CtT2BovY.js} +379 -381
  110. package/dist/{vue-ui-accordion-CLU_su1P.js → vue-ui-accordion-C6L7glHU.js} +3 -3
  111. package/dist/{vue-ui-age-pyramid-D98P16h3.js → vue-ui-age-pyramid-BhGNgnLB.js} +27 -27
  112. package/dist/{vue-ui-annotator-QjHngrui.js → vue-ui-annotator-BwIu0JUV.js} +9 -9
  113. package/dist/vue-ui-bullet-BI7KJyJx.js +700 -0
  114. package/dist/{vue-ui-bump-BP7UOMFX.js → vue-ui-bump-BCQ97z1G.js} +325 -325
  115. package/dist/{vue-ui-candlestick-XPQeeduK.js → vue-ui-candlestick-Cs7I5MQS.js} +245 -245
  116. package/dist/{vue-ui-carousel-table-D39rMqRb.js → vue-ui-carousel-table-CDjAjc4b.js} +108 -108
  117. package/dist/{vue-ui-chestnut-B0xezYHS.js → vue-ui-chestnut-d6GxjfcP.js} +86 -86
  118. package/dist/vue-ui-chord-BuConnPN.js +1345 -0
  119. package/dist/vue-ui-circle-pack-CmxANHap.js +1633 -0
  120. package/dist/{vue-ui-cursor-JXCd2JAw.js → vue-ui-cursor-CQcnZYBv.js} +3 -3
  121. package/dist/{vue-ui-dag-D42c5rJN.js → vue-ui-dag-DKUZN-aQ.js} +923 -885
  122. package/dist/{vue-ui-dashboard-9-9eUWEy.js → vue-ui-dashboard-ciI4wMe6.js} +69 -69
  123. package/dist/{vue-ui-digits-CCkSVNpz.js → vue-ui-digits-DWf1vzYE.js} +3 -3
  124. package/dist/{vue-ui-donut-BnVCS9Ll.js → vue-ui-donut-CvCViwSI.js} +64 -64
  125. package/dist/vue-ui-donut-DZTtuFAG.js +2413 -0
  126. package/dist/{vue-ui-donut-evolution-CgjBE6EG.js → vue-ui-donut-evolution-BvZX3Gi8.js} +347 -347
  127. package/dist/{vue-ui-dumbbell-CVX2tGDU.js → vue-ui-dumbbell-BZywCpHd.js} +233 -236
  128. package/dist/vue-ui-flow-D5jcKr_S.js +1214 -0
  129. package/dist/vue-ui-funnel-7zX5QnQx.js +747 -0
  130. package/dist/{vue-ui-galaxy-CThLjvdQ.js → vue-ui-galaxy-BuGd-Ojm.js} +323 -325
  131. package/dist/vue-ui-gauge-BlDQIpBk.js +932 -0
  132. package/dist/{vue-ui-geo-DwNCnH_W.js → vue-ui-geo-PWGZw4Un.js} +34 -34
  133. package/dist/{vue-ui-gizmo-BkQUnPvN.js → vue-ui-gizmo-CTxB3PAl.js} +10 -10
  134. package/dist/{vue-ui-heatmap-COX6rafn.js → vue-ui-heatmap-sFF5IbM8.js} +472 -472
  135. package/dist/{vue-ui-hill-7BisXEYH.js → vue-ui-hill-DO3r2s-i.js} +10 -10
  136. package/dist/vue-ui-history-plot-Cj-Olvhn.js +1695 -0
  137. package/dist/vue-ui-horizontal-bar-B34aYuDZ.js +1708 -0
  138. package/dist/{vue-ui-kpi-R9bl7je_.js → vue-ui-kpi-Co6y1YlE.js} +3 -3
  139. package/dist/{vue-ui-mini-loader-SNMKnmMa.js → vue-ui-mini-loader-BVSIAFYi.js} +2 -2
  140. package/dist/{vue-ui-molecule-CNtY2_yF.js → vue-ui-molecule-ERAB4YzZ.js} +157 -163
  141. package/dist/{vue-ui-mood-radar-DUxhOQpR.js → vue-ui-mood-radar-BPp7L6OP.js} +302 -304
  142. package/dist/{vue-ui-nested-donuts-Bbub_wCe.js → vue-ui-nested-donuts-CX5ut2yp.js} +110 -113
  143. package/dist/vue-ui-onion-CWYJTUCq.js +1233 -0
  144. package/dist/vue-ui-parallel-coordinate-plot-DJrV-dVt.js +1430 -0
  145. package/dist/{vue-ui-quadrant-CFvonilu.js → vue-ui-quadrant-wj8Up03L.js} +32 -32
  146. package/dist/{vue-ui-quick-chart-iEJt6333.js → vue-ui-quick-chart-CPYdScHL.js} +153 -153
  147. package/dist/{vue-ui-radar-ClZ_OIr5.js → vue-ui-radar-D3gLQcI5.js} +41 -41
  148. package/dist/{vue-ui-rating-BnXrMeGg.js → vue-ui-rating-dBCk6ECe.js} +26 -26
  149. package/dist/vue-ui-relation-circle-DeNBOPjz.js +903 -0
  150. package/dist/vue-ui-ridgeline-DQcZJ_hv.js +1614 -0
  151. package/dist/vue-ui-rings-CF9NfFW2.js +1250 -0
  152. package/dist/vue-ui-scatter-U_xxKOte.js +2403 -0
  153. package/dist/{vue-ui-skeleton-Drk48XZi.js → vue-ui-skeleton-GA4wzjXV.js} +3 -3
  154. package/dist/{vue-ui-smiley-BQuXRW4o.js → vue-ui-smiley-D1pW2Fdy.js} +23 -23
  155. package/dist/{vue-ui-spark-trend-CYcS6-FN.js → vue-ui-spark-trend-BXRGMn5-.js} +23 -23
  156. package/dist/{vue-ui-sparkbar-eqLrT50j.js → vue-ui-sparkbar-96D0eR-o.js} +24 -24
  157. package/dist/{vue-ui-sparkgauge-C_b1h4DY.js → vue-ui-sparkgauge-BWBek2u2.js} +61 -61
  158. package/dist/{vue-ui-sparkhistogram-BzJr83-i.js → vue-ui-sparkhistogram-Cqs068RX.js} +15 -15
  159. package/dist/vue-ui-sparkline-B8cyY_P1.js +1584 -0
  160. package/dist/{vue-ui-sparkstackbar-O6Ojc2m8.js → vue-ui-sparkstackbar-C0BkLc2b.js} +207 -207
  161. package/dist/vue-ui-stackbar-DtsOc7B_.js +2332 -0
  162. package/dist/{vue-ui-stackline-D7d_Yqid.js → vue-ui-stackline-MSs0pdhE.js} +751 -747
  163. package/dist/{vue-ui-strip-plot-AljSBqsw.js → vue-ui-strip-plot-Df-TomML.js} +63 -66
  164. package/dist/vue-ui-table-BKSRQGVK.js +1352 -0
  165. package/dist/{vue-ui-table-heatmap-DRABMw2H.js → vue-ui-table-heatmap-CglQqfWH.js} +84 -84
  166. package/dist/{vue-ui-table-sparkline-OScDr7Z5.js → vue-ui-table-sparkline-B7Dh-fN2.js} +11 -11
  167. package/dist/vue-ui-thermometer-DXuLn8NC.js +756 -0
  168. package/dist/{vue-ui-timer--q-f8RPJ.js → vue-ui-timer-orCjVwS4.js} +12 -12
  169. package/dist/{vue-ui-tiremarks-B2Fji5g0.js → vue-ui-tiremarks-DNoQ6Fl2.js} +12 -12
  170. package/dist/{vue-ui-treemap-CHqCU3Mt.js → vue-ui-treemap-90_Clj0e.js} +51 -54
  171. package/dist/vue-ui-waffle-BSQXyJ1S.js +1610 -0
  172. package/dist/{vue-ui-wheel-Dz2QzZcJ.js → vue-ui-wheel-CfU0Nnn0.js} +28 -28
  173. package/dist/{vue-ui-word-cloud-DBp8kZ4A.js → vue-ui-word-cloud-AgMvmPlI.js} +38 -41
  174. package/dist/{vue-ui-world-DbYSOiC4.js → vue-ui-world-D0Z9B6M2.js} +120 -123
  175. package/dist/{vue-ui-xy-C23skZ-G.js → vue-ui-xy-5Te2TfRK.js} +1645 -1641
  176. package/dist/vue-ui-xy-canvas-BHpBO5dS.js +1823 -0
  177. package/dist/{vue-ui-xy-CrHCmWhv.js → vue-ui-xy-ua_mFu_a.js} +99 -99
  178. package/package.json +1 -1
  179. package/dist/exposedLib-C0DPCgFj.js +0 -28
  180. package/dist/vue-ui-bullet-GgRg9sbN.js +0 -700
  181. package/dist/vue-ui-chord-eOIKOfDO.js +0 -1345
  182. package/dist/vue-ui-circle-pack-kCN1R-pw.js +0 -1636
  183. package/dist/vue-ui-donut-HrEXYDqO.js +0 -2415
  184. package/dist/vue-ui-flow-R-fW_EeT.js +0 -1217
  185. package/dist/vue-ui-funnel-CT3ixpCM.js +0 -750
  186. package/dist/vue-ui-gauge-DRXsVxYq.js +0 -932
  187. package/dist/vue-ui-history-plot-Bn_M0AFg.js +0 -1698
  188. package/dist/vue-ui-horizontal-bar-CkRRidx3.js +0 -1708
  189. package/dist/vue-ui-onion-Bix9MN3w.js +0 -1233
  190. package/dist/vue-ui-parallel-coordinate-plot-6SI2vJOo.js +0 -1430
  191. package/dist/vue-ui-relation-circle-CZ68uWhc.js +0 -903
  192. package/dist/vue-ui-ridgeline-BSiPLA08.js +0 -1614
  193. package/dist/vue-ui-rings-mGN_bpo1.js +0 -1252
  194. package/dist/vue-ui-scatter-C0PouRMY.js +0 -2403
  195. package/dist/vue-ui-sparkline-CyJKVGYw.js +0 -1584
  196. package/dist/vue-ui-stackbar-J5QzbBaA.js +0 -2328
  197. package/dist/vue-ui-table-CBdCPS2r.js +0 -1352
  198. package/dist/vue-ui-thermometer-DWmM_Hn9.js +0 -756
  199. package/dist/vue-ui-waffle-C1ksX6OD.js +0 -1612
  200. package/dist/vue-ui-xy-canvas-B-KxaFGF.js +0 -1819
@@ -1,1819 +0,0 @@
1
- import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
2
- import { $ as t, Bt as n, D as r, Et as i, Jt as a, Kt as o, Ot as s, Pt as c, Rt as l, S as u, X as d, _ as ee, ct as te, dt as ne, i as re, jt as ie, o as ae, q as oe, tt as se, vt as ce, w as le, xt as ue } from "./lib-Bttd6u5E.js";
3
- import { n as de, t as fe } from "./useHints-Dq_w2E8B.js";
4
- import { n as pe, r as me, t as he } from "./useTimeLabels-d2f-W1L4.js";
5
- import { t as ge } from "./useConfig-DwdGsXTx.js";
6
- import { t as _e } from "./usePrinter-DN5bYhTG.js";
7
- import { n as ve, t as ye } from "./BaseScanner-DZvpgOjM.js";
8
- import { t as be } from "./useNestedProp-vPNvh7rV.js";
9
- import { t as xe } from "./useThemeCheck-C43Tcqmk.js";
10
- import { t as Se } from "./img-Bnokohej.js";
11
- import { n as Ce } from "./Title-BE3qg9xl.js";
12
- import { t as we } from "./_plugin-vue_export-helper-B3ysoDQm.js";
13
- import { a as f, c as p, i as Te, l as Ee, n as De, o as Oe, r as ke, s as Ae, t as je } from "./useResponsive-ZtArZtUf.js";
14
- import { t as Me } from "./BaseIcon-BfndwIWE.js";
15
- import { t as Ne } from "./SlicerPreview-wUw1hFwe.js";
16
- import { t as Pe } from "./vue-ui-accordion-CLU_su1P.js";
17
- import { t as Fe } from "./BaseLegendToggle-DZVucLnv.js";
18
- import { t as Ie } from "./useUserOptionState-DK-_1ddE.js";
19
- import { t as Le } from "./useChartAccessibility-DYqac8yF.js";
20
- import { t as Re } from "./Legend-CQxUgOd-.js";
21
- import { t as ze } from "./vue_ui_xy_canvas-Cb6dg3eK.js";
22
- import { Teleport as Be, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as Ve, createElementVNode as _, createSlots as He, createTextVNode as Ue, createVNode as We, defineAsyncComponent as Ge, guardReactiveProps as v, mergeProps as Ke, nextTick as qe, normalizeClass as Je, normalizeProps as y, normalizeStyle as Ye, onBeforeUnmount as Xe, onMounted as Ze, openBlock as b, ref as x, renderSlot as S, resolveDynamicComponent as Qe, shallowRef as $e, toDisplayString as et, toRefs as tt, unref as C, useSlots as nt, watch as w, watchEffect as rt, withCtx as T } from "vue";
23
- //#region src/components/vue-ui-xy-canvas.vue
24
- var it = /* @__PURE__ */ e({ default: () => ht }), at = ["id"], ot = ["id"], st = {
25
- class: "sr-only",
26
- "aria-live": "polite",
27
- "aria-atomic": "true"
28
- }, ct = ["id"], lt = ["aria-label", "aria-describedby"], ut = {
29
- key: 0,
30
- style: {
31
- position: "absolute",
32
- top: "100%",
33
- left: "0",
34
- width: "100%"
35
- },
36
- "data-dom-to-png-ignore": "",
37
- "aria-hidden": "true"
38
- }, dt = ["id"], ft = ["onClick"], pt = {
39
- key: 4,
40
- class: "vue-data-ui-watermark"
41
- }, mt = ["innerHTML"], ht = /*#__PURE__*/ we({
42
- __name: "vue-ui-xy-canvas",
43
- props: {
44
- dataset: {
45
- type: Array,
46
- default() {
47
- return [];
48
- }
49
- },
50
- config: {
51
- type: Object,
52
- default() {
53
- return {};
54
- }
55
- },
56
- selectedXIndex: {
57
- type: Number,
58
- default: void 0
59
- }
60
- },
61
- emits: [
62
- "selectLegend",
63
- "selectX",
64
- "copyAlt"
65
- ],
66
- setup(e, { expose: we, emit: it }) {
67
- let ht = Ge(() => import("./Tooltip-DhjyfHwz.js")), gt = Ge(() => import("./DataTable-BbKgJ5UI.js")), _t = Ge(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), vt = Ge(() => import("./NonSvgPenAndPaper-4ypecDg1.js")), yt = Ge(() => import("./BaseDraggableDialog-LoqqwRtV.js").then((e) => e.n)), { vue_ui_xy_canvas: bt } = ge(), { isThemeValid: xt, warnInvalidTheme: St } = xe(), E = e, D = x(oe()), O = x(null), Ct = x(null), k = x(null), A = x(1), j = x(1), wt = x(!1), M = x(null), Tt = x(""), Et = x(null), N = x([]), Dt = x(1), P = x(!0), F = x(!0), Ot = x(null), kt = x(0), At = x(!1), jt = x(null), Mt = x(null), I = x(null), Nt = x(null), Pt = x(0), Ft = x(0), It = x(0), L = x(null), Lt = x(!1), Rt = x(null), zt = x(null), Bt = x(!1), Vt = x(!1), Ht = x(!1), R = x(null), Ut = x(!1), Wt = x(!1), Gt = x(!1), z = x(null), Kt = x({
68
- x: 0,
69
- y: 0
70
- }), B = m(() => Array.isArray(tn.value) && tn.value.length > 0), qt = it, Jt = nt(), V = x(cn());
71
- de({
72
- config: () => V.value,
73
- dataset: () => E.dataset,
74
- component: "VueUiXyCanvas",
75
- rules: [
76
- fe.emptyArray,
77
- {
78
- test: (e) => e.every((e) => e.series.length < 300),
79
- message: [
80
- "👀 Series have < 300 datapoints. Consider:",
81
- "",
82
- "▶️ Using VueUiXy instead, if you need more options, or more customization possibilities."
83
- ]
84
- },
85
- {
86
- test: (e) => e.some((e) => e.series.length > 1e4),
87
- message: [
88
- "👀 The dataset has > 10_000 datapoints. Above this threshold, the dataset is computed through an LTTB algorithm, to preserve the shape of the data without increasing the number of datapoints.",
89
- "",
90
- "▶️ If you need this level of detail, you can change config.downsample.threshold and set a higher value. Note that performance can be impacted. JS runtime might crash with > 100_000 datapoints."
91
- ]
92
- }
93
- ]
94
- });
95
- let Yt = m(() => {
96
- let e = V.value.style.chart.title.text || "XY chart", t = Y.value.end - Y.value.start;
97
- return `${e}. ${J.value.filter((e) => !N.value.includes(e.absoluteIndex)).length} series. ${t} visible data points.`;
98
- }), Xt = m(() => {
99
- if (z.value === null) return "";
100
- let e = z.value + Y.value.start;
101
- return `${V.value.style.chart.grid.x.timeLabels.values.slice(Y.value.start, Y.value.end)[z.value] ? V.value.style.chart.tooltip.useDefaultTimeFormat ? Q.value.slice(Y.value.start, Y.value.end)[z.value]?.text : Zn.value[z.value]?.text : Q.value[e]?.text ?? `Point ${e + 1}`}. ${J.value.filter((e) => !N.value.includes(e.absoluteIndex)).map((e) => {
102
- let t = e.series[z.value], n = t?.value ?? t ?? null;
103
- return `${e.name}: ${n}`;
104
- }).join(". ")}.`;
105
- }), Zt = m(() => V.value.userOptions.useCursorPointer), Qt = m(() => V.value.debug);
106
- Ze(() => {
107
- Jt["chart-background"] && Qt.value && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
108
- });
109
- let $t = m(() => a({
110
- defaultConfig: {
111
- userOptions: { show: !1 },
112
- table: { show: !1 },
113
- style: { chart: {
114
- backgroundColor: "#99999930",
115
- grid: {
116
- x: {
117
- axisColor: "#6A6A6A",
118
- timeLabels: { show: !1 },
119
- axisName: "",
120
- horizontalLines: { color: "#6A6A6A" }
121
- },
122
- y: {
123
- axisColor: "#6A6A6A",
124
- axisLabels: { show: !1 },
125
- axisName: "",
126
- verticalLines: { color: "#6A6A6A" }
127
- },
128
- zeroLine: { color: "#6A6A6A" }
129
- },
130
- legend: { backgroundColor: "#99999930" },
131
- paddingProportions: { left: .05 },
132
- scale: {
133
- max: null,
134
- min: null
135
- },
136
- zoom: {
137
- endIndex: null,
138
- startIndex: null
139
- }
140
- } }
141
- },
142
- userConfig: V.value.skeletonConfig ?? {}
143
- })), { loading: en, FINAL_DATASET: tn } = ve({
144
- ...tt(E),
145
- FINAL_CONFIG: V,
146
- prepareConfig: cn,
147
- skeletonDataset: E.config?.skeletonDataset ?? [{
148
- name: "",
149
- series: [
150
- 0,
151
- 1,
152
- 2,
153
- 3,
154
- 5,
155
- 8,
156
- 13,
157
- 21,
158
- 34,
159
- 55,
160
- 89,
161
- 134
162
- ],
163
- type: "line",
164
- smooth: !0,
165
- color: "#BABABA"
166
- }, {
167
- name: "",
168
- series: [
169
- 0,
170
- .5,
171
- 1,
172
- 1.5,
173
- 2.5,
174
- 4,
175
- 6.5,
176
- 10.5,
177
- 17,
178
- 27.5,
179
- 44.5,
180
- 67
181
- ],
182
- type: "bar",
183
- color: "#AAAAAA"
184
- }],
185
- skeletonConfig: a({
186
- defaultConfig: V.value,
187
- userConfig: $t.value
188
- })
189
- }), { userOptionsVisible: nn, setUserOptionsVisibility: rn, keepUserOptionState: an } = Ie({ config: V.value }), { svgRef: H } = Le({ config: V.value.style.chart.title });
190
- function on() {
191
- rn(!0);
192
- }
193
- function sn() {
194
- rn(!1), qt("selectX", {
195
- dataset: null,
196
- index: null,
197
- indexLabel: null
198
- }), M.value = null;
199
- }
200
- function cn() {
201
- let e = be({
202
- userConfig: E.config,
203
- defaultConfig: bt
204
- }), t = {}, n = e.theme;
205
- if (n) if (!xt.value(e)) St(e), t = e;
206
- else {
207
- let r = be({
208
- userConfig: ze[n] || E.config,
209
- defaultConfig: e
210
- });
211
- t = {
212
- ...be({
213
- userConfig: E.config,
214
- defaultConfig: r
215
- }),
216
- customPalette: e.customPalette.length ? e.customPalette : o[n] || c
217
- };
218
- }
219
- else t = e;
220
- return E.config && ce(E.config, "style.chart.grid.y.timeLabels") && (console.warn("VueUiXyCanvas: you are using the deprecated config.style.chart.grid.y.timeLabels. It is recommended to move this configuration to config.style.chart.grid.x.timeLabels."), t.style.chart.grid.x.timeLabels = be({
221
- defaultConfig: t.style.chart.grid.x.timeLabels,
222
- userConfig: E.config.style.chart.grid.y.timeLabels
223
- })), t;
224
- }
225
- w(() => E.config, (e) => {
226
- en.value || (V.value = cn()), nn.value = !V.value.userOptions.showOnChartHover, wr(), Pt.value += 1, Ft.value += 1, It.value += 1, U.value.showTable = V.value.table.show, U.value.showDataLabels = V.value.style.chart.dataLabels.show, U.value.stacked = V.value.style.chart.stacked, U.value.showTooltip = V.value.style.chart.tooltip.show;
227
- }, { deep: !0 }), w(() => E.dataset, async (e) => {
228
- !Array.isArray(e) || e.length === 0 || (await qe(), H.value && !k.value && (k.value = H.value.getContext("2d", { willReadFrequently: !0 })), P.value = !0, F.value = !0, await jn(), Bn(), Pt.value += 1, Ft.value += 1, It.value += 1);
229
- }, { deep: !0 });
230
- let ln = x(V.value.style.chart.aspectRatio), { isPrinting: un, isImaging: dn, generatePdf: fn, generateImage: pn } = _e({
231
- elementId: `xy_canvas_${D.value}`,
232
- fileName: V.value.style.chart.title.text || "vue-ui-xy-canvas",
233
- options: V.value.userOptions.print
234
- }), U = x({
235
- showTable: V.value.table.show,
236
- showDataLabels: V.value.style.chart.dataLabels.show,
237
- stacked: V.value.style.chart.stacked,
238
- showTooltip: V.value.style.chart.tooltip.show
239
- });
240
- function mn(e) {
241
- At.value = e, kt.value += 1;
242
- }
243
- let hn = m(() => le(V.value.customPalette)), gn = m(() => N.value.length === q.value.length), W = m(() => q.value ? Math.max(...q.value.filter((e, t) => gn.value ? !0 : !N.value.includes(e.absoluteIndex)).map((e) => e.series.length)) : 0);
244
- function _n(e) {
245
- R.value = e, $();
246
- }
247
- let vn = x(0), yn = x(0);
248
- function bn() {
249
- if (!k.value || !V.value.style.chart.grid.x.timeLabels.show) return 0;
250
- let e = Q.value || [], t = Y.value.start ?? 0, n = Y.value.end ?? 0;
251
- if (!Math.max(0, n - t)) return 0;
252
- let r = Math.round(A.value / 40 * V.value.style.chart.grid.x.timeLabels.fontSizeRatio), i = `${V.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${r}px ${V.value.style.fontFamily}`;
253
- k.value.save(), k.value.font = i;
254
- let a = 0;
255
- for (let r = t; r < n; r += 1) {
256
- let t = e[r]?.text ?? `${r + 1}`, n = k.value.measureText(String(t));
257
- n.width > a && (a = n.width);
258
- }
259
- k.value.restore();
260
- let o = (V.value.style.chart.grid.x.timeLabels.rotation || 0) * Math.PI / 180, s = r, c = Math.abs(Math.sin(o)) * a + Math.abs(Math.cos(o)) * s, l = V.value.style.chart.grid.x.timeLabels.offsetY || 1, u = A.value / l;
261
- return Math.max(0, u + c + 4);
262
- }
263
- function xn() {
264
- vn.value = bn();
265
- }
266
- function Sn() {
267
- yn.value && cancelAnimationFrame(yn.value), yn.value = requestAnimationFrame(() => {
268
- requestAnimationFrame(() => {
269
- xn();
270
- });
271
- });
272
- }
273
- Xe(() => {
274
- yn.value && cancelAnimationFrame(yn.value);
275
- });
276
- let G = m(() => {
277
- let e = A.value - A.value * (V.value.style.chart.paddingProportions.left + V.value.style.chart.paddingProportions.right), t = j.value * V.value.style.chart.paddingProportions.top, n = j.value * V.value.style.chart.paddingProportions.bottom, r = vn.value, i = j.value - n - r, a = j.value - (t + n) - r;
278
- return {
279
- canvasWidth: A.value,
280
- canvasHeight: j.value,
281
- left: A.value * V.value.style.chart.paddingProportions.left,
282
- top: t,
283
- right: A.value - A.value * V.value.style.chart.paddingProportions.right,
284
- bottom: i,
285
- width: e,
286
- height: a,
287
- slot: e / (Y.value.end - Y.value.start)
288
- };
289
- });
290
- function Cn(e, t) {
291
- return e / t;
292
- }
293
- function wn({ hasAutoScale: e, series: t, min: n, max: r, scale: i, yOffset: a, individualHeight: o, stackIndex: s = null }) {
294
- return t.map((t, n) => {
295
- let r = i.min < 0 ? Math.abs(i.min) : 0, c = Cn(t + r, r + i.max), l, u;
296
- e && (l = i.min, u = Cn(t - l, i.max - l));
297
- let d = 0;
298
- return d = s === null ? G.value.bottom - G.value.height * (e ? u : c) : G.value.bottom - a - o * (e ? u : c), {
299
- x: G.value.left + G.value.slot * n + G.value.slot / 2,
300
- y: d,
301
- value: t
302
- };
303
- });
304
- }
305
- let K = m(() => {
306
- let e = V.value.style.chart.scale.min === null ? Math.min(...q.value.filter((e, t) => !N.value.includes(e.absoluteIndex)).flatMap((e) => e.series.slice(Y.value.start, Y.value.end))) : V.value.style.chart.scale.min, t = V.value.style.chart.scale.max === null ? Math.max(...q.value.filter((e, t) => !N.value.includes(e.absoluteIndex)).flatMap((e) => e.series.slice(Y.value.start, Y.value.end))) : V.value.style.chart.scale.max, n = ee(e < 0 ? e : 0, t === e ? e + 1 < 0 ? 0 : e + 1 : t < 0 ? 0 : t, V.value.style.chart.scale.ticks), r = n.min < 0 ? Math.abs(n.min) : 0, i = G.value.bottom - G.value.height * (r / (n.max + r));
307
- return {
308
- absoluteMin: r,
309
- max: t,
310
- min: e,
311
- scale: n,
312
- yLabels: n.ticks.map((e) => ({
313
- y: G.value.bottom - G.value.height * ((e + r) / (n.max + r)),
314
- x: G.value.left - 8,
315
- value: e
316
- })),
317
- zero: i
318
- };
319
- }), Tn = m(() => J.value.map((e) => `
320
- <div style="display:flex;flex-direction:row;gap:6px;align-items:center;">
321
- <svg viewBox="0 0 10 10" height="12" width="12">
322
- <circle cx="5" cy="5" r="5" fill="${e.color}"/>
323
- </svg>
324
- <span>${e.name ? e.name + ": " : ""}</span>
325
- <span>${re(V.value.style.chart.dataLabels.formatter, e.series[M.value] ?? "-", d({
326
- p: e.prefix || "",
327
- v: e.series[M.value] ?? "-",
328
- s: e.suffix || "",
329
- r: e.rounding || 0
330
- }), {
331
- datapoint: e,
332
- seriesIndex: M.value
333
- })}</span>
334
- </div>
335
- `)), En = m(() => V.value.style.chart.line.cutNullValues), q = m(() => tn.value.map((e, t) => ({
336
- ...e,
337
- series: i({
338
- data: l(e.series, [], En.value),
339
- threshold: V.value.downsample.threshold
340
- }),
341
- absoluteIndex: t,
342
- color: u(e.color || hn.value[t] || c[t] || c[t % c.length])
343
- }))), Dn = m(() => {
344
- if (!V.value.style.chart.zoom.minimap.show) return [];
345
- let e = q.value.filter((e) => !N.value.includes(e.absoluteIndex)), t = Math.max(...e.map((e) => e.series.length)), n = [];
346
- for (let r = 0; r < t; r += 1) n.push(e.map((e) => e.series[r] || 0).reduce((e, t) => (e || 0) + (t || 0), 0));
347
- let r = Math.min(...n);
348
- return n.map((e) => e + (r < 0 ? Math.abs(r) : 0));
349
- }), On = m(() => V.value.style.chart.zoom.minimap.show ? q.value.map((e) => ({
350
- ...e,
351
- isVisible: !N.value.includes(e.absoluteIndex)
352
- })) : []);
353
- w(W, (e) => {
354
- e && jn();
355
- });
356
- let J = m(() => ae(q.value.filter((e, t) => !N.value.includes(e.absoluteIndex))).map((e, t) => ({
357
- ...e,
358
- series: e.series.slice(Y.value.start, Y.value.end)
359
- })).map((e, t) => {
360
- let n = [null, void 0].includes(e.scaleMin) ? Math.min(...e.series) || 0 : e.scaleMin, r = [null, void 0].includes(e.scaleMax) ? Math.max(...e.series) || 1 : e.scaleMax;
361
- n === r && (n = n >= 0 ? r - 1 : n, r = r >= 0 ? r : n + 1);
362
- let i = {
363
- ratios: e.series.filter((e) => ![null, void 0].includes(e)).map((e) => (e - n) / (r - n)),
364
- valueMin: n,
365
- valueMax: r
366
- }, a = e.scaleSteps || V.value.style.chart.scale.ticks, o;
367
- o = e.autoScaling ? ee(i.valueMin, i.valueMax, a) : ee(i.valueMin < 0 ? i.valueMin : 0, i.valueMax <= 0 ? 0 : i.valueMax, a);
368
- let s = U.value.stacked ? G.value.height * (1 - e.cumulatedStackRatio) : 0, c = U.value.stacked ? G.value.height / V.value.style.chart.stackGap : 0, l = U.value.stacked ? G.value.height * e.stackRatio - c : G.value.height, u = o.min < 0 ? Math.abs(o.min) : 0, d;
369
- d = e.autoScaling && U.value.stacked && r <= 0 ? G.value.bottom - s - l : G.value.bottom - s - l * (u / (o.max + u));
370
- let te = o.ticks.map((e, t) => ({
371
- y: G.value.bottom - s - l * (t / (o.ticks.length - 1)),
372
- x: G.value.left - 8,
373
- value: e
374
- })), ne = wn({
375
- hasAutoScale: U.value.stacked && e.autoScaling,
376
- series: e.series,
377
- min: U.value.stacked ? n : K.value.min,
378
- max: U.value.stacked ? r : K.value.max,
379
- scale: U.value.stacked ? o : K.value.scale,
380
- yOffset: s,
381
- individualHeight: l,
382
- stackIndex: U.value.stacked ? t : null
383
- });
384
- return {
385
- ...e,
386
- coordinatesLine: ne,
387
- min: n,
388
- max: r,
389
- localScale: o,
390
- localZero: d,
391
- localMin: u,
392
- localYLabels: te,
393
- yOffset: s,
394
- individualHeight: l
395
- };
396
- })), Y = x({
397
- start: 0,
398
- end: W.value
399
- }), X = x({
400
- start: 0,
401
- end: W.value
402
- }), kn = x(null);
403
- function An() {
404
- return new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(() => e())));
405
- }
406
- Xe(() => {
407
- kn.value && cancelAnimationFrame(kn.value);
408
- });
409
- async function jn() {
410
- Pn(), await qe(), kn.value && cancelAnimationFrame(kn.value), kn.value = requestAnimationFrame(async () => {
411
- await An(), Pn();
412
- });
413
- }
414
- let Mn = m(() => V.value.style.chart.zoom.preview.enable && (X.value.start !== Y.value.start || X.value.end !== Y.value.end));
415
- function Nn(e, t) {
416
- X.value[e] = t;
417
- }
418
- async function Pn() {
419
- if (!Bt.value) {
420
- Bt.value = !0;
421
- try {
422
- let { startIndex: e, endIndex: t } = V.value.style.chart.zoom, n = Math.max(...q.value.map((e) => e.series.length)), r = e ?? 0, i = t == null ? n : Math.min(Ln(t + 1), n);
423
- Ht.value = !0, Y.value.start = r, Y.value.end = i, X.value.start = r, X.value.end = i, Rn(), Vt.value = !0, await qe(), I.value && (I.value.setStartValue(Y.value.start), I.value.setEndValue(Y.value.end));
424
- } finally {
425
- queueMicrotask(() => {
426
- Ht.value = !1;
427
- }), Bt.value = !1;
428
- }
429
- }
430
- }
431
- function Fn(e) {
432
- Bt.value || Ht.value || e !== Y.value.start && (Y.value.start = e, X.value.start = e, Rn());
433
- }
434
- function In(e) {
435
- if (Bt.value || Ht.value) return;
436
- let t = Ln(e);
437
- t !== Y.value.end && (Y.value.end = t, X.value.end = t, Rn());
438
- }
439
- function Ln(e) {
440
- let t = W.value;
441
- return e > t ? t : e < 0 || e < Y.value.start ? V.value.style.chart.zoom.startIndex === null ? 1 : V.value.style.chart.zoom.startIndex + 1 : e;
442
- }
443
- function Rn() {
444
- let e = Math.max(1, Math.max(...q.value.map((e) => e.series.length))), t = Math.max(0, Math.min(Y.value.start ?? 0, e - 1)), n = Math.max(t + 1, Math.min(Y.value.end ?? e, e));
445
- (!Number.isFinite(t) || !Number.isFinite(n) || n <= t) && (t = 0, n = e), Y.value = {
446
- start: t,
447
- end: n
448
- }, X.value.start = t, X.value.end = n, I.value && (I.value.setStartValue(t), I.value.setEndValue(n));
449
- }
450
- let zn = m(() => J.value.filter((e) => [
451
- "line",
452
- "plot",
453
- void 0
454
- ].includes(e.type))), Z = m(() => J.value.filter((e) => e.type === "bar"));
455
- function Bn() {
456
- if (!H.value || !Ct.value) return;
457
- let e = Ct.value.offsetWidth, t = Ct.value.offsetHeight;
458
- H.value.width = e * Dt.value * 2, H.value.height = t * Dt.value * 2, A.value = e * Dt.value * 2, j.value = t * Dt.value * 2, k.value?.scale(Dt.value, Dt.value), $();
459
- }
460
- w(B, async (e) => {
461
- if (!e) {
462
- Ot.value = null, wt.value = !1, M.value = null, L.value = null;
463
- return;
464
- }
465
- await qe(), H.value && !k.value && (k.value = H.value.getContext("2d", { willReadFrequently: !0 })), P.value = !0, F.value = !0, await jn(), Bn(), $();
466
- });
467
- function Vn() {
468
- if (k.value && (k.value.clearRect(0, 0, 1e4, 1e4), k.value.fillStyle = V.value.style.chart.backgroundColor, k.value.fillRect(0, 0, G.value.canvasWidth, G.value.canvasHeight), B.value)) {
469
- if (U.value.stacked) V.value.style.chart.grid.y.verticalLines.show && Y.value.end - Y.value.start < V.value.style.chart.grid.y.verticalLines.hideUnderXLength ? J.value.forEach((e) => {
470
- for (let t = 0; t < Y.value.end - Y.value.start + 1; t += 1) f(k.value, [{
471
- x: G.value.left + G.value.slot * t,
472
- y: G.value.bottom - e.yOffset - e.individualHeight
473
- }, {
474
- x: G.value.left + G.value.slot * t,
475
- y: G.value.bottom - e.yOffset
476
- }], { color: V.value.style.chart.grid.y.verticalLines.color });
477
- }) : V.value.style.chart.grid.y.verticalLines.show && Y.value.end - Y.value.start >= V.value.style.chart.grid.y.verticalLines.hideUnderXLength && J.value.forEach((e) => {
478
- for (let t = Y.value.start; t < Y.value.end; t += 1) t % Math.floor((Y.value.end - Y.value.start) / V.value.style.chart.grid.x.timeLabels.modulo) === 0 && f(k.value, [{
479
- x: G.value.left + G.value.slot * (t - Y.value.start) + G.value.slot / 2,
480
- y: G.value.bottom - e.yOffset - e.individualHeight
481
- }, {
482
- x: G.value.left + G.value.slot * (t - Y.value.start) + G.value.slot / 2,
483
- y: G.value.bottom - e.yOffset
484
- }], { color: V.value.style.chart.grid.y.verticalLines.color });
485
- }), V.value.style.chart.grid.x.horizontalLines.show && (V.value.style.chart.grid.x.horizontalLines.alternate ? J.value.forEach((e) => {
486
- e.localYLabels.forEach((t, r) => {
487
- r < e.localYLabels.length - 1 && Ae(k.value, [
488
- {
489
- x: G.value.left,
490
- y: t.y
491
- },
492
- {
493
- x: G.value.right,
494
- y: t.y
495
- },
496
- {
497
- x: G.value.right,
498
- y: e.localYLabels[r + 1].y
499
- },
500
- {
501
- x: G.value.left,
502
- y: e.localYLabels[r + 1].y
503
- }
504
- ], {
505
- fillColor: r % 2 == 0 ? "transparent" : n(V.value.style.chart.grid.x.horizontalLines.color, V.value.style.chart.grid.x.horizontalLines.opacity),
506
- strokeColor: "transparent"
507
- });
508
- });
509
- }) : J.value.forEach((e) => {
510
- e.localYLabels.slice(Y.value.start, Y.value.end).forEach((e) => {
511
- f(k.value, [{
512
- x: G.value.left,
513
- y: e.y
514
- }, {
515
- x: G.value.right,
516
- y: e.y
517
- }], { color: V.value.style.chart.grid.x.horizontalLines.color });
518
- });
519
- })), V.value.style.chart.grid.zeroLine.show && J.value.forEach((e) => {
520
- f(k.value, [{
521
- x: G.value.left,
522
- y: e.localZero
523
- }, {
524
- x: G.value.right,
525
- y: e.localZero
526
- }], {
527
- color: V.value.style.chart.grid.zeroLine.color,
528
- lineDash: V.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
529
- });
530
- }), V.value.style.chart.grid.y.axisLabels.show && J.value.forEach((e) => {
531
- f(k.value, [{
532
- x: G.value.left,
533
- y: G.value.bottom - e.yOffset
534
- }, {
535
- x: G.value.left,
536
- y: G.value.bottom - e.yOffset - e.individualHeight
537
- }], { color: e.color }), f(k.value, [{
538
- x: G.value.right,
539
- y: G.value.bottom - e.yOffset
540
- }, {
541
- x: G.value.right,
542
- y: G.value.bottom - e.yOffset - e.individualHeight
543
- }], { color: e.color });
544
- }), J.value.forEach((e) => {
545
- p(k.value, e.name, A.value / 35, G.value.bottom - e.yOffset - e.individualHeight / 2, {
546
- align: "center",
547
- rotation: -90,
548
- color: e.color,
549
- font: `${Math.round(A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`
550
- });
551
- });
552
- else {
553
- if (V.value.style.chart.grid.y.verticalLines.show && Y.value.end - Y.value.start < V.value.style.chart.grid.y.verticalLines.hideUnderXLength) for (let e = 0; e < Y.value.end - Y.value.start + 1; e += 1) f(k.value, [{
554
- x: G.value.left + G.value.slot * e,
555
- y: G.value.top
556
- }, {
557
- x: G.value.left + G.value.slot * e,
558
- y: G.value.bottom
559
- }], { color: V.value.style.chart.grid.y.verticalLines.color });
560
- else if (V.value.style.chart.grid.y.verticalLines.show && Y.value.end - Y.value.start >= V.value.style.chart.grid.y.verticalLines.hideUnderXLength) for (let e = Y.value.start; e < Y.value.end; e += 1) e % Math.floor((Y.value.end - Y.value.start) / V.value.style.chart.grid.x.timeLabels.modulo) === 0 && f(k.value, [{
561
- x: G.value.left + G.value.slot * (e - Y.value.start) + G.value.slot / 2,
562
- y: G.value.top
563
- }, {
564
- x: G.value.left + G.value.slot * (e - Y.value.start) + G.value.slot / 2,
565
- y: G.value.bottom
566
- }], { color: V.value.style.chart.grid.y.verticalLines.color });
567
- V.value.style.chart.grid.x.horizontalLines.show && (V.value.style.chart.grid.x.horizontalLines.alternate ? K.value.yLabels.forEach((e, t) => {
568
- t < K.value.yLabels.length - 1 && Ae(k.value, [
569
- {
570
- x: G.value.left,
571
- y: e.y
572
- },
573
- {
574
- x: G.value.right,
575
- y: e.y
576
- },
577
- {
578
- x: G.value.right,
579
- y: K.value.yLabels[t + 1].y
580
- },
581
- {
582
- x: G.value.left,
583
- y: K.value.yLabels[t + 1].y
584
- }
585
- ], {
586
- fillColor: t % 2 == 0 ? "transparent" : n(V.value.style.chart.grid.x.horizontalLines.color, V.value.style.chart.grid.x.horizontalLines.opacity),
587
- strokeColor: "transparent"
588
- });
589
- }) : K.value.yLabels.forEach((e) => {
590
- f(k.value, [{
591
- x: G.value.left,
592
- y: e.y
593
- }, {
594
- x: G.value.right,
595
- y: e.y
596
- }], { color: V.value.style.chart.grid.x.horizontalLines.color });
597
- })), V.value.style.chart.grid.y.showAxis && f(k.value, [{
598
- x: G.value.left,
599
- y: G.value.top
600
- }, {
601
- x: G.value.left,
602
- y: G.value.bottom
603
- }], {
604
- color: V.value.style.chart.grid.y.axisColor,
605
- lineWidth: V.value.style.chart.grid.y.axisThickness
606
- }), V.value.style.chart.grid.x.showAxis && f(k.value, [{
607
- x: G.value.left,
608
- y: G.value.bottom
609
- }, {
610
- x: G.value.right,
611
- y: G.value.bottom
612
- }], {
613
- color: V.value.style.chart.grid.x.axisColor,
614
- lineWidth: V.value.style.chart.grid.x.axisThickness
615
- }), V.value.style.chart.grid.zeroLine.show && f(k.value, [{
616
- x: G.value.left,
617
- y: K.value.zero
618
- }, {
619
- x: G.value.right,
620
- y: K.value.zero
621
- }], {
622
- color: V.value.style.chart.grid.zeroLine.color,
623
- lineDash: V.value.style.chart.grid.zeroLine.dashed ? [10, 10] : [0, 0]
624
- });
625
- }
626
- V.value.style.chart.grid.y.axisName && p(k.value, V.value.style.chart.grid.y.axisName, A.value - A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio * 1.2, G.value.bottom - G.value.height / 2, {
627
- font: `${V.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
628
- color: V.value.style.chart.color,
629
- align: "center",
630
- rotation: 90
631
- }), V.value.style.chart.grid.x.axisName && p(k.value, V.value.style.chart.grid.x.axisName, A.value / 2, j.value, {
632
- font: `${V.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
633
- color: V.value.style.chart.color,
634
- align: "center"
635
- });
636
- }
637
- }
638
- function Hn(e) {
639
- for (let t = 0; t < e.coordinatesLine.length; t += 1) {
640
- let n = (M.value === t || R.value === t ? A.value / 150 : V.value.style.chart.line.plots.show || e.type === "plot" ? A.value / 200 : 0) * V.value.style.chart.line.plots.radiusRatio;
641
- De(k.value, {
642
- x: e.coordinatesLine[t].x,
643
- y: e.coordinatesLine[t].y
644
- }, n, {
645
- color: V.value.style.chart.backgroundColor,
646
- fillStyle: e.color,
647
- strokeColor: "transparent"
648
- });
649
- }
650
- }
651
- function Un() {
652
- J.value.forEach((e) => {
653
- e.showYMarker && lr(e) && p(k.value, re(V.value.style.chart.dataLabels.formatter, lr(e).value, d({
654
- p: e.prefix || V.value.style.chart.grid.y.axisLabels.prefix || "",
655
- v: lr(e).value,
656
- s: e.suffix || V.value.style.chart.grid.y.axisLabels.suffix || "",
657
- r: e.rounding || V.value.style.chart.grid.y.axisLabels.rounding || 0
658
- }), {
659
- datapoint: lr(e),
660
- seriesIndex: null
661
- }), G.value.left - 8 + V.value.style.chart.grid.y.axisLabels.offsetX, lr(e).y, {
662
- align: "right",
663
- font: `${V.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
664
- color: e.color
665
- });
666
- });
667
- }
668
- function Wn() {
669
- V.value.style.chart.grid.y.axisLabels.show && (U.value.stacked ? J.value.forEach((e) => {
670
- e.localYLabels.forEach((t, n) => {
671
- p(k.value, re(V.value.style.chart.dataLabels.formatter, t.value, d({
672
- p: e.prefix || V.value.style.chart.grid.y.axisLabels.prefix || "",
673
- v: t.value,
674
- s: e.suffix || V.value.style.chart.grid.y.axisLabels.suffix || "",
675
- r: e.rounding || V.value.style.chart.grid.y.axisLabels.rounding || 0
676
- }), {
677
- datapoint: t,
678
- seriesIndex: n
679
- }), t.x + V.value.style.chart.grid.y.axisLabels.offsetX, t.y, {
680
- align: "right",
681
- font: `${V.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
682
- color: e.color,
683
- globalAlpha: e.showYMarker && ![null, void 0].includes(M.value ?? R.value) ? .2 : 1
684
- });
685
- });
686
- }) : K.value.yLabels.forEach((e, t) => {
687
- p(k.value, re(V.value.style.chart.dataLabels.formatter, e.value, d({
688
- p: V.value.style.chart.grid.y.axisLabels.prefix || "",
689
- v: e.value,
690
- s: V.value.style.chart.grid.y.axisLabels.suffix || "",
691
- r: V.value.style.chart.grid.y.axisLabels.rounding || 0
692
- }), {
693
- datapoint: e,
694
- seriesIndex: t
695
- }), e.x + V.value.style.chart.grid.y.axisLabels.offsetX, e.y, {
696
- align: "right",
697
- font: `${V.value.style.chart.grid.y.axisLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.grid.y.axisLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
698
- color: V.value.style.chart.grid.y.axisLabels.color,
699
- globalAlpha: J.value.some((e) => e.showYMarker) && ![null, void 0].includes(M.value ?? R.value) ? .2 : 1
700
- });
701
- }));
702
- }
703
- function Gn(e) {
704
- for (let t = 0; t < e.coordinatesLine.length; t += 1) p(k.value, re(V.value.style.chart.dataLabels.formatter, e.coordinatesLine[t].value, d({
705
- p: e.prefix || "",
706
- v: e.coordinatesLine[t].value,
707
- s: e.suffix || "",
708
- r: e.rounding || 0
709
- }), {
710
- datapoint: e.coordinatesLine[t],
711
- seriesIndex: t
712
- }), e.coordinatesLine[t].x, e.coordinatesLine[t].y + V.value.style.chart.dataLabels.offsetY, {
713
- align: "center",
714
- font: `${V.value.style.chart.dataLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.dataLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
715
- color: V.value.style.chart.dataLabels.useSerieColor ? e.color : V.value.style.chart.dataLabels.color,
716
- strokeColor: V.value.style.chart.backgroundColor,
717
- lineWidth: .5
718
- });
719
- }
720
- let Q = x([]), Kn = 0;
721
- rt(() => {
722
- let e = ++Kn;
723
- (async () => {
724
- let t = await he({
725
- values: V.value.style.chart.grid.x.timeLabels.values,
726
- maxDatapoints: W.value,
727
- formatter: V.value.style.chart.grid.x.timeLabels.datetimeFormatter,
728
- start: 0,
729
- end: W.value
730
- });
731
- e === Kn && (Q.value = t);
732
- })();
733
- }), rt(() => {
734
- V.value.style.chart.grid.x.timeLabels.show, V.value.style.chart.grid.x.timeLabels.rotation, V.value.style.chart.grid.x.timeLabels.offsetY, V.value.style.chart.grid.x.timeLabels.fontSizeRatio, V.value.style.chart.grid.x.timeLabels.bold, Y.value.start, Y.value.end, A.value, j.value, (Q.value || []).map((e) => e?.text ?? "").join("|"), Sn();
735
- }, { flush: "post" });
736
- let qn = x({
737
- months: [],
738
- shortMonths: [],
739
- days: [],
740
- shortDays: []
741
- }), Jn = 0;
742
- rt(() => {
743
- let e = ++Jn, t = V.value.style.chart.grid.x.timeLabels.datetimeFormatter;
744
- (async () => {
745
- let n = await me(t.locale).catch(() => me("en"));
746
- e === Jn && (qn.value = n.data);
747
- })();
748
- });
749
- let Yn = m(() => {
750
- let e = V.value.style.chart.grid.x.timeLabels.datetimeFormatter, t = pe({
751
- useUTC: e.useUTC,
752
- locale: qn.value,
753
- januaryAsYear: e.januaryAsYear
754
- });
755
- return (e, n) => {
756
- let r = V.value.style.chart.grid.x.timeLabels.values?.[e];
757
- return r == null ? "" : t.formatDate(new Date(r), n);
758
- };
759
- }), Xn = m(() => (V.value.style.chart.grid.x.timeLabels.values || []).map((e, t) => ({
760
- text: Yn.value(t, V.value.style.chart.zoom.timeFormat),
761
- absoluteIndex: t
762
- }))), Zn = m(() => (V.value.style.chart.grid.x.timeLabels.values || []).map((e, t) => ({
763
- text: Yn.value(t, V.value.style.chart.tooltip.timeFormat),
764
- absoluteIndex: t
765
- })));
766
- function Qn() {
767
- for (let e = Y.value.start; e < Y.value.end; e += 1) (Y.value.end - Y.value.start < V.value.style.chart.grid.x.timeLabels.modulo || Y.value.end - Y.value.start >= V.value.style.chart.grid.x.timeLabels.modulo && (e % Math.floor((Y.value.end - Y.value.start) / V.value.style.chart.grid.x.timeLabels.modulo) === 0 || (e === M.value + Y.value.start || e === R.value) && V.value.style.chart.grid.x.timeLabels.showMarker)) && p(k.value, Q.value[e] ? Q.value[e].text : e + 1, G.value.left + G.value.slot * (e - Y.value.start) + G.value.slot / 2, G.value.bottom + A.value / V.value.style.chart.grid.x.timeLabels.offsetY, {
768
- align: V.value.style.chart.grid.x.timeLabels.rotation === 0 ? "center" : V.value.style.chart.grid.x.timeLabels.rotation > 0 ? "left" : "right",
769
- font: `${V.value.style.chart.grid.x.timeLabels.bold ? "bold " : ""}${Math.round(A.value / 40 * V.value.style.chart.grid.x.timeLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
770
- color: V.value.style.chart.grid.x.timeLabels.showMarker ? n(V.value.style.chart.grid.x.timeLabels.color, M.value !== null || R.value !== null ? M.value + Y.value.start === e || R.value === e ? 100 : 20 : 100) : V.value.style.chart.grid.x.timeLabels.color,
771
- rotation: V.value.style.chart.grid.x.timeLabels.rotation
772
- });
773
- }
774
- function $n() {
775
- f(k.value, [{
776
- x: G.value.left + G.value.slot * (M.value ?? R.value) + G.value.slot / 2,
777
- y: G.value.top
778
- }, {
779
- x: G.value.left + G.value.slot * (M.value ?? R.value) + G.value.slot / 2,
780
- y: G.value.bottom
781
- }], {
782
- color: V.value.style.chart.selector.color,
783
- lineDash: V.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
784
- lineWidth: 2,
785
- linceCap: "round"
786
- });
787
- }
788
- function er() {
789
- L.value && f(k.value, [{
790
- x: G.value.left,
791
- y: L.value
792
- }, {
793
- x: G.value.right,
794
- y: L.value
795
- }], {
796
- color: V.value.style.chart.selector.color,
797
- lineDash: V.value.style.chart.selector.dashed ? [8, 8] : [0, 0],
798
- lineWidth: 2,
799
- linceCap: "round"
800
- });
801
- }
802
- function tr() {
803
- Z.value.forEach((e, t) => {
804
- for (let n = 0; n < e.coordinatesLine.length; n += 1) Ae(k.value, [
805
- {
806
- x: G.value.left + G.value.slot * n + G.value.slot / 10 + (U.value.stacked ? 0 : G.value.slot / Z.value.length * t - (t === 0 ? 0 : G.value.slot / (5 * Z.value.length) * t)),
807
- y: U.value.stacked ? e.localZero : K.value.zero
808
- },
809
- {
810
- x: G.value.left + G.value.slot * n + G.value.slot / 10 + (U.value.stacked ? 0 : G.value.slot / Z.value.length * t - (t === 0 ? 0 : G.value.slot / (5 * Z.value.length) * t)) + G.value.slot * .8 / (U.value.stacked ? 1 : Z.value.length),
811
- y: U.value.stacked ? e.localZero : K.value.zero
812
- },
813
- {
814
- x: G.value.left + G.value.slot * n + G.value.slot / 10 + (U.value.stacked ? 0 : G.value.slot / Z.value.length * t - (t === 0 ? 0 : G.value.slot / (5 * Z.value.length) * t)) + G.value.slot * .8 / (U.value.stacked ? 1 : Z.value.length),
815
- y: e.coordinatesLine[n].y
816
- },
817
- {
818
- x: G.value.left + G.value.slot * n + G.value.slot / 10 + (U.value.stacked ? 0 : G.value.slot / Z.value.length * t - (t === 0 ? 0 : G.value.slot / (5 * Z.value.length) * t)),
819
- y: e.coordinatesLine[n].y
820
- }
821
- ], {
822
- strokeColor: V.value.style.chart.backgroundColor,
823
- gradient: {
824
- type: "linear",
825
- start: {
826
- x: e.coordinatesLine[n].x,
827
- y: e.coordinatesLine[n].y
828
- },
829
- end: {
830
- x: e.coordinatesLine[n].x,
831
- y: U.value.stacked ? e.localZero : K.value.zero
832
- },
833
- stops: [{
834
- offset: 0,
835
- color: e.color
836
- }, {
837
- offset: 1,
838
- color: V.value.style.chart.bar.gradient.show ? s(e.color, .5) : e.color
839
- }]
840
- }
841
- }), U.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && p(k.value, re(V.value.style.chart.dataLabels.formatter, e.coordinatesLine[n].value, d({
842
- p: e.prefix || "",
843
- v: e.coordinatesLine[n].value,
844
- s: e.suffix || "",
845
- r: e.rounding || 0
846
- }), {
847
- datapoint: e.coordinatesLine[n],
848
- seriesIndex: n
849
- }), G.value.left + G.value.slot * n + G.value.slot / 10 + (U.value.stacked ? 0 : G.value.slot / Z.value.length * t - (t === 0 ? 0 : G.value.slot / (5 * Z.value.length) * t)) + G.value.slot * .4 / (U.value.stacked ? 1 : Z.value.length), (e.coordinatesLine[n].value < 0 ? U.value.stacked ? e.localZero : K.value.zero : e.coordinatesLine[n].y) + V.value.style.chart.dataLabels.offsetY, {
850
- align: "center",
851
- font: `${Math.round(A.value / 40 * V.value.style.chart.dataLabels.fontSizeRatio)}px ${V.value.style.fontFamily}`,
852
- color: V.value.style.chart.dataLabels.useSerieColor ? e.color : V.value.style.chart.dataLabels.color,
853
- strokeColor: V.value.style.chart.backgroundColor,
854
- lineWidth: .8
855
- });
856
- });
857
- }
858
- function nr(e, t) {
859
- let n = e.coordinatesLine.map((t, n) => e.series[n] != null && Number.isFinite(t?.y) ? t : null), r = [], i = [], a = [];
860
- for (let e = 0; e < n.length; e += 1) {
861
- let o = n[e];
862
- if (o) a.push(o);
863
- else {
864
- if (a.length >= 2) {
865
- let e = a[0], n = a[a.length - 1];
866
- r.push([
867
- {
868
- x: e.x,
869
- y: t
870
- },
871
- ...a,
872
- {
873
- x: n.x,
874
- y: t
875
- }
876
- ]);
877
- } else a.length === 1 && i.push(a[0]);
878
- a = [];
879
- }
880
- }
881
- if (a.length >= 2) {
882
- let e = a[0], n = a[a.length - 1];
883
- r.push([
884
- {
885
- x: e.x,
886
- y: t
887
- },
888
- ...a,
889
- {
890
- x: n.x,
891
- y: t
892
- }
893
- ]);
894
- } else a.length === 1 && i.push(a[0]);
895
- return {
896
- polygons: r,
897
- singles: i
898
- };
899
- }
900
- function rr(e) {
901
- let t = e.coordinatesLine.map((t, n) => e.series[n] != null && Number.isFinite(t?.y) ? t : null), n = [], r = [];
902
- for (let e = 0; e < t.length; e += 1) {
903
- let i = t[e];
904
- i ? r.push(i) : (r.length >= 2 && n.push(r), r = []);
905
- }
906
- return r.length >= 2 && n.push(r), n;
907
- }
908
- function ir(e) {
909
- if (En.value) {
910
- let t = rr(e);
911
- for (let n of t) f(k.value, n, {
912
- color: e.color,
913
- lineWidth: 3
914
- });
915
- } else f(k.value, e.coordinatesLine, {
916
- color: e.color,
917
- lineWidth: 3
918
- });
919
- }
920
- function ar(e) {
921
- let t = !!En.value;
922
- if (e.useArea) {
923
- let r = U.value.stacked ? e.localZero : K.value.zero;
924
- if (t) {
925
- let { polygons: t, singles: i } = nr(e, r);
926
- for (let r of t) Oe(k.value, r, {
927
- fillColor: n(e.color, V.value.style.chart.area.opacity),
928
- strokeColor: "transparent"
929
- });
930
- let a = A.value / 200 * V.value.style.chart.line.plots.radiusRatio;
931
- for (let t of i) De(k.value, {
932
- x: t.x,
933
- y: t.y
934
- }, a, {
935
- color: V.value.style.chart.backgroundColor,
936
- fillStyle: e.color,
937
- strokeColor: "transparent"
938
- });
939
- } else {
940
- let t = {
941
- x: e.coordinatesLine[0].x,
942
- y: r
943
- }, i = {
944
- x: e.coordinatesLine.at(-1).x,
945
- y: r
946
- };
947
- Oe(k.value, [
948
- t,
949
- ...e.coordinatesLine,
950
- i
951
- ], {
952
- fillColor: n(e.color, V.value.style.chart.area.opacity),
953
- strokeColor: "transparent"
954
- });
955
- }
956
- ir(e);
957
- return;
958
- }
959
- ir(e);
960
- }
961
- function or() {
962
- J.value.forEach((e, t) => {
963
- f(k.value, [{
964
- x: G.value.left,
965
- y: G.value.bottom - e.yOffset
966
- }, {
967
- x: G.value.right,
968
- y: G.value.bottom - e.yOffset
969
- }], {
970
- color: V.value.style.chart.grid.x.horizontalLines.color,
971
- lineWidth: 1
972
- });
973
- });
974
- }
975
- function sr() {
976
- let { left: e, top: t, width: n, height: r } = G.value, i = Y.value.start, a = Y.value.end - i, o = n / a, s = X.value.start - i, c = X.value.end - i, l = Math.max(0, Math.min(a, s)), u = Math.max(0, Math.min(a, c));
977
- Ae(k.value, [
978
- {
979
- x: e + l * o,
980
- y: t
981
- },
982
- {
983
- x: e + l * o + (u - l) * o,
984
- y: t
985
- },
986
- {
987
- x: e + l * o + (u - l) * o,
988
- y: t + r
989
- },
990
- {
991
- x: e + l * o,
992
- y: t + r
993
- }
994
- ], {
995
- fillColor: V.value.style.chart.zoom.preview.fill,
996
- strokeColor: V.value.style.chart.zoom.preview.stroke,
997
- lineDash: [
998
- ,
999
- ,
1000
- ,
1001
- ,
1002
- ].fill(V.value.style.chart.zoom.preview.strokeDasharray),
1003
- lineWidth: V.value.style.chart.zoom.preview.strokeWidth
1004
- });
1005
- }
1006
- function $() {
1007
- !B.value || !H.value || !k.value || (Vn(), P.value ? ((M.value !== null || R.value !== null) && V.value.style.chart.selector.show && $n(), tr(), U.value.stacked && V.value.style.chart.grid.x.showAxis && or(), zn.value.forEach((e) => {
1008
- (e.type === "line" || !e.type) && ar(e), F.value && (Hn(e), U.value.showDataLabels && [!0, void 0].includes(e.dataLabels) && Gn(e));
1009
- }), H.value && (Ot.value = ke(H.value))) : (Ot.value && (k.value.clearRect(0, 0, 1e4, 1e4), k.value.drawImage(Ot.value, 0, 0)), (M.value !== null || R.value !== null) && V.value.style.chart.selector.show && $n(), (M.value !== null || R.value !== null) && J.value.forEach((e) => {
1010
- let t = M.value ?? R.value, n = e.coordinatesLine[t];
1011
- (e.type === "line" || !e.type || e.type === "plot") && n && Number.isFinite(n.x) && Number.isFinite(n.y) && De(k.value, {
1012
- x: n.x,
1013
- y: n.y
1014
- }, A.value / 150 * V.value.style.chart.line.plots.radiusRatio, {
1015
- color: V.value.style.chart.backgroundColor,
1016
- fillStyle: e.color,
1017
- strokeColor: "transparent"
1018
- });
1019
- })), V.value.style.chart.grid.x.timeLabels.show && Qn(), V.value.style.chart.selector.show && V.value.style.chart.selector.showHorizontalSelector && er(), Wn(), Un(), V.value.style.chart.zoom.preview.enable && (Y.value.start !== X.value.start || Y.value.end !== X.value.end) && sr(), P.value = !1);
1020
- }
1021
- let cr = Te(() => {
1022
- F.value = !0, Bn();
1023
- }, W.value > 200 ? 10 : 1, !F.value);
1024
- function lr(e) {
1025
- if ([null, void 0].includes(M.value ?? R.value) || !e.coordinatesLine[M.value ?? R.value]) return !1;
1026
- let { y: t, value: n } = e.coordinatesLine[M.value ?? R.value];
1027
- return {
1028
- y: t,
1029
- value: n
1030
- };
1031
- }
1032
- function ur(e) {
1033
- if (!B.value || !H.value || gn.value) return;
1034
- let { left: t, top: n } = H.value.getBoundingClientRect(), r = e.clientX - t;
1035
- if (L.value = (e.clientY - n) * 2, (L.value < G.value.top || L.value > G.value.bottom) && (L.value = null), r * 2 < G.value.left || r * 2 > G.value.right) {
1036
- hr();
1037
- return;
1038
- }
1039
- let i = r * 2 - G.value.left, a = Math.floor(i / G.value.slot);
1040
- if (M.value = a, z.value = a, wt.value = !0, Wt.value = !1, !F.value) return;
1041
- let o = "", s = V.value.style.chart.tooltip.customFormat, c = J.value.map((e) => ({
1042
- shape: e.shape || null,
1043
- name: e.name,
1044
- color: e.color,
1045
- type: e.type || "line",
1046
- value: e.series.find((e, t) => t === M.value)
1047
- }));
1048
- Et.value = {
1049
- timeLabel: V.value.style.chart.grid.x.timeLabels.values.slice(Y.value.start, Y.value.end)[M.value] ? V.value.style.chart.tooltip.useDefaultTimeFormat ? Q.value.slice(Y.value.start, Y.value.end)[M.value]?.text : Zn.value[M.value]?.text : "",
1050
- datapoint: c,
1051
- seriesIndex: M.value,
1052
- series: J.value,
1053
- config: V.value
1054
- }, yr({
1055
- seriesIndex: M.value,
1056
- datapoint: c
1057
- }), ue(s) && te(() => s({
1058
- seriesIndex: M.value,
1059
- datapoint: c,
1060
- series: J.value,
1061
- config: V.value
1062
- })) ? Tt.value = s({
1063
- seriesIndex: M.value,
1064
- datapoint: c,
1065
- series: J.value,
1066
- config: V.value
1067
- }) : (V.value.style.chart.grid.x.timeLabels.values.slice(Y.value.start, Y.value.end)[M.value] ? o += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${V.value.style.chart.tooltip.borderColor}; width:100%">${V.value.style.chart.tooltip.useDefaultTimeFormat ? Q.value.slice(Y.value.start, Y.value.end)[M.value]?.text : Zn.value[M.value]?.text}</div>` : o += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${V.value.style.chart.tooltip.borderColor}; width:100%">${Q.value[M.value + Y.value.start]?.text ?? ""}</div>`, o += Tn.value.join(""), Tt.value = o), F.value = !1;
1068
- }
1069
- function dr(e) {
1070
- return J.value.map((t) => ({
1071
- shape: t.shape || null,
1072
- name: t.name,
1073
- color: t.color,
1074
- type: t.type || "line",
1075
- value: t.series.find((t, n) => n === e)
1076
- }));
1077
- }
1078
- function fr(e) {
1079
- let t = "", n = V.value.style.chart.tooltip.customFormat, r = dr(e);
1080
- return yr({
1081
- seriesIndex: e,
1082
- datapoint: r
1083
- }), ue(n) && te(() => n({
1084
- seriesIndex: e,
1085
- datapoint: r,
1086
- series: J.value,
1087
- config: V.value
1088
- })) ? n({
1089
- seriesIndex: e,
1090
- datapoint: r,
1091
- series: J.value,
1092
- config: V.value
1093
- }) : (V.value.style.chart.grid.x.timeLabels.values.slice(Y.value.start, Y.value.end)[e] ? t += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${V.value.style.chart.tooltip.borderColor}; width:100%">${V.value.style.chart.tooltip.useDefaultTimeFormat ? Q.value.slice(Y.value.start, Y.value.end)[e]?.text : Zn.value[e]?.text}</div>` : t += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${V.value.style.chart.tooltip.borderColor}; width:100%">${Q.value[e + Y.value.start]?.text ?? ""}</div>`, t += Tn.value.join(""), t);
1094
- }
1095
- function pr(e) {
1096
- if (!H.value || !G.value?.slot) return;
1097
- let t = H.value.getBoundingClientRect(), n = t.width / G.value.canvasWidth, r = t.height / G.value.canvasHeight, i = G.value.left + G.value.slot * e + G.value.slot / 2, a = G.value.top + G.value.height / 2;
1098
- Kt.value = {
1099
- x: t.left + i * n,
1100
- y: t.top + a * r
1101
- };
1102
- }
1103
- function mr(e, { fromKeyboard: t = !1 } = {}) {
1104
- !B.value || gn.value || e != null && (e < 0 || e >= Y.value.end - Y.value.start || (M.value = e, z.value = e, wt.value = !0, Wt.value = t, Tt.value = fr(e), t && pr(e), F.value = !1, $()));
1105
- }
1106
- function hr() {
1107
- wt.value = !1, M.value = null, z.value = null, Tt.value = "", L.value = null, Wt.value = !1, $();
1108
- }
1109
- function gr() {
1110
- Gt.value = !0;
1111
- }
1112
- function _r() {
1113
- Gt.value = !1, hr();
1114
- }
1115
- function vr(e) {
1116
- if (!H.value || Br.value || document.activeElement !== H.value) return;
1117
- let t = e.key === "ArrowLeft", n = e.key === "ArrowRight";
1118
- if (!t && !n) return;
1119
- let r = Y.value.end - Y.value.start;
1120
- if (r <= 0) return;
1121
- e.preventDefault(), e.stopPropagation();
1122
- let i = z.value;
1123
- i !== null && i >= 0 && i < r ? n ? (i += 1, i >= r && (i = 0)) : (--i, i < 0 && (i = r - 1)) : i = n ? 0 : r - 1, mr(i, { fromKeyboard: !0 });
1124
- }
1125
- function yr({ seriesIndex: e, datapoint: t }) {
1126
- let n = Y.value.start + e;
1127
- qt("selectX", {
1128
- dataset: t,
1129
- index: n,
1130
- indexLabel: ""
1131
- });
1132
- }
1133
- w(() => E.selectedXIndex, (e) => {
1134
- if ([null, void 0].includes(E.selectedXIndex)) {
1135
- hr();
1136
- return;
1137
- }
1138
- let t = e - Y.value.start;
1139
- t < 0 || e >= Y.value.end ? hr() : mr(t, { fromKeyboard: !1 });
1140
- }, { immediate: !0 }), w(() => M.value, (e) => {
1141
- cr();
1142
- }), w(() => Y.value, (e) => {
1143
- P.value = !0, $();
1144
- }, { deep: !0 }), w(() => X.value, (e) => {
1145
- $();
1146
- }, { deep: !0 }), w(() => U.value.showDataLabels, (e) => {
1147
- P.value = !0, $();
1148
- }), w(() => L.value, (e) => {
1149
- e && $();
1150
- }), w(() => U.value.stacked, (e) => {
1151
- P.value = !0, F.value = !0, cr();
1152
- });
1153
- function br() {
1154
- hr();
1155
- }
1156
- let xr = $e(null), Sr = $e(null), Cr = $e(null);
1157
- Ze(() => {
1158
- Lt.value = !0, wr();
1159
- });
1160
- function wr() {
1161
- if (ie(E.dataset) && se({
1162
- componentName: "VueUiXyCanvas",
1163
- type: "dataset",
1164
- debug: Qt.value
1165
- }), qe(() => {
1166
- H.value && !k.value && (k.value = H.value.getContext("2d", { willReadFrequently: !0 })), k.value && B.value && (P.value = !0, F.value = !0, Bn());
1167
- }), V.value.responsive) {
1168
- let e = Ee(() => {
1169
- let { width: e, height: t } = je({
1170
- chart: O.value,
1171
- title: V.value.style.chart.title.text ? jt.value : null,
1172
- legend: V.value.style.chart.legend.show ? Mt.value : null,
1173
- slicer: V.value.style.chart.zoom.show && W.value > 6 ? I.value?.$el : null,
1174
- source: Nt.value
1175
- });
1176
- requestAnimationFrame(() => {
1177
- ln.value = `${e} / ${t}`;
1178
- });
1179
- });
1180
- xr.value && (Sr.value && xr.value.unobserve(Sr.value), xr.value.disconnect()), xr.value = new ResizeObserver(e), Sr.value = O.value.parentNode, xr.value.observe(Sr.value);
1181
- }
1182
- Cr.value && Cr.value.disconnect(), Cr.value = new ResizeObserver(async (e) => {
1183
- for (let t of e) t.contentBoxSize && Ct.value && (P.value = !0, cr());
1184
- }), Cr.value.observe(Ct.value), jn();
1185
- }
1186
- Xe(() => {
1187
- Cr.value && Cr.value.disconnect(), xr.value && (Sr.value && xr.value.unobserve(Sr.value), xr.value.disconnect());
1188
- });
1189
- function Tr() {
1190
- N.value.length ? N.value = [] : Ar.value.forEach((e, t) => {
1191
- N.value.push(t);
1192
- }), P.value = !0, cr(), qt("selectLegend", J.value);
1193
- }
1194
- function Er(e) {
1195
- N.value.includes(e) ? N.value = N.value.filter((t) => t !== e) : N.value.push(e), P.value = !0, cr(), qt("selectLegend", J.value);
1196
- }
1197
- function Dr(e) {
1198
- return q.value.length ? q.value.find((t) => t.name === e) || (Qt.value && console.warn(`VueUiXyCanvas - Series name not found "${e}"`), null) : (Qt.value && console.warn("VueUiXyCanvas - There are no series to show."), null);
1199
- }
1200
- function Or(e) {
1201
- let t = Dr(e);
1202
- t !== null && N.value.includes(t.absoluteIndex) && Er(t.absoluteIndex);
1203
- }
1204
- function kr(e) {
1205
- let t = Dr(e);
1206
- t !== null && (N.value.includes(t.absoluteIndex) || Er(t.absoluteIndex));
1207
- }
1208
- let Ar = m(() => q.value.map((e, t) => ({
1209
- ...e,
1210
- name: e.name,
1211
- color: u(e.color) || hn.value[t] || c[t] || c[t % c.length],
1212
- shape: e.shape || "circle",
1213
- prefix: e.prefix || "",
1214
- suffix: e.suffix || "",
1215
- rounding: e.rounding || 0
1216
- })).map((e) => ({
1217
- ...e,
1218
- opacity: N.value.includes(e.absoluteIndex) ? .5 : 1,
1219
- segregate: () => Er(e.absoluteIndex),
1220
- isSegregated: N.value.includes(e.absoluteIndex)
1221
- }))), jr = m(() => ({
1222
- cy: "donut-div-legend",
1223
- backgroundColor: V.value.style.chart.legend.backgroundColor,
1224
- color: V.value.style.chart.legend.color,
1225
- fontSize: V.value.style.chart.legend.fontSize,
1226
- paddingBottom: 12,
1227
- fontWeight: V.value.style.chart.legend.bold ? "bold" : ""
1228
- })), Mr = m(() => {
1229
- let e = [""].concat(J.value.map((e) => e.name), " <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2\" /></svg>"), t = [];
1230
- for (let e = 0; e < W.value; e += 1) {
1231
- let n = J.value.map((t) => t.series[e] ?? 0).reduce((e, t) => e + t, 0);
1232
- t.push([V.value.style.chart.grid.x.timeLabels.values.slice(Y.value.start, Y.value.end)[e] ? Q?.value?.slice(Y.value.start, Y.value.end)?.[e]?.text ?? e + 1 : e + 1].concat(J.value.map((t) => (t.series[e] ?? 0).toFixed(V.value.table.rounding)), (n ?? 0).toFixed(V.value.table.rounding)));
1233
- }
1234
- let n = {
1235
- th: {
1236
- backgroundColor: V.value.table.th.backgroundColor,
1237
- color: V.value.table.th.color,
1238
- outline: V.value.table.th.outline
1239
- },
1240
- td: {
1241
- backgroundColor: V.value.table.td.backgroundColor,
1242
- color: V.value.table.td.color,
1243
- outline: V.value.table.td.outline
1244
- },
1245
- breakpoint: V.value.table.responsiveBreakpoint
1246
- }, r = [V.value.table.columnNames.period].concat(J.value.map((e) => e.name), V.value.table.columnNames.total);
1247
- return {
1248
- head: e,
1249
- body: t.slice(0, Y.value.end - Y.value.start),
1250
- config: n,
1251
- colNames: r
1252
- };
1253
- }), Nr = m(() => {
1254
- if (J.value.length === 0) return {
1255
- head: [],
1256
- body: [],
1257
- config: {},
1258
- columnNames: []
1259
- };
1260
- let e = J.value.map((e) => ({
1261
- label: e.name,
1262
- color: e.color,
1263
- type: e.type
1264
- })), t = [];
1265
- for (let e = Y.value.start; e < Y.value.end; e += 1) {
1266
- let n = [V.value.style.chart.grid.x.timeLabels.values[e] ? Q.value[e].text : e + 1];
1267
- J.value.forEach((t) => {
1268
- n.push(Number((t.series[e] || 0).toFixed(V.value.table.rounding)));
1269
- }), t.push(n);
1270
- }
1271
- return {
1272
- head: e,
1273
- body: t
1274
- };
1275
- });
1276
- function Pr(e = null) {
1277
- let n = [
1278
- [V.value.style.chart.title.text],
1279
- [V.value.style.chart.title.subtitle.text],
1280
- [""]
1281
- ], i = ["", ...Nr.value.head.map((e) => e.label)], a = Nr.value.body, o = n.concat([i]).concat(a), s = r(o);
1282
- e ? e(s) : t({
1283
- csvContent: s,
1284
- title: V.value.style.chart.title.text || "vue-ui-xy-canvas"
1285
- });
1286
- }
1287
- function Fr() {
1288
- return J.value;
1289
- }
1290
- function Ir() {
1291
- U.value.showTable = !U.value.showTable;
1292
- }
1293
- function Lr() {
1294
- U.value.showDataLabels = !U.value.showDataLabels;
1295
- }
1296
- function Rr() {
1297
- U.value.stacked = !U.value.stacked;
1298
- }
1299
- function zr() {
1300
- U.value.showTooltip = !U.value.showTooltip;
1301
- }
1302
- let Br = x(!1);
1303
- function Vr() {
1304
- Br.value = !Br.value;
1305
- }
1306
- async function Hr({ scale: e = 2 } = {}) {
1307
- if (!O.value) return;
1308
- let { imageUri: t, base64: n } = await Se({
1309
- domElement: O.value,
1310
- base64: !0,
1311
- img: !0,
1312
- scale: e
1313
- }), r = O.value.getBoundingClientRect(), i = {
1314
- width: r.width,
1315
- height: r.height,
1316
- aspectRatio: r.height ? r.width / r.height : 0
1317
- }, a = await ne(t, e) ?? i;
1318
- return {
1319
- imageUri: t,
1320
- base64: n,
1321
- title: V.value.style.chart.title.text,
1322
- ...a
1323
- };
1324
- }
1325
- let Ur = m(() => {
1326
- let e = V.value.table.useDialog && !V.value.table.show, t = U.value.showTable;
1327
- return {
1328
- component: e ? yt : Pe,
1329
- title: `${V.value.style.chart.title.text}${V.value.style.chart.title.subtitle.text ? `: ${V.value.style.chart.title.subtitle.text}` : ""}`,
1330
- props: e ? {
1331
- backgroundColor: V.value.table.th.backgroundColor,
1332
- color: V.value.table.th.color,
1333
- headerColor: V.value.table.th.color,
1334
- headerBg: V.value.table.th.backgroundColor,
1335
- isFullscreen: At.value,
1336
- fullscreenParent: O.value,
1337
- forcedWidth: Math.min(800, window.innerWidth * .8),
1338
- isCursorPointer: Zt.value
1339
- } : {
1340
- hideDetails: !0,
1341
- config: {
1342
- open: t,
1343
- maxHeight: 1e4,
1344
- body: {
1345
- backgroundColor: V.value.style.chart.backgroundColor,
1346
- color: V.value.style.chart.color
1347
- },
1348
- head: {
1349
- backgroundColor: V.value.style.chart.backgroundColor,
1350
- color: V.value.style.chart.color
1351
- }
1352
- }
1353
- }
1354
- };
1355
- });
1356
- w(() => U.value.showTable, (e) => {
1357
- V.value.table.show || (e && V.value.table.useDialog && Rt.value ? Rt.value.open() : "close" in Rt.value && Rt.value.close());
1358
- });
1359
- function Wr() {
1360
- U.value.showTable = !1, zt.value && zt.value.setTableIconState(!1);
1361
- }
1362
- function Gr(e) {
1363
- if (e?.stage === "start") {
1364
- Ut.value = !0;
1365
- return;
1366
- }
1367
- if (e?.stage === "end") {
1368
- Ut.value = !1;
1369
- return;
1370
- }
1371
- pn();
1372
- }
1373
- async function Kr() {
1374
- if (qt("copyAlt", {
1375
- config: V.value,
1376
- dataset: J.value
1377
- }), !V.value.userOptions.callbacks.altCopy) {
1378
- console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
1379
- return;
1380
- }
1381
- await Promise.resolve(V.value.userOptions.callbacks.altCopy({
1382
- config: V.value,
1383
- dataset: J.value
1384
- }));
1385
- }
1386
- return we({
1387
- getData: Fr,
1388
- getImage: Hr,
1389
- generateCsv: Pr,
1390
- generatePdf: fn,
1391
- generateImage: pn,
1392
- hideSeries: kr,
1393
- showSeries: Or,
1394
- toggleTable: Ir,
1395
- toggleLabels: Lr,
1396
- toggleStack: Rr,
1397
- toggleTooltip: zr,
1398
- toggleAnnotator: Vr,
1399
- toggleFullscreen: mn,
1400
- copyAlt: Kr
1401
- }), (t, n) => (b(), Ve("div", {
1402
- style: Ye(`width:100%; position:relative; ${V.value.responsive ? "height: 100%" : ""}; background:${V.value.style.chart.backgroundColor};`),
1403
- ref_key: "xy",
1404
- ref: O,
1405
- id: `xy_canvas_${D.value}`,
1406
- class: Je(`vue-data-ui-component vue-ui-xy-canvas ${At.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
1407
- onMouseenter: on,
1408
- onMouseleave: sn
1409
- }, [
1410
- _("div", {
1411
- id: `chart-instructions-${D.value}`,
1412
- class: "sr-only"
1413
- }, [_("p", null, et(V.value.a11y.translations.keyboardNavigation), 1)], 8, ot),
1414
- _("div", st, et(Xt.value), 1),
1415
- V.value.style.chart.title.text ? (b(), Ve("div", {
1416
- key: 0,
1417
- ref_key: "chartTitle",
1418
- ref: jt,
1419
- style: Ye(`width:100%;background:${V.value.style.chart.backgroundColor};`)
1420
- }, [(b(), h(Ce, {
1421
- key: `title_${Pt.value}`,
1422
- config: {
1423
- title: {
1424
- cy: "xy-canvas-title",
1425
- ...V.value.style.chart.title
1426
- },
1427
- subtitle: {
1428
- cy: "xy-canvas-subtitle",
1429
- ...V.value.style.chart.title.subtitle
1430
- }
1431
- }
1432
- }, null, 8, ["config"]))], 4)) : g("", !0),
1433
- _("div", { id: `legend-top-${D.value}` }, null, 8, ct),
1434
- V.value.userOptions.show && B.value && (C(an) || C(nn)) ? (b(), h(C(_t), {
1435
- ref_key: "userOptionsRef",
1436
- ref: zt,
1437
- key: `user_option_${kt.value}`,
1438
- backgroundColor: V.value.style.chart.backgroundColor,
1439
- color: V.value.style.chart.color,
1440
- isPrinting: C(un),
1441
- isImaging: C(dn),
1442
- uid: D.value,
1443
- hasTooltip: V.value.userOptions.buttons.tooltip && V.value.style.chart.tooltip.show,
1444
- hasPdf: V.value.userOptions.buttons.pdf,
1445
- hasImg: V.value.userOptions.buttons.img,
1446
- hasXls: V.value.userOptions.buttons.csv,
1447
- hasLabel: V.value.userOptions.buttons.labels,
1448
- hasStack: e.dataset.length > 1 && V.value.userOptions.buttons.stack,
1449
- hasFullscreen: V.value.userOptions.buttons.fullscreen,
1450
- hasAltCopy: V.value.userOptions.buttons.altCopy,
1451
- hasTable: Y.value.end - Y.value.start <= 730 && V.value.userOptions.buttons.table,
1452
- isFullscreen: At.value,
1453
- isTooltip: U.value.showTooltip,
1454
- isStacked: U.value.stacked,
1455
- titles: { ...V.value.userOptions.buttonTitles },
1456
- chartElement: O.value,
1457
- position: V.value.userOptions.position,
1458
- hasAnnotator: V.value.userOptions.buttons.annotator,
1459
- isAnnotation: Br.value,
1460
- callbacks: V.value.userOptions.callbacks,
1461
- printScale: V.value.userOptions.print.scale,
1462
- tableDialog: V.value.table.useDialog,
1463
- isCursorPointer: Zt.value,
1464
- onToggleFullscreen: mn,
1465
- onGeneratePdf: C(fn),
1466
- onGenerateCsv: Pr,
1467
- onGenerateImage: Gr,
1468
- onToggleTable: Ir,
1469
- onToggleLabels: Lr,
1470
- onToggleStack: Rr,
1471
- onToggleTooltip: zr,
1472
- onToggleAnnotator: Vr,
1473
- onCopyAlt: Kr,
1474
- style: Ye({ visibility: C(an) ? C(nn) ? "visible" : "hidden" : "visible" })
1475
- }, He({ _: 2 }, [
1476
- t.$slots.menuIcon ? {
1477
- name: "menuIcon",
1478
- fn: T(({ isOpen: e, color: n }) => [S(t.$slots, "menuIcon", y(v({
1479
- isOpen: e,
1480
- color: n
1481
- })), void 0, !0)]),
1482
- key: "0"
1483
- } : void 0,
1484
- t.$slots.optionTooltip ? {
1485
- name: "optionTooltip",
1486
- fn: T(() => [S(t.$slots, "optionTooltip", {}, void 0, !0)]),
1487
- key: "1"
1488
- } : void 0,
1489
- t.$slots.optionPdf ? {
1490
- name: "optionPdf",
1491
- fn: T(() => [S(t.$slots, "optionPdf", {}, void 0, !0)]),
1492
- key: "2"
1493
- } : void 0,
1494
- t.$slots.optionCsv ? {
1495
- name: "optionCsv",
1496
- fn: T(() => [S(t.$slots, "optionCsv", {}, void 0, !0)]),
1497
- key: "3"
1498
- } : void 0,
1499
- t.$slots.optionImg ? {
1500
- name: "optionImg",
1501
- fn: T(() => [S(t.$slots, "optionImg", {}, void 0, !0)]),
1502
- key: "4"
1503
- } : void 0,
1504
- t.$slots.optionTable ? {
1505
- name: "optionTable",
1506
- fn: T(() => [S(t.$slots, "optionTable", {}, void 0, !0)]),
1507
- key: "5"
1508
- } : void 0,
1509
- t.$slots.optionLabels ? {
1510
- name: "optionLabels",
1511
- fn: T(() => [S(t.$slots, "optionLabels", {}, void 0, !0)]),
1512
- key: "6"
1513
- } : void 0,
1514
- t.$slots.optionStack ? {
1515
- name: "optionStack",
1516
- fn: T(() => [S(t.$slots, "optionStack", {}, void 0, !0)]),
1517
- key: "7"
1518
- } : void 0,
1519
- t.$slots.optionFullscreen ? {
1520
- name: "optionFullscreen",
1521
- fn: T(({ toggleFullscreen: e, isFullscreen: n }) => [S(t.$slots, "optionFullscreen", y(v({
1522
- toggleFullscreen: e,
1523
- isFullscreen: n
1524
- })), void 0, !0)]),
1525
- key: "8"
1526
- } : void 0,
1527
- t.$slots.optionAnnotator ? {
1528
- name: "optionAnnotator",
1529
- fn: T(({ toggleAnnotator: e, isAnnotator: n }) => [S(t.$slots, "optionAnnotator", y(v({
1530
- toggleAnnotator: e,
1531
- isAnnotator: n
1532
- })), void 0, !0)]),
1533
- key: "9"
1534
- } : void 0,
1535
- t.$slots.optionAltCopy ? {
1536
- name: "optionAltCopy",
1537
- fn: T(({ altCopy: e }) => [S(t.$slots, "optionAltCopy", y(v({ altCopy: e })), void 0, !0)]),
1538
- key: "10"
1539
- } : void 0,
1540
- t.$slots["custom-menu-before"] ? {
1541
- name: "custom-menu-before",
1542
- fn: T(() => [S(t.$slots, "custom-menu-before", {}, void 0, !0)]),
1543
- key: "11"
1544
- } : void 0,
1545
- t.$slots["custom-menu-after"] ? {
1546
- name: "custom-menu-after",
1547
- fn: T(() => [S(t.$slots, "custom-menu-after", {}, void 0, !0)]),
1548
- key: "12"
1549
- } : void 0
1550
- ]), 1032, /* @__PURE__ */ "backgroundColor.color.isPrinting.isImaging.uid.hasTooltip.hasPdf.hasImg.hasXls.hasLabel.hasStack.hasFullscreen.hasAltCopy.hasTable.isFullscreen.isTooltip.isStacked.titles.chartElement.position.hasAnnotator.isAnnotation.callbacks.printScale.tableDialog.isCursorPointer.onGeneratePdf.style".split("."))) : g("", !0),
1551
- _("div", {
1552
- class: "vue-ui-xy-canvas",
1553
- style: Ye(`position: relative; aspect-ratio: ${ln.value}`),
1554
- ref_key: "container",
1555
- ref: Ct
1556
- }, [
1557
- _("canvas", {
1558
- ref_key: "canvas",
1559
- ref: H,
1560
- "aria-label": Yt.value,
1561
- "aria-describedby": `chart-instructions-${D.value}`,
1562
- role: "img",
1563
- "aria-live": "polite",
1564
- tabindex: "0",
1565
- style: {
1566
- width: "100%",
1567
- height: "100%"
1568
- },
1569
- onMousemove: n[0] ||= (e) => ur(e),
1570
- onMouseleave: br,
1571
- onFocus: gr,
1572
- onBlur: _r,
1573
- onKeydown: vr
1574
- }, null, 40, lt),
1575
- t.$slots.hint ? (b(), Ve("div", ut, [S(t.$slots, "hint", y(v({
1576
- hint: V.value.a11y.translations.keyboardNavigation,
1577
- isVisible: Gt.value
1578
- })), void 0, !0)])) : g("", !0),
1579
- S(t.$slots, "skeleton", {}, () => [C(en) ? (b(), h(ye, { key: 0 })) : g("", !0)], !0),
1580
- We(C(ht), {
1581
- teleportTo: V.value.style.chart.tooltip.teleportTo,
1582
- show: U.value.showTooltip && wt.value,
1583
- backgroundColor: V.value.style.chart.tooltip.backgroundColor,
1584
- color: V.value.style.chart.tooltip.color,
1585
- fontSize: V.value.style.chart.tooltip.fontSize,
1586
- borderRadius: V.value.style.chart.tooltip.borderRadius,
1587
- borderColor: V.value.style.chart.tooltip.borderColor,
1588
- borderWidth: V.value.style.chart.tooltip.borderWidth,
1589
- position: V.value.style.chart.tooltip.position,
1590
- offsetX: V.value.style.chart.tooltip.offsetX,
1591
- offsetY: V.value.style.chart.tooltip.offsetY,
1592
- parent: t.$refs.xy,
1593
- content: Tt.value,
1594
- isFullscreen: At.value,
1595
- backgroundOpacity: V.value.style.chart.tooltip.backgroundOpacity,
1596
- isCustom: C(ue)(V.value.style.chart.tooltip.customFormat),
1597
- smooth: V.value.style.chart.tooltip.smooth,
1598
- backdropFilter: V.value.style.chart.tooltip.backdropFilter,
1599
- smoothForce: V.value.style.chart.tooltip.smoothForce,
1600
- smoothSnapThreshold: V.value.style.chart.tooltip.smoothSnapThreshold,
1601
- isA11yMode: Wt.value,
1602
- a11yPosition: Kt.value
1603
- }, {
1604
- "tooltip-before": T(() => [S(t.$slots, "tooltip-before", y(v({ ...Et.value })), void 0, !0)]),
1605
- tooltip: T(() => [S(t.$slots, "tooltip", y(v({ ...Et.value })), void 0, !0)]),
1606
- "tooltip-after": T(() => [S(t.$slots, "tooltip-after", y(v({ ...Et.value })), void 0, !0)]),
1607
- _: 3
1608
- }, 8, [
1609
- "teleportTo",
1610
- "show",
1611
- "backgroundColor",
1612
- "color",
1613
- "fontSize",
1614
- "borderRadius",
1615
- "borderColor",
1616
- "borderWidth",
1617
- "position",
1618
- "offsetX",
1619
- "offsetY",
1620
- "parent",
1621
- "content",
1622
- "isFullscreen",
1623
- "backgroundOpacity",
1624
- "isCustom",
1625
- "smooth",
1626
- "backdropFilter",
1627
- "smoothForce",
1628
- "smoothSnapThreshold",
1629
- "isA11yMode",
1630
- "a11yPosition"
1631
- ])
1632
- ], 4),
1633
- V.value.style.chart.zoom.show && W.value > 6 && B.value && Vt.value && !C(en) ? (b(), h(Ne, {
1634
- key: 2,
1635
- ref_key: "chartSlicer",
1636
- ref: I,
1637
- "data-dom-to-png-ignore-layout": "",
1638
- allMinimaps: On.value,
1639
- background: V.value.style.chart.zoom.color,
1640
- borderColor: V.value.style.chart.backgroundColor,
1641
- customFormat: V.value.style.chart.zoom.customFormat,
1642
- cutNullValues: En.value,
1643
- enableRangeHandles: V.value.style.chart.zoom.enableRangeHandles,
1644
- enableSelectionDrag: V.value.style.chart.zoom.enableSelectionDrag,
1645
- end: Y.value.end,
1646
- focusOnDrag: V.value.style.chart.zoom.focusOnDrag,
1647
- focusRangeRatio: V.value.style.chart.zoom.focusRangeRatio,
1648
- fontSize: V.value.style.chart.zoom.fontSize,
1649
- immediate: !V.value.style.chart.zoom.preview.enable,
1650
- inputColor: V.value.style.chart.zoom.color,
1651
- isPreview: Mn.value,
1652
- labelLeft: V.value.style.chart.grid.x.timeLabels.values[Y.value.start] ? Q.value[Y.value.start]?.text : "",
1653
- labelRight: V.value.style.chart.grid.x.timeLabels.values[Y.value.end - 1] ? Q.value[Y.value.end - 1]?.text : "",
1654
- max: W.value,
1655
- min: 0,
1656
- minimap: Dn.value,
1657
- minimapCompact: V.value.style.chart.zoom.minimap.compact,
1658
- minimapFrameColor: V.value.style.chart.zoom.minimap.frameColor,
1659
- minimapIndicatorColor: V.value.style.chart.zoom.minimap.indicatorColor,
1660
- minimapLineColor: V.value.style.chart.zoom.minimap.lineColor,
1661
- minimapMerged: V.value.style.chart.zoom.minimap.merged,
1662
- minimapSelectedColor: V.value.style.chart.zoom.minimap.selectedColor,
1663
- minimapSelectedColorOpacity: V.value.style.chart.zoom.minimap.selectedColorOpacity,
1664
- minimapSelectedIndex: M.value,
1665
- minimapSelectionRadius: V.value.style.chart.zoom.minimap.selectionRadius,
1666
- preciseLabels: Xn.value?.length ? Xn.value : Q.value,
1667
- refreshEndPoint: V.value.style.chart.zoom.endIndex === null ? W.value : V.value.style.chart.zoom.endIndex + 1,
1668
- refreshStartPoint: V.value.style.chart.zoom.startIndex === null ? 0 : V.value.style.chart.zoom.startIndex,
1669
- selectColor: V.value.style.chart.zoom.highlightColor,
1670
- selectedSeries: q.value,
1671
- smoothMinimap: V.value.style.chart.zoom.minimap.smooth,
1672
- start: Y.value.start,
1673
- timeLabels: Q.value,
1674
- usePreciseLabels: V.value.style.chart.grid.x.timeLabels.datetimeFormatter.enable && !V.value.style.chart.zoom.useDefaultFormat,
1675
- textColor: V.value.style.chart.color,
1676
- useResetSlot: V.value.style.chart.zoom.useResetSlot,
1677
- valueEnd: Y.value.end,
1678
- valueStart: Y.value.start,
1679
- verticalHandles: V.value.style.chart.zoom.minimap.verticalHandles,
1680
- maxWidth: V.value.style.chart.zoom.maxWidth,
1681
- minimapLeftInsetRatio: G.value.canvasWidth > 0 && V.value.style.chart.zoom.autoFit ? G.value.left / G.value.canvasWidth : null,
1682
- minimapRightInsetRatio: G.value.canvasWidth > 0 && V.value.style.chart.zoom.autoFit ? (G.value.canvasWidth - G.value.right) / G.value.canvasWidth : null,
1683
- additionalMinimapHeight: V.value.style.chart.zoom.minimap.additionalHeight,
1684
- handleType: V.value.style.chart.zoom.minimap.handleType,
1685
- handleIconColor: V.value.style.chart.zoom.minimap.handleIconColor,
1686
- handleBorderWidth: V.value.style.chart.zoom.minimap.handleBorderWidth,
1687
- handleBorderColor: V.value.style.chart.zoom.minimap.handleBorderColor,
1688
- handleFill: V.value.style.chart.zoom.minimap.handleFill,
1689
- handleWidth: V.value.style.chart.zoom.minimap.handleWidth,
1690
- onFutureEnd: n[1] ||= (e) => Nn("end", e),
1691
- onFutureStart: n[2] ||= (e) => Nn("start", e),
1692
- onReset: jn,
1693
- onTrapMouse: _n,
1694
- "onUpdate:end": In,
1695
- "onUpdate:start": Fn
1696
- }, {
1697
- "reset-action": T(({ reset: e }) => [S(t.$slots, "reset-action", y(v({ reset: e })), void 0, !0)]),
1698
- _: 3
1699
- }, 8, /* @__PURE__ */ "allMinimaps.background.borderColor.customFormat.cutNullValues.enableRangeHandles.enableSelectionDrag.end.focusOnDrag.focusRangeRatio.fontSize.immediate.inputColor.isPreview.labelLeft.labelRight.max.minimap.minimapCompact.minimapFrameColor.minimapIndicatorColor.minimapLineColor.minimapMerged.minimapSelectedColor.minimapSelectedColorOpacity.minimapSelectedIndex.minimapSelectionRadius.preciseLabels.refreshEndPoint.refreshStartPoint.selectColor.selectedSeries.smoothMinimap.start.timeLabels.usePreciseLabels.textColor.useResetSlot.valueEnd.valueStart.verticalHandles.maxWidth.minimapLeftInsetRatio.minimapRightInsetRatio.additionalMinimapHeight.handleType.handleIconColor.handleBorderWidth.handleBorderColor.handleFill.handleWidth".split("."))) : g("", !0),
1700
- _("div", { id: `legend-bottom-${D.value}` }, null, 8, dt),
1701
- Lt.value && (V.value.style.chart.legend.show || t.$slots.legend) ? (b(), h(Be, {
1702
- key: 3,
1703
- to: V.value.style.chart.legend.position === "top" ? `#legend-top-${D.value}` : `#legend-bottom-${D.value}`
1704
- }, [_("div", {
1705
- ref_key: "chartLegend",
1706
- ref: Mt
1707
- }, [S(t.$slots, "legend", { legend: Ar.value }, () => [V.value.style.chart.legend.show && B.value ? (b(), h(Re, {
1708
- legendSet: Ar.value,
1709
- config: jr.value,
1710
- key: `legend_${It.value}`,
1711
- isCursorPointer: Zt.value,
1712
- onClickMarker: n[3] ||= ({ i: e }) => Er(e)
1713
- }, {
1714
- item: T(({ legend: e, index: t }) => [_("div", {
1715
- onClick: (t) => e.segregate(),
1716
- style: Ye(`opacity:${N.value.includes(t) ? .5 : 1}`)
1717
- }, et(e.name), 13, ft)]),
1718
- legendToggle: T(() => [Ar.value.length > 2 && V.value.style.chart.legend.selectAllToggle.show && !C(en) ? (b(), h(Fe, {
1719
- key: 0,
1720
- backgroundColor: V.value.style.chart.legend.selectAllToggle.backgroundColor,
1721
- color: V.value.style.chart.legend.selectAllToggle.color,
1722
- fontSize: V.value.style.chart.legend.fontSize,
1723
- checked: N.value.length > 0,
1724
- isCursorPointer: Zt.value,
1725
- onToggle: Tr
1726
- }, null, 8, [
1727
- "backgroundColor",
1728
- "color",
1729
- "fontSize",
1730
- "checked",
1731
- "isCursorPointer"
1732
- ])) : g("", !0)]),
1733
- _: 1
1734
- }, 8, [
1735
- "legendSet",
1736
- "config",
1737
- "isCursorPointer"
1738
- ])) : g("", !0)], !0)], 512)], 8, ["to"])) : g("", !0),
1739
- t.$slots.watermark ? (b(), Ve("div", pt, [S(t.$slots, "watermark", y(v({ isPrinting: C(un) || C(dn) || Ut.value })), void 0, !0)])) : g("", !0),
1740
- t.$slots.source ? (b(), Ve("div", {
1741
- key: 5,
1742
- ref_key: "source",
1743
- ref: Nt,
1744
- dir: "auto"
1745
- }, [S(t.$slots, "source", {}, void 0, !0)], 512)) : g("", !0),
1746
- B.value && V.value.userOptions.buttons.table ? (b(), h(Qe(Ur.value.component), Ke({ key: 6 }, Ur.value.props, {
1747
- ref_key: "tableUnit",
1748
- ref: Rt,
1749
- onClose: Wr
1750
- }), He({
1751
- content: T(() => [(b(), h(C(gt), {
1752
- key: `table_${Ft.value}`,
1753
- colNames: Mr.value.colNames,
1754
- head: Mr.value.head,
1755
- body: Mr.value.body,
1756
- config: Mr.value.config,
1757
- title: V.value.table.useDialog ? "" : Ur.value.title,
1758
- withCloseButton: !V.value.table.useDialog,
1759
- isCursorPointer: Zt.value,
1760
- onClose: Wr
1761
- }, {
1762
- th: T(({ th: e }) => [_("div", { innerHTML: e }, null, 8, mt)]),
1763
- td: T(({ td: e }) => [Ue(et(e), 1)]),
1764
- _: 1
1765
- }, 8, [
1766
- "colNames",
1767
- "head",
1768
- "body",
1769
- "config",
1770
- "title",
1771
- "withCloseButton",
1772
- "isCursorPointer"
1773
- ]))]),
1774
- _: 2
1775
- }, [V.value.table.useDialog ? {
1776
- name: "title",
1777
- fn: T(() => [Ue(et(Ur.value.title), 1)]),
1778
- key: "0"
1779
- } : void 0, V.value.table.useDialog ? {
1780
- name: "actions",
1781
- fn: T(() => [_("button", {
1782
- tabindex: "0",
1783
- class: "vue-ui-user-options-button",
1784
- onClick: n[4] ||= (e) => Pr(V.value.userOptions.callbacks.csv),
1785
- style: Ye({ cursor: Zt.value ? "pointer" : "default" })
1786
- }, [We(Me, {
1787
- name: "fileCsv",
1788
- stroke: Ur.value.props.color
1789
- }, null, 8, ["stroke"])], 4)]),
1790
- key: "1"
1791
- } : void 0]), 1040)) : g("", !0),
1792
- V.value.userOptions.buttons.annotator && J.value.length ? (b(), h(C(vt), {
1793
- key: 7,
1794
- parent: O.value,
1795
- backgroundColor: V.value.style.chart.backgroundColor,
1796
- color: V.value.style.chart.color,
1797
- active: Br.value,
1798
- isCursorPointer: Zt.value,
1799
- onClose: Vr
1800
- }, {
1801
- "annotator-action-close": T(() => [S(t.$slots, "annotator-action-close", {}, void 0, !0)]),
1802
- "annotator-action-color": T(({ color: e }) => [S(t.$slots, "annotator-action-color", y(v({ color: e })), void 0, !0)]),
1803
- "annotator-action-draw": T(({ mode: e }) => [S(t.$slots, "annotator-action-draw", y(v({ mode: e })), void 0, !0)]),
1804
- "annotator-action-undo": T(({ disabled: e }) => [S(t.$slots, "annotator-action-undo", y(v({ disabled: e })), void 0, !0)]),
1805
- "annotator-action-redo": T(({ disabled: e }) => [S(t.$slots, "annotator-action-redo", y(v({ disabled: e })), void 0, !0)]),
1806
- "annotator-action-delete": T(({ disabled: e }) => [S(t.$slots, "annotator-action-delete", y(v({ disabled: e })), void 0, !0)]),
1807
- _: 3
1808
- }, 8, [
1809
- "parent",
1810
- "backgroundColor",
1811
- "color",
1812
- "active",
1813
- "isCursorPointer"
1814
- ])) : g("", !0)
1815
- ], 46, at));
1816
- }
1817
- }, [["__scopeId", "data-v-366a5f0a"]]);
1818
- //#endregion
1819
- export { it as n, ht as t };