@mui/x-charts-pro 8.2.0 → 8.3.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 (154) hide show
  1. package/BarChartPro/BarChartPro.d.ts +7 -1
  2. package/BarChartPro/BarChartPro.js +60 -4
  3. package/CHANGELOG.md +107 -0
  4. package/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
  5. package/ChartZoomSlider/ChartZoomSlider.d.ts +5 -0
  6. package/ChartZoomSlider/ChartZoomSlider.js +47 -0
  7. package/ChartZoomSlider/index.d.ts +2 -0
  8. package/ChartZoomSlider/index.js +27 -0
  9. package/ChartZoomSlider/internals/ChartAxisZoomSlider.d.ts +23 -0
  10. package/ChartZoomSlider/internals/ChartAxisZoomSlider.js +348 -0
  11. package/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.d.ts +12 -0
  12. package/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.js +92 -0
  13. package/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.d.ts +17 -0
  14. package/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.js +27 -0
  15. package/ChartsToolbarPro/ChartsToolbarPro.d.ts +2 -0
  16. package/ChartsToolbarPro/ChartsToolbarPro.js +31 -0
  17. package/ChartsToolbarPro/index.d.ts +1 -0
  18. package/ChartsToolbarPro/index.js +16 -0
  19. package/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.d.ts +13 -0
  20. package/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.js +36 -0
  21. package/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.d.ts +13 -0
  22. package/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.js +36 -0
  23. package/FunnelChart/FunnelChart.js +2 -7
  24. package/FunnelChart/FunnelPlot.js +24 -3
  25. package/FunnelChart/FunnelSection.d.ts +1 -0
  26. package/FunnelChart/FunnelSection.js +12 -7
  27. package/FunnelChart/curves/borderRadiusPolygon.d.ts +8 -0
  28. package/FunnelChart/curves/borderRadiusPolygon.js +42 -0
  29. package/FunnelChart/curves/bump.d.ts +8 -5
  30. package/FunnelChart/curves/bump.js +21 -22
  31. package/FunnelChart/curves/curve.types.d.ts +33 -3
  32. package/FunnelChart/curves/getFunnelCurve.d.ts +2 -2
  33. package/FunnelChart/curves/getFunnelCurve.js +12 -4
  34. package/FunnelChart/curves/linear.d.ts +17 -9
  35. package/FunnelChart/curves/linear.js +62 -87
  36. package/FunnelChart/curves/pyramid.d.ts +34 -0
  37. package/FunnelChart/curves/pyramid.js +127 -0
  38. package/FunnelChart/curves/step-pyramid.d.ts +31 -0
  39. package/FunnelChart/curves/step-pyramid.js +107 -0
  40. package/FunnelChart/curves/step.d.ts +32 -0
  41. package/FunnelChart/curves/step.js +88 -0
  42. package/FunnelChart/curves/utils.d.ts +4 -0
  43. package/FunnelChart/curves/utils.js +29 -0
  44. package/FunnelChart/funnel.types.d.ts +23 -2
  45. package/FunnelChart/funnelSectionClasses.d.ts +5 -1
  46. package/FunnelChart/funnelSectionClasses.js +5 -2
  47. package/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js +1 -0
  48. package/FunnelChart/useFunnelChartProps.d.ts +0 -5
  49. package/FunnelChart/useFunnelChartProps.js +0 -11
  50. package/Heatmap/Heatmap.d.ts +3 -3
  51. package/Heatmap/Heatmap.js +2 -20
  52. package/LineChartPro/LineChartPro.d.ts +7 -1
  53. package/LineChartPro/LineChartPro.js +60 -4
  54. package/ScatterChartPro/ScatterChartPro.d.ts +7 -1
  55. package/ScatterChartPro/ScatterChartPro.js +60 -4
  56. package/esm/BarChartPro/BarChartPro.d.ts +7 -1
  57. package/esm/BarChartPro/BarChartPro.js +60 -4
  58. package/esm/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
  59. package/esm/ChartZoomSlider/ChartZoomSlider.d.ts +5 -0
  60. package/esm/ChartZoomSlider/ChartZoomSlider.js +41 -0
  61. package/esm/ChartZoomSlider/index.d.ts +2 -0
  62. package/esm/ChartZoomSlider/index.js +2 -0
  63. package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.d.ts +23 -0
  64. package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js +339 -0
  65. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.d.ts +12 -0
  66. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.js +85 -0
  67. package/esm/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.d.ts +17 -0
  68. package/esm/ChartZoomSlider/internals/chartAxisZoomSliderHandleClasses.js +17 -0
  69. package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts +2 -0
  70. package/esm/ChartsToolbarPro/ChartsToolbarPro.js +24 -0
  71. package/esm/ChartsToolbarPro/index.d.ts +1 -0
  72. package/esm/ChartsToolbarPro/index.js +1 -0
  73. package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.d.ts +13 -0
  74. package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomInButton.js +29 -0
  75. package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.d.ts +13 -0
  76. package/esm/ChartsToolbarPro/internal/ChartsToolbarZoomOutButton.js +29 -0
  77. package/esm/FunnelChart/FunnelChart.js +2 -7
  78. package/esm/FunnelChart/FunnelPlot.js +24 -3
  79. package/esm/FunnelChart/FunnelSection.d.ts +1 -0
  80. package/esm/FunnelChart/FunnelSection.js +12 -7
  81. package/esm/FunnelChart/curves/borderRadiusPolygon.d.ts +8 -0
  82. package/esm/FunnelChart/curves/borderRadiusPolygon.js +36 -0
  83. package/esm/FunnelChart/curves/bump.d.ts +8 -5
  84. package/esm/FunnelChart/curves/bump.js +21 -22
  85. package/esm/FunnelChart/curves/curve.types.d.ts +33 -3
  86. package/esm/FunnelChart/curves/getFunnelCurve.d.ts +2 -2
  87. package/esm/FunnelChart/curves/getFunnelCurve.js +12 -4
  88. package/esm/FunnelChart/curves/linear.d.ts +17 -9
  89. package/esm/FunnelChart/curves/linear.js +62 -86
  90. package/esm/FunnelChart/curves/pyramid.d.ts +34 -0
  91. package/esm/FunnelChart/curves/pyramid.js +121 -0
  92. package/esm/FunnelChart/curves/step-pyramid.d.ts +31 -0
  93. package/esm/FunnelChart/curves/step-pyramid.js +101 -0
  94. package/esm/FunnelChart/curves/step.d.ts +32 -0
  95. package/esm/FunnelChart/curves/step.js +82 -0
  96. package/esm/FunnelChart/curves/utils.d.ts +4 -0
  97. package/esm/FunnelChart/curves/utils.js +19 -0
  98. package/esm/FunnelChart/funnel.types.d.ts +23 -2
  99. package/esm/FunnelChart/funnelSectionClasses.d.ts +5 -1
  100. package/esm/FunnelChart/funnelSectionClasses.js +5 -2
  101. package/esm/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js +1 -0
  102. package/esm/FunnelChart/useFunnelChartProps.d.ts +0 -5
  103. package/esm/FunnelChart/useFunnelChartProps.js +0 -11
  104. package/esm/Heatmap/Heatmap.d.ts +3 -3
  105. package/esm/Heatmap/Heatmap.js +2 -20
  106. package/esm/LineChartPro/LineChartPro.d.ts +7 -1
  107. package/esm/LineChartPro/LineChartPro.js +60 -4
  108. package/esm/ScatterChartPro/ScatterChartPro.d.ts +7 -1
  109. package/esm/ScatterChartPro/ScatterChartPro.js +60 -4
  110. package/esm/index.d.ts +4 -1
  111. package/esm/index.js +5 -2
  112. package/esm/internals/material/icons.d.ts +3 -0
  113. package/esm/internals/material/icons.js +13 -0
  114. package/esm/internals/material/index.d.ts +4 -0
  115. package/esm/internals/material/index.js +12 -0
  116. package/esm/internals/plugins/useChartProZoom/calculateZoom.d.ts +23 -0
  117. package/esm/internals/plugins/useChartProZoom/calculateZoom.js +32 -0
  118. package/esm/internals/plugins/useChartProZoom/useChartProZoom.d.ts +1 -1
  119. package/esm/internals/plugins/useChartProZoom/useChartProZoom.js +45 -3
  120. package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +63 -11
  121. package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +3 -2
  122. package/esm/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +17 -2
  123. package/esm/internals/slots/chartBaseSlotProps.d.ts +10 -0
  124. package/esm/internals/slots/chartBaseSlotProps.js +1 -0
  125. package/esm/internals/slots/chartsBaseSlots.d.ts +6 -0
  126. package/esm/internals/slots/chartsBaseSlots.js +1 -0
  127. package/esm/internals/slots/chartsIconSlots.d.ts +14 -0
  128. package/esm/internals/slots/chartsIconSlots.js +1 -0
  129. package/esm/typeOverloads/modules.d.ts +1 -1
  130. package/index.d.ts +4 -1
  131. package/index.js +90 -1
  132. package/internals/material/icons.d.ts +3 -0
  133. package/internals/material/icons.js +20 -0
  134. package/internals/material/index.d.ts +4 -0
  135. package/internals/material/index.js +19 -0
  136. package/internals/plugins/useChartProZoom/calculateZoom.d.ts +23 -0
  137. package/internals/plugins/useChartProZoom/calculateZoom.js +39 -0
  138. package/internals/plugins/useChartProZoom/useChartProZoom.d.ts +1 -1
  139. package/internals/plugins/useChartProZoom/useChartProZoom.js +44 -2
  140. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +63 -11
  141. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +3 -2
  142. package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +17 -2
  143. package/internals/slots/chartBaseSlotProps.d.ts +10 -0
  144. package/internals/slots/chartBaseSlotProps.js +5 -0
  145. package/internals/slots/chartsBaseSlots.d.ts +6 -0
  146. package/internals/slots/chartsBaseSlots.js +5 -0
  147. package/internals/slots/chartsIconSlots.d.ts +14 -0
  148. package/internals/slots/chartsIconSlots.js +5 -0
  149. package/package.json +7 -7
  150. package/typeOverloads/modules.d.ts +1 -1
  151. package/FunnelChart/curves/funnelStep.d.ts +0 -25
  152. package/FunnelChart/curves/funnelStep.js +0 -87
  153. package/esm/FunnelChart/curves/funnelStep.d.ts +0 -25
  154. package/esm/FunnelChart/curves/funnelStep.js +0 -80
@@ -2,7 +2,13 @@ import * as React from 'react';
2
2
  import { BarChartProps } from '@mui/x-charts/BarChart';
3
3
  import { ChartContainerProProps } from "../ChartContainerPro/index.js";
4
4
  import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
5
- export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
5
+ export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
6
+ /**
7
+ * If true, shows the default chart toolbar.
8
+ * @default false
9
+ */
10
+ showToolbar?: boolean;
11
+ }
6
12
  /**
7
13
  * Demos:
8
14
  *
@@ -22,11 +22,13 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
22
22
  var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
23
23
  var _internals = require("@mui/x-charts/internals");
24
24
  var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
25
+ var _ChartZoomSlider = require("../ChartZoomSlider");
26
+ var _ChartsToolbarPro = require("../ChartsToolbarPro");
25
27
  var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
26
28
  var _ChartDataProviderPro = require("../ChartDataProviderPro");
27
29
  var _BarChartPro = require("./BarChartPro.plugins");
28
30
  var _jsxRuntime = require("react/jsx-runtime");
29
- const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
31
+ const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
30
32
  /**
31
33
  * Demos:
32
34
  *
@@ -47,7 +49,8 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
47
49
  initialZoom,
48
50
  zoomData,
49
51
  onZoomChange,
50
- apiRef
52
+ apiRef,
53
+ showToolbar
51
54
  } = props,
52
55
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
53
56
  const {
@@ -76,10 +79,10 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
76
79
  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
77
80
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
78
81
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
79
- children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
82
+ children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
80
83
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
81
84
  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))]
82
- })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
85
+ })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
83
86
  }))]
84
87
  }))
85
88
  }));
@@ -229,6 +232,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
229
232
  * An array of [[BarSeriesType]] objects.
230
233
  */
231
234
  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
235
+ /**
236
+ * If true, shows the default chart toolbar.
237
+ * @default false
238
+ */
239
+ showToolbar: _propTypes.default.bool,
232
240
  /**
233
241
  * If `true`, animations are skipped.
234
242
  * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -316,6 +324,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
316
324
  minSpan: _propTypes.default.number,
317
325
  minStart: _propTypes.default.number,
318
326
  panning: _propTypes.default.bool,
327
+ slider: _propTypes.default.shape({
328
+ enabled: _propTypes.default.bool
329
+ }),
319
330
  step: _propTypes.default.number
320
331
  }), _propTypes.default.bool])
321
332
  }), _propTypes.default.shape({
@@ -376,6 +387,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
376
387
  minSpan: _propTypes.default.number,
377
388
  minStart: _propTypes.default.number,
378
389
  panning: _propTypes.default.bool,
390
+ slider: _propTypes.default.shape({
391
+ enabled: _propTypes.default.bool
392
+ }),
379
393
  step: _propTypes.default.number
380
394
  }), _propTypes.default.bool])
381
395
  }), _propTypes.default.shape({
@@ -431,6 +445,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
431
445
  minSpan: _propTypes.default.number,
432
446
  minStart: _propTypes.default.number,
433
447
  panning: _propTypes.default.bool,
448
+ slider: _propTypes.default.shape({
449
+ enabled: _propTypes.default.bool
450
+ }),
434
451
  step: _propTypes.default.number
435
452
  }), _propTypes.default.bool])
436
453
  }), _propTypes.default.shape({
@@ -486,6 +503,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
486
503
  minSpan: _propTypes.default.number,
487
504
  minStart: _propTypes.default.number,
488
505
  panning: _propTypes.default.bool,
506
+ slider: _propTypes.default.shape({
507
+ enabled: _propTypes.default.bool
508
+ }),
489
509
  step: _propTypes.default.number
490
510
  }), _propTypes.default.bool])
491
511
  }), _propTypes.default.shape({
@@ -541,6 +561,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
541
561
  minSpan: _propTypes.default.number,
542
562
  minStart: _propTypes.default.number,
543
563
  panning: _propTypes.default.bool,
564
+ slider: _propTypes.default.shape({
565
+ enabled: _propTypes.default.bool
566
+ }),
544
567
  step: _propTypes.default.number
545
568
  }), _propTypes.default.bool])
546
569
  }), _propTypes.default.shape({
@@ -596,6 +619,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
596
619
  minSpan: _propTypes.default.number,
597
620
  minStart: _propTypes.default.number,
598
621
  panning: _propTypes.default.bool,
622
+ slider: _propTypes.default.shape({
623
+ enabled: _propTypes.default.bool
624
+ }),
599
625
  step: _propTypes.default.number
600
626
  }), _propTypes.default.bool])
601
627
  }), _propTypes.default.shape({
@@ -651,6 +677,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
651
677
  minSpan: _propTypes.default.number,
652
678
  minStart: _propTypes.default.number,
653
679
  panning: _propTypes.default.bool,
680
+ slider: _propTypes.default.shape({
681
+ enabled: _propTypes.default.bool
682
+ }),
654
683
  step: _propTypes.default.number
655
684
  }), _propTypes.default.bool])
656
685
  }), _propTypes.default.shape({
@@ -706,6 +735,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
706
735
  minSpan: _propTypes.default.number,
707
736
  minStart: _propTypes.default.number,
708
737
  panning: _propTypes.default.bool,
738
+ slider: _propTypes.default.shape({
739
+ enabled: _propTypes.default.bool
740
+ }),
709
741
  step: _propTypes.default.number
710
742
  }), _propTypes.default.bool])
711
743
  })]).isRequired),
@@ -773,6 +805,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
773
805
  minSpan: _propTypes.default.number,
774
806
  minStart: _propTypes.default.number,
775
807
  panning: _propTypes.default.bool,
808
+ slider: _propTypes.default.shape({
809
+ enabled: _propTypes.default.bool
810
+ }),
776
811
  step: _propTypes.default.number
777
812
  }), _propTypes.default.bool])
778
813
  }), _propTypes.default.shape({
@@ -832,6 +867,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
832
867
  minSpan: _propTypes.default.number,
833
868
  minStart: _propTypes.default.number,
834
869
  panning: _propTypes.default.bool,
870
+ slider: _propTypes.default.shape({
871
+ enabled: _propTypes.default.bool
872
+ }),
835
873
  step: _propTypes.default.number
836
874
  }), _propTypes.default.bool])
837
875
  }), _propTypes.default.shape({
@@ -886,6 +924,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
886
924
  minSpan: _propTypes.default.number,
887
925
  minStart: _propTypes.default.number,
888
926
  panning: _propTypes.default.bool,
927
+ slider: _propTypes.default.shape({
928
+ enabled: _propTypes.default.bool
929
+ }),
889
930
  step: _propTypes.default.number
890
931
  }), _propTypes.default.bool])
891
932
  }), _propTypes.default.shape({
@@ -940,6 +981,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
940
981
  minSpan: _propTypes.default.number,
941
982
  minStart: _propTypes.default.number,
942
983
  panning: _propTypes.default.bool,
984
+ slider: _propTypes.default.shape({
985
+ enabled: _propTypes.default.bool
986
+ }),
943
987
  step: _propTypes.default.number
944
988
  }), _propTypes.default.bool])
945
989
  }), _propTypes.default.shape({
@@ -994,6 +1038,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
994
1038
  minSpan: _propTypes.default.number,
995
1039
  minStart: _propTypes.default.number,
996
1040
  panning: _propTypes.default.bool,
1041
+ slider: _propTypes.default.shape({
1042
+ enabled: _propTypes.default.bool
1043
+ }),
997
1044
  step: _propTypes.default.number
998
1045
  }), _propTypes.default.bool])
999
1046
  }), _propTypes.default.shape({
@@ -1048,6 +1095,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1048
1095
  minSpan: _propTypes.default.number,
1049
1096
  minStart: _propTypes.default.number,
1050
1097
  panning: _propTypes.default.bool,
1098
+ slider: _propTypes.default.shape({
1099
+ enabled: _propTypes.default.bool
1100
+ }),
1051
1101
  step: _propTypes.default.number
1052
1102
  }), _propTypes.default.bool])
1053
1103
  }), _propTypes.default.shape({
@@ -1102,6 +1152,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1102
1152
  minSpan: _propTypes.default.number,
1103
1153
  minStart: _propTypes.default.number,
1104
1154
  panning: _propTypes.default.bool,
1155
+ slider: _propTypes.default.shape({
1156
+ enabled: _propTypes.default.bool
1157
+ }),
1105
1158
  step: _propTypes.default.number
1106
1159
  }), _propTypes.default.bool])
1107
1160
  }), _propTypes.default.shape({
@@ -1156,6 +1209,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1156
1209
  minSpan: _propTypes.default.number,
1157
1210
  minStart: _propTypes.default.number,
1158
1211
  panning: _propTypes.default.bool,
1212
+ slider: _propTypes.default.shape({
1213
+ enabled: _propTypes.default.bool
1214
+ }),
1159
1215
  step: _propTypes.default.number
1160
1216
  }), _propTypes.default.bool])
1161
1217
  })]).isRequired),
package/CHANGELOG.md CHANGED
@@ -5,6 +5,113 @@
5
5
  All notable changes to this project will be documented in this file.
6
6
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
7
7
 
8
+ ## 8.3.0
9
+
10
+ _May 8, 2025_
11
+
12
+ We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
13
+
14
+ - 🎨 Added new styling options and shapes for `<FunnelChart />`, including `variant`, `borderRadius`, `pyramid`, and `step-pyramid` curves.
15
+ - 📚 Documentation improvements
16
+ - 🐞 Bugfixes
17
+
18
+ Special thanks go out to this community member for a valuable contribution:
19
+ @ptuukkan.
20
+ Team members who have contributed to this release:
21
+ @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
22
+
23
+ ### Data Grid
24
+
25
+ #### `@mui/x-data-grid@8.3.0`
26
+
27
+ - [DataGrid] Fix cell editing of computed columns with data source (#17684) @ptuukkan
28
+ - [DataGrid] Fix lazy loading crash with `isRowSelectable` prop (#17629) @MBilalShafi
29
+ - [DataGrid] Fix: use CSS nonce (#17726) @romgrk
30
+ - [DataGrid] Ignore `preProcessEditCellProps` for non-editable columns when starting a row update (#17732) @arminmeh
31
+ - [DataGrid] Avoid applying row selection propagation on filtered rows (#17739) @MBilalShafi
32
+
33
+ #### `@mui/x-data-grid-pro@8.3.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
34
+
35
+ Same changes as in `@mui/x-data-grid@8.3.0`.
36
+
37
+ #### `@mui/x-data-grid-premium@8.3.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
38
+
39
+ Same changes as in `@mui/x-data-grid-pro@8.3.0`.
40
+
41
+ ### Date and Time Pickers
42
+
43
+ #### `@mui/x-date-pickers@8.3.0`
44
+
45
+ - [DateTimePicker] Fix focus behavior on desktop variant (#17719) @LukasTy
46
+ - [pickers] Avoid `DigitalClock` stealing focus from a Picker open button on close (#17686) @LukasTy
47
+
48
+ #### `@mui/x-date-pickers-pro@8.3.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
49
+
50
+ Same changes as in `@mui/x-date-pickers@8.3.0`, plus:
51
+
52
+ - [DateRangePicker] Fix to reset range position after closing mobile Picker (#17631) @LukasTy
53
+
54
+ ### Charts
55
+
56
+ - The `<FunnelChart />` series now accepts a `variant='outlined'` prop for a simpler style.
57
+ <img width="398" alt="Screenshot 2025-05-06 at 20 36 12" src="https://github.com/user-attachments/assets/00fef14f-9026-421e-a4b6-7e081adce1e8" />
58
+
59
+ - Add a `borderRadius` property to `<FunnelChart />`. All funnels have `8px` as a default value.
60
+ <img width="386" alt="Screenshot 2025-05-06 at 14 00 20" src="https://github.com/user-attachments/assets/4f4cc0e7-01ce-4ed6-a0e1-a387f78def23" />
61
+
62
+ - Add a `pyramid` curve to `<FunnelChart />`, which allows creation of a pyramid-shaped funnel.
63
+ <img width="344" alt="Screenshot 2025-05-06 at 14 32 59" src="https://github.com/user-attachments/assets/0b2896e0-0478-4766-bb1b-258a4977a751" />
64
+
65
+ - Add a `step-pyramid` curve to `<FunnelChart />`, which creates a stepped-pyramid like shape.
66
+ <img width="344" alt="Screenshot 2025-05-06 at 14 33 03" src="https://github.com/user-attachments/assets/894f0ab3-7898-40fe-b0df-560feea4085a" />
67
+
68
+ #### `@mui/x-charts@8.3.0`
69
+
70
+ - [charts] Add charts toolbar with zoom options (#17615) @bernardobelchior
71
+ - [charts] Add zoom slider (#17496) @bernardobelchior
72
+ - [charts] Cleanup compiler warnings (#17360) @alexfauquette
73
+ - [charts] Fix `<PieArcLabel />` not taking `arcLabelRadius` into account (#17655) @bernardobelchior
74
+ - [charts] Fix spark line not having clip path (#17501) @bernardobelchior
75
+ - [charts] Fix type issue with ESM (#17624) @alexfauquette
76
+ - [charts] Improve `<MarkElement />` performance (#17546) @bernardobelchior
77
+ - [charts] Rename `materialSlots` internal constant (#17710) @bernardobelchior
78
+ - [charts] Update zoom slider design (#17682) @bernardobelchior
79
+ - [charts] Fix zoom being documented as available for heatmap (#17657) @bernardobelchior
80
+
81
+ #### `@mui/x-charts-pro@8.3.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
82
+
83
+ Same changes as in `@mui/x-charts@8.3.0`, plus:
84
+
85
+ - [charts-pro] Add `pyramid` curve to `<FunnelChart />` (#17665) @JCQuintas
86
+ - [charts-pro] Add `variant='outlined'` to `<FunnelChart />` series (#17661) @JCQuintas
87
+ - [charts-pro] Add a `borderRadius` property to `<FunnelChart />` (#17660) @JCQuintas
88
+
89
+ ### Tree View
90
+
91
+ #### `@mui/x-tree-view@8.3.0`
92
+
93
+ - [tree view] Bug fix - Escape does not cancel Drag n Drop (#17735) @rita-codes
94
+ - [tree view] Fix keyboard navigation error (#17685) @rita-codes
95
+ - [tree view] Continue cleaning the plugin system (#17386) @flaviendelangle
96
+
97
+ #### `@mui/x-tree-view-pro@8.3.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
98
+
99
+ Same changes as in `@mui/x-tree-view@8.3.0`.
100
+
101
+ ### Docs
102
+
103
+ - [charts] Add population pyramid demo (#17652) @bernardobelchior
104
+ - [charts] Fix randomised argos test (#17658) @JCQuintas
105
+ - [docs] Make preview messaging consistent in charts @bernardobelchior
106
+
107
+ ### Core
108
+
109
+ - [code-infra] Avoid `node` types in the built packages (#17533) @LukasTy
110
+ - [code-infra] Add `pkg.pr.new` publishing (#17402) @Janpot
111
+ - [code-infra] Normalize author package in org @oliviertassinari
112
+ - [code-infra] Remove required checkout step (#17729) @JCQuintas
113
+ - [docs-infra] Normalize netlify.toml in org @oliviertassinari
114
+
8
115
  ## 8.2.0
9
116
 
10
117
  _May 1, 2025_
@@ -17,7 +17,7 @@ var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
17
17
  var _allPlugins = require("../internals/plugins/allPlugins");
18
18
  var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
- const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
20
+ const releaseInfo = "MTc0NjY1NTIwMDAwMA==";
21
21
  const packageIdentifier = 'x-charts-pro';
22
22
  /**
23
23
  * Orchestrates the data providers for the chart components and hooks.
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Renders the zoom slider for all x and y axes that have it enabled.
4
+ */
5
+ export declare function ChartZoomSlider(): React.JSX.Element;
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ChartZoomSlider = ChartZoomSlider;
8
+ var React = _interopRequireWildcard(require("react"));
9
+ var _hooks = require("@mui/x-charts/hooks");
10
+ var _ChartAxisZoomSlider = require("./internals/ChartAxisZoomSlider");
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ /**
13
+ * Renders the zoom slider for all x and y axes that have it enabled.
14
+ */
15
+ function ChartZoomSlider() {
16
+ const {
17
+ xAxisIds,
18
+ xAxis: xAxes
19
+ } = (0, _hooks.useXAxes)();
20
+ const {
21
+ yAxisIds,
22
+ yAxis: yAxes
23
+ } = (0, _hooks.useYAxes)();
24
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
25
+ children: [xAxisIds.map(axisId => {
26
+ const xAxis = xAxes[axisId];
27
+ const slider = xAxis.zoom?.slider;
28
+ if (!slider?.enabled) {
29
+ return null;
30
+ }
31
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSlider.ChartAxisZoomSlider, {
32
+ axisId: axisId,
33
+ axisDirection: "x"
34
+ }, axisId);
35
+ }), yAxisIds.map(axisId => {
36
+ const yAxis = yAxes[axisId];
37
+ const slider = yAxis.zoom?.slider;
38
+ if (!slider?.enabled) {
39
+ return null;
40
+ }
41
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSlider.ChartAxisZoomSlider, {
42
+ axisId: axisId,
43
+ axisDirection: "y"
44
+ }, axisId);
45
+ })]
46
+ });
47
+ }
@@ -0,0 +1,2 @@
1
+ export * from "./ChartZoomSlider.js";
2
+ export { type ChartAxisZoomSliderHandleClasses, type ChartAxisZoomSliderHandleClassKey, chartAxisZoomSliderHandleClasses } from "./internals/chartAxisZoomSliderHandleClasses.js";
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _exportNames = {
7
+ chartAxisZoomSliderHandleClasses: true
8
+ };
9
+ Object.defineProperty(exports, "chartAxisZoomSliderHandleClasses", {
10
+ enumerable: true,
11
+ get: function () {
12
+ return _chartAxisZoomSliderHandleClasses.chartAxisZoomSliderHandleClasses;
13
+ }
14
+ });
15
+ var _ChartZoomSlider = require("./ChartZoomSlider");
16
+ Object.keys(_ChartZoomSlider).forEach(function (key) {
17
+ if (key === "default" || key === "__esModule") return;
18
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
19
+ if (key in exports && exports[key] === _ChartZoomSlider[key]) return;
20
+ Object.defineProperty(exports, key, {
21
+ enumerable: true,
22
+ get: function () {
23
+ return _ChartZoomSlider[key];
24
+ }
25
+ });
26
+ });
27
+ var _chartAxisZoomSliderHandleClasses = require("./internals/chartAxisZoomSliderHandleClasses");
@@ -0,0 +1,23 @@
1
+ import * as React from 'react';
2
+ import { AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
3
+ interface ChartZoomSliderProps {
4
+ /**
5
+ * The ID of the axis this overview refers to.
6
+ */
7
+ axisId: AxisId;
8
+ /**
9
+ * The direction of the axis.
10
+ */
11
+ axisDirection: 'x' | 'y';
12
+ }
13
+ /**
14
+ * Renders the zoom slider for a specific axis.
15
+ * @internal
16
+ */
17
+ export declare function ChartAxisZoomSlider({
18
+ axisDirection,
19
+ axisId
20
+ }: ChartZoomSliderProps): React.JSX.Element | null;
21
+ export declare function calculateZoomStart(newStart: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'minStart' | 'minSpan' | 'maxSpan'>): number;
22
+ export declare function calculateZoomEnd(newEnd: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'maxEnd' | 'minSpan' | 'maxSpan'>): number;
23
+ export {};