improve equal interval, classtype radio buttons

public/attrinfo.html

@@ -372,7 +372,8 @@
     }
 
     
-    function classButton(classType) {
+    function classButton() {
+        let classType = document.querySelector('input[name="classtype"]:checked').value;
         if (prepareLegend()) {
             let classCount = Number(document.querySelector('#classcount').value);
             if (classCount === 1) {
@@ -458,18 +459,18 @@
                         if (typeof min === "number") {
                             const intervalSchemes = getColorSchemes(classCount, 'seq');
                             classCount = intervalSchemes[0].colors.length;
-                            let classTicks = getClassTicks(min, max, classCount);
-                            mapboxPaint = ["case"]
-                            for (let index=0,from = classTicks.min; from < classTicks.max; from+=classTicks.tickWidth,index++) {
-                                let legendFrom = (from).toFixed(classTicks.decimals);
-                                let legendTo = (index===classCount - 1? classTicks.max : from + classTicks.tickWidth).toFixed(classTicks.decimals);
+                            let classTicks = getIntervalClassTicks(min, max, classCount);
+                            mapboxPaint = ["case"];
+                            classTicks.classes.forEach((classStart, index)=>{
+                                let legendFrom = classStart;
+                                let legendTo = (index === classCount - 1 ? classTicks.max : classTicks.classes[index + 1]);
                                 if (globalStats.datatype === 'int4' || globalStats.datatype === 'int8') {
                                     legendFrom = Math.floor(legendFrom);
                                     legendTo = Math.floor(legendTo);
                                 }
                                 addLegendLine(intervalSchemes[0].colors[index], `${(legendFrom)} - ${legendTo}`, layerType);
-                                mapboxPaint.push(["<", ["get", globalStats.column],from + classTicks.tickWidth], intervalSchemes[0].colors[index]);
-                            }
+                                mapboxPaint.push(["<", ["get", globalStats.column],legendTo], intervalSchemes[0].colors[index]);
+                            })
                             mapboxPaint.push(intervalSchemes[0].colors[classCount - 1])
                         }
                         break;
@@ -526,10 +527,16 @@
                         <option value="11">11</option>
                         <option value="12">12</option>
                     </select><label for="numclasses">number of classes</label><br>
-                    <button onclick="classButton('interval')">equal interval</button>
-                    <button onclick="classButton('quantile')">quantile</button>
-                    <button onclick="classButton('mostfrequent')">most frequent</button><br>
-                    <input type="checkbox" id="hidenulls" name="hidenulls" checked><label for="hidenulls">Hide no-data</label>
+                    Classification methods:<br>
+                    <input type="radio" name="classtype" id="interval" value="interval"><label for="interval">equal interval</label>
+                    <input type="radio" name="classtype" id="quantile" value="quantile" checked><label for="quantile">quantile</label>
+                    <input type="radio" name="classtype" id="mostfrequent" value="mostfrequent"><label for="mostfrequent">most frequent</label><br>
+                    Color schemes:<br>
+                    <input type="radio" name="colorscheme" id="seqential" value="seq"><label for="sequential">sequential</label>
+                    <input type="radio" name="colorscheme" id="diverting" value="div"><label for="diverting">diverting</label>
+                    <input type="radio" name="colorscheme" id="diverting" value="qual"><label for="qualitative">qualitative</label><br>
+                    <input type="checkbox" id="hidenulls" name="hidenulls" checked><label for="hidenulls">Hide no-data</label><br>
+                    <button onclick="classButton()">update legend</button><br>
                 </div>
             </div>
             <div id="featureinfo"></div>

public/ticks.js

-function niceNumbers (range, round) {
-    const exponent = Math.floor(Math.log10(range));
-    const fraction = range / Math.pow(10, exponent);
-    let niceFraction;
-    if (round) {
-      if (fraction < 1.5) niceFraction = 1;
-      else if (fraction < 3) niceFraction = 2;
-      else if (fraction < 7) niceFraction = 5;
-      else niceFraction = 10;
-    } else {
-      niceFraction = Math.ceil(fraction);
+function roundToPrecision(number, precision, direction) {
+    let negative = (number < 0);
+    if (negative) {
+        number = -number;
+        direction = -direction;
     }
-    return niceFraction * Math.pow(10, exponent);
+    let roundFunc = (direction < 0 ? Math.floor : direction === 0 ? Math.round : Math.ceil);
+    let exponent = Math.floor(Math.log10(number));
+    let decimals = (exponent < precision)? precision - exponent : 0;
+    let fraction = number / Math.pow(10,exponent);
+    return Number((Math.pow(10, exponent) * roundFunc(fraction * Math.pow(10, precision)) / Math.pow(10, precision) * (negative ? -1 : 1)).toFixed(decimals));
 }
 
-function getClassTicks (min, max, maxTicks) {
-    const range = niceNumbers(max - min, false);
-    let decimals = 0;
-    let tickSpacing;
-    if (range === 0) {
-        tickSpacing = 1;
-    } else {
-        tickSpacing = range / maxTicks;
-        let exponent = Math.floor(Math.log10(tickSpacing));
-        tickSpacing = (Math.ceil(100 * (tickSpacing / Math.pow(10, exponent))) / 100) * Math.pow(10, exponent);        
-        if (exponent < 2) {
-            decimals = 2 - exponent;            
-        }
+function getIntervalClassTicks (min, max, classCount) {
+    let niceMin = roundToPrecision(min, 2, -1);
+    let niceMax = roundToPrecision(max, 2, 1);
+    let interval = (niceMax - niceMin) / classCount;
+    let result = [];
+    for (let i = 0; i < classCount; i++) {
+        result.push(roundToPrecision(niceMin + i * interval, 2, -1))
     }
     return {
-        min: Math.floor(min / tickSpacing) * tickSpacing,
-        max: Math.ceil(max / tickSpacing) * tickSpacing,
-        tickWidth: tickSpacing,
-        decimals: decimals
+        min: niceMin,
+        max: niceMax,
+        classes: result
     };
 }