Skip to content

Commit 59772c1

Browse files
etpinardetpinard
authored
Merge pull request #4380 from plotly/texttemplate-formatting-fixes
Text template formatting fixes
2 parents 9ee4aa7 + 2278910 commit 59772c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+617
-142
lines changed

Diff for: ‎src/components/drawing/index.js

+15-11
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
2626

2727
var subTypes = require('../../traces/scatter/subtypes');
2828
var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
29+
var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue;
2930

3031
var drawing = module.exports = {};
31-
var appendArrayPointValue = require('../fx/helpers').appendArrayPointValue;
3232

3333
// -----------------------------------------------------
3434
// styling functions for plot elements
@@ -680,32 +680,36 @@ function extracTextFontSize(d, trace) {
680680
}
681681

682682
// draw text at points
683-
drawing.textPointStyle = function(s, trace, gd, inLegend) {
683+
drawing.textPointStyle = function(s, trace, gd) {
684684
if(!s.size()) return;
685685

686686
var selectedTextColorFn;
687-
688687
if(trace.selectedpoints) {
689688
var fns = drawing.makeSelectedTextStyleFns(trace);
690689
selectedTextColorFn = fns.selectedTextColorFn;
691690
}
692691

693-
var template = trace.texttemplate;
694-
// If styling text in legends, do not use texttemplate
695-
if(inLegend) template = false;
692+
var texttemplate = trace.texttemplate;
693+
var fullLayout = gd._fullLayout;
694+
696695
s.each(function(d) {
697696
var p = d3.select(this);
698-
var text = Lib.extractOption(d, trace, template ? 'txt' : 'tx', template ? 'texttemplate' : 'text');
697+
698+
var text = texttemplate ?
699+
Lib.extractOption(d, trace, 'txt', 'texttemplate') :
700+
Lib.extractOption(d, trace, 'tx', 'text');
699701

700702
if(!text && text !== 0) {
701703
p.remove();
702704
return;
703705
}
704706

705-
if(template) {
706-
var pt = {};
707-
appendArrayPointValue(pt, trace, d.i);
708-
text = Lib.texttemplateString(text, {}, gd._fullLayout._d3locale, pt, d, trace._meta || {});
707+
if(texttemplate) {
708+
var labels = trace._module.formatLabels ? trace._module.formatLabels(d, trace, fullLayout) : {};
709+
var pointValues = {};
710+
appendArrayPointValue(pointValues, trace, d.i);
711+
var meta = trace._meta || {};
712+
text = Lib.texttemplateString(text, labels, fullLayout._d3locale, pointValues, d, meta);
709713
}
710714

711715
var pos = d.tp || trace.textposition;

Diff for: ‎src/components/legend/style.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,9 @@ module.exports = function style(s, gd) {
255255

256256
// always show legend items in base state
257257
tMod.selectedpoints = null;
258+
259+
// never show texttemplate
260+
tMod.texttemplate = null;
258261
}
259262

260263
var ptgroup = d3.select(this).select('g.legendpoints');
@@ -278,7 +281,7 @@ module.exports = function style(s, gd) {
278281
.append('g').classed('pointtext', true)
279282
.append('text').attr('transform', 'translate(20,0)');
280283
txt.exit().remove();
281-
txt.selectAll('text').call(Drawing.textPointStyle, tMod, gd, true);
284+
txt.selectAll('text').call(Drawing.textPointStyle, tMod, gd);
282285
}
283286

284287
function styleWaterfalls(d) {

Diff for: ‎src/traces/bar/constants.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
'use strict';
1111

1212
module.exports = {
13-
TEXTPAD: 3, // padding in pixels around text
14-
eventDataKeys: []
13+
// padding in pixels around text
14+
TEXTPAD: 3,
15+
// 'value' and 'label' are not really necessary for bar traces,
16+
// but they were made available to `texttemplate` (maybe by accident)
17+
// via tokens `%{value}` and `%{label}` starting in 1.50.0,
18+
// so let's include them in the event data also.
19+
eventDataKeys: ['value', 'label']
1520
};

Diff for: ‎src/traces/bar/event_data.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright 2012-2019, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
module.exports = function eventData(out, pt, trace) {
12+
// standard cartesian event data
13+
out.x = 'xVal' in pt ? pt.xVal : pt.x;
14+
out.y = 'yVal' in pt ? pt.yVal : pt.y;
15+
if(pt.xa) out.xaxis = pt.xa;
16+
if(pt.ya) out.yaxis = pt.ya;
17+
18+
if(trace.orientation === 'h') {
19+
out.label = out.y;
20+
out.value = out.x;
21+
} else {
22+
out.label = out.x;
23+
out.value = out.y;
24+
}
25+
26+
return out;
27+
};

Diff for: ‎src/traces/bar/hover.js

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var Color = require('../../components/color');
1515

1616
var fillText = require('../../lib').fillText;
1717
var getLineWidth = require('./helpers').getLineWidth;
18+
var hoverLabelText = require('../../plots/cartesian/axes').hoverLabelText;
1819

1920
function hoverPoints(pointData, xval, yval, hovermode) {
2021
var barPointData = hoverOnBars(pointData, xval, yval, hovermode);
@@ -151,6 +152,9 @@ function hoverOnBars(pointData, xval, yval, hovermode) {
151152
pointData[posLetter + '1'] = pa.c2p(isClosest ? maxPos(di) : extent[1], true);
152153
pointData[posLetter + 'LabelVal'] = di.p;
153154

155+
pointData.labelLabel = hoverLabelText(pa, pointData[posLetter + 'LabelVal']);
156+
pointData.valueLabel = hoverLabelText(sa, pointData[sizeLetter + 'LabelVal']);
157+
154158
// spikelines always want "closest" distance regardless of hovermode
155159
pointData.spikeDistance = (sizeFn(di) + thisBarPositionFn(di)) / 2 + maxSpikeDistance - maxHoverDistance;
156160
// they also want to point to the data value, regardless of where the label goes

Diff for: ‎src/traces/bar/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
style: require('./style').style,
2323
styleOnSelect: require('./style').styleOnSelect,
2424
hoverPoints: require('./hover').hoverPoints,
25+
eventData: require('./event_data'),
2526
selectPoints: require('./select'),
2627

2728
moduleType: 'trace',

Diff for: ‎src/traces/bar/plot.js

+17-6
Original file line numberDiff line numberDiff line change
@@ -574,31 +574,42 @@ function calcTexttemplate(fullLayout, calcTrace, index, xa, ya) {
574574
var trace = calcTrace[0].trace;
575575
var texttemplate = Lib.castOption(trace, index, 'texttemplate');
576576
if(!texttemplate) return '';
577-
var isHorizontal = (trace.orientation === 'h');
578577
var isWaterfall = (trace.type === 'waterfall');
579578
var isFunnel = (trace.type === 'funnel');
580579

580+
var pLetter, pAxis;
581+
var vLetter, vAxis;
582+
if(trace.orientation === 'h') {
583+
pLetter = 'y';
584+
pAxis = ya;
585+
vLetter = 'x';
586+
vAxis = xa;
587+
} else {
588+
pLetter = 'x';
589+
pAxis = xa;
590+
vLetter = 'y';
591+
vAxis = ya;
592+
}
593+
581594
function formatLabel(u) {
582-
var pAxis = isHorizontal ? ya : xa;
583595
return tickText(pAxis, u, true).text;
584596
}
585597

586598
function formatNumber(v) {
587-
var sAxis = isHorizontal ? xa : ya;
588-
return tickText(sAxis, +v, true).text;
599+
return tickText(vAxis, +v, true).text;
589600
}
590601

591602
var cdi = calcTrace[index];
592603
var obj = {};
593604

594605
obj.label = cdi.p;
595-
obj.labelLabel = formatLabel(cdi.p);
606+
obj.labelLabel = obj[pLetter + 'Label'] = formatLabel(cdi.p);
596607

597608
var tx = Lib.castOption(trace, cdi.i, 'text');
598609
if(tx === 0 || tx) obj.text = tx;
599610

600611
obj.value = cdi.s;
601-
obj.valueLabel = formatNumber(cdi.s);
612+
obj.valueLabel = obj[vLetter + 'Label'] = formatNumber(cdi.s);
602613

603614
var pt = {};
604615
appendArrayPointValue(pt, trace, cdi.i);

Diff for: ‎src/traces/barpolar/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ module.exports = {
2424

2525
plot: require('./plot'),
2626
colorbar: require('../scatter/marker_colorbar'),
27+
formatLabels: require('../scatterpolar/format_labels'),
2728

2829
style: require('../bar/style').style,
2930
styleOnSelect: require('../bar/style').styleOnSelect,

Diff for: ‎src/traces/scatter/format_labels.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Copyright 2012-2019, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
var Axes = require('../../plots/cartesian/axes');
12+
13+
module.exports = function formatLabels(cdi, trace, fullLayout) {
14+
var labels = {};
15+
16+
var mockGd = {_fullLayout: fullLayout};
17+
var xa = Axes.getFromTrace(mockGd, trace, 'x');
18+
var ya = Axes.getFromTrace(mockGd, trace, 'y');
19+
20+
labels.xLabel = Axes.tickText(xa, cdi.x, true).text;
21+
labels.yLabel = Axes.tickText(ya, cdi.y, true).text;
22+
23+
return labels;
24+
};

Diff for: ‎src/traces/scatter/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ module.exports = {
2424
arraysToCalcdata: require('./arrays_to_calcdata'),
2525
plot: require('./plot'),
2626
colorbar: require('./marker_colorbar'),
27+
formatLabels: require('./format_labels'),
2728
style: require('./style').style,
2829
styleOnSelect: require('./style').styleOnSelect,
2930
hoverPoints: require('./hover'),

Diff for: ‎src/traces/scatter3d/convert.js

+23-6
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
2222
var DASH_PATTERNS = require('../../constants/gl3d_dashes');
2323
var MARKER_SYMBOLS = require('../../constants/gl3d_markers');
2424

25+
var Axes = require('../../plots/cartesian/axes');
2526
var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue;
2627

2728
var calculateError = require('./calc_errors');
@@ -241,19 +242,35 @@ function convertPlotlyOptions(scene, data) {
241242
for(i = 0; i < len; i++) text[i] = data.text;
242243
}
243244

245+
function formatter(axName, val) {
246+
var ax = sceneLayout[axName];
247+
return Axes.tickText(ax, ax.d2l(val), true).text;
248+
}
249+
244250
// check texttemplate
245251
var texttemplate = data.texttemplate;
246252
if(texttemplate) {
253+
var fullLayout = scene.fullLayout;
254+
var d3locale = fullLayout._d3locale;
247255
var isArray = Array.isArray(texttemplate);
248256
var N = isArray ? Math.min(texttemplate.length, len) : len;
249-
var txt = isArray ? function(i) {return texttemplate[i];} : function() { return texttemplate;};
250-
var d3locale = scene.fullLayout._d3locale;
257+
var txt = isArray ?
258+
function(i) { return texttemplate[i]; } :
259+
function() { return texttemplate; };
260+
251261
text = new Array(N);
262+
252263
for(i = 0; i < N; i++) {
253-
var pt = {};
254-
pt.text = text[i];
255-
appendArrayPointValue(pt, data, i);
256-
text[i] = Lib.texttemplateString(txt(i), pt, d3locale, pt, data._meta || {});
264+
var d = {x: x[i], y: y[i], z: z[i]};
265+
var labels = {
266+
xLabel: formatter('xaxis', x[i]),
267+
yLabel: formatter('yaxis', y[i]),
268+
zLabel: formatter('zaxis', z[i])
269+
};
270+
var pointValues = {};
271+
appendArrayPointValue(pointValues, data, i);
272+
var meta = data._meta || {};
273+
text[i] = Lib.texttemplateString(txt(i), labels, d3locale, pointValues, d, meta);
257274
}
258275
}
259276

Diff for: ‎src/traces/scattercarpet/format_labels.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* Copyright 2012-2019, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
module.exports = function formatLabels(cdi, trace) {
12+
var labels = {};
13+
14+
var carpet = trace._carpet;
15+
var ij = carpet.ab2ij([cdi.a, cdi.b]);
16+
var i0 = Math.floor(ij[0]);
17+
var ti = ij[0] - i0;
18+
var j0 = Math.floor(ij[1]);
19+
var tj = ij[1] - j0;
20+
var xy = carpet.evalxy([], i0, j0, ti, tj);
21+
22+
labels.yLabel = xy[1].toFixed(3);
23+
24+
return labels;
25+
};

Diff for: ‎src/traces/scattercarpet/hover.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,8 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
4949
var trace = newPointData.trace;
5050
var carpet = trace._carpet;
5151

52-
var ij = carpet.ab2ij([cdi.a, cdi.b]);
53-
var i0 = Math.floor(ij[0]);
54-
var ti = ij[0] - i0;
55-
var j0 = Math.floor(ij[1]);
56-
var tj = ij[1] - j0;
57-
var xy = carpet.evalxy([], i0, j0, ti, tj);
58-
newPointData.yLabel = xy[1].toFixed(3);
52+
var labels = trace._module.formatLabels(cdi, trace);
53+
newPointData.yLabel = labels.yLabel;
5954

6055
delete newPointData.text;
6156
var text = [];

Diff for: ‎src/traces/scattercarpet/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
attributes: require('./attributes'),
1313
supplyDefaults: require('./defaults'),
1414
colorbar: require('../scatter/marker_colorbar'),
15+
formatLabels: require('./format_labels'),
1516
calc: require('./calc'),
1617
plot: require('./plot'),
1718
style: require('../scatter/style').style,

Diff for: ‎src/traces/scattergeo/format_labels.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Copyright 2012-2019, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
var Axes = require('../../plots/cartesian/axes');
12+
13+
module.exports = function formatLabels(cdi, trace, fullLayout) {
14+
var labels = {};
15+
16+
var geo = fullLayout[trace.geo]._subplot;
17+
var ax = geo.mockAxis;
18+
var lonlat = cdi.lonlat;
19+
labels.lonLabel = Axes.tickText(ax, ax.c2l(lonlat[0]), true).text;
20+
labels.latLabel = Axes.tickText(ax, ax.c2l(lonlat[1]), true).text;
21+
22+
return labels;
23+
};

Diff for: ‎src/traces/scattergeo/hover.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
'use strict';
1010

1111
var Fx = require('../../components/fx');
12-
var Axes = require('../../plots/cartesian/axes');
1312
var BADNUM = require('../../constants/numerical').BADNUM;
1413

1514
var getTraceColor = require('../scatter/get_trace_color');
@@ -63,9 +62,11 @@ module.exports = function hoverPoints(pointData, xval, yval) {
6362
pointData.lon = lonlat[0];
6463
pointData.lat = lonlat[1];
6564

66-
var ax = geo.mockAxis;
67-
pointData.lonLabel = Axes.tickText(ax, ax.c2l(pointData.lon), 'hover').text;
68-
pointData.latLabel = Axes.tickText(ax, ax.c2l(pointData.lat), 'hover').text;
65+
var fullLayout = {};
66+
fullLayout[trace.geo] = {_subplot: geo};
67+
var labels = trace._module.formatLabels(di, trace, fullLayout);
68+
pointData.lonLabel = labels.lonLabel;
69+
pointData.latLabel = labels.latLabel;
6970

7071
pointData.color = getTraceColor(trace, di);
7172
pointData.extraText = getExtraText(trace, di, pointData, cd[0].t.labels);

Diff for: ‎src/traces/scattergeo/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
attributes: require('./attributes'),
1313
supplyDefaults: require('./defaults'),
1414
colorbar: require('../scatter/marker_colorbar'),
15+
formatLabels: require('./format_labels'),
1516
calc: require('./calc'),
1617
plot: require('./plot'),
1718
style: require('./style'),

0 commit comments

Comments
 (0)