opendev/dstat_graph
Code Issues Proposed changes

Draft for compact mode

Browse Source
This commit is contained in:
Damien Gasparina 2016-01-24 12:50:20 +00:00
parent 2f5e250f8d
commit 73b8c6113c
2 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/style.css
View File

@ -59,10 +59,6 @@ html,body {
background-color: #ABC2EF;
}
#dashboard svg {
height: 200px;
}
body {
background-color: black;
}
@ -102,6 +98,22 @@ body {
border: 1px solid #60668C;
}
.list-group-item-compact {
width: 600px;
float: left;
}
.list-group-item-compact svg {
height: 50px !important;
}
.panel-left {
float: left;
}
.panel-clear {
clear: both;
}
.list-body {
margin-right: 10px;
margin-left: -30px;
@ -123,6 +135,7 @@ body {
background: rgba(0,0,0,0.8);
z-index: 99999;
}
#drop {
padding: 20px;
font-size: 21px;
@ -139,3 +152,8 @@ body {
background-color: white;
overflow: hidden;
}
.list-body svg {
height: 200px;
}

57
js/dashboard.js
View File

@ -39,6 +39,15 @@ $(document).on('drop', function (e) {
});
/*
* Settings functions
*/
var settings = { "compact": false }
applySettings(settings)
function applySettings(settings) {
}
/*
* CSV Processing functions
@ -225,7 +234,7 @@ function processCSV(csv, filename) {
graphName = graphs[gindex].name;
graphData = graphs[gindex].d;
graphFormat = graphs[gindex].yformat;
panel = createPanel(graphName, graphData, host)
panel = createPanel(graphName, graphData, filename)
displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax);
}
}
@ -237,19 +246,34 @@ function processCSV(csv, filename) {
*/
function createPanel(graphName, graphData, filename) {
id = graphName.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g,'_');
data = reduceData(graphData)
div = d3.select('#' + id);
if (div.empty()) {
div = d3.select('#dashboard').append('div').attr('class', ' list-group-item').attr('id', id);
header = div.append('div').attr('class', 'panel-heading').append('h3').attr('class', 'panel-title');
header.append('span').text(graphName);
header.append('span').attr('class', 'glyphicon glyphicon-chevron-right pull-right clickable');
if (! settings.compact) {
if (div.empty()) {
div = d3.select('#dashboard').append('div').attr('class', ' list-group-item').attr('id', id);
header = div.append('div').attr('class', 'panel-heading').append('h3').attr('class', 'panel-title');
header.append('span').text(graphName);
header.append('span').attr('class', 'glyphicon glyphicon-chevron-right pull-right clickable');
}
elt = div.append('div').attr('class', 'row list-body');
elt.append('p').text(filename)
elt.append('svg').datum(reduceData(graphData));
} else if (settings.compact) {
if (div.empty()) {
div = d3.select('#dashboard').append('div').attr('class', 'list-group-item-compact').attr('id', id);
header = d3.select('#dashboard').append('div').attr('class', 'panel-left')
d3.select('#dashboard').append('div').attr('class', 'panel-clear')
header.append('p').attr('class', 'panel-left').text(graphName)
colors = nv.utils.getColor()
for (i in graphData) {
header.append('p').attr('class', 'panel-left').text(graphData[i].key).style({color: colors(i), 'margin-left': '15px'});
}
}
elt = div.append('div').attr('class', 'row list-body');
elt.append('svg').datum(data);
}
elt = div.append('div').attr('class', 'row list-body');
elt.append('p').text(filename)
elt.append('svg').datum(reduceData(graphData));
return div;
}
@ -282,11 +306,13 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
if (options.type == 'stacked') {
var chart = nv.models.stackedAreaChart()
.margin({left: 100})
.useInteractiveGuideline(true)
.showLegend(true)
.useInteractiveGuideline(! settings.compact)
.showLegend(! settings.compact)
.style('expand')
.interpolate("basis")
.showControls(false)
.showXAxis(! settings.compact)
.showYAxis(! settings.compact)
;
} else if (options.type == 'pie') {
var chart = nv.models.bulletChart()
@ -295,12 +321,15 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) {
} else {
var chart = nv.models.lineChart()
.margin({left: 100})
.useInteractiveGuideline(true)
.useInteractiveGuideline(! settings.compact)
.interpolate("basis")
.showLegend(true)
.showLegend(! settings.compact)
.showXAxis(! settings.compact)
.showYAxis(! settings.compact)
;
}
graphs.xAxis(chart.xAxis);
if (typeof window[graphFu] == "function") {