Add midpoint attr to color scales

Author: nicolaskruchten

src/components/colorscale/attributes.js

@@ -87,6 +87,8 @@ module.exports = function colorScaleAttrs(context, opts) {
     var auto = cLetter + 'auto';
     var min = cLetter + 'min';
     var max = cLetter + 'max';
+    var mid = cLetter + 'mid';
+    var autoFull = code(contextHead + auto);
     var minFull = code(contextHead + min);
     var maxFull = code(contextHead + max);
     var minmaxFull = minFull + ' and ' + maxFull;
@@ -160,6 +162,21 @@ module.exports = function colorScaleAttrs(context, opts) {
         ].join('')
     };
 
+    attrs[mid] = {
+        valType: 'number',
+        role: 'info',
+        dflt: null,
+        editType: editTypeOverride || 'plot',
+        impliedEdits: minmaxImpliedEdits,
+        description: [
+            'Sets the mid-point of the color domain by scaling ', minFull,
+            ' and/or ', maxFull, ' to be equidistant to this point.',
+            effectDesc,
+            ' Value should have the same units as ', colorAttrFull, '. ',
+            'Has no effect when ', autoFull, ' is `false`.'
+        ].join('')
+    };
+
     attrs.colorscale = {
         valType: 'colorscale',
         role: 'style',

src/components/colorscale/calc.js

@@ -23,9 +23,11 @@ module.exports = function calc(gd, trace, opts) {
     var autoAttr = cLetter + 'auto';
     var minAttr = cLetter + 'min';
     var maxAttr = cLetter + 'max';
+    var midAttr = cLetter + 'mid';
     var auto = container[autoAttr];
     var min = container[minAttr];
     var max = container[maxAttr];
+    var mid = container[midAttr];
     var scl = container.colorscale;
 
     if(auto !== false || min === undefined) {
@@ -36,6 +38,15 @@ module.exports = function calc(gd, trace, opts) {
         max = Lib.aggNums(Math.max, null, vals);
     }
 
+    if(auto !== false && mid !== undefined) {
+        if(max - mid > mid - min) {
+            min = mid - (max - mid);
+        }
+        else if(max - mid < mid - min) {
+            max = mid + (mid - min);
+        }
+    }
+
     if(min === max) {
         min -= 0.5;
         max += 0.5;

src/components/colorscale/defaults.js

@@ -36,6 +36,7 @@ module.exports = function colorScaleDefaults(traceIn, traceOut, layout, coerce,
     coerce(prefix + cLetter + 'auto', !validMinMax);
     coerce(prefix + cLetter + 'min');
     coerce(prefix + cLetter + 'max');
+    coerce(prefix + cLetter + 'mid');
 
     // handles both the trace case (autocolorscale is false by default) and
     // the marker and marker.line case (autocolorscale is true by default)

test/image/mocks/cmid.json

@@ -0,0 +1,16 @@
+{
+    "data": [
+        {
+            "mode": "markers",
+            "x": [1,2,3],
+            "y": [1,2,3],
+            "marker": {
+                "color": [-1,0,10],
+                "showscale": true,
+                "cmid": 0
+            }
+        }
+    ],
+    "layout": {
+    }
+}