mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
feat: customize no data message in nvd3 charts (#330)
* feat: customize no data message in nvd3 charts * Update NVD3Vis.js
This commit is contained in:
parent
195ed3f17b
commit
d350dd2f0a
@ -148,3 +148,8 @@
|
|||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
/* END tooltip styles */
|
/* END tooltip styles */
|
||||||
|
|
||||||
|
.superset-legacy-chart-nvd3 .nv-noData.body {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
@ -67,6 +67,39 @@ import {
|
|||||||
} from './PropTypes';
|
} from './PropTypes';
|
||||||
import './NVD3Vis.css';
|
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;
|
const { getColor, getScale } = CategoricalColorNamespace;
|
||||||
|
|
||||||
// Limit on how large axes margins can grow as the chart window is resized
|
// Limit on how large axes margins can grow as the chart window is resized
|
||||||
|
@ -28,4 +28,27 @@ export default [
|
|||||||
storyName: 'Basic',
|
storyName: 'Basic',
|
||||||
storyPath: 'legacy-|preset-chart-nvd3|PieChartPlugin',
|
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',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
Loading…
Reference in New Issue
Block a user