From f058fdadb39817ea5fe71bf77f6eb15e9b7097c8 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 16 Sep 2024 17:29:07 +0200 Subject: [PATCH 1/5] [charts] Add a to manage polar axes --- .../context/PluginProvider/Plugin.types.ts | 4 + .../src/context/PluginProvider/index.ts | 2 + .../PluginProvider/useRadiusExtremumGetter.ts | 27 +++ .../useRotationExtremumGetter.ts | 27 +++ .../src/context/PolarProvider/Polar.types.ts | 52 ++++++ .../src/context/PolarProvider/PolarContext.ts | 18 ++ .../context/PolarProvider/PolarProvider.tsx | 58 ++++++ .../src/context/PolarProvider/computeValue.ts | 168 ++++++++++++++++++ .../context/PolarProvider/defaultizeAxis.ts | 0 .../context/PolarProvider/getAxisExtremum.ts | 48 +++++ .../src/context/PolarProvider/index.ts | 0 .../context/PolarProvider/usePolarContext.ts | 8 + packages/x-charts/src/models/axis.ts | 22 +++ 13 files changed, 434 insertions(+) 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/computeValue.ts create mode 100644 packages/x-charts/src/context/PolarProvider/defaultizeAxis.ts 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 diff --git a/packages/x-charts/src/context/PluginProvider/Plugin.types.ts b/packages/x-charts/src/context/PluginProvider/Plugin.types.ts index d175ba511cde..3cc7f7f8826a 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/index.ts b/packages/x-charts/src/context/PluginProvider/index.ts index a23ee0a4db56..20f7446873be 100644 --- a/packages/x-charts/src/context/PluginProvider/index.ts +++ b/packages/x-charts/src/context/PluginProvider/index.ts @@ -8,3 +8,5 @@ export * from './useColorProcessor'; export * from './useSeriesFormatter'; export * from './useXExtremumGetter'; export * from './useYExtremumGetter'; +export * from './useRadiusExtremumGetter'; +export * from './useRotationExtremumGetter'; \ No newline at end of file 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 000000000000..6c54b9d8807c --- /dev/null +++ b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts @@ -0,0 +1,27 @@ +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]; +} \ No newline at end of file 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 000000000000..da410e2ed95f --- /dev/null +++ b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts @@ -0,0 +1,27 @@ +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 000000000000..a0acbbac4175 --- /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[]; +}; \ No newline at end of file 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 000000000000..ed4c0b0169ea --- /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 000000000000..c61b74368c50 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { useDrawingArea } from '../../hooks/useDrawingArea'; +import { useSeries } from '../../hooks/useSeries'; +import { PolarContext } from './PolarContext'; +import { computeValue } from './computeValue'; +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( + () => + computeValue({ + drawingArea, + formattedSeries, + axis: rotationAxis, + extremumGetters: rotationExtremumGetters, + axisDirection: 'rotation', + }), + [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters], + ); + + const radiusValues = React.useMemo( + () => + computeValue({ + 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/computeValue.ts b/packages/x-charts/src/context/PolarProvider/computeValue.ts new file mode 100644 index 000000000000..fa4570e95f11 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/computeValue.ts @@ -0,0 +1,168 @@ +import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale'; +import { AxisConfig, ScaleName } from '../../models'; +import { + ChartsAxisProps, + ChartsRadiusAxisProps, + ChartsRotationAxisProps, + 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 { ExtremumGetter } from '../PluginProvider'; +import { DefaultizedAxisConfig } from './Polar.types'; +import { getAxisExtremum } from './getAxisExtremum'; + +const getRange = ( + drawingArea: DrawingArea, + axisDirection: 'radius' | 'rotation', + axis: AxisConfig, +) => { + 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]; + } + + const { minRadius = 0, maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2 } = + axis as AxisConfig; + return [minRadius, maxRadius]; +}; + +const isDateData = (data?: any[]): data is Date[] => data?.[0] instanceof Date; + +function createDateFormatter( + axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, + range: number[], +): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'] { + const timeScale = scaleTime(axis.data!, range); + + return (v, { location }) => + location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`; +} + +const DEFAULT_CATEGORY_GAP_RATIO = 0.2; +const DEFAULT_BAR_GAP_RATIO = 0.1; + +type ComputeResult = { + axis: DefaultizedAxisConfig; + axisIds: string[]; +}; + +type ComputeCommonParams = { + drawingArea: DrawingArea; + formattedSeries: FormattedSeries; + extremumGetters: { [K in CartesianChartSeriesType]?: ExtremumGetter }; +}; + +export function computeValue( + options: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'radius'; + }, +): ComputeResult; +export function computeValue( + options: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'rotation'; + }, +): ComputeResult; +export function computeValue({ + drawingArea, + formattedSeries, + axis: allAxis, + extremumGetters, + axisDirection, +}: ComputeCommonParams & { + axis: AxisConfig[]; + axisDirection: 'radius' | 'rotation'; +}) { + const completeAxis: DefaultizedAxisConfig = {}; + allAxis.forEach((axis, axisIndex) => { + const range = getRange(drawingArea, axisDirection, axis); + + const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries); + const data = axis.data ?? []; + + if (isBandScaleConfig(axis)) { + const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO; + const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO; + + completeAxis[axis.id] = { + categoryGapRatio, + barGapRatio, + ...axis, + data, + scale: scaleBand(axis.data!, range) + .paddingInner(categoryGapRatio) + .paddingOuter(categoryGapRatio / 2), + tickNumber: axis.data!.length, + colorScale: + axis.colorMap && + (axis.colorMap.type === 'ordinal' + ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap }) + : getColorScale(axis.colorMap)), + }; + + if (isDateData(axis.data)) { + const dateFormatter = createDateFormatter(axis, range); + completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter; + } + } + if (isPointScaleConfig(axis)) { + completeAxis[axis.id] = { + ...axis, + data, + scale: scalePoint(axis.data!, range), + tickNumber: axis.data!.length, + colorScale: + axis.colorMap && + (axis.colorMap.type === 'ordinal' + ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap }) + : getColorScale(axis.colorMap)), + }; + + if (isDateData(axis.data)) { + const dateFormatter = createDateFormatter(axis, range); + completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter; + } + } + + if (axis.scaleType === 'band' || axis.scaleType === 'point') { + // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`. + return; + } + + const scaleType = axis.scaleType ?? ('linear' as const); + + const axisExtremums = [axis.min ?? minData, axis.max ?? maxData]; + const rawTickNumber = getTickNumber({ ...axis, range, domain: axisExtremums }); + const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100); + + const scale = getScale(scaleType, axisExtremums, range).nice(rawTickNumber); + const [minDomain, maxDomain] = scale.domain(); + const domain = [axis.min ?? minDomain, axis.max ?? maxDomain]; + + completeAxis[axis.id] = { + ...axis, + data, + scaleType: scaleType as any, + scale: scale.domain(domain) as any, + tickNumber, + colorScale: axis.colorMap && getColorScale(axis.colorMap), + }; + }); + return { + axis: completeAxis, + axisIds: allAxis.map(({ id }) => id), + }; +} \ No newline at end of file diff --git a/packages/x-charts/src/context/PolarProvider/defaultizeAxis.ts b/packages/x-charts/src/context/PolarProvider/defaultizeAxis.ts new file mode 100644 index 000000000000..e69de29bb2d1 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 000000000000..1609709b15db --- /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; +}; \ No newline at end of file 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 000000000000..e69de29bb2d1 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 000000000000..ead58f321676 --- /dev/null +++ b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts @@ -0,0 +1,8 @@ +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; +}; \ No newline at end of file diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 2d2f49ed71e1..fddf9a852a7b 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'; From 623ad17732cdff064bd906fa220c0dcd9bb3a575 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 17 Sep 2024 09:30:24 +0200 Subject: [PATCH 2/5] fix TS --- .../src/context/PluginProvider/PluginContext.ts | 2 ++ .../x-charts/src/context/PluginProvider/index.ts | 2 +- .../src/context/PluginProvider/mergePlugins.ts | 15 +++++++++++++++ .../PluginProvider/useRadiusExtremumGetter.ts | 2 +- .../src/context/PolarProvider/Polar.types.ts | 2 +- .../src/context/PolarProvider/computeValue.ts | 2 +- .../src/context/PolarProvider/getAxisExtremum.ts | 2 +- .../src/context/PolarProvider/usePolarContext.ts | 2 +- 8 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/x-charts/src/context/PluginProvider/PluginContext.ts b/packages/x-charts/src/context/PluginProvider/PluginContext.ts index 5cce0406b858..3924afa05b79 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 index 6c54b9d8807c..6f530c74dfea 100644 --- a/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts +++ b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts @@ -24,4 +24,4 @@ export function useRadiusExtremumGetter(seriesType?: ChartSeriesType) { } return data.radiusExtremumGetters[seriesType]; -} \ No newline at end of file +} diff --git a/packages/x-charts/src/context/PolarProvider/Polar.types.ts b/packages/x-charts/src/context/PolarProvider/Polar.types.ts index a0acbbac4175..a41fe3704d81 100644 --- a/packages/x-charts/src/context/PolarProvider/Polar.types.ts +++ b/packages/x-charts/src/context/PolarProvider/Polar.types.ts @@ -49,4 +49,4 @@ export type PolarContextState = { * The radius-axes IDs sorted by order they got provided. */ radiusAxisIds: AxisId[]; -}; \ No newline at end of file +}; diff --git a/packages/x-charts/src/context/PolarProvider/computeValue.ts b/packages/x-charts/src/context/PolarProvider/computeValue.ts index fa4570e95f11..822c5d3d1566 100644 --- a/packages/x-charts/src/context/PolarProvider/computeValue.ts +++ b/packages/x-charts/src/context/PolarProvider/computeValue.ts @@ -165,4 +165,4 @@ export function computeValue({ axis: completeAxis, axisIds: allAxis.map(({ id }) => id), }; -} \ No newline at end of file +} diff --git a/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts b/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts index 1609709b15db..e08b66fab04e 100644 --- a/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts +++ b/packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts @@ -45,4 +45,4 @@ export const getAxisExtremum = ( } return extremums; -}; \ No newline at end of file +}; diff --git a/packages/x-charts/src/context/PolarProvider/usePolarContext.ts b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts index ead58f321676..bab038c20dbf 100644 --- a/packages/x-charts/src/context/PolarProvider/usePolarContext.ts +++ b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts @@ -5,4 +5,4 @@ import { PolarContextState } from './Polar.types'; export const usePolarContext = (): PolarContextState => { const { data } = React.useContext(PolarContext); return data; -}; \ No newline at end of file +}; From 460cf5f8c98e349979a3c23f8cb5e07ac3fb88c2 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 17 Sep 2024 09:40:02 +0200 Subject: [PATCH 3/5] rsc --- .../src/context/PluginProvider/useRadiusExtremumGetter.ts | 1 + .../src/context/PluginProvider/useRotationExtremumGetter.ts | 1 + packages/x-charts/src/context/PolarProvider/PolarProvider.tsx | 1 + packages/x-charts/src/context/PolarProvider/usePolarContext.ts | 1 + 4 files changed, 4 insertions(+) diff --git a/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts index 6f530c74dfea..bc7e1ce5b56e 100644 --- a/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts +++ b/packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import { ChartSeriesType } from '../../models/seriesType/config'; import { PluginContext } from './PluginContext'; diff --git a/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts index da410e2ed95f..5b8bc6b92be1 100644 --- a/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts +++ b/packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import { ChartSeriesType } from '../../models/seriesType/config'; import { PluginContext } from './PluginContext'; diff --git a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx index c61b74368c50..129b1c344d34 100644 --- a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx +++ b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import { useDrawingArea } from '../../hooks/useDrawingArea'; import { useSeries } from '../../hooks/useSeries'; diff --git a/packages/x-charts/src/context/PolarProvider/usePolarContext.ts b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts index bab038c20dbf..7973cc6a535a 100644 --- a/packages/x-charts/src/context/PolarProvider/usePolarContext.ts +++ b/packages/x-charts/src/context/PolarProvider/usePolarContext.ts @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import { PolarContext } from './PolarContext'; import { PolarContextState } from './Polar.types'; From e665a1e6d536680ace8d225f7b9d4a8ac9b83386 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 17 Sep 2024 18:02:51 +0200 Subject: [PATCH 4/5] merge both compute value --- .../CartesianProviderPro.tsx | 6 +- .../CartesianProvider/CartesianProvider.tsx | 6 +- .../src/context/CartesianProvider/index.ts | 4 +- .../context/PolarProvider/PolarProvider.tsx | 6 +- .../src/context/PolarProvider/computeValue.ts | 168 ------------------ .../context/PolarProvider/defaultizeAxis.ts | 0 .../computeValue.ts => computeAxisValue.ts} | 86 ++++++--- 7 files changed, 73 insertions(+), 203 deletions(-) delete mode 100644 packages/x-charts/src/context/PolarProvider/computeValue.ts delete mode 100644 packages/x-charts/src/context/PolarProvider/defaultizeAxis.ts rename packages/x-charts/src/context/{CartesianProvider/computeValue.ts => 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 2834b7b2f6d0..3dae8f40956c 100644 --- a/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx +++ b/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx @@ -13,7 +13,7 @@ import { import { useZoom } from '../ZoomProvider/useZoom'; import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper'; -const { computeValue } = cartesianProviderUtils; +const { computeAxisValue } = cartesianProviderUtils; export interface CartesianProviderProProps extends CartesianProviderProps {} @@ -66,7 +66,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) { const xValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: xAxis, @@ -81,7 +81,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 ce91adc949fa..c74ea3cb4e1d 100644 --- a/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx +++ b/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { useDrawingArea } from '../../hooks/useDrawingArea'; import { useSeries } from '../../hooks/useSeries'; import { CartesianContext } from './CartesianContext'; -import { computeValue } from './computeValue'; +import { computeAxisValue } from '../computeAxisValue'; 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 e17cfb004cd8..9e82305eb168 100644 --- a/packages/x-charts/src/context/CartesianProvider/index.ts +++ b/packages/x-charts/src/context/CartesianProvider/index.ts @@ -1,4 +1,4 @@ -import { computeValue } from './computeValue'; +import { computeAxisValue } from '../computeAxisValue'; export * from './CartesianProvider'; export * from './CartesianContext'; @@ -6,7 +6,7 @@ export * from './useCartesianContext'; export * from './Cartesian.types'; const cartesianProviderUtils = { - computeValue, + computeAxisValue, }; export { cartesianProviderUtils }; diff --git a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx index 129b1c344d34..7d9de5581d14 100644 --- a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx +++ b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { useDrawingArea } from '../../hooks/useDrawingArea'; import { useSeries } from '../../hooks/useSeries'; import { PolarContext } from './PolarContext'; -import { computeValue } from './computeValue'; +import { computeAxisValue } from '../computeAxisValue'; import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter'; import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter'; import { PolarProviderProps } from './Polar.types'; @@ -18,7 +18,7 @@ function PolarProvider(props: PolarProviderProps) { const rotationValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: rotationAxis, @@ -30,7 +30,7 @@ function PolarProvider(props: PolarProviderProps) { const radiusValues = React.useMemo( () => - computeValue({ + computeAxisValue({ drawingArea, formattedSeries, axis: radiusAxis, diff --git a/packages/x-charts/src/context/PolarProvider/computeValue.ts b/packages/x-charts/src/context/PolarProvider/computeValue.ts deleted file mode 100644 index 822c5d3d1566..000000000000 --- a/packages/x-charts/src/context/PolarProvider/computeValue.ts +++ /dev/null @@ -1,168 +0,0 @@ -import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale'; -import { AxisConfig, ScaleName } from '../../models'; -import { - ChartsAxisProps, - ChartsRadiusAxisProps, - ChartsRotationAxisProps, - 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 { ExtremumGetter } from '../PluginProvider'; -import { DefaultizedAxisConfig } from './Polar.types'; -import { getAxisExtremum } from './getAxisExtremum'; - -const getRange = ( - drawingArea: DrawingArea, - axisDirection: 'radius' | 'rotation', - axis: AxisConfig, -) => { - 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]; - } - - const { minRadius = 0, maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2 } = - axis as AxisConfig; - return [minRadius, maxRadius]; -}; - -const isDateData = (data?: any[]): data is Date[] => data?.[0] instanceof Date; - -function createDateFormatter( - axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, - range: number[], -): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'] { - const timeScale = scaleTime(axis.data!, range); - - return (v, { location }) => - location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`; -} - -const DEFAULT_CATEGORY_GAP_RATIO = 0.2; -const DEFAULT_BAR_GAP_RATIO = 0.1; - -type ComputeResult = { - axis: DefaultizedAxisConfig; - axisIds: string[]; -}; - -type ComputeCommonParams = { - drawingArea: DrawingArea; - formattedSeries: FormattedSeries; - extremumGetters: { [K in CartesianChartSeriesType]?: ExtremumGetter }; -}; - -export function computeValue( - options: ComputeCommonParams & { - axis: AxisConfig[]; - axisDirection: 'radius'; - }, -): ComputeResult; -export function computeValue( - options: ComputeCommonParams & { - axis: AxisConfig[]; - axisDirection: 'rotation'; - }, -): ComputeResult; -export function computeValue({ - drawingArea, - formattedSeries, - axis: allAxis, - extremumGetters, - axisDirection, -}: ComputeCommonParams & { - axis: AxisConfig[]; - axisDirection: 'radius' | 'rotation'; -}) { - const completeAxis: DefaultizedAxisConfig = {}; - allAxis.forEach((axis, axisIndex) => { - const range = getRange(drawingArea, axisDirection, axis); - - const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries); - const data = axis.data ?? []; - - if (isBandScaleConfig(axis)) { - const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO; - const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO; - - completeAxis[axis.id] = { - categoryGapRatio, - barGapRatio, - ...axis, - data, - scale: scaleBand(axis.data!, range) - .paddingInner(categoryGapRatio) - .paddingOuter(categoryGapRatio / 2), - tickNumber: axis.data!.length, - colorScale: - axis.colorMap && - (axis.colorMap.type === 'ordinal' - ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap }) - : getColorScale(axis.colorMap)), - }; - - if (isDateData(axis.data)) { - const dateFormatter = createDateFormatter(axis, range); - completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter; - } - } - if (isPointScaleConfig(axis)) { - completeAxis[axis.id] = { - ...axis, - data, - scale: scalePoint(axis.data!, range), - tickNumber: axis.data!.length, - colorScale: - axis.colorMap && - (axis.colorMap.type === 'ordinal' - ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap }) - : getColorScale(axis.colorMap)), - }; - - if (isDateData(axis.data)) { - const dateFormatter = createDateFormatter(axis, range); - completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter; - } - } - - if (axis.scaleType === 'band' || axis.scaleType === 'point') { - // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`. - return; - } - - const scaleType = axis.scaleType ?? ('linear' as const); - - const axisExtremums = [axis.min ?? minData, axis.max ?? maxData]; - const rawTickNumber = getTickNumber({ ...axis, range, domain: axisExtremums }); - const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100); - - const scale = getScale(scaleType, axisExtremums, range).nice(rawTickNumber); - const [minDomain, maxDomain] = scale.domain(); - const domain = [axis.min ?? minDomain, axis.max ?? maxDomain]; - - completeAxis[axis.id] = { - ...axis, - data, - scaleType: scaleType as any, - scale: scale.domain(domain) as any, - tickNumber, - colorScale: axis.colorMap && getColorScale(axis.colorMap), - }; - }); - return { - axis: completeAxis, - axisIds: allAxis.map(({ id }) => id), - }; -} diff --git a/packages/x-charts/src/context/PolarProvider/defaultizeAxis.ts b/packages/x-charts/src/context/PolarProvider/defaultizeAxis.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/x-charts/src/context/CartesianProvider/computeValue.ts b/packages/x-charts/src/context/computeAxisValue.ts similarity index 69% rename from packages/x-charts/src/context/CartesianProvider/computeValue.ts rename to packages/x-charts/src/context/computeAxisValue.ts index ce86d675b65a..69ce48190e37 100644 --- a/packages/x-charts/src/context/CartesianProvider/computeValue.ts +++ b/packages/x-charts/src/context/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 '../internals/colorScale'; +import { getTickNumber } from '../hooks/useTicks'; +import { getScale } from '../internals/getScale'; +import { DrawingArea } from './DrawingProvider'; +import { FormattedSeries } from './SeriesProvider'; +import { zoomScaleRange } from './CartesianProvider/zoom'; +import { ExtremumGetter } from './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 './CartesianProvider/Cartesian.types'; +import { getAxisExtremum } from './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] = { From 68a729e6d9035885e2a47e3f290ace0112df45db Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 18 Sep 2024 09:53:37 +0200 Subject: [PATCH 5/5] make folder export cohere nt with multi usage of computeAxisValue --- .../CartesianProviderPro.tsx | 4 +--- .../CartesianProvider/CartesianProvider.tsx | 2 +- .../src/context/CartesianProvider/index.ts | 8 -------- .../src/context/PolarProvider/PolarProvider.tsx | 2 +- .../{context => internals}/computeAxisValue.ts | 16 ++++++++-------- packages/x-charts/src/internals/index.ts | 1 + 6 files changed, 12 insertions(+), 21 deletions(-) rename packages/x-charts/src/{context => internals}/computeAxisValue.ts (93%) diff --git a/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx b/packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx index 3dae8f40956c..555acf19086e 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 { computeAxisValue } = cartesianProviderUtils; - export interface CartesianProviderProProps extends CartesianProviderProps {} function CartesianProviderPro(props: CartesianProviderProProps) { diff --git a/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx b/packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx index c74ea3cb4e1d..6ef033c96f8f 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 { computeAxisValue } from '../computeAxisValue'; import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter'; import { useYExtremumGetter } from '../PluginProvider'; import { CartesianProviderProps } from './Cartesian.types'; diff --git a/packages/x-charts/src/context/CartesianProvider/index.ts b/packages/x-charts/src/context/CartesianProvider/index.ts index 9e82305eb168..68ff254ef711 100644 --- a/packages/x-charts/src/context/CartesianProvider/index.ts +++ b/packages/x-charts/src/context/CartesianProvider/index.ts @@ -1,12 +1,4 @@ -import { computeAxisValue } from '../computeAxisValue'; - export * from './CartesianProvider'; export * from './CartesianContext'; export * from './useCartesianContext'; export * from './Cartesian.types'; - -const cartesianProviderUtils = { - computeAxisValue, -}; - -export { cartesianProviderUtils }; diff --git a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx b/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx index 7d9de5581d14..515e3fa5fbf0 100644 --- a/packages/x-charts/src/context/PolarProvider/PolarProvider.tsx +++ b/packages/x-charts/src/context/PolarProvider/PolarProvider.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 { PolarContext } from './PolarContext'; -import { computeAxisValue } from '../computeAxisValue'; import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter'; import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter'; import { PolarProviderProps } from './Polar.types'; diff --git a/packages/x-charts/src/context/computeAxisValue.ts b/packages/x-charts/src/internals/computeAxisValue.ts similarity index 93% rename from packages/x-charts/src/context/computeAxisValue.ts rename to packages/x-charts/src/internals/computeAxisValue.ts index 69ce48190e37..bd286f0848f6 100644 --- a/packages/x-charts/src/context/computeAxisValue.ts +++ b/packages/x-charts/src/internals/computeAxisValue.ts @@ -10,20 +10,20 @@ import { ChartsRotationAxisProps, } from '../models/axis'; import { CartesianChartSeriesType } from '../models/seriesType/config'; -import { getColorScale, getOrdinalColorScale } from '../internals/colorScale'; +import { getColorScale, getOrdinalColorScale } from './colorScale'; import { getTickNumber } from '../hooks/useTicks'; -import { getScale } from '../internals/getScale'; -import { DrawingArea } from './DrawingProvider'; -import { FormattedSeries } from './SeriesProvider'; -import { zoomScaleRange } from './CartesianProvider/zoom'; -import { ExtremumGetter } from './PluginProvider'; +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 './CartesianProvider/Cartesian.types'; -import { getAxisExtremum } from './CartesianProvider/getAxisExtremum'; +} from '../context/CartesianProvider/Cartesian.types'; +import { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum'; function getRange( drawingArea: DrawingArea, diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index e3eca45c3d56..aaeb3b434ee6 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