feat: customize no data message in nvd3 charts (#330)

* feat: customize no data message in nvd3 charts * Update NVD3Vis.js
apache-superset · Feb 12, 2020 · 4e60731 · 4e60731
1 parent 0d022d1
commit 4e60731
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
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
@@ -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
@@ -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/...kages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx b/...kages/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',
+  },
 ];