@mui/x-charts-pro 8.0.0-alpha.1 → 8.0.0-alpha.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 (198) hide show
  1. package/BarChartPro/BarChartPro.d.ts +2 -2
  2. package/BarChartPro/BarChartPro.js +75 -34
  3. package/BarChartPro/BarChartPro.plugins.d.ts +10 -0
  4. package/BarChartPro/BarChartPro.plugins.js +3 -0
  5. package/CHANGELOG.md +2007 -230
  6. package/ChartContainerPro/ChartContainerPro.d.ts +33 -5
  7. package/ChartContainerPro/ChartContainerPro.js +55 -37
  8. package/ChartContainerPro/useChartContainerProProps.d.ts +6 -5
  9. package/ChartContainerPro/useChartContainerProProps.js +17 -13
  10. package/ChartDataProviderPro/ChartDataProviderPro.d.ts +37 -0
  11. package/ChartDataProviderPro/ChartDataProviderPro.js +105 -0
  12. package/{context → ChartDataProviderPro}/package.json +1 -1
  13. package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +8 -0
  14. package/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
  15. package/Heatmap/Heatmap.d.ts +1 -2
  16. package/Heatmap/Heatmap.js +36 -13
  17. package/Heatmap/Heatmap.plugins.d.ts +8 -0
  18. package/Heatmap/Heatmap.plugins.js +2 -0
  19. package/Heatmap/HeatmapItem.js +1 -1
  20. package/Heatmap/HeatmapTooltip.js +8 -28
  21. package/Heatmap/extremums.d.ts +2 -2
  22. package/Heatmap/formatter.d.ts +2 -2
  23. package/Heatmap/formatter.js +2 -1
  24. package/Heatmap/heatmapClasses.js +2 -1
  25. package/Heatmap/plugin.d.ts +2 -2
  26. package/Heatmap/plugin.js +4 -2
  27. package/Heatmap/tooltip.d.ts +3 -0
  28. package/Heatmap/tooltip.js +25 -0
  29. package/LineChartPro/LineChartPro.d.ts +2 -2
  30. package/LineChartPro/LineChartPro.js +81 -54
  31. package/LineChartPro/LineChartPro.plugins.d.ts +10 -0
  32. package/LineChartPro/LineChartPro.plugins.js +3 -0
  33. package/README.md +1 -1
  34. package/ScatterChartPro/ScatterChartPro.d.ts +2 -2
  35. package/ScatterChartPro/ScatterChartPro.js +59 -34
  36. package/ScatterChartPro/ScatterChartPro.plugins.d.ts +10 -0
  37. package/ScatterChartPro/ScatterChartPro.plugins.js +3 -0
  38. package/hooks/index.d.ts +1 -0
  39. package/hooks/index.js +2 -1
  40. package/hooks/useSeries.d.ts +2 -4
  41. package/hooks/zoom/index.d.ts +1 -0
  42. package/hooks/zoom/index.js +1 -0
  43. package/hooks/zoom/useIsZoomInteracting.d.ts +6 -0
  44. package/hooks/zoom/useIsZoomInteracting.js +14 -0
  45. package/index.d.ts +3 -2
  46. package/index.js +5 -6
  47. package/internals/plugins/allPlugins.d.ts +11 -0
  48. package/internals/plugins/allPlugins.js +5 -0
  49. package/internals/plugins/useChartProZoom/creatZoomLookup.d.ts +3 -0
  50. package/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
  51. package/internals/plugins/useChartProZoom/defaultizeZoom.d.ts +2 -0
  52. package/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
  53. package/internals/plugins/useChartProZoom/index.d.ts +3 -0
  54. package/internals/plugins/useChartProZoom/index.js +3 -0
  55. package/internals/plugins/useChartProZoom/useChartProZoom.d.ts +3 -0
  56. package/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
  57. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +377 -0
  58. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
  59. package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +50 -0
  60. package/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts +45 -0
  61. package/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
  62. package/internals/plugins/useChartProZoom/zoom.types.d.ts +53 -0
  63. package/internals/utils/releaseInfo.js +2 -2
  64. package/models/index.d.ts +1 -0
  65. package/models/index.js +2 -1
  66. package/modern/BarChartPro/BarChartPro.js +75 -34
  67. package/modern/BarChartPro/BarChartPro.plugins.js +3 -0
  68. package/modern/ChartContainerPro/ChartContainerPro.js +55 -37
  69. package/modern/ChartContainerPro/useChartContainerProProps.js +17 -13
  70. package/modern/ChartDataProviderPro/ChartDataProviderPro.js +105 -0
  71. package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
  72. package/modern/Heatmap/Heatmap.js +36 -13
  73. package/modern/Heatmap/Heatmap.plugins.js +2 -0
  74. package/modern/Heatmap/HeatmapItem.js +1 -1
  75. package/modern/Heatmap/HeatmapTooltip.js +8 -28
  76. package/modern/Heatmap/formatter.js +2 -1
  77. package/modern/Heatmap/heatmapClasses.js +2 -1
  78. package/modern/Heatmap/plugin.js +4 -2
  79. package/modern/Heatmap/tooltip.js +25 -0
  80. package/modern/LineChartPro/LineChartPro.js +81 -54
  81. package/modern/LineChartPro/LineChartPro.plugins.js +3 -0
  82. package/modern/ScatterChartPro/ScatterChartPro.js +59 -34
  83. package/modern/ScatterChartPro/ScatterChartPro.plugins.js +3 -0
  84. package/modern/hooks/index.js +2 -1
  85. package/modern/hooks/zoom/index.js +1 -0
  86. package/modern/hooks/zoom/useIsZoomInteracting.js +14 -0
  87. package/modern/index.js +5 -6
  88. package/modern/internals/plugins/allPlugins.js +5 -0
  89. package/modern/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
  90. package/modern/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
  91. package/modern/internals/plugins/useChartProZoom/index.js +3 -0
  92. package/modern/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
  93. package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
  94. package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js +1 -0
  95. package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
  96. package/modern/internals/plugins/useChartProZoom/zoom.types.js +1 -0
  97. package/modern/internals/utils/releaseInfo.js +2 -2
  98. package/modern/models/index.js +2 -1
  99. package/node/BarChartPro/BarChartPro.js +74 -33
  100. package/node/BarChartPro/BarChartPro.plugins.js +9 -0
  101. package/node/ChartContainerPro/ChartContainerPro.js +54 -36
  102. package/node/ChartContainerPro/useChartContainerProProps.js +17 -13
  103. package/node/ChartDataProviderPro/ChartDataProviderPro.js +111 -0
  104. package/node/ChartDataProviderPro/useChartDataProviderProProps.js +21 -0
  105. package/node/Heatmap/Heatmap.js +36 -13
  106. package/node/Heatmap/Heatmap.plugins.js +8 -0
  107. package/node/Heatmap/HeatmapItem.js +2 -2
  108. package/node/Heatmap/HeatmapTooltip.js +6 -26
  109. package/node/Heatmap/formatter.js +2 -1
  110. package/node/Heatmap/heatmapClasses.js +5 -4
  111. package/node/Heatmap/plugin.js +4 -2
  112. package/node/Heatmap/tooltip.js +31 -0
  113. package/node/LineChartPro/LineChartPro.js +80 -53
  114. package/node/LineChartPro/LineChartPro.plugins.js +9 -0
  115. package/node/ScatterChartPro/ScatterChartPro.js +58 -33
  116. package/node/ScatterChartPro/ScatterChartPro.plugins.js +9 -0
  117. package/node/hooks/index.js +16 -1
  118. package/node/{context/CartesianProviderPro → hooks/zoom}/index.js +4 -4
  119. package/node/hooks/zoom/useIsZoomInteracting.js +19 -0
  120. package/node/index.js +34 -23
  121. package/node/internals/plugins/allPlugins.js +11 -0
  122. package/node/internals/plugins/useChartProZoom/creatZoomLookup.js +19 -0
  123. package/node/internals/plugins/useChartProZoom/defaultizeZoom.js +33 -0
  124. package/node/internals/plugins/useChartProZoom/index.js +38 -0
  125. package/node/internals/plugins/useChartProZoom/useChartProZoom.js +310 -0
  126. package/node/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +18 -0
  127. package/node/internals/plugins/useChartProZoom/useChartProZoom.utils.js +140 -0
  128. package/node/internals/plugins/useChartProZoom/zoom.types.js +5 -0
  129. package/node/internals/utils/releaseInfo.js +4 -3
  130. package/package.json +6 -6
  131. package/typeOverloads/modules.d.ts +8 -1
  132. package/context/CartesianProviderPro/CartesianProviderPro.d.ts +0 -6
  133. package/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
  134. package/context/CartesianProviderPro/createAxisFilterMapper.d.ts +0 -12
  135. package/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
  136. package/context/CartesianProviderPro/index.d.ts +0 -1
  137. package/context/CartesianProviderPro/index.js +0 -1
  138. package/context/ChartDataProviderPro/ChartDataProviderPro.d.ts +0 -10
  139. package/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -299
  140. package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -14
  141. package/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
  142. package/context/ZoomProvider/Zoom.types.d.ts +0 -144
  143. package/context/ZoomProvider/ZoomContext.d.ts +0 -4
  144. package/context/ZoomProvider/ZoomContext.js +0 -16
  145. package/context/ZoomProvider/ZoomProvider.d.ts +0 -3
  146. package/context/ZoomProvider/ZoomProvider.js +0 -56
  147. package/context/ZoomProvider/ZoomSetup.d.ts +0 -9
  148. package/context/ZoomProvider/ZoomSetup.js +0 -16
  149. package/context/ZoomProvider/defaultizeZoom.d.ts +0 -2
  150. package/context/ZoomProvider/defaultizeZoom.js +0 -32
  151. package/context/ZoomProvider/index.d.ts +0 -3
  152. package/context/ZoomProvider/index.js +0 -3
  153. package/context/ZoomProvider/initializeZoomData.d.ts +0 -6
  154. package/context/ZoomProvider/initializeZoomData.js +0 -13
  155. package/context/ZoomProvider/useSetupPan.d.ts +0 -1
  156. package/context/ZoomProvider/useSetupPan.js +0 -106
  157. package/context/ZoomProvider/useSetupZoom.d.ts +0 -1
  158. package/context/ZoomProvider/useSetupZoom.js +0 -274
  159. package/context/ZoomProvider/useZoom.d.ts +0 -7
  160. package/context/ZoomProvider/useZoom.js +0 -19
  161. package/context/index.d.ts +0 -3
  162. package/context/index.js +0 -5
  163. package/modern/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
  164. package/modern/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
  165. package/modern/context/CartesianProviderPro/index.js +0 -1
  166. package/modern/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -299
  167. package/modern/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
  168. package/modern/context/ZoomProvider/ZoomContext.js +0 -16
  169. package/modern/context/ZoomProvider/ZoomProvider.js +0 -56
  170. package/modern/context/ZoomProvider/ZoomSetup.js +0 -16
  171. package/modern/context/ZoomProvider/defaultizeZoom.js +0 -32
  172. package/modern/context/ZoomProvider/index.js +0 -3
  173. package/modern/context/ZoomProvider/initializeZoomData.js +0 -13
  174. package/modern/context/ZoomProvider/useSetupPan.js +0 -106
  175. package/modern/context/ZoomProvider/useSetupZoom.js +0 -274
  176. package/modern/context/ZoomProvider/useZoom.js +0 -19
  177. package/modern/context/index.js +0 -5
  178. package/node/context/CartesianProviderPro/CartesianProviderPro.js +0 -95
  179. package/node/context/CartesianProviderPro/createAxisFilterMapper.js +0 -68
  180. package/node/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -305
  181. package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -50
  182. package/node/context/ZoomProvider/ZoomContext.js +0 -23
  183. package/node/context/ZoomProvider/ZoomProvider.js +0 -63
  184. package/node/context/ZoomProvider/ZoomSetup.js +0 -20
  185. package/node/context/ZoomProvider/defaultizeZoom.js +0 -40
  186. package/node/context/ZoomProvider/index.js +0 -38
  187. package/node/context/ZoomProvider/initializeZoomData.js +0 -20
  188. package/node/context/ZoomProvider/useSetupPan.js +0 -114
  189. package/node/context/ZoomProvider/useSetupZoom.js +0 -281
  190. package/node/context/ZoomProvider/useZoom.js +0 -25
  191. package/node/context/index.js +0 -27
  192. /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.d.ts +0 -0
  193. /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  194. /package/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
  195. /package/{modern/context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/zoom.types.js} +0 -0
  196. /package/modern/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  197. /package/node/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
  198. /package/node/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
@@ -1,89 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import { useDrawingArea, useSeries, CartesianContext, computeAxisValue, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
6
- import { useZoom } from "../ZoomProvider/useZoom.js";
7
- import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- function CartesianProviderPro(props) {
10
- const {
11
- xAxis,
12
- yAxis,
13
- children
14
- } = props;
15
- const formattedSeries = useSeries();
16
- const drawingArea = useDrawingArea();
17
- const {
18
- zoomData,
19
- options
20
- } = useZoom();
21
- const xExtremumGetters = useXExtremumGetter();
22
- const yExtremumGetters = useYExtremumGetter();
23
- const getFilters = React.useMemo(() => {
24
- const xMapper = createAxisFilterMapper({
25
- zoomData,
26
- extremumGetter: xExtremumGetters,
27
- formattedSeries,
28
- direction: 'x'
29
- });
30
- const yMapper = createAxisFilterMapper({
31
- zoomData,
32
- extremumGetter: yExtremumGetters,
33
- formattedSeries,
34
- direction: 'y'
35
- });
36
- const xFilters = xAxis.reduce((acc, axis, index) => {
37
- const filter = xMapper(axis, index);
38
- if (filter !== null) {
39
- acc[axis.id] = filter;
40
- }
41
- return acc;
42
- }, {});
43
- const yFilters = yAxis.reduce((acc, axis, index) => {
44
- const filter = yMapper(axis, index);
45
- if (filter !== null) {
46
- acc[axis.id] = filter;
47
- }
48
- return acc;
49
- }, {});
50
- if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
51
- return undefined;
52
- }
53
- return createGetAxisFilters(_extends({}, xFilters, yFilters));
54
- }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
55
- const xValues = React.useMemo(() => computeAxisValue({
56
- drawingArea,
57
- formattedSeries,
58
- axis: xAxis,
59
- extremumGetters: xExtremumGetters,
60
- axisDirection: 'x',
61
- zoomData,
62
- zoomOptions: options,
63
- getFilters
64
- }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
65
- const yValues = React.useMemo(() => computeAxisValue({
66
- drawingArea,
67
- formattedSeries,
68
- axis: yAxis,
69
- extremumGetters: yExtremumGetters,
70
- axisDirection: 'y',
71
- zoomData,
72
- zoomOptions: options,
73
- getFilters
74
- }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
75
- const value = React.useMemo(() => ({
76
- isInitialized: true,
77
- data: {
78
- xAxis: xValues.axis,
79
- yAxis: yValues.axis,
80
- xAxisIds: xValues.axisIds,
81
- yAxisIds: yValues.axisIds
82
- }
83
- }), [xValues, yValues]);
84
- return /*#__PURE__*/_jsx(CartesianContext.Provider, {
85
- value: value,
86
- children: children
87
- });
88
- }
89
- export { CartesianProviderPro };
@@ -1,60 +0,0 @@
1
- import { getAxisExtremum, isDefined, getScale } from '@mui/x-charts/internals';
2
- export const createAxisFilterMapper = ({
3
- zoomData,
4
- extremumGetter,
5
- formattedSeries,
6
- direction
7
- }) => (axis, axisIndex) => {
8
- if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
9
- return null;
10
- }
11
- const zoom = zoomData?.find(({
12
- axisId
13
- }) => axisId === axis.id);
14
- if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
15
- // No zoom, or zoom with all data visible
16
- return null;
17
- }
18
- let extremums = [];
19
- const scaleType = axis.scaleType;
20
- if (scaleType === 'point' || scaleType === 'band') {
21
- extremums = [0, (axis.data?.length ?? 1) - 1];
22
- } else {
23
- extremums = getAxisExtremum(axis, extremumGetter, axisIndex, formattedSeries);
24
- }
25
- let min;
26
- let max;
27
-
28
- // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
29
- [min, max] = getScale(scaleType, extremums, [0, 100]).nice().domain();
30
- min = min instanceof Date ? min.getTime() : min;
31
- max = max instanceof Date ? max.getTime() : max;
32
- const minVal = min + zoom.start * (max - min) / 100;
33
- const maxVal = min + zoom.end * (max - min) / 100;
34
- return (value, dataIndex) => {
35
- const val = value[direction] ?? axis.data?.[dataIndex];
36
- if (val == null) {
37
- // If the value does not exist because of missing data point, or out of range index, we just ignore.
38
- return true;
39
- }
40
- if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
41
- return dataIndex >= minVal && dataIndex <= maxVal;
42
- }
43
- return val >= minVal && val <= maxVal;
44
- };
45
- };
46
- export const createGetAxisFilters = filters => ({
47
- currentAxisId,
48
- seriesXAxisId,
49
- seriesYAxisId,
50
- isDefaultAxis
51
- }) => {
52
- return (value, dataIndex) => {
53
- const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
54
- if (!axisId || isDefaultAxis) {
55
- return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
56
- }
57
- const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
58
- return data.every(f => f(value, dataIndex));
59
- };
60
- };
@@ -1 +0,0 @@
1
- export * from "./CartesianProviderPro.js";
@@ -1,299 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import PropTypes from 'prop-types';
6
- import { DrawingAreaProvider, InteractionProvider, PluginProvider, SeriesProvider, AnimationProvider, SvgRefProvider, SizeProvider } from '@mui/x-charts/internals';
7
- import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
8
- import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
9
- import { getReleaseInfo } from "../../internals/utils/releaseInfo.js";
10
- import { CartesianProviderPro } from "../CartesianProviderPro/index.js";
11
- import { ZoomProvider } from "../ZoomProvider/index.js";
12
- import { useChartContainerProProps } from "./useChartDataProviderProProps.js";
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- const releaseInfo = getReleaseInfo();
15
- function ChartDataProviderPro(props) {
16
- const {
17
- zoomProviderProps,
18
- drawingAreaProviderProps,
19
- seriesProviderProps,
20
- zAxisContextProps,
21
- highlightedProviderProps,
22
- cartesianProviderProps,
23
- sizeProviderProps,
24
- pluginProviderProps,
25
- animationProviderProps,
26
- children
27
- } = useChartContainerProProps(props);
28
- useLicenseVerifier('x-charts-pro', releaseInfo);
29
- return /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
30
- children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
31
- children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
32
- children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
33
- children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
34
- children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
35
- children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
36
- children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
37
- children: /*#__PURE__*/_jsx(InteractionProvider, {
38
- children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
39
- children: /*#__PURE__*/_jsx(SvgRefProvider, {
40
- children: children
41
- })
42
- }))
43
- })
44
- }))
45
- }))
46
- }))
47
- }))
48
- }))
49
- }))
50
- }))
51
- }));
52
- }
53
- process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
54
- // ----------------------------- Warning --------------------------------
55
- // | These PropTypes are generated from the TypeScript type definitions |
56
- // | To update them edit the TypeScript types and run "pnpm proptypes" |
57
- // ----------------------------------------------------------------------
58
- children: PropTypes.node,
59
- className: PropTypes.string,
60
- /**
61
- * Color palette used to colorize multiple series.
62
- * @default blueberryTwilightPalette
63
- */
64
- colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
65
- /**
66
- * An array of objects that can be used to populate series and axes data using their `dataKey` property.
67
- */
68
- dataset: PropTypes.arrayOf(PropTypes.object),
69
- desc: PropTypes.string,
70
- /**
71
- * If `true`, the charts will not listen to the mouse move event.
72
- * It might break interactive features, but will improve performance.
73
- * @default false
74
- */
75
- disableAxisListener: PropTypes.bool,
76
- /**
77
- * The height of the chart in px.
78
- */
79
- height: PropTypes.number.isRequired,
80
- /**
81
- * The item currently highlighted. Turns highlighting into a controlled prop.
82
- */
83
- highlightedItem: PropTypes.shape({
84
- dataIndex: PropTypes.number,
85
- seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
86
- }),
87
- /**
88
- * The margin between the SVG and the drawing area.
89
- * It's used for leaving some space for extra information such as the x- and y-axis or legend.
90
- * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
91
- * @default object Depends on the charts type.
92
- */
93
- margin: PropTypes.shape({
94
- bottom: PropTypes.number,
95
- left: PropTypes.number,
96
- right: PropTypes.number,
97
- top: PropTypes.number
98
- }),
99
- /**
100
- * The callback fired when the highlighted item changes.
101
- *
102
- * @param {HighlightItemData | null} highlightedItem The newly highlighted item.
103
- */
104
- onHighlightChange: PropTypes.func,
105
- /**
106
- * Callback fired when the zoom has changed.
107
- *
108
- * @param {ZoomData[]} zoomData Updated zoom data.
109
- */
110
- onZoomChange: PropTypes.func,
111
- /**
112
- * An array of plugins defining how to preprocess data.
113
- * If not provided, the container supports line, bar, scatter and pie charts.
114
- */
115
- plugins: PropTypes.arrayOf(PropTypes.object),
116
- /**
117
- * The array of series to display.
118
- * Each type of series has its own specificity.
119
- * Please refer to the appropriate docs page to learn more about it.
120
- */
121
- series: PropTypes.arrayOf(PropTypes.object).isRequired,
122
- /**
123
- * If `true`, animations are skipped.
124
- * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
125
- */
126
- skipAnimation: PropTypes.bool,
127
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
128
- title: PropTypes.string,
129
- viewBox: PropTypes.shape({
130
- height: PropTypes.number,
131
- width: PropTypes.number,
132
- x: PropTypes.number,
133
- y: PropTypes.number
134
- }),
135
- /**
136
- * The width of the chart in px.
137
- */
138
- width: PropTypes.number.isRequired,
139
- /**
140
- * The configuration of the x-axes.
141
- * If not provided, a default axis config is used.
142
- * An array of [[AxisConfig]] objects.
143
- */
144
- xAxis: PropTypes.arrayOf(PropTypes.shape({
145
- classes: PropTypes.object,
146
- colorMap: PropTypes.oneOfType([PropTypes.shape({
147
- colors: PropTypes.arrayOf(PropTypes.string).isRequired,
148
- type: PropTypes.oneOf(['ordinal']).isRequired,
149
- unknownColor: PropTypes.string,
150
- values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
151
- }), PropTypes.shape({
152
- color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
153
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
154
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
155
- type: PropTypes.oneOf(['continuous']).isRequired
156
- }), PropTypes.shape({
157
- colors: PropTypes.arrayOf(PropTypes.string).isRequired,
158
- thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
159
- type: PropTypes.oneOf(['piecewise']).isRequired
160
- })]),
161
- data: PropTypes.array,
162
- dataKey: PropTypes.string,
163
- disableLine: PropTypes.bool,
164
- disableTicks: PropTypes.bool,
165
- domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
166
- fill: PropTypes.string,
167
- hideTooltip: PropTypes.bool,
168
- id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
169
- label: PropTypes.string,
170
- labelFontSize: PropTypes.number,
171
- labelStyle: PropTypes.object,
172
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
173
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
174
- position: PropTypes.oneOf(['bottom', 'top']),
175
- reverse: PropTypes.bool,
176
- scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
177
- slotProps: PropTypes.object,
178
- slots: PropTypes.object,
179
- stroke: PropTypes.string,
180
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
181
- tickFontSize: PropTypes.number,
182
- tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
183
- tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
184
- tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
185
- tickLabelStyle: PropTypes.object,
186
- tickMaxStep: PropTypes.number,
187
- tickMinStep: PropTypes.number,
188
- tickNumber: PropTypes.number,
189
- tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
190
- tickSize: PropTypes.number,
191
- valueFormatter: PropTypes.func,
192
- zoom: PropTypes.oneOfType([PropTypes.shape({
193
- filterMode: PropTypes.oneOf(['discard', 'keep']),
194
- maxEnd: PropTypes.number,
195
- maxSpan: PropTypes.number,
196
- minSpan: PropTypes.number,
197
- minStart: PropTypes.number,
198
- panning: PropTypes.bool,
199
- step: PropTypes.number
200
- }), PropTypes.bool])
201
- })),
202
- /**
203
- * The configuration of the y-axes.
204
- * If not provided, a default axis config is used.
205
- * An array of [[AxisConfig]] objects.
206
- */
207
- yAxis: PropTypes.arrayOf(PropTypes.shape({
208
- classes: PropTypes.object,
209
- colorMap: PropTypes.oneOfType([PropTypes.shape({
210
- colors: PropTypes.arrayOf(PropTypes.string).isRequired,
211
- type: PropTypes.oneOf(['ordinal']).isRequired,
212
- unknownColor: PropTypes.string,
213
- values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
214
- }), PropTypes.shape({
215
- color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
216
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
217
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
218
- type: PropTypes.oneOf(['continuous']).isRequired
219
- }), PropTypes.shape({
220
- colors: PropTypes.arrayOf(PropTypes.string).isRequired,
221
- thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
222
- type: PropTypes.oneOf(['piecewise']).isRequired
223
- })]),
224
- data: PropTypes.array,
225
- dataKey: PropTypes.string,
226
- disableLine: PropTypes.bool,
227
- disableTicks: PropTypes.bool,
228
- domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
229
- fill: PropTypes.string,
230
- hideTooltip: PropTypes.bool,
231
- id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
232
- label: PropTypes.string,
233
- labelFontSize: PropTypes.number,
234
- labelStyle: PropTypes.object,
235
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
236
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
237
- position: PropTypes.oneOf(['left', 'right']),
238
- reverse: PropTypes.bool,
239
- scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
240
- slotProps: PropTypes.object,
241
- slots: PropTypes.object,
242
- stroke: PropTypes.string,
243
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
244
- tickFontSize: PropTypes.number,
245
- tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
246
- tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
247
- tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
248
- tickLabelStyle: PropTypes.object,
249
- tickMaxStep: PropTypes.number,
250
- tickMinStep: PropTypes.number,
251
- tickNumber: PropTypes.number,
252
- tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
253
- tickSize: PropTypes.number,
254
- valueFormatter: PropTypes.func,
255
- zoom: PropTypes.oneOfType([PropTypes.shape({
256
- filterMode: PropTypes.oneOf(['discard', 'keep']),
257
- maxEnd: PropTypes.number,
258
- maxSpan: PropTypes.number,
259
- minSpan: PropTypes.number,
260
- minStart: PropTypes.number,
261
- panning: PropTypes.bool,
262
- step: PropTypes.number
263
- }), PropTypes.bool])
264
- })),
265
- /**
266
- * The configuration of the z-axes.
267
- */
268
- zAxis: PropTypes.arrayOf(PropTypes.shape({
269
- colorMap: PropTypes.oneOfType([PropTypes.shape({
270
- colors: PropTypes.arrayOf(PropTypes.string).isRequired,
271
- type: PropTypes.oneOf(['ordinal']).isRequired,
272
- unknownColor: PropTypes.string,
273
- values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
274
- }), PropTypes.shape({
275
- color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
276
- max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
277
- min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
278
- type: PropTypes.oneOf(['continuous']).isRequired
279
- }), PropTypes.shape({
280
- colors: PropTypes.arrayOf(PropTypes.string).isRequired,
281
- thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
282
- type: PropTypes.oneOf(['piecewise']).isRequired
283
- })]),
284
- data: PropTypes.array,
285
- dataKey: PropTypes.string,
286
- id: PropTypes.string,
287
- max: PropTypes.number,
288
- min: PropTypes.number
289
- })),
290
- /**
291
- * The list of zoom data related to each axis.
292
- */
293
- zoom: PropTypes.arrayOf(PropTypes.shape({
294
- axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
295
- end: PropTypes.number.isRequired,
296
- start: PropTypes.number.isRequired
297
- }))
298
- } : void 0;
299
- export { ChartDataProviderPro };
@@ -1,43 +0,0 @@
1
- 'use client';
2
-
3
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
- const _excluded = ["zoom", "onZoomChange"];
5
- import { useChartDataProviderProps } from '@mui/x-charts/internals';
6
- export const useChartContainerProProps = props => {
7
- const {
8
- zoom,
9
- onZoomChange
10
- } = props,
11
- baseProps = _objectWithoutPropertiesLoose(props, _excluded);
12
- const {
13
- children,
14
- drawingAreaProviderProps,
15
- seriesProviderProps,
16
- cartesianProviderProps,
17
- zAxisContextProps,
18
- highlightedProviderProps,
19
- sizeProviderProps,
20
- pluginProviderProps,
21
- animationProviderProps,
22
- xAxis,
23
- yAxis
24
- } = useChartDataProviderProps(baseProps);
25
- const zoomProviderProps = {
26
- zoom,
27
- onZoomChange,
28
- xAxis,
29
- yAxis
30
- };
31
- return {
32
- zoomProviderProps,
33
- children,
34
- drawingAreaProviderProps,
35
- pluginProviderProps,
36
- seriesProviderProps,
37
- cartesianProviderProps,
38
- zAxisContextProps,
39
- highlightedProviderProps,
40
- sizeProviderProps,
41
- animationProviderProps
42
- };
43
- };
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- export const ZoomContext = /*#__PURE__*/React.createContext({
3
- isInitialized: false,
4
- data: {
5
- isZoomEnabled: false,
6
- isPanEnabled: false,
7
- options: {},
8
- zoomData: [],
9
- setZoomData: () => {},
10
- isInteracting: false,
11
- setIsInteracting: () => {}
12
- }
13
- });
14
- if (process.env.NODE_ENV !== 'production') {
15
- ZoomContext.displayName = 'ZoomContext';
16
- }
@@ -1,56 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import useControlled from '@mui/utils/useControlled';
5
- import { ZoomContext } from "./ZoomContext.js";
6
- import { defaultizeZoom } from "./defaultizeZoom.js";
7
- import { initializeZoomData } from "./initializeZoomData.js";
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- export function ZoomProvider({
10
- children,
11
- xAxis,
12
- yAxis,
13
- zoom,
14
- onZoomChange
15
- }) {
16
- const [isInteracting, setIsInteracting] = React.useState(false);
17
- const options = React.useMemo(() => [...defaultizeZoom(xAxis, 'x'), ...defaultizeZoom(yAxis, 'y')].reduce((acc, v) => {
18
- acc[v.axisId] = v;
19
- return acc;
20
- }, {}), [xAxis, yAxis]);
21
-
22
- // Default zoom data is initialized only once when uncontrolled. If the user changes the options
23
- // after the initial render, the zoom data will not be updated until the next zoom interaction.
24
- // This is required to avoid warnings about controlled/uncontrolled components.
25
- const defaultZoomData = React.useRef(initializeZoomData(options));
26
- const [zoomData, setZoomData] = useControlled({
27
- controlled: zoom,
28
- // eslint-disable-next-line react-compiler/react-compiler
29
- default: defaultZoomData.current,
30
- name: 'ZoomProvider',
31
- state: 'zoom'
32
- });
33
- const setZoomDataCallback = React.useCallback(newZoomData => {
34
- setZoomData(newZoomData);
35
- onZoomChange?.(newZoomData);
36
- }, [setZoomData, onZoomChange]);
37
- const value = React.useMemo(() => ({
38
- isInitialized: true,
39
- data: {
40
- isZoomEnabled: Object.keys(options).length > 0,
41
- isPanEnabled: isPanEnabled(options),
42
- options,
43
- zoomData,
44
- setZoomData: setZoomDataCallback,
45
- isInteracting,
46
- setIsInteracting
47
- }
48
- }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
49
- return /*#__PURE__*/_jsx(ZoomContext.Provider, {
50
- value: value,
51
- children: children
52
- });
53
- }
54
- function isPanEnabled(options) {
55
- return Object.values(options).some(v => v.panning) || false;
56
- }
@@ -1,16 +0,0 @@
1
- import { useSetupPan } from "./useSetupPan.js";
2
- import { useSetupZoom } from "./useSetupZoom.js";
3
-
4
- /**
5
- * Sets up the zoom functionality if using composition or a custom chart.
6
- *
7
- * Simply add this component at the same level as the chart component to enable zooming and panning.
8
- *
9
- * See: [Composition](https://mui.com/x/react-charts/composition/)
10
- */
11
- function ZoomSetup() {
12
- useSetupZoom();
13
- useSetupPan();
14
- return null;
15
- }
16
- export { ZoomSetup };
@@ -1,32 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { isDefined } from '@mui/x-charts/internals';
3
- const defaultZoomOptions = {
4
- minStart: 0,
5
- maxEnd: 100,
6
- step: 5,
7
- minSpan: 10,
8
- maxSpan: 100,
9
- panning: true,
10
- filterMode: 'keep'
11
- };
12
- export const defaultizeZoom = (axis, axisDirection) => {
13
- if (!axis) {
14
- return [];
15
- }
16
- const defaultized = axis.map(v => {
17
- if (!v.zoom) {
18
- return undefined;
19
- }
20
- if (v.zoom === true) {
21
- return _extends({
22
- axisId: v.id,
23
- axisDirection
24
- }, defaultZoomOptions);
25
- }
26
- return _extends({
27
- axisId: v.id,
28
- axisDirection
29
- }, defaultZoomOptions, v.zoom);
30
- }).filter(isDefined);
31
- return defaultized;
32
- };
@@ -1,3 +0,0 @@
1
- export * from "./ZoomContext.js";
2
- export * from "./ZoomProvider.js";
3
- export * from "./Zoom.types.js";
@@ -1,13 +0,0 @@
1
- // This function is used to initialize the zoom data when it is not provided by the user.
2
- // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
3
- export const initializeZoomData = options => {
4
- return Object.values(options).map(({
5
- axisId,
6
- minStart: start,
7
- maxEnd: end
8
- }) => ({
9
- axisId,
10
- start,
11
- end
12
- }));
13
- };