@mui/x-charts 7.3.1 → 7.4.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 (147) hide show
  1. package/BarChart/BarChart.d.ts +4 -3
  2. package/BarChart/BarChart.js +22 -6
  3. package/BarChart/BarClipPath.d.ts +14 -0
  4. package/BarChart/BarClipPath.js +50 -0
  5. package/BarChart/BarPlot.d.ts +4 -0
  6. package/BarChart/BarPlot.js +108 -36
  7. package/BarChart/getRadius.d.ts +15 -0
  8. package/BarChart/getRadius.js +37 -0
  9. package/BarChart/types.d.ts +25 -0
  10. package/BarChart/types.js +5 -0
  11. package/CHANGELOG.md +141 -5
  12. package/ChartsAxis/axisClasses.d.ts +1 -1
  13. package/ChartsGrid/ChartsGrid.js +22 -11
  14. package/ChartsOverlay/ChartsLoadingOverlay.d.ts +3 -0
  15. package/ChartsOverlay/ChartsLoadingOverlay.js +43 -0
  16. package/ChartsOverlay/ChartsNoDataOverlay.d.ts +3 -0
  17. package/ChartsOverlay/ChartsNoDataOverlay.js +43 -0
  18. package/ChartsOverlay/ChartsOverlay.d.ts +35 -0
  19. package/ChartsOverlay/ChartsOverlay.js +41 -0
  20. package/ChartsOverlay/index.d.ts +3 -0
  21. package/ChartsOverlay/index.js +26 -0
  22. package/ChartsOverlay/package.json +6 -0
  23. package/ChartsReferenceLine/ChartsReferenceLine.js +1 -1
  24. package/ChartsReferenceLine/common.d.ts +1 -1
  25. package/ChartsTooltip/ChartsAxisTooltipContent.d.ts +1 -1
  26. package/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
  27. package/ChartsTooltip/ChartsTooltip.d.ts +2 -2
  28. package/ChartsTooltip/ChartsTooltip.js +2 -2
  29. package/ChartsTooltip/DefaultChartsAxisTooltipContent.js +1 -1
  30. package/ChartsXAxis/ChartsXAxis.d.ts +1 -1
  31. package/ChartsXAxis/ChartsXAxis.js +7 -0
  32. package/ChartsYAxis/ChartsYAxis.d.ts +1 -1
  33. package/ChartsYAxis/ChartsYAxis.js +7 -0
  34. package/Gauge/Gauge.js +1 -1
  35. package/Gauge/GaugeContainer.js +1 -1
  36. package/Gauge/GaugeProvider.d.ts +2 -2
  37. package/Gauge/GaugeProvider.js +1 -1
  38. package/Gauge/gaugeClasses.d.ts +2 -2
  39. package/Gauge/utils.d.ts +1 -1
  40. package/Gauge/utils.js +4 -4
  41. package/LineChart/AreaElement.d.ts +1 -1
  42. package/LineChart/LineChart.d.ts +4 -3
  43. package/LineChart/LineChart.js +12 -2
  44. package/LineChart/LineElement.d.ts +1 -1
  45. package/LineChart/MarkElement.d.ts +1 -1
  46. package/PieChart/PieArc.d.ts +1 -1
  47. package/PieChart/PieArcLabel.d.ts +1 -1
  48. package/PieChart/PieArcLabel.js +1 -1
  49. package/PieChart/PieArcLabelPlot.d.ts +1 -1
  50. package/PieChart/PieArcLabelPlot.js +3 -3
  51. package/PieChart/PieArcPlot.d.ts +1 -1
  52. package/PieChart/PieArcPlot.js +3 -3
  53. package/PieChart/PieChart.d.ts +4 -3
  54. package/PieChart/PieChart.js +15 -2
  55. package/ScatterChart/ScatterChart.d.ts +4 -3
  56. package/ScatterChart/ScatterChart.js +12 -2
  57. package/context/SeriesContextProvider.js +1 -1
  58. package/esm/BarChart/BarChart.js +22 -6
  59. package/esm/BarChart/BarClipPath.js +42 -0
  60. package/esm/BarChart/BarPlot.js +109 -37
  61. package/esm/BarChart/getRadius.js +30 -0
  62. package/esm/BarChart/types.js +1 -0
  63. package/esm/ChartsGrid/ChartsGrid.js +23 -12
  64. package/esm/ChartsOverlay/ChartsLoadingOverlay.js +34 -0
  65. package/esm/ChartsOverlay/ChartsNoDataOverlay.js +34 -0
  66. package/esm/ChartsOverlay/ChartsOverlay.js +31 -0
  67. package/esm/ChartsOverlay/index.js +3 -0
  68. package/esm/ChartsReferenceLine/ChartsReferenceLine.js +1 -1
  69. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
  70. package/esm/ChartsTooltip/ChartsTooltip.js +2 -2
  71. package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js +1 -1
  72. package/esm/ChartsXAxis/ChartsXAxis.js +7 -0
  73. package/esm/ChartsYAxis/ChartsYAxis.js +7 -0
  74. package/esm/Gauge/Gauge.js +1 -1
  75. package/esm/Gauge/GaugeContainer.js +1 -1
  76. package/esm/Gauge/GaugeProvider.js +1 -1
  77. package/esm/Gauge/utils.js +4 -4
  78. package/esm/LineChart/LineChart.js +12 -2
  79. package/esm/PieChart/PieArcLabel.js +1 -1
  80. package/esm/PieChart/PieArcLabelPlot.js +3 -3
  81. package/esm/PieChart/PieArcPlot.js +3 -3
  82. package/esm/PieChart/PieChart.js +15 -2
  83. package/esm/ScatterChart/ScatterChart.js +12 -2
  84. package/esm/context/SeriesContextProvider.js +1 -1
  85. package/esm/hooks/useReducedMotion.js +1 -1
  86. package/esm/hooks/useScale.js +1 -1
  87. package/esm/hooks/useTicks.js +4 -0
  88. package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +5 -5
  89. package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js +3 -3
  90. package/esm/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js +3 -3
  91. package/esm/internals/utils.js +1 -1
  92. package/hooks/useReducedMotion.d.ts +1 -1
  93. package/hooks/useReducedMotion.js +1 -1
  94. package/hooks/useScale.d.ts +4 -4
  95. package/hooks/useScale.js +1 -1
  96. package/hooks/useTicks.js +4 -0
  97. package/index.js +1 -1
  98. package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +5 -5
  99. package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts +1 -1
  100. package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js +3 -3
  101. package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts +1 -1
  102. package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js +3 -3
  103. package/internals/utils.d.ts +1 -1
  104. package/internals/utils.js +1 -1
  105. package/models/axis.d.ts +1 -1
  106. package/models/seriesType/bar.d.ts +1 -1
  107. package/models/seriesType/line.d.ts +1 -1
  108. package/models/seriesType/pie.d.ts +4 -4
  109. package/modern/BarChart/BarChart.js +22 -6
  110. package/modern/BarChart/BarClipPath.js +42 -0
  111. package/modern/BarChart/BarPlot.js +109 -37
  112. package/modern/BarChart/getRadius.js +30 -0
  113. package/modern/BarChart/types.js +1 -0
  114. package/modern/ChartsGrid/ChartsGrid.js +23 -12
  115. package/modern/ChartsOverlay/ChartsLoadingOverlay.js +34 -0
  116. package/modern/ChartsOverlay/ChartsNoDataOverlay.js +34 -0
  117. package/modern/ChartsOverlay/ChartsOverlay.js +31 -0
  118. package/modern/ChartsOverlay/index.js +3 -0
  119. package/modern/ChartsReferenceLine/ChartsReferenceLine.js +1 -1
  120. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +1 -1
  121. package/modern/ChartsTooltip/ChartsTooltip.js +2 -2
  122. package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js +1 -1
  123. package/modern/ChartsXAxis/ChartsXAxis.js +7 -0
  124. package/modern/ChartsYAxis/ChartsYAxis.js +7 -0
  125. package/modern/Gauge/Gauge.js +1 -1
  126. package/modern/Gauge/GaugeContainer.js +1 -1
  127. package/modern/Gauge/GaugeProvider.js +1 -1
  128. package/modern/Gauge/utils.js +4 -4
  129. package/modern/LineChart/LineChart.js +12 -2
  130. package/modern/PieChart/PieArcLabel.js +1 -1
  131. package/modern/PieChart/PieArcLabelPlot.js +3 -3
  132. package/modern/PieChart/PieArcPlot.js +3 -3
  133. package/modern/PieChart/PieChart.js +15 -2
  134. package/modern/ScatterChart/ScatterChart.js +12 -2
  135. package/modern/context/SeriesContextProvider.js +1 -1
  136. package/modern/hooks/useReducedMotion.js +1 -1
  137. package/modern/hooks/useScale.js +1 -1
  138. package/modern/hooks/useTicks.js +4 -0
  139. package/modern/index.js +1 -1
  140. package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +5 -5
  141. package/modern/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js +3 -3
  142. package/modern/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js +3 -3
  143. package/modern/internals/utils.js +1 -1
  144. package/package.json +2 -2
  145. package/themeAugmentation/components.d.ts +4 -0
  146. package/themeAugmentation/overrides.d.ts +2 -0
  147. package/themeAugmentation/props.d.ts +2 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,142 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 7.4.0
7
+
8
+ _May 10, 2024_
9
+
10
+ We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
11
+
12
+ - ✨ Add optional `id` attribute on shortcut items of the Date and Time Pickers
13
+ - 🎁 Add support for `date-fns-jalali` v3 in the Date and Time Pickers
14
+ - 🚀 Support rounded corners on `BarChart`
15
+ - 🌍 Add accessibility page to TreeView docs
16
+ - 🐞 Bugfixes
17
+ - 📚 Documentation improvements
18
+
19
+ ### Data Grid
20
+
21
+ #### `@mui/x-data-grid@7.4.0`
22
+
23
+ - [DataGrid] Fix error when focus moves from column header to `svg` element (#13028) @oukunan
24
+ - [DataGrid] Fix error on column groups change (#12965) @romgrk
25
+
26
+ #### `@mui/x-data-grid-pro@7.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
27
+
28
+ Same changes as in `@mui/x-data-grid@7.4.0`.
29
+
30
+ #### `@mui/x-data-grid-premium@7.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
31
+
32
+ Same changes as in `@mui/x-data-grid-pro@7.4.0`.
33
+
34
+ ### Date and Time Pickers
35
+
36
+ #### `@mui/x-date-pickers@7.4.0`
37
+
38
+ - [fields] Fix regression preventing form submit on "Enter" click (#13065) @LukasTy
39
+ - [pickers] Add `AdapterDateFnsJalaliV3` adapter (#12891) @smmoosavi
40
+ - [pickers] Add optional `id` attribute on shortcut items (#12976) @noraleonte
41
+
42
+ #### `@mui/x-date-pickers-pro@7.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
43
+
44
+ Same changes as in `@mui/x-date-pickers@7.4.0`.
45
+
46
+ ### Charts
47
+
48
+ #### `@mui/x-charts@7.4.0`
49
+
50
+ - [charts] Add `ChartsGrid` to `themeAugmentation` (#13026) @noraleonte
51
+ - [charts] Support rounded corners on `BarChart` (#12834) @JCQuintas
52
+
53
+ ### Tree View
54
+
55
+ #### `@mui/x-tree-view@7.4.0`
56
+
57
+ - [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle
58
+
59
+ ### Docs
60
+
61
+ - [docs] Add accessibility page to TreeView docs (#12845) @noraleonte
62
+ - [docs] Fix Charts styling typos (#13061) @oliviertassinari
63
+ - [docs] Fix legal link to EULA free trial (#13013) @oliviertassinari
64
+ - [docs] Update interface name in pinned columns docs (#13070) @cherniavskii
65
+
66
+ ### Core
67
+
68
+ - [core] Improve release process docs (#12977) @JCQuintas
69
+ - [core] Prepare React 19 (#12991) @oliviertassinari
70
+ - [docs-infra] Fix Netlify PR preview path (#12993) @oliviertassinari
71
+ - [infra] Automation: Add release PR reviewers (#12982) @michelengelen
72
+
73
+ ## 7.3.2
74
+
75
+ _May 2, 2024_
76
+
77
+ We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
78
+
79
+ - 🎁 Add "no data" and "loading" states to charts, allowing users to create [custom visualizations for each state](https://mui.com/x/react-charts/styling/#overlay)
80
+ - 🌍 Improve Hebrew (he-IL) and Hungarian (hu-HU) locales on the Date and Time Pickers
81
+ - 🌍 Improve Danish (da-DK) and Slovak (sk-SK) locales on the Data Grid
82
+ - 📝 Fix a [typo](https://github.com/mui/mui-x/pull/12941/files/4bf4bffbc2799a01a96bc7458a17318cf41c1722#diff-26c31cc69d6f51110f89e339578ef9b3d4a3551f79077fff73f7babb81c5099f) in the auto-generated Charts gradient `id` attribute.
83
+ It should not affect you, but if you were relying on the gradient `id` attribute, please update your usage.
84
+ - 🐞 Bugfixes
85
+ - 📚 Documentation improvements
86
+
87
+ ### Data Grid
88
+
89
+ #### `@mui/x-data-grid@7.3.2`
90
+
91
+ - [DataGrid] Allow to change reset text in the columns management panel (#12972) @MBilalShafi
92
+ - [DataGrid] Derive `formattedValue` from the edit value when passing to `renderEditCell` (#12870) @cherniavskii
93
+ - [DataGrid] Fix rows not being recomputed on `props.rowCount` change (#12833) @MBilalShafi
94
+ - [l10n] Improve Danish (da-DK) locale (#12844) @fosterbuster
95
+ - [l10n] Improve Slovak (sk-SK) locale (#12949) @stefikp
96
+
97
+ #### `@mui/x-data-grid-pro@7.3.2` [![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-data-grid@7.3.2`.
100
+
101
+ #### `@mui/x-data-grid-premium@7.3.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
102
+
103
+ Same changes as in `@mui/x-data-grid-pro@7.3.2`, plus:
104
+
105
+ - [DataGridPremium] Fix print export not working with row grouping (#12957) @MBilalShafi
106
+
107
+ ### Date and Time Pickers
108
+
109
+ #### `@mui/x-date-pickers@7.3.2`
110
+
111
+ - [l10n] Improve Hebrew (he-IL) locale (#12910) @michaelNXT1
112
+ - [l10n] Improve Hungarian (hu-HU) locale (#12930) @noherczeg
113
+ - [pickers] Fix typo on the `viewRenderers` prop description (#12915) @flaviendelangle
114
+ - [pickers] Improve TypeScript performance in `PickersDay` (#12920) @flaviendelangle
115
+
116
+ #### `@mui/x-date-pickers-pro@7.3.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
117
+
118
+ Same changes as in `@mui/x-date-pickers@7.3.2`.
119
+
120
+ ### Charts
121
+
122
+ #### `@mui/x-charts@7.3.2`
123
+
124
+ - [charts] Add an overlay for "no data" or "loading" states (#12817) @alexfauquette
125
+ - [charts] Fix typos in documentation, translations and errors (#12941) @JCQuintas
126
+ - [charts] Fix `prop.slots` and `prop.slotProps` not passed to `<ChartsTooltip />` (#12939) @JCQuintas
127
+
128
+ ### Docs
129
+
130
+ - [docs] Improve Data Grid migration guide (#12969) @MBilalShafi
131
+ - [docs] Polish references to the plans (#12922) @oliviertassinari
132
+
133
+ ### Core
134
+
135
+ - [core] Fix dependencies (#12951) @LukasTy
136
+ - [core] Remove inconsistent blank lines (#12966) @oliviertassinari
137
+ - [code-infra] Bump node image used by CI in docker (#12961) @LukasTy
138
+ - [docs-infra] Remove no longer needed `next.config` settings (#12861) @oliviertassinari
139
+ - [docs-infra] Use the `@mui/docs/HighlightedCode` (#12848) @alexfauquette
140
+ - [test] Restore `t` command (#12948) @LukasTy
141
+
6
142
  ## 7.3.1
7
143
 
8
144
  _Apr 26, 2024_
@@ -305,7 +441,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
305
441
 
306
442
  - [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle
307
443
  - [TreeView] Create `RichTreeViewPro` component (not released yet) (#12610) @flaviendelangle
308
- - [TreeView] Create pro package (not released yet) (#12240) @flaviendelangle
444
+ - [TreeView] Create Pro package (not released yet) (#12240) @flaviendelangle
309
445
  - [TreeView] Fix typo in errors (#12623) @alissa-tung
310
446
  - [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle
311
447
 
@@ -2517,7 +2653,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
2517
2653
  - [core] Make `@mui/system` a direct dependency (#11128) @LukasTy
2518
2654
  - [core] Remove blank lines, coding style @oliviertassinari
2519
2655
  - [core] Remove outdated `ENABLE_AD` env variable (#11181) @oliviertassinari
2520
- - [github] Do not add `plan: Pro` and `plan: Premium` labels on pro / premium issue templates (#10183) @flaviendelangle
2656
+ - [github] Do not add `plan: Pro` and `plan: Premium` labels on Pro / Premium issue templates (#10183) @flaviendelangle
2521
2657
 
2522
2658
  ## 7.0.0-alpha.2
2523
2659
 
@@ -3440,10 +3576,10 @@ Same changes as in `@mui/x-date-pickers@6.19.5`.
3440
3576
  - [docs] Fix the Treemap illustration (#12189) @danilo-leal
3441
3577
  - [docs] Fix typo for `AdapterDateFnsV3` (#12037) @flaviendelangle
3442
3578
  - [docs] Improve performance on Charts entry point @oliviertassinari
3443
- - [docs] Move Heatmap to pro (#12170) @alexfauquette
3579
+ - [docs] Move Heatmap to Pro (#12170) @alexfauquette
3444
3580
  - [docs] Remove Charts installation next tag call-out (#12133) @LukasTy
3445
3581
  - [docs] Removed `focused` prop from demo (#12126) @michelengelen
3446
- - [docs] Add missing Heatmap pro icon @oliviertassinari
3582
+ - [docs] Add missing Heatmap Pro icon @oliviertassinari
3447
3583
  - [docs] Add more illustrations to the Overview page (#12041) @danilo-leal
3448
3584
  - [docs] Avoid use of shorthand (#12009) @oliviertassinari
3449
3585
 
@@ -6170,7 +6306,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
6170
6306
  - [docs] Create examples of pickers with custom fields (#8034) @flaviendelangle
6171
6307
  - [docs] Fix 301 redirections @oliviertassinari
6172
6308
  - [docs] Fix link to React's docs @oliviertassinari
6173
- - [docs] Fix pro license links to point to the same page (#8303) @LukasTy
6309
+ - [docs] Fix Pro license links to point to the same page (#8303) @LukasTy
6174
6310
  - [docs] Give an incentive to upgrade (#8269) @oliviertassinari
6175
6311
  - [docs] Improve contrast on data grid navigation (#8239) @oliviertassinari
6176
6312
  - [docs] Update shortcuts page to use slotProps (#8288) @dcorb
@@ -3,7 +3,7 @@ export interface ChartsAxisClasses {
3
3
  root: string;
4
4
  /** Styles applied to the main line element. */
5
5
  line: string;
6
- /** Styles applied to group ingruding the tick and its label. */
6
+ /** Styles applied to group including the tick and its label. */
7
7
  tickContainer: string;
8
8
  /** Styles applied to ticks. */
9
9
  tick: string;
@@ -21,15 +21,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
21
21
  const GridRoot = (0, _styles.styled)('g', {
22
22
  name: 'MuiChartsGrid',
23
23
  slot: 'Root',
24
- overridesResolver: (props, styles) => styles.root
24
+ overridesResolver: (props, styles) => [{
25
+ [`&.${_chartsGridClasses.chartsGridClasses.verticalLine}`]: styles.verticalLine
26
+ }, {
27
+ [`&.${_chartsGridClasses.chartsGridClasses.horizontalLine}`]: styles.horizontalLine
28
+ }, styles.root]
29
+ })({});
30
+ const GridLine = (0, _styles.styled)('line', {
31
+ name: 'MuiChartsGrid',
32
+ slot: 'Line',
33
+ overridesResolver: (props, styles) => styles.line
25
34
  })(({
26
35
  theme
27
36
  }) => ({
28
- [`& .${_chartsGridClasses.chartsGridClasses.line}`]: {
29
- stroke: (theme.vars || theme).palette.divider,
30
- shapeRendering: 'crispEdges',
31
- strokeWidth: 1
32
- }
37
+ stroke: (theme.vars || theme).palette.divider,
38
+ shapeRendering: 'crispEdges',
39
+ strokeWidth: 1
33
40
  }));
34
41
  const useUtilityClasses = ({
35
42
  classes
@@ -51,18 +58,22 @@ const useUtilityClasses = ({
51
58
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
52
59
  */
53
60
  function ChartsGrid(props) {
61
+ const themeProps = (0, _styles.useThemeProps)({
62
+ props,
63
+ name: 'MuiChartsGrid'
64
+ });
54
65
  const {
55
66
  vertical,
56
67
  horizontal
57
- } = props,
58
- other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
68
+ } = themeProps,
69
+ other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
59
70
  const {
60
71
  xAxis,
61
72
  xAxisIds,
62
73
  yAxis,
63
74
  yAxisIds
64
75
  } = React.useContext(_CartesianContextProvider.CartesianContext);
65
- const classes = useUtilityClasses(props);
76
+ const classes = useUtilityClasses(themeProps);
66
77
  const horizontalAxisId = yAxisIds[0];
67
78
  const verticalAxisId = xAxisIds[0];
68
79
  const {
@@ -90,7 +101,7 @@ function ChartsGrid(props) {
90
101
  children: [vertical && xTicks.map(({
91
102
  formattedValue,
92
103
  offset
93
- }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
104
+ }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLine, {
94
105
  y1: yScale.range()[0],
95
106
  y2: yScale.range()[1],
96
107
  x1: offset,
@@ -99,7 +110,7 @@ function ChartsGrid(props) {
99
110
  }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
100
111
  formattedValue,
101
112
  offset
102
- }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
113
+ }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLine, {
103
114
  y1: offset,
104
115
  y2: offset,
105
116
  x1: xScale.range()[0],
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ import type { CommonOverlayProps } from './ChartsOverlay';
3
+ export declare function ChartsLoadingOverlay(props: CommonOverlayProps): React.JSX.Element;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _styles = require("@mui/material/styles");
12
+ var _useDrawingArea = require("../hooks/useDrawingArea");
13
+ var _jsxRuntime = require("react/jsx-runtime");
14
+ const _excluded = ["message"];
15
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
+ const StyledText = (0, _styles.styled)('text')(({
18
+ theme
19
+ }) => ({
20
+ stroke: 'none',
21
+ fill: theme.palette.text.primary,
22
+ shapeRendering: 'crispEdges',
23
+ textAnchor: 'middle',
24
+ dominantBaseline: 'middle'
25
+ }));
26
+ function ChartsLoadingOverlay(props) {
27
+ const {
28
+ message
29
+ } = props,
30
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
31
+ const {
32
+ top,
33
+ left,
34
+ height,
35
+ width
36
+ } = (0, _useDrawingArea.useDrawingArea)();
37
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, (0, _extends2.default)({
38
+ x: left + width / 2,
39
+ y: top + height / 2
40
+ }, other, {
41
+ children: message ?? 'Loading data ...'
42
+ }));
43
+ }
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ import type { CommonOverlayProps } from './ChartsOverlay';
3
+ export declare function ChartsNoDataOverlay(props: CommonOverlayProps): React.JSX.Element;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _styles = require("@mui/material/styles");
12
+ var _useDrawingArea = require("../hooks/useDrawingArea");
13
+ var _jsxRuntime = require("react/jsx-runtime");
14
+ const _excluded = ["message"];
15
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
+ const StyledText = (0, _styles.styled)('text')(({
18
+ theme
19
+ }) => ({
20
+ stroke: 'none',
21
+ fill: theme.palette.text.primary,
22
+ shapeRendering: 'crispEdges',
23
+ textAnchor: 'middle',
24
+ dominantBaseline: 'middle'
25
+ }));
26
+ function ChartsNoDataOverlay(props) {
27
+ const {
28
+ message
29
+ } = props,
30
+ other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
31
+ const {
32
+ top,
33
+ left,
34
+ height,
35
+ width
36
+ } = (0, _useDrawingArea.useDrawingArea)();
37
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, (0, _extends2.default)({
38
+ x: left + width / 2,
39
+ y: top + height / 2
40
+ }, other, {
41
+ children: message ?? 'No data to display'
42
+ }));
43
+ }
@@ -0,0 +1,35 @@
1
+ import * as React from 'react';
2
+ import { SxProps, Theme } from '@mui/material/styles';
3
+ export declare function useNoData(): boolean;
4
+ export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
5
+ /**
6
+ * The message displayed by the overlay.
7
+ */
8
+ message?: string;
9
+ sx?: SxProps<Theme>;
10
+ };
11
+ export interface ChartsOverlaySlots {
12
+ /**
13
+ * Overlay component rendered when the chart is in a loading state.
14
+ * @default ChartsLoadingOverlay
15
+ */
16
+ loadingOverlay?: React.ElementType<CommonOverlayProps>;
17
+ /**
18
+ * Overlay component rendered when the chart has no data to display.
19
+ * @default ChartsNoDataOverlay
20
+ */
21
+ noDataOverlay?: React.ElementType<CommonOverlayProps>;
22
+ }
23
+ export interface ChartsOverlaySlotProps {
24
+ loadingOverlay?: Partial<CommonOverlayProps>;
25
+ noDataOverlay?: Partial<CommonOverlayProps>;
26
+ }
27
+ export interface ChartsOverlayProps {
28
+ /**
29
+ * If `true`, a loading overlay is displayed.
30
+ */
31
+ loading?: boolean;
32
+ slots?: ChartsOverlaySlots;
33
+ slotProps?: ChartsOverlaySlotProps;
34
+ }
35
+ export declare function ChartsOverlay(props: ChartsOverlayProps): React.JSX.Element | null;
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ChartsOverlay = ChartsOverlay;
8
+ exports.useNoData = useNoData;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _ChartsLoadingOverlay = require("./ChartsLoadingOverlay");
12
+ var _useSeries = require("../hooks/useSeries");
13
+ var _ChartsNoDataOverlay = require("./ChartsNoDataOverlay");
14
+ var _jsxRuntime = require("react/jsx-runtime");
15
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
+ function useNoData() {
18
+ const seriesPerType = (0, _useSeries.useSeries)();
19
+ return Object.values(seriesPerType).every(seriesOfGivenType => {
20
+ if (!seriesOfGivenType) {
21
+ return true;
22
+ }
23
+ const {
24
+ series,
25
+ seriesOrder
26
+ } = seriesOfGivenType;
27
+ return seriesOrder.every(seriesId => series[seriesId].data.length === 0);
28
+ });
29
+ }
30
+ function ChartsOverlay(props) {
31
+ const noData = useNoData();
32
+ if (props.loading) {
33
+ const LoadingOverlay = props.slots?.loadingOverlay ?? _ChartsLoadingOverlay.ChartsLoadingOverlay;
34
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingOverlay, (0, _extends2.default)({}, props.slotProps?.loadingOverlay));
35
+ }
36
+ if (noData) {
37
+ const NoDataOverlay = props.slots?.noDataOverlay ?? _ChartsNoDataOverlay.ChartsNoDataOverlay;
38
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(NoDataOverlay, (0, _extends2.default)({}, props.slotProps?.noDataOverlay));
39
+ }
40
+ return null;
41
+ }
@@ -0,0 +1,3 @@
1
+ export { ChartsOverlay } from './ChartsOverlay';
2
+ export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
3
+ export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "ChartsLoadingOverlay", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _ChartsLoadingOverlay.ChartsLoadingOverlay;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "ChartsNoDataOverlay", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _ChartsNoDataOverlay.ChartsNoDataOverlay;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "ChartsOverlay", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _ChartsOverlay.ChartsOverlay;
22
+ }
23
+ });
24
+ var _ChartsOverlay = require("./ChartsOverlay");
25
+ var _ChartsLoadingOverlay = require("./ChartsLoadingOverlay");
26
+ var _ChartsNoDataOverlay = require("./ChartsNoDataOverlay");
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "../esm/ChartsOverlay/index.js",
4
+ "main": "./index.js",
5
+ "types": "./index.d.ts"
6
+ }
@@ -61,7 +61,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
61
61
  */
62
62
  lineStyle: _propTypes.default.object,
63
63
  /**
64
- * Additional space arround the label in px.
64
+ * Additional space around the label in px.
65
65
  * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
66
66
  * @default 5
67
67
  */
@@ -13,7 +13,7 @@ export type CommonChartsReferenceLineProps = {
13
13
  */
14
14
  label?: string;
15
15
  /**
16
- * Additional space arround the label in px.
16
+ * Additional space around the label in px.
17
17
  * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
18
18
  * @default 5
19
19
  */
@@ -27,7 +27,7 @@ export type ChartsAxisContentProps = {
27
27
  /**
28
28
  * The value associated to the current mouse position.
29
29
  */
30
- axisValue: any;
30
+ axisValue: string | number | Date | null;
31
31
  /**
32
32
  * Override or extend the styles applied to the component.
33
33
  */
@@ -115,7 +115,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
115
115
  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired
116
116
  })
117
117
  }),
118
- axisValue: _propTypes.default.any,
118
+ axisValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
119
119
  classes: _propTypes.default.object,
120
120
  dataIndex: _propTypes.default.number,
121
121
  series: _propTypes.default.arrayOf(_propTypes.default.object),
@@ -43,12 +43,12 @@ export type ChartsTooltipProps = {
43
43
  */
44
44
  trigger?: TriggerOptions;
45
45
  /**
46
- * Component to override the tooltip content when triger is set to 'item'.
46
+ * Component to override the tooltip content when trigger is set to 'item'.
47
47
  * @deprecated Use slots.itemContent instead
48
48
  */
49
49
  itemContent?: React.ElementType<ChartsItemContentProps<any>>;
50
50
  /**
51
- * Component to override the tooltip content when triger is set to 'axis'.
51
+ * Component to override the tooltip content when trigger is set to 'axis'.
52
52
  * @deprecated Use slots.axisContent instead
53
53
  */
54
54
  axisContent?: React.ElementType<ChartsAxisContentProps>;
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
122
122
  // | To update them edit the TypeScript types and run "yarn proptypes" |
123
123
  // ----------------------------------------------------------------------
124
124
  /**
125
- * Component to override the tooltip content when triger is set to 'axis'.
125
+ * Component to override the tooltip content when trigger is set to 'axis'.
126
126
  * @deprecated Use slots.axisContent instead
127
127
  */
128
128
  axisContent: _propTypes.default.elementType,
@@ -131,7 +131,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
131
131
  */
132
132
  classes: _propTypes.default.object,
133
133
  /**
134
- * Component to override the tooltip content when triger is set to 'item'.
134
+ * Component to override the tooltip content when trigger is set to 'item'.
135
135
  * @deprecated Use slots.itemContent instead
136
136
  */
137
137
  itemContent: _propTypes.default.elementType,
@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
109
109
  /**
110
110
  * The value associated to the current mouse position.
111
111
  */
112
- axisValue: _propTypes.default.any.isRequired,
112
+ axisValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
113
113
  /**
114
114
  * Override or extend the styles applied to the component.
115
115
  */
@@ -9,7 +9,7 @@ import { ChartsXAxisProps } from '../models/axis';
9
9
  *
10
10
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
11
11
  */
12
- declare function ChartsXAxis(inProps: ChartsXAxisProps): React.JSX.Element;
12
+ declare function ChartsXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
13
13
  declare namespace ChartsXAxis {
14
14
  var propTypes: any;
15
15
  }
@@ -212,6 +212,13 @@ function ChartsXAxis(inProps) {
212
212
  },
213
213
  ownerState: {}
214
214
  });
215
+ const domain = xScale.domain();
216
+ if (domain.length === 0 || domain[0] === domain[1]) {
217
+ // Skip axis rendering if
218
+ // - the data is empty (for band and point axis)
219
+ // - No data is associated to the axis (other scale types)
220
+ return null;
221
+ }
215
222
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
216
223
  transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
217
224
  className: classes.root,
@@ -9,7 +9,7 @@ import { ChartsYAxisProps } from '../models/axis';
9
9
  *
10
10
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
11
11
  */
12
- declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element;
12
+ declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
13
13
  declare namespace ChartsYAxis {
14
14
  var propTypes: any;
15
15
  }
@@ -147,6 +147,13 @@ function ChartsYAxis(inProps) {
147
147
  },
148
148
  ownerState: {}
149
149
  });
150
+ const domain = yScale.domain();
151
+ if (domain.length === 0 || domain[0] === domain[1]) {
152
+ // Skip axis rendering if
153
+ // - the data is empty (for band and point axis)
154
+ // - No data is associated to the axis (other scale types)
155
+ return null;
156
+ }
150
157
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
151
158
  transform: `translate(${position === 'right' ? left + width : left}, 0)`,
152
159
  className: classes.root,
package/Gauge/Gauge.js CHANGED
@@ -93,7 +93,7 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
93
93
  */
94
94
  height: _propTypes.default.number,
95
95
  /**
96
- * The radius between circle center and the begining of the arc.
96
+ * The radius between circle center and the beginning of the arc.
97
97
  * Can be a number (in px) or a string with a percentage such as '50%'.
98
98
  * The '100%' is the maximal radius that fit into the drawing area.
99
99
  * @default '80%'
@@ -154,7 +154,7 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
154
154
  */
155
155
  height: _propTypes.default.number,
156
156
  /**
157
- * The radius between circle center and the begining of the arc.
157
+ * The radius between circle center and the beginning of the arc.
158
158
  * Can be a number (in px) or a string with a percentage such as '50%'.
159
159
  * The '100%' is the maximal radius that fit into the drawing area.
160
160
  * @default '80%'
@@ -11,7 +11,7 @@ interface CircularConfig {
11
11
  */
12
12
  endAngle?: number;
13
13
  /**
14
- * The radius between circle center and the begining of the arc.
14
+ * The radius between circle center and the beginning of the arc.
15
15
  * Can be a number (in px) or a string with a percentage such as '50%'.
16
16
  * The '100%' is the maximal radius that fit into the drawing area.
17
17
  * @default '80%'
@@ -53,7 +53,7 @@ interface ProcessedCircularConfig {
53
53
  */
54
54
  endAngle: number;
55
55
  /**
56
- * The radius between circle center and the begining of the arc.
56
+ * The radius between circle center and the beginning of the arc.
57
57
  */
58
58
  innerRadius: number;
59
59
  /**