[incubator-superset] branch master updated: Make NULL value grouping keys show up properly in rich tooltip (#6003)

[maximebeauchemin]

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 818a6a8  Make NULL value grouping keys show up properly in rich 
tooltip (#6003)
818a6a8 is described below

commit 818a6a832c96fb70cf3921b64c3736fc25cad032
Author: hmanuel <hman...@usc.edu>
AuthorDate: Mon Jan 7 20:23:11 2019 -0500

    Make NULL value grouping keys show up properly in rich tooltip (#6003)
    
    * resolved merge conflicts with upstream
    
    * changed the key in a spot I missed
    
    * linting
    
    * refactored my code out into a function
    
    * update util
    
    * simplified the code logic
    
    * cleaned up code
---
 superset/assets/src/visualizations/nvd3/utils.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/superset/assets/src/visualizations/nvd3/utils.js 
b/superset/assets/src/visualizations/nvd3/utils.js
index b8d0d4d..89643e5 100644
--- a/superset/assets/src/visualizations/nvd3/utils.js
+++ b/superset/assets/src/visualizations/nvd3/utils.js
@@ -60,6 +60,14 @@ export function drawBarValues(svg, data, stacked, 
axisFormat) {
     });
 }
 
+// Formats the series key to account for a possible NULL value
+function getFormattedKey(seriesKey, shouldDompurify) {
+    if (seriesKey === '<NULL>') {
+        return '&lt;' + seriesKey.slice(1, -1) + '&gt;';
+    }
+    return shouldDompurify ? dompurify.sanitize(seriesKey) : seriesKey;
+}
+
 // Custom sorted tooltip
 // use a verbose formatter for times
 export function generateRichLineTooltipContent(d, timeFormatter, 
valueFormatter) {
@@ -69,6 +77,7 @@ export function generateRichLineTooltipContent(d, 
timeFormatter, valueFormatter)
     + '</td></tr></thead><tbody>';
   d.series.sort((a, b) => a.value >= b.value ? -1 : 1);
   d.series.forEach((series) => {
+    const key = getFormattedKey(series.key, true);
     tooltip += (
       `<tr class="${series.highlight ? 'emph' : ''}">` +
         `<td class='legend-color-guide' style="opacity: ${series.highlight ? 
'1' : '0.75'};"">` +
@@ -76,7 +85,7 @@ export function generateRichLineTooltipContent(d, 
timeFormatter, valueFormatter)
             `style="border: 2px solid ${series.highlight ? 'black' : 
'transparent'}; background-color: ${series.color};"` +
           '></div>' +
         '</td>' +
-        `<td>${dompurify.sanitize(series.key)}</td>` +
+        `<td>${key}</td>` +
         `<td>${valueFormatter(series.value)}</td>` +
       '</tr>'
     );
@@ -95,9 +104,10 @@ export function generateMultiLineTooltipContent(d, 
xFormatter, yFormatters) {
 
   d.series.forEach((series, i) => {
     const yFormatter = yFormatters[i];
+    const key = getFormattedKey(series.key, false);
     tooltip += "<tr><td class='legend-color-guide'>"
       + `<div style="background-color: ${series.color};"></div></td>`
-      + `<td class='key'>${series.key}</td>`
+      + `<td class='key'>${key}</td>`
       + `<td class='value'>${yFormatter(series.value)}</td></tr>`;
   });