diff --git a/draftlogs/6874_add.md b/draftlogs/6874_add.md new file mode 100644 index 00000000000..f1e7721a782 --- /dev/null +++ b/draftlogs/6874_add.md @@ -0,0 +1 @@ +- Add `indentation` to legend [[#6874](https://github.com/plotly/plotly.js/pull/6874)] diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index f72791bb463..029c49cf0a8 100644 --- a/src/components/legend/attributes.js +++ b/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'], diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js index 0cdcd82b0df..2ae9349c397 100644 --- a/src/components/legend/defaults.js +++ b/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'); diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index b67c168e7b3..fad99893f4f 100644 --- a/src/components/legend/draw.js +++ b/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); diff --git a/src/components/legend/style.js b/src/components/legend/style.js index 8a15c6db0ea..f055ab976cf 100644 --- a/src/components/legend/style.js +++ b/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 diff --git a/test/image/baselines/zz-legend_indentation.png b/test/image/baselines/zz-legend_indentation.png new file mode 100644 index 00000000000..3e311b5cc06 Binary files /dev/null and b/test/image/baselines/zz-legend_indentation.png differ diff --git a/test/image/mocks/zz-legend_indentation.json b/test/image/mocks/zz-legend_indentation.json new file mode 100644 index 00000000000..093b75f9d2a --- /dev/null +++ b/test/image/mocks/zz-legend_indentation.json @@ -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 + } + } + } +} diff --git a/test/plot-schema.json b/test/plot-schema.json index b0daf85637b..050fa3deef5 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.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",