@mui/x-charts-premium 8.23.0 → 8.24.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.
Files changed (122) hide show
  1. package/BarChartPremium/BarChartPremium.d.ts +16 -1
  2. package/BarChartPremium/BarChartPremium.js +44 -1
  3. package/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.ts +3 -0
  4. package/BarChartPremium/RangeBar/AnimatedRangeBarElement.js +28 -0
  5. package/BarChartPremium/RangeBar/RangeBarPlot.d.ts +46 -0
  6. package/BarChartPremium/RangeBar/RangeBarPlot.js +141 -0
  7. package/BarChartPremium/RangeBar/seriesConfig/extrema.d.ts +3 -0
  8. package/BarChartPremium/RangeBar/seriesConfig/extrema.js +85 -0
  9. package/BarChartPremium/RangeBar/seriesConfig/getColor.d.ts +3 -0
  10. package/BarChartPremium/RangeBar/seriesConfig/getColor.js +43 -0
  11. package/BarChartPremium/RangeBar/seriesConfig/getSeriesWithDefaultValues.d.ts +19 -0
  12. package/BarChartPremium/RangeBar/seriesConfig/getSeriesWithDefaultValues.js +14 -0
  13. package/BarChartPremium/RangeBar/seriesConfig/index.d.ts +2 -0
  14. package/BarChartPremium/RangeBar/seriesConfig/index.js +29 -0
  15. package/BarChartPremium/RangeBar/seriesConfig/legend.d.ts +3 -0
  16. package/BarChartPremium/RangeBar/seriesConfig/legend.js +29 -0
  17. package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.d.ts +3 -0
  18. package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.js +54 -0
  19. package/BarChartPremium/RangeBar/seriesConfig/tooltip.d.ts +4 -0
  20. package/BarChartPremium/RangeBar/seriesConfig/tooltip.js +44 -0
  21. package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.d.ts +3 -0
  22. package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.js +59 -0
  23. package/BarChartPremium/RangeBar/types.d.ts +22 -0
  24. package/BarChartPremium/RangeBar/types.js +5 -0
  25. package/BarChartPremium/RangeBar/useRangeBarPlotData.d.ts +12 -0
  26. package/BarChartPremium/RangeBar/useRangeBarPlotData.js +112 -0
  27. package/BarChartPremium/RangeBar/useUtilityClasses.d.ts +12 -0
  28. package/BarChartPremium/RangeBar/useUtilityClasses.js +24 -0
  29. package/BarChartPremium/index.d.ts +3 -1
  30. package/BarChartPremium/index.js +25 -1
  31. package/BarChartPremium/useBarChartPremiumProps.d.ts +5 -1
  32. package/BarChartPremium/useBarChartPremiumProps.js +19 -1
  33. package/CHANGELOG.md +111 -1
  34. package/ChartDataProviderPremium/ChartDataProviderPremium.d.ts +3 -2
  35. package/ChartDataProviderPremium/ChartDataProviderPremium.js +9 -1
  36. package/ChartDataProviderPremium/index.d.ts +1 -1
  37. package/ChartDataProviderPremium/index.js +7 -11
  38. package/ChartZoomSlider/internals/previews/RangeBarPreviewPlot.d.ts +2 -0
  39. package/ChartZoomSlider/internals/previews/RangeBarPreviewPlot.js +59 -0
  40. package/esm/BarChartPremium/BarChartPremium.d.ts +16 -1
  41. package/esm/BarChartPremium/BarChartPremium.js +45 -2
  42. package/esm/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.ts +3 -0
  43. package/esm/BarChartPremium/RangeBar/AnimatedRangeBarElement.js +21 -0
  44. package/esm/BarChartPremium/RangeBar/RangeBarPlot.d.ts +46 -0
  45. package/esm/BarChartPremium/RangeBar/RangeBarPlot.js +135 -0
  46. package/esm/BarChartPremium/RangeBar/seriesConfig/extrema.d.ts +3 -0
  47. package/esm/BarChartPremium/RangeBar/seriesConfig/extrema.js +77 -0
  48. package/esm/BarChartPremium/RangeBar/seriesConfig/getColor.d.ts +3 -0
  49. package/esm/BarChartPremium/RangeBar/seriesConfig/getColor.js +37 -0
  50. package/esm/BarChartPremium/RangeBar/seriesConfig/getSeriesWithDefaultValues.d.ts +19 -0
  51. package/esm/BarChartPremium/RangeBar/seriesConfig/getSeriesWithDefaultValues.js +7 -0
  52. package/esm/BarChartPremium/RangeBar/seriesConfig/index.d.ts +2 -0
  53. package/esm/BarChartPremium/RangeBar/seriesConfig/index.js +21 -0
  54. package/esm/BarChartPremium/RangeBar/seriesConfig/legend.d.ts +3 -0
  55. package/esm/BarChartPremium/RangeBar/seriesConfig/legend.js +23 -0
  56. package/esm/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.d.ts +3 -0
  57. package/esm/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.js +47 -0
  58. package/esm/BarChartPremium/RangeBar/seriesConfig/tooltip.d.ts +4 -0
  59. package/esm/BarChartPremium/RangeBar/seriesConfig/tooltip.js +37 -0
  60. package/esm/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.d.ts +3 -0
  61. package/esm/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.js +53 -0
  62. package/esm/BarChartPremium/RangeBar/types.d.ts +22 -0
  63. package/esm/BarChartPremium/RangeBar/types.js +1 -0
  64. package/esm/BarChartPremium/RangeBar/useRangeBarPlotData.d.ts +12 -0
  65. package/esm/BarChartPremium/RangeBar/useRangeBarPlotData.js +105 -0
  66. package/esm/BarChartPremium/RangeBar/useUtilityClasses.d.ts +12 -0
  67. package/esm/BarChartPremium/RangeBar/useUtilityClasses.js +15 -0
  68. package/esm/BarChartPremium/index.d.ts +3 -1
  69. package/esm/BarChartPremium/index.js +3 -1
  70. package/esm/BarChartPremium/useBarChartPremiumProps.d.ts +5 -1
  71. package/esm/BarChartPremium/useBarChartPremiumProps.js +18 -1
  72. package/esm/ChartDataProviderPremium/ChartDataProviderPremium.d.ts +3 -2
  73. package/esm/ChartDataProviderPremium/ChartDataProviderPremium.js +8 -1
  74. package/esm/ChartDataProviderPremium/index.d.ts +1 -1
  75. package/esm/ChartDataProviderPremium/index.js +1 -1
  76. package/esm/ChartZoomSlider/internals/previews/RangeBarPreviewPlot.d.ts +2 -0
  77. package/esm/ChartZoomSlider/internals/previews/RangeBarPreviewPlot.js +53 -0
  78. package/esm/hooks/animation/index.d.ts +1 -0
  79. package/esm/hooks/animation/index.js +1 -0
  80. package/esm/hooks/animation/useAnimateRangeBar.d.ts +18 -0
  81. package/esm/hooks/animation/useAnimateRangeBar.js +51 -0
  82. package/esm/hooks/index.d.ts +3 -1
  83. package/esm/hooks/index.js +4 -1
  84. package/esm/hooks/useRangeBarSeries.d.ts +34 -0
  85. package/esm/hooks/useRangeBarSeries.js +40 -0
  86. package/esm/index.d.ts +4 -1
  87. package/esm/index.js +5 -4
  88. package/esm/models/index.d.ts +2 -1
  89. package/esm/models/index.js +3 -1
  90. package/esm/models/seriesType/index.d.ts +1 -0
  91. package/esm/models/seriesType/index.js +1 -0
  92. package/esm/models/seriesType/rangeBar.d.ts +43 -0
  93. package/esm/models/seriesType/rangeBar.js +1 -0
  94. package/esm/moduleAugmentation/rangeBarOnClick.d.ts +8 -0
  95. package/esm/moduleAugmentation/rangeBarOnClick.js +2 -0
  96. package/esm/typeOverloads/index.d.ts +1 -0
  97. package/esm/typeOverloads/index.js +1 -0
  98. package/esm/typeOverloads/modules.d.ts +22 -0
  99. package/esm/typeOverloads/modules.js +1 -0
  100. package/hooks/animation/index.d.ts +1 -0
  101. package/hooks/animation/index.js +16 -0
  102. package/hooks/animation/useAnimateRangeBar.d.ts +18 -0
  103. package/hooks/animation/useAnimateRangeBar.js +57 -0
  104. package/hooks/index.d.ts +3 -1
  105. package/hooks/index.js +22 -0
  106. package/hooks/useRangeBarSeries.d.ts +34 -0
  107. package/hooks/useRangeBarSeries.js +45 -0
  108. package/index.d.ts +4 -1
  109. package/index.js +26 -1
  110. package/models/index.d.ts +2 -1
  111. package/models/index.js +11 -0
  112. package/models/seriesType/index.d.ts +1 -0
  113. package/models/seriesType/index.js +16 -0
  114. package/models/seriesType/rangeBar.d.ts +43 -0
  115. package/models/seriesType/rangeBar.js +5 -0
  116. package/moduleAugmentation/rangeBarOnClick.d.ts +8 -0
  117. package/moduleAugmentation/rangeBarOnClick.js +8 -0
  118. package/package.json +16 -6
  119. package/typeOverloads/index.d.ts +1 -0
  120. package/typeOverloads/index.js +6 -0
  121. package/typeOverloads/modules.d.ts +22 -0
  122. package/typeOverloads/modules.js +5 -0
@@ -1,6 +1,21 @@
1
1
  import * as React from 'react';
2
2
  import { type BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
3
- export interface BarChartPremiumProps extends BarChartProProps {}
3
+ import { type BarSeries } from '@mui/x-charts/BarChart';
4
+ import { type BarItemIdentifier, type RangeBarItemIdentifier, type RangeBarSeriesType } from "../models/index.js";
5
+ export type RangeBarSeries = RangeBarSeriesType;
6
+ export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick'> {
7
+ /**
8
+ * Callback fired when a bar or range bar item is clicked.
9
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
10
+ * @param {BarItemIdentifier | RangeBarItemIdentifier} itemIdentifier The item identifier.
11
+ */
12
+ onItemClick?(event: React.MouseEvent<SVGElement, MouseEvent>, itemIdentifier: BarItemIdentifier | RangeBarItemIdentifier): void;
13
+ /**
14
+ * The series to display in the bar chart.
15
+ * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
16
+ */
17
+ series: ReadonlyArray<BarSeries | RangeBarSeries>;
18
+ }
4
19
  /**
5
20
  * Demos:
6
21
  *
@@ -29,8 +29,11 @@ var _internals = require("@mui/x-charts-pro/internals");
29
29
  var _useBarChartPremiumProps = require("./useBarChartPremiumProps");
30
30
  var _BarChartPremium2 = require("./BarChartPremium.plugins");
31
31
  var _ChartDataProviderPremium = require("../ChartDataProviderPremium");
32
+ var _RangeBarPlot = require("./RangeBar/RangeBarPlot");
33
+ var _RangeBarPreviewPlot = require("../ChartZoomSlider/internals/previews/RangeBarPreviewPlot");
32
34
  var _jsxRuntime = require("react/jsx-runtime");
33
35
  const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
36
+ _internals.seriesPreviewPlotMap.set('rangeBar', _RangeBarPreviewPlot.RangeBarPreviewPlot);
34
37
  /**
35
38
  * Demos:
36
39
  *
@@ -59,6 +62,7 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
59
62
  chartsWrapperProps,
60
63
  chartContainerProps,
61
64
  barPlotProps,
65
+ rangeBarPlotProps,
62
66
  gridProps,
63
67
  clipPathProps,
64
68
  clipPathGroupProps,
@@ -84,7 +88,7 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
84
88
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
85
89
  children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
86
90
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
87
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
91
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
88
92
  })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
89
93
  })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
90
94
  }))
@@ -165,6 +169,31 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
165
169
  * The height of the chart in px. If not defined, it takes the height of the parent element.
166
170
  */
167
171
  height: _propTypes.default.number,
172
+ /**
173
+ * List of hidden series and/or items.
174
+ *
175
+ * Different chart types use different keys.
176
+ *
177
+ * @example
178
+ * ```ts
179
+ * [
180
+ * {
181
+ * type: 'pie',
182
+ * seriesId: 'series-1',
183
+ * dataIndex: 3,
184
+ * },
185
+ * {
186
+ * type: 'line',
187
+ * seriesId: 'series-2',
188
+ * }
189
+ * ]
190
+ * ```
191
+ */
192
+ hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
193
+ dataIndex: _propTypes.default.number,
194
+ seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
195
+ type: _propTypes.default.oneOf(['bar']).isRequired
196
+ })),
168
197
  /**
169
198
  * If `true`, the legend is not rendered.
170
199
  */
@@ -232,6 +261,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
232
261
  * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
233
262
  */
234
263
  onAxisClick: _propTypes.default.func,
264
+ /**
265
+ * Callback fired when any hidden identifiers change.
266
+ * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
267
+ */
268
+ onHiddenItemsChange: _propTypes.default.func,
235
269
  /**
236
270
  * The callback fired when the highlighted item changes.
237
271
  *
@@ -258,6 +292,15 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
258
292
  * @param {ZoomData[]} zoomData Updated zoom data.
259
293
  */
260
294
  onZoomChange: _propTypes.default.func,
295
+ /**
296
+ * The type of renderer to use for the bar plot.
297
+ * - `svg-single`: Renders every bar in a `<rect />` element.
298
+ * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
299
+ * Read more: https://mui.com/x/react-charts/bars/#performance
300
+ *
301
+ * @default 'svg-single'
302
+ */
303
+ renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
261
304
  /**
262
305
  * The series to display in the bar chart.
263
306
  * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
@@ -0,0 +1,3 @@
1
+ import { type BarProps } from '@mui/x-charts/BarChart';
2
+ export interface AnimatedRangeBarElementProps extends BarProps {}
3
+ export declare function AnimatedRangeBarElement(props: AnimatedRangeBarElementProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,28 @@
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.AnimatedRangeBarElement = AnimatedRangeBarElement;
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
12
+ var React = _interopRequireWildcard(require("react"));
13
+ var _useAnimateRangeBar = require("../../hooks/animation/useAnimateRangeBar");
14
+ var _jsxRuntime = require("react/jsx-runtime");
15
+ const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin"];
16
+ function AnimatedRangeBarElement(props) {
17
+ const {
18
+ ownerState
19
+ } = props,
20
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
21
+ const animatedProps = (0, _useAnimateRangeBar.useAnimateRangeBar)(props);
22
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, other, {
23
+ filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
24
+ opacity: ownerState.isFaded ? 0.3 : 1,
25
+ "data-highlighted": ownerState.isHighlighted || undefined,
26
+ "data-faded": ownerState.isFaded || undefined
27
+ }, animatedProps));
28
+ }
@@ -0,0 +1,46 @@
1
+ import * as React from 'react';
2
+ import { type BarElementSlotProps, type BarElementSlots, type BarLabelSlots, type BarLabelSlotProps } from '@mui/x-charts/BarChart';
3
+ import { type RangeBarItemIdentifier } from "../../models/index.js";
4
+ export interface RangeBarPlotSlots extends BarElementSlots, BarLabelSlots {}
5
+ export interface RangeBarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
6
+ export interface RangeBarPlotProps {
7
+ /**
8
+ * If `true`, animations are skipped.
9
+ * @default undefined
10
+ */
11
+ skipAnimation?: boolean;
12
+ /**
13
+ * Callback fired when a bar item is clicked.
14
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
15
+ * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
16
+ */
17
+ onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void;
18
+ /**
19
+ * Defines the border radius of the bar element.
20
+ */
21
+ borderRadius?: number;
22
+ /**
23
+ * The props used for each component slot.
24
+ * @default {}
25
+ */
26
+ slotProps?: RangeBarPlotSlotProps;
27
+ /**
28
+ * Overridable component slots.
29
+ * @default {}
30
+ */
31
+ slots?: RangeBarPlotSlots;
32
+ }
33
+ /**
34
+ * Demos:
35
+ *
36
+ * - [Range Bar](https://mui.com/x/react-charts/range-bar/)
37
+ *
38
+ * API:
39
+ *
40
+ * - [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
41
+ */
42
+ declare function RangeBarPlot(props: RangeBarPlotProps): React.JSX.Element;
43
+ declare namespace RangeBarPlot {
44
+ var propTypes: any;
45
+ }
46
+ export { RangeBarPlot };
@@ -0,0 +1,141 @@
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.RangeBarPlot = RangeBarPlot;
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
12
+ var React = _interopRequireWildcard(require("react"));
13
+ var _propTypes = _interopRequireDefault(require("prop-types"));
14
+ var _styles = require("@mui/material/styles");
15
+ var _internals = require("@mui/x-charts/internals");
16
+ var _BarChart = require("@mui/x-charts/BarChart");
17
+ var _hooks = require("@mui/x-charts/hooks");
18
+ var _hooks2 = require("@mui/x-charts-pro/hooks");
19
+ var _useUtilityClasses = require("./useUtilityClasses");
20
+ var _useRangeBarPlotData = require("./useRangeBarPlotData");
21
+ var _AnimatedRangeBarElement = require("./AnimatedRangeBarElement");
22
+ var _jsxRuntime = require("react/jsx-runtime");
23
+ const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
24
+ const RangeBarPlotRoot = (0, _styles.styled)('g', {
25
+ name: 'MuiRangeBarPlot',
26
+ slot: 'Root'
27
+ })({
28
+ [`& .${_BarChart.barElementClasses.root}`]: {
29
+ transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
30
+ }
31
+ });
32
+
33
+ /**
34
+ * Demos:
35
+ *
36
+ * - [Range Bar](https://mui.com/x/react-charts/range-bar/)
37
+ *
38
+ * API:
39
+ *
40
+ * - [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
41
+ */
42
+ function RangeBarPlot(props) {
43
+ const {
44
+ skipAnimation: inSkipAnimation,
45
+ onItemClick,
46
+ borderRadius
47
+ } = props,
48
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
49
+ const isZoomInteracting = (0, _hooks2.useIsZoomInteracting)();
50
+ const skipAnimation = (0, _internals.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
51
+ const {
52
+ xAxis: xAxes
53
+ } = (0, _hooks.useXAxes)();
54
+ const {
55
+ yAxis: yAxes
56
+ } = (0, _hooks.useYAxes)();
57
+ const completedData = (0, _useRangeBarPlotData.useRangeBarPlotData)((0, _hooks.useDrawingArea)(), xAxes, yAxes);
58
+ const classes = (0, _useUtilityClasses.useUtilityClasses)();
59
+ const slots = (0, _extends2.default)({}, props.slots, {
60
+ bar: props.slots?.bar ?? _AnimatedRangeBarElement.AnimatedRangeBarElement
61
+ });
62
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeBarPlotRoot, {
63
+ className: classes.root,
64
+ children: completedData.map(({
65
+ seriesId,
66
+ layout,
67
+ xOrigin,
68
+ yOrigin,
69
+ data
70
+ }) => {
71
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
72
+ "data-series": seriesId,
73
+ className: classes.series,
74
+ children: data.map(({
75
+ dataIndex,
76
+ color,
77
+ x,
78
+ y,
79
+ width,
80
+ height
81
+ }) => {
82
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarElement, (0, _extends2.default)({
83
+ id: seriesId,
84
+ dataIndex: dataIndex,
85
+ color: color,
86
+ skipAnimation: skipAnimation ?? false,
87
+ layout: layout ?? 'vertical',
88
+ x: x,
89
+ xOrigin: xOrigin,
90
+ y: y,
91
+ yOrigin: yOrigin,
92
+ width: width,
93
+ height: height,
94
+ rx: borderRadius,
95
+ ry: borderRadius
96
+ }, other, {
97
+ slots: slots,
98
+ onClick: onItemClick && (event => {
99
+ onItemClick(event, {
100
+ type: 'rangeBar',
101
+ seriesId,
102
+ dataIndex
103
+ });
104
+ })
105
+ }), dataIndex);
106
+ })
107
+ }, seriesId);
108
+ })
109
+ });
110
+ }
111
+ process.env.NODE_ENV !== "production" ? RangeBarPlot.propTypes = {
112
+ // ----------------------------- Warning --------------------------------
113
+ // | These PropTypes are generated from the TypeScript type definitions |
114
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
115
+ // ----------------------------------------------------------------------
116
+ /**
117
+ * Defines the border radius of the bar element.
118
+ */
119
+ borderRadius: _propTypes.default.number,
120
+ /**
121
+ * Callback fired when a bar item is clicked.
122
+ * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
123
+ * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
124
+ */
125
+ onItemClick: _propTypes.default.func,
126
+ /**
127
+ * If `true`, animations are skipped.
128
+ * @default undefined
129
+ */
130
+ skipAnimation: _propTypes.default.bool,
131
+ /**
132
+ * The props used for each component slot.
133
+ * @default {}
134
+ */
135
+ slotProps: _propTypes.default.object,
136
+ /**
137
+ * Overridable component slots.
138
+ * @default {}
139
+ */
140
+ slots: _propTypes.default.object
141
+ } : void 0;
@@ -0,0 +1,3 @@
1
+ import { type CartesianExtremumGetter } from '@mui/x-charts/internals';
2
+ export declare const getExtremumX: CartesianExtremumGetter<'rangeBar'>;
3
+ export declare const getExtremumY: CartesianExtremumGetter<'rangeBar'>;
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getExtremumY = exports.getExtremumX = void 0;
7
+ var _internals = require("@mui/x-charts/internals");
8
+ const createResult = (data, direction) => {
9
+ if (direction === 'x') {
10
+ return {
11
+ x: data,
12
+ y: null
13
+ };
14
+ }
15
+ return {
16
+ x: null,
17
+ y: data
18
+ };
19
+ };
20
+ const getBaseExtremum = params => {
21
+ const {
22
+ axis,
23
+ getFilters,
24
+ isDefaultAxis
25
+ } = params;
26
+ const filter = getFilters?.({
27
+ currentAxisId: axis.id,
28
+ isDefaultAxis
29
+ });
30
+ const data = filter ? axis.data?.filter((_, i) => filter({
31
+ x: null,
32
+ y: null
33
+ }, i)) : axis.data;
34
+ return (0, _internals.findMinMax)(data ?? []);
35
+ };
36
+ const getValueExtremum = direction => params => {
37
+ const {
38
+ series,
39
+ axis,
40
+ getFilters,
41
+ isDefaultAxis
42
+ } = params;
43
+ return Object.keys(series).filter(seriesId => {
44
+ const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
45
+ return axisId === axis.id || isDefaultAxis && axisId === undefined;
46
+ }).reduce((acc, seriesId) => {
47
+ const {
48
+ data
49
+ } = series[seriesId];
50
+ const filter = getFilters?.({
51
+ currentAxisId: axis.id,
52
+ isDefaultAxis,
53
+ seriesXAxisId: series[seriesId].xAxisId,
54
+ seriesYAxisId: series[seriesId].yAxisId
55
+ });
56
+ const [seriesMin, seriesMax] = data?.reduce((seriesAcc, values, index) => {
57
+ if (values == null) {
58
+ return seriesAcc;
59
+ }
60
+ if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
61
+ return seriesAcc;
62
+ }
63
+ return [Math.min(values[0], values[1], seriesAcc[0]), Math.max(values[0], values[1], seriesAcc[1])];
64
+ }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
65
+ return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
66
+ }, [Infinity, -Infinity]);
67
+ };
68
+ const getExtremumX = params => {
69
+ // Notice that bar should be all horizontal or all vertical.
70
+ // Don't think it's a problem for now
71
+ const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
72
+ if (isHorizontal) {
73
+ return getValueExtremum('x')(params);
74
+ }
75
+ return getBaseExtremum(params);
76
+ };
77
+ exports.getExtremumX = getExtremumX;
78
+ const getExtremumY = params => {
79
+ const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
80
+ if (isHorizontal) {
81
+ return getBaseExtremum(params);
82
+ }
83
+ return getValueExtremum('y')(params);
84
+ };
85
+ exports.getExtremumY = getExtremumY;
@@ -0,0 +1,3 @@
1
+ import { type ColorProcessor } from '@mui/x-charts/internals';
2
+ declare const getColor: ColorProcessor<'rangeBar'>;
3
+ export default getColor;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _internals = require("@mui/x-charts/internals");
8
+ const getColor = (series, xAxis, yAxis) => {
9
+ const verticalLayout = series.layout === 'vertical';
10
+ const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
11
+ const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
12
+ const getSeriesColor = (0, _internals.getSeriesColorFn)(series);
13
+ if (bandColorScale && bandValues) {
14
+ return dataIndex => {
15
+ if (dataIndex === undefined) {
16
+ return series.color;
17
+ }
18
+ const value = bandValues[dataIndex];
19
+ const color = value === null ? getSeriesColor({
20
+ value,
21
+ dataIndex
22
+ }) : bandColorScale(value);
23
+ if (color === null) {
24
+ return getSeriesColor({
25
+ value,
26
+ dataIndex
27
+ });
28
+ }
29
+ return color;
30
+ };
31
+ }
32
+ return dataIndex => {
33
+ if (dataIndex === undefined) {
34
+ return series.color;
35
+ }
36
+ const value = series.data[dataIndex];
37
+ return getSeriesColor({
38
+ value,
39
+ dataIndex
40
+ });
41
+ };
42
+ };
43
+ var _default = exports.default = getColor;
@@ -0,0 +1,19 @@
1
+ import { type AllSeriesType } from '@mui/x-charts/models';
2
+ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'rangeBar'>, seriesIndex: number, colors: readonly string[]): {
3
+ id: import("@mui/x-charts").SeriesId;
4
+ color: string;
5
+ type: "rangeBar";
6
+ data?: ReadonlyArray<import("../../../index.js").RangeBarValueType | null>;
7
+ datasetKeys?: {
8
+ start: string;
9
+ end: string;
10
+ };
11
+ label?: string | ((location: "tooltip" | "legend") => string);
12
+ layout?: "horizontal" | "vertical";
13
+ valueFormatter?: import("@mui/x-charts/internals").SeriesValueFormatter<import("../../../index.js").RangeBarValueType | null> | undefined;
14
+ highlightScope?: import("@mui/x-charts").HighlightScope;
15
+ labelMarkType?: import("@mui/x-charts/internals").ChartsLabelMarkType;
16
+ colorGetter?: ((data: import("@mui/x-charts/internals").ColorCallbackValue<import("../../../index.js").RangeBarValueType | null>) => string) | undefined;
17
+ xAxisId?: import("@mui/x-charts/internals").AxisId;
18
+ yAxisId?: import("@mui/x-charts/internals").AxisId;
19
+ };
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getSeriesWithDefaultValues = getSeriesWithDefaultValues;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ function getSeriesWithDefaultValues(seriesData, seriesIndex, colors) {
10
+ return (0, _extends2.default)({}, seriesData, {
11
+ id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
12
+ color: seriesData.color ?? colors[seriesIndex % colors.length]
13
+ });
14
+ }
@@ -0,0 +1,2 @@
1
+ import { type ChartSeriesTypeConfig } from '@mui/x-charts/internals';
2
+ export declare const rangeBarSeriesConfig: ChartSeriesTypeConfig<'rangeBar'>;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.rangeBarSeriesConfig = void 0;
9
+ var _internals = require("@mui/x-charts/internals");
10
+ var _extrema = require("./extrema");
11
+ var _tooltip = _interopRequireWildcard(require("./tooltip"));
12
+ var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
13
+ var _getColor = _interopRequireDefault(require("./getColor"));
14
+ var _legend = _interopRequireDefault(require("./legend"));
15
+ var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
16
+ var _getSeriesWithDefaultValues = require("./getSeriesWithDefaultValues");
17
+ const rangeBarSeriesConfig = exports.rangeBarSeriesConfig = {
18
+ seriesProcessor: _seriesProcessor.default,
19
+ colorProcessor: _getColor.default,
20
+ legendGetter: _legend.default,
21
+ tooltipGetter: _tooltip.default,
22
+ tooltipItemPositionGetter: _tooltipPosition.default,
23
+ axisTooltipGetter: _tooltip.axisTooltipGetter,
24
+ xExtremumGetter: _extrema.getExtremumX,
25
+ yExtremumGetter: _extrema.getExtremumY,
26
+ getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
27
+ identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
28
+ };
29
+ _internals.cartesianSeriesTypes.addType('rangeBar');
@@ -0,0 +1,3 @@
1
+ import { type LegendGetter } from '@mui/x-charts/internals';
2
+ declare const legendGetter: LegendGetter<'rangeBar'>;
3
+ export default legendGetter;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _internals = require("@mui/x-charts/internals");
8
+ const legendGetter = params => {
9
+ const {
10
+ seriesOrder,
11
+ series
12
+ } = params;
13
+ return seriesOrder.reduce((acc, seriesId) => {
14
+ const formattedLabel = (0, _internals.getLabel)(series[seriesId].label, 'legend');
15
+ if (formattedLabel === undefined) {
16
+ return acc;
17
+ }
18
+ acc.push({
19
+ type: 'rangeBar',
20
+ markType: series[seriesId].labelMarkType,
21
+ id: seriesId,
22
+ seriesId,
23
+ color: series[seriesId].color,
24
+ label: formattedLabel
25
+ });
26
+ return acc;
27
+ }, []);
28
+ };
29
+ var _default = exports.default = legendGetter;
@@ -0,0 +1,3 @@
1
+ import { type SeriesProcessor } from '@mui/x-charts/internals';
2
+ declare const seriesProcessor: SeriesProcessor<'rangeBar'>;
3
+ export default seriesProcessor;
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _warning = require("@mui/x-internals/warning");
10
+ const rangeBarValueFormatter = v => v == null ? '' : `[${v[0]}, ${v[1]}]`;
11
+ const seriesProcessor = (params, dataset) => {
12
+ const {
13
+ seriesOrder,
14
+ series
15
+ } = params;
16
+ const completedSeries = {};
17
+ for (const id of seriesOrder) {
18
+ const seriesData = series[id];
19
+ const datasetKeys = seriesData?.datasetKeys;
20
+ if (seriesData.data === undefined && dataset === undefined && process.env.NODE_ENV !== 'production') {
21
+ throw new Error([`MUI X Charts: range bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
22
+ }
23
+ const missingKeys = ['start', 'end'].filter(key => typeof datasetKeys?.[key] !== 'string');
24
+ if (datasetKeys && missingKeys.length > 0) {
25
+ throw new Error([`MUI X Charts: range bar series with id='${id}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
26
+ }
27
+ completedSeries[id] = (0, _extends2.default)({
28
+ layout: 'vertical'
29
+ }, series[id], {
30
+ valueFormatter: series[id].valueFormatter ?? rangeBarValueFormatter,
31
+ data: datasetKeys ? dataset.map(data => {
32
+ const start = data[datasetKeys.start];
33
+ const end = data[datasetKeys.end];
34
+ if (typeof start !== 'number' || typeof end !== 'number') {
35
+ if (process.env.NODE_ENV !== 'production') {
36
+ if (start !== null) {
37
+ (0, _warning.warnOnce)([`MUI X Charts: Your dataset key "start" is used for plotting an range bar, but contains nonnumerical elements.`, 'Range bars only support numbers.']);
38
+ }
39
+ if (end !== null) {
40
+ (0, _warning.warnOnce)([`MUI X Charts: Your dataset key "end" is used for plotting an range bar, but contains nonnumerical elements.`, 'Range bars only support numbers.']);
41
+ }
42
+ }
43
+ return null;
44
+ }
45
+ return [start, end];
46
+ }) : series[id].data
47
+ });
48
+ }
49
+ return {
50
+ seriesOrder,
51
+ series: completedSeries
52
+ };
53
+ };
54
+ var _default = exports.default = seriesProcessor;
@@ -0,0 +1,4 @@
1
+ import { type AxisTooltipGetter, type TooltipGetter } from '@mui/x-charts/internals';
2
+ declare const tooltipGetter: TooltipGetter<'rangeBar'>;
3
+ export declare const axisTooltipGetter: AxisTooltipGetter<'rangeBar', 'x' | 'y'>;
4
+ export default tooltipGetter;