Skip to content

Commit f989958

Browse files
committed
minicharts much nice.
- [x] fix type distribution bars (Lucas' new mongodb-schema version) - [x] add labels to histograms (right side) - [x] styling (dist bars, tooltips, histograms) - [x] add ":00" to hour labels (or AM/PM) - [x] disarm reload button - [x] min/max labels at the bottom of number charts - [x] clean up minicharts code
1 parent a4c6786 commit f989958

File tree

10 files changed

+143
-81
lines changed

10 files changed

+143
-81
lines changed

scout-ui/src/minicharts/d3fns/boolean.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ module.exports = function(opts) {
1818
})
1919
.map(function(v, k) {
2020
return {
21-
x: k,
22-
y: v.length
21+
label: k,
22+
value: v.length
2323
};
2424
})
25-
.sortByOrder('x', [false]) // descending on y
25+
.sortByOrder('label', [false]) // order: false, true
2626
.value();
2727

2828
var margin = {

scout-ui/src/minicharts/d3fns/date.js

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ var moment = require('moment');
44
var debug = require('debug')('scout-ui:minicharts:date');
55
var many = require('./many');
66

7+
require('d3-tip')(d3);
8+
79
function generateDefaults(n) {
810
var doc = {};
911
_.each(_.range(n), function(d) {
@@ -47,7 +49,7 @@ module.exports = function(opts) {
4749
.range([0, width]);
4850

4951
var upperBarBottom = height / 2 - 20;
50-
var upperRatio = 2;
52+
var upperRatio = 2.5;
5153
var upperMargin = 15;
5254

5355
// group by weekdays
@@ -59,8 +61,8 @@ module.exports = function(opts) {
5961
.defaults(generateDefaults(7))
6062
.map(function(d, i) {
6163
return {
62-
x: weekdayLabels[i],
63-
y: d.length,
64+
label: weekdayLabels[i],
65+
value: d.length,
6466
tooltip: weekdayLabels[i]
6567
};
6668
})
@@ -72,22 +74,32 @@ module.exports = function(opts) {
7274
.groupBy(function(d) {
7375
return d.getHours();
7476
})
75-
.defaults(generateDefaults(23))
77+
.defaults(generateDefaults(24))
7678
.map(function(d, i) {
7779
return {
78-
x: hourLabels[i],
79-
y: d.length,
80-
tooltip: hourLabels[i] + 'h'
80+
label: hourLabels[i] + ':00',
81+
value: d.length,
82+
tooltip: hourLabels[i] + ':00'
8183
};
8284
})
8385
.value();
8486

8587
// clear element first
8688
d3.select(el).selectAll('*').remove();
8789

90+
// set up tooltips
91+
var tip = d3.tip()
92+
.attr('class', 'd3-tip')
93+
.html(function(d, i) {
94+
return format(d);
95+
})
96+
.direction('n')
97+
.offset([-9, 0]);
98+
8899
var svg = d3.select(el)
89100
.append('g')
90-
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
101+
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
102+
.call(tip);
91103

92104
var line = svg.selectAll('.line')
93105
.data(values)
@@ -100,7 +112,9 @@ module.exports = function(opts) {
100112
.attr('x2', function(d) {
101113
return barcodeX(d);
102114
})
103-
.attr('y2', barcodeBottom);
115+
.attr('y2', barcodeBottom)
116+
.on('mouseover', tip.show)
117+
.on('mouseout', tip.hide);
104118

105119
var text = svg.selectAll('.text')
106120
.data(barcodeX.domain())
@@ -114,8 +128,14 @@ module.exports = function(opts) {
114128
.attr('text-anchor', function(d, i) {
115129
return i ? 'end' : 'start';
116130
})
117-
.text(function(d) {
118-
return format(d);
131+
.text(function(d, i) {
132+
if (format(barcodeX.domain()[0]) === format(barcodeX.domain()[1])) {
133+
if (i === 0) {
134+
return 'inserted: ' + format(d);
135+
}
136+
} else {
137+
return (i ? 'last: ' : 'first: ') + format(d);
138+
}
119139
});
120140

121141
var weekdayContainer = svg.append('g');
@@ -124,7 +144,7 @@ module.exports = function(opts) {
124144
labels: {
125145
'text-anchor': 'middle',
126146
'text': function(d) {
127-
return d.x[0];
147+
return d.label[0];
128148
}
129149
}
130150
});
@@ -136,7 +156,7 @@ module.exports = function(opts) {
136156
bgbars: true,
137157
labels: {
138158
'text': function(d, i) {
139-
return (i % 6 === 0 || i === 23) ? d.x : '';
159+
return (i % 6 === 0 || i === 23) ? d.label : '';
140160
}
141161
}
142162
});

scout-ui/src/minicharts/d3fns/few.js

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,15 @@ require('d3-tip')(d3);
77

88
module.exports = function(data, g, width, height, options) {
99

10-
11-
// @todo make barOffset equal to longest label
12-
// var barOffset = width / 4;
13-
var barHeight = 30;
10+
var barHeight = 25;
11+
var values = _.pluck(data, 'value');
12+
var sumValues = d3.sum(values);
1413

1514
// data.x is still the label, and data.y the length of the bar
1615
var x = d3.scale.linear()
17-
.domain([0, d3.sum(_.pluck(data, 'y'))])
16+
.domain([0, sumValues])
1817
.range([0, width]);
1918

20-
var y = d3.scale.ordinal()
21-
.domain(_.pluck(data, 'x'))
22-
.rangeBands([0, height], 0.3, 0.0);
23-
24-
var sumY = d3.sum(_.pluck(data, 'y'));
25-
2619
// set up tooltips
2720
var tip = d3.tip()
2821
.attr('class', 'd3-tip')
@@ -31,8 +24,8 @@ module.exports = function(data, g, width, height, options) {
3124
return d.tooltip(d, i);
3225
}
3326
return d.tooltip || tooltipHtml({
34-
label: d.x,
35-
value: Math.round(d.y / sumY * 100)
27+
label: d.label,
28+
value: Math.round(d.value / sumValues * 100)
3629
});
3730
})
3831
.direction('n')
@@ -45,11 +38,12 @@ module.exports = function(data, g, width, height, options) {
4538
var bar = g.selectAll('.bar')
4639
.data(data)
4740
.enter().append('g')
48-
.attr('class', 'bar')
41+
.attr('class', 'bar few')
4942
.attr('transform', function(d, i) {
43+
5044
var xpos = _.sum(_(data)
5145
.slice(0, i)
52-
.pluck('y')
46+
.pluck('value')
5347
.value()
5448
);
5549
return 'translate(' + x(xpos) + ', ' + (height - barHeight) / 2 + ')';
@@ -60,7 +54,7 @@ module.exports = function(data, g, width, height, options) {
6054
.attr('y', 0)
6155
.attr('x', 0)
6256
.attr('width', function(d) {
63-
return x(d.y);
57+
return x(d.value);
6458
})
6559
.attr('height', barHeight)
6660
.on('mouseover', tip.show)
@@ -72,7 +66,7 @@ module.exports = function(data, g, width, height, options) {
7266
.attr('dx', 10)
7367
.attr('text-anchor', 'start')
7468
.text(function(d) {
75-
return d.x;
69+
return d.label;
7670
})
7771
.attr('fill', 'white');
7872

scout-ui/src/minicharts/d3fns/many.js

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,30 @@ require('d3-tip')(d3);
77

88
module.exports = function(data, g, width, height, options) {
99

10+
// if legend present, save some space
11+
var legendWidth = 40;
12+
1013
options = _.defaults(options || {}, {
1114
bgbars: false,
1215
legend: false,
13-
labels: false // label options will be set further below
16+
labels: false // label defaults will be set further below
1417
});
1518

19+
if (options.legend) {
20+
width = width - legendWidth;
21+
}
22+
1623
var x = d3.scale.ordinal()
17-
.domain(_.pluck(data, 'x'))
24+
.domain(_.pluck(data, 'label'))
1825
.rangeBands([0, width], 0.3, 0.0);
1926

27+
var values = _.pluck(data, 'value');
28+
2029
var y = d3.scale.linear()
21-
.domain([0, d3.max(_.pluck(data, 'y'))])
30+
.domain([0, d3.max(values)])
2231
.range([height, 0]);
2332

24-
var sumY = d3.sum(_.pluck(data, 'y'));
33+
var sumY = d3.sum(values);
2534

2635
// set up tooltips
2736
var tip = d3.tip()
@@ -31,8 +40,8 @@ module.exports = function(data, g, width, height, options) {
3140
return d.tooltip(d, i);
3241
}
3342
return d.tooltip || tooltipHtml({
34-
label: d.x,
35-
value: d.y
43+
label: d.label,
44+
value: d.value
3645
});
3746
})
3847
.direction('n')
@@ -47,42 +56,56 @@ module.exports = function(data, g, width, height, options) {
4756
var maxVal = d3.max(y.domain());
4857
var format = d3.format('%.1f');
4958
var legendValues = [format(maxVal), format(maxVal / 2)];
50-
debug(legendValues);
5159

52-
g.append('text')
60+
// @todo use a scale and wrap both text and line in g element
61+
var legend = g.append('g')
62+
.attr('class', 'legend');
63+
64+
legend.append('text')
5365
.attr('class', 'legend')
5466
.attr('x', width)
67+
.attr('dx', '1em')
5568
.attr('y', 0)
56-
.attr('dy', '0.35em')
57-
.attr('text-anchor', 'end')
69+
.attr('dy', '0.3em')
70+
.attr('text-anchor', 'start')
5871
.text(d3.max(y.domain()) + '%');
5972

60-
g.append('text')
73+
legend.append('text')
6174
.attr('class', 'legend')
6275
.attr('x', width)
76+
.attr('dx', '1em')
6377
.attr('y', height / 2)
64-
.attr('dy', '0.35em')
65-
.attr('text-anchor', 'end')
78+
.attr('dy', '0.3em')
79+
.attr('text-anchor', 'start')
6680
.text(d3.max(y.domain()) / 2 + '%');
6781

68-
g.append('line')
69-
.attr('class', 'bg line')
82+
legend.append('text')
83+
.attr('class', 'legend')
84+
.attr('x', width)
85+
.attr('dx', '1em')
86+
.attr('y', height)
87+
.attr('dy', '0.3em')
88+
.attr('text-anchor', 'start')
89+
.text('0%');
90+
91+
legend.append('line')
92+
.attr('class', 'bg legend')
7093
.attr('x1', 0)
71-
.attr('x2', width)
94+
.attr('x2', width + 5)
7295
.attr('y1', 0)
7396
.attr('y2', 0);
7497

75-
g.append('line')
76-
.attr('class', 'bg line')
98+
legend.append('line')
99+
.attr('class', 'bg legend')
77100
.attr('x1', 0)
78-
.attr('x2', width)
101+
.attr('x2', width + 5)
79102
.attr('y1', height / 2)
80103
.attr('y2', height / 2);
81104

82-
g.append('line')
83-
.attr('class', 'bg line')
105+
legend.append('line')
106+
.attr('class', 'bg legend')
84107
.attr('x1', 0)
85-
.attr('x2', width)
108+
.attr('x2', width + 5)
86109
.attr('y1', height)
87110
.attr('y2', height);
88111
}
@@ -93,7 +116,7 @@ module.exports = function(data, g, width, height, options) {
93116
.enter().append('g')
94117
.attr('class', 'bar')
95118
.attr('transform', function(d) {
96-
return 'translate(' + x(d.x) + ', 0)';
119+
return 'translate(' + x(d.label) + ', 0)';
97120
});
98121

99122
if (options.bgbars) {
@@ -107,11 +130,11 @@ module.exports = function(data, g, width, height, options) {
107130
.attr('class', 'fg')
108131
.attr('x', 0)
109132
.attr('y', function(d) {
110-
return y(d.y);
133+
return y(d.value);
111134
})
112135
.attr('width', x.rangeBand())
113136
.attr('height', function(d) {
114-
return height - y(d.y);
137+
return height - y(d.value);
115138
});
116139

117140
if (options.bgbars) {
@@ -144,7 +167,7 @@ module.exports = function(data, g, width, height, options) {
144167
return 'middle';
145168
},
146169
'text': function(d) {
147-
return d.x;
170+
return d.value;
148171
}
149172
});
150173

scout-ui/src/minicharts/d3fns/number.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ module.exports = function(opts) {
4040
} else {
4141
label = d.x + '-' + (d.x + d.dx);
4242
}
43+
// remapping keys to conform with all other types
44+
d.value = d.y;
45+
d.label = label;
4346
d.tooltip = tooltipHtml({
4447
label: label,
4548
value: Math.round(d.y / sumY * 100)
@@ -58,8 +61,8 @@ module.exports = function(opts) {
5861
bgbars: false,
5962
labels: {
6063
text: function(d, i) {
61-
if (i === 0) return d3.min(values);
62-
if (i === data.length - 1) return d3.max(values);
64+
if (i === 0) return 'min: ' + d3.min(values);
65+
if (i === data.length - 1) return 'max: ' + d3.max(values);
6366
return '';
6467
}
6568
}

scout-ui/src/minicharts/d3fns/string.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,18 @@ module.exports = function(opts) {
1818
var height = opts.height - margin.top - margin.bottom;
1919
var el = opts.el;
2020

21-
// group into categories (x) and count (y) the values per bucket, sort descending
21+
// group into labels and values per bucket, sort descending
2222
var data = _(values)
2323
.groupBy(function(d) {
2424
return d;
2525
})
2626
.map(function(v, k) {
2727
return {
28-
x: k,
29-
y: v.length
28+
label: k,
29+
value: v.length
3030
};
3131
})
32-
.sortByOrder('y', [false]) // descending on y
32+
.sortByOrder('value', [false]) // descending on value
3333
.value();
3434

3535
// clear element first

0 commit comments

Comments
 (0)