Feature: Display the verbose name for metrics within Charts and legend. (#3504)

superset/assets/visualizations/nvd3_vis.js

@@ -73,14 +73,41 @@ function getMaxLabelSize(container, axisClass) {
   return Math.max(...labelDimensions);
 }
 
+/* eslint-disable camelcase */
+function formatLabel(column, verbose_map) {
+  let label;
+  if (verbose_map) {
+    if (Array.isArray(column) && column.length) {
+      label = verbose_map[column[0]];
+      if (column.length > 1) {
+        label += `, ${column.slice(1).join(', ')}`;
+      }
+    } else {
+      label = verbose_map[column];
+    }
+  }
+  return label || column;
+}
+/* eslint-enable camelcase */
+
 function nvd3Vis(slice, payload) {
   let chart;
   let colorKey = 'key';
   const isExplore = $('#explore-container').length === 1;
 
+  let data;
+  if (payload.data) {
+    data = payload.data.map(x => ({
+      ...x, key: formatLabel(x.key, slice.datasource.verbose_map),
+    }));
+  } else {
+    data = [];
+  }
+
   slice.container.html('');
   slice.clearError();
 
+
   // Calculates the longest label size for stretching bottom margin
   function calculateStretchMargins(payloadData) {
     let stretchMargin = 0;
@@ -102,9 +129,9 @@ function nvd3Vis(slice, payload) {
   const barchartWidth = function () {
     let bars;
     if (fd.bar_stacked) {
-      bars = d3.max(payload.data, function (d) { return d.values.length; });
+      bars = d3.max(data, function (d) { return d.values.length; });
     } else {
-      bars = d3.sum(payload.data, function (d) { return d.values.length; });
+      bars = d3.sum(data, function (d) { return d.values.length; });
     }
     if (bars * minBarWidth > width) {
       return bars * minBarWidth;
@@ -162,7 +189,7 @@ function nvd3Vis(slice, payload) {
 
         if (fd.show_bar_value) {
           setTimeout(function () {
-            addTotalBarValues(svg, chart, payload.data, stacked, fd.y_axis_format);
+            addTotalBarValues(svg, chart, data, stacked, fd.y_axis_format);
           }, animationTime);
         }
         break;
@@ -179,13 +206,13 @@ function nvd3Vis(slice, payload) {
         stacked = fd.bar_stacked;
         chart.stacked(stacked);
         if (fd.order_bars) {
-          payload.data.forEach((d) => {
+          data.forEach((d) => {
             d.values.sort((a, b) => tryNumify(a.x) < tryNumify(b.x) ? -1 : 1);
           });
         }
         if (fd.show_bar_value) {
           setTimeout(function () {
-            addTotalBarValues(svg, chart, payload.data, stacked, fd.y_axis_format);
+            addTotalBarValues(svg, chart, data, stacked, fd.y_axis_format);
           }, animationTime);
         }
         if (!reduceXTicks) {
@@ -208,7 +235,7 @@ function nvd3Vis(slice, payload) {
 
         if (fd.pie_label_type === 'percent') {
           let total = 0;
-          payload.data.forEach((d) => { total += d.y; });
+          data.forEach((d) => { total += d.y; });
           chart.tooltip.valueFormatter(d => `${((d / total) * 100).toFixed()}%`);
         }
 
@@ -248,7 +275,7 @@ function nvd3Vis(slice, payload) {
           return s;
         });
         chart.pointRange([5, fd.max_bubble_size ** 2]);
-        chart.pointDomain([0, d3.max(payload.data, d => d3.max(d.values, v => v.size))]);
+        chart.pointDomain([0, d3.max(data, d => d3.max(d.values, v => v.size))]);
         break;
 
       case 'area':
@@ -395,7 +422,7 @@ function nvd3Vis(slice, payload) {
       chart.showLegend(width > BREAKPOINTS.small);
     }
     svg
-    .datum(payload.data)
+    .datum(data)
     .transition().duration(500)
     .attr('height', height)
     .attr('width', width)
@@ -471,7 +498,7 @@ function nvd3Vis(slice, payload) {
 
       // render chart
       svg
-      .datum(payload.data)
+      .datum(data)
       .transition().duration(500)
       .attr('height', height)
       .attr('width', width)

superset/viz.py

@@ -840,16 +840,11 @@ class NVD3TimeSeriesViz(NVD3Viz):
             ys = series[name]
             if df[name].dtype.kind not in "biufc":
                 continue
-            if isinstance(name, string_types):
-                series_title = name
-            else:
-                name = ["{}".format(s) for s in name]
-                if len(self.form_data.get('metrics')) > 1:
-                    series_title = ", ".join(name)
-                else:
-                    series_title = ", ".join(name[1:])
-            if title_suffix:
+            series_title = name
+            if isinstance(series_title, string_types):
                 series_title += title_suffix
+            elif title_suffix and isinstance(series_title, list):
+                series_title.append(title_suffix)
 
             d = {
                 "key": series_title,