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

@@ -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>`;
   });