Merge pull request #6874 from my-tien/indentation

legend indentation

Author: archmoj

draftlogs/6874_add.md

@@ -0,0 +1 @@
+- Add `indentation` to legend [[#6874](https://github.com/plotly/plotly.js/pull/6874)]

src/components/legend/attributes.js

@@ -105,6 +105,13 @@ module.exports = {
         editType: 'legend',
         description: 'Determines what entrywidth means.',
     },
+    indentation: {
+        valType: 'number',
+        min: -15,
+        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,
@@ -765,7 +765,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
     var bw = legendObj.borderwidth;
     var bw2 = 2 * bw;
     var itemGap = constants.itemGap;
-    var textGap = legendObj.itemwidth + itemGap * 2;
+    var textGap = legendObj.indentation + legendObj.itemwidth + itemGap * 2;
     var endPad = 2 * (bw + itemGap);
 
     var yanchor = getYanchor(legendObj);

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/zz-legend_indentation.png

@@ -0,0 +1,74 @@
+{
+  "data": [{
+      "y": [1, 5, 3, 4, 5],
+      "name": "Scatter",
+      "type": "scatter",
+      "showlegend": true
+    },
+    {
+      "y": [1, 2, 2, 4, 3],
+      "name": "Bar",
+      "type": "bar",
+      "showlegend": true
+    },
+    {
+      "y": [1, 3, 2, 5, 5],
+      "name": "Scatter 2",
+      "type": "scatter",
+      "showlegend": true,
+      "legend": "legend2"
+    },
+    {
+      "y": [1, 2, 3, 4, 5],
+      "name": "Bar 2",
+      "type": "bar",
+      "showlegend": true,
+      "legend": "legend2"
+    },
+    {
+      "y": [5, 2, 3, 1, 4],
+      "name": "Bar 3",
+      "type": "bar",
+      "showlegend": true,
+      "legend": "legend3"
+    },
+    {
+      "y": [2, 1, 3, 4, 4],
+      "name": "Scatter 3",
+      "type": "scatter",
+      "showlegend": true,
+      "legend": "legend3"
+    }
+  ],
+  "layout": {
+    "title": { "text": "Legend Indentation" },
+    "width": 400,
+    "legend": {
+      "bgcolor": "lightblue",
+      "y": 1,
+      "indentation": 0,
+      "title": { "text": "No indent" },
+      "font": {
+        "size": 10
+      }
+    },
+    "legend2": {
+      "bgcolor": "lightgreen",
+      "y": 0.5,
+      "indentation": 30,
+      "title": { "text": "indent 30" },
+      "font": {
+        "size": 10
+      }
+    },
+    "legend3": {
+      "bgcolor": "pink",
+      "y": 0,
+      "indentation": -15,
+      "title": { "text": "indent -15" },
+      "font": {
+        "size": 10
+      }
+    }
+  }
+}

test/image/mocks/zz-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": -15,
+     "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",