From 4e607314951483472a698f7f57c5a0636352d6ca Mon Sep 17 00:00:00 2001
From: Erik Ritter <erik.ritter@airbnb.com>
Date: Wed, 12 Feb 2020 11:05:33 -0800
Subject: [PATCH] feat: customize no data message in nvd3 charts (#330)

* feat: customize no data message in nvd3 charts

* Update NVD3Vis.js
---
 .../src/NVD3Vis.css                           |  5 +++
 .../src/NVD3Vis.js                            | 33 +++++++++++++++++++
 .../legacy-preset-chart-nvd3/Pie/Stories.tsx  | 23 +++++++++++++
 3 files changed, 61 insertions(+)

diff --git a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
index 0b3958cbe0..6534f14fb4 100644
--- a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
+++ b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
@@ -148,3 +148,8 @@
   word-break: break-word;
 }
 /* END tooltip styles */
+
+.superset-legacy-chart-nvd3 .nv-noData.body {
+  font-size: 14px;
+  font-weight: normal;
+}
diff --git a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
index 5319331b3c..0dcaf984f1 100644
--- a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -67,6 +67,39 @@ import {
 } from './PropTypes';
 import './NVD3Vis.css';
 
+const NO_DATA_RENDER_DATA = [
+  { text: 'No data', dy: '-.75em', class: 'header' },
+  { text: 'Adjust filters or check the Datasource.', dy: '.75em', class: 'body' },
+];
+
+// Override the noData render function to make a prettier UX
+// Code adapted from https://github.com/novus/nvd3/blob/master/src/utils.js#L653
+nv.utils.noData = function(chart, container) {
+  const opt = chart.options();
+  const margin = opt.margin();
+  const height = nv.utils.availableHeight(null, container, margin);
+  const width = nv.utils.availableWidth(null, container, margin);
+  const x = margin.left + width / 2;
+  const y = margin.top + height / 2;
+
+  // Remove any previously created chart components
+  container.selectAll('g').remove();
+
+  const noDataText = container.selectAll('.nv-noData').data(NO_DATA_RENDER_DATA);
+
+  noDataText
+    .enter()
+    .append('text')
+    .attr('class', d => `nvd3 nv-noData ${d.class}`)
+    .attr('dy', d => d.dy)
+    .style('text-anchor', 'middle');
+
+  noDataText
+    .attr('x', x)
+    .attr('y', y)
+    .text(d => d.text);
+};
+
 const { getColor, getScale } = CategoricalColorNamespace;
 
 // Limit on how large axes margins can grow as the chart window is resized
diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx
index 9ed4cdaf27..bd5798a538 100644
--- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx
+++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx
@@ -28,4 +28,27 @@ export default [
     storyName: 'Basic',
     storyPath: 'legacy-|preset-chart-nvd3|PieChartPlugin',
   },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="pie"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        queryData={{ data: [] }}
+        formData={{
+          colorScheme: 'd3Category10',
+          donut: false,
+          labelsOutside: true,
+          numberFormat: '.3s',
+          pieLabelType: 'key',
+          showLabels: true,
+          showLegend: true,
+          vizType: 'pie',
+        }}
+      />
+    ),
+    storyName: 'No Data',
+    storyPath: 'legacy-|preset-chart-nvd3|PieChartPlugin',
+  },
 ];