IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add "No data points" message

Browse Source
This commit is contained in:
corpglory-dev 2019-03-14 18:09:24 +03:00
parent 2bd64d2c31
commit d36b07bd68
1 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/grafana-ui/src/components/PieChart/PieChart.tsx
View File

@ -50,6 +50,10 @@ export class PieChart extends PureComponent<Props> {
draw() {
const { datapoints, pieType, strokeWidth } = this.props;
if (datapoints.length === 0) {
return;
}
const data = datapoints.map(datapoint => datapoint.value);
const names = datapoints.map(datapoint => datapoint.name);
const colors = datapoints.map(datapoint => datapoint.color);
@ -102,31 +106,41 @@ export class PieChart extends PureComponent<Props> {
}
render() {
const { height, width } = this.props;
const { height, width, datapoints } = this.props;
return (
<div className="piechart-panel">
<div
ref={element => (this.containerElement = element)}
className="piechart-container"
style={{
height: `${height * 0.9}px`,
width: `${Math.min(width, height * 1.3)}px`,
}}
>
<svg ref={element => (this.svgElement = element)} />
</div>
<div className="piechart-tooltip" ref={element => (this.tooltipElement = element)}>
<div className="piechart-tooltip-time">
<div
id="tooltip-value"
className="piechart-tooltip-value"
ref={element => (this.tooltipValueElement = element)}
/>
if (datapoints.length > 0) {
return (
<div className="piechart-panel">
<div
ref={element => (this.containerElement = element)}
className="piechart-container"
style={{
height: `${height * 0.9}px`,
width: `${Math.min(width, height * 1.3)}px`,
}}
>
<svg ref={element => (this.svgElement = element)} />
</div>
<div className="piechart-tooltip" ref={element => (this.tooltipElement = element)}>
<div className="piechart-tooltip-time">
<div
id="tooltip-value"
className="piechart-tooltip-value"
ref={element => (this.tooltipValueElement = element)}
/>
</div>
</div>
</div>
</div>
);
);
} else {
return (
<div className="piechart-panel">
<div className="datapoints-warning">
<span className="small">No data points</span>
</div>
</div>
);
}
}
}