aboutsummaryrefslogtreecommitdiffstats
path: root/interface/js/app/graph.js
diff options
context:
space:
mode:
Diffstat (limited to 'interface/js/app/graph.js')
-rw-r--r--interface/js/app/graph.js264
1 files changed, 105 insertions, 159 deletions
diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
index 54daf79c1..6bd83c72b 100644
--- a/interface/js/app/graph.js
+++ b/interface/js/app/graph.js
@@ -25,16 +25,15 @@
/* global d3:false, FooTable:false */
-define(["jquery", "d3evolution", "footable"],
- function ($, D3Evolution) {
+define(["jquery", "d3evolution", "d3pie", "footable"],
+ function ($, D3Evolution, D3Pie) {
"use strict";
var rrd_pie_config = {
- header: {},
+ cornerRadius: 2,
size: {
canvasWidth: 400,
canvasHeight: 180,
- pieInnerRadius: "20%",
pieOuterRadius: "80%"
},
labels: {
@@ -45,140 +44,118 @@ define(["jquery", "d3evolution", "footable"],
hideWhenLessThanPercentage: 8
},
},
- misc: {
- pieCenterOffset: {
- x: -120,
- y: 10,
- },
- gradient: {
- enabled: true,
- },
- },
- };
-
- var graph_options = {
- title: "Rspamd throughput",
- width: 1060,
- height: 370,
- yAxisLabel: "Message rate, msg/s",
-
- legend: {
- space: 140,
- entries: [{
- label: "reject",
- color: "#FF0000"
- }, {
- label: "soft reject",
- color: "#BF8040"
- }, {
- label: "rewrite subject",
- color: "#FF6600"
- }, {
- label: "add header",
- color: "#FFAD00"
- }, {
- label: "greylist",
- color: "#436EEE"
- }, {
- label: "no action",
- color: "#66CC00"
- }]
+ padAngle: 0.02,
+ pieCenterOffset: {
+ x: -120,
+ y: 10,
}
};
- function initGraph(rspamd) {
- var graph = new D3Evolution("graph", $.extend({}, graph_options, {
- yScale: rspamd.getSelector("selYScale"),
- type: rspamd.getSelector("selType"),
- interpolate: rspamd.getSelector("selInterpolate"),
- convert: rspamd.getSelector("selConvert"),
- }));
- $("#selYScale").change(function () {
- graph.yScale(this.value);
- });
- $("#selConvert").change(function () {
- graph.convert(this.value);
- });
- $("#selType").change(function () {
- graph.type(this.value);
- });
- $("#selInterpolate").change(function () {
- graph.interpolate(this.value);
- });
+ var ui = {};
+ var prevUnit = "msg/s";
- return graph;
- }
+ ui.draw = function (rspamd, graphs, tables, neighbours, checked_server, type) {
+ var graph_options = {
+ title: "Rspamd throughput",
+ width: 1060,
+ height: 370,
+ yAxisLabel: "Message rate, msg/s",
- function getRrdSummary(json, scaleFactor) {
- var xExtents = d3.extent(d3.merge(json), function (d) { return d.x; });
- var timeInterval = xExtents[1] - xExtents[0];
+ legend: {
+ space: 140,
+ entries: rspamd.chartLegend
+ }
+ };
- var total = 0;
- var rows = json.map(function (curr, i) {
- // Time intervals that don't have data are excluded from average calculation as d3.mean()ignores nulls
- var avg = d3.mean(curr, function (d) { return d.y; });
- // To find an integral on the whole time interval we need to convert nulls to zeroes
- var value = d3.mean(curr, function (d) { return Number(d.y); }) * timeInterval / scaleFactor ^ 0; // eslint-disable-line no-bitwise
- var yExtents = d3.extent(curr, function (d) { return d.y; });
+ function initGraph() {
+ var graph = new D3Evolution("graph", $.extend({}, graph_options, {
+ yScale: rspamd.getSelector("selYScale"),
+ type: rspamd.getSelector("selType"),
+ interpolate: rspamd.getSelector("selInterpolate"),
+ convert: rspamd.getSelector("selConvert"),
+ }));
+ $("#selYScale").change(function () {
+ graph.yScale(this.value);
+ });
+ $("#selConvert").change(function () {
+ graph.convert(this.value);
+ });
+ $("#selType").change(function () {
+ graph.type(this.value);
+ });
+ $("#selInterpolate").change(function () {
+ graph.interpolate(this.value);
+ });
- total += value;
- return {
- label: graph_options.legend.entries[i].label,
- value: value,
- min: Number(yExtents[0].toFixed(6)),
- avg: Number(avg.toFixed(6)),
- max: Number(yExtents[1].toFixed(6)),
- last: Number(curr[curr.length - 1].y.toFixed(6)),
- color: graph_options.legend.entries[i].color,
- };
- }, []);
+ return graph;
+ }
- return {
- rows: rows,
- total: total
- };
- }
+ function getRrdSummary(json, scaleFactor) {
+ var xExtents = d3.extent(d3.merge(json), function (d) { return d.x; });
+ var timeInterval = xExtents[1] - xExtents[0];
- function initSummaryTable(tables, rows, unit) {
- tables.rrd_summary = FooTable.init("#rrd-table", {
- sorting: {
- enabled: true
- },
- columns: [
- {name:"label", title:"Action"},
- {name:"value", title:"Messages", defaultContent:""},
- {name:"min", title:"Minimum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
- {name:"avg", title:"Average, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
- {name:"max", title:"Maximum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
- {name:"last", title:"Last, " + unit},
- ],
- rows: rows.map(function (curr, i) {
+ var total = 0;
+ var rows = json.map(function (curr, i) {
+ // Time intervals that don't have data are excluded from average calculation as d3.mean()ignores nulls
+ var avg = d3.mean(curr, function (d) { return d.y; });
+ // To find an integral on the whole time interval we need to convert nulls to zeroes
+ var value = d3.mean(curr, function (d) { return Number(d.y); }) * timeInterval / scaleFactor ^ 0; // eslint-disable-line no-bitwise
+ var yExtents = d3.extent(curr, function (d) { return d.y; });
+
+ total += value;
return {
- options: {
- style: {
- color: graph_options.legend.entries[i].color
- }
- },
- value: curr
+ label: graph_options.legend.entries[i].label,
+ value: value,
+ min: Number(yExtents[0].toFixed(6)),
+ avg: Number(avg.toFixed(6)),
+ max: Number(yExtents[1].toFixed(6)),
+ last: Number(curr[curr.length - 1].y.toFixed(6)),
+ color: graph_options.legend.entries[i].color,
};
- }, [])
- });
- }
+ }, []);
- function drawRrdTable(tables, rows, unit) {
- if (Object.prototype.hasOwnProperty.call(tables, "rrd_summary")) {
- $.each(tables.rrd_summary.rows.all, function (i, row) {
- row.val(rows[i], false, true);
+ return {
+ rows: rows,
+ total: total
+ };
+ }
+
+ function initSummaryTable(rows, unit) {
+ tables.rrd_summary = FooTable.init("#rrd-table", {
+ sorting: {
+ enabled: true
+ },
+ columns: [
+ {name:"label", title:"Action"},
+ {name:"value", title:"Messages", defaultContent:""},
+ {name:"min", title:"Minimum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
+ {name:"avg", title:"Average, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
+ {name:"max", title:"Maximum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
+ {name:"last", title:"Last, " + unit},
+ ],
+ rows: rows.map(function (curr, i) {
+ return {
+ options: {
+ style: {
+ color: graph_options.legend.entries[i].color
+ }
+ },
+ value: curr
+ };
+ }, [])
});
- } else {
- initSummaryTable(tables, rows, unit);
}
- }
- var ui = {};
- var prevUnit = "msg/s";
+ function drawRrdTable(rows, unit) {
+ if (Object.prototype.hasOwnProperty.call(tables, "rrd_summary")) {
+ $.each(tables.rrd_summary.rows.all, function (i, row) {
+ row.val(rows[i], false, true);
+ });
+ } else {
+ initSummaryTable(rows, unit);
+ }
+ }
- ui.draw = function (rspamd, graphs, tables, neighbours, checked_server, type) {
function updateWidgets(data) {
var rrd_summary = {rows:[]};
var unit = "msg/s";
@@ -200,39 +177,8 @@ define(["jquery", "d3evolution", "footable"],
rrd_summary = getRrdSummary(data, scaleFactor);
}
- if (graphs.rrd_pie) {
- graphs.rrd_pie.destroy();
- delete graphs.rrd_pie;
- }
- if (rrd_summary.total) {
- graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
- "rrd-pie",
- rrd_summary.rows,
- rrd_pie_config);
- } else {
- // Show grayed out pie as percentage is undefined
- graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
- "rrd-pie",
- [{
- value: 1,
- color: "#FFFFFF",
- }],
- $.extend({}, rrd_pie_config, {
- labels: {
- outer: {
- format: "none"
- },
- inner: {
- format: "none"
- },
- },
- tooltips: {
- enabled: true,
- string: "Undefined"
- },
- })
- );
- }
+ if (!graphs.rrd_pie) graphs.rrd_pie = new D3Pie("rrd-pie", rrd_pie_config);
+ graphs.rrd_pie.data(rrd_summary.rows);
graphs.graph.data(data);
if (unit !== prevUnit) {
@@ -240,12 +186,12 @@ define(["jquery", "d3evolution", "footable"],
$(".unit").text(unit);
prevUnit = unit;
}
- drawRrdTable(tables, rrd_summary.rows, unit);
+ drawRrdTable(rrd_summary.rows, unit);
document.getElementById("rrd-total-value").innerHTML = rrd_summary.total;
}
if (!graphs.graph) {
- graphs.graph = initGraph(rspamd);
+ graphs.graph = initGraph();
}
rspamd.query("graph", {
@@ -295,11 +241,11 @@ define(["jquery", "d3evolution", "footable"],
ui.setup = function (rspamd) {
// Handling mouse events on overlapping elements
$("#rrd-pie").mouseover(function () {
- $("#rrd-pie").css("z-index", "200");
+ $("#rrd-pie,#rrd-pie-tooltip").css("z-index", "200");
$("#rrd-table_toggle").css("z-index", "300");
});
$("#rrd-table_toggle").mouseover(function () {
- $("#rrd-pie").css("z-index", "0");
+ $("#rrd-pie,#rrd-pie-tooltip").css("z-index", "0");
$("#rrd-table_toggle").css("z-index", "0");
});
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-24 05:48:49 +0000