Polar polygon grids

src/plots/polar/layout_attributes.js

@@ -122,11 +122,6 @@ var radialAxisAttrs = {
     // span: {},
     // hole: 1
 
-    // maybe should add a boolean to enable square grid lines
-    // and square axis lines
-    // (most common in radar-like charts)
-    // e.g. squareline/squaregrid or showline/showgrid: 'square' (on-top of true)
-
     editType: 'calc'
 };
 
@@ -272,6 +267,22 @@ module.exports = {
     radialaxis: radialAxisAttrs,
     angularaxis: angularAxisAttrs,
 
+    gridshape: {
+        valType: 'enumerated',
+        values: ['circular', 'linear'],
+        dflt: 'circular',
+        role: 'style',
+        editType: 'plot',
+        description: [
+            'Determines if the radial axis grid lines and angular axis line are drawn',
+            'as *circular* sectors or as *linear* (polygon) sectors.',
+            'Has an effect only when the angular axis has `type` *category*.',
+            'Note that `radialaxis.angle` is snapped to the angle of the closest',
+            'vertex when `gridshape` is *circular*',
+            '(so that radial axis scale is the same as the data scale).'
+        ].join(' ')
+    },
+
     // TODO maybe?
     // annotations:
 

src/plots/polar/layout_defaults.js

@@ -177,6 +177,10 @@ function handleDefaults(contIn, contOut, coerce, opts) {
 
         axOut._input = axIn;
     }
+
+    if(contOut.angularaxis.type === 'category') {
+        coerce('gridshape');
+    }
 }
 
 function handleAxisTypeDefaults(axIn, axOut, coerce, subplotData, dataAttr) {

src/traces/scatterpolar/plot.js

@@ -18,7 +18,7 @@ module.exports = function plot(gd, subplot, moduleCalcData) {
         xaxis: subplot.xaxis,
         yaxis: subplot.yaxis,
         plot: subplot.framework,
-        layerClipId: subplot._hasClipOnAxisFalse ? subplot.clipIds.circle : null
+        layerClipId: subplot._hasClipOnAxisFalse ? subplot.clipIds.forTraces : null
     };
 
     var radialAxis = subplot.radialAxis;

test/image/mocks/polar_polygon-grids.json

@@ -0,0 +1,141 @@
+{
+  "data": [
+    {
+      "type": "scatterpolar",
+      "r": [5, 4, 2, 4, 5],
+      "theta": ["a", "b", "c", "d", "a"],
+      "fill": "toself"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [1, 2.2, 2, 1.5, 1.5, 2, 3, 1],
+      "theta": ["a", "b", "c", "d", "e", "f", "g", "a"],
+      "fill": "toself",
+      "subplot": "polar2"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [5, 4, 2, 4, 5],
+      "theta": ["a", "b", "c", "d", "a"],
+      "fill": "toself",
+      "subplot": "polar3"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [45, 90, 180, 200, 300, 15, 20, 45],
+      "theta": ["a", "b", "c", "d", "b", "f", "a", "a"],
+      "subplot": "polar4"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [5, 4, 2, 4, 5, 5],
+      "theta": ["b", "c", "d", "e", "a", "b"],
+      "fill": "toself"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [500],
+      "theta": ["b"],
+      "name": "out-of-polygon (should not see it)",
+      "subplot": "polar4"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [5, 4, 2, 4, 5, 5],
+      "theta": ["b", "c", "d", "e", "a", "b"],
+      "fill": "toself",
+      "subplot": "polar5"
+    },
+    {
+      "type": "scatterpolar",
+      "r": [5, 4, 2, 4, 5, 5],
+      "theta": ["b", "c", "d", "e", "a", "b"],
+      "fill": "toself",
+      "subplot": "polar6"
+    }
+  ],
+  "layout": {
+    "polar": {
+      "gridshape": "linear",
+      "domain": {
+        "x": [0, 0.46],
+        "y": [0.56, 1]
+      },
+      "radialaxis": {
+        "angle": 45,
+        "title": "angular period > _categories"
+      },
+      "angularaxis": {
+        "direction": "clockwise",
+        "period": 6
+      }
+    },
+    "polar2": {
+      "gridshape": "linear",
+      "domain": {
+        "x": [0, 0.46],
+        "y": [0, 0.44]
+      },
+      "angularaxis": {
+        "direction": "clockwise"
+      }
+    },
+    "polar3": {
+      "gridshape": "linear",
+      "domain": {
+        "x": [0.54, 1],
+        "y": [0.56, 1]
+      },
+      "sector": [-20, 200],
+      "radialaxis": {
+        "angle": 60,
+        "title": "snapped to 90"
+      },
+      "angularaxis": {
+        "categoryarray": ["d", "a", "c", "b"],
+        "direction": "clockwise"
+      }
+    },
+    "polar4": {
+      "gridshape": "linear",
+      "bgcolor": "#d3d3d3",
+      "domain": {
+        "x": [0.54, 1],
+        "y": [0, 0.44]
+      },
+      "angularaxis": {
+        "direction": "clockwise"
+      },
+      "radialaxis": {
+        "range": [0, 400]
+      }
+    },
+    "polar5": {
+      "gridshape": "linear",
+      "domain": {
+        "x": [0.4, 0.6],
+        "y": [0.4, 0.6]
+      },
+      "angularaxis": {
+        "direction": "clockwise",
+        "tickfont": {"color": "red"}
+      },
+      "sector": [-90, 90]
+    },
+    "polar6": {
+      "gridshape": "linear",
+      "domain": {
+        "x": [0.8, 1],
+        "y": [0.45, 0.65]
+      },
+      "angularaxis": {
+        "tickfont": {"color": "blue" }
+      },
+      "sector": [0, 180]
+    },
+    "width": 550,
+    "height": 550,
+    "margin": {"l": 40, "r": 40, "b": 60, "t": 20, "pad": 0},
+    "showlegend": false
+  }
+}

test/jasmine/assets/drag.js

@@ -7,7 +7,7 @@ var getNodeCoords = require('./get_node_coords');
  * optionally specify an edge ('n', 'se', 'w' etc)
  * to grab it by an edge or corner (otherwise the middle is used)
  */
-module.exports = function(node, dx, dy, edge, x0, y0, nsteps) {
+function drag(node, dx, dy, edge, x0, y0, nsteps) {
     nsteps = nsteps || 1;
 
     var coords = getNodeCoords(node, edge);
@@ -32,7 +32,7 @@ module.exports = function(node, dx, dy, edge, x0, y0, nsteps) {
     });
 
     return promise;
-};
+}
 
 function waitForDragCover() {
     return new Promise(function(resolve) {
@@ -75,3 +75,7 @@ function waitForDragCoverRemoval() {
         }, interval);
     });
 }
+
+module.exports = drag;
+drag.waitForDragCover = waitForDragCover;
+drag.waitForDragCoverRemoval = waitForDragCoverRemoval;