From e665a1e6d536680ace8d225f7b9d4a8ac9b83386 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 17 Sep 2024 18:02:51 +0200 Subject: [PATCH] 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] = {