layout.legend.indentation property for indenting the legend entries relative to the title

Author: my-tien

src/components/legend/attributes.js

@@ -105,6 +105,13 @@ module.exports = {
         editType: 'legend',
         description: 'Determines what entrywidth means.',
     },
+    indentation: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        editType: 'legend',
+        description: 'Sets the indentation (in px) of the legend entries.',
+    },
     itemsizing: {
         valType: 'enumerated',
         values: ['trace', 'constant'],

src/components/legend/defaults.js

@@ -178,6 +178,7 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {
 
     coerce('entrywidth');
     coerce('entrywidthmode');
+    coerce('indentation');
     coerce('itemsizing');
     coerce('itemwidth');
 

src/components/legend/draw.js

@@ -541,7 +541,7 @@ function drawTexts(g, gd, legendObj) {
         .call(Drawing.font, font)
         .text(isEditable ? ensureLength(name, maxNameLength) : name);
 
-    var textGap = legendObj.itemwidth + constants.itemGap * 2;
+    var textGap = legendObj.indentation + legendObj.itemwidth + constants.itemGap * 2;
     svgTextUtils.positionText(textEl, textGap, 0);
 
     if(isEditable) {
@@ -700,10 +700,10 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
                 bw + lineHeight
             );
         } else { // legend item
-            var x = constants.itemGap * 2 + legendObj.itemwidth;
+            var x = constants.itemGap * 2 + legendObj.indentation + legendObj.itemwidth;
             if(legendItem.groupTitle) {
                 x = constants.itemGap;
-                width -= legendObj.itemwidth;
+                width -= legendObj.indentation + legendObj.itemwidth;
             }
 
             svgTextUtils.positionText(textEl,

src/components/legend/style.js

@@ -47,16 +47,17 @@ module.exports = function style(s, gd, legend) {
         var layers = Lib.ensureSingle(traceGroup, 'g', 'layers');
         layers.style('opacity', d[0].trace.opacity);
 
+        var indentation = legend.indentation;
         var valign = legend.valign;
         var lineHeight = d[0].lineHeight;
         var height = d[0].height;
-
-        if(valign === 'middle' || !lineHeight || !height) {
+        if((valign === 'middle' && indentation === 0) || !lineHeight || !height) {
             layers.attr('transform', null);
         } else {
             var factor = {top: 1, bottom: -1}[valign];
-            var markerOffsetY = factor * (0.5 * (lineHeight - height + 3));
-            layers.attr('transform', strTranslate(0, markerOffsetY));
+            var markerOffsetY = (factor * (0.5 * (lineHeight - height + 3))) || 0;
+            var markerOffsetX = legend.indentation;
+            layers.attr('transform', strTranslate(markerOffsetX, markerOffsetY));
         }
 
         var fill = layers

test/image/baselines/legend_indentation.png

@@ -0,0 +1,58 @@
+{
+  "data": [{
+      "y": [1, 5, 3, 4, 5],
+      "name": "Scatter",
+      "type": "scatter",
+      "showlegend": true
+    },
+    {
+      "y": [3, 2, 5, 1, 5],
+      "name": "Scatter2",
+      "type": "scatter",
+      "showlegend": true
+    },
+    {
+      "type": "pie",
+      "labels": ["a", "b", "c", "d"],
+      "values": [10, 15, 13, 17],
+      "domain": {"x": [0.5, 1]}
+    },
+    {
+      "y": [1, 3, 2, 5, 5],
+      "name": "Scatter 3",
+      "type": "scatter",
+      "showlegend": true,
+      "legend": "legend2"
+    },
+    {
+      "y": [1, 2, 3, 4, 5],
+      "name": "Bar",
+      "type": "bar",
+      "showlegend": true,
+      "legend": "legend2"
+    }
+  ],
+  "layout": {
+    "title": "Legend Indentation",
+    "width": 800,
+    "xaxis": {"domain": [0, 0.5]},
+    "legend": {
+      "bgcolor": "lightblue",
+      "y": 1,
+      "indentation": 0,
+      "title": { "text": "No indent" },
+      "font": {
+        "size": 10
+      }
+    },
+    "legend2": {
+      "bgcolor": "lightgreen",
+      "y": 0,
+      "indentation": 30,
+      "title": { "text": "indent 30" },
+      "font": {
+        "size": 10
+      }
+    }
+  }
+}

test/image/mocks/legend_indentation.json

@@ -2848,6 +2848,13 @@
       "valType": "number"
      }
     },
+    "indentation": {
+     "description": "Sets the indentation (in px) of the legend entries.",
+     "dflt": 0,
+     "editType": "legend",
+     "min": 0,
+     "valType": "number"
+    },
     "itemclick": {
      "description": "Determines the behavior on legend item click. *toggle* toggles the visibility of the item clicked on the graph. *toggleothers* makes the clicked item the sole visible item on the graph. *false* disables legend item click interactions.",
      "dflt": "toggle",