pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-19 12:09:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: customize no data message in nvd3 charts

* Update NVD3Vis.js
This commit is contained in:
Erik Ritter 2020-02-12 11:05:33 -08:00 committed by Yongjie Zhao
parent 195ed3f17b
commit d350dd2f0a
3 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.css
View File

@ -148,3 +148,8 @@
word-break: break-word;
}
/* END tooltip styles */
.superset-legacy-chart-nvd3 .nv-noData.body {
font-size: 14px;
font-weight: normal;
}

33
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
View File

@ -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

23
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx
View File

@ -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',
},
];