[explore] nvd3 sort values in rich tooltip (#3197)

This commit is contained in:
Maxime Beauchemin 2017-08-01 10:25:52 -07:00 committed by GitHub
parent 48760849ec
commit 3b129253a3
2 changed files with 29 additions and 4 deletions

View File

@ -13,7 +13,7 @@ body {
}
.emph {
font-weight: bold;
font-weight: bold !important;
}
.alert.alert-danger > .debugger {

View File

@ -298,9 +298,6 @@ function nvd3Vis(slice, payload) {
chart.height(height);
slice.container.css('height', height + 'px');
if ((vizType === 'line' || vizType === 'area') && fd.rich_tooltip) {
chart.useInteractiveGuideline(true);
}
if (chart.forceY &&
fd.y_axis_bounds &&
(fd.y_axis_bounds[0] !== null || fd.y_axis_bounds[1] !== null)) {
@ -342,6 +339,34 @@ function nvd3Vis(slice, payload) {
if (vizType !== 'bullet') {
chart.color(d => category21(d[colorKey]));
}
if ((vizType === 'line' || vizType === 'area') && fd.rich_tooltip) {
chart.useInteractiveGuideline(true);
if (vizType === 'line') {
// Custom sorted tooltip
chart.interactiveLayer.tooltip.contentGenerator((d) => {
let tooltip = '';
tooltip += "<table><thead><tr><td colspan='3'>"
+ `<strong class='x-value'>${xAxisFormatter(d.value)}</strong>`
+ '</td></tr></thead><tbody>';
d.series.sort((a, b) => a.value >= b.value ? -1 : 1);
d.series.forEach((series) => {
tooltip += (
`<tr class="${series.highlight ? 'emph' : ''}">` +
`<td class='legend-color-guide' style="opacity: ${series.highlight ? '1' : '0.75'};"">` +
'<div ' +
`style="border: 2px solid ${series.highlight ? 'black' : 'transparent'}; background-color: ${series.color};"` +
'></div>' +
'</td>' +
`<td>${series.key}</td>` +
`<td>${yAxisFormatter(series.value)}</td>` +
'</tr>'
);
});
tooltip += '</tbody></table>';
return tooltip;
});
}
}
if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
let distance = 0;