add layout.meta support to rangeselector, updatemenus and sliders labels

Author: etpinard

src/components/rangeselector/draw.js

@@ -26,7 +26,6 @@ var FROM_BR = alignmentConstants.FROM_BR;
 var constants = require('./constants');
 var getUpdateObject = require('./get_update_object');
 
-
 module.exports = function draw(gd) {
     var fullLayout = gd._fullLayout;
 
@@ -152,12 +151,16 @@ function drawButtonText(button, selectorLayout, d, gd) {
     });
 
     text.call(Drawing.font, selectorLayout.font)
-        .text(getLabel(d))
+        .text(getLabel(d, gd._fullLayout.meta))
         .call(textLayout);
 }
 
-function getLabel(opts) {
-    if(opts.label) return opts.label;
+function getLabel(opts, meta) {
+    if(opts.label) {
+        return meta ?
+            Lib.templateString(opts.label, {meta: meta}) :
+            opts.label;
+    }
 
     if(opts.step === 'all') return 'all';
 

src/components/sliders/draw.js

@@ -317,6 +317,10 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
         str += valueOverride;
     } else {
         var curVal = sliderOpts.steps[sliderOpts.active].label;
+        var meta = sliderOpts._gd._fullLayout.meta;
+        if(meta) {
+            curVal = Lib.templateString(curVal, {meta: meta});
+        }
         str += curVal;
     }
 
@@ -364,8 +368,14 @@ function drawLabel(item, data, sliderOpts) {
             });
     });
 
+    var tx = data.step.label;
+    var meta = sliderOpts._gd._fullLayout.meta;
+    if(meta) {
+        tx = Lib.templateString(tx, {meta: meta});
+    }
+
     text.call(Drawing.font, sliderOpts.font)
-        .text(data.step.label)
+        .text(tx)
         .call(svgTextUtils.convertToTspans, sliderOpts._gd);
 
     return text;

src/components/updatemenus/draw.js

@@ -442,8 +442,14 @@ function drawItemText(item, menuOpts, itemOpts, gd) {
             });
     });
 
+    var tx = itemOpts.label;
+    var meta = gd._fullLayout.meta;
+    if(meta) {
+        tx = Lib.templateString(tx, {meta: meta});
+    }
+
     text.call(Drawing.font, menuOpts.font)
-        .text(itemOpts.label)
+        .text(tx)
         .call(svgTextUtils.convertToTspans, gd);
 }
 

src/plots/layout_attributes.js

@@ -416,8 +416,9 @@ module.exports = {
         editType: 'plot',
         description: [
             'Assigns extra meta information that can be used in various `text` attributes.',
-            'Attributes such as the graph, axis and colorbar `title.text` and annotation `text`',
-            'support `meta`. One can access `meta` fields using template strings:',
+            'Attributes such as the graph, axis and colorbar `title.text`, annotation `text`',
+            '`trace.name` in legend items, `rangeselector`, `updatemenues` and `sliders` `label` text',
+            'all support `meta`. One can access `meta` fields using template strings:',
             '`%{meta[i]}` where `i` is the index of the `meta`',
             'item in question.'
         ].join(' ')

test/image/baselines/layout_metatext.png

@@ -35,7 +35,16 @@
     "title": {"text": "This graph is %{meta[2]}"},
     "xaxis": {
       "domain": {"row": 0, "column": 0},
-      "title": {"text": "Worth more than %{meta[4]} %{meta[1]}"}
+      "title": {"text": "Worth more than %{meta[4]} %{meta[1]}"},
+      "rangeselector": {
+        "buttons": [{
+          "step": "all"
+        }, {
+          "step": "month",
+          "count": 2,
+          "label": "backup %{meta[2]}"
+        }]
+      }
     },
     "yaxis": {
       "domain": {"row": 0, "column": 0},
@@ -81,6 +90,28 @@
       "yref": "y",
       "x": "2019-02-10",
       "y": 2
+    }],
+
+    "updatemenus": [{
+      "buttons": [{
+        "label": "Btn-%{meta[0]}",
+        "method": "restyle",
+        "args": ["visible", false]
+      }],
+      "y": 1,
+      "yanchor": "bottom"
+    }],
+
+    "sliders": [{
+      "steps": [{
+        "label": "step-%{meta[0]}",
+        "method": "restyle",
+        "args": ["marker.color", "red"]
+      }, {
+        "label": "step-%{meta[1]}",
+        "method": "restyle",
+        "args": ["marker.color", "blue"]
+      }]
     }]
   }
 }