@mui/x-charts 7.0.0-alpha.7 → 7.0.0-alpha.8

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 (121) hide show
  1. package/BarChart/BarChart.js +1 -0
  2. package/BarChart/BarElement.d.ts +37 -20
  3. package/BarChart/BarPlot.js +4 -4
  4. package/BarChart/formatter.js +1 -1
  5. package/CHANGELOG.md +175 -49
  6. package/ChartsAxis/ChartsAxis.js +4 -4
  7. package/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
  8. package/ChartsSurface.d.ts +2 -2
  9. package/ChartsSurface.js +33 -1
  10. package/ChartsTooltip/ChartsTooltipTable.d.ts +1 -1
  11. package/ChartsTooltip/ChartsTooltipTable.js +2 -0
  12. package/LineChart/AreaPlot.js +2 -2
  13. package/LineChart/LineChart.d.ts +1 -0
  14. package/LineChart/LineChart.js +2 -0
  15. package/LineChart/LineHighlightPlot.js +1 -1
  16. package/LineChart/LinePlot.js +2 -2
  17. package/LineChart/MarkPlot.js +1 -1
  18. package/LineChart/formatter.js +1 -1
  19. package/PieChart/PieArcLabelPlot.d.ts +5 -0
  20. package/PieChart/PieArcLabelPlot.js +2 -0
  21. package/PieChart/PieArcPlot.d.ts +5 -0
  22. package/PieChart/PieArcPlot.js +1 -0
  23. package/PieChart/PieChart.d.ts +14 -2
  24. package/PieChart/PieChart.js +3 -2
  25. package/ResponsiveChartContainer/index.js +2 -2
  26. package/ScatterChart/ScatterChart.js +1 -0
  27. package/SparkLineChart/SparkLineChart.d.ts +15 -1
  28. package/SparkLineChart/SparkLineChart.js +8 -1
  29. package/context/CartesianContextProvider.d.ts +1 -1
  30. package/context/CartesianContextProvider.js +9 -8
  31. package/context/DrawingProvider.d.ts +1 -1
  32. package/context/DrawingProvider.js +8 -7
  33. package/context/HighlightProvider.d.ts +2 -2
  34. package/context/HighlightProvider.js +4 -3
  35. package/context/InteractionProvider.d.ts +2 -2
  36. package/context/InteractionProvider.js +4 -3
  37. package/context/SeriesContextProvider.d.ts +3 -1
  38. package/context/SeriesContextProvider.js +8 -7
  39. package/esm/BarChart/BarChart.js +1 -0
  40. package/esm/BarChart/BarPlot.js +4 -4
  41. package/esm/BarChart/formatter.js +1 -1
  42. package/esm/ChartsAxis/ChartsAxis.js +4 -4
  43. package/esm/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
  44. package/esm/ChartsSurface.js +35 -2
  45. package/esm/ChartsTooltip/ChartsTooltipTable.js +2 -0
  46. package/esm/LineChart/AreaPlot.js +2 -2
  47. package/esm/LineChart/LineChart.js +2 -0
  48. package/esm/LineChart/LineHighlightPlot.js +1 -1
  49. package/esm/LineChart/LinePlot.js +2 -2
  50. package/esm/LineChart/MarkPlot.js +1 -1
  51. package/esm/LineChart/formatter.js +1 -1
  52. package/esm/PieChart/PieArcLabelPlot.js +2 -0
  53. package/esm/PieChart/PieArcPlot.js +1 -0
  54. package/esm/PieChart/PieChart.js +3 -2
  55. package/esm/ResponsiveChartContainer/index.js +2 -2
  56. package/esm/ScatterChart/ScatterChart.js +1 -0
  57. package/esm/SparkLineChart/SparkLineChart.js +8 -1
  58. package/esm/context/CartesianContextProvider.js +9 -8
  59. package/esm/context/DrawingProvider.js +8 -7
  60. package/esm/context/HighlightProvider.js +6 -4
  61. package/esm/context/InteractionProvider.js +6 -4
  62. package/esm/context/SeriesContextProvider.js +10 -8
  63. package/esm/index.js +1 -0
  64. package/esm/internals/domUtils.js +3 -1
  65. package/index.d.ts +1 -0
  66. package/index.js +12 -1
  67. package/internals/domUtils.js +3 -1
  68. package/legacy/BarChart/BarChart.js +1 -0
  69. package/legacy/BarChart/BarPlot.js +4 -4
  70. package/legacy/BarChart/formatter.js +1 -1
  71. package/legacy/ChartsAxis/ChartsAxis.js +4 -4
  72. package/legacy/ChartsReferenceLine/ChartsReferenceLine.js +7 -5
  73. package/legacy/ChartsSurface.js +35 -2
  74. package/legacy/ChartsTooltip/ChartsTooltipTable.js +2 -0
  75. package/legacy/LineChart/AreaPlot.js +2 -2
  76. package/legacy/LineChart/LineChart.js +2 -0
  77. package/legacy/LineChart/LineHighlightPlot.js +1 -1
  78. package/legacy/LineChart/LinePlot.js +2 -2
  79. package/legacy/LineChart/MarkPlot.js +1 -1
  80. package/legacy/LineChart/formatter.js +1 -1
  81. package/legacy/PieChart/PieArcLabelPlot.js +2 -0
  82. package/legacy/PieChart/PieArcPlot.js +1 -0
  83. package/legacy/PieChart/PieChart.js +3 -2
  84. package/legacy/ResponsiveChartContainer/index.js +2 -2
  85. package/legacy/ScatterChart/ScatterChart.js +1 -0
  86. package/legacy/SparkLineChart/SparkLineChart.js +8 -1
  87. package/legacy/context/CartesianContextProvider.js +17 -17
  88. package/legacy/context/DrawingProvider.js +6 -6
  89. package/legacy/context/HighlightProvider.js +4 -3
  90. package/legacy/context/InteractionProvider.js +4 -3
  91. package/legacy/context/SeriesContextProvider.js +9 -8
  92. package/legacy/index.js +2 -1
  93. package/legacy/internals/domUtils.js +3 -3
  94. package/models/seriesType/pie.d.ts +1 -0
  95. package/modern/BarChart/BarChart.js +1 -0
  96. package/modern/BarChart/BarPlot.js +4 -4
  97. package/modern/BarChart/formatter.js +1 -1
  98. package/modern/ChartsAxis/ChartsAxis.js +4 -4
  99. package/modern/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
  100. package/modern/ChartsSurface.js +35 -2
  101. package/modern/ChartsTooltip/ChartsTooltipTable.js +2 -0
  102. package/modern/LineChart/AreaPlot.js +2 -2
  103. package/modern/LineChart/LineChart.js +2 -0
  104. package/modern/LineChart/LineHighlightPlot.js +1 -1
  105. package/modern/LineChart/LinePlot.js +2 -2
  106. package/modern/LineChart/MarkPlot.js +1 -1
  107. package/modern/LineChart/formatter.js +1 -1
  108. package/modern/PieChart/PieArcLabelPlot.js +2 -0
  109. package/modern/PieChart/PieArcPlot.js +1 -0
  110. package/modern/PieChart/PieChart.js +3 -2
  111. package/modern/ResponsiveChartContainer/index.js +2 -2
  112. package/modern/ScatterChart/ScatterChart.js +1 -0
  113. package/modern/SparkLineChart/SparkLineChart.js +8 -1
  114. package/modern/context/CartesianContextProvider.js +9 -8
  115. package/modern/context/DrawingProvider.js +8 -7
  116. package/modern/context/HighlightProvider.js +6 -4
  117. package/modern/context/InteractionProvider.js +6 -4
  118. package/modern/context/SeriesContextProvider.js +10 -8
  119. package/modern/index.js +2 -1
  120. package/modern/internals/domUtils.js +3 -1
  121. package/package.json +1 -1
@@ -59,16 +59,16 @@ function ChartsAxis(props) {
59
59
  const topId = getAxisId(topAxis);
60
60
  const rightId = getAxisId(rightAxis);
61
61
  if (topId !== null && !xAxis[topId]) {
62
- throw Error([`MUI-X-Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
62
+ throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
63
63
  }
64
64
  if (leftId !== null && !yAxis[leftId]) {
65
- throw Error([`MUI-X-Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
65
+ throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
66
66
  }
67
67
  if (rightId !== null && !yAxis[rightId]) {
68
- throw Error([`MUI-X-Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
68
+ throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
69
69
  }
70
70
  if (bottomId !== null && !xAxis[bottomId]) {
71
- throw Error([`MUI-X-Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
71
+ throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
72
72
  }
73
73
  const topAxisProps = mergeProps(topAxis, slots, slotProps);
74
74
  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
@@ -5,13 +5,17 @@ import { ChartsXReferenceLine } from './ChartsXReferenceLine';
5
5
  import { ChartsYReferenceLine } from './ChartsYReferenceLine';
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  function ChartsReferenceLine(props) {
8
- if (props.x !== undefined && props.y !== undefined) {
9
- throw new Error('MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
8
+ const {
9
+ x,
10
+ y
11
+ } = props;
12
+ if (x !== undefined && y !== undefined) {
13
+ throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
10
14
  }
11
- if (props.x === undefined && props.y === undefined) {
12
- throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
15
+ if (x === undefined && y === undefined) {
16
+ throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
13
17
  }
14
- if (props.x !== undefined) {
18
+ if (x !== undefined) {
15
19
  return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
16
20
  }
17
21
  return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
4
4
  import { styled } from '@mui/material/styles';
5
+ import PropTypes from 'prop-types';
5
6
  import * as React from 'react';
6
7
  import { useAxisEvents } from './hooks/useAxisEvents';
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ const ChartChartsSurfaceStyles = styled('svg', {
10
11
  name: 'MuiChartsSurface',
11
12
  slot: 'Root'
12
13
  })(() => ({}));
13
- export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
14
+ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
14
15
  const {
15
16
  children,
16
17
  width,
@@ -38,4 +39,36 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
38
39
  children: props.desc
39
40
  }), children]
40
41
  }));
41
- });
42
+ });
43
+ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
44
+ // ----------------------------- Warning --------------------------------
45
+ // | These PropTypes are generated from the TypeScript type definitions |
46
+ // | To update them edit the TypeScript types and run "yarn proptypes" |
47
+ // ----------------------------------------------------------------------
48
+ children: PropTypes.node,
49
+ className: PropTypes.string,
50
+ desc: PropTypes.string,
51
+ /**
52
+ * If `true`, the charts will not listen to the mouse move event.
53
+ * It might break interactive features, but will improve performance.
54
+ * @default false
55
+ */
56
+ disableAxisListener: PropTypes.bool,
57
+ /**
58
+ * The height of the chart in px.
59
+ */
60
+ height: PropTypes.number.isRequired,
61
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
62
+ title: PropTypes.string,
63
+ viewBox: PropTypes.shape({
64
+ height: PropTypes.number,
65
+ width: PropTypes.number,
66
+ x: PropTypes.number,
67
+ y: PropTypes.number
68
+ }),
69
+ /**
70
+ * The width of the chart in px.
71
+ */
72
+ width: PropTypes.number.isRequired
73
+ } : void 0;
74
+ export { ChartsSurface };
@@ -59,6 +59,8 @@ export const ChartsTooltipCell = styled('td', {
59
59
  paddingRight: theme.spacing(2)
60
60
  }
61
61
  }));
62
+
63
+ // eslint-disable-next-line material-ui/no-styled-box
62
64
  export const ChartsTooltipMark = styled(Box, {
63
65
  name: 'MuiChartsTooltip',
64
66
  slot: 'Mark'
@@ -63,10 +63,10 @@ function AreaPlot(props) {
63
63
  const xData = xAxis[xAxisKey].data;
64
64
  if (process.env.NODE_ENV !== 'production') {
65
65
  if (xData === undefined) {
66
- throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
66
+ throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
67
67
  }
68
68
  if (xData.length < stackedData.length) {
69
- throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
69
+ throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
70
70
  }
71
71
  }
72
72
  const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
@@ -120,6 +120,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
120
120
  * - 'none': display nothing.
121
121
  * - 'line': display a line at the current mouse position.
122
122
  * - 'band': display a band at the current mouse position. Only available with band scale.
123
+ * @default { x: 'line' }
123
124
  */
124
125
  axisHighlight: PropTypes.shape({
125
126
  x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -156,6 +157,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
156
157
  className: PropTypes.string,
157
158
  /**
158
159
  * Color palette used to colorize multiple series.
160
+ * @default blueberryTwilightPalette
159
161
  */
160
162
  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
161
163
  /**
@@ -71,7 +71,7 @@ function LineHighlightPlot(props) {
71
71
  const yScale = yAxis[yAxisKey].scale;
72
72
  const xData = xAxis[xAxisKey].data;
73
73
  if (xData === undefined) {
74
- throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
74
+ throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
75
75
  }
76
76
  const x = xScale(xData[highlightedIndex]);
77
77
  const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
@@ -62,10 +62,10 @@ function LinePlot(props) {
62
62
  const xData = xAxis[xAxisKey].data;
63
63
  if (process.env.NODE_ENV !== 'production') {
64
64
  if (xData === undefined) {
65
- throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
65
+ throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
66
66
  }
67
67
  if (xData.length < stackedData.length) {
68
- throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
68
+ throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
69
69
  }
70
70
  }
71
71
  const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
@@ -77,7 +77,7 @@ function MarkPlot(props) {
77
77
  return true;
78
78
  };
79
79
  if (xData === undefined) {
80
- throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
80
+ throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
81
81
  }
82
82
  return xData == null ? void 0 : xData.map((x, index) => {
83
83
  const value = data[index] == null ? null : stackedData[index][1];
@@ -28,7 +28,7 @@ const formatter = (params, dataset) => {
28
28
  }
29
29
  });
30
30
  } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
31
- throw new Error([`MUI-X-Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
31
+ throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
32
32
  }
33
33
  });
34
34
  const completedSeries = {};
@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
106
106
  arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
107
107
  /**
108
108
  * The minimal angle required to display the arc label.
109
+ * @default 0
109
110
  */
110
111
  arcLabelMinAngle: PropTypes.number,
111
112
  /**
@@ -131,6 +132,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
131
132
  })).isRequired,
132
133
  /**
133
134
  * Override the arc attibutes when it is faded.
135
+ * @default { additionalRadius: -5 }
134
136
  */
135
137
  faded: PropTypes.shape({
136
138
  additionalRadius: PropTypes.number,
@@ -111,6 +111,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
111
111
  })).isRequired,
112
112
  /**
113
113
  * Override the arc attibutes when it is faded.
114
+ * @default { additionalRadius: -5 }
114
115
  */
115
116
  faded: PropTypes.shape({
116
117
  additionalRadius: PropTypes.number,
@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
108
108
  /**
109
109
  * Indicate which axis to display the bottom of the charts.
110
110
  * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
111
- * @default xAxisIds[0] The id of the first provided axis
111
+ * @default null
112
112
  */
113
113
  bottomAxis: PropTypes.oneOfType([PropTypes.shape({
114
114
  axisId: PropTypes.string,
@@ -136,6 +136,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
136
136
  className: PropTypes.string,
137
137
  /**
138
138
  * Color palette used to colorize multiple series.
139
+ * @default blueberryTwilightPalette
139
140
  */
140
141
  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
141
142
  /**
@@ -157,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
157
158
  /**
158
159
  * Indicate which axis to display the left of the charts.
159
160
  * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
160
- * @default yAxisIds[0] The id of the first provided axis
161
+ * @default null
161
162
  */
162
163
  leftAxis: PropTypes.oneOfType([PropTypes.shape({
163
164
  axisId: PropTypes.string,
@@ -60,11 +60,11 @@ const useChartDimensions = (inWidth, inHeight) => {
60
60
  }, [computeSize, inHeight, inWidth]);
61
61
  if (process.env.NODE_ENV !== 'production') {
62
62
  if (displayError.current && inWidth === undefined && width === 0) {
63
- console.error(`MUI-X-Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
63
+ console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
64
64
  displayError.current = false;
65
65
  }
66
66
  if (displayError.current && inHeight === undefined && height === 0) {
67
- console.error(`MUI-X-Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
67
+ console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
68
68
  displayError.current = false;
69
69
  }
70
70
  }
@@ -118,6 +118,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
118
118
  className: PropTypes.string,
119
119
  /**
120
120
  * Color palette used to colorize multiple series.
121
+ * @default blueberryTwilightPalette
121
122
  */
122
123
  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
123
124
  /**
@@ -120,6 +120,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
120
120
  className: PropTypes.string,
121
121
  /**
122
122
  * Color palette used to colorize multiple series.
123
+ * @default blueberryTwilightPalette
123
124
  */
124
125
  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
125
126
  /**
@@ -150,7 +151,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
150
151
  * The margin between the SVG and the drawing area.
151
152
  * It's used for leaving some space for extra information such as the x- and y-axis or legend.
152
153
  * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
153
- * @default object Depends on the charts type.
154
+ * @default {
155
+ * top: 5,
156
+ * bottom: 5,
157
+ * left: 5,
158
+ * right: 5,
159
+ * }
154
160
  */
155
161
  margin: PropTypes.shape({
156
162
  bottom: PropTypes.number,
@@ -199,6 +205,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
199
205
  * Formatter used by the tooltip.
200
206
  * @param {number} value The value to format.
201
207
  * @returns {string} the formatted value.
208
+ * @default (v: number) => v.toString()
202
209
  */
203
210
  valueFormatter: PropTypes.func,
204
211
  viewBox: PropTypes.shape({
@@ -38,12 +38,13 @@ export const CartesianContext = /*#__PURE__*/React.createContext({
38
38
  *
39
39
  * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
40
40
  */
41
- function CartesianContextProvider({
42
- xAxis: inXAxis,
43
- yAxis: inYAxis,
44
- dataset,
45
- children
46
- }) {
41
+ function CartesianContextProvider(props) {
42
+ const {
43
+ xAxis: inXAxis,
44
+ yAxis: inYAxis,
45
+ dataset,
46
+ children
47
+ } = props;
47
48
  const formattedSeries = React.useContext(SeriesContext);
48
49
  const drawingArea = React.useContext(DrawingContext);
49
50
  const xAxis = React.useMemo(() => inXAxis == null ? void 0 : inXAxis.map(axisConfig => {
@@ -52,7 +53,7 @@ function CartesianContextProvider({
52
53
  return axisConfig;
53
54
  }
54
55
  if (dataset === undefined) {
55
- throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
56
+ throw Error('MUI X Charts: x-axis uses `dataKey` but no `dataset` is provided.');
56
57
  }
57
58
  return _extends({}, axisConfig, {
58
59
  data: dataset.map(d => d[dataKey])
@@ -64,7 +65,7 @@ function CartesianContextProvider({
64
65
  return axisConfig;
65
66
  }
66
67
  if (dataset === undefined) {
67
- throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
68
+ throw Error('MUI X Charts: y-axis uses `dataKey` but no `dataset` is provided.');
68
69
  }
69
70
  return _extends({}, axisConfig, {
70
71
  data: dataset.map(d => d[dataKey])
@@ -23,13 +23,14 @@ export const SVGContext = /*#__PURE__*/React.createContext({
23
23
  *
24
24
  * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
25
25
  */
26
- function DrawingProvider({
27
- width,
28
- height,
29
- margin,
30
- svgRef,
31
- children
32
- }) {
26
+ function DrawingProvider(props) {
27
+ const {
28
+ width,
29
+ height,
30
+ margin,
31
+ svgRef,
32
+ children
33
+ } = props;
33
34
  const drawingArea = useChartDimensions(width, height, margin);
34
35
  return /*#__PURE__*/_jsx(SVGContext.Provider, {
35
36
  value: svgRef,
@@ -29,9 +29,10 @@ const dataReducer = (prevState, action) => {
29
29
  return prevState;
30
30
  }
31
31
  };
32
- export function HighlightProvider({
33
- children
34
- }) {
32
+ function HighlightProvider(props) {
33
+ const {
34
+ children
35
+ } = props;
35
36
  const [data, dispatch] = React.useReducer(dataReducer, {
36
37
  item: null,
37
38
  scope: defaultScope
@@ -43,4 +44,5 @@ export function HighlightProvider({
43
44
  value: value,
44
45
  children: children
45
46
  });
46
- }
47
+ }
48
+ export { HighlightProvider };
@@ -50,9 +50,10 @@ const dataReducer = (prevState, action) => {
50
50
  return prevState;
51
51
  }
52
52
  };
53
- export function InteractionProvider({
54
- children
55
- }) {
53
+ function InteractionProvider(props) {
54
+ const {
55
+ children
56
+ } = props;
56
57
  const [data, dispatch] = React.useReducer(dataReducer, {
57
58
  item: null,
58
59
  axis: {
@@ -68,4 +69,5 @@ export function InteractionProvider({
68
69
  value: value,
69
70
  children: children
70
71
  });
71
- }
72
+ }
73
+ export { InteractionProvider };
@@ -40,7 +40,7 @@ const formatSeries = (series, colors, dataset) => {
40
40
  };
41
41
  }
42
42
  if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
43
- throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
43
+ throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
44
44
  }
45
45
  seriesGroups[type].series[id] = _extends({
46
46
  id
@@ -57,16 +57,18 @@ const formatSeries = (series, colors, dataset) => {
57
57
  });
58
58
  return formattedSeries;
59
59
  };
60
- export function SeriesContextProvider({
61
- series,
62
- dataset,
63
- colors = blueberryTwilightPalette,
64
- children
65
- }) {
60
+ function SeriesContextProvider(props) {
61
+ const {
62
+ series,
63
+ dataset,
64
+ colors = blueberryTwilightPalette,
65
+ children
66
+ } = props;
66
67
  const theme = useTheme();
67
68
  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
68
69
  return /*#__PURE__*/_jsx(SeriesContext.Provider, {
69
70
  value: formattedSeries,
70
71
  children: children
71
72
  });
72
- }
73
+ }
74
+ export { SeriesContextProvider };
package/esm/index.js CHANGED
@@ -19,4 +19,5 @@ export * from './PieChart';
19
19
  export * from './ScatterChart';
20
20
  export * from './SparkLineChart';
21
21
  export * from './ChartContainer';
22
+ export * from './ChartsSurface';
22
23
  export * from './ResponsiveChartContainer';
@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  // DOM utils taken from
3
3
  // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
4
4
 
5
- const isSsr = () => !(typeof window !== 'undefined' && window.document && window.setTimeout);
5
+ function isSsr() {
6
+ return typeof window === 'undefined';
7
+ }
6
8
  const stringCache = {
7
9
  widthCache: {},
8
10
  cacheCount: 0
package/index.d.ts CHANGED
@@ -19,4 +19,5 @@ export * from './PieChart';
19
19
  export * from './ScatterChart';
20
20
  export * from './SparkLineChart';
21
21
  export * from './ChartContainer';
22
+ export * from './ChartsSurface';
22
23
  export * from './ResponsiveChartContainer';
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts v7.0.0-alpha.7
2
+ * @mui/x-charts v7.0.0-alpha.8
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -241,6 +241,17 @@ Object.keys(_ChartContainer).forEach(function (key) {
241
241
  }
242
242
  });
243
243
  });
244
+ var _ChartsSurface = require("./ChartsSurface");
245
+ Object.keys(_ChartsSurface).forEach(function (key) {
246
+ if (key === "default" || key === "__esModule") return;
247
+ if (key in exports && exports[key] === _ChartsSurface[key]) return;
248
+ Object.defineProperty(exports, key, {
249
+ enumerable: true,
250
+ get: function () {
251
+ return _ChartsSurface[key];
252
+ }
253
+ });
254
+ });
244
255
  var _ResponsiveChartContainer = require("./ResponsiveChartContainer");
245
256
  Object.keys(_ResponsiveChartContainer).forEach(function (key) {
246
257
  if (key === "default" || key === "__esModule") return;
@@ -9,7 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  // DOM utils taken from
10
10
  // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
11
11
 
12
- const isSsr = () => !(typeof window !== 'undefined' && window.document && window.setTimeout);
12
+ function isSsr() {
13
+ return typeof window === 'undefined';
14
+ }
13
15
  const stringCache = {
14
16
  widthCache: {},
15
17
  cacheCount: 0
@@ -161,6 +161,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
161
161
  className: PropTypes.string,
162
162
  /**
163
163
  * Color palette used to colorize multiple series.
164
+ * @default blueberryTwilightPalette
164
165
  */
165
166
  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
166
167
  /**
@@ -66,18 +66,18 @@ var useCompletedData = function useCompletedData() {
66
66
  var baseScaleConfig;
67
67
  if (verticalLayout) {
68
68
  if (!isBandScaleConfig(xAxisConfig)) {
69
- throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
69
+ throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\"."));
70
70
  }
71
71
  if (xAxis[xAxisKey].data === undefined) {
72
- throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud have data property"));
72
+ throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud have data property."));
73
73
  }
74
74
  baseScaleConfig = xAxisConfig;
75
75
  } else {
76
76
  if (!isBandScaleConfig(yAxisConfig)) {
77
- throw new Error("MUI-X-Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
77
+ throw new Error("MUI X Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\"."));
78
78
  }
79
79
  if (yAxis[yAxisKey].data === undefined) {
80
- throw new Error("MUI-X-Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud have data property"));
80
+ throw new Error("MUI X Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud have data property."));
81
81
  }
82
82
  baseScaleConfig = yAxisConfig;
83
83
  }
@@ -24,7 +24,7 @@ var formatter = function formatter(params, dataset) {
24
24
  }
25
25
  });
26
26
  } else if (dataset === undefined) {
27
- throw new Error(["MUI-X-Charts: bar series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
27
+ throw new Error(["MUI X Charts: bar series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
28
28
  }
29
29
  });
30
30
  var completedSeries = {};
@@ -57,16 +57,16 @@ function ChartsAxis(props) {
57
57
  var topId = getAxisId(topAxis);
58
58
  var rightId = getAxisId(rightAxis);
59
59
  if (topId !== null && !xAxis[topId]) {
60
- throw Error(["MUI-X-Charts: id used for top axis \"".concat(topId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
60
+ throw Error(["MUI X Charts: id used for top axis \"".concat(topId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
61
61
  }
62
62
  if (leftId !== null && !yAxis[leftId]) {
63
- throw Error(["MUI-X-Charts: id used for left axis \"".concat(leftId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
63
+ throw Error(["MUI X Charts: id used for left axis \"".concat(leftId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
64
64
  }
65
65
  if (rightId !== null && !yAxis[rightId]) {
66
- throw Error(["MUI-X-Charts: id used for right axis \"".concat(rightId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
66
+ throw Error(["MUI X Charts: id used for right axis \"".concat(rightId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
67
67
  }
68
68
  if (bottomId !== null && !xAxis[bottomId]) {
69
- throw Error(["MUI-X-Charts: id used for bottom axis \"".concat(bottomId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
69
+ throw Error(["MUI X Charts: id used for bottom axis \"".concat(bottomId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
70
70
  }
71
71
  var topAxisProps = mergeProps(topAxis, slots, slotProps);
72
72
  var bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
@@ -5,13 +5,15 @@ import { ChartsXReferenceLine } from './ChartsXReferenceLine';
5
5
  import { ChartsYReferenceLine } from './ChartsYReferenceLine';
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  function ChartsReferenceLine(props) {
8
- if (props.x !== undefined && props.y !== undefined) {
9
- throw new Error('MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
8
+ var x = props.x,
9
+ y = props.y;
10
+ if (x !== undefined && y !== undefined) {
11
+ throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
10
12
  }
11
- if (props.x === undefined && props.y === undefined) {
12
- throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
13
+ if (x === undefined && y === undefined) {
14
+ throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
13
15
  }
14
- if (props.x !== undefined) {
16
+ if (x !== undefined) {
15
17
  return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
16
18
  }
17
19
  return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));