@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.
Files changed (115) hide show
  1. package/BarChart/BarChart.js +10 -0
  2. package/CHANGELOG.md +98 -5
  3. package/ChartsLegend/ChartsLegend.d.ts +2 -2
  4. package/ChartsTooltip/index.d.ts +3 -0
  5. package/ChartsTooltip/index.js +4 -1
  6. package/ChartsTooltip/useAxisTooltip.d.ts +18 -0
  7. package/ChartsTooltip/useAxisTooltip.js +84 -0
  8. package/ChartsTooltip/useItemTooltip.d.ts +10 -0
  9. package/ChartsTooltip/useItemTooltip.js +64 -0
  10. package/ChartsTooltip/utils.d.ts +2 -1
  11. package/LineChart/AnimatedLine.js +12 -22
  12. package/LineChart/LineChart.js +10 -0
  13. package/PieChart/PieChart.js +10 -0
  14. package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts +10 -0
  15. package/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
  16. package/ResponsiveChartContainer/useChartContainerDimensions.d.ts +1 -1
  17. package/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
  18. package/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
  19. package/ScatterChart/ScatterChart.js +10 -0
  20. package/SparkLineChart/SparkLineChart.js +10 -0
  21. package/context/CartesianProvider/CartesianProvider.js +3 -3
  22. package/context/CartesianProvider/getAxisExtremum.d.ts +1 -1
  23. package/context/CartesianProvider/getAxisExtremum.js +5 -4
  24. package/context/CartesianProvider/index.d.ts +0 -5
  25. package/context/CartesianProvider/index.js +1 -6
  26. package/context/PluginProvider/ExtremumGetter.types.d.ts +1 -0
  27. package/context/PluginProvider/Plugin.types.d.ts +4 -0
  28. package/context/PluginProvider/PluginContext.js +3 -1
  29. package/context/PluginProvider/index.d.ts +2 -0
  30. package/context/PluginProvider/index.js +3 -1
  31. package/context/PluginProvider/mergePlugins.d.ts +10 -0
  32. package/context/PluginProvider/mergePlugins.js +11 -1
  33. package/context/PluginProvider/useRadiusExtremumGetter.d.ts +4 -0
  34. package/context/PluginProvider/useRadiusExtremumGetter.js +17 -0
  35. package/context/PluginProvider/useRotationExtremumGetter.d.ts +4 -0
  36. package/context/PluginProvider/useRotationExtremumGetter.js +17 -0
  37. package/context/PolarProvider/Polar.types.d.ts +42 -0
  38. package/context/PolarProvider/Polar.types.js +1 -0
  39. package/context/PolarProvider/PolarContext.d.ts +4 -0
  40. package/context/PolarProvider/PolarContext.js +13 -0
  41. package/context/PolarProvider/PolarProvider.d.ts +4 -0
  42. package/context/PolarProvider/PolarProvider.js +49 -0
  43. package/context/PolarProvider/getAxisExtremum.d.ts +4 -0
  44. package/context/PolarProvider/getAxisExtremum.js +20 -0
  45. package/context/PolarProvider/index.d.ts +0 -0
  46. package/context/PolarProvider/index.js +0 -0
  47. package/context/PolarProvider/usePolarContext.d.ts +2 -0
  48. package/context/PolarProvider/usePolarContext.js +10 -0
  49. package/index.js +1 -1
  50. package/internals/computeAxisValue.d.ts +38 -0
  51. package/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +28 -15
  52. package/internals/index.d.ts +1 -0
  53. package/internals/index.js +1 -0
  54. package/models/axis.d.ts +20 -0
  55. package/models/seriesType/config.d.ts +6 -2
  56. package/modern/BarChart/BarChart.js +10 -0
  57. package/modern/ChartsTooltip/index.js +4 -1
  58. package/modern/ChartsTooltip/useAxisTooltip.js +84 -0
  59. package/modern/ChartsTooltip/useItemTooltip.js +64 -0
  60. package/modern/LineChart/AnimatedLine.js +12 -22
  61. package/modern/LineChart/LineChart.js +10 -0
  62. package/modern/PieChart/PieChart.js +10 -0
  63. package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
  64. package/modern/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
  65. package/modern/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
  66. package/modern/ScatterChart/ScatterChart.js +10 -0
  67. package/modern/SparkLineChart/SparkLineChart.js +10 -0
  68. package/modern/context/CartesianProvider/CartesianProvider.js +3 -3
  69. package/modern/context/CartesianProvider/getAxisExtremum.js +5 -4
  70. package/modern/context/CartesianProvider/index.js +1 -6
  71. package/modern/context/PluginProvider/PluginContext.js +3 -1
  72. package/modern/context/PluginProvider/index.js +3 -1
  73. package/modern/context/PluginProvider/mergePlugins.js +11 -1
  74. package/modern/context/PluginProvider/useRadiusExtremumGetter.js +17 -0
  75. package/modern/context/PluginProvider/useRotationExtremumGetter.js +17 -0
  76. package/modern/context/PolarProvider/Polar.types.js +1 -0
  77. package/modern/context/PolarProvider/PolarContext.js +13 -0
  78. package/modern/context/PolarProvider/PolarProvider.js +49 -0
  79. package/modern/context/PolarProvider/getAxisExtremum.js +20 -0
  80. package/modern/context/PolarProvider/index.js +0 -0
  81. package/modern/context/PolarProvider/usePolarContext.js +10 -0
  82. package/modern/index.js +1 -1
  83. package/modern/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +28 -15
  84. package/modern/internals/index.js +1 -0
  85. package/node/BarChart/BarChart.js +10 -0
  86. package/node/ChartsTooltip/index.js +42 -1
  87. package/node/ChartsTooltip/useAxisTooltip.js +90 -0
  88. package/node/ChartsTooltip/useItemTooltip.js +71 -0
  89. package/node/LineChart/AnimatedLine.js +12 -22
  90. package/node/LineChart/LineChart.js +10 -0
  91. package/node/PieChart/PieChart.js +10 -0
  92. package/node/ResponsiveChartContainer/ResponsiveChartContainer.js +10 -0
  93. package/node/ResponsiveChartContainer/useChartContainerDimensions.js +32 -8
  94. package/node/ResponsiveChartContainer/useResponsiveChartContainerProps.js +3 -2
  95. package/node/ScatterChart/ScatterChart.js +10 -0
  96. package/node/SparkLineChart/SparkLineChart.js +10 -0
  97. package/node/context/CartesianProvider/CartesianProvider.js +3 -3
  98. package/node/context/CartesianProvider/getAxisExtremum.js +5 -4
  99. package/node/context/CartesianProvider/index.js +1 -13
  100. package/node/context/PluginProvider/PluginContext.js +3 -1
  101. package/node/context/PluginProvider/index.js +22 -0
  102. package/node/context/PluginProvider/mergePlugins.js +11 -1
  103. package/node/context/PluginProvider/useRadiusExtremumGetter.js +23 -0
  104. package/node/context/PluginProvider/useRotationExtremumGetter.js +23 -0
  105. package/node/context/PolarProvider/Polar.types.js +5 -0
  106. package/node/context/PolarProvider/PolarContext.js +20 -0
  107. package/node/context/PolarProvider/PolarProvider.js +54 -0
  108. package/node/context/PolarProvider/getAxisExtremum.js +27 -0
  109. package/node/context/PolarProvider/index.js +1 -0
  110. package/node/context/PolarProvider/usePolarContext.js +17 -0
  111. package/node/index.js +1 -1
  112. package/node/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js} +29 -16
  113. package/node/internals/index.js +12 -0
  114. package/package.json +4 -4
  115. 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(() => computeValue({
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(() => computeValue({
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, isDefaultAxis: boolean, formattedSeries: FormattedSeries, getFilters?: GetZoomAxisFilters) => number[];
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, isDefaultAxis, formattedSeries, getFilters) => {
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
- isDefaultAxis,
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, isDefaultAxis, formattedSeries, getFilters) => {
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, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
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') {
@@ -8,3 +8,5 @@ export * from './useColorProcessor';
8
8
  export * from './useSeriesFormatter';
9
9
  export * from './useXExtremumGetter';
10
10
  export * from './useYExtremumGetter';
11
+ export * from './useRadiusExtremumGetter';
12
+ export * from './useRotationExtremumGetter';
@@ -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,4 @@
1
+ import * as React from 'react';
2
+ import { Initializable } from '../context.types';
3
+ import { PolarContextState } from './Polar.types';
4
+ export declare const PolarContext: React.Context<Initializable<PolarContextState>>;
@@ -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,4 @@
1
+ import * as React from 'react';
2
+ import { PolarProviderProps } from './Polar.types';
3
+ declare function PolarProvider(props: PolarProviderProps): React.JSX.Element;
4
+ export { PolarProvider };
@@ -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
@@ -0,0 +1,2 @@
1
+ import { PolarContextState } from './Polar.types';
2
+ export declare const usePolarContext: () => PolarContextState;
@@ -0,0 +1,10 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { PolarContext } from "./PolarContext.js";
5
+ export const usePolarContext = () => {
6
+ const {
7
+ data
8
+ } = React.useContext(PolarContext);
9
+ return data;
10
+ };
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts v7.17.0
2
+ * @mui/x-charts v7.18.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -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 "../../models/axis.js";
4
- import { getColorScale, getOrdinalColorScale } from "../../internals/colorScale.js";
5
- import { getTickNumber } from "../../hooks/useTicks.js";
6
- import { getScale } from "../../internals/getScale.js";
7
- import { zoomScaleRange } from "./zoom.js";
8
- import { getAxisExtremum } from "./getAxisExtremum.js";
9
- const getRange = (drawingArea, axisDirection, isReverse) => {
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 isReverse ? range.reverse() : range;
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 computeValue({
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.reverse);
42
- const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
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 === 'x' ? range : [range[1], range[0]];
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 === 'x' ? range : [...range].reverse();
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,
@@ -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';
@@ -22,6 +22,7 @@ export * from "./getSVGPoint.js";
22
22
  export * from "./isDefined.js";
23
23
  export { unstable_cleanupDOM } from "./domUtils.js";
24
24
  export * from "./getScale.js";
25
+ export * from "./computeAxisValue.js";
25
26
 
26
27
  // contexts
27
28
 
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;