Merge pull request #3865 from plotly/trace-meta

etpinard · web-flow · commit 66b2f400e62b · 2019-05-21T13:26:13.000-04:00
Trace meta text
diff --git a/src/components/annotations/draw.js b/src/components/annotations/draw.js
@@ -212,8 +212,8 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     var font = options.font;
 
-    var text = fullLayout.meta ?
-        Lib.templateString(options.text, {meta: fullLayout.meta}) :
+    var text = fullLayout._meta ?
+        Lib.templateString(options.text, fullLayout._meta) :
         options.text;
 
     var annText = annTextGroupInner.append('text')
diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js
@@ -140,6 +140,7 @@ function makeColorBarData(gd) {
                     opts._id = 'cb' + trace.uid + (allowsMultiplotCbs && contName ? '-' + contName : '');
                     opts._traceIndex = trace.index;
                     opts._propPrefix = (contName ? contName + '.' : '') + 'colorbar.';
+                    opts._meta = trace._meta;
                     calcOpts();
                     out.push(opts);
                 }
@@ -156,6 +157,7 @@ function makeColorBarData(gd) {
             opts = initOpts(cont.colorbar);
             opts._id = 'cb' + k;
             opts._propPrefix = k + '.colorbar.';
+            opts._meta = fullLayout._meta;
 
             cbOpt = {min: 'cmin', max: 'cmax'};
             if(colorAxOpts[0] !== 'heatmap') {
@@ -281,6 +283,7 @@ function drawColorBar(g, opts, gd) {
             propContainer: ax,
             propName: opts._propPrefix + 'title',
             traceIndex: opts._traceIndex,
+            _meta: opts._meta,
             placeholder: fullLayout._dfltTitle.colorbar,
             containerGroup: g.select('.' + cn.cbtitle)
         };
diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
@@ -887,8 +887,8 @@ function createHoverText(hoverData, opts, gd) {
         if(d.nameOverride !== undefined) d.name = d.nameOverride;
 
         if(d.name) {
-            if(fullLayout.meta) {
-                d.name = Lib.templateString(d.name, {meta: fullLayout.meta});
+            if(d.trace._meta) {
+                d.name = Lib.templateString(d.name, d.trace._meta);
             }
             name = plainText(d.name, d.nameLength);
         }
@@ -925,7 +925,7 @@ function createHoverText(hoverData, opts, gd) {
         }
 
         // hovertemplate
-        var d3locale = gd._fullLayout._d3locale;
+        var d3locale = fullLayout._d3locale;
         var hovertemplate = d.hovertemplate || false;
         var hovertemplateLabels = d.hovertemplateLabels || d;
         var eventData = d.eventData[0] || {};
@@ -935,7 +935,7 @@ function createHoverText(hoverData, opts, gd) {
                 hovertemplateLabels,
                 d3locale,
                 eventData,
-                {meta: fullLayout.meta}
+                d.trace._meta
             );
 
             text = text.replace(EXTRA_STRING_REGEX, function(match, extra) {
diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
@@ -404,8 +404,8 @@ function drawTexts(g, gd, maxLength) {
     var isEditable = gd._context.edits.legendText && !isPie;
 
     var name = isPie ? legendItem.label : trace.name;
-    if(fullLayout.meta) {
-        name = Lib.templateString(name, {meta: fullLayout.meta});
+    if(trace._meta) {
+        name = Lib.templateString(name, trace._meta);
     }
 
     var textEl = Lib.ensureSingle(g, 'text', 'legendtext');
diff --git a/src/components/rangeselector/draw.js b/src/components/rangeselector/draw.js
@@ -149,14 +149,14 @@ function drawButtonText(button, selectorLayout, d, gd) {
     });
 
     text.call(Drawing.font, selectorLayout.font)
-        .text(getLabel(d, gd._fullLayout.meta))
+        .text(getLabel(d, gd._fullLayout._meta))
         .call(textLayout);
 }
 
-function getLabel(opts, meta) {
+function getLabel(opts, _meta) {
     if(opts.label) {
-        return meta ?
-            Lib.templateString(opts.label, {meta: meta}) :
+        return _meta ?
+            Lib.templateString(opts.label, _meta) :
             opts.label;
     }
 
diff --git a/src/components/sliders/draw.js b/src/components/sliders/draw.js
@@ -315,10 +315,8 @@ 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});
-        }
+        var _meta = sliderOpts._gd._fullLayout._meta;
+        if(_meta) curVal = Lib.templateString(curVal, _meta);
         str += curVal;
     }
 
@@ -367,10 +365,8 @@ function drawLabel(item, data, sliderOpts) {
     });
 
     var tx = data.step.label;
-    var meta = sliderOpts._gd._fullLayout.meta;
-    if(meta) {
-        tx = Lib.templateString(tx, {meta: meta});
-    }
+    var _meta = sliderOpts._gd._fullLayout._meta;
+    if(_meta) tx = Lib.templateString(tx, _meta);
 
     text.call(Drawing.font, sliderOpts.font)
         .text(tx)
diff --git a/src/components/titles/index.js b/src/components/titles/index.js
@@ -53,6 +53,8 @@ var numStripRE = / [XY][0-9]* /;
  *          offset - shift up/down in the rotated frame (unused?)
  *      containerGroup - if an svg <g> element already exists to hold this
  *          title, include here. Otherwise it will go in fullLayout._infolayer
+ *      _meta {object (optional} - meta key-value to for title with
+ *          Lib.templateString, default to fullLayout._meta, if not provided
  *
  *  @return {selection} d3 selection of title container group
  */
@@ -97,8 +99,10 @@ function draw(gd, titleClass, options) {
         if(!editable) txt = '';
     }
 
-    if(fullLayout.meta) {
-        txt = Lib.templateString(txt, {meta: fullLayout.meta});
+    if(options._meta) {
+        txt = Lib.templateString(txt, options._meta);
+    } else if(fullLayout._meta) {
+        txt = Lib.templateString(txt, fullLayout._meta);
     }
 
     var elShouldExist = txt || editable;
diff --git a/src/components/updatemenus/draw.js b/src/components/updatemenus/draw.js
@@ -438,10 +438,8 @@ function drawItemText(item, menuOpts, itemOpts, gd) {
     });
 
     var tx = itemOpts.label;
-    var meta = gd._fullLayout.meta;
-    if(meta) {
-        tx = Lib.templateString(tx, {meta: meta});
-    }
+    var _meta = gd._fullLayout._meta;
+    if(_meta) tx = Lib.templateString(tx, _meta);
 
     text.call(Drawing.font, menuOpts.font)
         .text(tx)
diff --git a/src/plots/attributes.js b/src/plots/attributes.js
@@ -102,6 +102,25 @@ module.exports = {
             'DOM elements'
         ].join(' ')
     },
+    meta: {
+        valType: 'any',
+        arrayOk: true,
+        role: 'info',
+        editType: 'plot',
+        description: [
+            'Assigns extra meta information associated with this trace',
+            'that can be used in various text attributes.',
+            'Attributes such as trace `name`, graph, axis and colorbar `title.text`, annotation `text`',
+            '`rangeselector`, `updatemenues` and `sliders` `label` text',
+            'all support `meta`.',
+            'To access the trace `meta` values in an attribute in the same trace, simply use',
+            '`%{meta[i]}` where `i` is the index or key of the `meta`',
+            'item in question.',
+            'To access trace `meta` in layout attributes, use',
+            '`%{data[n[.meta[i]}` where `i` is the index or key of the `meta`',
+            'and `n` is the trace index.'
+        ].join(' ')
+    },
 
     // N.B. these cannot be 'data_array' as they do not have the same length as
     // other data arrays and arrayOk attributes in general
diff --git a/src/plots/gl3d/layout/convert.js b/src/plots/gl3d/layout/convert.js
@@ -83,8 +83,8 @@ proto.merge = function(fullLayout, sceneLayout) {
         }
 
         // Axes labels
-        opts.labels[i] = fullLayout.meta ?
-            Lib.templateString(axes.title.text, {meta: fullLayout.meta}) :
+        opts.labels[i] = fullLayout._meta ?
+            Lib.templateString(axes.title.text, fullLayout._meta) :
             axes.title.text;
 
         if('font' in axes.title) {
diff --git a/src/plots/layout_attributes.js b/src/plots/layout_attributes.js
@@ -410,15 +410,19 @@ module.exports = {
     },
 
     meta: {
-        valType: 'data_array',
+        valType: 'any',
+        arrayOk: true,
+        role: 'info',
         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`, 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.'
+            'item in question.',
+            '`meta` can also be an object for example `{key: value}` which can be accessed',
+            '%{meta[key]}.'
         ].join(' ')
     },
 
diff --git a/src/plots/plots.js b/src/plots/plots.js
@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var d3 = require('d3');
@@ -483,6 +482,10 @@ plots.supplyDefaults = function(gd, opts) {
         oldFullLayout._zoomlayer.selectAll('.select-outline').remove();
     }
 
+
+    // fill in meta helpers
+    fillMetaTextHelpers(newFullData, newFullLayout);
+
     // relink functions and _ attributes to promote consistency between plots
     relinkPrivateKeys(newFullLayout, oldFullLayout);
 
@@ -698,6 +701,38 @@ function getFormatter(formatObj, separators) {
     return d3.locale(formatObj);
 }
 
+function fillMetaTextHelpers(newFullData, newFullLayout) {
+    var _meta;
+    var meta4data = [];
+
+    if(newFullLayout.meta) {
+        _meta = newFullLayout._meta = {
+            meta: newFullLayout.meta,
+            layout: {meta: newFullLayout.meta}
+        };
+    }
+
+    for(var i = 0; i < newFullData.length; i++) {
+        var trace = newFullData[i];
+
+        if(trace.meta) {
+            meta4data[trace.index] = trace._meta = {meta: trace.meta};
+        } else if(newFullLayout.meta) {
+            trace._meta = {meta: newFullLayout.meta};
+        }
+        if(newFullLayout.meta) {
+            trace._meta.layout = {meta: newFullLayout.meta};
+        }
+    }
+
+    if(meta4data.length) {
+        if(!_meta) {
+            _meta = newFullLayout._meta = {};
+        }
+        _meta.data = meta4data;
+    }
+}
+
 // Create storage for all of the data related to frames and transitions:
 plots.createTransitionData = function(gd) {
     // Set up the default keyframe if it doesn't exist:
@@ -1236,6 +1271,7 @@ plots.supplyTraceDefaults = function(traceIn, traceOut, colorIndex, layout, trac
     if(visible) {
         coerce('customdata');
         coerce('ids');
+        coerce('meta');
 
         if(Registry.traceIs(traceOut, 'showLegend')) {
             traceOut._dfltShowLegend = true;
diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js
@@ -204,9 +204,10 @@ function plot(gd, cdpie) {
                     s.attr('data-notex', 1);
                 });
 
-                var txt = fullLayout.meta ?
-                    Lib.templateString(trace.title.text, {meta: fullLayout.meta}) :
-                    trace.title.text;
+                var txt = trace.title.text;
+                if(trace._meta) {
+                    txt = Lib.templateString(txt, trace._meta);
+                }
 
                 titleText.text(txt)
                     .attr({
@@ -481,18 +482,18 @@ function determineInsideTextFont(trace, pt, layoutFont) {
 }
 
 function prerenderTitles(cdpie, gd) {
-    var fullLayout = gd._fullLayout;
-
     var cd0, trace;
+
     // Determine the width and height of the title for each pie.
     for(var i = 0; i < cdpie.length; i++) {
         cd0 = cdpie[i][0];
         trace = cd0.trace;
 
         if(trace.title.text) {
-            var txt = fullLayout.meta ?
-                Lib.templateString(trace.title.text, {meta: fullLayout.meta}) :
-                trace.title.text;
+            var txt = trace.title.text;
+            if(trace._meta) {
+                txt = Lib.templateString(txt, trace._meta);
+            }
 
             var dummyTitle = Drawing.tester.append('text')
               .attr('data-notex', 1)
diff --git a/test/image/baselines/trace_metatext.png b/test/image/baselines/trace_metatext.png
diff --git a/test/image/mocks/trace_metatext.json b/test/image/mocks/trace_metatext.json
diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js

Original file line number	Diff line number	Diff line change
`@@ -404,8 +404,8 @@ function drawTexts(g, gd, maxLength) {`
`404`	`404`	`var isEditable = gd._context.edits.legendText && !isPie;`
`405`	`405`
`406`	`406`	`var name = isPie ? legendItem.label : trace.name;`
`407`		`- if(fullLayout.meta) {`
`408`		`- name = Lib.templateString(name, {meta: fullLayout.meta});`
	`407`	`+ if(trace._meta) {`
	`408`	`+ name = Lib.templateString(name, trace._meta);`
`409`	`409`	`}`
`410`	`410`
`411`	`411`	`var textEl = Lib.ensureSingle(g, 'text', 'legendtext');`
Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,8 @@ var numStripRE = / [XY][0-9]* /;`
`53`	`53`	`* offset - shift up/down in the rotated frame (unused?)`
`54`	`54`	`* containerGroup - if an svg <g> element already exists to hold this`
`55`	`55`	`* title, include here. Otherwise it will go in fullLayout._infolayer`
	`56`	`+ * _meta {object (optional} - meta key-value to for title with`
	`57`	`+ * Lib.templateString, default to fullLayout._meta, if not provided`
`56`	`58`	`*`
`57`	`59`	`* @return {selection} d3 selection of title container group`
`58`	`60`	`*/`
`@@ -97,8 +99,10 @@ function draw(gd, titleClass, options) {`
`97`	`99`	`if(!editable) txt = '';`
`98`	`100`	`}`
`99`	`101`
`100`		`- if(fullLayout.meta) {`
`101`		`- txt = Lib.templateString(txt, {meta: fullLayout.meta});`
	`102`	`+ if(options._meta) {`
	`103`	`+ txt = Lib.templateString(txt, options._meta);`
	`104`	`+ } else if(fullLayout._meta) {`
	`105`	`+ txt = Lib.templateString(txt, fullLayout._meta);`
`102`	`106`	`}`
`103`	`107`
`104`	`108`	`var elShouldExist = txt \|\| editable;`
Original file line number	Diff line number	Diff line change
`@@ -83,8 +83,8 @@ proto.merge = function(fullLayout, sceneLayout) {`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`// Axes labels`
`86`		`- opts.labels[i] = fullLayout.meta ?`
`87`		`- Lib.templateString(axes.title.text, {meta: fullLayout.meta}) :`
	`86`	`+ opts.labels[i] = fullLayout._meta ?`
	`87`	`+ Lib.templateString(axes.title.text, fullLayout._meta) :`
`88`	`88`	`axes.title.text;`
`89`	`89`
`90`	`90`	`if('font' in axes.title) {`