@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.
- package/BarChartPro/BarChartPro.d.ts +2 -2
- package/BarChartPro/BarChartPro.js +75 -34
- package/BarChartPro/BarChartPro.plugins.d.ts +10 -0
- package/BarChartPro/BarChartPro.plugins.js +3 -0
- package/CHANGELOG.md +2007 -230
- package/ChartContainerPro/ChartContainerPro.d.ts +33 -5
- package/ChartContainerPro/ChartContainerPro.js +55 -37
- package/ChartContainerPro/useChartContainerProProps.d.ts +6 -5
- package/ChartContainerPro/useChartContainerProProps.js +17 -13
- package/ChartDataProviderPro/ChartDataProviderPro.d.ts +37 -0
- package/ChartDataProviderPro/ChartDataProviderPro.js +105 -0
- package/{context → ChartDataProviderPro}/package.json +1 -1
- package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +8 -0
- package/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
- package/Heatmap/Heatmap.d.ts +1 -2
- package/Heatmap/Heatmap.js +36 -13
- package/Heatmap/Heatmap.plugins.d.ts +8 -0
- package/Heatmap/Heatmap.plugins.js +2 -0
- package/Heatmap/HeatmapItem.js +1 -1
- package/Heatmap/HeatmapTooltip.js +8 -28
- package/Heatmap/extremums.d.ts +2 -2
- package/Heatmap/formatter.d.ts +2 -2
- package/Heatmap/formatter.js +2 -1
- package/Heatmap/heatmapClasses.js +2 -1
- package/Heatmap/plugin.d.ts +2 -2
- package/Heatmap/plugin.js +4 -2
- package/Heatmap/tooltip.d.ts +3 -0
- package/Heatmap/tooltip.js +25 -0
- package/LineChartPro/LineChartPro.d.ts +2 -2
- package/LineChartPro/LineChartPro.js +81 -54
- package/LineChartPro/LineChartPro.plugins.d.ts +10 -0
- package/LineChartPro/LineChartPro.plugins.js +3 -0
- package/README.md +1 -1
- package/ScatterChartPro/ScatterChartPro.d.ts +2 -2
- package/ScatterChartPro/ScatterChartPro.js +59 -34
- package/ScatterChartPro/ScatterChartPro.plugins.d.ts +10 -0
- package/ScatterChartPro/ScatterChartPro.plugins.js +3 -0
- package/hooks/index.d.ts +1 -0
- package/hooks/index.js +2 -1
- package/hooks/useSeries.d.ts +2 -4
- package/hooks/zoom/index.d.ts +1 -0
- package/hooks/zoom/index.js +1 -0
- package/hooks/zoom/useIsZoomInteracting.d.ts +6 -0
- package/hooks/zoom/useIsZoomInteracting.js +14 -0
- package/index.d.ts +3 -2
- package/index.js +5 -6
- package/internals/plugins/allPlugins.d.ts +11 -0
- package/internals/plugins/allPlugins.js +5 -0
- package/internals/plugins/useChartProZoom/creatZoomLookup.d.ts +3 -0
- package/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
- package/internals/plugins/useChartProZoom/defaultizeZoom.d.ts +2 -0
- package/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
- package/internals/plugins/useChartProZoom/index.d.ts +3 -0
- package/internals/plugins/useChartProZoom/index.js +3 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.d.ts +3 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +377 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +50 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts +45 -0
- package/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
- package/internals/plugins/useChartProZoom/zoom.types.d.ts +53 -0
- package/internals/utils/releaseInfo.js +2 -2
- package/models/index.d.ts +1 -0
- package/models/index.js +2 -1
- package/modern/BarChartPro/BarChartPro.js +75 -34
- package/modern/BarChartPro/BarChartPro.plugins.js +3 -0
- package/modern/ChartContainerPro/ChartContainerPro.js +55 -37
- package/modern/ChartContainerPro/useChartContainerProProps.js +17 -13
- package/modern/ChartDataProviderPro/ChartDataProviderPro.js +105 -0
- package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
- package/modern/Heatmap/Heatmap.js +36 -13
- package/modern/Heatmap/Heatmap.plugins.js +2 -0
- package/modern/Heatmap/HeatmapItem.js +1 -1
- package/modern/Heatmap/HeatmapTooltip.js +8 -28
- package/modern/Heatmap/formatter.js +2 -1
- package/modern/Heatmap/heatmapClasses.js +2 -1
- package/modern/Heatmap/plugin.js +4 -2
- package/modern/Heatmap/tooltip.js +25 -0
- package/modern/LineChartPro/LineChartPro.js +81 -54
- package/modern/LineChartPro/LineChartPro.plugins.js +3 -0
- package/modern/ScatterChartPro/ScatterChartPro.js +59 -34
- package/modern/ScatterChartPro/ScatterChartPro.plugins.js +3 -0
- package/modern/hooks/index.js +2 -1
- package/modern/hooks/zoom/index.js +1 -0
- package/modern/hooks/zoom/useIsZoomInteracting.js +14 -0
- package/modern/index.js +5 -6
- package/modern/internals/plugins/allPlugins.js +5 -0
- package/modern/internals/plugins/useChartProZoom/creatZoomLookup.js +12 -0
- package/modern/internals/plugins/useChartProZoom/defaultizeZoom.js +25 -0
- package/modern/internals/plugins/useChartProZoom/index.js +3 -0
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.js +303 -0
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +10 -0
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js +1 -0
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js +126 -0
- package/modern/internals/plugins/useChartProZoom/zoom.types.js +1 -0
- package/modern/internals/utils/releaseInfo.js +2 -2
- package/modern/models/index.js +2 -1
- package/node/BarChartPro/BarChartPro.js +74 -33
- package/node/BarChartPro/BarChartPro.plugins.js +9 -0
- package/node/ChartContainerPro/ChartContainerPro.js +54 -36
- package/node/ChartContainerPro/useChartContainerProProps.js +17 -13
- package/node/ChartDataProviderPro/ChartDataProviderPro.js +111 -0
- package/node/ChartDataProviderPro/useChartDataProviderProProps.js +21 -0
- package/node/Heatmap/Heatmap.js +36 -13
- package/node/Heatmap/Heatmap.plugins.js +8 -0
- package/node/Heatmap/HeatmapItem.js +2 -2
- package/node/Heatmap/HeatmapTooltip.js +6 -26
- package/node/Heatmap/formatter.js +2 -1
- package/node/Heatmap/heatmapClasses.js +5 -4
- package/node/Heatmap/plugin.js +4 -2
- package/node/Heatmap/tooltip.js +31 -0
- package/node/LineChartPro/LineChartPro.js +80 -53
- package/node/LineChartPro/LineChartPro.plugins.js +9 -0
- package/node/ScatterChartPro/ScatterChartPro.js +58 -33
- package/node/ScatterChartPro/ScatterChartPro.plugins.js +9 -0
- package/node/hooks/index.js +16 -1
- package/node/{context/CartesianProviderPro → hooks/zoom}/index.js +4 -4
- package/node/hooks/zoom/useIsZoomInteracting.js +19 -0
- package/node/index.js +34 -23
- package/node/internals/plugins/allPlugins.js +11 -0
- package/node/internals/plugins/useChartProZoom/creatZoomLookup.js +19 -0
- package/node/internals/plugins/useChartProZoom/defaultizeZoom.js +33 -0
- package/node/internals/plugins/useChartProZoom/index.js +38 -0
- package/node/internals/plugins/useChartProZoom/useChartProZoom.js +310 -0
- package/node/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +18 -0
- package/node/internals/plugins/useChartProZoom/useChartProZoom.utils.js +140 -0
- package/node/internals/plugins/useChartProZoom/zoom.types.js +5 -0
- package/node/internals/utils/releaseInfo.js +4 -3
- package/package.json +6 -6
- package/typeOverloads/modules.d.ts +8 -1
- package/context/CartesianProviderPro/CartesianProviderPro.d.ts +0 -6
- package/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
- package/context/CartesianProviderPro/createAxisFilterMapper.d.ts +0 -12
- package/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
- package/context/CartesianProviderPro/index.d.ts +0 -1
- package/context/CartesianProviderPro/index.js +0 -1
- package/context/ChartDataProviderPro/ChartDataProviderPro.d.ts +0 -10
- package/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -299
- package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -14
- package/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
- package/context/ZoomProvider/Zoom.types.d.ts +0 -144
- package/context/ZoomProvider/ZoomContext.d.ts +0 -4
- package/context/ZoomProvider/ZoomContext.js +0 -16
- package/context/ZoomProvider/ZoomProvider.d.ts +0 -3
- package/context/ZoomProvider/ZoomProvider.js +0 -56
- package/context/ZoomProvider/ZoomSetup.d.ts +0 -9
- package/context/ZoomProvider/ZoomSetup.js +0 -16
- package/context/ZoomProvider/defaultizeZoom.d.ts +0 -2
- package/context/ZoomProvider/defaultizeZoom.js +0 -32
- package/context/ZoomProvider/index.d.ts +0 -3
- package/context/ZoomProvider/index.js +0 -3
- package/context/ZoomProvider/initializeZoomData.d.ts +0 -6
- package/context/ZoomProvider/initializeZoomData.js +0 -13
- package/context/ZoomProvider/useSetupPan.d.ts +0 -1
- package/context/ZoomProvider/useSetupPan.js +0 -106
- package/context/ZoomProvider/useSetupZoom.d.ts +0 -1
- package/context/ZoomProvider/useSetupZoom.js +0 -274
- package/context/ZoomProvider/useZoom.d.ts +0 -7
- package/context/ZoomProvider/useZoom.js +0 -19
- package/context/index.d.ts +0 -3
- package/context/index.js +0 -5
- package/modern/context/CartesianProviderPro/CartesianProviderPro.js +0 -89
- package/modern/context/CartesianProviderPro/createAxisFilterMapper.js +0 -60
- package/modern/context/CartesianProviderPro/index.js +0 -1
- package/modern/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -299
- package/modern/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -43
- package/modern/context/ZoomProvider/ZoomContext.js +0 -16
- package/modern/context/ZoomProvider/ZoomProvider.js +0 -56
- package/modern/context/ZoomProvider/ZoomSetup.js +0 -16
- package/modern/context/ZoomProvider/defaultizeZoom.js +0 -32
- package/modern/context/ZoomProvider/index.js +0 -3
- package/modern/context/ZoomProvider/initializeZoomData.js +0 -13
- package/modern/context/ZoomProvider/useSetupPan.js +0 -106
- package/modern/context/ZoomProvider/useSetupZoom.js +0 -274
- package/modern/context/ZoomProvider/useZoom.js +0 -19
- package/modern/context/index.js +0 -5
- package/node/context/CartesianProviderPro/CartesianProviderPro.js +0 -95
- package/node/context/CartesianProviderPro/createAxisFilterMapper.js +0 -68
- package/node/context/ChartDataProviderPro/ChartDataProviderPro.js +0 -305
- package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js +0 -50
- package/node/context/ZoomProvider/ZoomContext.js +0 -23
- package/node/context/ZoomProvider/ZoomProvider.js +0 -63
- package/node/context/ZoomProvider/ZoomSetup.js +0 -20
- package/node/context/ZoomProvider/defaultizeZoom.js +0 -40
- package/node/context/ZoomProvider/index.js +0 -38
- package/node/context/ZoomProvider/initializeZoomData.js +0 -20
- package/node/context/ZoomProvider/useSetupPan.js +0 -114
- package/node/context/ZoomProvider/useSetupZoom.js +0 -281
- package/node/context/ZoomProvider/useZoom.js +0 -25
- package/node/context/index.js +0 -27
- /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.d.ts +0 -0
- /package/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
- /package/{context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/useChartProZoom.types.js} +0 -0
- /package/{modern/context/ZoomProvider/Zoom.types.js → internals/plugins/useChartProZoom/zoom.types.js} +0 -0
- /package/modern/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
- /package/node/{context/ChartDataProviderPro → ChartDataProviderPro}/index.js +0 -0
- /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,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
|
-
};
|