@mui/x-charts 7.7.0 → 7.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BarChart/BarChart.js +21 -104
- package/BarChart/BarElement.d.ts +225 -228
- package/BarChart/BarLabel/BarLabel.d.ts +225 -228
- package/BarChart/BarLabel/BarLabelPlot.d.ts +0 -3
- package/BarChart/BarLabel/BarLabelPlot.js +1 -24
- package/BarChart/BarLabel/getBarLabel.d.ts +1 -1
- 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 +34 -0
- package/BarChart/useBarChartProps.js +143 -0
- package/CHANGELOG.md +181 -0
- package/ChartContainer/ChartContainer.d.ts +2 -2
- 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 +21 -6
- package/ChartsGrid/ChartsGrid.js +2 -2
- package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js +2 -2
- package/ChartsReferenceLine/common.d.ts +0 -1
- package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -2
- package/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
- package/ChartsTooltip/ChartsTooltipTable.d.ts +0 -1
- package/ChartsVoronoiHandler/ChartsVoronoiHandler.js +4 -4
- package/ChartsXAxis/ChartsXAxis.js +2 -2
- package/ChartsYAxis/ChartsYAxis.js +5 -3
- package/Gauge/GaugeProvider.d.ts +1 -1
- package/LineChart/AnimatedArea.d.ts +225 -228
- package/LineChart/AnimatedLine.d.ts +225 -228
- 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 +40 -0
- package/LineChart/useLineChartProps.js +152 -0
- package/PieChart/PieArc.d.ts +0 -1
- package/PieChart/PieArcLabel.d.ts +0 -1
- package/PieChart/dataTransform/transition.d.ts +0 -1
- package/ResponsiveChartContainer/ResizableContainer.d.ts +1 -2
- package/ScatterChart/ScatterChart.js +20 -75
- package/ScatterChart/ScatterPlot.js +2 -2
- package/ScatterChart/useScatterChartProps.d.ts +31 -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 +104 -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 +135 -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 +21 -6
- 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 +3 -3
- package/esm/ChartsXAxis/ChartsXAxis.js +2 -2
- package/esm/ChartsYAxis/ChartsYAxis.js +5 -3
- 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 +97 -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 +7 -10
- package/esm/hooks/useColorScale.js +3 -3
- package/esm/hooks/useScale.js +4 -5
- package/esm/hooks/useTicks.js +2 -1
- package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
- package/esm/internals/getSVGPoint.js +11 -0
- package/esm/internals/index.js +8 -2
- package/esm/internals/utils.js +0 -12
- package/hooks/useAxisEvents.js +8 -11
- package/hooks/useChartDimensions.d.ts +1 -1
- package/hooks/useColor.d.ts +1 -1
- package/hooks/useColorScale.js +3 -3
- package/hooks/useDrawingArea.d.ts +2 -8
- package/hooks/useScale.js +4 -7
- package/hooks/useTicks.js +2 -1
- package/index.js +1 -1
- package/internals/components/AxisSharedComponents.d.ts +0 -1
- package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts +2 -1
- package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
- package/internals/defaultizeColor.d.ts +68 -68
- package/internals/getSVGPoint.d.ts +6 -0
- package/internals/getSVGPoint.js +17 -0
- package/internals/getWordsByLines.d.ts +0 -1
- package/internals/index.d.ts +9 -1
- package/internals/index.js +69 -5
- package/internals/useAnimatedPath.d.ts +0 -1
- package/internals/utils.d.ts +0 -6
- package/internals/utils.js +0 -13
- package/models/axis.d.ts +1 -2
- 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 +135 -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 +21 -6
- 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 +3 -3
- package/modern/ChartsXAxis/ChartsXAxis.js +2 -2
- package/modern/ChartsYAxis/ChartsYAxis.js +5 -3
- 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 +97 -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 +7 -10
- package/modern/hooks/useColorScale.js +3 -3
- package/modern/hooks/useScale.js +4 -5
- package/modern/hooks/useTicks.js +2 -1
- package/modern/index.js +1 -1
- package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js +2 -2
- package/modern/internals/getSVGPoint.js +11 -0
- package/modern/internals/index.js +8 -2
- package/modern/internals/utils.js +0 -12
- 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,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.useScatterChartProps = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
/**
|
|
10
|
+
* A helper function that extracts ScatterChartProps from the input props
|
|
11
|
+
* and returns an object with props for the children components of ScatterChart.
|
|
12
|
+
*
|
|
13
|
+
* @param props The input props for ScatterChart
|
|
14
|
+
* @returns An object with props for the children components of ScatterChart
|
|
15
|
+
*/
|
|
16
|
+
const useScatterChartProps = props => {
|
|
17
|
+
const {
|
|
18
|
+
xAxis,
|
|
19
|
+
yAxis,
|
|
20
|
+
zAxis,
|
|
21
|
+
series,
|
|
22
|
+
tooltip,
|
|
23
|
+
axisHighlight,
|
|
24
|
+
voronoiMaxRadius,
|
|
25
|
+
disableVoronoi,
|
|
26
|
+
legend,
|
|
27
|
+
width,
|
|
28
|
+
height,
|
|
29
|
+
margin,
|
|
30
|
+
colors,
|
|
31
|
+
sx,
|
|
32
|
+
grid,
|
|
33
|
+
topAxis,
|
|
34
|
+
leftAxis,
|
|
35
|
+
rightAxis,
|
|
36
|
+
bottomAxis,
|
|
37
|
+
onItemClick,
|
|
38
|
+
children,
|
|
39
|
+
slots,
|
|
40
|
+
slotProps,
|
|
41
|
+
loading,
|
|
42
|
+
highlightedItem,
|
|
43
|
+
onHighlightChange
|
|
44
|
+
} = props;
|
|
45
|
+
const chartContainerProps = {
|
|
46
|
+
series: series.map(s => (0, _extends2.default)({
|
|
47
|
+
type: 'scatter'
|
|
48
|
+
}, s)),
|
|
49
|
+
width,
|
|
50
|
+
height,
|
|
51
|
+
margin,
|
|
52
|
+
colors,
|
|
53
|
+
xAxis,
|
|
54
|
+
yAxis,
|
|
55
|
+
sx,
|
|
56
|
+
highlightedItem,
|
|
57
|
+
onHighlightChange
|
|
58
|
+
};
|
|
59
|
+
const zAxisProps = {
|
|
60
|
+
zAxis
|
|
61
|
+
};
|
|
62
|
+
const voronoiHandlerProps = {
|
|
63
|
+
voronoiMaxRadius,
|
|
64
|
+
onItemClick: onItemClick
|
|
65
|
+
};
|
|
66
|
+
const chartsAxisProps = {
|
|
67
|
+
topAxis,
|
|
68
|
+
leftAxis,
|
|
69
|
+
rightAxis,
|
|
70
|
+
bottomAxis,
|
|
71
|
+
slots,
|
|
72
|
+
slotProps
|
|
73
|
+
};
|
|
74
|
+
const gridProps = {
|
|
75
|
+
vertical: grid?.vertical,
|
|
76
|
+
horizontal: grid?.horizontal
|
|
77
|
+
};
|
|
78
|
+
const scatterPlotProps = {
|
|
79
|
+
onItemClick: disableVoronoi ? onItemClick : undefined,
|
|
80
|
+
slots,
|
|
81
|
+
slotProps
|
|
82
|
+
};
|
|
83
|
+
const overlayProps = {
|
|
84
|
+
loading,
|
|
85
|
+
slots,
|
|
86
|
+
slotProps
|
|
87
|
+
};
|
|
88
|
+
const legendProps = (0, _extends2.default)({}, legend, {
|
|
89
|
+
slots,
|
|
90
|
+
slotProps
|
|
91
|
+
});
|
|
92
|
+
const axisHighlightProps = (0, _extends2.default)({
|
|
93
|
+
y: 'none',
|
|
94
|
+
x: 'none'
|
|
95
|
+
}, axisHighlight);
|
|
96
|
+
const tooltipProps = (0, _extends2.default)({
|
|
97
|
+
trigger: 'item'
|
|
98
|
+
}, tooltip, {
|
|
99
|
+
slots,
|
|
100
|
+
slotProps
|
|
101
|
+
});
|
|
102
|
+
return {
|
|
103
|
+
chartContainerProps,
|
|
104
|
+
zAxisProps,
|
|
105
|
+
voronoiHandlerProps,
|
|
106
|
+
chartsAxisProps,
|
|
107
|
+
gridProps,
|
|
108
|
+
scatterPlotProps,
|
|
109
|
+
overlayProps,
|
|
110
|
+
legendProps,
|
|
111
|
+
axisHighlightProps,
|
|
112
|
+
tooltipProps,
|
|
113
|
+
children
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
exports.useScatterChartProps = useScatterChartProps;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Initializable } from '../context.types';
|
|
3
|
+
import { AxisDefaultized, ScaleName, ChartsXAxisProps, ChartsYAxisProps, AxisId } from '../../models/axis';
|
|
4
|
+
export type DefaultizedAxisConfig<AxisProps> = {
|
|
5
|
+
[axisKey: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
|
|
6
|
+
};
|
|
7
|
+
export type CartesianContextState = {
|
|
8
|
+
/**
|
|
9
|
+
* Mapping from x-axis key to scaling configuration.
|
|
10
|
+
*/
|
|
11
|
+
xAxis: DefaultizedAxisConfig<ChartsXAxisProps>;
|
|
12
|
+
/**
|
|
13
|
+
* Mapping from y-axis key to scaling configuration.
|
|
14
|
+
*/
|
|
15
|
+
yAxis: DefaultizedAxisConfig<ChartsYAxisProps>;
|
|
16
|
+
/**
|
|
17
|
+
* The x-axes IDs sorted by order they got provided.
|
|
18
|
+
*/
|
|
19
|
+
xAxisIds: AxisId[];
|
|
20
|
+
/**
|
|
21
|
+
* The y-axes IDs sorted by order they got provided.
|
|
22
|
+
*/
|
|
23
|
+
yAxisIds: AxisId[];
|
|
24
|
+
};
|
|
25
|
+
export declare const CartesianContext: React.Context<Initializable<CartesianContextState>>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CartesianContext = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
10
|
+
const CartesianContext = exports.CartesianContext = /*#__PURE__*/React.createContext({
|
|
11
|
+
isInitialized: false,
|
|
12
|
+
data: {
|
|
13
|
+
xAxis: {},
|
|
14
|
+
yAxis: {},
|
|
15
|
+
xAxisIds: [],
|
|
16
|
+
yAxisIds: []
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
20
|
+
CartesianContext.displayName = 'CartesianContext';
|
|
21
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
|
|
3
|
+
import { DatasetType } from '../../models/seriesType/config';
|
|
4
|
+
import { MakeOptional } from '../../models/helpers';
|
|
5
|
+
import { ExtremumGettersConfig } from '../../models';
|
|
6
|
+
export type CartesianContextProviderProps = {
|
|
7
|
+
/**
|
|
8
|
+
* The configuration of the x-axes.
|
|
9
|
+
* If not provided, a default axis config is used.
|
|
10
|
+
* An array of [[AxisConfig]] objects.
|
|
11
|
+
*/
|
|
12
|
+
xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
|
|
13
|
+
/**
|
|
14
|
+
* The configuration of the y-axes.
|
|
15
|
+
* If not provided, a default axis config is used.
|
|
16
|
+
* An array of [[AxisConfig]] objects.
|
|
17
|
+
*/
|
|
18
|
+
yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
|
|
19
|
+
/**
|
|
20
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
21
|
+
*/
|
|
22
|
+
dataset?: DatasetType;
|
|
23
|
+
/**
|
|
24
|
+
* An object with x-axis extremum getters per series type.
|
|
25
|
+
*/
|
|
26
|
+
xExtremumGetters: ExtremumGettersConfig;
|
|
27
|
+
/**
|
|
28
|
+
* An object with y-axis extremum getters per series type.
|
|
29
|
+
*/
|
|
30
|
+
yExtremumGetters: ExtremumGettersConfig;
|
|
31
|
+
children: React.ReactNode;
|
|
32
|
+
};
|
|
33
|
+
declare function CartesianContextProvider(props: CartesianContextProviderProps): React.JSX.Element;
|
|
34
|
+
export { CartesianContextProvider };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CartesianContextProvider = CartesianContextProvider;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _useDrawingArea = require("../../hooks/useDrawingArea");
|
|
9
|
+
var _useSeries = require("../../hooks/useSeries");
|
|
10
|
+
var _CartesianContext = require("./CartesianContext");
|
|
11
|
+
var _normalizeAxis = require("./normalizeAxis");
|
|
12
|
+
var _computeValue = require("./computeValue");
|
|
13
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
+
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); }
|
|
15
|
+
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; }
|
|
16
|
+
function CartesianContextProvider(props) {
|
|
17
|
+
const {
|
|
18
|
+
xAxis: inXAxis,
|
|
19
|
+
yAxis: inYAxis,
|
|
20
|
+
dataset,
|
|
21
|
+
xExtremumGetters,
|
|
22
|
+
yExtremumGetters,
|
|
23
|
+
children
|
|
24
|
+
} = props;
|
|
25
|
+
const formattedSeries = (0, _useSeries.useSeries)();
|
|
26
|
+
const drawingArea = (0, _useDrawingArea.useDrawingArea)();
|
|
27
|
+
const xAxis = React.useMemo(() => (0, _normalizeAxis.normalizeAxis)(inXAxis, dataset, 'x'), [inXAxis, dataset]);
|
|
28
|
+
const yAxis = React.useMemo(() => (0, _normalizeAxis.normalizeAxis)(inYAxis, dataset, 'y'), [inYAxis, dataset]);
|
|
29
|
+
const xValues = React.useMemo(() => (0, _computeValue.computeValue)(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
|
|
30
|
+
const yValues = React.useMemo(() => (0, _computeValue.computeValue)(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
|
|
31
|
+
const value = React.useMemo(() => ({
|
|
32
|
+
isInitialized: true,
|
|
33
|
+
data: {
|
|
34
|
+
xAxis: xValues.axis,
|
|
35
|
+
yAxis: yValues.axis,
|
|
36
|
+
xAxisIds: xValues.axisIds,
|
|
37
|
+
yAxisIds: yValues.axisIds
|
|
38
|
+
}
|
|
39
|
+
}), [xValues, yValues]);
|
|
40
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContext.CartesianContext.Provider, {
|
|
41
|
+
value: value,
|
|
42
|
+
children: children
|
|
43
|
+
});
|
|
44
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { AxisConfig, ScaleName } from '../../models';
|
|
2
|
+
import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps } from '../../models/axis';
|
|
3
|
+
import { CartesianChartSeriesType, ExtremumGetter } from '../../models/seriesType/config';
|
|
4
|
+
import { DefaultizedAxisConfig } from './CartesianContext';
|
|
5
|
+
import { DrawingArea } from '../DrawingProvider';
|
|
6
|
+
import { FormattedSeries } from '../SeriesContextProvider';
|
|
7
|
+
import { MakeOptional } from '../../models/helpers';
|
|
8
|
+
export declare function computeValue(drawingArea: DrawingArea, formattedSeries: FormattedSeries, axis: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, extremumGetters: {
|
|
9
|
+
[K in CartesianChartSeriesType]?: ExtremumGetter<K>;
|
|
10
|
+
}, axisName: 'y'): {
|
|
11
|
+
axis: DefaultizedAxisConfig<ChartsYAxisProps>;
|
|
12
|
+
axisIds: string[];
|
|
13
|
+
};
|
|
14
|
+
export declare function computeValue(drawingArea: DrawingArea, formattedSeries: FormattedSeries, inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, extremumGetters: {
|
|
15
|
+
[K in CartesianChartSeriesType]?: ExtremumGetter<K>;
|
|
16
|
+
}, axisName: 'x'): {
|
|
17
|
+
axis: DefaultizedAxisConfig<ChartsAxisProps>;
|
|
18
|
+
axisIds: string[];
|
|
19
|
+
};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.computeValue = computeValue;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _d3Scale = require("d3-scale");
|
|
10
|
+
var _constants = require("../../constants");
|
|
11
|
+
var _axis = require("../../models/axis");
|
|
12
|
+
var _colorScale = require("../../internals/colorScale");
|
|
13
|
+
var _useTicks = require("../../hooks/useTicks");
|
|
14
|
+
var _getScale = require("../../internals/getScale");
|
|
15
|
+
var _getAxisExtremum = require("./getAxisExtremum");
|
|
16
|
+
const getRange = (drawingArea, axisName, isReverse) => {
|
|
17
|
+
const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
|
|
18
|
+
return isReverse ? range.reverse() : range;
|
|
19
|
+
};
|
|
20
|
+
const isDateData = data => data?.[0] instanceof Date;
|
|
21
|
+
function createDateFormatter(axis, range) {
|
|
22
|
+
const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
|
|
23
|
+
return (v, {
|
|
24
|
+
location
|
|
25
|
+
}) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
|
|
26
|
+
}
|
|
27
|
+
const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
|
|
28
|
+
const DEFAULT_BAR_GAP_RATIO = 0.1;
|
|
29
|
+
function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
|
|
30
|
+
const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
|
|
31
|
+
const allAxis = [...(inAxis?.map((axis, index) => (0, _extends2.default)({
|
|
32
|
+
id: `defaultized-${axisName}-axis-${index}`
|
|
33
|
+
}, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
|
|
34
|
+
id
|
|
35
|
+
}) => id === DEFAULT_AXIS_KEY) === -1 ? [{
|
|
36
|
+
id: DEFAULT_AXIS_KEY,
|
|
37
|
+
scaleType: 'linear'
|
|
38
|
+
}] : [])];
|
|
39
|
+
const completeAxis = {};
|
|
40
|
+
allAxis.forEach((axis, axisIndex) => {
|
|
41
|
+
const isDefaultAxis = axisIndex === 0;
|
|
42
|
+
const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, isDefaultAxis, formattedSeries);
|
|
43
|
+
const range = getRange(drawingArea, axisName, axis.reverse);
|
|
44
|
+
if ((0, _axis.isBandScaleConfig)(axis)) {
|
|
45
|
+
const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
|
|
46
|
+
const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
|
|
47
|
+
// Reverse range because ordinal scales are presented from top to bottom on y-axis
|
|
48
|
+
const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
|
|
49
|
+
completeAxis[axis.id] = (0, _extends2.default)({
|
|
50
|
+
categoryGapRatio,
|
|
51
|
+
barGapRatio
|
|
52
|
+
}, axis, {
|
|
53
|
+
scale: (0, _d3Scale.scaleBand)(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
|
|
54
|
+
tickNumber: axis.data.length,
|
|
55
|
+
colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
|
|
56
|
+
values: axis.data
|
|
57
|
+
}, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
|
|
58
|
+
});
|
|
59
|
+
if (isDateData(axis.data)) {
|
|
60
|
+
const dateFormatter = createDateFormatter(axis, scaleRange);
|
|
61
|
+
completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if ((0, _axis.isPointScaleConfig)(axis)) {
|
|
65
|
+
const scaleRange = axisName === 'x' ? range : [...range].reverse();
|
|
66
|
+
completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
|
|
67
|
+
scale: (0, _d3Scale.scalePoint)(axis.data, scaleRange),
|
|
68
|
+
tickNumber: axis.data.length,
|
|
69
|
+
colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
|
|
70
|
+
values: axis.data
|
|
71
|
+
}, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
|
|
72
|
+
});
|
|
73
|
+
if (isDateData(axis.data)) {
|
|
74
|
+
const dateFormatter = createDateFormatter(axis, scaleRange);
|
|
75
|
+
completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
if (axis.scaleType === 'band' || axis.scaleType === 'point') {
|
|
79
|
+
// Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
const scaleType = axis.scaleType ?? 'linear';
|
|
83
|
+
const extremums = [axis.min ?? minData, axis.max ?? maxData];
|
|
84
|
+
const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
|
|
85
|
+
range,
|
|
86
|
+
domain: extremums
|
|
87
|
+
}));
|
|
88
|
+
const scale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
|
|
89
|
+
const [minDomain, maxDomain] = scale.domain();
|
|
90
|
+
const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
|
|
91
|
+
completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
|
|
92
|
+
scaleType: scaleType,
|
|
93
|
+
scale: scale.domain(domain),
|
|
94
|
+
tickNumber,
|
|
95
|
+
colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
|
|
96
|
+
});
|
|
97
|
+
});
|
|
98
|
+
return {
|
|
99
|
+
axis: completeAxis,
|
|
100
|
+
axisIds: allAxis.map(({
|
|
101
|
+
id
|
|
102
|
+
}) => id)
|
|
103
|
+
};
|
|
104
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { AxisConfig, ExtremumGettersConfig } from '../../models';
|
|
2
|
+
import { ExtremumGetterResult } from '../../models/seriesType/config';
|
|
3
|
+
import { FormattedSeries } from '../SeriesContextProvider';
|
|
4
|
+
export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, isDefaultAxis: boolean, formattedSeries: FormattedSeries) => ExtremumGetterResult;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getAxisExtremum = void 0;
|
|
7
|
+
const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
|
|
8
|
+
const getter = getters[chartType];
|
|
9
|
+
const series = formattedSeries[chartType]?.series ?? {};
|
|
10
|
+
const [minChartTypeData, maxChartTypeData] = getter?.({
|
|
11
|
+
series,
|
|
12
|
+
axis,
|
|
13
|
+
isDefaultAxis
|
|
14
|
+
}) ?? [null, null];
|
|
15
|
+
const [minData, maxData] = acc;
|
|
16
|
+
if (minData === null || maxData === null) {
|
|
17
|
+
return [minChartTypeData, maxChartTypeData];
|
|
18
|
+
}
|
|
19
|
+
if (minChartTypeData === null || maxChartTypeData === null) {
|
|
20
|
+
return [minData, maxData];
|
|
21
|
+
}
|
|
22
|
+
return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
|
|
23
|
+
};
|
|
24
|
+
const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
|
|
25
|
+
const charTypes = Object.keys(getters);
|
|
26
|
+
return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
|
|
27
|
+
};
|
|
28
|
+
exports.getAxisExtremum = getAxisExtremum;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { computeValue } from './computeValue';
|
|
2
|
+
export * from './CartesianProvider';
|
|
3
|
+
export * from './CartesianContext';
|
|
4
|
+
export * from './useCartesianContext';
|
|
5
|
+
declare const cartesianProviderUtils: {
|
|
6
|
+
computeValue: typeof computeValue;
|
|
7
|
+
normalizeAxis: <T extends import("../../internals").ChartsAxisProps, R extends import("../../internals").MakeOptional<import("../..").AxisConfig<import("../..").ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: import("../../internals").DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;
|
|
8
|
+
};
|
|
9
|
+
export { cartesianProviderUtils };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
cartesianProviderUtils: true
|
|
8
|
+
};
|
|
9
|
+
exports.cartesianProviderUtils = void 0;
|
|
10
|
+
var _computeValue = require("./computeValue");
|
|
11
|
+
var _normalizeAxis = require("./normalizeAxis");
|
|
12
|
+
var _CartesianProvider = require("./CartesianProvider");
|
|
13
|
+
Object.keys(_CartesianProvider).forEach(function (key) {
|
|
14
|
+
if (key === "default" || key === "__esModule") return;
|
|
15
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
16
|
+
if (key in exports && exports[key] === _CartesianProvider[key]) return;
|
|
17
|
+
Object.defineProperty(exports, key, {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () {
|
|
20
|
+
return _CartesianProvider[key];
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
var _CartesianContext = require("./CartesianContext");
|
|
25
|
+
Object.keys(_CartesianContext).forEach(function (key) {
|
|
26
|
+
if (key === "default" || key === "__esModule") return;
|
|
27
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
28
|
+
if (key in exports && exports[key] === _CartesianContext[key]) return;
|
|
29
|
+
Object.defineProperty(exports, key, {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () {
|
|
32
|
+
return _CartesianContext[key];
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
var _useCartesianContext = require("./useCartesianContext");
|
|
37
|
+
Object.keys(_useCartesianContext).forEach(function (key) {
|
|
38
|
+
if (key === "default" || key === "__esModule") return;
|
|
39
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
40
|
+
if (key in exports && exports[key] === _useCartesianContext[key]) return;
|
|
41
|
+
Object.defineProperty(exports, key, {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return _useCartesianContext[key];
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
const cartesianProviderUtils = exports.cartesianProviderUtils = {
|
|
49
|
+
computeValue: _computeValue.computeValue,
|
|
50
|
+
normalizeAxis: _normalizeAxis.normalizeAxis
|
|
51
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { AxisConfig, ScaleName } from '../../models';
|
|
2
|
+
import { ChartsAxisProps } from '../../models/axis';
|
|
3
|
+
import { MakeOptional } from '../../models/helpers';
|
|
4
|
+
import { DatasetType } from '../../models/seriesType/config';
|
|
5
|
+
export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.normalizeAxis = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
const normalizeAxis = (axis, dataset, axisName) => {
|
|
10
|
+
return axis?.map(axisConfig => {
|
|
11
|
+
const dataKey = axisConfig.dataKey;
|
|
12
|
+
if (dataKey === undefined || axisConfig.data !== undefined) {
|
|
13
|
+
return axisConfig;
|
|
14
|
+
}
|
|
15
|
+
if (dataset === undefined) {
|
|
16
|
+
throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
|
|
17
|
+
}
|
|
18
|
+
return (0, _extends2.default)({}, axisConfig, {
|
|
19
|
+
data: dataset.map(d => d[dataKey])
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
exports.normalizeAxis = normalizeAxis;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useCartesianContext = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _CartesianContext = require("./CartesianContext");
|
|
9
|
+
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); }
|
|
10
|
+
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; }
|
|
11
|
+
const useCartesianContext = () => {
|
|
12
|
+
const {
|
|
13
|
+
data
|
|
14
|
+
} = React.useContext(_CartesianContext.CartesianContext);
|
|
15
|
+
return data;
|
|
16
|
+
};
|
|
17
|
+
exports.useCartesianContext = useCartesianContext;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ColorProcessorsConfig } from '../models';
|
|
3
|
-
import { ChartSeriesType } from '../
|
|
3
|
+
import { ChartSeriesType } from '../models/seriesType/config';
|
|
4
4
|
export interface ColorProviderProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
/**
|
|
@@ -8,5 +8,5 @@ export interface ColorProviderProps {
|
|
|
8
8
|
*/
|
|
9
9
|
colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
|
|
10
10
|
}
|
|
11
|
-
export declare const ColorContext: React.Context<ColorProcessorsConfig<keyof import("../
|
|
11
|
+
export declare const ColorContext: React.Context<ColorProcessorsConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>>;
|
|
12
12
|
export declare function ColorProvider(props: ColorProviderProps): React.JSX.Element;
|