@mui/x-charts 7.0.0-alpha.7 → 7.0.0-alpha.9
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 +1 -0
- package/BarChart/BarElement.d.ts +37 -20
- package/BarChart/BarPlot.js +4 -4
- package/BarChart/formatter.js +2 -2
- package/CHANGELOG.md +554 -51
- package/ChartsAxis/ChartsAxis.js +4 -4
- package/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
- package/ChartsSurface.d.ts +2 -2
- package/ChartsSurface.js +33 -1
- package/ChartsTooltip/ChartsTooltipTable.d.ts +1 -1
- package/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/ChartsTooltip/DefaultChartsItemTooltipContent.js +2 -4
- package/LineChart/AreaPlot.js +2 -2
- package/LineChart/LineChart.d.ts +1 -0
- package/LineChart/LineChart.js +2 -0
- package/LineChart/LineHighlightPlot.js +1 -1
- package/LineChart/LinePlot.js +2 -2
- package/LineChart/MarkPlot.js +1 -1
- package/LineChart/formatter.js +7 -3
- package/PieChart/PieArcLabel.js +1 -1
- package/PieChart/PieArcLabelPlot.d.ts +5 -0
- package/PieChart/PieArcLabelPlot.js +2 -0
- package/PieChart/PieArcPlot.d.ts +5 -0
- package/PieChart/PieArcPlot.js +1 -0
- package/PieChart/PieChart.d.ts +14 -2
- package/PieChart/PieChart.js +3 -2
- package/README.md +1 -1
- package/ResponsiveChartContainer/index.js +2 -2
- package/ScatterChart/ScatterChart.js +1 -0
- package/SparkLineChart/SparkLineChart.d.ts +16 -2
- package/SparkLineChart/SparkLineChart.js +9 -2
- package/context/CartesianContextProvider.d.ts +1 -1
- package/context/CartesianContextProvider.js +9 -8
- package/context/DrawingProvider.d.ts +1 -1
- package/context/DrawingProvider.js +8 -7
- package/context/HighlightProvider.d.ts +2 -2
- package/context/HighlightProvider.js +4 -3
- package/context/InteractionProvider.d.ts +2 -2
- package/context/InteractionProvider.js +4 -3
- package/context/SeriesContextProvider.d.ts +3 -1
- package/context/SeriesContextProvider.js +8 -7
- package/esm/BarChart/BarChart.js +1 -0
- package/esm/BarChart/BarPlot.js +4 -4
- package/esm/BarChart/formatter.js +2 -2
- package/esm/ChartsAxis/ChartsAxis.js +4 -4
- package/esm/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
- package/esm/ChartsSurface.js +35 -2
- package/esm/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js +3 -4
- package/esm/LineChart/AreaPlot.js +2 -2
- package/esm/LineChart/LineChart.js +2 -0
- package/esm/LineChart/LineHighlightPlot.js +1 -1
- package/esm/LineChart/LinePlot.js +2 -2
- package/esm/LineChart/MarkPlot.js +1 -1
- package/esm/LineChart/formatter.js +7 -3
- package/esm/PieChart/PieArcLabel.js +1 -1
- package/esm/PieChart/PieArcLabelPlot.js +2 -0
- package/esm/PieChart/PieArcPlot.js +1 -0
- package/esm/PieChart/PieChart.js +3 -2
- package/esm/ResponsiveChartContainer/index.js +2 -2
- package/esm/ScatterChart/ScatterChart.js +1 -0
- package/esm/SparkLineChart/SparkLineChart.js +9 -2
- package/esm/context/CartesianContextProvider.js +9 -8
- package/esm/context/DrawingProvider.js +8 -7
- package/esm/context/HighlightProvider.js +6 -4
- package/esm/context/InteractionProvider.js +6 -4
- package/esm/context/SeriesContextProvider.js +10 -8
- package/esm/hooks/useAxisEvents.js +1 -3
- package/esm/index.js +1 -0
- package/esm/internals/domUtils.js +3 -1
- package/esm/internals/stackSeries.js +5 -3
- package/esm/models/index.js +1 -0
- package/esm/models/stacking.js +1 -0
- package/hooks/useAxisEvents.js +1 -3
- package/index.d.ts +1 -0
- package/index.js +12 -1
- package/internals/defaultizeColor.d.ts +9 -9
- package/internals/domUtils.js +3 -1
- package/internals/stackSeries.d.ts +8 -3
- package/internals/stackSeries.js +4 -3
- package/legacy/BarChart/BarChart.js +1 -0
- package/legacy/BarChart/BarPlot.js +4 -4
- package/legacy/BarChart/formatter.js +2 -2
- package/legacy/ChartsAxis/ChartsAxis.js +4 -4
- package/legacy/ChartsReferenceLine/ChartsReferenceLine.js +7 -5
- package/legacy/ChartsSurface.js +35 -2
- package/legacy/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js +3 -4
- package/legacy/LineChart/AreaPlot.js +2 -2
- package/legacy/LineChart/LineChart.js +2 -0
- package/legacy/LineChart/LineHighlightPlot.js +1 -1
- package/legacy/LineChart/LinePlot.js +2 -2
- package/legacy/LineChart/MarkPlot.js +1 -1
- package/legacy/LineChart/formatter.js +8 -4
- package/legacy/PieChart/PieArcLabel.js +3 -1
- package/legacy/PieChart/PieArcLabelPlot.js +2 -0
- package/legacy/PieChart/PieArcPlot.js +1 -0
- package/legacy/PieChart/PieChart.js +3 -2
- package/legacy/ResponsiveChartContainer/index.js +2 -2
- package/legacy/ScatterChart/ScatterChart.js +1 -0
- package/legacy/SparkLineChart/SparkLineChart.js +9 -2
- package/legacy/context/CartesianContextProvider.js +17 -17
- package/legacy/context/DrawingProvider.js +6 -6
- package/legacy/context/HighlightProvider.js +4 -3
- package/legacy/context/InteractionProvider.js +4 -3
- package/legacy/context/SeriesContextProvider.js +9 -8
- package/legacy/hooks/useAxisEvents.js +1 -3
- package/legacy/index.js +2 -1
- package/legacy/internals/domUtils.js +3 -3
- package/legacy/internals/stackSeries.js +5 -3
- package/legacy/models/index.js +1 -0
- package/legacy/models/stacking.js +1 -0
- package/models/index.d.ts +1 -0
- package/models/index.js +11 -0
- package/models/seriesType/bar.d.ts +8 -2
- package/models/seriesType/common.d.ts +3 -4
- package/models/seriesType/index.d.ts +0 -1
- package/models/seriesType/line.d.ts +7 -1
- package/models/seriesType/pie.d.ts +1 -0
- package/models/stacking.d.ts +2 -0
- package/models/stacking.js +5 -0
- package/modern/BarChart/BarChart.js +1 -0
- package/modern/BarChart/BarPlot.js +4 -4
- package/modern/BarChart/formatter.js +2 -2
- package/modern/ChartsAxis/ChartsAxis.js +4 -4
- package/modern/ChartsReferenceLine/ChartsReferenceLine.js +9 -5
- package/modern/ChartsSurface.js +35 -2
- package/modern/ChartsTooltip/ChartsTooltipTable.js +2 -0
- package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js +2 -4
- package/modern/LineChart/AreaPlot.js +2 -2
- package/modern/LineChart/LineChart.js +2 -0
- package/modern/LineChart/LineHighlightPlot.js +1 -1
- package/modern/LineChart/LinePlot.js +2 -2
- package/modern/LineChart/MarkPlot.js +1 -1
- package/modern/LineChart/formatter.js +7 -3
- package/modern/PieChart/PieArcLabel.js +1 -1
- package/modern/PieChart/PieArcLabelPlot.js +2 -0
- package/modern/PieChart/PieArcPlot.js +1 -0
- package/modern/PieChart/PieChart.js +3 -2
- package/modern/ResponsiveChartContainer/index.js +2 -2
- package/modern/ScatterChart/ScatterChart.js +1 -0
- package/modern/SparkLineChart/SparkLineChart.js +9 -2
- package/modern/context/CartesianContextProvider.js +9 -8
- package/modern/context/DrawingProvider.js +8 -7
- package/modern/context/HighlightProvider.js +6 -4
- package/modern/context/InteractionProvider.js +6 -4
- package/modern/context/SeriesContextProvider.js +10 -8
- package/modern/hooks/useAxisEvents.js +1 -3
- package/modern/index.js +2 -1
- package/modern/internals/domUtils.js +3 -1
- package/modern/internals/stackSeries.js +4 -3
- package/modern/models/index.js +1 -0
- package/modern/models/stacking.js +1 -0
- package/package.json +7 -7
|
@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
// DOM utils taken from
|
|
3
3
|
// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
function isSsr() {
|
|
6
|
+
return typeof window === 'undefined';
|
|
7
|
+
}
|
|
6
8
|
const stringCache = {
|
|
7
9
|
widthCache: {},
|
|
8
10
|
cacheCount: 0
|
|
@@ -56,7 +56,8 @@ export const StackOffset = {
|
|
|
56
56
|
export const getStackingGroups = params => {
|
|
57
57
|
const {
|
|
58
58
|
series,
|
|
59
|
-
seriesOrder
|
|
59
|
+
seriesOrder,
|
|
60
|
+
defaultStrategy
|
|
60
61
|
} = params;
|
|
61
62
|
const stackingGroups = [];
|
|
62
63
|
const stackIndex = {};
|
|
@@ -73,11 +74,12 @@ export const getStackingGroups = params => {
|
|
|
73
74
|
stackingOffset: StackOffset.none
|
|
74
75
|
});
|
|
75
76
|
} else if (stackIndex[stack] === undefined) {
|
|
77
|
+
var _ref, _ref2;
|
|
76
78
|
stackIndex[stack] = stackingGroups.length;
|
|
77
79
|
stackingGroups.push({
|
|
78
80
|
ids: [id],
|
|
79
|
-
stackingOrder: StackOrder[stackOrder != null ? stackOrder : 'none'],
|
|
80
|
-
stackingOffset: StackOffset[stackOffset != null ? stackOffset : 'diverging']
|
|
81
|
+
stackingOrder: StackOrder[(_ref = stackOrder != null ? stackOrder : defaultStrategy == null ? void 0 : defaultStrategy.stackOrder) != null ? _ref : 'none'],
|
|
82
|
+
stackingOffset: StackOffset[(_ref2 = stackOffset != null ? stackOffset : defaultStrategy == null ? void 0 : defaultStrategy.stackOffset) != null ? _ref2 : 'diverging']
|
|
81
83
|
});
|
|
82
84
|
} else {
|
|
83
85
|
stackingGroups[stackIndex[stack]].ids.push(id);
|
package/esm/models/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/hooks/useAxisEvents.js
CHANGED
|
@@ -69,9 +69,7 @@ const useAxisEvents = disableAxisListener => {
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
if (v <= valueAsNumber) {
|
|
72
|
-
if (index === axisData.length - 1 ||
|
|
73
|
-
// @ts-ignore
|
|
74
|
-
Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
|
|
72
|
+
if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
|
|
75
73
|
return true;
|
|
76
74
|
}
|
|
77
75
|
}
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-charts v7.0.0-alpha.
|
|
2
|
+
* @mui/x-charts v7.0.0-alpha.9
|
|
3
3
|
*
|
|
4
4
|
* @license MIT
|
|
5
5
|
* This source code is licensed under the MIT license found in the
|
|
@@ -241,6 +241,17 @@ Object.keys(_ChartContainer).forEach(function (key) {
|
|
|
241
241
|
}
|
|
242
242
|
});
|
|
243
243
|
});
|
|
244
|
+
var _ChartsSurface = require("./ChartsSurface");
|
|
245
|
+
Object.keys(_ChartsSurface).forEach(function (key) {
|
|
246
|
+
if (key === "default" || key === "__esModule") return;
|
|
247
|
+
if (key in exports && exports[key] === _ChartsSurface[key]) return;
|
|
248
|
+
Object.defineProperty(exports, key, {
|
|
249
|
+
enumerable: true,
|
|
250
|
+
get: function () {
|
|
251
|
+
return _ChartsSurface[key];
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
});
|
|
244
255
|
var _ResponsiveChartContainer = require("./ResponsiveChartContainer");
|
|
245
256
|
Object.keys(_ResponsiveChartContainer).forEach(function (key) {
|
|
246
257
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -39,23 +39,23 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
|
|
|
39
39
|
} | undefined;
|
|
40
40
|
id?: string | undefined;
|
|
41
41
|
color?: string | undefined;
|
|
42
|
-
valueFormatter?: (
|
|
42
|
+
valueFormatter?: (<V extends import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">>(value: V) => string) | undefined;
|
|
43
43
|
highlightScope?: Partial<import("..").HighlightScope> | undefined;
|
|
44
44
|
} | {
|
|
45
45
|
type: "bar";
|
|
46
|
-
data?: number[] | undefined;
|
|
46
|
+
data?: (number | null)[] | undefined;
|
|
47
47
|
dataKey?: string | undefined;
|
|
48
48
|
label?: string | undefined;
|
|
49
49
|
layout?: "horizontal" | "vertical" | undefined;
|
|
50
|
+
stackOffset?: import("..").StackOffsetType | undefined;
|
|
50
51
|
id?: string | undefined;
|
|
51
52
|
color: string;
|
|
52
|
-
valueFormatter?: ((value:
|
|
53
|
+
valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
|
|
53
54
|
highlightScope?: Partial<import("..").HighlightScope> | undefined;
|
|
54
55
|
xAxisKey?: string | undefined;
|
|
55
56
|
yAxisKey?: string | undefined;
|
|
56
57
|
stack?: string | undefined;
|
|
57
|
-
|
|
58
|
-
stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
|
|
58
|
+
stackOrder?: import("..").StackOrderType | undefined;
|
|
59
59
|
} | {
|
|
60
60
|
type: "line";
|
|
61
61
|
data?: (number | null)[] | undefined;
|
|
@@ -67,14 +67,14 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
|
|
|
67
67
|
showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
|
|
68
68
|
disableHighlight?: boolean | undefined;
|
|
69
69
|
connectNulls?: boolean | undefined;
|
|
70
|
+
stackOffset?: import("..").StackOffsetType | undefined;
|
|
70
71
|
id?: string | undefined;
|
|
71
72
|
color: string;
|
|
72
|
-
valueFormatter?: ((value:
|
|
73
|
+
valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
|
|
73
74
|
highlightScope?: Partial<import("..").HighlightScope> | undefined;
|
|
74
75
|
xAxisKey?: string | undefined;
|
|
75
76
|
yAxisKey?: string | undefined;
|
|
76
|
-
|
|
77
|
-
stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
|
|
77
|
+
stackOrder?: import("..").StackOrderType | undefined;
|
|
78
78
|
} | {
|
|
79
79
|
type: "scatter";
|
|
80
80
|
data: import("../models/seriesType").ScatterValueType[];
|
|
@@ -83,7 +83,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
|
|
|
83
83
|
disableHover?: boolean | undefined;
|
|
84
84
|
id?: string | undefined;
|
|
85
85
|
color: string;
|
|
86
|
-
valueFormatter?: (
|
|
86
|
+
valueFormatter?: (<V_2 extends import("../models/seriesType").ScatterValueType>(value: V_2) => string) | undefined;
|
|
87
87
|
highlightScope?: Partial<import("..").HighlightScope> | undefined;
|
|
88
88
|
xAxisKey?: string | undefined;
|
|
89
89
|
yAxisKey?: string | undefined;
|
package/internals/domUtils.js
CHANGED
|
@@ -9,7 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
// DOM utils taken from
|
|
10
10
|
// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
function isSsr() {
|
|
13
|
+
return typeof window === 'undefined';
|
|
14
|
+
}
|
|
13
15
|
const stringCache = {
|
|
14
16
|
widthCache: {},
|
|
15
17
|
cacheCount: 0
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Series } from 'd3-shape';
|
|
2
|
-
import { BarSeriesType, LineSeriesType } from '../models/seriesType';
|
|
2
|
+
import type { BarSeriesType, LineSeriesType } from '../models/seriesType';
|
|
3
|
+
import type { StackOffsetType, StackOrderType } from '../models/stacking';
|
|
3
4
|
type StackableSeries = {
|
|
4
5
|
[id: string]: BarSeriesType;
|
|
5
6
|
} | {
|
|
@@ -8,6 +9,10 @@ type StackableSeries = {
|
|
|
8
9
|
type FormatterParams = {
|
|
9
10
|
series: StackableSeries;
|
|
10
11
|
seriesOrder: string[];
|
|
12
|
+
defaultStrategy?: {
|
|
13
|
+
stackOrder?: StackOrderType;
|
|
14
|
+
stackOffset?: StackOffsetType;
|
|
15
|
+
};
|
|
11
16
|
};
|
|
12
17
|
export type StackingGroupsType = {
|
|
13
18
|
ids: string[];
|
|
@@ -15,10 +20,10 @@ export type StackingGroupsType = {
|
|
|
15
20
|
stackingOffset: (series: Series<any, any>, order: Iterable<number>) => void;
|
|
16
21
|
}[];
|
|
17
22
|
export declare const StackOrder: {
|
|
18
|
-
[key in
|
|
23
|
+
[key in StackOrderType]: (series: Series<any, any>) => number[];
|
|
19
24
|
};
|
|
20
25
|
export declare const StackOffset: {
|
|
21
|
-
[key in
|
|
26
|
+
[key in StackOffsetType]: (series: Series<any, any>, order: Iterable<number>) => void;
|
|
22
27
|
};
|
|
23
28
|
/**
|
|
24
29
|
* Takes a set of series and groups their ids
|
package/internals/stackSeries.js
CHANGED
|
@@ -62,7 +62,8 @@ const StackOffset = exports.StackOffset = {
|
|
|
62
62
|
const getStackingGroups = params => {
|
|
63
63
|
const {
|
|
64
64
|
series,
|
|
65
|
-
seriesOrder
|
|
65
|
+
seriesOrder,
|
|
66
|
+
defaultStrategy
|
|
66
67
|
} = params;
|
|
67
68
|
const stackingGroups = [];
|
|
68
69
|
const stackIndex = {};
|
|
@@ -82,8 +83,8 @@ const getStackingGroups = params => {
|
|
|
82
83
|
stackIndex[stack] = stackingGroups.length;
|
|
83
84
|
stackingGroups.push({
|
|
84
85
|
ids: [id],
|
|
85
|
-
stackingOrder: StackOrder[stackOrder ?? 'none'],
|
|
86
|
-
stackingOffset: StackOffset[stackOffset ?? 'diverging']
|
|
86
|
+
stackingOrder: StackOrder[stackOrder ?? defaultStrategy?.stackOrder ?? 'none'],
|
|
87
|
+
stackingOffset: StackOffset[stackOffset ?? defaultStrategy?.stackOffset ?? 'diverging']
|
|
87
88
|
});
|
|
88
89
|
} else {
|
|
89
90
|
stackingGroups[stackIndex[stack]].ids.push(id);
|
|
@@ -161,6 +161,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
|
|
|
161
161
|
className: PropTypes.string,
|
|
162
162
|
/**
|
|
163
163
|
* Color palette used to colorize multiple series.
|
|
164
|
+
* @default blueberryTwilightPalette
|
|
164
165
|
*/
|
|
165
166
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
166
167
|
/**
|
|
@@ -66,18 +66,18 @@ var useCompletedData = function useCompletedData() {
|
|
|
66
66
|
var baseScaleConfig;
|
|
67
67
|
if (verticalLayout) {
|
|
68
68
|
if (!isBandScaleConfig(xAxisConfig)) {
|
|
69
|
-
throw new Error("MUI
|
|
69
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\"."));
|
|
70
70
|
}
|
|
71
71
|
if (xAxis[xAxisKey].data === undefined) {
|
|
72
|
-
throw new Error("MUI
|
|
72
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud have data property."));
|
|
73
73
|
}
|
|
74
74
|
baseScaleConfig = xAxisConfig;
|
|
75
75
|
} else {
|
|
76
76
|
if (!isBandScaleConfig(yAxisConfig)) {
|
|
77
|
-
throw new Error("MUI
|
|
77
|
+
throw new Error("MUI X Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\"."));
|
|
78
78
|
}
|
|
79
79
|
if (yAxis[yAxisKey].data === undefined) {
|
|
80
|
-
throw new Error("MUI
|
|
80
|
+
throw new Error("MUI X Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud have data property."));
|
|
81
81
|
}
|
|
82
82
|
baseScaleConfig = yAxisConfig;
|
|
83
83
|
}
|
|
@@ -24,7 +24,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
} else if (dataset === undefined) {
|
|
27
|
-
throw new Error(["MUI
|
|
27
|
+
throw new Error(["MUI X Charts: bar series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
var completedSeries = {};
|
|
@@ -71,7 +71,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
71
71
|
seriesOrder: seriesOrder,
|
|
72
72
|
stackingGroups: stackingGroups,
|
|
73
73
|
series: defaultizeValueFormatter(completedSeries, function (v) {
|
|
74
|
-
return v
|
|
74
|
+
return v === null ? '' : v.toLocaleString();
|
|
75
75
|
})
|
|
76
76
|
};
|
|
77
77
|
};
|
|
@@ -57,16 +57,16 @@ function ChartsAxis(props) {
|
|
|
57
57
|
var topId = getAxisId(topAxis);
|
|
58
58
|
var rightId = getAxisId(rightAxis);
|
|
59
59
|
if (topId !== null && !xAxis[topId]) {
|
|
60
|
-
throw Error(["MUI
|
|
60
|
+
throw Error(["MUI X Charts: id used for top axis \"".concat(topId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
|
|
61
61
|
}
|
|
62
62
|
if (leftId !== null && !yAxis[leftId]) {
|
|
63
|
-
throw Error(["MUI
|
|
63
|
+
throw Error(["MUI X Charts: id used for left axis \"".concat(leftId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
|
|
64
64
|
}
|
|
65
65
|
if (rightId !== null && !yAxis[rightId]) {
|
|
66
|
-
throw Error(["MUI
|
|
66
|
+
throw Error(["MUI X Charts: id used for right axis \"".concat(rightId, "\" is not defined."), "Available ids are: ".concat(yAxisIds.join(', '), ".")].join('\n'));
|
|
67
67
|
}
|
|
68
68
|
if (bottomId !== null && !xAxis[bottomId]) {
|
|
69
|
-
throw Error(["MUI
|
|
69
|
+
throw Error(["MUI X Charts: id used for bottom axis \"".concat(bottomId, "\" is not defined."), "Available ids are: ".concat(xAxisIds.join(', '), ".")].join('\n'));
|
|
70
70
|
}
|
|
71
71
|
var topAxisProps = mergeProps(topAxis, slots, slotProps);
|
|
72
72
|
var bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
|
|
@@ -5,13 +5,15 @@ import { ChartsXReferenceLine } from './ChartsXReferenceLine';
|
|
|
5
5
|
import { ChartsYReferenceLine } from './ChartsYReferenceLine';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
function ChartsReferenceLine(props) {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var x = props.x,
|
|
9
|
+
y = props.y;
|
|
10
|
+
if (x !== undefined && y !== undefined) {
|
|
11
|
+
throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
|
|
10
12
|
}
|
|
11
|
-
if (
|
|
12
|
-
throw new Error('MUI
|
|
13
|
+
if (x === undefined && y === undefined) {
|
|
14
|
+
throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
|
|
13
15
|
}
|
|
14
|
-
if (
|
|
16
|
+
if (x !== undefined) {
|
|
15
17
|
return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
|
|
16
18
|
}
|
|
17
19
|
return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));
|
package/legacy/ChartsSurface.js
CHANGED
|
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
5
6
|
import * as React from 'react';
|
|
6
7
|
import { useAxisEvents } from './hooks/useAxisEvents';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -12,7 +13,7 @@ var ChartChartsSurfaceStyles = styled('svg', {
|
|
|
12
13
|
})(function () {
|
|
13
14
|
return {};
|
|
14
15
|
});
|
|
15
|
-
|
|
16
|
+
var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
|
|
16
17
|
var children = props.children,
|
|
17
18
|
width = props.width,
|
|
18
19
|
height = props.height,
|
|
@@ -40,4 +41,36 @@ export var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(
|
|
|
40
41
|
children: props.desc
|
|
41
42
|
}), children]
|
|
42
43
|
}));
|
|
43
|
-
});
|
|
44
|
+
});
|
|
45
|
+
process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
|
|
46
|
+
// ----------------------------- Warning --------------------------------
|
|
47
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
48
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
49
|
+
// ----------------------------------------------------------------------
|
|
50
|
+
children: PropTypes.node,
|
|
51
|
+
className: PropTypes.string,
|
|
52
|
+
desc: PropTypes.string,
|
|
53
|
+
/**
|
|
54
|
+
* If `true`, the charts will not listen to the mouse move event.
|
|
55
|
+
* It might break interactive features, but will improve performance.
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
disableAxisListener: PropTypes.bool,
|
|
59
|
+
/**
|
|
60
|
+
* The height of the chart in px.
|
|
61
|
+
*/
|
|
62
|
+
height: PropTypes.number.isRequired,
|
|
63
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
64
|
+
title: PropTypes.string,
|
|
65
|
+
viewBox: PropTypes.shape({
|
|
66
|
+
height: PropTypes.number,
|
|
67
|
+
width: PropTypes.number,
|
|
68
|
+
x: PropTypes.number,
|
|
69
|
+
y: PropTypes.number
|
|
70
|
+
}),
|
|
71
|
+
/**
|
|
72
|
+
* The width of the chart in px.
|
|
73
|
+
*/
|
|
74
|
+
width: PropTypes.number.isRequired
|
|
75
|
+
} : void 0;
|
|
76
|
+
export { ChartsSurface };
|
|
@@ -5,6 +5,7 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
|
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
7
|
function DefaultChartsItemTooltipContent(props) {
|
|
8
|
+
var _series$valueFormatte;
|
|
8
9
|
var series = props.series,
|
|
9
10
|
itemData = props.itemData,
|
|
10
11
|
sx = props.sx,
|
|
@@ -21,10 +22,8 @@ function DefaultChartsItemTooltipContent(props) {
|
|
|
21
22
|
},
|
|
22
23
|
displayedLabel = _ref.displayedLabel,
|
|
23
24
|
color = _ref.color;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
// @ts-ignore
|
|
27
|
-
var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
|
|
25
|
+
var value = series.data[itemData.dataIndex];
|
|
26
|
+
var formattedValue = (_series$valueFormatte = series.valueFormatter) == null ? void 0 : _series$valueFormatte.call(series, value);
|
|
28
27
|
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
|
|
29
28
|
sx: sx,
|
|
30
29
|
className: classes.root,
|
|
@@ -57,10 +57,10 @@ function AreaPlot(props) {
|
|
|
57
57
|
var xData = xAxis[xAxisKey].data;
|
|
58
58
|
if (process.env.NODE_ENV !== 'production') {
|
|
59
59
|
if (xData === undefined) {
|
|
60
|
-
throw new Error("MUI
|
|
60
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
61
61
|
}
|
|
62
62
|
if (xData.length < stackedData.length) {
|
|
63
|
-
throw new Error("MUI
|
|
63
|
+
throw new Error("MUI X Charts: The data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
var areaPath = d3Area().x(function (d) {
|
|
@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
124
124
|
* - 'none': display nothing.
|
|
125
125
|
* - 'line': display a line at the current mouse position.
|
|
126
126
|
* - 'band': display a band at the current mouse position. Only available with band scale.
|
|
127
|
+
* @default { x: 'line' }
|
|
127
128
|
*/
|
|
128
129
|
axisHighlight: PropTypes.shape({
|
|
129
130
|
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
@@ -160,6 +161,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
|
|
|
160
161
|
className: PropTypes.string,
|
|
161
162
|
/**
|
|
162
163
|
* Color palette used to colorize multiple series.
|
|
164
|
+
* @default blueberryTwilightPalette
|
|
163
165
|
*/
|
|
164
166
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
165
167
|
/**
|
|
@@ -64,7 +64,7 @@ function LineHighlightPlot(props) {
|
|
|
64
64
|
var yScale = yAxis[yAxisKey].scale;
|
|
65
65
|
var xData = xAxis[xAxisKey].data;
|
|
66
66
|
if (xData === undefined) {
|
|
67
|
-
throw new Error("MUI
|
|
67
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
68
68
|
}
|
|
69
69
|
var x = xScale(xData[highlightedIndex]);
|
|
70
70
|
var y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
|
|
@@ -56,10 +56,10 @@ function LinePlot(props) {
|
|
|
56
56
|
var xData = xAxis[xAxisKey].data;
|
|
57
57
|
if (process.env.NODE_ENV !== 'production') {
|
|
58
58
|
if (xData === undefined) {
|
|
59
|
-
throw new Error("MUI
|
|
59
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
60
60
|
}
|
|
61
61
|
if (xData.length < stackedData.length) {
|
|
62
|
-
throw new Error("MUI
|
|
62
|
+
throw new Error("MUI X Charts: The data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
var linePath = d3Line().x(function (d) {
|
|
@@ -72,7 +72,7 @@ function MarkPlot(props) {
|
|
|
72
72
|
return true;
|
|
73
73
|
};
|
|
74
74
|
if (xData === undefined) {
|
|
75
|
-
throw new Error("MUI
|
|
75
|
+
throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
|
|
76
76
|
}
|
|
77
77
|
return xData == null ? void 0 : xData.map(function (x, index) {
|
|
78
78
|
var value = data[index] == null ? null : stackedData[index][1];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import { stack as d3Stack } from 'd3-shape';
|
|
5
5
|
import { getStackingGroups } from '../internals/stackSeries';
|
|
6
6
|
import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
|
|
@@ -11,7 +11,11 @@ var formatter = function formatter(params, dataset) {
|
|
|
11
11
|
var _ref;
|
|
12
12
|
var seriesOrder = params.seriesOrder,
|
|
13
13
|
series = params.series;
|
|
14
|
-
var stackingGroups = getStackingGroups(params
|
|
14
|
+
var stackingGroups = getStackingGroups(_extends({}, params, {
|
|
15
|
+
defaultStrategy: {
|
|
16
|
+
stackOffset: 'none'
|
|
17
|
+
}
|
|
18
|
+
}));
|
|
15
19
|
|
|
16
20
|
// Create a data set with format adapted to d3
|
|
17
21
|
var d3Dataset = (_ref = dataset) != null ? _ref : [];
|
|
@@ -26,7 +30,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
26
30
|
}
|
|
27
31
|
});
|
|
28
32
|
} else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
|
|
29
|
-
throw new Error(["MUI
|
|
33
|
+
throw new Error(["MUI X Charts: line series with id='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
|
|
30
34
|
}
|
|
31
35
|
});
|
|
32
36
|
var completedSeries = {};
|
|
@@ -71,7 +75,7 @@ var formatter = function formatter(params, dataset) {
|
|
|
71
75
|
seriesOrder: seriesOrder,
|
|
72
76
|
stackingGroups: stackingGroups,
|
|
73
77
|
series: defaultizeValueFormatter(completedSeries, function (v) {
|
|
74
|
-
return v
|
|
78
|
+
return v === null ? '' : v.toLocaleString();
|
|
75
79
|
})
|
|
76
80
|
};
|
|
77
81
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
|
-
var _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
|
|
4
|
+
var _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import { animated, to } from '@react-spring/web';
|
|
@@ -72,6 +72,8 @@ function PieArcLabel(props) {
|
|
|
72
72
|
endAngle = props.endAngle,
|
|
73
73
|
paddingAngle = props.paddingAngle,
|
|
74
74
|
arcLabelRadius = props.arcLabelRadius,
|
|
75
|
+
innerRadius = props.innerRadius,
|
|
76
|
+
outerRadius = props.outerRadius,
|
|
75
77
|
cornerRadius = props.cornerRadius,
|
|
76
78
|
formattedArcLabel = props.formattedArcLabel,
|
|
77
79
|
isHighlighted = props.isHighlighted,
|
|
@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
|
|
|
106
106
|
arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
|
|
107
107
|
/**
|
|
108
108
|
* The minimal angle required to display the arc label.
|
|
109
|
+
* @default 0
|
|
109
110
|
*/
|
|
110
111
|
arcLabelMinAngle: PropTypes.number,
|
|
111
112
|
/**
|
|
@@ -131,6 +132,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
|
|
|
131
132
|
})).isRequired,
|
|
132
133
|
/**
|
|
133
134
|
* Override the arc attibutes when it is faded.
|
|
135
|
+
* @default { additionalRadius: -5 }
|
|
134
136
|
*/
|
|
135
137
|
faded: PropTypes.shape({
|
|
136
138
|
additionalRadius: PropTypes.number,
|
|
@@ -112,6 +112,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
|
|
|
112
112
|
})).isRequired,
|
|
113
113
|
/**
|
|
114
114
|
* Override the arc attibutes when it is faded.
|
|
115
|
+
* @default { additionalRadius: -5 }
|
|
115
116
|
*/
|
|
116
117
|
faded: PropTypes.shape({
|
|
117
118
|
additionalRadius: PropTypes.number,
|
|
@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
120
120
|
/**
|
|
121
121
|
* Indicate which axis to display the bottom of the charts.
|
|
122
122
|
* Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
|
|
123
|
-
* @default
|
|
123
|
+
* @default null
|
|
124
124
|
*/
|
|
125
125
|
bottomAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
126
126
|
axisId: PropTypes.string,
|
|
@@ -148,6 +148,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
148
148
|
className: PropTypes.string,
|
|
149
149
|
/**
|
|
150
150
|
* Color palette used to colorize multiple series.
|
|
151
|
+
* @default blueberryTwilightPalette
|
|
151
152
|
*/
|
|
152
153
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
153
154
|
/**
|
|
@@ -169,7 +170,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
|
|
|
169
170
|
/**
|
|
170
171
|
* Indicate which axis to display the left of the charts.
|
|
171
172
|
* Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
|
|
172
|
-
* @default
|
|
173
|
+
* @default null
|
|
173
174
|
*/
|
|
174
175
|
leftAxis: PropTypes.oneOfType([PropTypes.shape({
|
|
175
176
|
axisId: PropTypes.string,
|
|
@@ -67,11 +67,11 @@ var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
|
|
|
67
67
|
}, [computeSize, inHeight, inWidth]);
|
|
68
68
|
if (process.env.NODE_ENV !== 'production') {
|
|
69
69
|
if (displayError.current && inWidth === undefined && width === 0) {
|
|
70
|
-
console.error("MUI
|
|
70
|
+
console.error("MUI X Charts: ChartContainer does not have `width` prop, and its container has no `width` defined.");
|
|
71
71
|
displayError.current = false;
|
|
72
72
|
}
|
|
73
73
|
if (displayError.current && inHeight === undefined && height === 0) {
|
|
74
|
-
console.error("MUI
|
|
74
|
+
console.error("MUI X Charts: ChartContainer does not have `height` prop, and its container has no `height` defined.");
|
|
75
75
|
displayError.current = false;
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -118,6 +118,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
|
|
|
118
118
|
className: PropTypes.string,
|
|
119
119
|
/**
|
|
120
120
|
* Color palette used to colorize multiple series.
|
|
121
|
+
* @default blueberryTwilightPalette
|
|
121
122
|
*/
|
|
122
123
|
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
123
124
|
/**
|