@mui/x-charts-pro 8.0.0-alpha.0 → 8.0.0-alpha.1
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.js +3 -31
- package/CHANGELOG.md +429 -5
- package/ChartContainerPro/ChartContainerPro.js +13 -23
- package/ChartContainerPro/useChartContainerProProps.d.ts +2 -39
- package/ChartContainerPro/useChartContainerProProps.js +6 -4
- package/Heatmap/Heatmap.d.ts +11 -4
- package/Heatmap/Heatmap.js +4 -35
- package/Heatmap/HeatmapTooltip.d.ts +9 -0
- package/Heatmap/HeatmapTooltip.js +294 -0
- package/Heatmap/index.d.ts +1 -1
- package/Heatmap/index.js +1 -1
- package/LineChartPro/LineChartPro.js +3 -32
- package/README.md +2 -2
- package/ScatterChartPro/ScatterChartPro.js +3 -32
- package/context/ChartDataProviderPro/ChartDataProviderPro.d.ts +4 -1
- package/context/ChartDataProviderPro/ChartDataProviderPro.js +22 -21
- package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts +3 -5
- package/context/ChartDataProviderPro/useChartDataProviderProProps.js +6 -6
- package/index.js +1 -1
- package/internals/utils/releaseInfo.js +1 -1
- package/modern/BarChartPro/BarChartPro.js +3 -31
- package/modern/ChartContainerPro/ChartContainerPro.js +13 -23
- package/modern/ChartContainerPro/useChartContainerProProps.js +6 -4
- package/modern/Heatmap/Heatmap.js +4 -35
- package/modern/Heatmap/HeatmapTooltip.js +294 -0
- package/modern/Heatmap/index.js +1 -1
- package/modern/LineChartPro/LineChartPro.js +3 -32
- package/modern/ScatterChartPro/ScatterChartPro.js +3 -32
- package/modern/context/ChartDataProviderPro/ChartDataProviderPro.js +22 -21
- package/modern/context/ChartDataProviderPro/useChartDataProviderProProps.js +6 -6
- package/modern/index.js +1 -1
- package/modern/internals/utils/releaseInfo.js +1 -1
- package/node/BarChartPro/BarChartPro.js +3 -31
- package/node/ChartContainerPro/ChartContainerPro.js +13 -23
- package/node/ChartContainerPro/useChartContainerProProps.js +6 -4
- package/node/Heatmap/Heatmap.js +4 -35
- package/node/Heatmap/HeatmapTooltip.js +300 -0
- package/node/Heatmap/index.js +4 -4
- package/node/LineChartPro/LineChartPro.js +3 -32
- package/node/ScatterChartPro/ScatterChartPro.js +3 -32
- package/node/context/ChartDataProviderPro/ChartDataProviderPro.js +21 -20
- package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js +6 -6
- package/node/index.js +1 -1
- package/node/internals/utils/releaseInfo.js +1 -1
- package/package.json +7 -7
- package/Heatmap/DefaultHeatmapTooltip.d.ts +0 -7
- package/Heatmap/DefaultHeatmapTooltip.js +0 -99
- package/modern/Heatmap/DefaultHeatmapTooltip.js +0 -99
- package/node/Heatmap/DefaultHeatmapTooltip.js +0 -105
|
@@ -56,9 +56,9 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
|
|
|
56
56
|
overlayProps,
|
|
57
57
|
legendProps,
|
|
58
58
|
axisHighlightProps,
|
|
59
|
-
tooltipProps,
|
|
60
59
|
children
|
|
61
60
|
} = (0, _internals.useScatterChartProps)(other);
|
|
61
|
+
const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
|
|
62
62
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainerPro.ChartContainerPro, (0, _extends2.default)({
|
|
63
63
|
ref: ref
|
|
64
64
|
}, chartContainerProps, {
|
|
@@ -68,7 +68,7 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
|
|
|
68
68
|
children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
|
|
69
69
|
"data-drawing-container": true,
|
|
70
70
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
|
|
71
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
71
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
|
|
72
72
|
}))
|
|
73
73
|
}));
|
|
74
74
|
});
|
|
@@ -79,7 +79,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
79
79
|
// ----------------------------------------------------------------------
|
|
80
80
|
/**
|
|
81
81
|
* The configuration of axes highlight.
|
|
82
|
-
* @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
|
|
82
|
+
* @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
|
|
83
83
|
* @default { x: 'none', y: 'none' }
|
|
84
84
|
*/
|
|
85
85
|
axisHighlight: _propTypes.default.shape({
|
|
@@ -178,16 +178,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
178
178
|
* @param {ZoomData[]} zoomData Updated zoom data.
|
|
179
179
|
*/
|
|
180
180
|
onZoomChange: _propTypes.default.func,
|
|
181
|
-
/**
|
|
182
|
-
* The chart will try to wait for the parent container to resolve its size
|
|
183
|
-
* before it renders for the first time.
|
|
184
|
-
*
|
|
185
|
-
* This can be useful in some scenarios where the chart appear to grow after
|
|
186
|
-
* the first render, like when used inside a grid.
|
|
187
|
-
*
|
|
188
|
-
* @default false
|
|
189
|
-
*/
|
|
190
|
-
resolveSizeBeforeRender: _propTypes.default.bool,
|
|
191
181
|
/**
|
|
192
182
|
* Indicate which axis to display the right of the charts.
|
|
193
183
|
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
@@ -216,31 +206,12 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
|
|
|
216
206
|
slots: _propTypes.default.object,
|
|
217
207
|
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]),
|
|
218
208
|
title: _propTypes.default.string,
|
|
219
|
-
/**
|
|
220
|
-
* The configuration of the tooltip.
|
|
221
|
-
* @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
|
|
222
|
-
* @default { trigger: 'item' }
|
|
223
|
-
*/
|
|
224
|
-
tooltip: _propTypes.default.shape({
|
|
225
|
-
axisContent: _propTypes.default.elementType,
|
|
226
|
-
classes: _propTypes.default.object,
|
|
227
|
-
itemContent: _propTypes.default.elementType,
|
|
228
|
-
slotProps: _propTypes.default.object,
|
|
229
|
-
slots: _propTypes.default.object,
|
|
230
|
-
trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
|
|
231
|
-
}),
|
|
232
209
|
/**
|
|
233
210
|
* Indicate which axis to display the top of the charts.
|
|
234
211
|
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
235
212
|
* @default null
|
|
236
213
|
*/
|
|
237
214
|
topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
|
|
238
|
-
viewBox: _propTypes.default.shape({
|
|
239
|
-
height: _propTypes.default.number,
|
|
240
|
-
width: _propTypes.default.number,
|
|
241
|
-
x: _propTypes.default.number,
|
|
242
|
-
y: _propTypes.default.number
|
|
243
|
-
}),
|
|
244
215
|
/**
|
|
245
216
|
* Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
|
|
246
217
|
* If `undefined`, the radius is assumed to be infinite.
|
|
@@ -6,12 +6,11 @@ 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
13
|
var _internals = require("@mui/x-charts/internals");
|
|
14
|
-
var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
|
|
15
14
|
var _context = require("@mui/x-charts/context");
|
|
16
15
|
var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
|
|
17
16
|
var _releaseInfo = require("../../internals/utils/releaseInfo");
|
|
@@ -20,34 +19,36 @@ var _ZoomProvider = require("../ZoomProvider");
|
|
|
20
19
|
var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
|
|
21
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
21
|
const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
|
|
23
|
-
|
|
22
|
+
function ChartDataProviderPro(props) {
|
|
24
23
|
const {
|
|
25
24
|
zoomProviderProps,
|
|
26
|
-
|
|
25
|
+
drawingAreaProviderProps,
|
|
27
26
|
seriesProviderProps,
|
|
28
27
|
zAxisContextProps,
|
|
29
28
|
highlightedProviderProps,
|
|
30
29
|
cartesianProviderProps,
|
|
31
|
-
|
|
30
|
+
sizeProviderProps,
|
|
32
31
|
pluginProviderProps,
|
|
33
32
|
animationProviderProps,
|
|
34
33
|
children
|
|
35
|
-
} = (0, _useChartDataProviderProProps.useChartContainerProProps)(props
|
|
34
|
+
} = (0, _useChartDataProviderProProps.useChartContainerProProps)(props);
|
|
36
35
|
(0, _useLicenseVerifier.useLicenseVerifier)('x-charts-pro', releaseInfo);
|
|
37
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.
|
|
38
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.
|
|
39
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.
|
|
40
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
41
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
42
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
43
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
44
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
45
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
46
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
47
|
-
children:
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
|
|
37
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
|
|
38
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
|
|
39
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
|
|
40
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomProvider.ZoomProvider, (0, _extends2.default)({}, zoomProviderProps, {
|
|
41
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
|
|
42
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProviderPro.CartesianProviderPro, (0, _extends2.default)({}, cartesianProviderProps, {
|
|
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.jsx)(_internals.SvgRefProvider, {
|
|
47
|
+
children: children
|
|
48
|
+
})
|
|
48
49
|
}))
|
|
49
|
-
})
|
|
50
|
-
})
|
|
50
|
+
})
|
|
51
|
+
}))
|
|
51
52
|
}))
|
|
52
53
|
}))
|
|
53
54
|
}))
|
|
@@ -55,7 +56,7 @@ const ChartDataProviderPro = exports.ChartDataProviderPro = /*#__PURE__*/React.f
|
|
|
55
56
|
}))
|
|
56
57
|
}))
|
|
57
58
|
}));
|
|
58
|
-
}
|
|
59
|
+
}
|
|
59
60
|
process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
|
|
60
61
|
// ----------------------------- Warning --------------------------------
|
|
61
62
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
@@ -9,7 +9,7 @@ exports.useChartContainerProProps = void 0;
|
|
|
9
9
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
10
10
|
var _internals = require("@mui/x-charts/internals");
|
|
11
11
|
const _excluded = ["zoom", "onZoomChange"];
|
|
12
|
-
const useChartContainerProProps =
|
|
12
|
+
const useChartContainerProProps = props => {
|
|
13
13
|
const {
|
|
14
14
|
zoom,
|
|
15
15
|
onZoomChange
|
|
@@ -17,17 +17,17 @@ const useChartContainerProProps = (props, ref) => {
|
|
|
17
17
|
baseProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
18
18
|
const {
|
|
19
19
|
children,
|
|
20
|
-
|
|
20
|
+
drawingAreaProviderProps,
|
|
21
21
|
seriesProviderProps,
|
|
22
22
|
cartesianProviderProps,
|
|
23
23
|
zAxisContextProps,
|
|
24
24
|
highlightedProviderProps,
|
|
25
|
-
|
|
25
|
+
sizeProviderProps,
|
|
26
26
|
pluginProviderProps,
|
|
27
27
|
animationProviderProps,
|
|
28
28
|
xAxis,
|
|
29
29
|
yAxis
|
|
30
|
-
} = (0, _internals.useChartDataProviderProps)(baseProps
|
|
30
|
+
} = (0, _internals.useChartDataProviderProps)(baseProps);
|
|
31
31
|
const zoomProviderProps = {
|
|
32
32
|
zoom,
|
|
33
33
|
onZoomChange,
|
|
@@ -37,13 +37,13 @@ const useChartContainerProProps = (props, ref) => {
|
|
|
37
37
|
return {
|
|
38
38
|
zoomProviderProps,
|
|
39
39
|
children,
|
|
40
|
-
|
|
40
|
+
drawingAreaProviderProps,
|
|
41
41
|
pluginProviderProps,
|
|
42
42
|
seriesProviderProps,
|
|
43
43
|
cartesianProviderProps,
|
|
44
44
|
zAxisContextProps,
|
|
45
45
|
highlightedProviderProps,
|
|
46
|
-
|
|
46
|
+
sizeProviderProps,
|
|
47
47
|
animationProviderProps
|
|
48
48
|
};
|
|
49
49
|
};
|
package/node/index.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.getReleaseInfo = void 0;
|
|
7
7
|
var _utils = require("@mui/utils");
|
|
8
8
|
const getReleaseInfo = () => {
|
|
9
|
-
const releaseInfo = "
|
|
9
|
+
const releaseInfo = "MTczMjIzMDAwMDAwMA==";
|
|
10
10
|
if (process.env.NODE_ENV !== 'production') {
|
|
11
11
|
// A simple hack to set the value in the test environment (has no build step).
|
|
12
12
|
// eslint-disable-next-line no-useless-concat
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-charts-pro",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.1",
|
|
4
4
|
"description": "The Pro plan edition of the Charts components (MUI X).",
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"main": "./node/index.js",
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"@react-spring/web": "^9.7.5",
|
|
36
36
|
"clsx": "^2.1.1",
|
|
37
37
|
"prop-types": "^15.8.1",
|
|
38
|
-
"@mui/x-
|
|
39
|
-
"@mui/x-
|
|
40
|
-
"@mui/x-charts
|
|
41
|
-
"@mui/x-license": "8.0.0-alpha.
|
|
38
|
+
"@mui/x-internals": "8.0.0-alpha.1",
|
|
39
|
+
"@mui/x-charts-vendor": "8.0.0-alpha.1",
|
|
40
|
+
"@mui/x-charts": "8.0.0-alpha.1",
|
|
41
|
+
"@mui/x-license": "8.0.0-alpha.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@emotion/react": "^11.9.0",
|
|
45
45
|
"@emotion/styled": "^11.8.1",
|
|
46
46
|
"@mui/material": "^5.15.14 || ^6.0.0",
|
|
47
47
|
"@mui/system": "^5.15.14 || ^6.0.0",
|
|
48
|
-
"react": "^17.0.0 || ^18.0.0",
|
|
49
|
-
"react-dom": "^17.0.0 || ^18.0.0"
|
|
48
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
49
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependenciesMeta": {
|
|
52
52
|
"@emotion/react": {
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ChartsItemContentProps } from '@mui/x-charts/ChartsTooltip';
|
|
3
|
-
declare function DefaultHeatmapTooltip(props: ChartsItemContentProps<'heatmap'>): React.JSX.Element | null;
|
|
4
|
-
declare namespace DefaultHeatmapTooltip {
|
|
5
|
-
var propTypes: any;
|
|
6
|
-
}
|
|
7
|
-
export { DefaultHeatmapTooltip };
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
import clsx from 'clsx';
|
|
6
|
-
import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, ChartsTooltipMark } from '@mui/x-charts/ChartsTooltip';
|
|
7
|
-
import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
|
|
8
|
-
import { getLabel } from '@mui/x-charts/internals';
|
|
9
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
-
function DefaultHeatmapTooltip(props) {
|
|
11
|
-
const {
|
|
12
|
-
series,
|
|
13
|
-
itemData,
|
|
14
|
-
sx,
|
|
15
|
-
classes,
|
|
16
|
-
getColor
|
|
17
|
-
} = props;
|
|
18
|
-
const xAxis = useXAxis();
|
|
19
|
-
const yAxis = useYAxis();
|
|
20
|
-
if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
const color = getColor(itemData.dataIndex);
|
|
24
|
-
const valueItem = series.data[itemData.dataIndex];
|
|
25
|
-
const [xIndex, yIndex] = valueItem;
|
|
26
|
-
const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
|
|
27
|
-
location: 'tooltip'
|
|
28
|
-
}) ?? xAxis.data[xIndex].toLocaleString();
|
|
29
|
-
const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
|
|
30
|
-
location: 'tooltip'
|
|
31
|
-
}) ?? yAxis.data[yIndex].toLocaleString();
|
|
32
|
-
const formattedValue = series.valueFormatter(valueItem, {
|
|
33
|
-
dataIndex: itemData.dataIndex
|
|
34
|
-
});
|
|
35
|
-
const seriesLabel = getLabel(series.label, 'tooltip');
|
|
36
|
-
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
|
|
37
|
-
sx: sx,
|
|
38
|
-
className: classes.root,
|
|
39
|
-
children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
|
|
40
|
-
className: classes.table,
|
|
41
|
-
children: [/*#__PURE__*/_jsx("thead", {
|
|
42
|
-
children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
|
|
43
|
-
children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
44
|
-
children: formattedX
|
|
45
|
-
}), formattedX && formattedY && /*#__PURE__*/_jsx(ChartsTooltipCell, {}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
46
|
-
children: formattedY
|
|
47
|
-
})]
|
|
48
|
-
})
|
|
49
|
-
}), /*#__PURE__*/_jsx("tbody", {
|
|
50
|
-
children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
|
|
51
|
-
className: classes.row,
|
|
52
|
-
children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
53
|
-
className: clsx(classes.markCell, classes.cell),
|
|
54
|
-
children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
|
|
55
|
-
color: color,
|
|
56
|
-
className: classes.mark
|
|
57
|
-
})
|
|
58
|
-
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
59
|
-
className: clsx(classes.labelCell, classes.cell),
|
|
60
|
-
children: seriesLabel
|
|
61
|
-
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
62
|
-
className: clsx(classes.valueCell, classes.cell),
|
|
63
|
-
children: formattedValue
|
|
64
|
-
})]
|
|
65
|
-
})
|
|
66
|
-
})]
|
|
67
|
-
})
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltip.propTypes = {
|
|
71
|
-
// ----------------------------- Warning --------------------------------
|
|
72
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
73
|
-
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
74
|
-
// ----------------------------------------------------------------------
|
|
75
|
-
/**
|
|
76
|
-
* Override or extend the styles applied to the component.
|
|
77
|
-
*/
|
|
78
|
-
classes: PropTypes.object.isRequired,
|
|
79
|
-
/**
|
|
80
|
-
* Get the color of the item with index `dataIndex`.
|
|
81
|
-
* @param {number} dataIndex The data index of the item.
|
|
82
|
-
* @returns {string} The color to display.
|
|
83
|
-
*/
|
|
84
|
-
getColor: PropTypes.func.isRequired,
|
|
85
|
-
/**
|
|
86
|
-
* The data used to identify the triggered item.
|
|
87
|
-
*/
|
|
88
|
-
itemData: PropTypes.shape({
|
|
89
|
-
dataIndex: PropTypes.number.isRequired,
|
|
90
|
-
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
91
|
-
type: PropTypes.oneOf(['heatmap']).isRequired
|
|
92
|
-
}).isRequired,
|
|
93
|
-
/**
|
|
94
|
-
* The series linked to the triggered item.
|
|
95
|
-
*/
|
|
96
|
-
series: PropTypes.object.isRequired,
|
|
97
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
98
|
-
} : void 0;
|
|
99
|
-
export { DefaultHeatmapTooltip };
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
import clsx from 'clsx';
|
|
6
|
-
import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, ChartsTooltipMark } from '@mui/x-charts/ChartsTooltip';
|
|
7
|
-
import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
|
|
8
|
-
import { getLabel } from '@mui/x-charts/internals';
|
|
9
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
-
function DefaultHeatmapTooltip(props) {
|
|
11
|
-
const {
|
|
12
|
-
series,
|
|
13
|
-
itemData,
|
|
14
|
-
sx,
|
|
15
|
-
classes,
|
|
16
|
-
getColor
|
|
17
|
-
} = props;
|
|
18
|
-
const xAxis = useXAxis();
|
|
19
|
-
const yAxis = useYAxis();
|
|
20
|
-
if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
const color = getColor(itemData.dataIndex);
|
|
24
|
-
const valueItem = series.data[itemData.dataIndex];
|
|
25
|
-
const [xIndex, yIndex] = valueItem;
|
|
26
|
-
const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
|
|
27
|
-
location: 'tooltip'
|
|
28
|
-
}) ?? xAxis.data[xIndex].toLocaleString();
|
|
29
|
-
const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
|
|
30
|
-
location: 'tooltip'
|
|
31
|
-
}) ?? yAxis.data[yIndex].toLocaleString();
|
|
32
|
-
const formattedValue = series.valueFormatter(valueItem, {
|
|
33
|
-
dataIndex: itemData.dataIndex
|
|
34
|
-
});
|
|
35
|
-
const seriesLabel = getLabel(series.label, 'tooltip');
|
|
36
|
-
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
|
|
37
|
-
sx: sx,
|
|
38
|
-
className: classes.root,
|
|
39
|
-
children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
|
|
40
|
-
className: classes.table,
|
|
41
|
-
children: [/*#__PURE__*/_jsx("thead", {
|
|
42
|
-
children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
|
|
43
|
-
children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
44
|
-
children: formattedX
|
|
45
|
-
}), formattedX && formattedY && /*#__PURE__*/_jsx(ChartsTooltipCell, {}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
46
|
-
children: formattedY
|
|
47
|
-
})]
|
|
48
|
-
})
|
|
49
|
-
}), /*#__PURE__*/_jsx("tbody", {
|
|
50
|
-
children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
|
|
51
|
-
className: classes.row,
|
|
52
|
-
children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
53
|
-
className: clsx(classes.markCell, classes.cell),
|
|
54
|
-
children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
|
|
55
|
-
color: color,
|
|
56
|
-
className: classes.mark
|
|
57
|
-
})
|
|
58
|
-
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
59
|
-
className: clsx(classes.labelCell, classes.cell),
|
|
60
|
-
children: seriesLabel
|
|
61
|
-
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
|
|
62
|
-
className: clsx(classes.valueCell, classes.cell),
|
|
63
|
-
children: formattedValue
|
|
64
|
-
})]
|
|
65
|
-
})
|
|
66
|
-
})]
|
|
67
|
-
})
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltip.propTypes = {
|
|
71
|
-
// ----------------------------- Warning --------------------------------
|
|
72
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
73
|
-
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
74
|
-
// ----------------------------------------------------------------------
|
|
75
|
-
/**
|
|
76
|
-
* Override or extend the styles applied to the component.
|
|
77
|
-
*/
|
|
78
|
-
classes: PropTypes.object.isRequired,
|
|
79
|
-
/**
|
|
80
|
-
* Get the color of the item with index `dataIndex`.
|
|
81
|
-
* @param {number} dataIndex The data index of the item.
|
|
82
|
-
* @returns {string} The color to display.
|
|
83
|
-
*/
|
|
84
|
-
getColor: PropTypes.func.isRequired,
|
|
85
|
-
/**
|
|
86
|
-
* The data used to identify the triggered item.
|
|
87
|
-
*/
|
|
88
|
-
itemData: PropTypes.shape({
|
|
89
|
-
dataIndex: PropTypes.number.isRequired,
|
|
90
|
-
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
91
|
-
type: PropTypes.oneOf(['heatmap']).isRequired
|
|
92
|
-
}).isRequired,
|
|
93
|
-
/**
|
|
94
|
-
* The series linked to the triggered item.
|
|
95
|
-
*/
|
|
96
|
-
series: PropTypes.object.isRequired,
|
|
97
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
98
|
-
} : void 0;
|
|
99
|
-
export { DefaultHeatmapTooltip };
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
'use client';
|
|
3
|
-
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
-
Object.defineProperty(exports, "__esModule", {
|
|
7
|
-
value: true
|
|
8
|
-
});
|
|
9
|
-
exports.DefaultHeatmapTooltip = DefaultHeatmapTooltip;
|
|
10
|
-
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
-
var _clsx = _interopRequireDefault(require("clsx"));
|
|
13
|
-
var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
|
|
14
|
-
var _hooks = require("@mui/x-charts/hooks");
|
|
15
|
-
var _internals = require("@mui/x-charts/internals");
|
|
16
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
function DefaultHeatmapTooltip(props) {
|
|
18
|
-
const {
|
|
19
|
-
series,
|
|
20
|
-
itemData,
|
|
21
|
-
sx,
|
|
22
|
-
classes,
|
|
23
|
-
getColor
|
|
24
|
-
} = props;
|
|
25
|
-
const xAxis = (0, _hooks.useXAxis)();
|
|
26
|
-
const yAxis = (0, _hooks.useYAxis)();
|
|
27
|
-
if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
const color = getColor(itemData.dataIndex);
|
|
31
|
-
const valueItem = series.data[itemData.dataIndex];
|
|
32
|
-
const [xIndex, yIndex] = valueItem;
|
|
33
|
-
const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
|
|
34
|
-
location: 'tooltip'
|
|
35
|
-
}) ?? xAxis.data[xIndex].toLocaleString();
|
|
36
|
-
const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
|
|
37
|
-
location: 'tooltip'
|
|
38
|
-
}) ?? yAxis.data[yIndex].toLocaleString();
|
|
39
|
-
const formattedValue = series.valueFormatter(valueItem, {
|
|
40
|
-
dataIndex: itemData.dataIndex
|
|
41
|
-
});
|
|
42
|
-
const seriesLabel = (0, _internals.getLabel)(series.label, 'tooltip');
|
|
43
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
|
|
44
|
-
sx: sx,
|
|
45
|
-
className: classes.root,
|
|
46
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {
|
|
47
|
-
className: classes.table,
|
|
48
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
|
|
49
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
|
|
50
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
|
|
51
|
-
children: formattedX
|
|
52
|
-
}), formattedX && formattedY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
|
|
53
|
-
children: formattedY
|
|
54
|
-
})]
|
|
55
|
-
})
|
|
56
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
|
|
57
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
|
|
58
|
-
className: classes.row,
|
|
59
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
|
|
60
|
-
className: (0, _clsx.default)(classes.markCell, classes.cell),
|
|
61
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipMark, {
|
|
62
|
-
color: color,
|
|
63
|
-
className: classes.mark
|
|
64
|
-
})
|
|
65
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
|
|
66
|
-
className: (0, _clsx.default)(classes.labelCell, classes.cell),
|
|
67
|
-
children: seriesLabel
|
|
68
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
|
|
69
|
-
className: (0, _clsx.default)(classes.valueCell, classes.cell),
|
|
70
|
-
children: formattedValue
|
|
71
|
-
})]
|
|
72
|
-
})
|
|
73
|
-
})]
|
|
74
|
-
})
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltip.propTypes = {
|
|
78
|
-
// ----------------------------- Warning --------------------------------
|
|
79
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
80
|
-
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
81
|
-
// ----------------------------------------------------------------------
|
|
82
|
-
/**
|
|
83
|
-
* Override or extend the styles applied to the component.
|
|
84
|
-
*/
|
|
85
|
-
classes: _propTypes.default.object.isRequired,
|
|
86
|
-
/**
|
|
87
|
-
* Get the color of the item with index `dataIndex`.
|
|
88
|
-
* @param {number} dataIndex The data index of the item.
|
|
89
|
-
* @returns {string} The color to display.
|
|
90
|
-
*/
|
|
91
|
-
getColor: _propTypes.default.func.isRequired,
|
|
92
|
-
/**
|
|
93
|
-
* The data used to identify the triggered item.
|
|
94
|
-
*/
|
|
95
|
-
itemData: _propTypes.default.shape({
|
|
96
|
-
dataIndex: _propTypes.default.number.isRequired,
|
|
97
|
-
seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
|
|
98
|
-
type: _propTypes.default.oneOf(['heatmap']).isRequired
|
|
99
|
-
}).isRequired,
|
|
100
|
-
/**
|
|
101
|
-
* The series linked to the triggered item.
|
|
102
|
-
*/
|
|
103
|
-
series: _propTypes.default.object.isRequired,
|
|
104
|
-
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])
|
|
105
|
-
} : void 0;
|