From e8bc9a9ab57d7a856d663b90ee7ec0bdea707411 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 18 Sep 2024 10:30:32 +0200 Subject: [PATCH] [charts] Add a `PolarProvider` to manage polar axes (#14642) --- .../CartesianProviderPro.tsx | 8 +- .../CartesianProvider/CartesianProvider.tsx | 6 +- .../src/context/CartesianProvider/index.ts | 8 -- .../context/PluginProvider/Plugin.types.ts | 4 + .../context/PluginProvider/PluginContext.ts | 2 + .../src/context/PluginProvider/index.ts | 2 + .../context/PluginProvider/mergePlugins.ts | 15 ++++ .../PluginProvider/useRadiusExtremumGetter.ts | 28 ++++++ .../useRotationExtremumGetter.ts | 28 ++++++ .../src/context/PolarProvider/Polar.types.ts | 52 +++++++++++ .../src/context/PolarProvider/PolarContext.ts | 18 ++++ .../context/PolarProvider/PolarProvider.tsx | 59 +++++++++++++ .../context/PolarProvider/getAxisExtremum.ts | 48 +++++++++++ .../src/context/PolarProvider/index.ts | 0 .../context/PolarProvider/usePolarContext.ts | 9 ++ .../computeAxisValue.ts} | 86 +++++++++++++------ packages/x-charts/src/internals/index.ts | 1 + packages/x-charts/src/models/axis.ts | 22 +++++ 18 files changed, 356 insertions(+), 40 deletions(-) create mode 100644 packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts create mode 100644 packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts create mode 100644 packages/x-charts/src/context/PolarProvider/Polar.types.ts create mode 100644 packages/x-charts/src/context/PolarProvider/PolarContext.ts create mode 100644 packages/x-charts/src/context/PolarProvider/PolarProvider.tsx create mode 100644 packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts create mode 100644 packages/x-charts/src/context/PolarProvider/index.ts create mode 100644 packages/x-charts/src/context/PolarProvider/usePolarContext.ts rename packages/x-charts/src/{context/CartesianProvider/computeValue.ts => internals/computeAxisValue.ts} (69%) diff --git a/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx b/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx index 2834b7b2f6d0b..555acf19086ec 100644 --- a/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx +++ b/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx @@ -5,7 +5,7 @@ import { useSeries, CartesianContext, CartesianProviderProps, - cartesianProviderUtils, + computeAxisValue, useXExtremumGetter, useYExtremumGetter, ZoomAxisFilters, @@ -13,8 +13,6 @@ import { import { useZoom } from '../ZoomProvider/useZoom'; import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper'; -const { computeValue } = cartesianProviderUtils; - export interface CartesianProviderProProps extends CartesianProviderProps {} function CartesianProviderPro(props: CartesianProviderProProps) { @@ -66,7 +64,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) { const xValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: xAxis, @@ -81,7 +79,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) { const yValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: yAxis, diff --git a/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx b/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx index ce91adc949fae..6ef033c96f8fe 100644 --- a/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx +++ b/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx @@ -1,9 +1,9 @@ 'use client'; import * as React from 'react'; +import { computeAxisValue } from '../../internals/computeAxisValue'; import { useDrawingArea } from '../../hooks/useDrawingArea'; import { useSeries } from '../../hooks/useSeries'; import { CartesianContext } from './CartesianContext'; -import { computeValue } from './computeValue'; import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter'; import { useYExtremumGetter } from '../PluginProvider'; import { CartesianProviderProps } from './Cartesian.types'; @@ -18,7 +18,7 @@ function CartesianProvider(props: CartesianProviderProps) { const xValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: xAxis, @@ -30,7 +30,7 @@ function CartesianProvider(props: CartesianProviderProps) { const yValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: yAxis, diff --git a/packages/x-charts/src/context/CartesianProvider/index.ts b/packages/x-charts/src/context/CartesianProvider/index.ts index e17cfb004cd88..68ff254ef711c 100644 --- a/packages/x-charts/src/context/CartesianProvider/index.ts +++ b/packages/x-charts/src/context/CartesianProvider/index.ts @@ -1,12 +1,4 @@ -import { computeValue } from './computeValue'; - export * from './CartesianProvider'; export * from './CartesianContext'; export * from './useCartesianContext'; export * from './Cartesian.types'; - -const cartesianProviderUtils = { - computeValue, -}; - -export { cartesianProviderUtils }; diff --git a/packages/x-charts/src/context/PluginProvider/Plugin.types.ts b/packages/x-charts/src/context/PluginProvider/Plugin.types.ts index d175ba511cdee..3cc7f7f8826a0 100644 --- a/packages/x-charts/src/context/PluginProvider/Plugin.types.ts +++ b/packages/x-charts/src/context/PluginProvider/Plugin.types.ts @@ -17,6 +17,8 @@ export type PluginContextState = { colorProcessors: ColorProcessorsConfig; xExtremumGetters: ExtremumGettersConfig; yExtremumGetters: ExtremumGettersConfig; + rotationExtremumGetters: ExtremumGettersConfig; + radiusExtremumGetters: ExtremumGettersConfig; }; export type ChartsPlugin = T extends ChartSeriesType @@ -26,5 +28,7 @@ export type ChartsPlugin = T extends ChartSeriesType colorProcessor: ColorProcessor; xExtremumGetter?: ExtremumGetter; yExtremumGetter?: ExtremumGetter; + rotationExtremumGetter?: ExtremumGetter; + radiusExtremumGetter?: ExtremumGetter; } : never; diff --git a/packages/x-charts/src/context/PluginProvider/PluginContext.ts b/packages/x-charts/src/context/PluginProvider/PluginContext.ts index 5cce0406b8589..3924afa05b79c 100644 --- a/packages/x-charts/src/context/PluginProvider/PluginContext.ts +++ b/packages/x-charts/src/context/PluginProvider/PluginContext.ts @@ -9,6 +9,8 @@ export const PluginContext = React.createContext[]) { const colorProcessors: ColorProcessorsConfig = {}; const xExtremumGetters: ExtremumGettersConfig = {}; const yExtremumGetters: ExtremumGettersConfig = {}; + const rotationExtremumGetters: ExtremumGettersConfig = {}; + const radiusExtremumGetters: ExtremumGettersConfig = {}; for (let i = 0; i < defaultizedPlugins.length; i += 1) { const plugin = defaultizedPlugins[i]; @@ -33,6 +35,17 @@ export function mergePlugins(plugins?: ChartsPlugin[]) { if (plugin.yExtremumGetter) { yExtremumGetters[seriesType] = plugin.yExtremumGetter as ExtremumGetter; } + + if (plugin.rotationExtremumGetter) { + rotationExtremumGetters[seriesType] = plugin.rotationExtremumGetter as ExtremumGetter< + typeof seriesType + >; + } + if (plugin.radiusExtremumGetter) { + radiusExtremumGetters[seriesType] = plugin.radiusExtremumGetter as ExtremumGetter< + typeof seriesType + >; + } } return { @@ -40,5 +53,7 @@ export function mergePlugins(plugins?: ChartsPlugin[]) { colorProcessors, xExtremumGetters, yExtremumGetters, + rotationExtremumGetters, + radiusExtremumGetters, }; } diff --git a/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts new file mode 100644 index 0000000000000..bc7e1ce5b56e9 --- /dev/null +++ b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts @@ -0,0 +1,28 @@ +'use client'; +import * as React from 'react'; +import { ChartSeriesType } from '../../models/seriesType/config'; +import { PluginContext } from './PluginContext'; +import { ExtremumGettersConfig } from './ExtremumGetter.types'; + +export function useRadiusExtremumGetter( + seriesType: T, +): ExtremumGettersConfig[T]; +export function useRadiusExtremumGetter(): ExtremumGettersConfig; +export function useRadiusExtremumGetter(seriesType?: ChartSeriesType) { + const { isInitialized, data } = React.useContext(PluginContext); + + if (!isInitialized) { + 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'), + ); + } + + if (!seriesType) { + return data.radiusExtremumGetters; + } + + return data.radiusExtremumGetters[seriesType]; +} diff --git a/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts new file mode 100644 index 0000000000000..5b8bc6b92be1e --- /dev/null +++ b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts @@ -0,0 +1,28 @@ +'use client'; +import * as React from 'react'; +import { ChartSeriesType } from '../../models/seriesType/config'; +import { PluginContext } from './PluginContext'; +import { ExtremumGettersConfig } from './ExtremumGetter.types'; + +export function useRotationExtremumGetter( + seriesType: T, +): ExtremumGettersConfig[T]; +export function useRotationExtremumGetter(): ExtremumGettersConfig; +export function useRotationExtremumGetter(seriesType?: ChartSeriesType) { + const { isInitialized, data } = React.useContext(PluginContext); + + if (!isInitialized) { + 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'), + ); + } + + if (!seriesType) { + return data.rotationExtremumGetters; + } + + return data.rotationExtremumGetters[seriesType]; +} diff --git a/packages/x-charts/src/context/PolarProvider/Polar.types.ts b/packages/x-charts/src/context/PolarProvider/Polar.types.ts new file mode 100644 index 0000000000000..a41fe3704d810 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/Polar.types.ts @@ -0,0 +1,52 @@ +import { DatasetType } from '../../models/seriesType/config'; +import { + AxisDefaultized, + ScaleName, + AxisId, + AxisConfig, + ChartsRotationAxisProps, + ChartsRadiusAxisProps, +} from '../../models/axis'; + +export type PolarProviderProps = { + /** + * The configuration of the rotation-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + rotationAxis: AxisConfig[]; + /** + * The configuration of the radial-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + radiusAxis: AxisConfig<'linear', any, ChartsRadiusAxisProps>[]; + /** + * An array of objects that can be used to populate series and axes data using their `dataKey` property. + */ + dataset?: DatasetType; + children: React.ReactNode; +}; + +export type DefaultizedAxisConfig = { + [axisId: AxisId]: AxisDefaultized; +}; + +export type PolarContextState = { + /** + * Mapping from rotation-axis key to scaling configuration. + */ + rotationAxis: DefaultizedAxisConfig; + /** + * Mapping from radius-axis key to scaling configuration. + */ + radiusAxis: DefaultizedAxisConfig; + /** + * The rotation-axes IDs sorted by order they got provided. + */ + rotationAxisIds: AxisId[]; + /** + * The radius-axes IDs sorted by order they got provided. + */ + radiusAxisIds: AxisId[]; +}; diff --git a/packages/x-charts/src/context/PolarProvider/PolarContext.ts b/packages/x-charts/src/context/PolarProvider/PolarContext.ts new file mode 100644 index 0000000000000..ed4c0b0169eac --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/PolarContext.ts @@ -0,0 +1,18 @@ +import * as React from 'react'; + +import { Initializable } from '../context.types'; +import { PolarContextState } from './Polar.types'; + +export const PolarContext = React.createContext>({ + isInitialized: false, + data: { + rotationAxis: {}, + radiusAxis: {}, + rotationAxisIds: [], + radiusAxisIds: [], + }, +}); + +if (process.env.NODE_ENV !== 'production') { + PolarContext.displayName = 'PolarContext'; +} diff --git a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx new file mode 100644 index 0000000000000..515e3fa5fbf0e --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx @@ -0,0 +1,59 @@ +'use client'; +import * as React from 'react'; +import { computeAxisValue } from '../../internals/computeAxisValue'; +import { useDrawingArea } from '../../hooks/useDrawingArea'; +import { useSeries } from '../../hooks/useSeries'; +import { PolarContext } from './PolarContext'; +import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter'; +import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter'; +import { PolarProviderProps } from './Polar.types'; + +function PolarProvider(props: PolarProviderProps) { + const { rotationAxis, radiusAxis, children } = props; + + const formattedSeries = useSeries(); + const drawingArea = useDrawingArea(); + const rotationExtremumGetters = useRotationExtremumGetter(); + const radiusExtremumGetters = useRadiusExtremumGetter(); + + const rotationValues = React.useMemo( + () => + computeAxisValue({ + drawingArea, + formattedSeries, + axis: rotationAxis, + extremumGetters: rotationExtremumGetters, + axisDirection: 'rotation', + }), + [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters], + ); + + const radiusValues = React.useMemo( + () => + computeAxisValue({ + drawingArea, + formattedSeries, + axis: radiusAxis, + extremumGetters: radiusExtremumGetters, + axisDirection: 'radius', + }), + [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters], + ); + + const value = React.useMemo( + () => ({ + isInitialized: true, + data: { + rotationAxis: rotationValues.axis, + radiusAxis: radiusValues.axis, + rotationAxisIds: rotationValues.axisIds, + radiusAxisIds: radiusValues.axisIds, + }, + }), + [rotationValues, radiusValues], + ); + + return {children}; +} + +export { PolarProvider }; diff --git a/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts b/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts new file mode 100644 index 0000000000000..e08b66fab04e3 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts @@ -0,0 +1,48 @@ +import { AxisConfig } from '../../models'; +import { CartesianChartSeriesType } from '../../models/seriesType/config'; +import { FormattedSeries } from '../SeriesProvider'; +import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider'; + +const axisExtremumCallback = ( + acc: ExtremumGetterResult, + chartType: T, + axis: AxisConfig, + getters: ExtremumGettersConfig, + axisIndex: number, + formattedSeries: FormattedSeries, +): ExtremumGetterResult => { + const getter = getters[chartType]; + const series = formattedSeries[chartType]?.series ?? {}; + + const [minChartTypeData, maxChartTypeData] = getter?.({ + series, + axis, + axisIndex, + isDefaultAxis: axisIndex === 0, + }) ?? [Infinity, -Infinity]; + + const [minData, maxData] = acc; + + return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)]; +}; + +export const getAxisExtremum = ( + axis: AxisConfig, + getters: ExtremumGettersConfig, + axisIndex: number, + formattedSeries: FormattedSeries, +) => { + const charTypes = Object.keys(getters) as CartesianChartSeriesType[]; + + const extremums = charTypes.reduce( + (acc, charType) => + axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries), + [Infinity, -Infinity], + ); + + if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) { + return [Infinity, -Infinity]; + } + + return extremums; +}; diff --git a/packages/x-charts/src/context/PolarProvider/index.ts b/packages/x-charts/src/context/PolarProvider/index.ts new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/packages/x-charts/src/context/PolarProvider/usePolarContext.ts b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts new file mode 100644 index 0000000000000..7973cc6a535a6 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts @@ -0,0 +1,9 @@ +'use client'; +import * as React from 'react'; +import { PolarContext } from './PolarContext'; +import { PolarContextState } from './Polar.types'; + +export const usePolarContext = (): PolarContextState => { + const { data } = React.useContext(PolarContext); + return data; +}; diff --git a/packages/x-charts/src/context/CartesianProvider/computeValue.ts b/packages/x-charts/src/internals/computeAxisValue.ts similarity index 69% rename from packages/x-charts/src/context/CartesianProvider/computeValue.ts rename to packages/x-charts/src/internals/computeAxisValue.ts index ce86d675b65aa..bd286f0848f64 100644 --- a/packages/x-charts/src/context/CartesianProvider/computeValue.ts +++ b/packages/x-charts/src/internals/computeAxisValue.ts @@ -1,36 +1,62 @@ import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale'; -import { AxisConfig, ScaleName } from '../../models'; +import { AxisConfig, ScaleName } from '../models'; import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, isBandScaleConfig, isPointScaleConfig, -} from '../../models/axis'; -import { CartesianChartSeriesType } from '../../models/seriesType/config'; -import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale'; -import { getTickNumber } from '../../hooks/useTicks'; -import { getScale } from '../../internals/getScale'; -import { DrawingArea } from '../DrawingProvider'; -import { FormattedSeries } from '../SeriesProvider'; -import { zoomScaleRange } from './zoom'; -import { ExtremumGetter } from '../PluginProvider'; + ChartsRadiusAxisProps, + ChartsRotationAxisProps, +} from '../models/axis'; +import { CartesianChartSeriesType } from '../models/seriesType/config'; +import { getColorScale, getOrdinalColorScale } from './colorScale'; +import { getTickNumber } from '../hooks/useTicks'; +import { getScale } from './getScale'; +import { DrawingArea } from '../context/DrawingProvider'; +import { FormattedSeries } from '../context/SeriesProvider'; +import { zoomScaleRange } from '../context/CartesianProvider/zoom'; +import { ExtremumGetter } from '../context/PluginProvider'; import { DefaultizedAxisConfig, ZoomData, ZoomOptions, GetZoomAxisFilters, -} from './Cartesian.types'; -import { getAxisExtremum } from './getAxisExtremum'; - -const getRange = (drawingArea: DrawingArea, axisDirection: 'x' | 'y', isReverse?: boolean) => { - const range = +} from '../context/CartesianProvider/Cartesian.types'; +import { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum'; + +function getRange( + drawingArea: DrawingArea, + axisDirection: 'x' | 'y' | 'radius' | 'rotation', + axis: AxisConfig< + ScaleName, + any, + ChartsRotationAxisProps | ChartsRotationAxisProps | ChartsAxisProps + >, +): [number, number] { + if (axisDirection === 'rotation') { + const { startAngle = 0, endAngle = startAngle + 360 } = axis as AxisConfig< + ScaleName, + any, + ChartsRotationAxisProps + >; + return axis.reverse + ? [(Math.PI * startAngle) / 180, (Math.PI * endAngle) / 180] + : [(Math.PI * endAngle) / 180, (Math.PI * startAngle) / 180]; + } + if (axisDirection === 'radius') { + const { minRadius = 0, maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2 } = + axis as AxisConfig; + return [minRadius, maxRadius]; + } + + const range: [number, number] = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top]; - return isReverse ? range.reverse() : range; -}; + return axis.reverse ? [range[1], range[0]] : range; +} const isDateData = (data?: any[]): data is Date[] => data?.[0] instanceof Date; @@ -61,19 +87,31 @@ type ComputeCommonParams = { getFilters?: GetZoomAxisFilters; }; -export function computeValue( +export function computeAxisValue( options: ComputeCommonParams & { axis: AxisConfig[]; axisDirection: 'y'; }, ): ComputeResult; -export function computeValue( +export function computeAxisValue( options: ComputeCommonParams & { axis: AxisConfig[]; axisDirection: 'x'; }, ): ComputeResult; -export function computeValue({ +export function computeAxisValue( + options: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'radius'; + }, +): ComputeResult; +export function computeAxisValue( + options: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'rotation'; + }, +): ComputeResult; +export function computeAxisValue({ drawingArea, formattedSeries, axis: allAxis, @@ -84,7 +122,7 @@ export function computeValue({ getFilters, }: ComputeCommonParams & { axis: AxisConfig[]; - axisDirection: 'x' | 'y'; + axisDirection: 'x' | 'y' | 'radius' | 'rotation'; }) { const completeAxis: DefaultizedAxisConfig = {}; allAxis.forEach((eachAxis, axisIndex) => { @@ -92,7 +130,7 @@ export function computeValue({ const zoomOption = zoomOptions?.[axis.id]; const zoom = zoomData?.find(({ axisId }) => axisId === axis.id); const zoomRange: [number, number] = zoom ? [zoom.start, zoom.end] : [0, 100]; - const range = getRange(drawingArea, axisDirection, axis.reverse); + const range = getRange(drawingArea, axisDirection, axis); const [minData, maxData] = getAxisExtremum( axis, @@ -107,7 +145,7 @@ export function computeValue({ const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO; const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO; // Reverse range because ordinal scales are presented from top to bottom on y-axis - const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]]; + const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range; const zoomedRange = zoomScaleRange(scaleRange, zoomRange); completeAxis[axis.id] = { @@ -132,7 +170,7 @@ export function computeValue({ } } if (isPointScaleConfig(axis)) { - const scaleRange = axisDirection === 'x' ? range : [...range].reverse(); + const scaleRange = axisDirection === 'y' ? [...range].reverse() : range; const zoomedRange = zoomScaleRange(scaleRange, zoomRange); completeAxis[axis.id] = { diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index e3eca45c3d567..aaeb3b434ee69 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -23,6 +23,7 @@ export * from './getSVGPoint'; export * from './isDefined'; export { unstable_cleanupDOM } from './domUtils'; export * from './getScale'; +export * from './computeAxisValue'; // contexts diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 2d2f49ed71e13..fddf9a852a7ba 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -158,6 +158,28 @@ export interface ChartsXAxisProps extends ChartsAxisProps { position?: 'top' | 'bottom'; } +export interface ChartsRotationAxisProps extends ChartsAxisProps { + /** + * The start angle (in deg). + */ + startAngle?: number; + /** + * The end angle (in deg). + */ + endAngle?: number; +} + +export interface ChartsRadiusAxisProps extends ChartsAxisProps { + /** + * The minimal radius. + */ + minRadius?: number; + /** + * The maximal radius. + */ + maxRadius?: number; +} + export type ScaleName = keyof AxisScaleConfig; export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';