diff --git a/css/style.css b/css/style.css index ce40d9a..b1a605b 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} + diff --git a/js/dashboard.js b/js/dashboard.js index d50d661..fe1dba3 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -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") {