@mui/x-charts 7.17.0 → 7.18.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 +10 -0
- package/CHANGELOG.md +98 -5
- package/ChartsLegend/ChartsLegend.d.ts +2 -2
- package/ChartsTooltip/index.d.ts +3 -0
- package/ChartsTooltip/index.js +4 -1
- package/ChartsTooltip/useAxisTooltip.d.ts +18 -0
- package/ChartsTooltip/useAxisTooltip.js +84 -0
- package/ChartsTooltip/useItemTooltip.d.ts +10 -0
- package/ChartsTooltip/useItemTooltip.js +64 -0
- package/ChartsTooltip/utils.d.ts +2 -1
- package/LineChart/AnimatedLine.js +12 -22
- package/LineChart/LineChart.js +10 -0
- package/PieChart/PieChart.js +10 -0
- package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +10 -0
- package/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
- package/ResponsiveChartContainer/useChartContainerDimensions.d.ts +1 -1
- package/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
- package/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
- package/ScatterChart/ScatterChart.js +10 -0
- package/SparkLineChart/SparkLineChart.js +10 -0
- package/context/CartesianProvider/CartesianProvider.js +3 -3
- package/context/CartesianProvider/getAxisExtremum.d.ts +1 -1
- package/context/CartesianProvider/getAxisExtremum.js +5 -4
- package/context/CartesianProvider/index.d.ts +0 -5
- package/context/CartesianProvider/index.js +1 -6
- package/context/PluginProvider/ExtremumGetter.types.d.ts +1 -0
- package/context/PluginProvider/Plugin.types.d.ts +4 -0
- package/context/PluginProvider/PluginContext.js +3 -1
- package/context/PluginProvider/index.d.ts +2 -0
- package/context/PluginProvider/index.js +3 -1
- package/context/PluginProvider/mergePlugins.d.ts +10 -0
- package/context/PluginProvider/mergePlugins.js +11 -1
- package/context/PluginProvider/useRadiusExtremumGetter.d.ts +4 -0
- package/context/PluginProvider/useRadiusExtremumGetter.js +17 -0
- package/context/PluginProvider/useRotationExtremumGetter.d.ts +4 -0
- package/context/PluginProvider/useRotationExtremumGetter.js +17 -0
- package/context/PolarProvider/Polar.types.d.ts +42 -0
- package/context/PolarProvider/Polar.types.js +1 -0
- package/context/PolarProvider/PolarContext.d.ts +4 -0
- package/context/PolarProvider/PolarContext.js +13 -0
- package/context/PolarProvider/PolarProvider.d.ts +4 -0
- package/context/PolarProvider/PolarProvider.js +49 -0
- package/context/PolarProvider/getAxisExtremum.d.ts +4 -0
- package/context/PolarProvider/getAxisExtremum.js +20 -0
- package/context/PolarProvider/index.d.ts +0 -0
- package/context/PolarProvider/index.js +0 -0
- package/context/PolarProvider/usePolarContext.d.ts +2 -0
- package/context/PolarProvider/usePolarContext.js +10 -0
- package/index.js +1 -1
- package/internals/computeAxisValue.d.ts +38 -0
- package/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +28 -15
- package/internals/index.d.ts +1 -0
- package/internals/index.js +1 -0
- package/models/axis.d.ts +20 -0
- package/models/seriesType/config.d.ts +6 -2
- package/modern/BarChart/BarChart.js +10 -0
- package/modern/ChartsTooltip/index.js +4 -1
- package/modern/ChartsTooltip/useAxisTooltip.js +84 -0
- package/modern/ChartsTooltip/useItemTooltip.js +64 -0
- package/modern/LineChart/AnimatedLine.js +12 -22
- package/modern/LineChart/LineChart.js +10 -0
- package/modern/PieChart/PieChart.js +10 -0
- package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
- package/modern/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
- package/modern/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
- package/modern/ScatterChart/ScatterChart.js +10 -0
- package/modern/SparkLineChart/SparkLineChart.js +10 -0
- package/modern/context/CartesianProvider/CartesianProvider.js +3 -3
- package/modern/context/CartesianProvider/getAxisExtremum.js +5 -4
- package/modern/context/CartesianProvider/index.js +1 -6
- package/modern/context/PluginProvider/PluginContext.js +3 -1
- package/modern/context/PluginProvider/index.js +3 -1
- package/modern/context/PluginProvider/mergePlugins.js +11 -1
- package/modern/context/PluginProvider/useRadiusExtremumGetter.js +17 -0
- package/modern/context/PluginProvider/useRotationExtremumGetter.js +17 -0
- package/modern/context/PolarProvider/Polar.types.js +1 -0
- package/modern/context/PolarProvider/PolarContext.js +13 -0
- package/modern/context/PolarProvider/PolarProvider.js +49 -0
- package/modern/context/PolarProvider/getAxisExtremum.js +20 -0
- package/modern/context/PolarProvider/index.js +0 -0
- package/modern/context/PolarProvider/usePolarContext.js +10 -0
- package/modern/index.js +1 -1
- package/modern/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +28 -15
- package/modern/internals/index.js +1 -0
- package/node/BarChart/BarChart.js +10 -0
- package/node/ChartsTooltip/index.js +42 -1
- package/node/ChartsTooltip/useAxisTooltip.js +90 -0
- package/node/ChartsTooltip/useItemTooltip.js +71 -0
- package/node/LineChart/AnimatedLine.js +12 -22
- package/node/LineChart/LineChart.js +10 -0
- package/node/PieChart/PieChart.js +10 -0
- package/node/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
- package/node/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
- package/node/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
- package/node/ScatterChart/ScatterChart.js +10 -0
- package/node/SparkLineChart/SparkLineChart.js +10 -0
- package/node/context/CartesianProvider/CartesianProvider.js +3 -3
- package/node/context/CartesianProvider/getAxisExtremum.js +5 -4
- package/node/context/CartesianProvider/index.js +1 -13
- package/node/context/PluginProvider/PluginContext.js +3 -1
- package/node/context/PluginProvider/index.js +22 -0
- package/node/context/PluginProvider/mergePlugins.js +11 -1
- package/node/context/PluginProvider/useRadiusExtremumGetter.js +23 -0
- package/node/context/PluginProvider/useRotationExtremumGetter.js +23 -0
- package/node/context/PolarProvider/Polar.types.js +5 -0
- package/node/context/PolarProvider/PolarContext.js +20 -0
- package/node/context/PolarProvider/PolarProvider.js +54 -0
- package/node/context/PolarProvider/getAxisExtremum.js +27 -0
- package/node/context/PolarProvider/index.js +1 -0
- package/node/context/PolarProvider/usePolarContext.js +17 -0
- package/node/index.js +1 -1
- package/node/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +29 -16
- package/node/internals/index.js +12 -0
- package/package.json +4 -4
- package/context/CartesianProvider/computeValue.d.ts +0 -30
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
|
+
import { computeAxisValue } from "../../internals/computeAxisValue.js";
|
|
4
5
|
import { useDrawingArea } from "../../hooks/useDrawingArea.js";
|
|
5
6
|
import { useSeries } from "../../hooks/useSeries.js";
|
|
6
7
|
import { CartesianContext } from "./CartesianContext.js";
|
|
7
|
-
import { computeValue } from "./computeValue.js";
|
|
8
8
|
import { useXExtremumGetter } from "../PluginProvider/useXExtremumGetter.js";
|
|
9
9
|
import { useYExtremumGetter } from "../PluginProvider/index.js";
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -18,14 +18,14 @@ function CartesianProvider(props) {
|
|
|
18
18
|
const drawingArea = useDrawingArea();
|
|
19
19
|
const xExtremumGetters = useXExtremumGetter();
|
|
20
20
|
const yExtremumGetters = useYExtremumGetter();
|
|
21
|
-
const xValues = React.useMemo(() =>
|
|
21
|
+
const xValues = React.useMemo(() => computeAxisValue({
|
|
22
22
|
drawingArea,
|
|
23
23
|
formattedSeries,
|
|
24
24
|
axis: xAxis,
|
|
25
25
|
extremumGetters: xExtremumGetters,
|
|
26
26
|
axisDirection: 'x'
|
|
27
27
|
}), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
|
|
28
|
-
const yValues = React.useMemo(() =>
|
|
28
|
+
const yValues = React.useMemo(() => computeAxisValue({
|
|
29
29
|
drawingArea,
|
|
30
30
|
formattedSeries,
|
|
31
31
|
axis: yAxis,
|
|
@@ -2,4 +2,4 @@ import { AxisConfig } from '../../models';
|
|
|
2
2
|
import { FormattedSeries } from '../SeriesProvider';
|
|
3
3
|
import { ExtremumGettersConfig } from '../PluginProvider';
|
|
4
4
|
import { GetZoomAxisFilters } from './Cartesian.types';
|
|
5
|
-
export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig,
|
|
5
|
+
export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, axisIndex: number, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters) => number[];
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
const axisExtremumCallback = (acc, chartType, axis, getters,
|
|
1
|
+
const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries, getFilters) => {
|
|
2
2
|
const getter = getters[chartType];
|
|
3
3
|
const series = formattedSeries[chartType]?.series ?? {};
|
|
4
4
|
const [minChartTypeData, maxChartTypeData] = getter?.({
|
|
5
5
|
series,
|
|
6
6
|
axis,
|
|
7
|
-
|
|
7
|
+
axisIndex,
|
|
8
|
+
isDefaultAxis: axisIndex === 0,
|
|
8
9
|
getFilters
|
|
9
10
|
}) ?? [Infinity, -Infinity];
|
|
10
11
|
const [minData, maxData] = acc;
|
|
11
12
|
return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
|
|
12
13
|
};
|
|
13
|
-
export const getAxisExtremum = (axis, getters,
|
|
14
|
+
export const getAxisExtremum = (axis, getters, axisIndex, formattedSeries, getFilters) => {
|
|
14
15
|
const charTypes = Object.keys(getters);
|
|
15
|
-
const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters,
|
|
16
|
+
const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
|
|
16
17
|
if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
|
|
17
18
|
return [Infinity, -Infinity];
|
|
18
19
|
}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import { computeValue } from './computeValue';
|
|
2
1
|
export * from './CartesianProvider';
|
|
3
2
|
export * from './CartesianContext';
|
|
4
3
|
export * from './useCartesianContext';
|
|
5
4
|
export * from './Cartesian.types';
|
|
6
|
-
declare const cartesianProviderUtils: {
|
|
7
|
-
computeValue: typeof computeValue;
|
|
8
|
-
};
|
|
9
|
-
export { cartesianProviderUtils };
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import { computeValue } from "./computeValue.js";
|
|
2
1
|
export * from "./CartesianProvider.js";
|
|
3
2
|
export * from "./CartesianContext.js";
|
|
4
3
|
export * from "./useCartesianContext.js";
|
|
5
|
-
export * from "./Cartesian.types.js";
|
|
6
|
-
const cartesianProviderUtils = {
|
|
7
|
-
computeValue
|
|
8
|
-
};
|
|
9
|
-
export { cartesianProviderUtils };
|
|
4
|
+
export * from "./Cartesian.types.js";
|
|
@@ -7,6 +7,7 @@ export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeri
|
|
|
7
7
|
type ExtremumGetterParams<T extends ChartSeriesType> = {
|
|
8
8
|
series: Record<SeriesId, ChartSeries<T>>;
|
|
9
9
|
axis: AxisConfig;
|
|
10
|
+
axisIndex: number;
|
|
10
11
|
isDefaultAxis: boolean;
|
|
11
12
|
getFilters?: (params: {
|
|
12
13
|
currentAxisId: AxisId | undefined;
|
|
@@ -15,6 +15,8 @@ export type PluginContextState = {
|
|
|
15
15
|
colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
|
|
16
16
|
xExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
|
|
17
17
|
yExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
|
|
18
|
+
rotationExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
|
|
19
|
+
radiusExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
|
|
18
20
|
};
|
|
19
21
|
export type ChartsPlugin<T> = T extends ChartSeriesType ? {
|
|
20
22
|
seriesType: T;
|
|
@@ -22,4 +24,6 @@ export type ChartsPlugin<T> = T extends ChartSeriesType ? {
|
|
|
22
24
|
colorProcessor: ColorProcessor<T>;
|
|
23
25
|
xExtremumGetter?: ExtremumGetter<T>;
|
|
24
26
|
yExtremumGetter?: ExtremumGetter<T>;
|
|
27
|
+
rotationExtremumGetter?: ExtremumGetter<T>;
|
|
28
|
+
radiusExtremumGetter?: ExtremumGetter<T>;
|
|
25
29
|
} : never;
|
|
@@ -5,7 +5,9 @@ export const PluginContext = /*#__PURE__*/React.createContext({
|
|
|
5
5
|
colorProcessors: {},
|
|
6
6
|
seriesFormatters: {},
|
|
7
7
|
xExtremumGetters: {},
|
|
8
|
-
yExtremumGetters: {}
|
|
8
|
+
yExtremumGetters: {},
|
|
9
|
+
rotationExtremumGetters: {},
|
|
10
|
+
radiusExtremumGetters: {}
|
|
9
11
|
}
|
|
10
12
|
});
|
|
11
13
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -7,4 +7,6 @@ export * from "./ExtremumGetter.types.js";
|
|
|
7
7
|
export * from "./useColorProcessor.js";
|
|
8
8
|
export * from "./useSeriesFormatter.js";
|
|
9
9
|
export * from "./useXExtremumGetter.js";
|
|
10
|
-
export * from "./useYExtremumGetter.js";
|
|
10
|
+
export * from "./useYExtremumGetter.js";
|
|
11
|
+
export * from "./useRadiusExtremumGetter.js";
|
|
12
|
+
export * from "./useRotationExtremumGetter.js";
|
|
@@ -9,28 +9,38 @@ export declare const defaultPlugins: ({
|
|
|
9
9
|
colorProcessor: ColorProcessor<"bar">;
|
|
10
10
|
xExtremumGetter?: ExtremumGetter<"bar"> | undefined;
|
|
11
11
|
yExtremumGetter?: ExtremumGetter<"bar"> | undefined;
|
|
12
|
+
rotationExtremumGetter?: ExtremumGetter<"bar"> | undefined;
|
|
13
|
+
radiusExtremumGetter?: ExtremumGetter<"bar"> | undefined;
|
|
12
14
|
} | {
|
|
13
15
|
seriesType: "line";
|
|
14
16
|
seriesFormatter: SeriesFormatter<"line">;
|
|
15
17
|
colorProcessor: ColorProcessor<"line">;
|
|
16
18
|
xExtremumGetter?: ExtremumGetter<"line"> | undefined;
|
|
17
19
|
yExtremumGetter?: ExtremumGetter<"line"> | undefined;
|
|
20
|
+
rotationExtremumGetter?: ExtremumGetter<"line"> | undefined;
|
|
21
|
+
radiusExtremumGetter?: ExtremumGetter<"line"> | undefined;
|
|
18
22
|
} | {
|
|
19
23
|
seriesType: "scatter";
|
|
20
24
|
seriesFormatter: SeriesFormatter<"scatter">;
|
|
21
25
|
colorProcessor: ColorProcessor<"scatter">;
|
|
22
26
|
xExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
|
|
23
27
|
yExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
|
|
28
|
+
rotationExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
|
|
29
|
+
radiusExtremumGetter?: ExtremumGetter<"scatter"> | undefined;
|
|
24
30
|
} | {
|
|
25
31
|
seriesType: "pie";
|
|
26
32
|
seriesFormatter: SeriesFormatter<"pie">;
|
|
27
33
|
colorProcessor: ColorProcessor<"pie">;
|
|
28
34
|
xExtremumGetter?: ExtremumGetter<"pie"> | undefined;
|
|
29
35
|
yExtremumGetter?: ExtremumGetter<"pie"> | undefined;
|
|
36
|
+
rotationExtremumGetter?: ExtremumGetter<"pie"> | undefined;
|
|
37
|
+
radiusExtremumGetter?: ExtremumGetter<"pie"> | undefined;
|
|
30
38
|
})[];
|
|
31
39
|
export declare function mergePlugins(plugins?: ChartsPlugin<ChartSeriesType>[]): {
|
|
32
40
|
seriesFormatters: SeriesFormatterConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
|
|
33
41
|
colorProcessors: ColorProcessorsConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
|
|
34
42
|
xExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
|
|
35
43
|
yExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
|
|
44
|
+
rotationExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
|
|
45
|
+
radiusExtremumGetters: ExtremumGettersConfig<keyof import("../../models/seriesType/config").ChartsSeriesConfig>;
|
|
36
46
|
};
|
|
@@ -9,6 +9,8 @@ export function mergePlugins(plugins) {
|
|
|
9
9
|
const colorProcessors = {};
|
|
10
10
|
const xExtremumGetters = {};
|
|
11
11
|
const yExtremumGetters = {};
|
|
12
|
+
const rotationExtremumGetters = {};
|
|
13
|
+
const radiusExtremumGetters = {};
|
|
12
14
|
for (let i = 0; i < defaultizedPlugins.length; i += 1) {
|
|
13
15
|
const plugin = defaultizedPlugins[i];
|
|
14
16
|
const seriesType = plugin.seriesType;
|
|
@@ -20,11 +22,19 @@ export function mergePlugins(plugins) {
|
|
|
20
22
|
if (plugin.yExtremumGetter) {
|
|
21
23
|
yExtremumGetters[seriesType] = plugin.yExtremumGetter;
|
|
22
24
|
}
|
|
25
|
+
if (plugin.rotationExtremumGetter) {
|
|
26
|
+
rotationExtremumGetters[seriesType] = plugin.rotationExtremumGetter;
|
|
27
|
+
}
|
|
28
|
+
if (plugin.radiusExtremumGetter) {
|
|
29
|
+
radiusExtremumGetters[seriesType] = plugin.radiusExtremumGetter;
|
|
30
|
+
}
|
|
23
31
|
}
|
|
24
32
|
return {
|
|
25
33
|
seriesFormatters,
|
|
26
34
|
colorProcessors,
|
|
27
35
|
xExtremumGetters,
|
|
28
|
-
yExtremumGetters
|
|
36
|
+
yExtremumGetters,
|
|
37
|
+
rotationExtremumGetters,
|
|
38
|
+
radiusExtremumGetters
|
|
29
39
|
};
|
|
30
40
|
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ChartSeriesType } from '../../models/seriesType/config';
|
|
2
|
+
import { ExtremumGettersConfig } from './ExtremumGetter.types';
|
|
3
|
+
export declare function useRadiusExtremumGetter<T extends ChartSeriesType>(seriesType: T): ExtremumGettersConfig<T>[T];
|
|
4
|
+
export declare function useRadiusExtremumGetter(): ExtremumGettersConfig<ChartSeriesType>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { PluginContext } from "./PluginContext.js";
|
|
5
|
+
export function useRadiusExtremumGetter(seriesType) {
|
|
6
|
+
const {
|
|
7
|
+
isInitialized,
|
|
8
|
+
data
|
|
9
|
+
} = React.useContext(PluginContext);
|
|
10
|
+
if (!isInitialized) {
|
|
11
|
+
throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
|
|
12
|
+
}
|
|
13
|
+
if (!seriesType) {
|
|
14
|
+
return data.radiusExtremumGetters;
|
|
15
|
+
}
|
|
16
|
+
return data.radiusExtremumGetters[seriesType];
|
|
17
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ChartSeriesType } from '../../models/seriesType/config';
|
|
2
|
+
import { ExtremumGettersConfig } from './ExtremumGetter.types';
|
|
3
|
+
export declare function useRotationExtremumGetter<T extends ChartSeriesType>(seriesType: T): ExtremumGettersConfig<T>[T];
|
|
4
|
+
export declare function useRotationExtremumGetter(): ExtremumGettersConfig<ChartSeriesType>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { PluginContext } from "./PluginContext.js";
|
|
5
|
+
export function useRotationExtremumGetter(seriesType) {
|
|
6
|
+
const {
|
|
7
|
+
isInitialized,
|
|
8
|
+
data
|
|
9
|
+
} = React.useContext(PluginContext);
|
|
10
|
+
if (!isInitialized) {
|
|
11
|
+
throw new Error(['MUI X: Could not find the plugin context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
|
|
12
|
+
}
|
|
13
|
+
if (!seriesType) {
|
|
14
|
+
return data.rotationExtremumGetters;
|
|
15
|
+
}
|
|
16
|
+
return data.rotationExtremumGetters[seriesType];
|
|
17
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { DatasetType } from '../../models/seriesType/config';
|
|
2
|
+
import { AxisDefaultized, ScaleName, AxisId, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps } from '../../models/axis';
|
|
3
|
+
export type PolarProviderProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The configuration of the rotation-axes.
|
|
6
|
+
* If not provided, a default axis config is used.
|
|
7
|
+
* An array of [[AxisConfig]] objects.
|
|
8
|
+
*/
|
|
9
|
+
rotationAxis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
|
|
10
|
+
/**
|
|
11
|
+
* The configuration of the radial-axes.
|
|
12
|
+
* If not provided, a default axis config is used.
|
|
13
|
+
* An array of [[AxisConfig]] objects.
|
|
14
|
+
*/
|
|
15
|
+
radiusAxis: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
|
|
16
|
+
/**
|
|
17
|
+
* An array of objects that can be used to populate series and axes data using their `dataKey` property.
|
|
18
|
+
*/
|
|
19
|
+
dataset?: DatasetType;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
};
|
|
22
|
+
export type DefaultizedAxisConfig<Axis> = {
|
|
23
|
+
[axisId: AxisId]: AxisDefaultized<ScaleName, any, Axis>;
|
|
24
|
+
};
|
|
25
|
+
export type PolarContextState = {
|
|
26
|
+
/**
|
|
27
|
+
* Mapping from rotation-axis key to scaling configuration.
|
|
28
|
+
*/
|
|
29
|
+
rotationAxis: DefaultizedAxisConfig<ChartsRotationAxisProps>;
|
|
30
|
+
/**
|
|
31
|
+
* Mapping from radius-axis key to scaling configuration.
|
|
32
|
+
*/
|
|
33
|
+
radiusAxis: DefaultizedAxisConfig<ChartsRadiusAxisProps>;
|
|
34
|
+
/**
|
|
35
|
+
* The rotation-axes IDs sorted by order they got provided.
|
|
36
|
+
*/
|
|
37
|
+
rotationAxisIds: AxisId[];
|
|
38
|
+
/**
|
|
39
|
+
* The radius-axes IDs sorted by order they got provided.
|
|
40
|
+
*/
|
|
41
|
+
radiusAxisIds: AxisId[];
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export const PolarContext = /*#__PURE__*/React.createContext({
|
|
3
|
+
isInitialized: false,
|
|
4
|
+
data: {
|
|
5
|
+
rotationAxis: {},
|
|
6
|
+
radiusAxis: {},
|
|
7
|
+
rotationAxisIds: [],
|
|
8
|
+
radiusAxisIds: []
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
12
|
+
PolarContext.displayName = 'PolarContext';
|
|
13
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { computeAxisValue } from "../../internals/computeAxisValue.js";
|
|
5
|
+
import { useDrawingArea } from "../../hooks/useDrawingArea.js";
|
|
6
|
+
import { useSeries } from "../../hooks/useSeries.js";
|
|
7
|
+
import { PolarContext } from "./PolarContext.js";
|
|
8
|
+
import { useRadiusExtremumGetter } from "../PluginProvider/useRadiusExtremumGetter.js";
|
|
9
|
+
import { useRotationExtremumGetter } from "../PluginProvider/useRotationExtremumGetter.js";
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
function PolarProvider(props) {
|
|
12
|
+
const {
|
|
13
|
+
rotationAxis,
|
|
14
|
+
radiusAxis,
|
|
15
|
+
children
|
|
16
|
+
} = props;
|
|
17
|
+
const formattedSeries = useSeries();
|
|
18
|
+
const drawingArea = useDrawingArea();
|
|
19
|
+
const rotationExtremumGetters = useRotationExtremumGetter();
|
|
20
|
+
const radiusExtremumGetters = useRadiusExtremumGetter();
|
|
21
|
+
const rotationValues = React.useMemo(() => computeAxisValue({
|
|
22
|
+
drawingArea,
|
|
23
|
+
formattedSeries,
|
|
24
|
+
axis: rotationAxis,
|
|
25
|
+
extremumGetters: rotationExtremumGetters,
|
|
26
|
+
axisDirection: 'rotation'
|
|
27
|
+
}), [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters]);
|
|
28
|
+
const radiusValues = React.useMemo(() => computeAxisValue({
|
|
29
|
+
drawingArea,
|
|
30
|
+
formattedSeries,
|
|
31
|
+
axis: radiusAxis,
|
|
32
|
+
extremumGetters: radiusExtremumGetters,
|
|
33
|
+
axisDirection: 'radius'
|
|
34
|
+
}), [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters]);
|
|
35
|
+
const value = React.useMemo(() => ({
|
|
36
|
+
isInitialized: true,
|
|
37
|
+
data: {
|
|
38
|
+
rotationAxis: rotationValues.axis,
|
|
39
|
+
radiusAxis: radiusValues.axis,
|
|
40
|
+
rotationAxisIds: rotationValues.axisIds,
|
|
41
|
+
radiusAxisIds: radiusValues.axisIds
|
|
42
|
+
}
|
|
43
|
+
}), [rotationValues, radiusValues]);
|
|
44
|
+
return /*#__PURE__*/_jsx(PolarContext.Provider, {
|
|
45
|
+
value: value,
|
|
46
|
+
children: children
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
export { PolarProvider };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { AxisConfig } from '../../models';
|
|
2
|
+
import { FormattedSeries } from '../SeriesProvider';
|
|
3
|
+
import { ExtremumGettersConfig } from '../PluginProvider';
|
|
4
|
+
export declare const getAxisExtremum: (axis: AxisConfig, getters: ExtremumGettersConfig, axisIndex: number, formattedSeries: FormattedSeries) => number[];
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const axisExtremumCallback = (acc, chartType, axis, getters, axisIndex, formattedSeries) => {
|
|
2
|
+
const getter = getters[chartType];
|
|
3
|
+
const series = formattedSeries[chartType]?.series ?? {};
|
|
4
|
+
const [minChartTypeData, maxChartTypeData] = getter?.({
|
|
5
|
+
series,
|
|
6
|
+
axis,
|
|
7
|
+
axisIndex,
|
|
8
|
+
isDefaultAxis: axisIndex === 0
|
|
9
|
+
}) ?? [Infinity, -Infinity];
|
|
10
|
+
const [minData, maxData] = acc;
|
|
11
|
+
return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
|
|
12
|
+
};
|
|
13
|
+
export const getAxisExtremum = (axis, getters, axisIndex, formattedSeries) => {
|
|
14
|
+
const charTypes = Object.keys(getters);
|
|
15
|
+
const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), [Infinity, -Infinity]);
|
|
16
|
+
if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
|
|
17
|
+
return [Infinity, -Infinity];
|
|
18
|
+
}
|
|
19
|
+
return extremums;
|
|
20
|
+
};
|
|
File without changes
|
|
File without changes
|
package/index.js
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { AxisConfig, ScaleName } from '../models';
|
|
2
|
+
import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, ChartsRadiusAxisProps, ChartsRotationAxisProps } from '../models/axis';
|
|
3
|
+
import { CartesianChartSeriesType } from '../models/seriesType/config';
|
|
4
|
+
import { DrawingArea } from '../context/DrawingProvider';
|
|
5
|
+
import { FormattedSeries } from '../context/SeriesProvider';
|
|
6
|
+
import { ExtremumGetter } from '../context/PluginProvider';
|
|
7
|
+
import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters } from '../context/CartesianProvider/Cartesian.types';
|
|
8
|
+
type ComputeResult<T extends ChartsAxisProps> = {
|
|
9
|
+
axis: DefaultizedAxisConfig<T>;
|
|
10
|
+
axisIds: string[];
|
|
11
|
+
};
|
|
12
|
+
type ComputeCommonParams = {
|
|
13
|
+
drawingArea: DrawingArea;
|
|
14
|
+
formattedSeries: FormattedSeries;
|
|
15
|
+
extremumGetters: {
|
|
16
|
+
[K in CartesianChartSeriesType]?: ExtremumGetter<K>;
|
|
17
|
+
};
|
|
18
|
+
zoomData?: ZoomData[];
|
|
19
|
+
zoomOptions?: ZoomOptions;
|
|
20
|
+
getFilters?: GetZoomAxisFilters;
|
|
21
|
+
};
|
|
22
|
+
export declare function computeAxisValue(options: ComputeCommonParams & {
|
|
23
|
+
axis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
|
|
24
|
+
axisDirection: 'y';
|
|
25
|
+
}): ComputeResult<ChartsYAxisProps>;
|
|
26
|
+
export declare function computeAxisValue(options: ComputeCommonParams & {
|
|
27
|
+
axis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
|
|
28
|
+
axisDirection: 'x';
|
|
29
|
+
}): ComputeResult<ChartsAxisProps>;
|
|
30
|
+
export declare function computeAxisValue(options: ComputeCommonParams & {
|
|
31
|
+
axis: AxisConfig<ScaleName, any, ChartsRadiusAxisProps>[];
|
|
32
|
+
axisDirection: 'radius';
|
|
33
|
+
}): ComputeResult<ChartsRadiusAxisProps>;
|
|
34
|
+
export declare function computeAxisValue(options: ComputeCommonParams & {
|
|
35
|
+
axis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
|
|
36
|
+
axisDirection: 'rotation';
|
|
37
|
+
}): ComputeResult<ChartsRotationAxisProps>;
|
|
38
|
+
export {};
|
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
|
|
3
|
-
import { isBandScaleConfig, isPointScaleConfig } from "
|
|
4
|
-
import { getColorScale, getOrdinalColorScale } from "
|
|
5
|
-
import { getTickNumber } from "
|
|
6
|
-
import { getScale } from "
|
|
7
|
-
import { zoomScaleRange } from "
|
|
8
|
-
import { getAxisExtremum } from "
|
|
9
|
-
|
|
3
|
+
import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
|
|
4
|
+
import { getColorScale, getOrdinalColorScale } from "./colorScale.js";
|
|
5
|
+
import { getTickNumber } from "../hooks/useTicks.js";
|
|
6
|
+
import { getScale } from "./getScale.js";
|
|
7
|
+
import { zoomScaleRange } from "../context/CartesianProvider/zoom.js";
|
|
8
|
+
import { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
|
|
9
|
+
function getRange(drawingArea, axisDirection, axis) {
|
|
10
|
+
if (axisDirection === 'rotation') {
|
|
11
|
+
const {
|
|
12
|
+
startAngle = 0,
|
|
13
|
+
endAngle = startAngle + 360
|
|
14
|
+
} = axis;
|
|
15
|
+
return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
|
|
16
|
+
}
|
|
17
|
+
if (axisDirection === 'radius') {
|
|
18
|
+
const {
|
|
19
|
+
minRadius = 0,
|
|
20
|
+
maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
|
|
21
|
+
} = axis;
|
|
22
|
+
return [minRadius, maxRadius];
|
|
23
|
+
}
|
|
10
24
|
const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
|
|
11
|
-
return
|
|
12
|
-
}
|
|
25
|
+
return axis.reverse ? [range[1], range[0]] : range;
|
|
26
|
+
}
|
|
13
27
|
const isDateData = data => data?.[0] instanceof Date;
|
|
14
28
|
function createDateFormatter(axis, range) {
|
|
15
29
|
const timeScale = scaleTime(axis.data, range);
|
|
@@ -19,7 +33,7 @@ function createDateFormatter(axis, range) {
|
|
|
19
33
|
}
|
|
20
34
|
const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
|
|
21
35
|
const DEFAULT_BAR_GAP_RATIO = 0.1;
|
|
22
|
-
export function
|
|
36
|
+
export function computeAxisValue({
|
|
23
37
|
drawingArea,
|
|
24
38
|
formattedSeries,
|
|
25
39
|
axis: allAxis,
|
|
@@ -32,21 +46,20 @@ export function computeValue({
|
|
|
32
46
|
const completeAxis = {};
|
|
33
47
|
allAxis.forEach((eachAxis, axisIndex) => {
|
|
34
48
|
const axis = eachAxis;
|
|
35
|
-
const isDefaultAxis = axisIndex === 0;
|
|
36
49
|
const zoomOption = zoomOptions?.[axis.id];
|
|
37
50
|
const zoom = zoomData?.find(({
|
|
38
51
|
axisId
|
|
39
52
|
}) => axisId === axis.id);
|
|
40
53
|
const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
|
|
41
|
-
const range = getRange(drawingArea, axisDirection, axis
|
|
42
|
-
const [minData, maxData] = getAxisExtremum(axis, extremumGetters,
|
|
54
|
+
const range = getRange(drawingArea, axisDirection, axis);
|
|
55
|
+
const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
|
|
43
56
|
);
|
|
44
57
|
const data = axis.data ?? [];
|
|
45
58
|
if (isBandScaleConfig(axis)) {
|
|
46
59
|
const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
|
|
47
60
|
const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
|
|
48
61
|
// Reverse range because ordinal scales are presented from top to bottom on y-axis
|
|
49
|
-
const scaleRange = axisDirection === '
|
|
62
|
+
const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
|
|
50
63
|
const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
|
|
51
64
|
completeAxis[axis.id] = _extends({
|
|
52
65
|
categoryGapRatio,
|
|
@@ -65,7 +78,7 @@ export function computeValue({
|
|
|
65
78
|
}
|
|
66
79
|
}
|
|
67
80
|
if (isPointScaleConfig(axis)) {
|
|
68
|
-
const scaleRange = axisDirection === '
|
|
81
|
+
const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
|
|
69
82
|
const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
|
|
70
83
|
completeAxis[axis.id] = _extends({}, axis, {
|
|
71
84
|
data,
|
package/internals/index.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export * from './getSVGPoint';
|
|
|
17
17
|
export * from './isDefined';
|
|
18
18
|
export { unstable_cleanupDOM } from './domUtils';
|
|
19
19
|
export * from './getScale';
|
|
20
|
+
export * from './computeAxisValue';
|
|
20
21
|
export * from '../context/CartesianProvider';
|
|
21
22
|
export * from '../context/DrawingProvider';
|
|
22
23
|
export * from '../context/InteractionProvider';
|
package/internals/index.js
CHANGED
package/models/axis.d.ts
CHANGED
|
@@ -127,6 +127,26 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
|
|
|
127
127
|
*/
|
|
128
128
|
position?: 'top' | 'bottom';
|
|
129
129
|
}
|
|
130
|
+
export interface ChartsRotationAxisProps extends ChartsAxisProps {
|
|
131
|
+
/**
|
|
132
|
+
* The start angle (in deg).
|
|
133
|
+
*/
|
|
134
|
+
startAngle?: number;
|
|
135
|
+
/**
|
|
136
|
+
* The end angle (in deg).
|
|
137
|
+
*/
|
|
138
|
+
endAngle?: number;
|
|
139
|
+
}
|
|
140
|
+
export interface ChartsRadiusAxisProps extends ChartsAxisProps {
|
|
141
|
+
/**
|
|
142
|
+
* The minimal radius.
|
|
143
|
+
*/
|
|
144
|
+
minRadius?: number;
|
|
145
|
+
/**
|
|
146
|
+
* The maximal radius.
|
|
147
|
+
*/
|
|
148
|
+
maxRadius?: number;
|
|
149
|
+
}
|
|
130
150
|
export type ScaleName = keyof AxisScaleConfig;
|
|
131
151
|
export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
|
|
132
152
|
export interface AxisScaleConfig {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier } from './scatter';
|
|
1
|
+
import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from './scatter';
|
|
2
2
|
import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
|
|
3
3
|
import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
|
|
4
|
-
import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType } from './pie';
|
|
4
|
+
import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType } from './pie';
|
|
5
5
|
import { DefaultizedProps, MakeOptional } from '../helpers';
|
|
6
6
|
export interface ChartsSeriesConfig {
|
|
7
7
|
bar: {
|
|
@@ -20,6 +20,7 @@ export interface ChartsSeriesConfig {
|
|
|
20
20
|
*/
|
|
21
21
|
seriesProp: BarSeriesType;
|
|
22
22
|
itemIdentifier: BarItemIdentifier;
|
|
23
|
+
valueType: number | null;
|
|
23
24
|
canBeStacked: true;
|
|
24
25
|
cartesian: true;
|
|
25
26
|
};
|
|
@@ -30,6 +31,7 @@ export interface ChartsSeriesConfig {
|
|
|
30
31
|
series: DefaultizedLineSeriesType;
|
|
31
32
|
seriesProp: LineSeriesType;
|
|
32
33
|
itemIdentifier: LineItemIdentifier;
|
|
34
|
+
valueType: number | null;
|
|
33
35
|
canBeStacked: true;
|
|
34
36
|
cartesian: true;
|
|
35
37
|
};
|
|
@@ -39,6 +41,7 @@ export interface ChartsSeriesConfig {
|
|
|
39
41
|
};
|
|
40
42
|
series: DefaultizedScatterSeriesType;
|
|
41
43
|
seriesProp: ScatterSeriesType;
|
|
44
|
+
valueType: ScatterValueType;
|
|
42
45
|
itemIdentifier: ScatterItemIdentifier;
|
|
43
46
|
cartesian: true;
|
|
44
47
|
};
|
|
@@ -51,6 +54,7 @@ export interface ChartsSeriesConfig {
|
|
|
51
54
|
series: DefaultizedPieSeriesType;
|
|
52
55
|
seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
|
|
53
56
|
itemIdentifier: PieItemIdentifier;
|
|
57
|
+
valueType: DefaultizedPieValueType;
|
|
54
58
|
};
|
|
55
59
|
}
|
|
56
60
|
export type ChartSeriesType = keyof ChartsSeriesConfig;
|