@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.
- package/BarChart/BarChart.js +21 -104
- package/BarChart/BarLabel/BarLabelPlot.d.ts +0 -3
- package/BarChart/BarLabel/BarLabelPlot.js +1 -24
- package/BarChart/BarPlot.js +2 -2
- package/BarChart/checkScaleErrors.d.ts +5 -9
- package/BarChart/types.d.ts +2 -2
- package/BarChart/useBarChartProps.d.ts +102 -0
- package/BarChart/useBarChartProps.js +143 -0
- package/CHANGELOG.md +82 -0
- package/ChartContainer/ChartContainer.d.ts +1 -1
- package/ChartContainer/ChartContainer.js +6 -10
- package/ChartContainer/useChartContainerHooks.d.ts +11 -0
- package/ChartContainer/useChartContainerHooks.js +34 -0
- package/ChartContainer/usePluginsMerge.d.ts +1 -2
- package/ChartsAxis/ChartsAxis.js +2 -2
- package/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
- package/ChartsGrid/ChartsGrid.js +2 -2
- package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
- package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
- package/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
- package/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -2
- package/ChartsXAxis/ChartsXAxis.js +2 -2
- package/ChartsYAxis/ChartsYAxis.js +2 -2
- package/LineChart/AreaPlot.js +2 -2
- package/LineChart/LineChart.js +24 -106
- package/LineChart/LineHighlightPlot.js +2 -2
- package/LineChart/LinePlot.js +2 -2
- package/LineChart/MarkPlot.js +2 -2
- package/LineChart/useLineChartProps.d.ts +117 -0
- package/LineChart/useLineChartProps.js +152 -0
- package/ScatterChart/ScatterChart.js +20 -75
- package/ScatterChart/ScatterPlot.js +2 -2
- package/ScatterChart/useScatterChartProps.d.ts +86 -0
- package/ScatterChart/useScatterChartProps.js +116 -0
- package/context/CartesianProvider/CartesianContext.d.ts +25 -0
- package/context/CartesianProvider/CartesianContext.js +21 -0
- package/context/CartesianProvider/CartesianProvider.d.ts +34 -0
- package/context/CartesianProvider/CartesianProvider.js +44 -0
- package/context/CartesianProvider/computeValue.d.ts +19 -0
- package/context/CartesianProvider/computeValue.js +89 -0
- package/context/CartesianProvider/getAxisExtremum.d.ts +4 -0
- package/context/CartesianProvider/getAxisExtremum.js +28 -0
- package/context/CartesianProvider/index.d.ts +9 -0
- package/context/CartesianProvider/index.js +51 -0
- package/context/CartesianProvider/normalizeAxis.d.ts +5 -0
- package/context/CartesianProvider/normalizeAxis.js +23 -0
- package/context/CartesianProvider/useCartesianContext.d.ts +2 -0
- package/context/CartesianProvider/useCartesianContext.js +17 -0
- package/context/ColorProvider.d.ts +2 -2
- package/esm/BarChart/BarChart.js +21 -104
- package/esm/BarChart/BarLabel/BarLabelPlot.js +0 -23
- package/esm/BarChart/BarPlot.js +2 -2
- package/esm/BarChart/useBarChartProps.js +136 -0
- package/esm/ChartContainer/ChartContainer.js +5 -9
- package/esm/ChartContainer/useChartContainerHooks.js +24 -0
- package/esm/ChartsAxis/ChartsAxis.js +2 -2
- package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
- package/esm/ChartsGrid/ChartsGrid.js +2 -2
- package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
- package/esm/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
- package/esm/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
- package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -2
- package/esm/ChartsXAxis/ChartsXAxis.js +2 -2
- package/esm/ChartsYAxis/ChartsYAxis.js +2 -2
- package/esm/LineChart/AreaPlot.js +2 -2
- package/esm/LineChart/LineChart.js +24 -106
- package/esm/LineChart/LineHighlightPlot.js +2 -2
- package/esm/LineChart/LinePlot.js +2 -2
- package/esm/LineChart/MarkPlot.js +2 -2
- package/esm/LineChart/useLineChartProps.js +144 -0
- package/esm/ScatterChart/ScatterChart.js +20 -75
- package/esm/ScatterChart/ScatterPlot.js +2 -2
- package/esm/ScatterChart/useScatterChartProps.js +108 -0
- package/esm/context/CartesianProvider/CartesianContext.js +13 -0
- package/esm/context/CartesianProvider/CartesianProvider.js +37 -0
- package/esm/context/CartesianProvider/computeValue.js +82 -0
- package/esm/context/CartesianProvider/getAxisExtremum.js +21 -0
- package/esm/context/CartesianProvider/index.js +10 -0
- package/esm/context/CartesianProvider/normalizeAxis.js +15 -0
- package/esm/context/CartesianProvider/useCartesianContext.js +8 -0
- package/esm/hooks/useAxisEvents.js +2 -2
- package/esm/hooks/useColorScale.js +3 -3
- package/esm/hooks/useScale.js +3 -4
- package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
- package/esm/internals/index.js +6 -2
- package/hooks/useAxisEvents.js +2 -2
- package/hooks/useColorScale.js +3 -3
- package/hooks/useDrawingArea.d.ts +2 -8
- package/hooks/useScale.js +3 -6
- package/index.js +1 -1
- package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts +2 -1
- package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
- package/internals/index.d.ts +7 -1
- package/internals/index.js +49 -5
- package/models/plugin.d.ts +4 -1
- package/modern/BarChart/BarChart.js +21 -104
- package/modern/BarChart/BarLabel/BarLabelPlot.js +0 -23
- package/modern/BarChart/BarPlot.js +2 -2
- package/modern/BarChart/useBarChartProps.js +136 -0
- package/modern/ChartContainer/ChartContainer.js +5 -9
- package/modern/ChartContainer/useChartContainerHooks.js +24 -0
- package/modern/ChartsAxis/ChartsAxis.js +2 -2
- package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js +2 -2
- package/modern/ChartsGrid/ChartsGrid.js +2 -2
- package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
- package/modern/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
- package/modern/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
- package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js +2 -2
- package/modern/ChartsXAxis/ChartsXAxis.js +2 -2
- package/modern/ChartsYAxis/ChartsYAxis.js +2 -2
- package/modern/LineChart/AreaPlot.js +2 -2
- package/modern/LineChart/LineChart.js +24 -106
- package/modern/LineChart/LineHighlightPlot.js +2 -2
- package/modern/LineChart/LinePlot.js +2 -2
- package/modern/LineChart/MarkPlot.js +2 -2
- package/modern/LineChart/useLineChartProps.js +144 -0
- package/modern/ScatterChart/ScatterChart.js +20 -75
- package/modern/ScatterChart/ScatterPlot.js +2 -2
- package/modern/ScatterChart/useScatterChartProps.js +108 -0
- package/modern/context/CartesianProvider/CartesianContext.js +13 -0
- package/modern/context/CartesianProvider/CartesianProvider.js +37 -0
- package/modern/context/CartesianProvider/computeValue.js +82 -0
- package/modern/context/CartesianProvider/getAxisExtremum.js +21 -0
- package/modern/context/CartesianProvider/index.js +10 -0
- package/modern/context/CartesianProvider/normalizeAxis.js +15 -0
- package/modern/context/CartesianProvider/useCartesianContext.js +8 -0
- package/modern/hooks/useAxisEvents.js +2 -2
- package/modern/hooks/useColorScale.js +3 -3
- package/modern/hooks/useScale.js +3 -4
- package/modern/index.js +1 -1
- package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
- package/modern/internals/index.js +6 -2
- package/package.json +3 -3
- package/context/CartesianContextProvider.d.ts +0 -61
- package/context/CartesianContextProvider.js +0 -220
- package/esm/context/CartesianContextProvider.js +0 -211
- 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
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { InteractionContext } from '../context/InteractionProvider';
|
|
3
|
-
import {
|
|
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
|
-
} =
|
|
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 {
|
|
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
|
-
} =
|
|
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
|
-
} =
|
|
16
|
+
} = useCartesianContext();
|
|
17
17
|
const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
|
|
18
18
|
return yAxis[id].colorScale;
|
|
19
19
|
}
|
package/esm/hooks/useScale.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
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
|
-
} =
|
|
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
|
-
} =
|
|
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 {
|
|
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
|
-
} =
|
|
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');
|
package/esm/internals/index.js
CHANGED
|
@@ -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/
|
|
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';
|
package/hooks/useAxisEvents.js
CHANGED
|
@@ -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
|
|
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
|
-
} =
|
|
32
|
+
} = (0, _CartesianProvider.useCartesianContext)();
|
|
33
33
|
const {
|
|
34
34
|
dispatch
|
|
35
35
|
} = React.useContext(_InteractionProvider.InteractionContext);
|
package/hooks/useColorScale.js
CHANGED
|
@@ -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
|
|
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
|
-
} =
|
|
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
|
-
} =
|
|
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
|
-
|
|
2
|
-
|
|
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
|
|
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
|
-
} =
|
|
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
|
-
} =
|
|
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,3 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
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
|
|
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
|
-
} =
|
|
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');
|
package/internals/index.d.ts
CHANGED
|
@@ -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/
|
|
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';
|
package/internals/index.js
CHANGED
|
@@ -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
|
|
85
|
-
Object.keys(
|
|
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] ===
|
|
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
|
|
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;
|