From: IkiWiki Date: Wed, 9 Sep 2026 14:44:20 +0000 (+0200) Subject: Les graphs sont maintenant groupés par noms! X-Git-Url: https://www.nos-oignons.net/gitweb/website.git/commitdiff_plain/50cd0d282feac1e57750fbb841921298d0ae879a Les graphs sont maintenant groupés par noms! --- diff --git a/assets/bw_graphs.js b/assets/bw_graphs.js index ee0eb37..8091271 100644 --- a/assets/bw_graphs.js +++ b/assets/bw_graphs.js @@ -57,8 +57,8 @@ BwDrawer.extract_values = function(history, interval, minTime, maxTime) { } BwDrawer.color = d3.scale.ordinal(); -BwDrawer.color.domain(nos_oignons_relays.map(function(r) {return r.fingerprint})); -BwDrawer.color.range(nos_oignons_relays.map(function(r) {return r.color})); +BwDrawer.color.domain(nos_oignons_groups.map(function(g) {return g.name})); +BwDrawer.color.range(nos_oignons_groups.map(function(g) {return g.color})); BwDrawer.draw_bandwidth_graph = function(raw_data, selector, period) { // Purge non running relays @@ -97,6 +97,8 @@ BwDrawer.draw_bandwidth_graph = function(raw_data, selector, period) { } }); + var relayIndex = buildRelayIndex(raw_data.relays); + var bw_data = {}; BwDrawer.periods.map(function(p) { return p.id; }).forEach(function(period) { var interval = d3.max(raw_data.relays, function(d) { @@ -120,20 +122,19 @@ BwDrawer.draw_bandwidth_graph = function(raw_data, selector, period) { var maxReadBandwidth = 0; var maxWriteBandwidth = 0; - var values = BwDrawer.color.domain().map(function(fingerprint) { - var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == fingerprint; })[0]; - var read_history = relay_data['read_history'][period]; - var write_history = relay_data['write_history'][period]; - var read_values = BwDrawer.extract_values(read_history, interval, minTime, maxTime); - var write_values = BwDrawer.extract_values(write_history, interval, minTime, maxTime); - - maxReadBandwidth = maxReadBandwidth + d3.max(read_values, function(d) { return d.y; }); - maxWriteBandwidth = maxWriteBandwidth + d3.max(write_values, function(d) { return d.y; }); - + var values = nos_oignons_groups.map(function(group) { + var group_read = sumGroupRelayValues(group, relayIndex, function(r) { + return BwDrawer.extract_values(r['read_history'][period], interval, minTime, maxTime); + }); + var group_write = sumGroupRelayValues(group, relayIndex, function(r) { + return BwDrawer.extract_values(r['write_history'][period], interval, minTime, maxTime); + }); + maxReadBandwidth += (d3.max(group_read, function(d) { return d.y; }) || 0); + maxWriteBandwidth += (d3.max(group_write, function(d) { return d.y; }) || 0); return { - fingerprint: fingerprint, - read_values: read_values, - write_values: write_values.map(function(d) { d.y = -d.y; return d }) + group: group.name, + read_values: group_read, + write_values: group_write.map(function(d) { d.y = -d.y; return d }) }; }); bw_data[period] = { minTime: minTime, @@ -155,14 +156,14 @@ BwDrawer.draw_bandwidth_graph = function(raw_data, selector, period) { .enter().append("path") .attr("class", "read_graph area") .attr("d", function(d) { return BwDrawer.area(d.read_values); }) - .style("fill", function(d) { return BwDrawer.color(d.fingerprint); }); + .style("fill", function(d) { return BwDrawer.color(d.group); }); var write_graph = svg.selectAll(".write_graph") .data(BwDrawer.write_stack(bw_data[initial_period].values)) .enter().append("path") .attr("class", "write_graph area") .attr("d", function(d) { return BwDrawer.area(d.write_values); }) - .style("fill", function(d) { return BwDrawer.color(d.fingerprint); }); + .style("fill", function(d) { return BwDrawer.color(d.group); }); update_period = function(period) { BwDrawer.x.domain([bw_data[period].minTime, bw_data[period].maxTime]); @@ -205,8 +206,7 @@ BwDrawer.draw_bandwidth_graph = function(raw_data, selector, period) { .style("padding-top", BwDrawer.margin.top + "px") .style("box-sizing", "border-box"); - BwDrawer.color.domain().slice().reverse().forEach(function(d) { - var name = nos_oignons_relays.filter(function(r) { return r.fingerprint == d; })[0].name; + BwDrawer.color.domain().slice().reverse().forEach(function(name) { var item = legendDiv.append("div") .style("display", "flex") .style("align-items", "center") @@ -217,7 +217,7 @@ BwDrawer.draw_bandwidth_graph = function(raw_data, selector, period) { .style("width", "14px") .style("min-width", "14px") .style("height", "14px") - .style("background-color", BwDrawer.color(d)) + .style("background-color", BwDrawer.color(name)) .style("margin-right", "5px"); item.append("span") .style("font-size", "11px") diff --git a/assets/relays.js b/assets/relays.js index 2253031..2ce5ba1 100644 --- a/assets/relays.js +++ b/assets/relays.js @@ -175,3 +175,46 @@ var nos_oignons_relays = [ color: randomColor(), } ]; + +var nos_oignons_group_colors = [ + "#DB4782", "#DAA03B", "#62A4B7", "#A58585", + "#9DCEB8", "#8077DE", "#DE5C48" +]; + +var nos_oignons_groups = (function() { + var groups = []; + var seen = {}; + nos_oignons_relays.forEach(function(r) { + var name = r.name.replace(/\d+$/, ''); + if (!seen[name]) { + seen[name] = { name: name, fingerprints: [] }; + groups.push(seen[name]); + } + seen[name].fingerprints.push(r.fingerprint); + }); + groups.forEach(function(g, i) { + g.color = nos_oignons_group_colors[i % nos_oignons_group_colors.length]; + }); + return groups; +})(); + +function buildRelayIndex(raw_relays) { + var index = {}; + raw_relays.forEach(function(r) { index[r.fingerprint] = r; }); + return index; +} + +function sumGroupRelayValues(group, relayIndex, extractFn) { + var result = null; + group.fingerprints.forEach(function(fp) { + var relay = relayIndex[fp]; + if (!relay) return; + var values = extractFn(relay); + if (!result) { + result = values.map(function(d) { return { date: d.date, y: d.y }; }); + } else { + values.forEach(function(d, i) { result[i].y += d.y; }); + } + }); + return result || []; +} diff --git a/assets/weights_graphs.js b/assets/weights_graphs.js index 8a30862..af18990 100644 --- a/assets/weights_graphs.js +++ b/assets/weights_graphs.js @@ -69,8 +69,8 @@ WeightsDrawer.extract_values = function(history, interval, minTime, maxTime) { } WeightsDrawer.color = d3.scale.ordinal(); -WeightsDrawer.color.domain(nos_oignons_relays.map(function(r) {return r.fingerprint})); -WeightsDrawer.color.range(nos_oignons_relays.map(function(r) {return r.color})); +WeightsDrawer.color.domain(nos_oignons_groups.map(function(g) {return g.name})); +WeightsDrawer.color.range(nos_oignons_groups.map(function(g) {return g.color})); WeightsDrawer.prototype.draw_weights_graph = function(raw_data) { var drawer = this; @@ -128,6 +128,8 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) { } }); + var relayIndex = buildRelayIndex(raw_data.relays); + WeightsDrawer.sources.map(function(s) { return s.id; }).forEach(function(source) { drawer.weights_data[source] = {}; WeightsDrawer.periods.map(function(p) { return p.id; }).forEach(function(period) { @@ -148,17 +150,12 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) { var maxValue = 0; - var relays = WeightsDrawer.color.domain().map(function(fingerprint) { - var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == fingerprint; })[0]; - - var history = relay_data[source][period]; - var values = WeightsDrawer.extract_values(history, interval, minTime, maxTime); - maxValue = maxValue + d3.max(values, function(d) { return d.y; }); - - return { - fingerprint: fingerprint, - values: values, - }; + var relays = nos_oignons_groups.map(function(group) { + var group_values = sumGroupRelayValues(group, relayIndex, function(r) { + return WeightsDrawer.extract_values(r[source][period], interval, minTime, maxTime); + }); + maxValue += (d3.max(group_values, function(d) { return d.y; }) || 0); + return { group: group.name, values: group_values }; }); drawer.weights_data[source][period] = { minTime: minTime, @@ -178,7 +175,7 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) { .enter().append("path") .attr("class", "weight_graph area") .attr("d", function(d) { return WeightsDrawer.area(d.values); }) - .style("fill", function(d) { return WeightsDrawer.color(d.fingerprint); }); + .style("fill", function(d) { return WeightsDrawer.color(d.group); }); drawer.svg.append("g") .attr("class", "x axis") @@ -200,8 +197,7 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) { .style("padding-top", WeightsDrawer.margin.top + "px") .style("box-sizing", "border-box"); - WeightsDrawer.color.domain().slice().reverse().forEach(function(d) { - var name = nos_oignons_relays.filter(function(r) { return r.fingerprint == d; })[0].name; + WeightsDrawer.color.domain().slice().reverse().forEach(function(name) { var item = legendDiv.append("div") .style("display", "flex") .style("align-items", "center") @@ -212,7 +208,7 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) { .style("width", "14px") .style("min-width", "14px") .style("height", "14px") - .style("background-color", WeightsDrawer.color(d)) + .style("background-color", WeightsDrawer.color(name)) .style("margin-right", "5px"); item.append("span") .style("font-size", "11px")