griddash

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

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, {editType: 'calc'}),
     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, {editType: 'calc'}),
     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
                 }));
             }
         }

src/traces/carpet/plot.js

@@ -102,6 +102,7 @@ function drawGridLines(xaxis, yaxis, layer, axis, axisLetter, gridlines) {
         el.attr('d', path)
             .style('stroke-width', gridline.width)
             .style('stroke', gridline.color)
+            .style('stroke-dasharray', Drawing.dashStyle(gridline.dash, gridline.width))
             .style('fill', 'none');
     });
 

test/image/mocks/z-carpet_grid_dash.json

@@ -0,0 +1,59 @@
+{
+  "data": [
+    {
+      "type": "carpet",
+      "a": [
+        0,
+        5e-07,
+        1e-06
+      ],
+      "b": [
+        0,
+        500000,
+        1000000
+      ],
+      "y": [
+        [
+          1,
+          1.32287,
+          1.73205
+        ],
+        [
+          1.32287,
+          1.58113,
+          1.93649
+        ],
+        [
+          1.73205,
+          1.93649,
+          2.23606
+        ]
+      ],
+      "aaxis": {
+        "minorgridcount": 3,
+        "gridcolor": "black",
+        "minorgridcolor": "red",
+        "griddash": "dot",
+        "minorgriddash": "dash"
+      },
+      "baxis": {
+        "minorgridcount": 3,
+        "gridcolor": "black",
+        "minorgridcolor": "red",
+        "griddash": "dash",
+        "minorgriddash": "dot"
+      }
+    }
+  ],
+  "layout": {
+    "width": 500,
+    "height": 500,
+    "margin": {
+      "t": 40,
+      "r": 20,
+      "b": 40,
+      "l": 40
+    },
+    "dragmode": "pan"
+  }
+}