common axis.color

plotly · etpinard · Apr 12, 2016 · Mar 11, 2016 · Mar 13, 2016 · Mar 13, 2016
commit 330574b90b051b38cbaaa41cafbf5c189ac6b453
diff --git a/src/components/color/attributes.js b/src/components/color/attributes.js
@@ -28,3 +28,9 @@ exports.defaultLine = '#444';
 exports.lightLine = '#eee';
 
 exports.background = '#fff';
+
+// with axis.color and Color.interp we aren't using lightLine
+// itself anymore, instead interpolating between axis.color
+// and the background color. lightFraction gives back exactly
+// lightLine if the other colors are defaults.
+exports.lightFraction = (0xe - 0x4) / (0xf - 0x4);
diff --git a/src/components/color/index.js b/src/components/color/index.js
@@ -19,6 +19,7 @@ color.defaults = colorAttrs.defaults;
 color.defaultLine = colorAttrs.defaultLine;
 color.lightLine = colorAttrs.lightLine;
 color.background = colorAttrs.background;
+var lightFraction = colorAttrs.lightFraction;
 
 color.tinyRGB = function(tc) {
     var c = tc.toRgb();
@@ -57,6 +58,23 @@ color.combine = function(front, back) {
     return tinycolor(fcflat).toRgbString();
 };
 
+// find a color interpolating between two endpoints,
+// in rgba space.
+color.lightColor = function(front, back, backFraction) {
+    if(backFraction===undefined) backFraction = lightFraction;
+
+    var c1 = tinycolor(front).toRgb(),
+        c2 = tinycolor(back || color.background).toRgb(),
+        frontfraction = 1 - backFraction,
+        cInterp = {
+            r: frontfraction * c1.r + backFraction * c2.r,
+            g: frontfraction * c1.g + backFraction * c2.g,
+            b: frontfraction * c1.b + backFraction * c2.b,
+            a: frontfraction * c1.a + backFraction * c2.a
+        };
+    return tinycolor(cInterp).toRgbString();
+};
+
 color.stroke = function(s, c) {
     var tc = tinycolor(c);
     s.style({'stroke': color.tinyRGB(tc), 'stroke-opacity': tc.getAlpha()});

diff --git a/src/plots/cartesian/axis_defaults.js b/src/plots/cartesian/axis_defaults.js
@@ -13,6 +13,7 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Plots = require('../plots');
+var lightColor = require('../../components/color').lightColor;
 
 var layoutAttributes = require('./layout_attributes');
 var handleTickValueDefaults = require('./tick_value_defaults');
@@ -33,6 +34,7 @@ var axisIds = require('./axis_ids');
  *  showGrid: boolean, should gridlines be shown by default?
  *  noHover: boolean, this axis doesn't support hover effects?
 *  data: the plot data to use in choosing auto type
+ *  bgColor: the plot background color, to calculate default gridline colors
  */
 module.exports = function handleAxisDefaults(containerIn, containerOut, coerce, options) {
     var letter = options.letter,
@@ -66,11 +68,13 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
 
     setConvert(containerOut);
 
+    var dfltColor = coerce('color');
+
     coerce('title', defaultTitle);
     Lib.coerceFont(coerce, 'titlefont', {
         family: font.family,
         size: Math.round(font.size * 1.2),
-        color: font.color
+        color: font.color || dfltColor
     });
 
     var validRange = (
@@ -92,7 +96,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
     handleTickValueDefaults(containerIn, containerOut, coerce, axType);
     handleTickDefaults(containerIn, containerOut, coerce, axType, options);
 
-    var lineColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'linecolor'),
+    var lineColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'linecolor', dfltColor),
         lineWidth = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'linewidth'),
         showLine = coerce('showline', !!lineColor || !!lineWidth);
 
@@ -103,7 +107,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
 
     if(showLine || containerOut.ticks) coerce('mirror');
 
-    var gridColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'gridcolor'),
+    var gridColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'gridcolor', lightColor(dfltColor, options.bgColor)),
         gridWidth = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'gridwidth'),
         showGridLines = coerce('showgrid', options.showGrid || !!gridColor || !!gridWidth);
 
@@ -112,7 +116,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
         delete containerOut.gridwidth;
     }
 
-    var zeroLineColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'zerolinecolor'),
+    var zeroLineColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'zerolinecolor', dfltColor),
         zeroLineWidth = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'zerolinewidth'),
         showZeroLine = coerce('zeroline', options.showGrid || !!zeroLineColor || !!zeroLineWidth);
 

diff --git a/src/plots/cartesian/layout_attributes.js b/src/plots/cartesian/layout_attributes.js
@@ -13,6 +13,16 @@ var colorAttrs = require('../../components/color/attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 
 module.exports = {
+    color: {
+        valType: 'color',
+        dflt: colorAttrs.defaultLine,
+        role: 'style',
+        description: [
+            'Sets default for all colors associated with this axis',
+            'all at once: line, font, tick, and grid colors.',
+            'Individual pieces can override this.'
+        ].join(' ')
+    },
     title: {
         valType: 'string',
         role: 'info',

diff --git a/src/plots/cartesian/layout_defaults.js b/src/plots/cartesian/layout_defaults.js
@@ -11,6 +11,7 @@
 
 var Lib = require('../../lib');
 var Plots = require('../plots');
+var Color = require('../../components/color');
 
 var constants = require('./constants');
 var layoutAttributes = require('./layout_attributes');
@@ -103,6 +104,15 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
     var xaList = xaListCartesian.concat(xaListGl2d).sort(axSort),
         yaList = yaListCartesian.concat(yaListGl2d).sort(axSort);
 
+    // plot_bgcolor only makes sense if there's a (2D) plot!
+    // TODO: bgcolor for each subplot, to inherit from the main one
+    var plot_bgcolor = Color.background;
+    if(xaList.length && yaList.length) {
+        plot_bgcolor = Lib.coerce(layoutIn, layoutOut, Plots.layoutAttributes, 'plot_bgcolor');
+    }
+
+    var bgColor = Color.combine(plot_bgcolor, layoutOut.paper_bgcolor);
+
     xaList.concat(yaList).forEach(function(axName) {
         var axLetter = axName.charAt(0),
             axLayoutIn = layoutIn[axName] || {},
@@ -113,7 +123,8 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
                 outerTicks: outerTicks[axName],
                 showGrid: !noGrids[axName],
                 name: axName,
-                data: fullData
+                data: fullData,
+                bgColor: bgColor
             },
             positioningOptions = {
                 letter: axLetter,
@@ -138,10 +149,4 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         }
 
     });
-
-    // plot_bgcolor only makes sense if there's a (2D) plot!
-    // TODO: bgcolor for each subplot, to inherit from the main one
-    if(xaList.length && yaList.length) {
-        Lib.coerce(layoutIn, layoutOut, Plots.layoutAttributes, 'plot_bgcolor');
-    }
 };
diff --git a/src/plots/cartesian/tick_defaults.js b/src/plots/cartesian/tick_defaults.js
@@ -20,7 +20,7 @@ var layoutAttributes = require('./layout_attributes');
 module.exports = function handleTickDefaults(containerIn, containerOut, coerce, axType, options) {
     var tickLen = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'ticklen'),
         tickWidth = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'tickwidth'),
-        tickColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'tickcolor'),
+        tickColor = Lib.coerce2(containerIn, containerOut, layoutAttributes, 'tickcolor', containerOut.color),
         showTicks = coerce('ticks', (options.outerTicks || tickLen || tickWidth || tickColor) ? 'outside' : '');
 
     if(!showTicks) {
@@ -39,7 +39,12 @@ module.exports = function handleTickDefaults(containerIn, containerOut, coerce,
 
     var showTickLabels = coerce('showticklabels');
     if(showTickLabels) {
-        Lib.coerceFont(coerce, 'tickfont', options.font || {});
+        var font = options.font || {};
+        Lib.coerceFont(coerce, 'tickfont', {
+            family: font.family,
+            size: font.size,
+            color: font.color || containerOut.color
+        });
         coerce('tickangle');
 
         if(axType !== 'category') {

diff --git a/src/plots/gl3d/layout/axis_attributes.js b/src/plots/gl3d/layout/axis_attributes.js
@@ -67,6 +67,7 @@ module.exports = {
         dflt: true,
         description: 'Sets whether or not this axis is labeled'
     },
+    color: axesAttrs.color,
     title: axesAttrs.title,
     titlefont: axesAttrs.titlefont,
     type: axesAttrs.type,

diff --git a/src/plots/gl3d/layout/axis_defaults.js b/src/plots/gl3d/layout/axis_defaults.js
@@ -10,12 +10,17 @@
 'use strict';
 
 var Lib = require('../../../lib');
+var Color = require('../../../components/color');
+
 var layoutAttributes = require('./axis_attributes');
 var handleAxisDefaults = require('../../cartesian/axis_defaults');
 
 var axesNames = ['xaxis', 'yaxis', 'zaxis'];
 var noop = function() {};
 
+// TODO: hard-coded lightness fraction based on gridline default colors
+// that differ from other subplot types.
+var gridLightness = (204 - 0x44) / (255 - 0x44);
 
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
     var containerIn, containerOut;
@@ -40,21 +45,25 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 font: options.font,
                 letter: axName[0],
                 data: options.data,
-                showGrid: true
+                showGrid: true,
+                bgColor: options.bgColorCombined
             });
 
-        coerce('gridcolor');
+        coerce('gridcolor', Color.lightColor(containerOut.color, options.bgColorCombined, gridLightness));
         coerce('title', axName[0]);  // shouldn't this be on-par with 2D?
 
         containerOut.setScale = noop;
 
         if(coerce('showspikes')) {
             coerce('spikesides');
             coerce('spikethickness');
-            coerce('spikecolor');
+            // TODO: this makes the default spikes #444 rather than
+            // #000, is that OK?
+            coerce('spikecolor', containerOut.color);
         }
-        if(coerce('showbackground')) coerce('backgroundcolor');
 
         coerce('showaxeslabels');
+        // TODO: relate backgroundcolor to common containerOut.color?
+        if(coerce('showbackground')) coerce('backgroundcolor');
     }
 };
diff --git a/src/plots/gl3d/layout/defaults.js b/src/plots/gl3d/layout/defaults.js
@@ -9,6 +9,8 @@
 
 'use strict';
 
+var Color = require('../../../components/color');
+
 var handleSubplotDefaults = require('../../subplot_defaults');
 var layoutAttributes = require('./layout_attributes');
 var supplyGl3dAxisLayoutDefaults = require('./axis_defaults');
@@ -40,7 +42,8 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
         handleDefaults: handleGl3dDefaults,
         font: layoutOut.font,
         fullData: fullData,
-            getDfltFromLayout: getDfltFromLayout
+        getDfltFromLayout: getDfltFromLayout,
+        paper_bgcolor: layoutOut.paper_bgcolor
     });
 };
 
@@ -57,7 +60,8 @@ function handleGl3dDefaults(sceneLayoutIn, sceneLayoutOut, coerce, opts) {
      * attributes like aspectratio can be written back dynamically.
      */
 
-    coerce('bgcolor');
+    var bgcolor = coerce('bgcolor'),
+        bgColorCombined = Color.combine(bgcolor, opts.paper_bgcolor);
 
     var cameraKeys = Object.keys(layoutAttributes.camera);
 
@@ -94,7 +98,8 @@ function handleGl3dDefaults(sceneLayoutIn, sceneLayoutOut, coerce, opts) {
     supplyGl3dAxisLayoutDefaults(sceneLayoutIn, sceneLayoutOut, {
         font: opts.font,
         scene: opts.id,
-        data: opts.fullData
+        data: opts.fullData,
+        bgColor: bgColorCombined
     });
 
     coerce('dragmode', opts.getDfltFromLayout('dragmode'));

diff --git a/src/plots/ternary/layout/axis_attributes.js b/src/plots/ternary/layout/axis_attributes.js
@@ -10,22 +10,13 @@
 
 
 var axesAttrs = require('../../cartesian/layout_attributes');
-var colorAttrs = require('../../components/color/attributes');
 var extendFlat = require('../../../lib/extend').extendFlat;
 
 
 module.exports = {
     title: axesAttrs.title,
     titlefont: axesAttrs.titlefont,
-    color: {  // TODO: support this for all other kinds of axes as well
-        valType: 'color',
-        dflt: colorAttrs.defaultLine,
-        role: 'style',
-        description: [
-            'Sets line, font, tick, and grid color for this axis',
-            'all at once. Individual pieces can override this.'
-        ].join(' ')
-    },
+    color: axesAttrs.color,
     // ticks
     nticks: axesAttrs.nticks,
     ticks: axesAttrs.ticks,

diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js
@@ -3,6 +3,7 @@ var PlotlyInternal = require('@src/plotly');
 var Plots = require('@src/plots/plots');
 var Lib = require('@src/lib');
 var Color = require('@src/components/color');
+var tinycolor = require('tinycolor2');
 
 var handleTickValueDefaults = require('@src/plots/cartesian/tick_value_defaults');
 var Axes = PlotlyInternal.Axes;
@@ -221,10 +222,11 @@ describe('Test axes', function() {
                 yaxis: {}
             };
             supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+            var lightLine = tinycolor(Color.lightLine).toRgbString();
             expect(layoutOut.xaxis.gridwidth).toBe(1);
-            expect(layoutOut.xaxis.gridcolor).toBe(Color.lightLine);
+            expect(tinycolor(layoutOut.xaxis.gridcolor).toRgbString()).toBe(lightLine);
             expect(layoutOut.yaxis.gridwidth).toBe(1);
-            expect(layoutOut.yaxis.gridcolor).toBe(Color.lightLine);
+            expect(tinycolor(layoutOut.yaxis.gridcolor).toRgbString()).toBe(lightLine);
         });
 
         it('should set gridcolor/gridwidth to undefined if showgrid is false', function() {

diff --git a/test/jasmine/tests/gl3daxes_test.js b/test/jasmine/tests/gl3daxes_test.js
@@ -30,7 +30,7 @@ describe('Test Gl3dAxes', function() {
                     'showspikes': true,
                     'spikesides': true,
                     'spikethickness': 2,
-                    'spikecolor': 'rgb(0,0,0)',
+                    'spikecolor': '#444',
                     'showbackground': false,
                     'showaxeslabels': true
                 },
@@ -42,7 +42,7 @@ describe('Test Gl3dAxes', function() {
                     'showspikes': true,
                     'spikesides': true,
                     'spikethickness': 2,
-                    'spikecolor': 'rgb(0,0,0)',
+                    'spikecolor': '#444',
                     'showbackground': false,
                     'showaxeslabels': true
                 },
@@ -54,7 +54,7 @@ describe('Test Gl3dAxes', function() {
                     'showspikes': true,
                     'spikesides': true,
                     'spikethickness': 2,
-                    'spikecolor': 'rgb(0,0,0)',
+                    'spikecolor': '#444',
                     'showbackground': false,
                     'showaxeslabels': true
                 }
@@ -64,14 +64,17 @@ describe('Test Gl3dAxes', function() {
                 var keys = Object.keys(validObject);
                 for(var i = 0; i < keys.length; i++) {
                     var k = keys[i];
-                    if(validObject[k] !== testObject[k]) return false;
+                    expect(validObject[k]).toBe(testObject[k]);
+                    // if(validObject[k] !== testObject[k]) return false;
                 }
                 return true;
             }
 
             supplyLayoutDefaults(layoutIn, layoutOut, options);
             ['xaxis', 'yaxis', 'zaxis'].forEach(function(axis) {
-                expect(checkKeys(expected[axis], layoutOut[axis])).toBe(true);
+                // expect(
+                checkKeys(expected[axis], layoutOut[axis]);
+                // ).toBe(true);
             });
         });
     });