@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.3

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 (450) hide show
  1. package/BarChart/AnimatedBarElement.d.ts +38 -8
  2. package/BarChart/AnimatedBarElement.js +5 -5
  3. package/BarChart/BarChart.js +2 -0
  4. package/BarChart/BarClipPath.d.ts +19 -1
  5. package/BarChart/BarClipPath.js +84 -17
  6. package/BarChart/BarElement.d.ts +9 -20
  7. package/BarChart/BarElement.js +29 -26
  8. package/BarChart/BarLabel/BarLabel.d.ts +27 -854
  9. package/BarChart/BarLabel/BarLabel.js +32 -5
  10. package/BarChart/BarLabel/BarLabel.types.d.ts +2 -0
  11. package/BarChart/BarLabel/BarLabelItem.d.ts +24 -0
  12. package/BarChart/BarLabel/BarLabelItem.js +18 -6
  13. package/BarChart/BarLabel/BarLabelPlot.js +16 -46
  14. package/BarChart/BarLabel/barLabelClasses.d.ts +3 -1
  15. package/BarChart/BarLabel/barLabelClasses.js +4 -3
  16. package/BarChart/BarPlot.js +37 -61
  17. package/BarChart/barElementClasses.d.ts +21 -0
  18. package/BarChart/barElementClasses.js +29 -0
  19. package/BarChart/getRadius.d.ts +1 -1
  20. package/BarChart/index.d.ts +2 -1
  21. package/BarChart/index.js +11 -0
  22. package/BarChart/seriesConfig/index.js +3 -1
  23. package/BarChart/seriesConfig/tooltip.d.ts +2 -1
  24. package/BarChart/seriesConfig/tooltip.js +14 -1
  25. package/BarChart/types.d.ts +2 -2
  26. package/BarChart/useBarChartProps.d.ts +2 -1
  27. package/BarChart/useBarChartProps.js +20 -13
  28. package/CHANGELOG.md +235 -0
  29. package/ChartContainer/ChartContainer.js +4 -0
  30. package/ChartsAxisHighlight/ChartsXAxisHighlight.js +8 -8
  31. package/ChartsAxisHighlight/ChartsYAxisHighlight.js +8 -8
  32. package/ChartsLabel/ChartsLabelMark.js +0 -4
  33. package/ChartsLabel/index.d.ts +1 -0
  34. package/ChartsLabel/index.js +7 -0
  35. package/ChartsLegend/continuousColorLegendClasses.d.ts +1 -1
  36. package/ChartsOverlay/ChartsLoadingOverlay.js +1 -1
  37. package/ChartsOverlay/ChartsNoDataOverlay.js +1 -1
  38. package/ChartsTooltip/ChartsAxisTooltipContent.js +47 -55
  39. package/ChartsTooltip/ChartsItemTooltipContent.js +11 -9
  40. package/ChartsTooltip/ChartsTooltip.js +2 -2
  41. package/ChartsTooltip/ChartsTooltipContainer.js +4 -8
  42. package/ChartsTooltip/ChartsTooltipTable.d.ts +3 -1
  43. package/ChartsTooltip/ChartsTooltipTable.js +24 -9
  44. package/ChartsTooltip/chartsTooltipClasses.d.ts +4 -4
  45. package/ChartsTooltip/chartsTooltipClasses.js +2 -2
  46. package/ChartsTooltip/index.d.ts +1 -0
  47. package/ChartsTooltip/index.js +12 -0
  48. package/ChartsTooltip/useAxesTooltip.d.ts +7 -0
  49. package/ChartsTooltip/useAxesTooltip.js +18 -0
  50. package/ChartsTooltip/useAxisTooltip.d.ts +24 -3
  51. package/ChartsTooltip/useAxisTooltip.js +72 -38
  52. package/ChartsTooltip/useItemTooltip.js +4 -1
  53. package/ChartsXAxis/ChartsXAxis.js +5 -2
  54. package/ChartsYAxis/ChartsYAxis.js +69 -17
  55. package/LineChart/AnimatedArea.js +5 -22
  56. package/LineChart/AnimatedLine.d.ts +1 -4
  57. package/LineChart/AnimatedLine.js +10 -25
  58. package/LineChart/AppearingMask.d.ts +5 -0
  59. package/LineChart/AppearingMask.js +25 -18
  60. package/LineChart/CircleMarkElement.js +17 -23
  61. package/LineChart/LineChart.js +2 -0
  62. package/LineChart/LineHighlightPlot.js +3 -4
  63. package/LineChart/MarkElement.js +16 -27
  64. package/LineChart/MarkPlot.js +0 -1
  65. package/LineChart/markElementClasses.d.ts +3 -0
  66. package/LineChart/markElementClasses.js +4 -3
  67. package/LineChart/seriesConfig/index.js +3 -1
  68. package/LineChart/seriesConfig/tooltip.d.ts +2 -1
  69. package/LineChart/seriesConfig/tooltip.js +8 -1
  70. package/LineChart/useLineChartProps.d.ts +2 -1
  71. package/LineChart/useLineChartProps.js +7 -4
  72. package/PieChart/PieArc.d.ts +19 -11
  73. package/PieChart/PieArc.js +37 -24
  74. package/PieChart/PieArcLabel.d.ts +22 -13
  75. package/PieChart/PieArcLabel.js +52 -48
  76. package/PieChart/PieArcLabelPlot.js +16 -34
  77. package/PieChart/PieArcPlot.js +21 -34
  78. package/PieChart/seriesConfig/tooltip.js +3 -0
  79. package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js +9 -5
  80. package/RadarChart/RadarGrid/RadarGrid.d.ts +1 -1
  81. package/RadarChart/RadarGrid/RadarGrid.js +5 -1
  82. package/RadarChart/RadarGrid/useRadarGridData.d.ts +1 -1
  83. package/RadarChart/RadarGrid/useRadarGridData.js +3 -0
  84. package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js +2 -2
  85. package/ScatterChart/ScatterChart.js +2 -0
  86. package/ScatterChart/useScatterChartProps.d.ts +2 -1
  87. package/ScatterChart/useScatterChartProps.js +6 -3
  88. package/SparkLineChart/SparkLineChart.js +2 -0
  89. package/colorPalettes/colorPalettes.js +2 -2
  90. package/constants/index.d.ts +1 -1
  91. package/constants/index.js +1 -1
  92. package/context/AnimationProvider/AnimationProvider.js +4 -6
  93. package/esm/BarChart/AnimatedBarElement.d.ts +38 -8
  94. package/esm/BarChart/AnimatedBarElement.js +5 -5
  95. package/esm/BarChart/BarChart.js +2 -0
  96. package/esm/BarChart/BarClipPath.d.ts +19 -1
  97. package/esm/BarChart/BarClipPath.js +84 -17
  98. package/esm/BarChart/BarElement.d.ts +9 -20
  99. package/esm/BarChart/BarElement.js +28 -23
  100. package/esm/BarChart/BarLabel/BarLabel.d.ts +27 -854
  101. package/esm/BarChart/BarLabel/BarLabel.js +32 -5
  102. package/esm/BarChart/BarLabel/BarLabel.types.d.ts +2 -0
  103. package/esm/BarChart/BarLabel/BarLabelItem.d.ts +24 -0
  104. package/esm/BarChart/BarLabel/BarLabelItem.js +18 -6
  105. package/esm/BarChart/BarLabel/BarLabelPlot.js +16 -46
  106. package/esm/BarChart/BarLabel/barLabelClasses.d.ts +3 -1
  107. package/esm/BarChart/BarLabel/barLabelClasses.js +4 -3
  108. package/esm/BarChart/BarPlot.js +37 -61
  109. package/esm/BarChart/barElementClasses.d.ts +21 -0
  110. package/esm/BarChart/barElementClasses.js +19 -0
  111. package/esm/BarChart/getRadius.d.ts +1 -1
  112. package/esm/BarChart/index.d.ts +2 -1
  113. package/esm/BarChart/index.js +2 -1
  114. package/esm/BarChart/seriesConfig/index.js +2 -1
  115. package/esm/BarChart/seriesConfig/tooltip.d.ts +2 -1
  116. package/esm/BarChart/seriesConfig/tooltip.js +12 -0
  117. package/esm/BarChart/types.d.ts +2 -2
  118. package/esm/BarChart/useBarChartProps.d.ts +2 -1
  119. package/esm/BarChart/useBarChartProps.js +19 -13
  120. package/esm/ChartContainer/ChartContainer.js +4 -0
  121. package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js +8 -8
  122. package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js +8 -8
  123. package/esm/ChartsLabel/ChartsLabelMark.js +0 -4
  124. package/esm/ChartsLabel/index.d.ts +1 -0
  125. package/esm/ChartsLabel/index.js +1 -0
  126. package/esm/ChartsLegend/continuousColorLegendClasses.d.ts +1 -1
  127. package/esm/ChartsOverlay/ChartsLoadingOverlay.js +1 -1
  128. package/esm/ChartsOverlay/ChartsNoDataOverlay.js +1 -1
  129. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +47 -55
  130. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +11 -9
  131. package/esm/ChartsTooltip/ChartsTooltip.js +2 -2
  132. package/esm/ChartsTooltip/ChartsTooltipContainer.js +5 -9
  133. package/esm/ChartsTooltip/ChartsTooltipTable.d.ts +3 -1
  134. package/esm/ChartsTooltip/ChartsTooltipTable.js +23 -9
  135. package/esm/ChartsTooltip/chartsTooltipClasses.d.ts +4 -4
  136. package/esm/ChartsTooltip/chartsTooltipClasses.js +2 -2
  137. package/esm/ChartsTooltip/index.d.ts +1 -0
  138. package/esm/ChartsTooltip/index.js +1 -0
  139. package/esm/ChartsTooltip/useAxesTooltip.d.ts +7 -0
  140. package/esm/ChartsTooltip/useAxesTooltip.js +12 -0
  141. package/esm/ChartsTooltip/useAxisTooltip.d.ts +24 -3
  142. package/esm/ChartsTooltip/useAxisTooltip.js +72 -38
  143. package/esm/ChartsTooltip/useItemTooltip.js +4 -1
  144. package/esm/ChartsXAxis/ChartsXAxis.js +5 -2
  145. package/esm/ChartsYAxis/ChartsYAxis.js +69 -17
  146. package/esm/LineChart/AnimatedArea.js +5 -22
  147. package/esm/LineChart/AnimatedLine.d.ts +1 -4
  148. package/esm/LineChart/AnimatedLine.js +9 -24
  149. package/esm/LineChart/AppearingMask.d.ts +5 -0
  150. package/esm/LineChart/AppearingMask.js +23 -18
  151. package/esm/LineChart/CircleMarkElement.js +19 -25
  152. package/esm/LineChart/LineChart.js +2 -0
  153. package/esm/LineChart/LineHighlightPlot.js +3 -4
  154. package/esm/LineChart/MarkElement.js +17 -28
  155. package/esm/LineChart/MarkPlot.js +0 -1
  156. package/esm/LineChart/markElementClasses.d.ts +3 -0
  157. package/esm/LineChart/markElementClasses.js +4 -3
  158. package/esm/LineChart/seriesConfig/index.js +2 -1
  159. package/esm/LineChart/seriesConfig/tooltip.d.ts +2 -1
  160. package/esm/LineChart/seriesConfig/tooltip.js +6 -0
  161. package/esm/LineChart/useLineChartProps.d.ts +2 -1
  162. package/esm/LineChart/useLineChartProps.js +6 -4
  163. package/esm/PieChart/PieArc.d.ts +19 -11
  164. package/esm/PieChart/PieArc.js +36 -23
  165. package/esm/PieChart/PieArcLabel.d.ts +22 -13
  166. package/esm/PieChart/PieArcLabel.js +51 -47
  167. package/esm/PieChart/PieArcLabelPlot.js +16 -34
  168. package/esm/PieChart/PieArcPlot.js +21 -34
  169. package/esm/PieChart/seriesConfig/tooltip.js +3 -0
  170. package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js +9 -5
  171. package/esm/RadarChart/RadarGrid/RadarGrid.d.ts +1 -1
  172. package/esm/RadarChart/RadarGrid/RadarGrid.js +5 -1
  173. package/esm/RadarChart/RadarGrid/useRadarGridData.d.ts +1 -1
  174. package/esm/RadarChart/RadarGrid/useRadarGridData.js +3 -0
  175. package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.js +2 -2
  176. package/esm/ScatterChart/ScatterChart.js +2 -0
  177. package/esm/ScatterChart/useScatterChartProps.d.ts +2 -1
  178. package/esm/ScatterChart/useScatterChartProps.js +5 -3
  179. package/esm/SparkLineChart/SparkLineChart.js +2 -0
  180. package/esm/colorPalettes/colorPalettes.js +2 -2
  181. package/esm/constants/index.d.ts +1 -1
  182. package/esm/constants/index.js +1 -1
  183. package/esm/context/AnimationProvider/AnimationProvider.js +3 -6
  184. package/esm/hooks/animation/index.d.ts +6 -0
  185. package/esm/hooks/animation/index.js +6 -0
  186. package/esm/hooks/animation/useAnimateArea.d.ts +15 -0
  187. package/esm/hooks/animation/useAnimateArea.js +27 -0
  188. package/esm/hooks/animation/useAnimateBar.d.ts +17 -0
  189. package/esm/hooks/animation/useAnimateBar.js +56 -0
  190. package/esm/hooks/animation/useAnimateBarLabel.d.ts +19 -0
  191. package/esm/hooks/animation/useAnimateBarLabel.js +59 -0
  192. package/esm/hooks/animation/useAnimateLine.d.ts +14 -0
  193. package/esm/hooks/animation/useAnimateLine.js +26 -0
  194. package/esm/hooks/animation/useAnimatePieArc.d.ts +15 -0
  195. package/esm/hooks/animation/useAnimatePieArc.js +70 -0
  196. package/esm/hooks/animation/useAnimatePieArcLabel.d.ts +15 -0
  197. package/esm/hooks/animation/useAnimatePieArcLabel.js +72 -0
  198. package/esm/hooks/index.d.ts +2 -1
  199. package/esm/hooks/index.js +2 -1
  200. package/esm/hooks/useAxis.d.ts +5 -5
  201. package/esm/hooks/useInteractionItemProps.js +11 -0
  202. package/esm/hooks/useScale.d.ts +2 -2
  203. package/esm/hooks/useScale.js +2 -2
  204. package/esm/index.js +1 -1
  205. package/esm/internals/animation/Transition.d.ts +37 -0
  206. package/esm/internals/animation/Transition.js +83 -0
  207. package/esm/internals/animation/animation.d.ts +4 -0
  208. package/esm/internals/animation/animation.js +4 -0
  209. package/esm/internals/animation/useAnimate.d.ts +19 -0
  210. package/esm/internals/animation/useAnimate.js +74 -0
  211. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts +1 -1
  212. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js +9 -3
  213. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.d.ts +5 -0
  214. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js +21 -0
  215. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts +8 -6
  216. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +28 -22
  217. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts +1 -0
  218. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.js +1 -0
  219. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js +9 -42
  220. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts +8 -32
  221. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts +9 -0
  222. package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js +75 -0
  223. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +7 -20
  224. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts +36 -242
  225. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js +4 -10
  226. package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +9 -15
  227. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts +12 -0
  228. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js +8 -0
  229. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts +6 -4
  230. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js +18 -13
  231. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js +16 -32
  232. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts +3669 -0
  233. package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js +22 -0
  234. package/esm/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts +3 -1
  235. package/esm/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts +10 -4
  236. package/esm/internals/shallowEqual.d.ts +8 -0
  237. package/esm/internals/shallowEqual.js +31 -0
  238. package/esm/models/axis.d.ts +8 -0
  239. package/esm/themeAugmentation/overrides.d.ts +1 -1
  240. package/hooks/animation/index.d.ts +6 -0
  241. package/hooks/animation/index.js +71 -0
  242. package/hooks/animation/useAnimateArea.d.ts +15 -0
  243. package/hooks/animation/useAnimateArea.js +34 -0
  244. package/hooks/animation/useAnimateBar.d.ts +17 -0
  245. package/hooks/animation/useAnimateBar.js +62 -0
  246. package/hooks/animation/useAnimateBarLabel.d.ts +19 -0
  247. package/hooks/animation/useAnimateBarLabel.js +65 -0
  248. package/hooks/animation/useAnimateLine.d.ts +14 -0
  249. package/hooks/animation/useAnimateLine.js +33 -0
  250. package/hooks/animation/useAnimatePieArc.d.ts +15 -0
  251. package/hooks/animation/useAnimatePieArc.js +77 -0
  252. package/hooks/animation/useAnimatePieArcLabel.d.ts +15 -0
  253. package/hooks/animation/useAnimatePieArcLabel.js +79 -0
  254. package/hooks/index.d.ts +2 -1
  255. package/hooks/index.js +13 -1
  256. package/hooks/useAxis.d.ts +5 -5
  257. package/hooks/useInteractionItemProps.js +11 -0
  258. package/hooks/useScale.d.ts +2 -2
  259. package/hooks/useScale.js +2 -2
  260. package/index.js +1 -1
  261. package/internals/animation/Transition.d.ts +37 -0
  262. package/internals/animation/Transition.js +89 -0
  263. package/internals/animation/animation.d.ts +4 -0
  264. package/internals/animation/animation.js +11 -0
  265. package/internals/animation/useAnimate.d.ts +19 -0
  266. package/internals/animation/useAnimate.js +80 -0
  267. package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts +1 -1
  268. package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js +9 -3
  269. package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.d.ts +5 -0
  270. package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js +28 -0
  271. package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts +8 -6
  272. package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +29 -22
  273. package/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts +1 -0
  274. package/internals/plugins/featurePlugins/useChartCartesianAxis/index.js +12 -0
  275. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js +7 -40
  276. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts +8 -32
  277. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts +9 -0
  278. package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js +81 -0
  279. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +7 -20
  280. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts +36 -242
  281. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js +5 -11
  282. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +9 -15
  283. package/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts +12 -0
  284. package/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js +17 -0
  285. package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts +6 -4
  286. package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js +19 -13
  287. package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js +16 -32
  288. package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts +3669 -0
  289. package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js +28 -0
  290. package/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts +3 -1
  291. package/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts +10 -4
  292. package/internals/shallowEqual.d.ts +8 -0
  293. package/internals/shallowEqual.js +37 -0
  294. package/models/axis.d.ts +8 -0
  295. package/modern/BarChart/AnimatedBarElement.d.ts +38 -8
  296. package/modern/BarChart/AnimatedBarElement.js +5 -5
  297. package/modern/BarChart/BarChart.js +2 -0
  298. package/modern/BarChart/BarClipPath.d.ts +19 -1
  299. package/modern/BarChart/BarClipPath.js +84 -17
  300. package/modern/BarChart/BarElement.d.ts +9 -20
  301. package/modern/BarChart/BarElement.js +28 -23
  302. package/modern/BarChart/BarLabel/BarLabel.d.ts +27 -854
  303. package/modern/BarChart/BarLabel/BarLabel.js +32 -5
  304. package/modern/BarChart/BarLabel/BarLabel.types.d.ts +2 -0
  305. package/modern/BarChart/BarLabel/BarLabelItem.d.ts +24 -0
  306. package/modern/BarChart/BarLabel/BarLabelItem.js +18 -6
  307. package/modern/BarChart/BarLabel/BarLabelPlot.js +16 -46
  308. package/modern/BarChart/BarLabel/barLabelClasses.d.ts +3 -1
  309. package/modern/BarChart/BarLabel/barLabelClasses.js +4 -3
  310. package/modern/BarChart/BarPlot.js +37 -61
  311. package/modern/BarChart/barElementClasses.d.ts +21 -0
  312. package/modern/BarChart/barElementClasses.js +19 -0
  313. package/modern/BarChart/getRadius.d.ts +1 -1
  314. package/modern/BarChart/index.d.ts +2 -1
  315. package/modern/BarChart/index.js +2 -1
  316. package/modern/BarChart/seriesConfig/index.js +2 -1
  317. package/modern/BarChart/seriesConfig/tooltip.d.ts +2 -1
  318. package/modern/BarChart/seriesConfig/tooltip.js +12 -0
  319. package/modern/BarChart/types.d.ts +2 -2
  320. package/modern/BarChart/useBarChartProps.d.ts +2 -1
  321. package/modern/BarChart/useBarChartProps.js +19 -13
  322. package/modern/ChartContainer/ChartContainer.js +4 -0
  323. package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.js +8 -8
  324. package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.js +8 -8
  325. package/modern/ChartsLabel/ChartsLabelMark.js +0 -4
  326. package/modern/ChartsLabel/index.d.ts +1 -0
  327. package/modern/ChartsLabel/index.js +1 -0
  328. package/modern/ChartsLegend/continuousColorLegendClasses.d.ts +1 -1
  329. package/modern/ChartsOverlay/ChartsLoadingOverlay.js +1 -1
  330. package/modern/ChartsOverlay/ChartsNoDataOverlay.js +1 -1
  331. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +47 -55
  332. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +11 -9
  333. package/modern/ChartsTooltip/ChartsTooltip.js +2 -2
  334. package/modern/ChartsTooltip/ChartsTooltipContainer.js +5 -9
  335. package/modern/ChartsTooltip/ChartsTooltipTable.d.ts +3 -1
  336. package/modern/ChartsTooltip/ChartsTooltipTable.js +23 -9
  337. package/modern/ChartsTooltip/chartsTooltipClasses.d.ts +4 -4
  338. package/modern/ChartsTooltip/chartsTooltipClasses.js +2 -2
  339. package/modern/ChartsTooltip/index.d.ts +1 -0
  340. package/modern/ChartsTooltip/index.js +1 -0
  341. package/modern/ChartsTooltip/useAxesTooltip.d.ts +7 -0
  342. package/modern/ChartsTooltip/useAxesTooltip.js +12 -0
  343. package/modern/ChartsTooltip/useAxisTooltip.d.ts +24 -3
  344. package/modern/ChartsTooltip/useAxisTooltip.js +72 -38
  345. package/modern/ChartsTooltip/useItemTooltip.js +4 -1
  346. package/modern/ChartsXAxis/ChartsXAxis.js +5 -2
  347. package/modern/ChartsYAxis/ChartsYAxis.js +69 -17
  348. package/modern/LineChart/AnimatedArea.js +5 -22
  349. package/modern/LineChart/AnimatedLine.d.ts +1 -4
  350. package/modern/LineChart/AnimatedLine.js +9 -24
  351. package/modern/LineChart/AppearingMask.d.ts +5 -0
  352. package/modern/LineChart/AppearingMask.js +23 -18
  353. package/modern/LineChart/CircleMarkElement.js +19 -25
  354. package/modern/LineChart/LineChart.js +2 -0
  355. package/modern/LineChart/LineHighlightPlot.js +3 -4
  356. package/modern/LineChart/MarkElement.js +17 -28
  357. package/modern/LineChart/MarkPlot.js +0 -1
  358. package/modern/LineChart/markElementClasses.d.ts +3 -0
  359. package/modern/LineChart/markElementClasses.js +4 -3
  360. package/modern/LineChart/seriesConfig/index.js +2 -1
  361. package/modern/LineChart/seriesConfig/tooltip.d.ts +2 -1
  362. package/modern/LineChart/seriesConfig/tooltip.js +6 -0
  363. package/modern/LineChart/useLineChartProps.d.ts +2 -1
  364. package/modern/LineChart/useLineChartProps.js +6 -4
  365. package/modern/PieChart/PieArc.d.ts +19 -11
  366. package/modern/PieChart/PieArc.js +36 -23
  367. package/modern/PieChart/PieArcLabel.d.ts +22 -13
  368. package/modern/PieChart/PieArcLabel.js +51 -47
  369. package/modern/PieChart/PieArcLabelPlot.js +16 -34
  370. package/modern/PieChart/PieArcPlot.js +21 -34
  371. package/modern/PieChart/seriesConfig/tooltip.js +3 -0
  372. package/modern/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js +9 -5
  373. package/modern/RadarChart/RadarGrid/RadarGrid.d.ts +1 -1
  374. package/modern/RadarChart/RadarGrid/RadarGrid.js +5 -1
  375. package/modern/RadarChart/RadarGrid/useRadarGridData.d.ts +1 -1
  376. package/modern/RadarChart/RadarGrid/useRadarGridData.js +3 -0
  377. package/modern/RadarChart/RadarSeriesPlot/useRadarSeriesData.js +2 -2
  378. package/modern/ScatterChart/ScatterChart.js +2 -0
  379. package/modern/ScatterChart/useScatterChartProps.d.ts +2 -1
  380. package/modern/ScatterChart/useScatterChartProps.js +5 -3
  381. package/modern/SparkLineChart/SparkLineChart.js +2 -0
  382. package/modern/colorPalettes/colorPalettes.js +2 -2
  383. package/modern/constants/index.d.ts +1 -1
  384. package/modern/constants/index.js +1 -1
  385. package/modern/context/AnimationProvider/AnimationProvider.js +3 -6
  386. package/modern/hooks/animation/index.d.ts +6 -0
  387. package/modern/hooks/animation/index.js +6 -0
  388. package/modern/hooks/animation/useAnimateArea.d.ts +15 -0
  389. package/modern/hooks/animation/useAnimateArea.js +27 -0
  390. package/modern/hooks/animation/useAnimateBar.d.ts +17 -0
  391. package/modern/hooks/animation/useAnimateBar.js +56 -0
  392. package/modern/hooks/animation/useAnimateBarLabel.d.ts +19 -0
  393. package/modern/hooks/animation/useAnimateBarLabel.js +59 -0
  394. package/modern/hooks/animation/useAnimateLine.d.ts +14 -0
  395. package/modern/hooks/animation/useAnimateLine.js +26 -0
  396. package/modern/hooks/animation/useAnimatePieArc.d.ts +15 -0
  397. package/modern/hooks/animation/useAnimatePieArc.js +70 -0
  398. package/modern/hooks/animation/useAnimatePieArcLabel.d.ts +15 -0
  399. package/modern/hooks/animation/useAnimatePieArcLabel.js +72 -0
  400. package/modern/hooks/index.d.ts +2 -1
  401. package/modern/hooks/index.js +2 -1
  402. package/modern/hooks/useAxis.d.ts +5 -5
  403. package/modern/hooks/useInteractionItemProps.js +11 -0
  404. package/modern/hooks/useScale.d.ts +2 -2
  405. package/modern/hooks/useScale.js +2 -2
  406. package/modern/index.js +1 -1
  407. package/modern/internals/animation/Transition.d.ts +37 -0
  408. package/modern/internals/animation/Transition.js +83 -0
  409. package/modern/internals/animation/animation.d.ts +4 -0
  410. package/modern/internals/animation/animation.js +4 -0
  411. package/modern/internals/animation/useAnimate.d.ts +19 -0
  412. package/modern/internals/animation/useAnimate.js +74 -0
  413. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts +1 -1
  414. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js +9 -3
  415. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.d.ts +5 -0
  416. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js +21 -0
  417. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts +8 -6
  418. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +28 -22
  419. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts +1 -0
  420. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.js +1 -0
  421. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js +9 -42
  422. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts +8 -32
  423. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts +9 -0
  424. package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js +75 -0
  425. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +7 -20
  426. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts +36 -242
  427. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js +4 -10
  428. package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +9 -15
  429. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts +12 -0
  430. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js +8 -0
  431. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts +6 -4
  432. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js +18 -13
  433. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js +16 -32
  434. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts +3669 -0
  435. package/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js +22 -0
  436. package/modern/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts +3 -1
  437. package/modern/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts +10 -4
  438. package/modern/internals/shallowEqual.d.ts +8 -0
  439. package/modern/internals/shallowEqual.js +31 -0
  440. package/modern/models/axis.d.ts +8 -0
  441. package/modern/themeAugmentation/overrides.d.ts +1 -1
  442. package/package.json +8 -9
  443. package/themeAugmentation/overrides.d.ts +1 -1
  444. package/tsconfig.build.tsbuildinfo +1 -1
  445. package/PieChart/dataTransform/transition.d.ts +0 -4
  446. package/PieChart/dataTransform/transition.js +0 -145
  447. package/esm/PieChart/dataTransform/transition.d.ts +0 -4
  448. package/esm/PieChart/dataTransform/transition.js +0 -137
  449. package/modern/PieChart/dataTransform/transition.d.ts +0 -4
  450. package/modern/PieChart/dataTransform/transition.js +0 -137
@@ -0,0 +1,74 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
5
+ import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION_JS } from "./animation.js";
6
+ import { Transition } from "./Transition.js";
7
+ import { shallowEqual } from "../shallowEqual.js";
8
+
9
+ /** Animates a ref. The animation can be skipped by setting {@link skip} to true.
10
+ *
11
+ * - If {@link skip} is false, a transition will be started.
12
+ * - If {@link skip} is true and no transition is in progress, no transition will be started and {@link applyProps} will
13
+ * never be called.
14
+ * - If {@link skip} becomes true and a transition is in progress, the transition will immediately end and
15
+ * {@link applyProps} be called with the final value.
16
+ * */
17
+ export function useAnimate(props, {
18
+ createInterpolator,
19
+ applyProps,
20
+ skip,
21
+ initialProps = props
22
+ }) {
23
+ const lastInterpolatedPropsRef = React.useRef(initialProps);
24
+ const transitionRef = React.useRef(null);
25
+ const elementRef = React.useRef(null);
26
+ const lastPropsRef = React.useRef(props);
27
+ useEnhancedEffect(() => {
28
+ lastPropsRef.current = props;
29
+ }, [props]);
30
+ useEnhancedEffect(() => {
31
+ if (skip) {
32
+ transitionRef.current?.finish();
33
+ transitionRef.current = null;
34
+ elementRef.current = null;
35
+ lastInterpolatedPropsRef.current = props;
36
+ }
37
+ }, [props, skip]);
38
+ const animate = React.useCallback(element => {
39
+ const lastInterpolatedProps = lastInterpolatedPropsRef.current;
40
+ const interpolate = createInterpolator(lastInterpolatedProps, props);
41
+ transitionRef.current = new Transition(ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION_JS, t => {
42
+ const interpolatedProps = interpolate(t);
43
+ lastInterpolatedPropsRef.current = interpolatedProps;
44
+ applyProps(element, interpolatedProps);
45
+ });
46
+ }, [applyProps, createInterpolator, props]);
47
+ const setRef = React.useCallback(element => {
48
+ if (element === null) {
49
+ transitionRef.current?.stop();
50
+ return;
51
+ }
52
+ const lastElement = elementRef.current;
53
+ if (lastElement === element) {
54
+ // If it's the same element and same props, resume the transition.
55
+ if (shallowEqual(lastPropsRef.current, props)) {
56
+ transitionRef.current?.resume();
57
+ return;
58
+ }
59
+
60
+ // If props aren't the same, stop the transition and start a new animation.
61
+ transitionRef.current?.stop();
62
+ }
63
+
64
+ // If it's a different element, stop the transition of the last element and start a new animation.
65
+ if (lastElement) {
66
+ transitionRef.current?.stop();
67
+ }
68
+ elementRef.current = element;
69
+ if (transitionRef.current || !skip) {
70
+ animate(element);
71
+ }
72
+ }, [animate, props, skip]);
73
+ return setRef;
74
+ }
@@ -6,7 +6,7 @@ import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
6
6
  import { DefaultizedAxisConfig, DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
7
7
  import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
8
8
  import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
9
- type ComputeResult<T extends ChartsAxisProps> = {
9
+ export type ComputeResult<T extends ChartsAxisProps> = {
10
10
  axis: DefaultizedAxisConfig<T>;
11
11
  axisIds: string[];
12
12
  };
@@ -6,6 +6,7 @@ import { getTickNumber } from "../../../../hooks/useTicks.js";
6
6
  import { getScale } from "../../../getScale.js";
7
7
  import { zoomScaleRange } from "./zoom.js";
8
8
  import { getAxisExtremum } from "./getAxisExtremum.js";
9
+ import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
9
10
  function getRange(drawingArea, axisDirection,
10
11
  // | 'rotation' | 'radius',
11
12
  axis) {
@@ -37,6 +38,7 @@ export function computeAxisValue({
37
38
  axisIds: []
38
39
  };
39
40
  }
41
+ const axisIdsTriggeringTooltip = getAxisTriggerTooltip(axisDirection, seriesConfig, formattedSeries, allAxis[0].id);
40
42
  const completeAxis = {};
41
43
  allAxis.forEach((eachAxis, axisIndex) => {
42
44
  const axis = eachAxis;
@@ -46,6 +48,7 @@ export function computeAxisValue({
46
48
  const range = getRange(drawingArea, axisDirection, axis);
47
49
  const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
48
50
  );
51
+ const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
49
52
  const data = axis.data ?? [];
50
53
  if (isBandScaleConfig(axis)) {
51
54
  const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
@@ -57,7 +60,8 @@ export function computeAxisValue({
57
60
  offset: 0,
58
61
  height: 0,
59
62
  categoryGapRatio,
60
- barGapRatio
63
+ barGapRatio,
64
+ triggerTooltip
61
65
  }, axis, {
62
66
  data,
63
67
  scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
@@ -76,7 +80,8 @@ export function computeAxisValue({
76
80
  const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
77
81
  completeAxis[axis.id] = _extends({
78
82
  offset: 0,
79
- height: 0
83
+ height: 0,
84
+ triggerTooltip
80
85
  }, axis, {
81
86
  data,
82
87
  scale: scalePoint(axis.data, zoomedRange),
@@ -117,7 +122,8 @@ export function computeAxisValue({
117
122
  const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
118
123
  completeAxis[axis.id] = _extends({
119
124
  offset: 0,
120
- height: 0
125
+ height: 0,
126
+ triggerTooltip
121
127
  }, axis, {
122
128
  data,
123
129
  scaleType: scaleType,
@@ -0,0 +1,5 @@
1
+ import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
2
+ import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
3
+ import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
4
+ import { AxisId } from "../../../../models/axis.js";
5
+ export declare const getAxisTriggerTooltip: <TSeriesType extends CartesianChartSeriesType>(axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<TSeriesType>, formattedSeries: ProcessedSeries<TSeriesType>, defaultAxisId: AxisId) => Set<AxisId>;
@@ -0,0 +1,21 @@
1
+ import { isCartesianSeriesType } from "../../../isCartesian.js";
2
+ export const getAxisTriggerTooltip = (axisDirection, seriesConfig, formattedSeries, defaultAxisId) => {
3
+ const tooltipAxesIds = new Set();
4
+ const chartTypes = Object.keys(seriesConfig).filter(isCartesianSeriesType);
5
+ chartTypes.forEach(chartType => {
6
+ const series = formattedSeries[chartType]?.series ?? {};
7
+ const tooltipAxes = seriesConfig[chartType].axisTooltipGetter?.(series);
8
+ if (tooltipAxes === undefined) {
9
+ return;
10
+ }
11
+ tooltipAxes.forEach(({
12
+ axisId,
13
+ direction
14
+ }) => {
15
+ if (direction === axisDirection) {
16
+ tooltipAxesIds.add(axisId ?? defaultAxisId);
17
+ }
18
+ });
19
+ });
20
+ return tooltipAxesIds;
21
+ };
@@ -1,9 +1,11 @@
1
1
  import { AxisDefaultized } from "../../../../models/axis.js";
2
2
  /**
3
- * For a pointer coordinate, this function returns the value and dataIndex associated.
4
- * Returns `null` if the coordinate is outside of values.
3
+ * For a pointer coordinate, this function returns the dataIndex associated.
4
+ * Returns `-1` if no dataIndex matches.
5
5
  */
6
- export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number): {
7
- value: any;
8
- index: number;
9
- } | null;
6
+ export declare function getAxisIndex(axisConfig: AxisDefaultized, pointerValue: number): number;
7
+ /**
8
+ * For a pointer coordinate, this function returns the value associated.
9
+ * Returns `null` if the coordinate has no value associated.
10
+ */
11
+ export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number, dataIndex: number): number | Date | null;
@@ -4,10 +4,10 @@ function getAsANumber(value) {
4
4
  }
5
5
 
6
6
  /**
7
- * For a pointer coordinate, this function returns the value and dataIndex associated.
8
- * Returns `null` if the coordinate is outside of values.
7
+ * For a pointer coordinate, this function returns the dataIndex associated.
8
+ * Returns `-1` if no dataIndex matches.
9
9
  */
10
- export function getAxisValue(axisConfig, pointerValue) {
10
+ export function getAxisIndex(axisConfig, pointerValue) {
11
11
  const {
12
12
  scale,
13
13
  data: axisData,
@@ -16,10 +16,7 @@ export function getAxisValue(axisConfig, pointerValue) {
16
16
  if (!isBandScale(scale)) {
17
17
  const value = scale.invert(pointerValue);
18
18
  if (axisData === undefined) {
19
- return {
20
- value,
21
- index: -1
22
- };
19
+ return -1;
23
20
  }
24
21
  const valueAsNumber = getAsANumber(value);
25
22
  const closestIndex = axisData?.findIndex((pointValue, index) => {
@@ -36,24 +33,33 @@ export function getAxisValue(axisConfig, pointerValue) {
36
33
  }
37
34
  return false;
38
35
  });
39
- return {
40
- value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
41
- index: closestIndex
42
- };
36
+ return closestIndex;
43
37
  }
44
38
  const dataIndex = scale.bandwidth() === 0 ? Math.floor((pointerValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((pointerValue - Math.min(...scale.range())) / scale.step());
45
39
  if (dataIndex < 0 || dataIndex >= axisData.length) {
46
- return null;
40
+ return -1;
41
+ }
42
+ return reverse ? axisData.length - 1 - dataIndex : dataIndex;
43
+ }
44
+
45
+ /**
46
+ * For a pointer coordinate, this function returns the value associated.
47
+ * Returns `null` if the coordinate has no value associated.
48
+ */
49
+ export function getAxisValue(axisConfig, pointerValue, dataIndex) {
50
+ const {
51
+ scale,
52
+ data: axisData
53
+ } = axisConfig;
54
+ if (!isBandScale(scale)) {
55
+ const value = scale.invert(pointerValue);
56
+ if (dataIndex < 0) {
57
+ return value;
58
+ }
59
+ return axisData[dataIndex];
47
60
  }
48
- if (reverse) {
49
- const reverseIndex = axisData.length - 1 - dataIndex;
50
- return {
51
- index: reverseIndex,
52
- value: axisData[reverseIndex]
53
- };
61
+ if (dataIndex < 0 || dataIndex >= axisData.length) {
62
+ return null;
54
63
  }
55
- return {
56
- index: dataIndex,
57
- value: axisData[dataIndex]
58
- };
64
+ return axisData[dataIndex];
59
65
  }
@@ -1,6 +1,7 @@
1
1
  export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
2
2
  export type * from './useChartCartesianAxis.types';
3
3
  export * from "./useChartCartesianAxisRendering.selectors.js";
4
+ export * from "./useChartCartesianInteraction.selectors.js";
4
5
  export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
5
6
  export * from "./computeAxisValue.js";
6
7
  export * from "./createZoomLookup.js";
@@ -1,5 +1,6 @@
1
1
  export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
2
2
  export * from "./useChartCartesianAxisRendering.selectors.js";
3
+ export * from "./useChartCartesianInteraction.selectors.js";
3
4
  export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
4
5
  export * from "./computeAxisValue.js";
5
6
  export * from "./createZoomLookup.js";
@@ -9,9 +9,9 @@ import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/u
9
9
  import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
10
10
  import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
11
11
  import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
12
- import { getAxisValue } from "./getAxisValue.js";
12
+ import { getAxisIndex } from "./getAxisValue.js";
13
13
  import { getSVGPoint } from "../../../getSVGPoint.js";
14
- import { selectorChartsInteractionAxis, selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
14
+ import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
15
15
  export const useChartCartesianAxis = ({
16
16
  params,
17
17
  store,
@@ -33,7 +33,6 @@ export const useChartCartesianAxis = ({
33
33
  }
34
34
  const drawingArea = useSelector(store, selectorChartDrawingArea);
35
35
  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
36
- const interactionAxis = useSelector(store, selectorChartsInteractionAxis);
37
36
  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
38
37
  const {
39
38
  axis: xAxisWithScale,
@@ -75,21 +74,10 @@ export const useChartCartesianAxis = ({
75
74
  if (!instance.isPointInside(svgPoint, {
76
75
  targetElement: event.target
77
76
  })) {
78
- store.update(prev => _extends({}, prev, {
79
- interaction: {
80
- item: null,
81
- axis: {
82
- x: null,
83
- y: null
84
- }
85
- }
86
- }));
77
+ instance.cleanInteraction?.();
87
78
  return;
88
79
  }
89
- instance.setAxisInteraction?.({
90
- x: getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x),
91
- y: getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)
92
- });
80
+ instance.setPointerCoordinate?.(svgPoint);
93
81
  };
94
82
  const handleDown = event => {
95
83
  const target = event.currentTarget;
@@ -102,31 +90,15 @@ export const useChartCartesianAxis = ({
102
90
  };
103
91
  element.addEventListener('pointerdown', handleDown);
104
92
  element.addEventListener('pointermove', handleMove);
105
- element.addEventListener('pointerout', handleOut);
106
93
  element.addEventListener('pointercancel', handleOut);
107
94
  element.addEventListener('pointerleave', handleOut);
108
95
  return () => {
109
96
  element.removeEventListener('pointerdown', handleDown);
110
97
  element.removeEventListener('pointermove', handleMove);
111
- element.removeEventListener('pointerout', handleOut);
112
98
  element.removeEventListener('pointercancel', handleOut);
113
99
  element.removeEventListener('pointerleave', handleOut);
114
100
  };
115
101
  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
116
- const axisInteractionRef = React.useRef({
117
- x: null,
118
- y: null
119
- });
120
-
121
- // This avoids re-attaching the event listener on mouse move.
122
- React.useEffect(() => {
123
- const {
124
- x,
125
- y
126
- } = interactionAxis;
127
- axisInteractionRef.current.x = x;
128
- axisInteractionRef.current.y = y;
129
- }, [interactionAxis]);
130
102
  React.useEffect(() => {
131
103
  const element = svgRef.current;
132
104
  const onAxisClick = params.onAxisClick;
@@ -137,15 +109,10 @@ export const useChartCartesianAxis = ({
137
109
  event.preventDefault();
138
110
  let dataIndex = null;
139
111
  let isXAxis = false;
140
- if (axisInteractionRef.current.x === null && axisInteractionRef.current.y === null) {
141
- const svgPoint = getSVGPoint(element, event);
142
- const xIndex = getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
143
- isXAxis = xIndex !== null && xIndex !== -1;
144
- dataIndex = isXAxis ? xIndex : getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
145
- } else {
146
- isXAxis = axisInteractionRef.current.x !== null && axisInteractionRef.current.x.index !== -1;
147
- dataIndex = isXAxis ? axisInteractionRef.current.x && axisInteractionRef.current.x.index : axisInteractionRef.current.y && axisInteractionRef.current.y.index;
148
- }
112
+ const svgPoint = getSVGPoint(element, event);
113
+ const xIndex = getAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
114
+ isXAxis = xIndex !== -1;
115
+ dataIndex = isXAxis ? xIndex : getAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
149
116
  const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
150
117
  if (dataIndex == null || dataIndex === -1) {
151
118
  return;
@@ -175,7 +142,7 @@ export const useChartCartesianAxis = ({
175
142
  return () => {
176
143
  element.removeEventListener('click', handleMouseClick);
177
144
  };
178
- }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, axisInteractionRef, usedXAxis, usedYAxis]);
145
+ }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
179
146
  return {};
180
147
  };
181
148
  useChartCartesianAxis.params = {
@@ -184,10 +184,7 @@ export declare const selectorChartZoomOptionsLookup: ((state: import("../../core
184
184
  */
185
185
  export declare const selectorChartXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
186
186
  cacheKey: import("../../models").ChartStateCacheKey;
187
- } & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => {
188
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
189
- axisIds: string[];
190
- }) & {
187
+ } & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>) & {
191
188
  clearCache: () => void;
192
189
  resultsCount: () => number;
193
190
  resetResultsCount: () => void;
@@ -202,10 +199,7 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
202
199
  }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
203
200
  [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
204
201
  [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
205
- }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
206
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
207
- axisIds: string[];
208
- };
202
+ }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>;
209
203
  memoizedResultFunc: ((resultFuncArgs_0: import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined, resultFuncArgs_1: {
210
204
  width: number;
211
205
  left: number;
@@ -216,18 +210,12 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
216
210
  }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
217
211
  [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
218
212
  [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
219
- }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
220
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
221
- axisIds: string[];
222
- }) & {
213
+ }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>) & {
223
214
  clearCache: () => void;
224
215
  resultsCount: () => number;
225
216
  resetResultsCount: () => void;
226
217
  };
227
- lastResult: () => {
228
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsXAxisProps>;
229
- axisIds: string[];
230
- };
218
+ lastResult: () => import("./computeAxisValue").ComputeResult<import("../../..").ChartsXAxisProps>;
231
219
  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
232
220
  cacheKey: import("../../models").ChartStateCacheKey;
233
221
  }) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined) & {
@@ -1645,10 +1633,7 @@ export declare const selectorChartXAxis: ((state: import("../../corePlugins/useC
1645
1633
  };
1646
1634
  export declare const selectorChartYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
1647
1635
  cacheKey: import("../../models").ChartStateCacheKey;
1648
- } & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => {
1649
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
1650
- axisIds: string[];
1651
- }) & {
1636
+ } & Partial<{}> & import("./useChartCartesianAxis.types").UseChartCartesianAxisState) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>) & {
1652
1637
  clearCache: () => void;
1653
1638
  resultsCount: () => number;
1654
1639
  resetResultsCount: () => void;
@@ -1663,10 +1648,7 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
1663
1648
  }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
1664
1649
  [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
1665
1650
  [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
1666
- }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
1667
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
1668
- axisIds: string[];
1669
- };
1651
+ }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>;
1670
1652
  memoizedResultFunc: ((resultFuncArgs_0: import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined, resultFuncArgs_1: {
1671
1653
  width: number;
1672
1654
  left: number;
@@ -1677,18 +1659,12 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
1677
1659
  }, resultFuncArgs_2: import("../../..").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_3: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>, resultFuncArgs_4: Map<AxisId, ZoomData> | undefined, resultFuncArgs_5: {
1678
1660
  [x: string]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
1679
1661
  [x: number]: import("./useChartCartesianAxis.types").DefaultizedZoomOptions;
1680
- }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => {
1681
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
1682
- axisIds: string[];
1683
- }) & {
1662
+ }, resultFuncArgs_6: import("./zoom.types").GetZoomAxisFilters | undefined) => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>) & {
1684
1663
  clearCache: () => void;
1685
1664
  resultsCount: () => number;
1686
1665
  resetResultsCount: () => void;
1687
1666
  };
1688
- lastResult: () => {
1689
- axis: import("./useChartCartesianAxis.types").DefaultizedAxisConfig<import("../../..").ChartsYAxisProps>;
1690
- axisIds: string[];
1691
- };
1667
+ lastResult: () => import("./computeAxisValue").ComputeResult<import("../../..").ChartsYAxisProps>;
1692
1668
  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
1693
1669
  cacheKey: import("../../models").ChartStateCacheKey;
1694
1670
  }) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined) & {