Merge pull request #1874 from colinl/alternative_yaxis_scaling

Proposed yaxis scaling algorithm for ui-chart

Author: Steve-Mcl

test/helpers/axis.helper.spec.js

@@ -5,21 +5,22 @@ const axisHelper = require('../../ui/src/widgets/ui-chart/helpers/axis.helper.js
 describe('axis.helper', function () {
     describe('getAxisMinMax', function () {
         const testCases = [
-            { min: 3.2, max: 7.8, expectedMin: 0, expectedMax: 10, description: 'values < 10' },
-            { min: 15.7, max: 23.4, expectedMin: 10, expectedMax: 30, description: 'values 10-99' },
+            { min: 3.2, max: 3.2, expectedMin: 3.2, expectedMax: 4.2, description: 'min === max' },
+            { min: 3.2, max: 7.8, expectedMin: 3, expectedMax: 8, description: 'values < 10' },
+            { min: 15.7, max: 23.4, expectedMin: 14, expectedMax: 24, description: 'values 10-99' },
             { min: 47.3, max: 89.1, expectedMin: 40, expectedMax: 90, description: 'values 10-99' },
             { min: 123.5, max: 456.7, expectedMin: 100, expectedMax: 500, description: 'values 100-999' },
             { min: 234.8, max: 567.2, expectedMin: 200, expectedMax: 600, description: 'values 100-999' },
             { min: 1234.5, max: 4567.8, expectedMin: 1000, expectedMax: 5000, description: 'values 1000-9999' },
             { min: 2345.6, max: 5678.9, expectedMin: 2000, expectedMax: 6000, description: 'values 1000-9999' },
-            { min: 1234.5, max: 2345.6, expectedMin: 1000, expectedMax: 3000, description: 'values 1000-9999' },
+            { min: 1234.5, max: 2345.6, expectedMin: 1200, expectedMax: 2400, description: 'values 1000-9999' },
             { min: 567.8, max: 1234.5, expectedMin: 500, expectedMax: 1300, description: 'mixed ranges' },
-            { min: 89.1, max: 1234.5, expectedMin: 0, expectedMax: 2000, description: 'mixed ranges' },
-            { min: 512.1, max: 526.5, expectedMin: 510, expectedMax: 530, description: 'close values in 100-999 range' },
-            { min: 412.1, max: 526.5, expectedMin: 400, expectedMax: 600, description: 'close values in 100-999 range' },
-            { min: -183, max: -165, expectedMin: -190, expectedMax: -160, description: 'negative values' },
-            { min: -0.3, max: 0, expectedMin: -1, expectedMax: 0, description: 'negative small values' },
-            { min: 0.000154, max: 0.000195, expectedMin: 0, expectedMax: 0.1, description: 'very small decimal values' }
+            { min: 89.1, max: 1234.5, expectedMin: 0, expectedMax: 1400, description: 'mixed ranges' },
+            { min: 512.1, max: 526.5, expectedMin: 512, expectedMax: 528, description: 'close values in 100-999 range' },
+            { min: 412.1, max: 526.5, expectedMin: 400, expectedMax: 540, description: 'close values in 100-999 range' },
+            { min: -183, max: -165, expectedMin: -185, expectedMax: -165, description: 'negative values' },
+            { min: -0.3, max: 0, expectedMin: -0.3, expectedMax: 0, description: 'negative small values' },
+            { min: 0.000154, max: 0.000195, expectedMin: 0.00015, expectedMax: 0.00020, description: 'very small decimal values' }
         ]
 
         testCases.forEach((testCase, index) => {
@@ -34,14 +35,14 @@ describe('axis.helper', function () {
     describe('getAxisMin', function () {
         it('should return only the min value', function () {
             const result = axisHelper.getAxisMin({ min: 15.7, max: 23.4 })
-            result.should.equal(10)
+            result.should.equal(14)
         })
     })
 
     describe('getAxisMax', function () {
         it('should return only the max value', function () {
             const result = axisHelper.getAxisMax({ min: 15.7, max: 23.4 })
-            result.should.equal(30)
+            result.should.equal(24)
         })
     })
 })

ui/src/widgets/ui-chart/helpers/axis.helper.js

@@ -1,42 +1,42 @@
+// Round x to a nice number, using factors of 1, 2, 5 or 10
+// and determine how many decimal places are needed to show it
+const niceNumber = (x) => {
+    // find x as a number between 1 and 9.9999 with power of 10 multiplier
+    // eg, 68.7 is 6.87 * 10^1 so exp is 1 and f is 6.8
+    const exp = Math.floor(Math.log10(x))
+    const f = x / Math.pow(10, exp)
+
+    // round f to 1, 2 5 or 10
+    let niceFraction
+    if (f < 1.5) niceFraction = 1
+    else if (f < 3) niceFraction = 2
+    else if (f < 7) niceFraction = 5
+    else niceFraction = 10
+    // and scale it up to the range of the input value so if x were 68.7 this returns 50
+    const niceX = niceFraction * Math.pow(10, exp)
+    // determine the number of decimal places necessary to represent this
+    const decimals = Math.max(0, -exp)
+    return [niceX, decimals]
+}
+
 const getAxisMinMax = (value) => {
     const min = typeof value?.min === 'number' ? value?.min : 0
-    const max = typeof value?.max === 'number' ? value?.max : 1
+    let max = typeof value?.max === 'number' ? value?.max : 1
+    // protect against min == max which is the case when only one point has been added
+    max = (max === min) ? min + 1 : max
 
     const range = max - min
 
-    // Determine rounding unit based on magnitude
-    const getRoundingUnit = (val) => {
-        const absVal = Math.abs(val)
-        if (absVal < 0.1) {
-            return 0.1
-        } else if (absVal < 1) {
-            return 1
-        } else if (absVal < 100) {
-            return 10
-        } else if (absVal < 1000) {
-            return 100
-        } else if (absVal < 10000) {
-            return 1000
-        } else if (absVal < 100000) {
-            return 10000
-        } else {
-            // For values >= 100000, use powers of 10
-            return Math.pow(10, Math.floor(Math.log10(absVal)))
-        }
-    }
+    const targetTicks = 6 // assume 6 ticks on y axis (5 divisions)
+    const roughStep = range / (targetTicks - 1)
 
-    // Round min down to nearest appropriate unit
-    const roundingUnit = getRoundingUnit(range)
-    let axisMin = 0
-    if (roundingUnit > 0) {
-        axisMin = Math.floor(min / roundingUnit) * roundingUnit
-    }
+    // round the step size to a nice number and determine how many decimal places
+    // are needed to show it
+    const [step, decimals] = niceNumber(roughStep)
 
-    // Round max up to nearest appropriate unit
-    let axisMax = 10
-    if (roundingUnit > 0) {
-        axisMax = Math.ceil(max / roundingUnit) * roundingUnit
-    }
+    // round min down and max up using multiples of step
+    const axisMin = Number((Math.floor(min / step) * step).toFixed(decimals))
+    const axisMax = Number((Math.ceil(max / step) * step).toFixed(decimals))
 
     return {
         min: axisMin,