From 992394bff65a42b13fcba9d8ac537b9ef2b49561 Mon Sep 17 00:00:00 2001 From: Mohamed Marrouchi Date: Thu, 6 Nov 2025 12:28:46 +0100 Subject: [PATCH] fix: exclude undefined linear scale axis props --- .../ez-react/src/recipes/area/AreaChart.tsx | 21 ++------- .../src/recipes/area/MultiAreaChart.tsx | 20 ++------- .../ez-react/src/recipes/bar/BarChart.tsx | 11 +---- .../src/recipes/column/ColumnChart.tsx | 11 +---- .../src/recipes/column/LineColumnChart.tsx | 11 +---- .../ez-react/src/recipes/line/LineChart.tsx | 21 ++------- .../src/recipes/line/LineErrorMarginChart.tsx | 22 +++------ .../src/recipes/line/MultiLineChart.tsx | 20 ++------- .../src/recipes/scatter/BubbleChart.tsx | 21 ++------- .../src/recipes/scatter/ScatterChart.tsx | 21 ++------- .../ez-react/src/recipes/utils/linearScale.ts | 45 +++++++++++++++++++ 11 files changed, 75 insertions(+), 149 deletions(-) create mode 100644 packages/ez-react/src/recipes/utils/linearScale.ts diff --git a/packages/ez-react/src/recipes/area/AreaChart.tsx b/packages/ez-react/src/recipes/area/AreaChart.tsx index 373d1e6..941acd2 100644 --- a/packages/ez-react/src/recipes/area/AreaChart.tsx +++ b/packages/ez-react/src/recipes/area/AreaChart.tsx @@ -20,6 +20,7 @@ import { Axis } from '@/components/scales/Axis'; import { Grid } from '@/components/scales/grid/Grid'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { Area } from '@/components/Area'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface AreaChartProps extends SVGAttributes { data: RawData; @@ -96,15 +97,7 @@ export const AreaChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -113,15 +106,7 @@ export const AreaChart: FC = ({ direction: Direction.VERTICAL, domainKey: yAxis.domainKey, nice: yAxis.nice || 0, - domain: yAxis.domain, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis), }, }} > diff --git a/packages/ez-react/src/recipes/area/MultiAreaChart.tsx b/packages/ez-react/src/recipes/area/MultiAreaChart.tsx index 2c1537d..7f00073 100644 --- a/packages/ez-react/src/recipes/area/MultiAreaChart.tsx +++ b/packages/ez-react/src/recipes/area/MultiAreaChart.tsx @@ -7,6 +7,7 @@ import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; import { Grid } from '@/components/scales/grid/Grid'; import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; import ScaleLinear from 'eazychart-core/src/scales/ScaleLinear'; import { RawData, @@ -108,15 +109,7 @@ export const MultiAreaChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -125,14 +118,7 @@ export const MultiAreaChart: FC = ({ direction: Direction.VERTICAL, domain: activeDomain, nice: yAxis.nice || 0, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis, ['domain']), }, }} > diff --git a/packages/ez-react/src/recipes/bar/BarChart.tsx b/packages/ez-react/src/recipes/bar/BarChart.tsx index 1d40802..28b8c4e 100644 --- a/packages/ez-react/src/recipes/bar/BarChart.tsx +++ b/packages/ez-react/src/recipes/bar/BarChart.tsx @@ -21,6 +21,7 @@ import { Grid } from '@/components/scales/grid/Grid'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; import { useToggableDatum } from '@/lib/useToggableDatum'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface BarChartProps extends SVGAttributes { data: RawData; @@ -98,15 +99,7 @@ export const BarChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ diff --git a/packages/ez-react/src/recipes/column/ColumnChart.tsx b/packages/ez-react/src/recipes/column/ColumnChart.tsx index a1fb72f..f98941c 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.tsx @@ -21,6 +21,7 @@ import { Grid } from '@/components/scales/grid/Grid'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; import { useToggableDatum } from '@/lib/useToggableDatum'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface ColumnChartProps extends SVGAttributes { data: RawData; @@ -104,15 +105,7 @@ export const ColumnChart: FC = ({ direction: Direction.VERTICAL, domainKey: yAxis.domainKey, nice: yAxis.nice || 0, - domain: yAxis.domain, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis), }, }} > diff --git a/packages/ez-react/src/recipes/column/LineColumnChart.tsx b/packages/ez-react/src/recipes/column/LineColumnChart.tsx index cbf7413..434352c 100644 --- a/packages/ez-react/src/recipes/column/LineColumnChart.tsx +++ b/packages/ez-react/src/recipes/column/LineColumnChart.tsx @@ -20,6 +20,7 @@ import { Point } from '@/components/shapes/Point'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; import { useToggableDatum } from '@/lib/useToggableDatum'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface LineColumnChartProps extends ColumnChartProps { yLineAxis?: AxisConfig; @@ -132,15 +133,7 @@ export const LineColumnChart: FC = ({ direction: Direction.VERTICAL, domainKey: yLineAxis.domainKey, nice: yAxis.nice || 0, - domain: yAxis.domain, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis), }, }} > diff --git a/packages/ez-react/src/recipes/line/LineChart.tsx b/packages/ez-react/src/recipes/line/LineChart.tsx index e421252..23f52dd 100644 --- a/packages/ez-react/src/recipes/line/LineChart.tsx +++ b/packages/ez-react/src/recipes/line/LineChart.tsx @@ -20,6 +20,7 @@ import { Axis } from '@/components/scales/Axis'; import { Grid } from '@/components/scales/grid/Grid'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { Segments } from '@/components/Segments'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface LineChartProps extends SVGAttributes { data: RawData; @@ -96,15 +97,7 @@ export const LineChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -113,15 +106,7 @@ export const LineChart: FC = ({ direction: Direction.VERTICAL, domainKey: yAxis.domainKey, nice: yAxis.nice || 0, - domain: yAxis.domain, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis), }, }} > diff --git a/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx b/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx index 149e684..b6a4ced 100644 --- a/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx +++ b/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx @@ -27,6 +27,7 @@ import { LinePath } from '@/components/shapes/LinePath'; import { Point } from '@/components/shapes/Point'; import { AreaPath } from '@/components/shapes/AreaPath'; import { CartesianScale } from '@/components/scales/CartesianScale'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface LineErrorMarginChartProps extends SVGAttributes { line: LineConfig; @@ -125,15 +126,7 @@ export const LineErrorMarginChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -144,13 +137,10 @@ export const LineErrorMarginChart: FC = ({ nice: yAxis.nice || 0, minPadding: lowsestMarginValue, maxPadding: highestMarginValue, - domain: yAxis.domain, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis, [ + 'maxPadding', + 'minPadding', + ]), }, }} > diff --git a/packages/ez-react/src/recipes/line/MultiLineChart.tsx b/packages/ez-react/src/recipes/line/MultiLineChart.tsx index 8988fce..1c325a1 100644 --- a/packages/ez-react/src/recipes/line/MultiLineChart.tsx +++ b/packages/ez-react/src/recipes/line/MultiLineChart.tsx @@ -24,6 +24,7 @@ import { ColorScale } from '@/components/scales/ColorScale'; import { Legend, LegendProps } from '@/components/addons/legend/Legend'; import { Segments } from '@/components/Segments'; import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface MultiLineChartProps extends SVGAttributes { data: RawData; @@ -108,15 +109,7 @@ export const MultiLineChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -125,14 +118,7 @@ export const MultiLineChart: FC = ({ direction: Direction.VERTICAL, domain: activeDomain, nice: yAxis.nice || 0, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis, ['domain']), }, }} > diff --git a/packages/ez-react/src/recipes/scatter/BubbleChart.tsx b/packages/ez-react/src/recipes/scatter/BubbleChart.tsx index b20a323..d28c43e 100644 --- a/packages/ez-react/src/recipes/scatter/BubbleChart.tsx +++ b/packages/ez-react/src/recipes/scatter/BubbleChart.tsx @@ -20,6 +20,7 @@ import { Grid } from '@/components/scales/grid/Grid'; import { Bubbles } from '@/components/Bubbles'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { LinearScale } from '@/components/scales/LinearScale'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface BubbleChartProps extends SVGAttributes { data: RawData; @@ -90,15 +91,7 @@ export const BubbleChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -107,15 +100,7 @@ export const BubbleChart: FC = ({ direction: Direction.VERTICAL, domainKey: yAxis.domainKey, nice: yAxis.nice || 0, - domain: yAxis.domain, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis), }, }} > diff --git a/packages/ez-react/src/recipes/scatter/ScatterChart.tsx b/packages/ez-react/src/recipes/scatter/ScatterChart.tsx index 534bee9..89b1831 100644 --- a/packages/ez-react/src/recipes/scatter/ScatterChart.tsx +++ b/packages/ez-react/src/recipes/scatter/ScatterChart.tsx @@ -19,6 +19,7 @@ import { Axis } from '@/components/scales/Axis'; import { Grid } from '@/components/scales/grid/Grid'; import { ScaleLinear } from 'eazychart-core/src'; import { CartesianScale } from '@/components/scales/CartesianScale'; +import { getDefinedLinearScaleOptions } from '@/recipes/utils/linearScale'; export interface ScatterChartProps extends SVGAttributes { data: RawData; @@ -87,15 +88,7 @@ export const ScatterChart: FC = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: xAxis.domain, - maxPadding: xAxis.maxPadding, - minPadding: xAxis.minPadding, - max: xAxis.max, - min: xAxis.min, - softMax: xAxis.softMax, - softMin: xAxis.softMin, - roundRange: xAxis.roundRange, - clamp: xAxis.clamp, + ...getDefinedLinearScaleOptions(xAxis), }, }} yScaleConfig={{ @@ -104,15 +97,7 @@ export const ScatterChart: FC = ({ direction: Direction.VERTICAL, domainKey: yAxis.domainKey, nice: yAxis.nice || 0, - domain: yAxis.domain, - maxPadding: yAxis.maxPadding, - minPadding: yAxis.minPadding, - max: yAxis.max, - min: yAxis.min, - softMax: yAxis.softMax, - softMin: yAxis.softMin, - roundRange: yAxis.roundRange, - clamp: yAxis.clamp, + ...getDefinedLinearScaleOptions(yAxis), }, }} > diff --git a/packages/ez-react/src/recipes/utils/linearScale.ts b/packages/ez-react/src/recipes/utils/linearScale.ts new file mode 100644 index 0000000..b4bcebb --- /dev/null +++ b/packages/ez-react/src/recipes/utils/linearScale.ts @@ -0,0 +1,45 @@ +import { ScaleLinearDefinition } from 'eazychart-core/src/types'; + +type OptionalLinearDefinitionKey = + | 'domain' + | 'maxPadding' + | 'minPadding' + | 'max' + | 'min' + | 'softMax' + | 'softMin' + | 'roundRange' + | 'clamp'; + +const optionalLinearDefinitionKeys: OptionalLinearDefinitionKey[] = [ + 'domain', + 'maxPadding', + 'minPadding', + 'max', + 'min', + 'softMax', + 'softMin', + 'roundRange', + 'clamp', +]; + +export const getDefinedLinearScaleOptions = ( + definition: ScaleLinearDefinition, + excludeKeys: OptionalLinearDefinitionKey[] = [] +): Partial> => { + const options: Partial< + Pick + > = {}; + + optionalLinearDefinitionKeys.forEach((key) => { + if (excludeKeys.includes(key)) { + return; + } + const value = definition[key]; + if (value !== undefined) { + Object.assign(options, { [key]: value }); + } + }); + + return options; +};