griddash

draftlogs/6144_add.md

@@ -0,0 +1 @@
+Add `griddash` axis property, cf. `gridwith` and `gridcolor` [[6144](https://github.com/plotly/plotly.js/pull/6144)]

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
@@ -2914,10 +2915,12 @@ axes.drawGrid = function(gd, ax, opts) {
         .classed('crisp', opts.crisp !== false);
 
     ax._gw = Drawing.crispRound(gd, ax.gridwidth, 1);
+    ax._gd = Drawing.dashStyle(ax.griddash, ax.gridwidth);
 
     grid.attr('transform', opts.transFn)
         .attr('d', opts.path)
         .call(Color.stroke, ax.gridcolor || '#ddd')
+        .style('stroke-dasharray', ax._gd)
         .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, {dflt: '', editType: 'none'}),
     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,8 @@
 
 var colorAttrs = require('../../components/color/attributes');
 var domainAttrs = require('../domain').attributes;
+var dash = require('../../components/drawing/attributes').dash;
+var extendFlat = require('../../lib/extend').extendFlat;
 var constants = require('./constants');
 var overrideAll = require('../../plot_api/edit_types').overrideAll;
 var sortObjectKeys = require('../../lib/sort_object_keys');
@@ -50,7 +52,8 @@ var geoAxesAttrs = {
         description: [
             'Sets the graticule\'s stroke width (in px).'
         ].join(' ')
-    }
+    },
+    griddash: extendFlat({}, dash, {dflt: '', editType: 'none'})
 };
 
 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/gl2d/convert.js

@@ -68,6 +68,7 @@ function Axes2DOptions(scene) {
         [0, 0, 0, 0.5]
     ];
     this.gridLineWidth = [1, 1];
+    this.gridLineDash = ['', ''];
 
     this.zeroLineEnable = [true, true];
     this.zeroLineWidth = [1, 1];
@@ -162,6 +163,7 @@ proto.merge = function(options) {
         this.gridLineEnable[i] = ax.showgrid;
         this.gridLineColor[i] = str2RGBArray(ax.gridcolor);
         this.gridLineWidth[i] = ax.gridwidth;
+        this.gridLineDash[i] = ax.griddash;
 
         this.zeroLineEnable[i] = ax.zeroline;
         this.zeroLineColor[i] = str2RGBArray(ax.zerolinecolor);

src/plots/gl3d/layout/axis_attributes.js

@@ -107,6 +107,7 @@ module.exports = overrideAll({
     gridcolor: extendFlat({}, axesAttrs.gridcolor,  // shouldn't this be on-par with 2D?
         {dflt: 'rgb(204, 204, 204)'}),
     gridwidth: axesAttrs.gridwidth,
+    griddash: axesAttrs.griddash,
     zeroline: axesAttrs.zeroline,
     zerolinecolor: axesAttrs.zerolinecolor,
     zerolinewidth: axesAttrs.zerolinewidth,

src/plots/gl3d/layout/convert.js

@@ -39,6 +39,7 @@ function AxesOptions() {
 
     this.gridEnable = [ true, true, true ];
     this.gridWidth = [ 1, 1, 1 ];
+    this.gridDash = [ '', '', '' ];
     this.gridColor = [ [0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 1] ];
 
     this.zeroEnable = [ true, true, true ];
@@ -93,6 +94,7 @@ proto.merge = function(fullLayout, sceneLayout) {
         if('showgrid' in axes) opts.gridEnable[i] = axes.showgrid;
         if('gridcolor' in axes) opts.gridColor[i] = str2RgbaArray(axes.gridcolor);
         if('gridwidth' in axes) opts.gridWidth[i] = axes.gridwidth;
+        if('griddash' in axes) opts.gridDash[i] = axes.griddash;
 
         // Remove zeroline if axis type is log
         // otherwise the zeroline is incorrectly drawn at 1 on log axes

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: {

src/traces/carpet/axis_attributes.js

@@ -5,6 +5,9 @@ var colorAttrs = require('../../components/color/attributes');
 var axesAttrs = require('../../plots/cartesian/layout_attributes');
 var descriptionWithDates = require('../../plots/cartesian/axis_format_attributes').descriptionWithDates;
 var overrideAll = require('../../plot_api/edit_types').overrideAll;
+var dash = require('../../components/drawing/attributes').dash;
+var extendFlat = require('../../lib/extend').extendFlat;
+
 
 module.exports = {
     color: {
@@ -359,6 +362,7 @@ module.exports = {
         editType: 'calc',
         description: 'Sets the width (in px) of the axis line.'
     },
+    griddash: extendFlat({}, dash, {dflt: '', editType: 'none'}),
     showgrid: {
         valType: 'boolean',
         dflt: true,
@@ -382,6 +386,7 @@ module.exports = {
         editType: 'calc',
         description: 'Sets the width (in px) of the grid lines.'
     },
+    minorgriddash: extendFlat({}, dash, {dflt: '', editType: 'none'}),
     minorgridcolor: {
         valType: 'color',
         dflt: colorAttrs.lightLine,

src/traces/carpet/axis_defaults.js

@@ -138,11 +138,13 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
 
     var gridColor = coerce2('gridcolor', addOpacity(dfltColor, 0.3));
     var gridWidth = coerce2('gridwidth');
+    var gridDash = coerce2('griddash');
     var showGrid = coerce('showgrid');
 
     if(!showGrid) {
         delete containerOut.gridcolor;
         delete containerOut.gridwidth;
+        delete containerOut.griddash;
     }
 
     var startLineColor = coerce2('startlinecolor', dfltColor);
@@ -166,13 +168,16 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
     if(!showGrid) {
         delete containerOut.gridcolor;
         delete containerOut.gridWidth;
+        delete containerOut.gridDash;
     } else {
         coerce('minorgridcount');
         coerce('minorgridwidth', gridWidth);
+        coerce('minorgriddash', gridDash);
         coerce('minorgridcolor', addOpacity(gridColor, 0.06));
 
         if(!containerOut.minorgridcount) {
             delete containerOut.minorgridwidth;
+            delete containerOut.minorgriddash;
             delete containerOut.minorgridcolor;
         }
     }

src/traces/carpet/calc_gridlines.js

@@ -225,7 +225,8 @@ module.exports = function calcGridlines(trace, axisLetter, crossAxisLetter) {
             if(j < 0 || j > data.length - 1) continue;
             gridlines.push(extendFlat(constructArrayGridline(j), {
                 color: axis.gridcolor,
-                width: axis.gridwidth
+                width: axis.gridwidth,
+                dash: axis.griddash
             }));
         }
 
@@ -256,7 +257,8 @@ module.exports = function calcGridlines(trace, axisLetter, crossAxisLetter) {
                 if(v < data[0] || v > data[data.length - 1]) continue;
                 minorgridlines.push(extendFlat(constructValueGridline(v), {
                     color: axis.minorgridcolor,
-                    width: axis.minorgridwidth
+                    width: axis.minorgridwidth,
+                    dash: axis.minorgriddash
                 }));
             }
         }
@@ -299,7 +301,8 @@ module.exports = function calcGridlines(trace, axisLetter, crossAxisLetter) {
 
             gridlines.push(extendFlat(constructValueGridline(value), {
                 color: axis.gridcolor,
-                width: axis.gridwidth
+                width: axis.gridwidth,
+                dash: axis.griddash
             }));
         }
 
@@ -311,7 +314,8 @@ module.exports = function calcGridlines(trace, axisLetter, crossAxisLetter) {
                 if(v < data[0] || v > data[data.length - 1]) continue;
                 minorgridlines.push(extendFlat(constructValueGridline(v), {
                     color: axis.minorgridcolor,
-                    width: axis.minorgridwidth
+                    width: axis.minorgridwidth,
+                    dash: axis.minorgriddash
                 }));
             }
         }

test/image/mocks/line_grid_dash.json

@@ -0,0 +1,39 @@
+{
+    "data": [
+        {
+            "y": [
+                -5,
+                -1,
+                1
+            ],
+            "x": [
+                -1,
+                0,
+                1
+            ]
+        }
+    ],
+    "layout": {
+        "xaxis": {
+            "griddash": "longdashdot",
+            "type": "linear",
+            "range": [
+                -1.122244488977956,
+                1.122244488977956
+            ],
+            "autorange": true
+        },
+        "yaxis": {
+            "griddash": "dashdot",
+            "type": "linear",
+            "range": [
+                -5.439490445859873,
+                1.4394904458598727
+            ],
+            "autorange": true
+        },
+        "height": 450,
+        "width": 1000,
+        "autosize": true
+    }
+}