@mui/x-charts-pro 7.0.0-alpha.0
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 +18 -0
- package/BarChartPro/BarChartPro.js +417 -0
- package/BarChartPro/index.d.ts +1 -0
- package/BarChartPro/index.js +1 -0
- package/BarChartPro/package.json +6 -0
- package/CHANGELOG.md +4404 -0
- package/ChartContainerPro/ChartContainerPro.d.ts +7 -0
- package/ChartContainerPro/ChartContainerPro.js +282 -0
- package/ChartContainerPro/index.d.ts +1 -0
- package/ChartContainerPro/index.js +1 -0
- package/ChartContainerPro/package.json +6 -0
- package/ChartContainerPro/useChartContainerProProps.d.ts +15 -0
- package/ChartContainerPro/useChartContainerProProps.js +39 -0
- package/Heatmap/DefaultHeatmapTooltip.d.ts +7 -0
- package/Heatmap/DefaultHeatmapTooltip.js +97 -0
- package/Heatmap/Heatmap.d.ts +49 -0
- package/Heatmap/Heatmap.js +387 -0
- package/Heatmap/HeatmapItem.d.ts +49 -0
- package/Heatmap/HeatmapItem.js +106 -0
- package/Heatmap/HeatmapPlot.d.ts +9 -0
- package/Heatmap/HeatmapPlot.js +57 -0
- package/Heatmap/extremums.d.ts +2 -0
- package/Heatmap/extremums.js +8 -0
- package/Heatmap/formatter.d.ts +3 -0
- package/Heatmap/formatter.js +20 -0
- package/Heatmap/getColor.d.ts +3 -0
- package/Heatmap/getColor.js +15 -0
- package/Heatmap/heatmapClasses.d.ts +11 -0
- package/Heatmap/heatmapClasses.js +13 -0
- package/Heatmap/index.d.ts +4 -0
- package/Heatmap/index.js +4 -0
- package/Heatmap/package.json +6 -0
- package/Heatmap/plugin.d.ts +2 -0
- package/Heatmap/plugin.js +10 -0
- package/LICENSE +11 -0
- package/LineChartPro/LineChartPro.d.ts +17 -0
- package/LineChartPro/LineChartPro.js +473 -0
- package/LineChartPro/index.d.ts +1 -0
- package/LineChartPro/index.js +1 -0
- package/LineChartPro/package.json +6 -0
- package/README.md +26 -0
- package/ResponsiveChartContainerPro/ResponsiveChartContainerPro.d.ts +7 -0
- package/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js +259 -0
- package/ResponsiveChartContainerPro/index.d.ts +1 -0
- package/ResponsiveChartContainerPro/index.js +1 -0
- package/ResponsiveChartContainerPro/package.json +6 -0
- package/ResponsiveChartContainerPro/useResponsiveChartContainerProProps.d.ts +41 -0
- package/ResponsiveChartContainerPro/useResponsiveChartContainerProProps.js +25 -0
- package/ScatterChartPro/ScatterChartPro.d.ts +17 -0
- package/ScatterChartPro/ScatterChartPro.js +388 -0
- package/ScatterChartPro/index.d.ts +1 -0
- package/ScatterChartPro/index.js +1 -0
- package/ScatterChartPro/package.json +6 -0
- package/context/CartesianProviderPro/CartesianProviderPro.d.ts +6 -0
- package/context/CartesianProviderPro/CartesianProviderPro.js +54 -0
- package/context/CartesianProviderPro/index.d.ts +1 -0
- package/context/CartesianProviderPro/index.js +1 -0
- package/context/ZoomProvider/Zoom.types.d.ts +134 -0
- package/context/ZoomProvider/Zoom.types.js +1 -0
- package/context/ZoomProvider/ZoomContext.d.ts +4 -0
- package/context/ZoomProvider/ZoomContext.js +16 -0
- package/context/ZoomProvider/ZoomProvider.d.ts +3 -0
- package/context/ZoomProvider/ZoomProvider.js +53 -0
- package/context/ZoomProvider/ZoomSetup.d.ts +9 -0
- package/context/ZoomProvider/ZoomSetup.js +16 -0
- package/context/ZoomProvider/defaultizeZoom.d.ts +2 -0
- package/context/ZoomProvider/defaultizeZoom.js +31 -0
- package/context/ZoomProvider/index.d.ts +3 -0
- package/context/ZoomProvider/index.js +3 -0
- package/context/ZoomProvider/initializeZoomData.d.ts +6 -0
- package/context/ZoomProvider/initializeZoomData.js +13 -0
- package/context/ZoomProvider/useSetupPan.d.ts +1 -0
- package/context/ZoomProvider/useSetupPan.js +104 -0
- package/context/ZoomProvider/useSetupZoom.d.ts +1 -0
- package/context/ZoomProvider/useSetupZoom.js +272 -0
- package/context/ZoomProvider/useZoom.d.ts +7 -0
- package/context/ZoomProvider/useZoom.js +17 -0
- package/context/index.d.ts +3 -0
- package/context/index.js +5 -0
- package/context/package.json +6 -0
- package/hooks/index.d.ts +1 -0
- package/hooks/index.js +1 -0
- package/hooks/package.json +6 -0
- package/hooks/useSeries.d.ts +11 -0
- package/hooks/useSeries.js +14 -0
- package/index.d.ts +31 -0
- package/index.js +45 -0
- package/internals/utils/releaseInfo.d.ts +1 -0
- package/internals/utils/releaseInfo.js +13 -0
- package/models/index.d.ts +1 -0
- package/models/index.js +1 -0
- package/models/package.json +6 -0
- package/models/seriesType/heatmap.d.ts +28 -0
- package/models/seriesType/heatmap.js +1 -0
- package/models/seriesType/index.d.ts +1 -0
- package/models/seriesType/index.js +1 -0
- package/modern/BarChartPro/BarChartPro.js +417 -0
- package/modern/BarChartPro/index.js +1 -0
- package/modern/ChartContainerPro/ChartContainerPro.js +282 -0
- package/modern/ChartContainerPro/index.js +1 -0
- package/modern/ChartContainerPro/useChartContainerProProps.js +39 -0
- package/modern/Heatmap/DefaultHeatmapTooltip.js +97 -0
- package/modern/Heatmap/Heatmap.js +387 -0
- package/modern/Heatmap/HeatmapItem.js +106 -0
- package/modern/Heatmap/HeatmapPlot.js +57 -0
- package/modern/Heatmap/extremums.js +8 -0
- package/modern/Heatmap/formatter.js +20 -0
- package/modern/Heatmap/getColor.js +15 -0
- package/modern/Heatmap/heatmapClasses.js +13 -0
- package/modern/Heatmap/index.js +4 -0
- package/modern/Heatmap/plugin.js +10 -0
- package/modern/LineChartPro/LineChartPro.js +473 -0
- package/modern/LineChartPro/index.js +1 -0
- package/modern/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js +259 -0
- package/modern/ResponsiveChartContainerPro/index.js +1 -0
- package/modern/ResponsiveChartContainerPro/useResponsiveChartContainerProProps.js +25 -0
- package/modern/ScatterChartPro/ScatterChartPro.js +388 -0
- package/modern/ScatterChartPro/index.js +1 -0
- package/modern/context/CartesianProviderPro/CartesianProviderPro.js +54 -0
- package/modern/context/CartesianProviderPro/index.js +1 -0
- package/modern/context/ZoomProvider/Zoom.types.js +1 -0
- package/modern/context/ZoomProvider/ZoomContext.js +16 -0
- package/modern/context/ZoomProvider/ZoomProvider.js +53 -0
- package/modern/context/ZoomProvider/ZoomSetup.js +16 -0
- package/modern/context/ZoomProvider/defaultizeZoom.js +31 -0
- package/modern/context/ZoomProvider/index.js +3 -0
- package/modern/context/ZoomProvider/initializeZoomData.js +13 -0
- package/modern/context/ZoomProvider/useSetupPan.js +104 -0
- package/modern/context/ZoomProvider/useSetupZoom.js +272 -0
- package/modern/context/ZoomProvider/useZoom.js +17 -0
- package/modern/context/index.js +5 -0
- package/modern/hooks/index.js +1 -0
- package/modern/hooks/useSeries.js +14 -0
- package/modern/index.js +45 -0
- package/modern/internals/utils/releaseInfo.js +13 -0
- package/modern/models/index.js +1 -0
- package/modern/models/seriesType/heatmap.js +1 -0
- package/modern/models/seriesType/index.js +1 -0
- package/modern/typeOverloads/index.js +1 -0
- package/modern/typeOverloads/modules.js +1 -0
- package/node/BarChartPro/BarChartPro.js +425 -0
- package/node/BarChartPro/index.js +16 -0
- package/node/ChartContainerPro/ChartContainerPro.js +290 -0
- package/node/ChartContainerPro/index.js +16 -0
- package/node/ChartContainerPro/useChartContainerProProps.js +47 -0
- package/node/Heatmap/DefaultHeatmapTooltip.js +105 -0
- package/node/Heatmap/Heatmap.js +395 -0
- package/node/Heatmap/HeatmapItem.js +114 -0
- package/node/Heatmap/HeatmapPlot.js +65 -0
- package/node/Heatmap/extremums.js +15 -0
- package/node/Heatmap/formatter.js +27 -0
- package/node/Heatmap/getColor.js +21 -0
- package/node/Heatmap/heatmapClasses.js +21 -0
- package/node/Heatmap/index.js +47 -0
- package/node/Heatmap/plugin.js +17 -0
- package/node/LineChartPro/LineChartPro.js +481 -0
- package/node/LineChartPro/index.js +16 -0
- package/node/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js +267 -0
- package/node/ResponsiveChartContainerPro/index.js +16 -0
- package/node/ResponsiveChartContainerPro/useResponsiveChartContainerProProps.js +33 -0
- package/node/ScatterChartPro/ScatterChartPro.js +396 -0
- package/node/ScatterChartPro/index.js +16 -0
- package/node/context/CartesianProviderPro/CartesianProviderPro.js +61 -0
- package/node/context/CartesianProviderPro/index.js +16 -0
- package/node/context/ZoomProvider/Zoom.types.js +5 -0
- package/node/context/ZoomProvider/ZoomContext.js +24 -0
- package/node/context/ZoomProvider/ZoomProvider.js +62 -0
- package/node/context/ZoomProvider/ZoomSetup.js +20 -0
- package/node/context/ZoomProvider/defaultizeZoom.js +39 -0
- package/node/context/ZoomProvider/index.js +38 -0
- package/node/context/ZoomProvider/initializeZoomData.js +20 -0
- package/node/context/ZoomProvider/useSetupPan.js +114 -0
- package/node/context/ZoomProvider/useSetupZoom.js +281 -0
- package/node/context/ZoomProvider/useZoom.js +25 -0
- package/node/context/index.js +27 -0
- package/node/hooks/index.js +12 -0
- package/node/hooks/useSeries.js +21 -0
- package/node/index.js +354 -0
- package/node/internals/utils/releaseInfo.js +20 -0
- package/node/models/index.js +16 -0
- package/node/models/seriesType/heatmap.js +5 -0
- package/node/models/seriesType/index.js +16 -0
- package/node/typeOverloads/index.js +6 -0
- package/node/typeOverloads/modules.js +5 -0
- package/package.json +64 -0
- package/typeOverloads/index.d.ts +1 -0
- package/typeOverloads/index.js +1 -0
- package/typeOverloads/modules.d.ts +17 -0
- package/typeOverloads/modules.js +1 -0
- package/typeOverloads/package.json +6 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
|
|
3
|
+
export function getHeatmapUtilityClass(slot) {
|
|
4
|
+
// Those should be common to all charts
|
|
5
|
+
if (['highlighted', 'faded'].includes(slot)) {
|
|
6
|
+
return generateUtilityClass('Charts', slot);
|
|
7
|
+
}
|
|
8
|
+
return generateUtilityClass('MuiHeatmap', slot);
|
|
9
|
+
}
|
|
10
|
+
export const heatmapClasses = _extends({}, generateUtilityClasses('MuiHeatmap', ['cell']), {
|
|
11
|
+
highlighted: 'Charts-highlighted',
|
|
12
|
+
faded: 'Charts-faded'
|
|
13
|
+
});
|
package/Heatmap/index.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { getBaseExtremum } from './extremums';
|
|
2
|
+
import formatter from './formatter';
|
|
3
|
+
import getColor from './getColor';
|
|
4
|
+
export const plugin = {
|
|
5
|
+
seriesType: 'heatmap',
|
|
6
|
+
seriesFormatter: formatter,
|
|
7
|
+
colorProcessor: getColor,
|
|
8
|
+
xExtremumGetter: getBaseExtremum,
|
|
9
|
+
yExtremumGetter: getBaseExtremum
|
|
10
|
+
};
|
package/LICENSE
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
Commercial License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020 Material-UI SAS
|
|
4
|
+
|
|
5
|
+
MUI X Pro (https://mui.com/pricing/) is commercial software. You MUST agree to the
|
|
6
|
+
End User License Agreement (EULA: https://mui.com/r/x-license-eula) to be able to
|
|
7
|
+
use the software.
|
|
8
|
+
|
|
9
|
+
This means that you either need to purchase a commercial license at
|
|
10
|
+
https://mui.com/r/x-get-license?scope=pro or be eligible for the Evaluation (trial)
|
|
11
|
+
licenses detailed at https://mui.com/r/x-license-trial.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { LineChartProps } from '@mui/x-charts/LineChart';
|
|
3
|
+
import { ZoomProps } from '../context/ZoomProvider';
|
|
4
|
+
export interface LineChartProProps extends LineChartProps, ZoomProps {
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Demos:
|
|
8
|
+
*
|
|
9
|
+
* - [Lines](https://mui.com/x/react-charts/lines/)
|
|
10
|
+
* - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
|
|
11
|
+
*
|
|
12
|
+
* API:
|
|
13
|
+
*
|
|
14
|
+
* - [LineChart API](https://mui.com/x/api/charts/line-chart/)
|
|
15
|
+
*/
|
|
16
|
+
declare const LineChartPro: React.ForwardRefExoticComponent<LineChartProProps & React.RefAttributes<unknown>>;
|
|
17
|
+
export { LineChartPro };
|
|
@@ -0,0 +1,473 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["zoom", "onZoomChange"];
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import { AreaPlot, LineHighlightPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
|
|
7
|
+
import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
|
|
8
|
+
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
|
|
9
|
+
import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
|
|
10
|
+
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
|
|
11
|
+
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
|
|
12
|
+
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
|
|
13
|
+
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
|
|
14
|
+
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
|
|
15
|
+
import { useLineChartProps } from '@mui/x-charts/internals';
|
|
16
|
+
import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
|
|
17
|
+
import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
|
|
18
|
+
import { useZoom } from '../context/ZoomProvider/useZoom';
|
|
19
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
/**
|
|
21
|
+
* Demos:
|
|
22
|
+
*
|
|
23
|
+
* - [Lines](https://mui.com/x/react-charts/lines/)
|
|
24
|
+
* - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
|
|
25
|
+
*
|
|
26
|
+
* API:
|
|
27
|
+
*
|
|
28
|
+
* - [LineChart API](https://mui.com/x/api/charts/line-chart/)
|
|
29
|
+
*/
|
|
30
|
+
const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(props, ref) {
|
|
31
|
+
const {
|
|
32
|
+
zoom,
|
|
33
|
+
onZoomChange
|
|
34
|
+
} = props,
|
|
35
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
36
|
+
const {
|
|
37
|
+
chartContainerProps,
|
|
38
|
+
axisClickHandlerProps,
|
|
39
|
+
gridProps,
|
|
40
|
+
clipPathProps,
|
|
41
|
+
clipPathGroupProps,
|
|
42
|
+
areaPlotProps,
|
|
43
|
+
linePlotProps,
|
|
44
|
+
markPlotProps,
|
|
45
|
+
overlayProps,
|
|
46
|
+
chartsAxisProps,
|
|
47
|
+
axisHighlightProps,
|
|
48
|
+
lineHighlightPlotProps,
|
|
49
|
+
legendProps,
|
|
50
|
+
tooltipProps,
|
|
51
|
+
children
|
|
52
|
+
} = useLineChartProps(other);
|
|
53
|
+
return /*#__PURE__*/_jsxs(ResponsiveChartContainerPro, _extends({
|
|
54
|
+
ref: ref
|
|
55
|
+
}, chartContainerProps, {
|
|
56
|
+
zoom: zoom,
|
|
57
|
+
onZoomChange: onZoomChange,
|
|
58
|
+
children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
|
|
59
|
+
children: [/*#__PURE__*/_jsx(AreaPlotZoom, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlotZoom, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
|
|
60
|
+
})), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
|
|
61
|
+
"data-drawing-container": true,
|
|
62
|
+
children: /*#__PURE__*/_jsx(MarkPlotZoom, _extends({}, markPlotProps))
|
|
63
|
+
}), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
|
|
64
|
+
}));
|
|
65
|
+
});
|
|
66
|
+
process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
|
|
67
|
+
// ----------------------------- Warning --------------------------------
|
|
68
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
69
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
70
|
+
// ----------------------------------------------------------------------
|
|
71
|
+
/**
|
|
72
|
+
* The configuration of axes highlight.
|
|
73
|
+
* @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
|
|
74
|
+
* @default { x: 'line' }
|
|
75
|
+
*/
|
|
76
|
+
axisHighlight: PropTypes.shape({
|
|
77
|
+
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
78
|
+
y: PropTypes.oneOf(['band', 'line', 'none'])
|
|
79
|
+
}),
|
|
80
|
+
/**
|
|
81
|
+
* Indicate which axis to display the bottom of the charts.
|
|
82
|
+
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
83
|
+
* @default xAxisIds[0] The id of the first provided axis
|
|
84
|
+
*/
|
|
85
|
+
bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
|
86
|
+
children: PropTypes.node,
|
|
87
|
+
className: PropTypes.string,
|
|
88
|
+
/**
|
|
89
|
+
* Color palette used to colorize multiple series.
|
|
90
|
+
* @default blueberryTwilightPalette
|
|
91
|
+
*/
|
|
92
|
+
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
93
|
+
/**
|
|
94
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
95
|
+
*/
|
|
96
|
+
dataset: PropTypes.arrayOf(PropTypes.object),
|
|
97
|
+
desc: PropTypes.string,
|
|
98
|
+
/**
|
|
99
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
100
|
+
* It might break interactive features, but will improve performance.
|
|
101
|
+
* @default false
|
|
102
|
+
*/
|
|
103
|
+
disableAxisListener: PropTypes.bool,
|
|
104
|
+
/**
|
|
105
|
+
* If `true`, render the line highlight item.
|
|
106
|
+
*/
|
|
107
|
+
disableLineItemHighlight: PropTypes.bool,
|
|
108
|
+
/**
|
|
109
|
+
* Option to display a cartesian grid in the background.
|
|
110
|
+
*/
|
|
111
|
+
grid: PropTypes.shape({
|
|
112
|
+
horizontal: PropTypes.bool,
|
|
113
|
+
vertical: PropTypes.bool
|
|
114
|
+
}),
|
|
115
|
+
/**
|
|
116
|
+
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
117
|
+
*/
|
|
118
|
+
height: PropTypes.number,
|
|
119
|
+
/**
|
|
120
|
+
* The item currently highlighted. Turns highlighting into a controlled prop.
|
|
121
|
+
*/
|
|
122
|
+
highlightedItem: PropTypes.shape({
|
|
123
|
+
dataIndex: PropTypes.number,
|
|
124
|
+
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
|
125
|
+
}),
|
|
126
|
+
/**
|
|
127
|
+
* Indicate which axis to display the left of the charts.
|
|
128
|
+
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
129
|
+
* @default yAxisIds[0] The id of the first provided axis
|
|
130
|
+
*/
|
|
131
|
+
leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
|
132
|
+
/**
|
|
133
|
+
* @deprecated Consider using `slotProps.legend` instead.
|
|
134
|
+
*/
|
|
135
|
+
legend: PropTypes.shape({
|
|
136
|
+
classes: PropTypes.object,
|
|
137
|
+
direction: PropTypes.oneOf(['column', 'row']),
|
|
138
|
+
hidden: PropTypes.bool,
|
|
139
|
+
position: PropTypes.shape({
|
|
140
|
+
horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
|
|
141
|
+
vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
|
|
142
|
+
}),
|
|
143
|
+
slotProps: PropTypes.object,
|
|
144
|
+
slots: PropTypes.object
|
|
145
|
+
}),
|
|
146
|
+
/**
|
|
147
|
+
* If `true`, a loading overlay is displayed.
|
|
148
|
+
* @default false
|
|
149
|
+
*/
|
|
150
|
+
loading: PropTypes.bool,
|
|
151
|
+
/**
|
|
152
|
+
* The margin between the SVG and the drawing area.
|
|
153
|
+
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
154
|
+
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
155
|
+
* @default object Depends on the charts type.
|
|
156
|
+
*/
|
|
157
|
+
margin: PropTypes.shape({
|
|
158
|
+
bottom: PropTypes.number,
|
|
159
|
+
left: PropTypes.number,
|
|
160
|
+
right: PropTypes.number,
|
|
161
|
+
top: PropTypes.number
|
|
162
|
+
}),
|
|
163
|
+
/**
|
|
164
|
+
* Callback fired when an area element is clicked.
|
|
165
|
+
*/
|
|
166
|
+
onAreaClick: PropTypes.func,
|
|
167
|
+
/**
|
|
168
|
+
* The function called for onClick events.
|
|
169
|
+
* The second argument contains information about all line/bar elements at the current mouse position.
|
|
170
|
+
* @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
|
|
171
|
+
* @param {null | AxisData} data The data about the clicked axis and items associated with it.
|
|
172
|
+
*/
|
|
173
|
+
onAxisClick: PropTypes.func,
|
|
174
|
+
/**
|
|
175
|
+
* The callback fired when the highlighted item changes.
|
|
176
|
+
*
|
|
177
|
+
* @param {HighlightItemData | null} highlightedItem The newly highlighted item.
|
|
178
|
+
*/
|
|
179
|
+
onHighlightChange: PropTypes.func,
|
|
180
|
+
/**
|
|
181
|
+
* Callback fired when a line element is clicked.
|
|
182
|
+
*/
|
|
183
|
+
onLineClick: PropTypes.func,
|
|
184
|
+
/**
|
|
185
|
+
* Callback fired when a mark element is clicked.
|
|
186
|
+
*/
|
|
187
|
+
onMarkClick: PropTypes.func,
|
|
188
|
+
/**
|
|
189
|
+
* Indicate which axis to display the right of the charts.
|
|
190
|
+
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
191
|
+
* @default null
|
|
192
|
+
*/
|
|
193
|
+
rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
|
194
|
+
/**
|
|
195
|
+
* The series to display in the line chart.
|
|
196
|
+
* An array of [[LineSeriesType]] objects.
|
|
197
|
+
*/
|
|
198
|
+
series: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
199
|
+
/**
|
|
200
|
+
* If `true`, animations are skipped.
|
|
201
|
+
* @default false
|
|
202
|
+
*/
|
|
203
|
+
skipAnimation: PropTypes.bool,
|
|
204
|
+
/**
|
|
205
|
+
* The props used for each component slot.
|
|
206
|
+
* @default {}
|
|
207
|
+
*/
|
|
208
|
+
slotProps: PropTypes.object,
|
|
209
|
+
/**
|
|
210
|
+
* Overridable component slots.
|
|
211
|
+
* @default {}
|
|
212
|
+
*/
|
|
213
|
+
slots: PropTypes.object,
|
|
214
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
215
|
+
title: PropTypes.string,
|
|
216
|
+
/**
|
|
217
|
+
* The configuration of the tooltip.
|
|
218
|
+
* @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
|
|
219
|
+
* @default { trigger: 'item' }
|
|
220
|
+
*/
|
|
221
|
+
tooltip: PropTypes.shape({
|
|
222
|
+
axisContent: PropTypes.elementType,
|
|
223
|
+
classes: PropTypes.object,
|
|
224
|
+
itemContent: PropTypes.elementType,
|
|
225
|
+
slotProps: PropTypes.object,
|
|
226
|
+
slots: PropTypes.object,
|
|
227
|
+
trigger: PropTypes.oneOf(['axis', 'item', 'none'])
|
|
228
|
+
}),
|
|
229
|
+
/**
|
|
230
|
+
* Indicate which axis to display the top of the charts.
|
|
231
|
+
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
232
|
+
* @default null
|
|
233
|
+
*/
|
|
234
|
+
topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
|
235
|
+
viewBox: PropTypes.shape({
|
|
236
|
+
height: PropTypes.number,
|
|
237
|
+
width: PropTypes.number,
|
|
238
|
+
x: PropTypes.number,
|
|
239
|
+
y: PropTypes.number
|
|
240
|
+
}),
|
|
241
|
+
/**
|
|
242
|
+
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
243
|
+
*/
|
|
244
|
+
width: PropTypes.number,
|
|
245
|
+
/**
|
|
246
|
+
* The configuration of the x-axes.
|
|
247
|
+
* If not provided, a default axis config is used.
|
|
248
|
+
* An array of [[AxisConfig]] objects.
|
|
249
|
+
*/
|
|
250
|
+
xAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
251
|
+
axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
252
|
+
classes: PropTypes.object,
|
|
253
|
+
colorMap: PropTypes.oneOfType([PropTypes.shape({
|
|
254
|
+
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
255
|
+
type: PropTypes.oneOf(['ordinal']).isRequired,
|
|
256
|
+
unknownColor: PropTypes.string,
|
|
257
|
+
values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
|
|
258
|
+
}), PropTypes.shape({
|
|
259
|
+
color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
|
|
260
|
+
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
261
|
+
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
262
|
+
type: PropTypes.oneOf(['continuous']).isRequired
|
|
263
|
+
}), PropTypes.shape({
|
|
264
|
+
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
265
|
+
thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
|
|
266
|
+
type: PropTypes.oneOf(['piecewise']).isRequired
|
|
267
|
+
})]),
|
|
268
|
+
data: PropTypes.array,
|
|
269
|
+
dataKey: PropTypes.string,
|
|
270
|
+
disableLine: PropTypes.bool,
|
|
271
|
+
disableTicks: PropTypes.bool,
|
|
272
|
+
fill: PropTypes.string,
|
|
273
|
+
hideTooltip: PropTypes.bool,
|
|
274
|
+
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
275
|
+
label: PropTypes.string,
|
|
276
|
+
labelFontSize: PropTypes.number,
|
|
277
|
+
labelStyle: PropTypes.object,
|
|
278
|
+
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
279
|
+
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
280
|
+
position: PropTypes.oneOf(['bottom', 'top']),
|
|
281
|
+
reverse: PropTypes.bool,
|
|
282
|
+
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
283
|
+
slotProps: PropTypes.object,
|
|
284
|
+
slots: PropTypes.object,
|
|
285
|
+
stroke: PropTypes.string,
|
|
286
|
+
tickFontSize: PropTypes.number,
|
|
287
|
+
tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
|
|
288
|
+
tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
|
|
289
|
+
tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
|
|
290
|
+
tickLabelStyle: PropTypes.object,
|
|
291
|
+
tickMaxStep: PropTypes.number,
|
|
292
|
+
tickMinStep: PropTypes.number,
|
|
293
|
+
tickNumber: PropTypes.number,
|
|
294
|
+
tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
|
|
295
|
+
tickSize: PropTypes.number,
|
|
296
|
+
valueFormatter: PropTypes.func,
|
|
297
|
+
zoom: PropTypes.oneOfType([PropTypes.shape({
|
|
298
|
+
maxEnd: PropTypes.number,
|
|
299
|
+
maxSpan: PropTypes.number,
|
|
300
|
+
minSpan: PropTypes.number,
|
|
301
|
+
minStart: PropTypes.number,
|
|
302
|
+
panning: PropTypes.bool,
|
|
303
|
+
step: PropTypes.number
|
|
304
|
+
}), PropTypes.bool])
|
|
305
|
+
})),
|
|
306
|
+
/**
|
|
307
|
+
* The configuration of the y-axes.
|
|
308
|
+
* If not provided, a default axis config is used.
|
|
309
|
+
* An array of [[AxisConfig]] objects.
|
|
310
|
+
*/
|
|
311
|
+
yAxis: PropTypes.arrayOf(PropTypes.shape({
|
|
312
|
+
axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
313
|
+
classes: PropTypes.object,
|
|
314
|
+
colorMap: PropTypes.oneOfType([PropTypes.shape({
|
|
315
|
+
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
316
|
+
type: PropTypes.oneOf(['ordinal']).isRequired,
|
|
317
|
+
unknownColor: PropTypes.string,
|
|
318
|
+
values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
|
|
319
|
+
}), PropTypes.shape({
|
|
320
|
+
color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
|
|
321
|
+
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
322
|
+
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
323
|
+
type: PropTypes.oneOf(['continuous']).isRequired
|
|
324
|
+
}), PropTypes.shape({
|
|
325
|
+
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
326
|
+
thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
|
|
327
|
+
type: PropTypes.oneOf(['piecewise']).isRequired
|
|
328
|
+
})]),
|
|
329
|
+
data: PropTypes.array,
|
|
330
|
+
dataKey: PropTypes.string,
|
|
331
|
+
disableLine: PropTypes.bool,
|
|
332
|
+
disableTicks: PropTypes.bool,
|
|
333
|
+
fill: PropTypes.string,
|
|
334
|
+
hideTooltip: PropTypes.bool,
|
|
335
|
+
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
336
|
+
label: PropTypes.string,
|
|
337
|
+
labelFontSize: PropTypes.number,
|
|
338
|
+
labelStyle: PropTypes.object,
|
|
339
|
+
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
340
|
+
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
|
|
341
|
+
position: PropTypes.oneOf(['left', 'right']),
|
|
342
|
+
reverse: PropTypes.bool,
|
|
343
|
+
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
344
|
+
slotProps: PropTypes.object,
|
|
345
|
+
slots: PropTypes.object,
|
|
346
|
+
stroke: PropTypes.string,
|
|
347
|
+
tickFontSize: PropTypes.number,
|
|
348
|
+
tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
|
|
349
|
+
tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
|
|
350
|
+
tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
|
|
351
|
+
tickLabelStyle: PropTypes.object,
|
|
352
|
+
tickMaxStep: PropTypes.number,
|
|
353
|
+
tickMinStep: PropTypes.number,
|
|
354
|
+
tickNumber: PropTypes.number,
|
|
355
|
+
tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
|
|
356
|
+
tickSize: PropTypes.number,
|
|
357
|
+
valueFormatter: PropTypes.func,
|
|
358
|
+
zoom: PropTypes.oneOfType([PropTypes.shape({
|
|
359
|
+
maxEnd: PropTypes.number,
|
|
360
|
+
maxSpan: PropTypes.number,
|
|
361
|
+
minSpan: PropTypes.number,
|
|
362
|
+
minStart: PropTypes.number,
|
|
363
|
+
panning: PropTypes.bool,
|
|
364
|
+
step: PropTypes.number
|
|
365
|
+
}), PropTypes.bool])
|
|
366
|
+
}))
|
|
367
|
+
} : void 0;
|
|
368
|
+
function MarkPlotZoom(props) {
|
|
369
|
+
const {
|
|
370
|
+
isInteracting
|
|
371
|
+
} = useZoom();
|
|
372
|
+
return /*#__PURE__*/_jsx(MarkPlot, _extends({}, props, {
|
|
373
|
+
skipAnimation: isInteracting ? true : props.skipAnimation
|
|
374
|
+
}));
|
|
375
|
+
}
|
|
376
|
+
process.env.NODE_ENV !== "production" ? MarkPlotZoom.propTypes = {
|
|
377
|
+
// ----------------------------- Warning --------------------------------
|
|
378
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
379
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
380
|
+
// ----------------------------------------------------------------------
|
|
381
|
+
/**
|
|
382
|
+
* Callback fired when a line mark item is clicked.
|
|
383
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
384
|
+
* @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
|
|
385
|
+
*/
|
|
386
|
+
onItemClick: PropTypes.func,
|
|
387
|
+
/**
|
|
388
|
+
* If `true`, animations are skipped.
|
|
389
|
+
* @default false
|
|
390
|
+
*/
|
|
391
|
+
skipAnimation: PropTypes.bool,
|
|
392
|
+
/**
|
|
393
|
+
* The props used for each component slot.
|
|
394
|
+
* @default {}
|
|
395
|
+
*/
|
|
396
|
+
slotProps: PropTypes.object,
|
|
397
|
+
/**
|
|
398
|
+
* Overridable component slots.
|
|
399
|
+
* @default {}
|
|
400
|
+
*/
|
|
401
|
+
slots: PropTypes.object
|
|
402
|
+
} : void 0;
|
|
403
|
+
function LinePlotZoom(props) {
|
|
404
|
+
const {
|
|
405
|
+
isInteracting
|
|
406
|
+
} = useZoom();
|
|
407
|
+
return /*#__PURE__*/_jsx(LinePlot, _extends({}, props, {
|
|
408
|
+
skipAnimation: isInteracting ? true : props.skipAnimation
|
|
409
|
+
}));
|
|
410
|
+
}
|
|
411
|
+
process.env.NODE_ENV !== "production" ? LinePlotZoom.propTypes = {
|
|
412
|
+
// ----------------------------- Warning --------------------------------
|
|
413
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
414
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
415
|
+
// ----------------------------------------------------------------------
|
|
416
|
+
/**
|
|
417
|
+
* Callback fired when a line item is clicked.
|
|
418
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
419
|
+
* @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
|
|
420
|
+
*/
|
|
421
|
+
onItemClick: PropTypes.func,
|
|
422
|
+
/**
|
|
423
|
+
* If `true`, animations are skipped.
|
|
424
|
+
* @default false
|
|
425
|
+
*/
|
|
426
|
+
skipAnimation: PropTypes.bool,
|
|
427
|
+
/**
|
|
428
|
+
* The props used for each component slot.
|
|
429
|
+
* @default {}
|
|
430
|
+
*/
|
|
431
|
+
slotProps: PropTypes.object,
|
|
432
|
+
/**
|
|
433
|
+
* Overridable component slots.
|
|
434
|
+
* @default {}
|
|
435
|
+
*/
|
|
436
|
+
slots: PropTypes.object
|
|
437
|
+
} : void 0;
|
|
438
|
+
function AreaPlotZoom(props) {
|
|
439
|
+
const {
|
|
440
|
+
isInteracting
|
|
441
|
+
} = useZoom();
|
|
442
|
+
return /*#__PURE__*/_jsx(AreaPlot, _extends({}, props, {
|
|
443
|
+
skipAnimation: isInteracting ? true : props.skipAnimation
|
|
444
|
+
}));
|
|
445
|
+
}
|
|
446
|
+
process.env.NODE_ENV !== "production" ? AreaPlotZoom.propTypes = {
|
|
447
|
+
// ----------------------------- Warning --------------------------------
|
|
448
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
449
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
450
|
+
// ----------------------------------------------------------------------
|
|
451
|
+
/**
|
|
452
|
+
* Callback fired when a line area item is clicked.
|
|
453
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
454
|
+
* @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
|
|
455
|
+
*/
|
|
456
|
+
onItemClick: PropTypes.func,
|
|
457
|
+
/**
|
|
458
|
+
* If `true`, animations are skipped.
|
|
459
|
+
* @default false
|
|
460
|
+
*/
|
|
461
|
+
skipAnimation: PropTypes.bool,
|
|
462
|
+
/**
|
|
463
|
+
* The props used for each component slot.
|
|
464
|
+
* @default {}
|
|
465
|
+
*/
|
|
466
|
+
slotProps: PropTypes.object,
|
|
467
|
+
/**
|
|
468
|
+
* Overridable component slots.
|
|
469
|
+
* @default {}
|
|
470
|
+
*/
|
|
471
|
+
slots: PropTypes.object
|
|
472
|
+
} : void 0;
|
|
473
|
+
export { LineChartPro };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LineChartPro';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LineChartPro';
|
package/README.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# MUI X Pro
|
|
2
|
+
|
|
3
|
+
This package is the Pro plan edition of the chart components.
|
|
4
|
+
It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
Install the package in your project directory with:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @mui/x-charts-pro
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
This component has the following peer dependencies that you will need to install as well.
|
|
15
|
+
|
|
16
|
+
```json
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"@mui/material": "^5.15.14",
|
|
19
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
20
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
21
|
+
},
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Documentation
|
|
25
|
+
|
|
26
|
+
Visit [https://mui.com/x/react-charts/](https://mui.com/x/react-charts/) to view the full documentation.
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ResponsiveChartContainerProps } from '@mui/x-charts/ResponsiveChartContainer';
|
|
3
|
+
import { ZoomProps } from '../context/ZoomProvider';
|
|
4
|
+
export interface ResponsiveChartContainerProProps extends ResponsiveChartContainerProps, ZoomProps {
|
|
5
|
+
}
|
|
6
|
+
declare const ResponsiveChartContainerPro: React.ForwardRefExoticComponent<ResponsiveChartContainerProProps & React.RefAttributes<unknown>>;
|
|
7
|
+
export { ResponsiveChartContainerPro };
|