add yScaleType to line chart component

Automattic · Feb 27, 2025 · 0577e9e · 0577e9e
1 parent 82b9889
commit 0577e9e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/client/my-sites/stats/components/line-chart/index.tsx b/client/my-sites/stats/components/line-chart/index.tsx
@@ -13,7 +13,6 @@ function StatsLineChart( {
 	EmptyState = StatsEmptyState,
 	zeroBaseline = true,
 	fixedDomain = false,
-	yScaleType = 'linear',
 }: {
 	chartData: Array< {
 		label: string;
@@ -27,7 +26,7 @@ function StatsLineChart( {
 	EmptyState: typeof StatsEmptyState;
 	zeroBaseline?: boolean;
 	fixedDomain?: boolean;
-	yScaleType?: 'linear' | 'log';
+	yScaleType?: 'linear' | 'sqrt' | 'log';
 } ) {
 	const translate = useTranslate();
 
@@ -57,6 +56,30 @@ function StatsLineChart( {
 		[ chartData ]
 	);
 
+	const yScaleType = useMemo( () => {
+		if ( chartData.length <= 1 ) {
+			return 'linear';
+		}
+		const maxValues: number[] = [];
+		chartData.map( ( series ) => {
+			maxValues.push( Math.max( ...series.data.map( ( d ) => d.value ) ) );
+		} );
+		const [ minMax, maxMax ] = [ Math.min( ...maxValues ), Math.max( ...maxValues ) ];
+
+		// Avoid division by zero
+		if ( minMax === 0 ) {
+			return 'linear';
+		}
+
+		const scacle = maxMax / minMax;
+		if ( scacle > 20 && scacle < 200 ) {
+			return 'sqrt';
+		} else if ( scacle >= 200 ) {
+			return 'log';
+		}
+		return 'linear';
+	}, [ chartData ] );
+
 	return (
 		<div className={ clsx( 'stats-line-chart', className ) }>
 			{ isEmpty && (

diff --git a/client/my-sites/stats/stats-subscribers-chart-section/index.tsx b/client/my-sites/stats/stats-subscribers-chart-section/index.tsx
@@ -212,19 +212,6 @@ export default function SubscribersChartSection( {
 		},
 	].filter( ( series ) => series.data.length > 0 );
 
-	const yScaleType = useMemo( () => {
-		if ( lineChartData.length <= 1 ) {
-			return 'linear';
-		}
-		const maxValues: number[] = [];
-		lineChartData.map( ( series ) => {
-			maxValues.push( Math.max( ...series.data.map( ( d ) => d.value ) ) );
-		} );
-		const [ minMax, maxMax ] = [ Math.min( ...maxValues ), Math.max( ...maxValues ) ];
-
-		return maxMax / minMax > 20 ? 'log' : 'linear';
-	}, [ lineChartData ] );
-
 	const subscribers = {
 		label: 'Subscribers',
 		path: `/stats/subscribers/`,
@@ -279,9 +266,8 @@ export default function SubscribersChartSection( {
 							chartData={ lineChartData }
 							height={ 300 }
 							EmptyState={ () => null }
-							zeroBaseline={ false }
+							zeroBaseline={ lineChartData.length > 1 }
 							formatTimeTick={ formatTimeTick }
-							yScaleType={ yScaleType }
 						/>
 					) : (
 						<UplotChart