opendev/dstat_graph
Code Issues Proposed changes

Added graph specifics behavior per metric

Browse Source
This commit is contained in:
Damien Gasparina 2015-08-26 11:36:46 -04:00
parent 7f7a2d8a0c
commit 8cf799dceb
3 changed files with 89 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -9,6 +9,7 @@
<script src="js/d3.min.js" type="text/javascript"></script>
<script src="js/nv.d3.js" type="text/javascript"></script>
<script src="js/dashboard.js" type="text/javascript"></script>
<script src="js/graph.js" type="text/javascript"></script>
<div id="main">
<div class="page-header" id="header">

33
js/dashboard.js
View File

@ -24,12 +24,12 @@ var x = d3.time.scale().range([0, width]),
$(document).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$('#drop').css('border', '4px dashed #fff')
$('#drop').css('border', '4px solid #fff')
});
$(document).on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
$('#drop').css('border', '4px dashed red')
$('#drop').css('border', '4px solid red')
});
$(document).on('drop', function (e) {
e.stopPropagation();
@ -124,6 +124,23 @@ function processCSV(csv, filename) {
}
}
/* Apply specificities to data */
for (i in graphs) {
name = graphs[i].name;
name = name.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
sfname = name + "_data";
gdfunction = undefined;
if (typeof window[sfname] == "function") {
gdfunction = window[sfname];
}
for (j in graphs[i].d) {
if (gdfunction !== undefined) {
graphs[i].d[j].values = gdfunction(graphs[i].d[j].values);
}
}
}
/* Create the brush */
dmin = graphs[1].d[1].values[0].x;
dmax = graphs[1].d[0].values[graphs[1].d[0].values.length -1].x;
@ -171,6 +188,9 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
var elt = d3.select(this);
nv.addGraph(function() {
graphId = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
graphFu = graphId + '_graph';
var chart = nv.models.lineChart()
.margin({left: 100})
.useInteractiveGuideline(true)
@ -178,10 +198,10 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
;
graphs.xAxis(chart.xAxis);
chart.yAxis.tickFormat(graphFormat);
elt.call(chart);
nv.utils.windowResize(chart.update);
if (typeof window[graphFu] == "function") {
window[graphFu](chart);
}
pb = d3.select(elt[0][0].parentNode.parentNode).select('.clickable').on("click", function() {
pb = d3.select(this.parentNode.parentNode.parentNode).selectAll('.list-body');
@ -190,6 +210,9 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
chart.update()
});
elt.call(chart);
nv.utils.windowResize(chart.update);
return chart;
}, function(chart) {
if (gGraphs[graphName] == undefined) gGraphs[graphName] = [];

60
js/graph.js Normal file
View File

@ -0,0 +1,60 @@
/*
* Disk
*/
function dsk_total_data(data) {
for (idata in data) {
ldata = data[idata];
/* Byte to MB */
data[idata].y = Math.round((data[idata].y / (1024 * 1024 * 1024) * 100 )) / 100;
}
return data;
}
function dsk_total_graph(graph) {
graph.yAxis.axisLabel('Trafic (MB)').tickFormat(function(d) { return d3.format('.2f')(d); });
}
/*
* CPU
*/
function total_cpu_usage_graph(graph) {
graph.yAxis.axisLabel('%');
}
/*
* Network
*/
function net_total_data(data) {
for (idata in data) {
ldata = data[idata];
/* Byte to MB */
data[idata].y = Math.round((data[idata].y / (1024 * 1024) * 100 )) / 100;
}
return data;
}
function net_total_graph(graph) {
graph.yAxis.axisLabel('Trafic (MB)').tickFormat(function(d) { return d3.format('.2f')(d); });
}
/*
* MongoDB
*/
function mongodb_stats_graph(graph) {
graph.yAxis.axisLabel('Size (MB)').tickFormat(function(d) { return d3.format('d.0')(d); });
}
function mongodb_con_graph(graph) {
graph.yAxis.axisLabel('Connection').tickFormat(function(d) { return d3.format('d.0')(d); });
}
function mongodb_mem_graph(graph) {
graph.yAxis.axisLabel('Size (MB)').tickFormat(function(d) { return d3.format('d.0')(d); });
}