Merge pull request #6144 from njwhite/dev-griddash

`griddash`

Author: archmoj

draftlogs/6144_add.md

@@ -0,0 +1 @@
+ - Add `griddash` axis property to cartesian, polar, smith, ternary and geo subplots and add `griddash` and `minorgriddash` to `carpet` trace [[6144](https://github.com/plotly/plotly.js/pull/6144)], with thanks to @njwhite for the contribution!

src/plots/cartesian/axes.js

@@ -2869,6 +2869,7 @@ axes.drawTicks = function(gd, ax, opts) {
  *  - {boolean} showgrid
  *  - {string} gridcolor
  *  - {string} gridwidth
+ *  - {string} griddash
  *  - {boolean} zeroline
  *  - {string} type
  *  - {string} dtick
@@ -2918,6 +2919,7 @@ axes.drawGrid = function(gd, ax, opts) {
     grid.attr('transform', opts.transFn)
         .attr('d', opts.path)
         .call(Color.stroke, ax.gridcolor || '#ddd')
+        .style('stroke-dasharray', Drawing.dashStyle(ax.griddash, ax.gridwidth))
         .style('stroke-width', ax._gw + 'px')
         .style('display', null); // visible
 

src/plots/cartesian/layout_attributes.js

@@ -797,6 +797,7 @@ module.exports = {
         editType: 'ticks',
         description: 'Sets the width (in px) of the grid lines.'
     },
+    griddash: extendFlat({}, dash, {editType: 'ticks'}),
     zeroline: {
         valType: 'boolean',
         editType: 'ticks',

src/plots/cartesian/line_grid_defaults.js

@@ -35,11 +35,13 @@ module.exports = function handleLineGridDefaults(containerIn, containerOut, coer
     var gridColorDflt = colorMix(dfltColor, opts.bgColor, opts.blend || lightFraction).toRgbString();
     var gridColor = coerce2('gridcolor', gridColorDflt);
     var gridWidth = coerce2('gridwidth');
-    var showGridLines = coerce('showgrid', opts.showGrid || !!gridColor || !!gridWidth);
+    var gridDash = coerce2('griddash');
+    var showGridLines = coerce('showgrid', opts.showGrid || !!gridColor || !!gridWidth || !!gridDash);
 
     if(!showGridLines) {
         delete containerOut.gridcolor;
         delete containerOut.gridwidth;
+        delete containerOut.griddash;
     }
 
     if(!opts.noZeroLine) {

src/plots/geo/geo.js

@@ -367,7 +367,7 @@ proto.updateBaseLayers = function(fullLayout, geoLayout) {
         } else if(isAxisLayer(d)) {
             path.datum(makeGraticule(d, geoLayout, fullLayout))
                 .call(Color.stroke, geoLayout[d].gridcolor)
-                .call(Drawing.dashLine, '', geoLayout[d].gridwidth);
+                .call(Drawing.dashLine, geoLayout[d].griddash, geoLayout[d].gridwidth);
         }
 
         if(isLineLayer(d)) {

src/plots/geo/layout_attributes.js

@@ -2,6 +2,7 @@
 
 var colorAttrs = require('../../components/color/attributes');
 var domainAttrs = require('../domain').attributes;
+var dash = require('../../components/drawing/attributes').dash;
 var constants = require('./constants');
 var overrideAll = require('../../plot_api/edit_types').overrideAll;
 var sortObjectKeys = require('../../lib/sort_object_keys');
@@ -50,7 +51,8 @@ var geoAxesAttrs = {
         description: [
             'Sets the graticule\'s stroke width (in px).'
         ].join(' ')
-    }
+    },
+    griddash: dash
 };
 
 var attrs = module.exports = overrideAll({

src/plots/geo/layout_defaults.js

@@ -87,6 +87,7 @@ function handleGeoDefaults(geoLayoutIn, geoLayoutOut, coerce, opts) {
         if(show) {
             coerce(axisName + '.gridcolor');
             coerce(axisName + '.gridwidth');
+            coerce(axisName + '.griddash');
         }
 
         // mock axis for autorange computations

src/plots/polar/layout_attributes.js

@@ -13,7 +13,8 @@ var axisLineGridAttr = overrideAll({
     linewidth: axesAttrs.linewidth,
     showgrid: extendFlat({}, axesAttrs.showgrid, {dflt: true}),
     gridcolor: axesAttrs.gridcolor,
-    gridwidth: axesAttrs.gridwidth
+    gridwidth: axesAttrs.gridwidth,
+    griddash: axesAttrs.griddash
 
     // TODO add spike* attributes down the road
 

src/plots/smith/layout_attributes.js

@@ -13,7 +13,8 @@ var axisLineGridAttr = overrideAll({
     linewidth: axesAttrs.linewidth,
     showgrid: extendFlat({}, axesAttrs.showgrid, {dflt: true}),
     gridcolor: axesAttrs.gridcolor,
-    gridwidth: axesAttrs.gridwidth
+    gridwidth: axesAttrs.gridwidth,
+    griddash: axesAttrs.griddash
 }, 'plot', 'from-root');
 
 var axisTickAttrs = overrideAll({

src/plots/ternary/layout_attributes.js

@@ -47,6 +47,7 @@ var ternaryAxesAttrs = {
     showgrid: extendFlat({}, axesAttrs.showgrid, {dflt: true}),
     gridcolor: axesAttrs.gridcolor,
     gridwidth: axesAttrs.gridwidth,
+    griddash: axesAttrs.griddash,
     layer: axesAttrs.layer,
     // range
     min: {