Making split pie look ok for zero flows
@@ -36,8 +36,9 @@ const initialState = {
r => ({
rating: r,
style: {
- 'border-color': authoritativeRatingColorScale(r),
- 'background-color': authoritativeRatingColorScale(r).brighter(1.6)
+ 'border-radius': '2px',
+ 'border-color': authoritativeRatingColorScale(r).toString(),
+ 'background-color': authoritativeRatingColorScale(r).brighter(2).toString()
}
}))
};
@@ -83,13 +84,6 @@ function controller(serviceBroker) {
const drawPie = (rawStats, options) => {
- const pieStats= _.map(rawStats, (value, key) => ({value, key}))
-
- const pieData = pie()
- .value(d => d.value)
- .startAngle(options.startAngle)
- .endAngle(options.endAngle)
- (pieStats);
const svg = select(options.selector)
.append('svg')
@@ -99,6 +93,41 @@ function controller(serviceBroker) {
const g = svg.append('g')
.attr('transform', options.transform);
+ const empty = [];
+
+ const isEmpty = _.sum(_.values(rawStats)) == 0;
+
+ if (isEmpty) {
+ empty.push(true);
+ }
+
+ const empties = svg
+ .selectAll('.empty')
+ .data(empty);
+
+ empties
+ .enter()
+ .append('circle')
+ .classed('empty', true)
+ .attr('stroke', '#ccc')
+ .attr('fill', '#eee')
+ .attr('r', 20)
+ .attr('cx', w / 2)
+ .attr('cy', h / 2 + 5);
+
+ empties
+ .exit()
+ .remove();
+
+ if (! isEmpty) {
+ const pieStats= _.map(rawStats, (value, key) => ({value, key}));
+
+ const pieData = pie()
+ .value(d => d.value)
+ .startAngle(options.startAngle)
+ .endAngle(options.endAngle)
+ (pieStats);
+
const pieArc = arc()
.outerRadius(w - 10)
.innerRadius(w * 0.4)
@@ -113,6 +142,7 @@ function controller(serviceBroker) {
.attr('fill', d => authoritativeRatingColorScale(d.data.key).brighter())
.attr('stroke', d => authoritativeRatingColorScale(d.data.key))
.attr('d', d => pieArc(d));
+ }
};
