Avoid duplicated Y-axis values (https://github.com/woocommerce/woocommerce-admin/pull/1289)

* Avoid duplicated yGrids

* Add tests

* Rename 'roundedValue' to 'value' to better reflect its contents

* Add CHANGELOG message

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -9,6 +9,7 @@
   - `legendPosition`: can be `top`, `side` or `bottom`. If not specified, it's calculated based on `mode` and viewport width.
   - `showHeaderControls`: whether the header controls must be visible. Defaults to true.
 - `getColor()` method in chart utils now requires `keys` and `colorScheme` to be passed as separate params.
+- Fix to avoid duplicated Y-axis ticks when the Y max value was 0.
 
 # 1.3.0
 

plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/axis.js

@@ -172,6 +172,19 @@ export const compareStrings = ( s1, s2, splitChar = new RegExp( [ ' |,' ], 'g' )
 	return diff;
 };
 
+export const getYGrids = ( yMax ) => {
+	const yGrids = [];
+
+	for ( let i = 0; i < 4; i++ ) {
+		const value = yMax > 1 ? Math.round( i / 3 * yMax ) : i / 3 * yMax;
+		if ( yGrids[ yGrids.length - 1 ] !== value ) {
+			yGrids.push( value );
+		}
+	}
+
+	return yGrids;
+};
+
 export const drawAxis = ( node, params ) => {
 	const xScale = params.type === 'line' ? params.xLineScale : params.xScale;
 	const removeDuplicateDates = ( d, i, ticks, formatter ) => {
@@ -183,17 +196,7 @@ export const drawAxis = ( node, params ) => {
 			: compareStrings( formatter( prevMonth ), formatter( monthDate ) ).join( ' ' );
 	};
 
-	const yGrids = [];
-	for ( let i = 0; i < 4; i++ ) {
-		if ( params.yMax > 1 ) {
-			const roundedValue = Math.round( i / 3 * params.yMax );
-			if ( yGrids[ yGrids.length - 1 ] !== roundedValue ) {
-				yGrids.push( roundedValue );
-			}
-		} else {
-			yGrids.push( i / 3 * params.yMax );
-		}
-	}
+	const yGrids = getYGrids( params.yMax );
 
 	const ticks = params.xTicks.map( d => ( params.type === 'line' ? new Date( d ) : d ) );
 

plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/test/axis.js

@@ -6,7 +6,7 @@
 /**
 * Internal dependencies
 */
-import { compareStrings, getXTicks } from '../axis';
+import { compareStrings, getXTicks, getYGrids } from '../axis';
 
 describe( 'getXTicks', () => {
 	describe( 'interval=day', () => {
@@ -238,3 +238,21 @@ describe( 'compareStrings', () => {
 		expect( compareStrings( 'Jul, 2018', 'Aug, 2018' ).join( ' ' ) ).toEqual( 'Aug' );
 	} );
 } );
+
+describe( 'getYGrids', () => {
+	it( 'returns a single 0 when yMax is 0', () => {
+		expect( getYGrids( 0 ) ).toEqual( [ 0 ] );
+	} );
+
+	it( 'returns decimal values when yMax is <= 1', () => {
+		expect( getYGrids( 1 ) ).toEqual( [ 0, 0.3333333333333333, 0.6666666666666666, 1 ] );
+	} );
+
+	it( 'doesn\'t return decimal values when yMax is >1', () => {
+		expect( getYGrids( 2 ) ).toEqual( [ 0, 1, 2 ] );
+	} );
+
+	it( 'returns up to four values when yMax is a big number', () => {
+		expect( getYGrids( 10000 ) ).toEqual( [ 0, 3333, 6667, 10000 ] );
+	} );
+} );