@mui/x-charts 7.7.0 → 7.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/BarChart/BarChart.js +21 -104
  2. package/BarChart/BarLabel/BarLabelPlot.d.ts +0 -3
  3. package/BarChart/BarLabel/BarLabelPlot.js +1 -24
  4. package/BarChart/BarPlot.js +2 -2
  5. package/BarChart/checkScaleErrors.d.ts +5 -9
  6. package/BarChart/types.d.ts +2 -2
  7. package/BarChart/useBarChartProps.d.ts +102 -0
  8. package/BarChart/useBarChartProps.js +143 -0
  9. package/CHANGELOG.md +82 -0
  10. package/ChartContainer/ChartContainer.d.ts +1 -1
  11. package/ChartContainer/ChartContainer.js +6 -10
  12. package/ChartContainer/useChartContainerHooks.d.ts +11 -0
  13. package/ChartContainer/useChartContainerHooks.js +34 -0
  14. package/ChartContainer/usePluginsMerge.d.ts +1 -2
  15. package/ChartsAxis/ChartsAxis.js +2 -2
  16. package/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
  17. package/ChartsGrid/ChartsGrid.js +2 -2
  18. package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
  19. package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
  20. package/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
  21. package/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -2
  22. package/ChartsXAxis/ChartsXAxis.js +2 -2
  23. package/ChartsYAxis/ChartsYAxis.js +2 -2
  24. package/LineChart/AreaPlot.js +2 -2
  25. package/LineChart/LineChart.js +24 -106
  26. package/LineChart/LineHighlightPlot.js +2 -2
  27. package/LineChart/LinePlot.js +2 -2
  28. package/LineChart/MarkPlot.js +2 -2
  29. package/LineChart/useLineChartProps.d.ts +117 -0
  30. package/LineChart/useLineChartProps.js +152 -0
  31. package/ScatterChart/ScatterChart.js +20 -75
  32. package/ScatterChart/ScatterPlot.js +2 -2
  33. package/ScatterChart/useScatterChartProps.d.ts +86 -0
  34. package/ScatterChart/useScatterChartProps.js +116 -0
  35. package/context/CartesianProvider/CartesianContext.d.ts +25 -0
  36. package/context/CartesianProvider/CartesianContext.js +21 -0
  37. package/context/CartesianProvider/CartesianProvider.d.ts +34 -0
  38. package/context/CartesianProvider/CartesianProvider.js +44 -0
  39. package/context/CartesianProvider/computeValue.d.ts +19 -0
  40. package/context/CartesianProvider/computeValue.js +89 -0
  41. package/context/CartesianProvider/getAxisExtremum.d.ts +4 -0
  42. package/context/CartesianProvider/getAxisExtremum.js +28 -0
  43. package/context/CartesianProvider/index.d.ts +9 -0
  44. package/context/CartesianProvider/index.js +51 -0
  45. package/context/CartesianProvider/normalizeAxis.d.ts +5 -0
  46. package/context/CartesianProvider/normalizeAxis.js +23 -0
  47. package/context/CartesianProvider/useCartesianContext.d.ts +2 -0
  48. package/context/CartesianProvider/useCartesianContext.js +17 -0
  49. package/context/ColorProvider.d.ts +2 -2
  50. package/esm/BarChart/BarChart.js +21 -104
  51. package/esm/BarChart/BarLabel/BarLabelPlot.js +0 -23
  52. package/esm/BarChart/BarPlot.js +2 -2
  53. package/esm/BarChart/useBarChartProps.js +136 -0
  54. package/esm/ChartContainer/ChartContainer.js +5 -9
  55. package/esm/ChartContainer/useChartContainerHooks.js +24 -0
  56. package/esm/ChartsAxis/ChartsAxis.js +2 -2
  57. package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
  58. package/esm/ChartsGrid/ChartsGrid.js +2 -2
  59. package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
  60. package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
  61. package/esm/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
  62. package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -2
  63. package/esm/ChartsXAxis/ChartsXAxis.js +2 -2
  64. package/esm/ChartsYAxis/ChartsYAxis.js +2 -2
  65. package/esm/LineChart/AreaPlot.js +2 -2
  66. package/esm/LineChart/LineChart.js +24 -106
  67. package/esm/LineChart/LineHighlightPlot.js +2 -2
  68. package/esm/LineChart/LinePlot.js +2 -2
  69. package/esm/LineChart/MarkPlot.js +2 -2
  70. package/esm/LineChart/useLineChartProps.js +144 -0
  71. package/esm/ScatterChart/ScatterChart.js +20 -75
  72. package/esm/ScatterChart/ScatterPlot.js +2 -2
  73. package/esm/ScatterChart/useScatterChartProps.js +108 -0
  74. package/esm/context/CartesianProvider/CartesianContext.js +13 -0
  75. package/esm/context/CartesianProvider/CartesianProvider.js +37 -0
  76. package/esm/context/CartesianProvider/computeValue.js +82 -0
  77. package/esm/context/CartesianProvider/getAxisExtremum.js +21 -0
  78. package/esm/context/CartesianProvider/index.js +10 -0
  79. package/esm/context/CartesianProvider/normalizeAxis.js +15 -0
  80. package/esm/context/CartesianProvider/useCartesianContext.js +8 -0
  81. package/esm/hooks/useAxisEvents.js +2 -2
  82. package/esm/hooks/useColorScale.js +3 -3
  83. package/esm/hooks/useScale.js +3 -4
  84. package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
  85. package/esm/internals/index.js +6 -2
  86. package/hooks/useAxisEvents.js +2 -2
  87. package/hooks/useColorScale.js +3 -3
  88. package/hooks/useDrawingArea.d.ts +2 -8
  89. package/hooks/useScale.js +3 -6
  90. package/index.js +1 -1
  91. package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts +2 -1
  92. package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
  93. package/internals/index.d.ts +7 -1
  94. package/internals/index.js +49 -5
  95. package/models/plugin.d.ts +4 -1
  96. package/modern/BarChart/BarChart.js +21 -104
  97. package/modern/BarChart/BarLabel/BarLabelPlot.js +0 -23
  98. package/modern/BarChart/BarPlot.js +2 -2
  99. package/modern/BarChart/useBarChartProps.js +136 -0
  100. package/modern/ChartContainer/ChartContainer.js +5 -9
  101. package/modern/ChartContainer/useChartContainerHooks.js +24 -0
  102. package/modern/ChartsAxis/ChartsAxis.js +2 -2
  103. package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
  104. package/modern/ChartsGrid/ChartsGrid.js +2 -2
  105. package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
  106. package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
  107. package/modern/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
  108. package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -2
  109. package/modern/ChartsXAxis/ChartsXAxis.js +2 -2
  110. package/modern/ChartsYAxis/ChartsYAxis.js +2 -2
  111. package/modern/LineChart/AreaPlot.js +2 -2
  112. package/modern/LineChart/LineChart.js +24 -106
  113. package/modern/LineChart/LineHighlightPlot.js +2 -2
  114. package/modern/LineChart/LinePlot.js +2 -2
  115. package/modern/LineChart/MarkPlot.js +2 -2
  116. package/modern/LineChart/useLineChartProps.js +144 -0
  117. package/modern/ScatterChart/ScatterChart.js +20 -75
  118. package/modern/ScatterChart/ScatterPlot.js +2 -2
  119. package/modern/ScatterChart/useScatterChartProps.js +108 -0
  120. package/modern/context/CartesianProvider/CartesianContext.js +13 -0
  121. package/modern/context/CartesianProvider/CartesianProvider.js +37 -0
  122. package/modern/context/CartesianProvider/computeValue.js +82 -0
  123. package/modern/context/CartesianProvider/getAxisExtremum.js +21 -0
  124. package/modern/context/CartesianProvider/index.js +10 -0
  125. package/modern/context/CartesianProvider/normalizeAxis.js +15 -0
  126. package/modern/context/CartesianProvider/useCartesianContext.js +8 -0
  127. package/modern/hooks/useAxisEvents.js +2 -2
  128. package/modern/hooks/useColorScale.js +3 -3
  129. package/modern/hooks/useScale.js +3 -4
  130. package/modern/index.js +1 -1
  131. package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
  132. package/modern/internals/index.js +6 -2
  133. package/package.json +3 -3
  134. package/context/CartesianContextProvider.d.ts +0 -61
  135. package/context/CartesianContextProvider.js +0 -220
  136. package/esm/context/CartesianContextProvider.js +0 -211
  137. package/modern/context/CartesianContextProvider.js +0 -211
@@ -0,0 +1,108 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ /**
3
+ * A helper function that extracts ScatterChartProps from the input props
4
+ * and returns an object with props for the children components of ScatterChart.
5
+ *
6
+ * @param props The input props for ScatterChart
7
+ * @returns An object with props for the children components of ScatterChart
8
+ */
9
+ export const useScatterChartProps = props => {
10
+ const {
11
+ xAxis,
12
+ yAxis,
13
+ zAxis,
14
+ series,
15
+ tooltip,
16
+ axisHighlight,
17
+ voronoiMaxRadius,
18
+ disableVoronoi,
19
+ legend,
20
+ width,
21
+ height,
22
+ margin,
23
+ colors,
24
+ sx,
25
+ grid,
26
+ topAxis,
27
+ leftAxis,
28
+ rightAxis,
29
+ bottomAxis,
30
+ onItemClick,
31
+ children,
32
+ slots,
33
+ slotProps,
34
+ loading,
35
+ highlightedItem,
36
+ onHighlightChange
37
+ } = props;
38
+ const chartContainerProps = {
39
+ series: series.map(s => _extends({
40
+ type: 'scatter'
41
+ }, s)),
42
+ width,
43
+ height,
44
+ margin,
45
+ colors,
46
+ xAxis,
47
+ yAxis,
48
+ sx,
49
+ highlightedItem,
50
+ onHighlightChange
51
+ };
52
+ const zAxisProps = {
53
+ zAxis
54
+ };
55
+ const voronoiHandlerProps = {
56
+ voronoiMaxRadius,
57
+ onItemClick: onItemClick
58
+ };
59
+ const chartsAxisProps = {
60
+ topAxis,
61
+ leftAxis,
62
+ rightAxis,
63
+ bottomAxis,
64
+ slots,
65
+ slotProps
66
+ };
67
+ const gridProps = {
68
+ vertical: grid?.vertical,
69
+ horizontal: grid?.horizontal
70
+ };
71
+ const scatterPlotProps = {
72
+ onItemClick: disableVoronoi ? onItemClick : undefined,
73
+ slots,
74
+ slotProps
75
+ };
76
+ const overlayProps = {
77
+ loading,
78
+ slots,
79
+ slotProps
80
+ };
81
+ const legendProps = _extends({}, legend, {
82
+ slots,
83
+ slotProps
84
+ });
85
+ const axisHighlightProps = _extends({
86
+ y: 'none',
87
+ x: 'none'
88
+ }, axisHighlight);
89
+ const tooltipProps = _extends({
90
+ trigger: 'item'
91
+ }, tooltip, {
92
+ slots,
93
+ slotProps
94
+ });
95
+ return {
96
+ chartContainerProps,
97
+ zAxisProps,
98
+ voronoiHandlerProps,
99
+ chartsAxisProps,
100
+ gridProps,
101
+ scatterPlotProps,
102
+ overlayProps,
103
+ legendProps,
104
+ axisHighlightProps,
105
+ tooltipProps,
106
+ children
107
+ };
108
+ };
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ export const CartesianContext = /*#__PURE__*/React.createContext({
3
+ isInitialized: false,
4
+ data: {
5
+ xAxis: {},
6
+ yAxis: {},
7
+ xAxisIds: [],
8
+ yAxisIds: []
9
+ }
10
+ });
11
+ if (process.env.NODE_ENV !== 'production') {
12
+ CartesianContext.displayName = 'CartesianContext';
13
+ }
@@ -0,0 +1,37 @@
1
+ import * as React from 'react';
2
+ import { useDrawingArea } from '../../hooks/useDrawingArea';
3
+ import { useSeries } from '../../hooks/useSeries';
4
+ import { CartesianContext } from './CartesianContext';
5
+ import { normalizeAxis } from './normalizeAxis';
6
+ import { computeValue } from './computeValue';
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ function CartesianContextProvider(props) {
9
+ const {
10
+ xAxis: inXAxis,
11
+ yAxis: inYAxis,
12
+ dataset,
13
+ xExtremumGetters,
14
+ yExtremumGetters,
15
+ children
16
+ } = props;
17
+ const formattedSeries = useSeries();
18
+ const drawingArea = useDrawingArea();
19
+ const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
20
+ const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
21
+ const xValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
22
+ const yValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
23
+ const value = React.useMemo(() => ({
24
+ isInitialized: true,
25
+ data: {
26
+ xAxis: xValues.axis,
27
+ yAxis: yValues.axis,
28
+ xAxisIds: xValues.axisIds,
29
+ yAxisIds: yValues.axisIds
30
+ }
31
+ }), [xValues, yValues]);
32
+ return /*#__PURE__*/_jsx(CartesianContext.Provider, {
33
+ value: value,
34
+ children: children
35
+ });
36
+ }
37
+ export { CartesianContextProvider };
@@ -0,0 +1,82 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import { scaleBand, scalePoint } from 'd3-scale';
3
+ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
4
+ import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
5
+ import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
6
+ import { getTickNumber } from '../../hooks/useTicks';
7
+ import { getScale } from '../../internals/getScale';
8
+ import { getAxisExtremum } from './getAxisExtremum';
9
+ const getRange = (drawingArea, axisName, isReverse) => {
10
+ const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
11
+ return isReverse ? range.reverse() : range;
12
+ };
13
+ const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
14
+ const DEFAULT_BAR_GAP_RATIO = 0.1;
15
+ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
16
+ const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
17
+ const allAxis = [...(inAxis?.map((axis, index) => _extends({
18
+ id: `defaultized-${axisName}-axis-${index}`
19
+ }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
20
+ id
21
+ }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
22
+ id: DEFAULT_AXIS_KEY,
23
+ scaleType: 'linear'
24
+ }] : [])];
25
+ const completeAxis = {};
26
+ allAxis.forEach((axis, axisIndex) => {
27
+ const isDefaultAxis = axisIndex === 0;
28
+ const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
29
+ const range = getRange(drawingArea, axisName, axis.reverse);
30
+ if (isBandScaleConfig(axis)) {
31
+ const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
32
+ const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
33
+ // Reverse range because ordinal scales are presented from top to bottom on y-axis
34
+ const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
35
+ completeAxis[axis.id] = _extends({
36
+ categoryGapRatio,
37
+ barGapRatio
38
+ }, axis, {
39
+ scale: scaleBand(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
40
+ tickNumber: axis.data.length,
41
+ colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
42
+ values: axis.data
43
+ }, axis.colorMap)) : getColorScale(axis.colorMap))
44
+ });
45
+ }
46
+ if (isPointScaleConfig(axis)) {
47
+ const scaleRange = axisName === 'x' ? range : [...range].reverse();
48
+ completeAxis[axis.id] = _extends({}, axis, {
49
+ scale: scalePoint(axis.data, scaleRange),
50
+ tickNumber: axis.data.length,
51
+ colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
52
+ values: axis.data
53
+ }, axis.colorMap)) : getColorScale(axis.colorMap))
54
+ });
55
+ }
56
+ if (axis.scaleType === 'band' || axis.scaleType === 'point') {
57
+ // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
58
+ return;
59
+ }
60
+ const scaleType = axis.scaleType ?? 'linear';
61
+ const extremums = [axis.min ?? minData, axis.max ?? maxData];
62
+ const tickNumber = getTickNumber(_extends({}, axis, {
63
+ range,
64
+ domain: extremums
65
+ }));
66
+ const scale = getScale(scaleType, extremums, range).nice(tickNumber);
67
+ const [minDomain, maxDomain] = scale.domain();
68
+ const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
69
+ completeAxis[axis.id] = _extends({}, axis, {
70
+ scaleType: scaleType,
71
+ scale: scale.domain(domain),
72
+ tickNumber,
73
+ colorScale: axis.colorMap && getColorScale(axis.colorMap)
74
+ });
75
+ });
76
+ return {
77
+ axis: completeAxis,
78
+ axisIds: allAxis.map(({
79
+ id
80
+ }) => id)
81
+ };
82
+ }
@@ -0,0 +1,21 @@
1
+ const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
2
+ const getter = getters[chartType];
3
+ const series = formattedSeries[chartType]?.series ?? {};
4
+ const [minChartTypeData, maxChartTypeData] = getter?.({
5
+ series,
6
+ axis,
7
+ isDefaultAxis
8
+ }) ?? [null, null];
9
+ const [minData, maxData] = acc;
10
+ if (minData === null || maxData === null) {
11
+ return [minChartTypeData, maxChartTypeData];
12
+ }
13
+ if (minChartTypeData === null || maxChartTypeData === null) {
14
+ return [minData, maxData];
15
+ }
16
+ return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
17
+ };
18
+ export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
19
+ const charTypes = Object.keys(getters);
20
+ return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
21
+ };
@@ -0,0 +1,10 @@
1
+ import { computeValue } from './computeValue';
2
+ import { normalizeAxis } from './normalizeAxis';
3
+ export * from './CartesianProvider';
4
+ export * from './CartesianContext';
5
+ export * from './useCartesianContext';
6
+ const cartesianProviderUtils = {
7
+ computeValue,
8
+ normalizeAxis
9
+ };
10
+ export { cartesianProviderUtils };
@@ -0,0 +1,15 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ export const normalizeAxis = (axis, dataset, axisName) => {
3
+ return axis?.map(axisConfig => {
4
+ const dataKey = axisConfig.dataKey;
5
+ if (dataKey === undefined || axisConfig.data !== undefined) {
6
+ return axisConfig;
7
+ }
8
+ if (dataset === undefined) {
9
+ throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
10
+ }
11
+ return _extends({}, axisConfig, {
12
+ data: dataset.map(d => d[dataKey])
13
+ });
14
+ });
15
+ };
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ import { CartesianContext } from './CartesianContext';
3
+ export const useCartesianContext = () => {
4
+ const {
5
+ data
6
+ } = React.useContext(CartesianContext);
7
+ return data;
8
+ };
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { InteractionContext } from '../context/InteractionProvider';
3
- import { CartesianContext } from '../context/CartesianContextProvider';
3
+ import { useCartesianContext } from '../context/CartesianProvider';
4
4
  import { isBandScale } from '../internals/isBandScale';
5
5
  import { getSVGPoint } from '../internals/utils';
6
6
  import { useSvgRef } from './useSvgRef';
@@ -21,7 +21,7 @@ export const useAxisEvents = disableAxisListener => {
21
21
  yAxis,
22
22
  xAxisIds,
23
23
  yAxisIds
24
- } = React.useContext(CartesianContext);
24
+ } = useCartesianContext();
25
25
  const {
26
26
  dispatch
27
27
  } = React.useContext(InteractionContext);
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
- import { CartesianContext } from '../context/CartesianContextProvider';
2
+ import { useCartesianContext } from '../context/CartesianProvider';
3
3
  import { ZAxisContext } from '../context/ZAxisContextProvider';
4
4
  export function useXColorScale(identifier) {
5
5
  const {
6
6
  xAxis,
7
7
  xAxisIds
8
- } = React.useContext(CartesianContext);
8
+ } = useCartesianContext();
9
9
  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
10
10
  return xAxis[id].colorScale;
11
11
  }
@@ -13,7 +13,7 @@ export function useYColorScale(identifier) {
13
13
  const {
14
14
  yAxis,
15
15
  yAxisIds
16
- } = React.useContext(CartesianContext);
16
+ } = useCartesianContext();
17
17
  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
18
18
  return yAxis[id].colorScale;
19
19
  }
@@ -1,5 +1,4 @@
1
- import * as React from 'react';
2
- import { CartesianContext } from '../context/CartesianContextProvider';
1
+ import { useCartesianContext } from '../context/CartesianProvider';
3
2
  import { isBandScale } from '../internals/isBandScale';
4
3
  /**
5
4
  * For a given scale return a function that map value to their position.
@@ -17,7 +16,7 @@ export function useXScale(identifier) {
17
16
  const {
18
17
  xAxis,
19
18
  xAxisIds
20
- } = React.useContext(CartesianContext);
19
+ } = useCartesianContext();
21
20
  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
22
21
  return xAxis[id].scale;
23
22
  }
@@ -25,7 +24,7 @@ export function useYScale(identifier) {
25
24
  const {
26
25
  yAxis,
27
26
  yAxisIds
28
- } = React.useContext(CartesianContext);
27
+ } = useCartesianContext();
29
28
  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
30
29
  return yAxis[id].scale;
31
30
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { CartesianContext } from '../../../context/CartesianContextProvider';
2
+ import { useCartesianContext } from '../../../context/CartesianProvider';
3
3
  import { DrawingContext } from '../../../context/DrawingProvider';
4
4
  import { useDrawingArea } from '../../../hooks';
5
5
  import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
@@ -28,7 +28,7 @@ export function ChartsAxesGradients() {
28
28
  xAxis,
29
29
  yAxisIds,
30
30
  yAxis
31
- } = React.useContext(CartesianContext);
31
+ } = useCartesianContext();
32
32
  return /*#__PURE__*/_jsxs("defs", {
33
33
  children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
34
34
  const gradientId = getGradientId(axisId, 'y');
@@ -6,6 +6,10 @@ export * from '../ResponsiveChartContainer/ResizableContainer';
6
6
  // hooks
7
7
  export { useReducedMotion } from '../hooks/useReducedMotion';
8
8
  export { useSeries } from '../hooks/useSeries';
9
+ export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
10
+ export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
11
+ export { useLineChartProps } from '../LineChart/useLineChartProps';
12
+ export { useBarChartProps } from '../BarChart/useBarChartProps';
9
13
 
10
14
  // utils
11
15
  export * from './defaultizeValueFormatter';
@@ -13,12 +17,12 @@ export * from './configInit';
13
17
 
14
18
  // contexts
15
19
 
16
- export * from '../context/CartesianContextProvider';
20
+ export * from '../context/CartesianProvider';
17
21
  export * from '../context/DrawingProvider';
22
+ export * from '../context/ColorProvider';
18
23
  export * from '../context/InteractionProvider';
19
24
  export * from '../context/SeriesContextProvider';
20
25
  export * from '../context/ZAxisContextProvider';
21
-
22
26
  // series configuration
23
27
  export * from '../models/seriesType/config';
24
28
  export * from '../models/seriesType/common';
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useAxisEvents = void 0;
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  var _InteractionProvider = require("../context/InteractionProvider");
9
- var _CartesianContextProvider = require("../context/CartesianContextProvider");
9
+ var _CartesianProvider = require("../context/CartesianProvider");
10
10
  var _isBandScale = require("../internals/isBandScale");
11
11
  var _utils = require("../internals/utils");
12
12
  var _useSvgRef = require("./useSvgRef");
@@ -29,7 +29,7 @@ const useAxisEvents = disableAxisListener => {
29
29
  yAxis,
30
30
  xAxisIds,
31
31
  yAxisIds
32
- } = React.useContext(_CartesianContextProvider.CartesianContext);
32
+ } = (0, _CartesianProvider.useCartesianContext)();
33
33
  const {
34
34
  dispatch
35
35
  } = React.useContext(_InteractionProvider.InteractionContext);
@@ -7,7 +7,7 @@ exports.useXColorScale = useXColorScale;
7
7
  exports.useYColorScale = useYColorScale;
8
8
  exports.useZColorScale = useZColorScale;
9
9
  var React = _interopRequireWildcard(require("react"));
10
- var _CartesianContextProvider = require("../context/CartesianContextProvider");
10
+ var _CartesianProvider = require("../context/CartesianProvider");
11
11
  var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
12
12
  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); }
13
13
  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; }
@@ -15,7 +15,7 @@ function useXColorScale(identifier) {
15
15
  const {
16
16
  xAxis,
17
17
  xAxisIds
18
- } = React.useContext(_CartesianContextProvider.CartesianContext);
18
+ } = (0, _CartesianProvider.useCartesianContext)();
19
19
  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
20
20
  return xAxis[id].colorScale;
21
21
  }
@@ -23,7 +23,7 @@ function useYColorScale(identifier) {
23
23
  const {
24
24
  yAxis,
25
25
  yAxisIds
26
- } = React.useContext(_CartesianContextProvider.CartesianContext);
26
+ } = (0, _CartesianProvider.useCartesianContext)();
27
27
  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
28
28
  return yAxis[id].colorScale;
29
29
  }
@@ -1,8 +1,2 @@
1
- export declare function useDrawingArea(): {
2
- left: number;
3
- top: number;
4
- width: number;
5
- height: number;
6
- bottom: number;
7
- right: number;
8
- };
1
+ import { DrawingArea } from '../context/DrawingProvider';
2
+ export declare function useDrawingArea(): DrawingArea;
package/hooks/useScale.js CHANGED
@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.getValueToPositionMapper = getValueToPositionMapper;
7
7
  exports.useXScale = useXScale;
8
8
  exports.useYScale = useYScale;
9
- var React = _interopRequireWildcard(require("react"));
10
- var _CartesianContextProvider = require("../context/CartesianContextProvider");
9
+ var _CartesianProvider = require("../context/CartesianProvider");
11
10
  var _isBandScale = require("../internals/isBandScale");
12
- 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); }
13
- 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; }
14
11
  /**
15
12
  * For a given scale return a function that map value to their position.
16
13
  * Useful when dealing with specific scale such as band.
@@ -27,7 +24,7 @@ function useXScale(identifier) {
27
24
  const {
28
25
  xAxis,
29
26
  xAxisIds
30
- } = React.useContext(_CartesianContextProvider.CartesianContext);
27
+ } = (0, _CartesianProvider.useCartesianContext)();
31
28
  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
32
29
  return xAxis[id].scale;
33
30
  }
@@ -35,7 +32,7 @@ function useYScale(identifier) {
35
32
  const {
36
33
  yAxis,
37
34
  yAxisIds
38
- } = React.useContext(_CartesianContextProvider.CartesianContext);
35
+ } = (0, _CartesianProvider.useCartesianContext)();
39
36
  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
40
37
  return yAxis[id].scale;
41
38
  }
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts v7.7.0
2
+ * @mui/x-charts v7.7.1
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -1,3 +1,4 @@
1
1
  import * as React from 'react';
2
- export declare function useChartGradient(): (axisId: string, direction: 'x' | 'y') => string;
2
+ import { AxisId } from '../../../models/axis';
3
+ export declare function useChartGradient(): (axisId: AxisId, direction: 'x' | 'y') => string;
3
4
  export declare function ChartsAxesGradients(): React.JSX.Element;
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.ChartsAxesGradients = ChartsAxesGradients;
8
8
  exports.useChartGradient = useChartGradient;
9
9
  var React = _interopRequireWildcard(require("react"));
10
- var _CartesianContextProvider = require("../../../context/CartesianContextProvider");
10
+ var _CartesianProvider = require("../../../context/CartesianProvider");
11
11
  var _DrawingProvider = require("../../../context/DrawingProvider");
12
12
  var _hooks = require("../../../hooks");
13
13
  var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
@@ -38,7 +38,7 @@ function ChartsAxesGradients() {
38
38
  xAxis,
39
39
  yAxisIds,
40
40
  yAxis
41
- } = React.useContext(_CartesianContextProvider.CartesianContext);
41
+ } = (0, _CartesianProvider.useCartesianContext)();
42
42
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
43
43
  children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
44
44
  const gradientId = getGradientId(axisId, 'y');
@@ -3,13 +3,19 @@ export * from '../ResponsiveChartContainer/useChartContainerDimensions';
3
3
  export * from '../ResponsiveChartContainer/ResizableContainer';
4
4
  export { useReducedMotion } from '../hooks/useReducedMotion';
5
5
  export { useSeries } from '../hooks/useSeries';
6
+ export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
7
+ export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
8
+ export { useLineChartProps } from '../LineChart/useLineChartProps';
9
+ export { useBarChartProps } from '../BarChart/useBarChartProps';
6
10
  export * from './defaultizeValueFormatter';
7
11
  export * from './configInit';
8
- export * from '../context/CartesianContextProvider';
12
+ export * from '../context/CartesianProvider';
9
13
  export * from '../context/DrawingProvider';
14
+ export * from '../context/ColorProvider';
10
15
  export * from '../context/InteractionProvider';
11
16
  export * from '../context/SeriesContextProvider';
12
17
  export * from '../context/ZAxisContextProvider';
18
+ export type * from '../context/context.types';
13
19
  export * from '../models/seriesType/config';
14
20
  export * from '../models/seriesType/common';
15
21
  export * from '../models/helpers';
@@ -5,14 +5,42 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  var _exportNames = {
7
7
  useReducedMotion: true,
8
- useSeries: true
8
+ useSeries: true,
9
+ useChartContainerHooks: true,
10
+ useScatterChartProps: true,
11
+ useLineChartProps: true,
12
+ useBarChartProps: true
9
13
  };
14
+ Object.defineProperty(exports, "useBarChartProps", {
15
+ enumerable: true,
16
+ get: function () {
17
+ return _useBarChartProps.useBarChartProps;
18
+ }
19
+ });
20
+ Object.defineProperty(exports, "useChartContainerHooks", {
21
+ enumerable: true,
22
+ get: function () {
23
+ return _useChartContainerHooks.useChartContainerHooks;
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "useLineChartProps", {
27
+ enumerable: true,
28
+ get: function () {
29
+ return _useLineChartProps.useLineChartProps;
30
+ }
31
+ });
10
32
  Object.defineProperty(exports, "useReducedMotion", {
11
33
  enumerable: true,
12
34
  get: function () {
13
35
  return _useReducedMotion.useReducedMotion;
14
36
  }
15
37
  });
38
+ Object.defineProperty(exports, "useScatterChartProps", {
39
+ enumerable: true,
40
+ get: function () {
41
+ return _useScatterChartProps.useScatterChartProps;
42
+ }
43
+ });
16
44
  Object.defineProperty(exports, "useSeries", {
17
45
  enumerable: true,
18
46
  get: function () {
@@ -57,6 +85,10 @@ Object.keys(_ResizableContainer).forEach(function (key) {
57
85
  });
58
86
  var _useReducedMotion = require("../hooks/useReducedMotion");
59
87
  var _useSeries = require("../hooks/useSeries");
88
+ var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
89
+ var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
90
+ var _useLineChartProps = require("../LineChart/useLineChartProps");
91
+ var _useBarChartProps = require("../BarChart/useBarChartProps");
60
92
  var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
61
93
  Object.keys(_defaultizeValueFormatter).forEach(function (key) {
62
94
  if (key === "default" || key === "__esModule") return;
@@ -81,15 +113,15 @@ Object.keys(_configInit).forEach(function (key) {
81
113
  }
82
114
  });
83
115
  });
84
- var _CartesianContextProvider = require("../context/CartesianContextProvider");
85
- Object.keys(_CartesianContextProvider).forEach(function (key) {
116
+ var _CartesianProvider = require("../context/CartesianProvider");
117
+ Object.keys(_CartesianProvider).forEach(function (key) {
86
118
  if (key === "default" || key === "__esModule") return;
87
119
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
88
- if (key in exports && exports[key] === _CartesianContextProvider[key]) return;
120
+ if (key in exports && exports[key] === _CartesianProvider[key]) return;
89
121
  Object.defineProperty(exports, key, {
90
122
  enumerable: true,
91
123
  get: function () {
92
- return _CartesianContextProvider[key];
124
+ return _CartesianProvider[key];
93
125
  }
94
126
  });
95
127
  });
@@ -105,6 +137,18 @@ Object.keys(_DrawingProvider).forEach(function (key) {
105
137
  }
106
138
  });
107
139
  });
140
+ var _ColorProvider = require("../context/ColorProvider");
141
+ Object.keys(_ColorProvider).forEach(function (key) {
142
+ if (key === "default" || key === "__esModule") return;
143
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
144
+ if (key in exports && exports[key] === _ColorProvider[key]) return;
145
+ Object.defineProperty(exports, key, {
146
+ enumerable: true,
147
+ get: function () {
148
+ return _ColorProvider[key];
149
+ }
150
+ });
151
+ });
108
152
  var _InteractionProvider = require("../context/InteractionProvider");
109
153
  Object.keys(_InteractionProvider).forEach(function (key) {
110
154
  if (key === "default" || key === "__esModule") return;