Merge branch 'develop' into filip/select-timezone

Author: aristath

assets/js/web-components/prpl-chart-line.js

@@ -169,23 +169,52 @@ customElements.define(
 				.join( ' ' ) }" /></g>`;
 		};
 
+		/**
+		 * Get the number of steps for the Y axis.
+		 *
+		 * Choose between 3, 4, or 5 steps.
+		 * The result should be the number that when used as a divisor,
+		 * produces integer values for the Y labels - or at least as close as possible.
+		 *
+		 * @return {number} The number of steps.
+		 */
+		getYLabelsStepsDivider = () => {
+			const maxValuePadded = this.getMaxValuePadded();
+
+			const stepsRemainders = {
+				4: maxValuePadded % 4,
+				5: maxValuePadded % 5,
+				3: maxValuePadded % 3,
+			};
+			// Get the smallest remainder.
+			const smallestRemainder = Math.min(
+				...Object.values( stepsRemainders )
+			);
+
+			// Get the key of the smallest remainder.
+			const smallestRemainderKey = Object.keys( stepsRemainders ).find(
+				( key ) => stepsRemainders[ key ] === smallestRemainder
+			);
+			return smallestRemainderKey;
+		};
+
 		/**
 		 * Get the Y labels.
 		 *
 		 * @return {number[]} The Y labels.
 		 */
 		getYLabels = () => {
 			const maxValuePadded = this.getMaxValuePadded();
-			// Take the maximum value and divide it by 4 to get the step.
-			const yLabelsStep = maxValuePadded / 4;
+			const yLabelsStepsDivider = this.getYLabelsStepsDivider();
+			const yLabelsStep = maxValuePadded / yLabelsStepsDivider;
 			const yLabels = [];
 			if ( 100 === maxValuePadded || 15 > maxValuePadded ) {
-				for ( let i = 0; i <= 4; i++ ) {
+				for ( let i = 0; i <= yLabelsStepsDivider; i++ ) {
 					yLabels.push( parseInt( yLabelsStep * i ) );
 				}
 			} else {
 				// Round the values to the nearest 10.
-				for ( let i = 0; i <= 4; i++ ) {
+				for ( let i = 0; i <= yLabelsStepsDivider; i++ ) {
 					yLabels.push(
 						Math.min(
 							maxValuePadded,