Anton Shestakov <av6@dwimlabs.net>, Tue, 28 Nov 2017 13:45:40 +0800
viewer: sort codes (count DESC, name ASC), and do it right
static/candolint.js
Permissions: -rw-r--r--
var humanizeTimestamps = function() { $('time[datetime]').each(function() { $this.text(moment($this.attr('datetime')).fromNow()); window.setInterval(humanizeTimestamps, 15 * 1000); $('.check-log div.task').each(function() { var task = $line.attr('data-task'); var $lines = $line.nextAll('[data-task="' + task + '"]'); if ($lines.length === 0) { return; } var $collapser = $('<a>').addClass('collapser'); $line.append($collapser); var toggle = function() { var collapsed = $collapser.hasClass('collapsed'); $lines.toggleClass('uk-hidden', collapsed); $collapser.on('click', function() { $collapser.toggleClass('collapsed'); var important = '.error, .warning, .failure, :target'; if (task !== 'checks' && $lines.filter(important).length === 0) { $collapser.addClass('collapsed'); if ($('#check-chart-data, #check-chart').length !== 2) { return; } var data = JSON.parse($('#check-chart-data').text()); var $container = $('.chart-container'); var $tooltip = $container.find('.chart-tooltip'); var svg = d3.select('#check-chart'); var margin = {top: 10, right: 45, bottom: 30, left: 45}; var maxE = d3.max(data.points, function(d) { return d.errors; }); var maxW = d3.max(data.points, function(d) { return d.warnings; }); var maxD = d3.max(data.points, function(d) { return d.duration; }); var x = d3.scalePoint().domain(data.points.map(function(d) { return d.ordinal; })); var y1 = d3.scaleLinear().domain([0, Math.max(maxE, maxW)]); var y2 = d3.scaleLinear().domain([0, maxD]); var formatDuration = function(d) { return moment.utc(d, 'X').format('m:ss'); {name: 'duration', color: '#00a8e6', scale: y2, format: formatDuration}, {name: 'warnings', color: '#faa732', scale: y1}, {name: 'errors', color: '#da314b', scale: y1} $.each(config, function(i, series) { $tooltip.find('[data-dot="' + series.name + '"]').css('background', series.color); var render = function() { svg.attr('width', $container.width()); svg.attr('height', $container.height()); var width = +svg.attr('width') - margin.left - margin.right; var height = +svg.attr('height') - margin.top - margin.bottom; .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); .attr('shape-rendering', 'crispEdges'); x.rangeRound([0, width]); y1.rangeRound([height, 0]); y2.rangeRound([height, 0]); var cx = x(data.current) + 0.5; .attr('stroke-dasharray', '5,2') var hover = cg.append('line') .attr('transform', 'translate(0,' + (height + padding) + ')') .attr('transform', 'translate(' + (-padding) + ',0)') .call(d3.axisLeft(y1).ticks(5)); .attr('transform', 'translate(' + (width + padding) + ',0)') .call(d3.axisRight(y2).ticks(5).tickFormat(formatDuration)); $.each(config, function(i, series) { .attr('fill', series.color) .attr('stroke-width', 2); .defined(function(d) { return d[series.name] !== null; }) .x(function(d) { return x(d.ordinal) + 0.5; }) .y(function(d) { return series.scale(d[series.name]); }); .attr('stroke', series.color) .filter(function(d) { return d[series.name] !== null; }) .attr('cx', function(d) { return x(d.ordinal) + 0.5; }) .attr('cy', function(d) { return series.scale(d[series.name]); }); .attr('href', function(d) { return data.projectURL + '/' + d.ordinal; }) .attr('x', function(d) { return x(d.ordinal) - rectW / 2 + 0.5; }) .attr('height', height + margin.top + margin.bottom) .on('mousemove', function(d) { $tooltip.removeClass('uk-hidden').css({ left: x(d.ordinal) + margin.left + 10, top: d3.event.layerY + 10 .on('mouseover', function(d) { var hx = x(d.ordinal) + 0.5; hover.attr('opacity', 1).attr('x1', hx).attr('x2', hx); $.each(config, function(i, series) { var value = d[series.name]; var text = series.format ? series.format(value) : value; $tooltip.find('[data-point="' + series.name + '"]').text(text); .on('mouseout', function(d) { hover.attr('opacity', 0); $tooltip.addClass('uk-hidden'); $(window).on('resize', function() { if (+svg.attr('width') !== $container.width()) { svg.selectAll('*').remove(); if ($('#check-files-data, #check-codes-data').length === 0) { return; } if ($('#check-files-pie, #check-codes-pie').length === 0) { return; } var $tooltip = $('.pie-tooltip'); .value(function(d) { return d.count; }); var render = function(title, svg, $data, formatTooltip) { if ($data.length === 0) { return; } var data = JSON.parse($data.text()); var width = +svg.attr('width'); var height = +svg.attr('height'); var radius = Math.min(width, height) / 2; var thickness = radius / 3.5; .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .innerRadius(radius - thickness); .outerRadius(radius - thickness) .innerRadius(radius - thickness * 2); if (data.errors.length === 0) { .innerRadius(radius - thickness * 2); {name: 'warnings', color: '#faa732', arc: innerArc}, {name: 'errors', color: '#da314b', arc: outerArc} $.each(config, function(i, series) { .attr('fill', series.color) .attr('stroke', 'white'); .data(pie(data[series.name])) .attr('href', function(d) { return '#l' + d.data.line; }) .on('mousemove', function(d) { $tooltip.removeClass('uk-hidden').css({ left: d3.event.layerX + 10, top: d3.event.layerY + 10 .on('mouseover', function(d) { $tooltip.text(formatTooltip(d)); .on('mouseout', function(d) { $tooltip.addClass('uk-hidden'); render('files', d3.select('#check-files-pie'), $('#check-files-data'), function(d) { return d.data.filename + ': ' + d.data.count; render('codes', d3.select('#check-codes-pie'), $('#check-codes-data'), function(d) { return d.data.code + ': ' + d.data.count;