[frontend] Switch to checkboxes for the legend in the performance graph
// Add Legend
- var legend = svg.append('g')
- .attr('class', 'context')
- .attr('transform', 'translate(' + legendMargin.left + ',' + legendMargin.top + ')');
-
- var nextSeriesX = 5;
-
- graphs.forEach(function (graph) {
- var legendSerie = legend.append('g')
- .on('click', function (d, j) {
- graph.toggle();
+ var legendSerie = legendGroup.selectAll('.legend-serie')
+ .data(graphs)
+ .enter()
+ .append('g')
+ .attr('class', 'legend-serie')
+ .on('click', function (d) {
+ d.toggle();
+ d3.select(this).select('rect').attr('fill', function (d) {
+ return d.enabled() ? d.color : '#FFF'
+ });
+ d3.select(this).select('path').attr('display', function (d) {
+ return d.enabled() ? null : 'none'
+ });
updateAxesLabels();
});
- legendSerie.append('circle')
- .attr('class', 'legend-radio-' + graph.id)
- .attr('fill-opacity', graph.enabled() ? 1 : 0.2)
- .style('fill', function (d, j) {
- return graph.color
+ legendSerie.append('rect')
+ .attr('class', 'legend-radio')
+ .attr('fill', function (d) {
+ return d.enabled() ? d.color : '#FFF'
})
- .style('stroke', function (d, j) {
- return graph.color
+ .attr('stroke', function (d) {
+ return d.color
})
- .attr('r', 5);
-
- legendSerie.append('text')
- .text(graph.label)
+ .attr('stroke-width', 2)
+ .attr('rx', 2)
+ .attr('ry', 2)
+ .attr('width', 12)
+ .attr('height', 12)
+ .attr('transform', 'translate(-8, -6)');
+
+ legendSerie.append('path')
+ .attr('d', 'M-6,-1, -2,3, 2,-4')
+ .attr('fill', 'none')
+ .attr('stroke', function (d, j) { return j === 0 || j === 2 ? '#000' : '#FFF' })
+ .attr('display', function (d) { return d.enabled() ? null : 'none' })
+ .attr('stroke-width', 2);
+
+ legendSerie.append('text', 'rect')
+ .text(function (d) { return d.label })
.attr('text-anchor', 'start')
.attr('dy', '.32em')
.attr('dx', '8');
+ legendSerie.append('line');
+
+ var knownLengths = [];
+
legendSerie.attr('transform', function (d, j) {
- var length = d3.select(this).select('text').node().getComputedTextLength() + 28;
- var xPos = nextSeriesX;
- nextSeriesX += length;
- return 'translate(' + xPos + ',' + 5 + ')'
- });
+ knownLengths[j] = d3.select(this).select('text').node().getComputedTextLength() + 28;
+ var x = 5;
+ for (var i = 0; i < j; i++) {
+ x += knownLengths[i]
+ }
+ return 'translate(' + x + ', 5)'
});
// Fetch and append data at set interval
