Stats: use different Y scales for paid & total lines (#100525)

* charts 0.8.3

* remove unnecessary code

* remove unnecessary code

* format tick text for subscribers

* leave tick decision to the lib

* rever unnecessary change

* proper margin for y axis

* proper margin for y axis

* use log y scale when total sub is significantly higher than paid

* add yScaleType to line chart component

* refactoring

* remove unused type

client/my-sites/stats/components/line-chart/index.tsx

@@ -55,6 +55,31 @@ function StatsLineChart( {
 		[ chartData ]
 	);
 
+	const yScaleType = useMemo( () => {
+		if ( chartData.length <= 1 ) {
+			return 'linear';
+		}
+
+		const maxValues = chartData.map( ( series ) =>
+			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 && (
@@ -78,7 +103,7 @@ function StatsLineChart( {
 						} }
 						options={ {
 							yScale: {
-								type: 'linear',
+								type: yScaleType,
 								...( fixedDomain && { domain: [ 0, maxValue ] } ),
 								zero: zeroBaseline,
 							},

client/my-sites/stats/stats-subscribers-chart-section/index.tsx

@@ -266,7 +266,7 @@ export default function SubscribersChartSection( {
 							chartData={ lineChartData }
 							height={ 300 }
 							EmptyState={ () => null }
-							zeroBaseline={ false }
+							zeroBaseline={ lineChartData.length > 1 }
 							formatTimeTick={ formatTimeTick }
 						/>
 					) : (