@mui/x-charts-pro 8.0.0-alpha.0 → 8.0.0-alpha.10
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 +74 -61
- package/CHANGELOG.md +2215 -119
- package/ChartContainerPro/ChartContainerPro.d.ts +33 -4
- package/ChartContainerPro/ChartContainerPro.js +59 -51
- package/ChartContainerPro/useChartContainerProProps.d.ts +7 -43
- package/ChartContainerPro/useChartContainerProProps.js +15 -9
- package/ChartDataProviderPro/ChartDataProviderPro.d.ts +37 -0
- package/{context/ChartDataProviderPro → ChartDataProviderPro}/ChartDataProviderPro.js +71 -80
- 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 +11 -4
- package/Heatmap/Heatmap.js +35 -43
- package/Heatmap/HeatmapItem.js +1 -1
- package/Heatmap/HeatmapTooltip.d.ts +9 -0
- package/Heatmap/HeatmapTooltip.js +274 -0
- 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/index.d.ts +1 -1
- package/Heatmap/index.js +1 -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 +80 -82
- package/README.md +3 -3
- package/ScatterChartPro/ScatterChartPro.d.ts +2 -2
- package/ScatterChartPro/ScatterChartPro.js +51 -64
- 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 -1
- package/index.js +5 -5
- 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 +74 -61
- package/modern/ChartContainerPro/ChartContainerPro.js +59 -51
- package/modern/ChartContainerPro/useChartContainerProProps.js +15 -9
- package/modern/{context/ChartDataProviderPro → ChartDataProviderPro}/ChartDataProviderPro.js +71 -80
- package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +15 -0
- package/modern/Heatmap/Heatmap.js +35 -43
- package/modern/Heatmap/HeatmapItem.js +1 -1
- package/modern/Heatmap/HeatmapTooltip.js +274 -0
- package/modern/Heatmap/formatter.js +2 -1
- package/modern/Heatmap/heatmapClasses.js +2 -1
- package/modern/Heatmap/index.js +1 -1
- package/modern/Heatmap/plugin.js +4 -2
- package/modern/Heatmap/tooltip.js +25 -0
- package/modern/LineChartPro/LineChartPro.js +80 -82
- package/modern/ScatterChartPro/ScatterChartPro.js +51 -64
- 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 -5
- 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 +73 -60
- package/node/ChartContainerPro/ChartContainerPro.js +58 -50
- package/node/ChartContainerPro/useChartContainerProProps.js +15 -9
- package/node/{context/ChartDataProviderPro → ChartDataProviderPro}/ChartDataProviderPro.js +70 -79
- package/node/ChartDataProviderPro/useChartDataProviderProProps.js +21 -0
- package/node/Heatmap/Heatmap.js +35 -43
- package/node/Heatmap/HeatmapItem.js +2 -2
- package/node/Heatmap/HeatmapTooltip.js +280 -0
- package/node/Heatmap/formatter.js +2 -1
- package/node/Heatmap/heatmapClasses.js +5 -4
- package/node/Heatmap/index.js +4 -4
- package/node/Heatmap/plugin.js +4 -2
- package/node/Heatmap/tooltip.js +31 -0
- package/node/LineChartPro/LineChartPro.js +79 -81
- package/node/ScatterChartPro/ScatterChartPro.js +50 -63
- 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 -12
- 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 +8 -8
- package/typeOverloads/modules.d.ts +8 -1
- package/Heatmap/DefaultHeatmapTooltip.d.ts +0 -7
- package/Heatmap/DefaultHeatmapTooltip.js +0 -99
- 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 -7
- package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -16
- 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/Heatmap/DefaultHeatmapTooltip.js +0 -99
- 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/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/Heatmap/DefaultHeatmapTooltip.js +0 -105
- package/node/context/CartesianProviderPro/CartesianProviderPro.js +0 -95
- package/node/context/CartesianProviderPro/createAxisFilterMapper.js +0 -68
- 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
|
@@ -6,63 +6,72 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
6
6
|
Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
value: true
|
|
8
8
|
});
|
|
9
|
-
exports.ChartDataProviderPro =
|
|
9
|
+
exports.ChartDataProviderPro = ChartDataProviderPro;
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
var _Watermark = require("@mui/x-license/Watermark");
|
|
13
14
|
var _internals = require("@mui/x-charts/internals");
|
|
14
|
-
var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
|
|
15
|
-
var _context = require("@mui/x-charts/context");
|
|
16
15
|
var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
|
|
17
|
-
var _releaseInfo = require("../../internals/utils/releaseInfo");
|
|
18
|
-
var _CartesianProviderPro = require("../CartesianProviderPro");
|
|
19
|
-
var _ZoomProvider = require("../ZoomProvider");
|
|
20
16
|
var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
|
|
17
|
+
var _releaseInfo = require("../internals/utils/releaseInfo");
|
|
21
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
19
|
const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
|
|
23
|
-
const
|
|
20
|
+
const packageIdentifier = 'x-charts-pro';
|
|
21
|
+
/**
|
|
22
|
+
* Orchestrates the data providers for the chart components and hooks.
|
|
23
|
+
*
|
|
24
|
+
* Use this component if you have custom HTML components that need to access the chart data.
|
|
25
|
+
*
|
|
26
|
+
* Demos:
|
|
27
|
+
*
|
|
28
|
+
* - [Composition](https://mui.com/x/api/charts/composition/)
|
|
29
|
+
*
|
|
30
|
+
* API:
|
|
31
|
+
*
|
|
32
|
+
* - [ChartDataProviderPro API](https://mui.com/x/api/charts/chart-data-provider/)
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```jsx
|
|
36
|
+
* <ChartDataProviderPro
|
|
37
|
+
* series={[{ label: "Label", type: "bar", data: [10, 20] }]}
|
|
38
|
+
* xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
|
|
39
|
+
* >
|
|
40
|
+
* <ChartsSurface>
|
|
41
|
+
* <BarPlot />
|
|
42
|
+
* <ChartsXAxis position="bottom" axisId="x-axis" />
|
|
43
|
+
* </ChartsSurface>
|
|
44
|
+
* {'Custom Legend Component'}
|
|
45
|
+
* </ChartDataProviderPro>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
function ChartDataProviderPro(props) {
|
|
24
49
|
const {
|
|
25
|
-
|
|
26
|
-
drawingProviderProps,
|
|
27
|
-
seriesProviderProps,
|
|
28
|
-
zAxisContextProps,
|
|
29
|
-
highlightedProviderProps,
|
|
30
|
-
cartesianProviderProps,
|
|
31
|
-
chartsSurfaceProps,
|
|
32
|
-
pluginProviderProps,
|
|
50
|
+
children,
|
|
33
51
|
animationProviderProps,
|
|
34
|
-
|
|
35
|
-
} = (0, _useChartDataProviderProProps.
|
|
36
|
-
(0, _useLicenseVerifier.useLicenseVerifier)(
|
|
37
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.
|
|
38
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
39
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
|
|
44
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.InteractionProvider, {
|
|
45
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
|
|
46
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
|
|
47
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsAxesGradients, {}), children]
|
|
48
|
-
}))
|
|
49
|
-
}))
|
|
50
|
-
})
|
|
51
|
-
}))
|
|
52
|
-
}))
|
|
53
|
-
}))
|
|
54
|
-
}))
|
|
55
|
-
}))
|
|
52
|
+
chartProviderProps
|
|
53
|
+
} = (0, _useChartDataProviderProProps.useChartDataProviderProProps)(props);
|
|
54
|
+
(0, _useLicenseVerifier.useLicenseVerifier)(packageIdentifier, releaseInfo);
|
|
55
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
|
|
56
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
|
|
57
|
+
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
|
|
58
|
+
packageName: packageIdentifier,
|
|
59
|
+
releaseInfo: releaseInfo
|
|
60
|
+
})]
|
|
56
61
|
}))
|
|
57
62
|
}));
|
|
58
|
-
}
|
|
63
|
+
}
|
|
59
64
|
process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
60
65
|
// ----------------------------- Warning --------------------------------
|
|
61
66
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
62
67
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
63
68
|
// ----------------------------------------------------------------------
|
|
69
|
+
apiRef: _propTypes.default.shape({
|
|
70
|
+
current: _propTypes.default.shape({
|
|
71
|
+
setZoomData: _propTypes.default.func.isRequired
|
|
72
|
+
})
|
|
73
|
+
}),
|
|
64
74
|
children: _propTypes.default.node,
|
|
65
|
-
className: _propTypes.default.string,
|
|
66
75
|
/**
|
|
67
76
|
* Color palette used to colorize multiple series.
|
|
68
77
|
* @default blueberryTwilightPalette
|
|
@@ -72,29 +81,35 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
72
81
|
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
73
82
|
*/
|
|
74
83
|
dataset: _propTypes.default.arrayOf(_propTypes.default.object),
|
|
75
|
-
desc: _propTypes.default.string,
|
|
76
|
-
/**
|
|
77
|
-
* If `true`, the charts will not listen to the mouse move event.
|
|
78
|
-
* It might break interactive features, but will improve performance.
|
|
79
|
-
* @default false
|
|
80
|
-
*/
|
|
81
|
-
disableAxisListener: _propTypes.default.bool,
|
|
82
84
|
/**
|
|
83
|
-
* The height of the chart in px.
|
|
85
|
+
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
84
86
|
*/
|
|
85
|
-
height: _propTypes.default.number
|
|
87
|
+
height: _propTypes.default.number,
|
|
86
88
|
/**
|
|
87
|
-
* The
|
|
89
|
+
* The highlighted item.
|
|
90
|
+
* Used when the highlight is controlled.
|
|
88
91
|
*/
|
|
89
92
|
highlightedItem: _propTypes.default.shape({
|
|
90
93
|
dataIndex: _propTypes.default.number,
|
|
91
|
-
seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
|
94
|
+
seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
|
|
92
95
|
}),
|
|
96
|
+
/**
|
|
97
|
+
* This prop is used to help implement the accessibility logic.
|
|
98
|
+
* If you don't provide this prop. It falls back to a randomly generated id.
|
|
99
|
+
*/
|
|
100
|
+
id: _propTypes.default.string,
|
|
101
|
+
/**
|
|
102
|
+
* The list of zoom data related to each axis.
|
|
103
|
+
*/
|
|
104
|
+
initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
105
|
+
axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
|
|
106
|
+
end: _propTypes.default.number.isRequired,
|
|
107
|
+
start: _propTypes.default.number.isRequired
|
|
108
|
+
})),
|
|
93
109
|
/**
|
|
94
110
|
* The margin between the SVG and the drawing area.
|
|
95
111
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
96
112
|
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
97
|
-
* @default object Depends on the charts type.
|
|
98
113
|
*/
|
|
99
114
|
margin: _propTypes.default.shape({
|
|
100
115
|
bottom: _propTypes.default.number,
|
|
@@ -114,34 +129,22 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
114
129
|
* @param {ZoomData[]} zoomData Updated zoom data.
|
|
115
130
|
*/
|
|
116
131
|
onZoomChange: _propTypes.default.func,
|
|
117
|
-
/**
|
|
118
|
-
* An array of plugins defining how to preprocess data.
|
|
119
|
-
* If not provided, the container supports line, bar, scatter and pie charts.
|
|
120
|
-
*/
|
|
121
|
-
plugins: _propTypes.default.arrayOf(_propTypes.default.object),
|
|
122
132
|
/**
|
|
123
133
|
* The array of series to display.
|
|
124
134
|
* Each type of series has its own specificity.
|
|
125
135
|
* Please refer to the appropriate docs page to learn more about it.
|
|
126
136
|
*/
|
|
127
|
-
series: _propTypes.default.arrayOf(_propTypes.default.object)
|
|
137
|
+
series: _propTypes.default.arrayOf(_propTypes.default.object),
|
|
128
138
|
/**
|
|
129
139
|
* If `true`, animations are skipped.
|
|
130
140
|
* If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
|
|
131
141
|
*/
|
|
132
142
|
skipAnimation: _propTypes.default.bool,
|
|
133
|
-
|
|
134
|
-
title: _propTypes.default.string,
|
|
135
|
-
viewBox: _propTypes.default.shape({
|
|
136
|
-
height: _propTypes.default.number,
|
|
137
|
-
width: _propTypes.default.number,
|
|
138
|
-
x: _propTypes.default.number,
|
|
139
|
-
y: _propTypes.default.number
|
|
140
|
-
}),
|
|
143
|
+
theme: _propTypes.default.oneOf(['dark', 'light']),
|
|
141
144
|
/**
|
|
142
|
-
* The width of the chart in px.
|
|
145
|
+
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
143
146
|
*/
|
|
144
|
-
width: _propTypes.default.number
|
|
147
|
+
width: _propTypes.default.number,
|
|
145
148
|
/**
|
|
146
149
|
* The configuration of the x-axes.
|
|
147
150
|
* If not provided, a default axis config is used.
|
|
@@ -173,7 +176,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
173
176
|
hideTooltip: _propTypes.default.bool,
|
|
174
177
|
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
175
178
|
label: _propTypes.default.string,
|
|
176
|
-
labelFontSize: _propTypes.default.number,
|
|
177
179
|
labelStyle: _propTypes.default.object,
|
|
178
180
|
max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
179
181
|
min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
@@ -184,7 +186,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
184
186
|
slots: _propTypes.default.object,
|
|
185
187
|
stroke: _propTypes.default.string,
|
|
186
188
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
187
|
-
tickFontSize: _propTypes.default.number,
|
|
188
189
|
tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
|
|
189
190
|
tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
|
|
190
191
|
tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
|
|
@@ -236,7 +237,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
236
237
|
hideTooltip: _propTypes.default.bool,
|
|
237
238
|
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
238
239
|
label: _propTypes.default.string,
|
|
239
|
-
labelFontSize: _propTypes.default.number,
|
|
240
240
|
labelStyle: _propTypes.default.object,
|
|
241
241
|
max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
242
242
|
min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
@@ -247,7 +247,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
247
247
|
slots: _propTypes.default.object,
|
|
248
248
|
stroke: _propTypes.default.string,
|
|
249
249
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
250
|
-
tickFontSize: _propTypes.default.number,
|
|
251
250
|
tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
|
|
252
251
|
tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
|
|
253
252
|
tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
|
|
@@ -292,13 +291,5 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
|
292
291
|
id: _propTypes.default.string,
|
|
293
292
|
max: _propTypes.default.number,
|
|
294
293
|
min: _propTypes.default.number
|
|
295
|
-
})),
|
|
296
|
-
/**
|
|
297
|
-
* The list of zoom data related to each axis.
|
|
298
|
-
*/
|
|
299
|
-
zoom: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
300
|
-
axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
|
|
301
|
-
end: _propTypes.default.number.isRequired,
|
|
302
|
-
start: _propTypes.default.number.isRequired
|
|
303
294
|
}))
|
|
304
295
|
} : void 0;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.useChartDataProviderProProps = void 0;
|
|
8
|
+
var _internals = require("@mui/x-charts/internals");
|
|
9
|
+
const useChartDataProviderProProps = props => {
|
|
10
|
+
const {
|
|
11
|
+
animationProviderProps,
|
|
12
|
+
chartProviderProps,
|
|
13
|
+
children
|
|
14
|
+
} = (0, _internals.useChartDataProviderProps)(props);
|
|
15
|
+
return {
|
|
16
|
+
children,
|
|
17
|
+
animationProviderProps,
|
|
18
|
+
chartProviderProps
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
exports.useChartDataProviderProProps = useChartDataProviderProProps;
|
package/node/Heatmap/Heatmap.js
CHANGED
|
@@ -14,17 +14,19 @@ var _styles = require("@mui/material/styles");
|
|
|
14
14
|
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
|
|
15
15
|
var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
|
|
16
16
|
var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
|
|
17
|
-
var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
|
|
18
17
|
var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
|
|
19
18
|
var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
|
|
20
19
|
var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
|
|
21
20
|
var _ChartContainerPro = require("../ChartContainerPro");
|
|
22
21
|
var _HeatmapPlot = require("./HeatmapPlot");
|
|
23
22
|
var _plugin = require("./plugin");
|
|
24
|
-
var
|
|
23
|
+
var _HeatmapTooltip = require("./HeatmapTooltip");
|
|
25
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
26
25
|
// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
|
|
27
26
|
const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
|
|
27
|
+
const seriesConfig = {
|
|
28
|
+
heatmap: _plugin.plugin
|
|
29
|
+
};
|
|
28
30
|
const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
|
|
29
31
|
const props = (0, _styles.useThemeProps)({
|
|
30
32
|
props: inProps,
|
|
@@ -41,7 +43,6 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
|
|
|
41
43
|
colors,
|
|
42
44
|
dataset,
|
|
43
45
|
sx,
|
|
44
|
-
tooltip,
|
|
45
46
|
topAxis,
|
|
46
47
|
leftAxis,
|
|
47
48
|
rightAxis,
|
|
@@ -72,9 +73,10 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
|
|
|
72
73
|
color: defaultColorMap
|
|
73
74
|
}
|
|
74
75
|
}], [zAxis]);
|
|
76
|
+
const Tooltip = props.slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
|
|
75
77
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, {
|
|
76
78
|
ref: ref,
|
|
77
|
-
|
|
79
|
+
seriesConfig: seriesConfig,
|
|
78
80
|
series: series.map(s => (0, _extends2.default)({
|
|
79
81
|
type: 'heatmap'
|
|
80
82
|
}, s)),
|
|
@@ -109,14 +111,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
|
|
|
109
111
|
bottomAxis: bottomAxis,
|
|
110
112
|
slots: slots,
|
|
111
113
|
slotProps: slotProps
|
|
112
|
-
}), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
113
|
-
trigger: "item"
|
|
114
|
-
}, tooltip, {
|
|
115
|
-
slots: (0, _extends2.default)({
|
|
116
|
-
itemContent: _DefaultHeatmapTooltip.DefaultHeatmapTooltip
|
|
117
|
-
}, slots),
|
|
118
|
-
slotProps: slotProps
|
|
119
|
-
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
|
|
114
|
+
}), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
|
|
120
115
|
id: clipPathId
|
|
121
116
|
}), children]
|
|
122
117
|
});
|
|
@@ -126,6 +121,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
126
121
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
127
122
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
128
123
|
// ----------------------------------------------------------------------
|
|
124
|
+
apiRef: _propTypes.default.shape({
|
|
125
|
+
current: _propTypes.default.shape({
|
|
126
|
+
setZoomData: _propTypes.default.func.isRequired
|
|
127
|
+
})
|
|
128
|
+
}),
|
|
129
129
|
/**
|
|
130
130
|
* Indicate which axis to display the bottom of the charts.
|
|
131
131
|
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
@@ -155,12 +155,26 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
155
155
|
*/
|
|
156
156
|
height: _propTypes.default.number,
|
|
157
157
|
/**
|
|
158
|
-
* The
|
|
158
|
+
* The highlighted item.
|
|
159
|
+
* Used when the highlight is controlled.
|
|
159
160
|
*/
|
|
160
161
|
highlightedItem: _propTypes.default.shape({
|
|
161
162
|
dataIndex: _propTypes.default.number,
|
|
162
|
-
seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
|
163
|
+
seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
|
|
163
164
|
}),
|
|
165
|
+
/**
|
|
166
|
+
* This prop is used to help implement the accessibility logic.
|
|
167
|
+
* If you don't provide this prop. It falls back to a randomly generated id.
|
|
168
|
+
*/
|
|
169
|
+
id: _propTypes.default.string,
|
|
170
|
+
/**
|
|
171
|
+
* The list of zoom data related to each axis.
|
|
172
|
+
*/
|
|
173
|
+
initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
174
|
+
axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
|
|
175
|
+
end: _propTypes.default.number.isRequired,
|
|
176
|
+
start: _propTypes.default.number.isRequired
|
|
177
|
+
})),
|
|
164
178
|
/**
|
|
165
179
|
* Indicate which axis to display the left of the charts.
|
|
166
180
|
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
@@ -176,7 +190,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
176
190
|
* The margin between the SVG and the drawing area.
|
|
177
191
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
178
192
|
* Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
179
|
-
* @default object Depends on the charts type.
|
|
180
193
|
*/
|
|
181
194
|
margin: _propTypes.default.shape({
|
|
182
195
|
bottom: _propTypes.default.number,
|
|
@@ -197,16 +210,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
197
210
|
* @param {HighlightItemData | null} highlightedItem The newly highlighted item.
|
|
198
211
|
*/
|
|
199
212
|
onHighlightChange: _propTypes.default.func,
|
|
200
|
-
/**
|
|
201
|
-
* The chart will try to wait for the parent container to resolve its size
|
|
202
|
-
* before it renders for the first time.
|
|
203
|
-
*
|
|
204
|
-
* This can be useful in some scenarios where the chart appear to grow after
|
|
205
|
-
* the first render, like when used inside a grid.
|
|
206
|
-
*
|
|
207
|
-
* @default false
|
|
208
|
-
*/
|
|
209
|
-
resolveSizeBeforeRender: _propTypes.default.bool,
|
|
210
213
|
/**
|
|
211
214
|
* Indicate which axis to display the right of the charts.
|
|
212
215
|
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
@@ -218,6 +221,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
218
221
|
* An array of [[HeatmapSeriesType]] objects.
|
|
219
222
|
*/
|
|
220
223
|
series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
|
|
224
|
+
/**
|
|
225
|
+
* The configuration helpers used to compute attributes according to the serries type.
|
|
226
|
+
* @ignore Unstable props for internal usage.
|
|
227
|
+
*/
|
|
228
|
+
seriesConfig: _propTypes.default.object,
|
|
221
229
|
/**
|
|
222
230
|
* The props used for each component slot.
|
|
223
231
|
* @default {}
|
|
@@ -229,31 +237,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
229
237
|
*/
|
|
230
238
|
slots: _propTypes.default.object,
|
|
231
239
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
240
|
+
theme: _propTypes.default.oneOf(['dark', 'light']),
|
|
232
241
|
title: _propTypes.default.string,
|
|
233
242
|
/**
|
|
234
243
|
* The configuration of the tooltip.
|
|
235
244
|
* @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
|
|
236
245
|
*/
|
|
237
|
-
tooltip: _propTypes.default.
|
|
238
|
-
axisContent: _propTypes.default.elementType,
|
|
239
|
-
classes: _propTypes.default.object,
|
|
240
|
-
itemContent: _propTypes.default.elementType,
|
|
241
|
-
slotProps: _propTypes.default.object,
|
|
242
|
-
slots: _propTypes.default.object,
|
|
243
|
-
trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
|
|
244
|
-
}),
|
|
246
|
+
tooltip: _propTypes.default.object,
|
|
245
247
|
/**
|
|
246
248
|
* Indicate which axis to display the top of the charts.
|
|
247
249
|
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
248
250
|
* @default null
|
|
249
251
|
*/
|
|
250
252
|
topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
|
|
251
|
-
viewBox: _propTypes.default.shape({
|
|
252
|
-
height: _propTypes.default.number,
|
|
253
|
-
width: _propTypes.default.number,
|
|
254
|
-
x: _propTypes.default.number,
|
|
255
|
-
y: _propTypes.default.number
|
|
256
|
-
}),
|
|
257
253
|
/**
|
|
258
254
|
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
259
255
|
*/
|
|
@@ -291,7 +287,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
291
287
|
hideTooltip: _propTypes.default.bool,
|
|
292
288
|
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
293
289
|
label: _propTypes.default.string,
|
|
294
|
-
labelFontSize: _propTypes.default.number,
|
|
295
290
|
labelStyle: _propTypes.default.object,
|
|
296
291
|
max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
297
292
|
min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
@@ -302,7 +297,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
302
297
|
slots: _propTypes.default.object,
|
|
303
298
|
stroke: _propTypes.default.string,
|
|
304
299
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
305
|
-
tickFontSize: _propTypes.default.number,
|
|
306
300
|
tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
|
|
307
301
|
tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
|
|
308
302
|
tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
|
|
@@ -356,7 +350,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
356
350
|
hideTooltip: _propTypes.default.bool,
|
|
357
351
|
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
358
352
|
label: _propTypes.default.string,
|
|
359
|
-
labelFontSize: _propTypes.default.number,
|
|
360
353
|
labelStyle: _propTypes.default.object,
|
|
361
354
|
max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
362
355
|
min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
|
|
@@ -367,7 +360,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
|
|
|
367
360
|
slots: _propTypes.default.object,
|
|
368
361
|
stroke: _propTypes.default.string,
|
|
369
362
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
370
|
-
tickFontSize: _propTypes.default.number,
|
|
371
363
|
tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
|
|
372
364
|
tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
|
|
373
365
|
tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
|
|
@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
13
13
|
var _styles = require("@mui/material/styles");
|
|
14
14
|
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
|
|
15
15
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
16
|
-
var
|
|
16
|
+
var _hooks = require("@mui/x-charts/hooks");
|
|
17
17
|
var _internals = require("@mui/x-charts/internals");
|
|
18
18
|
var _heatmapClasses = require("./heatmapClasses");
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -59,7 +59,7 @@ function HeatmapItem(props) {
|
|
|
59
59
|
const {
|
|
60
60
|
isFaded,
|
|
61
61
|
isHighlighted
|
|
62
|
-
} = (0,
|
|
62
|
+
} = (0, _hooks.useItemHighlighted)({
|
|
63
63
|
seriesId,
|
|
64
64
|
dataIndex
|
|
65
65
|
});
|