From 7f7a2d8a0cc501189f43822eff7ad79947eeb22b Mon Sep 17 00:00:00 2001 From: Damien Gasparina Date: Tue, 25 Aug 2015 14:39:41 -0400 Subject: [PATCH] Added sequence XAxis if time column is not provided --- css/style.css | 2 +- js/dashboard.js | 72 ++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index fbb5e7d..ce40d9a 100644 --- a/css/style.css +++ b/css/style.css @@ -130,7 +130,7 @@ body { width: 330px; font-weight: bold; line-height: 1.3em; - border: 4px solid #444444; + border: 4px solid black; border-radius: 50px; text-shadow: -1px -1px #eeeeee; font-weight: normal; diff --git a/js/dashboard.js b/js/dashboard.js index 124d6e4..e9251f8 100644 --- a/js/dashboard.js +++ b/js/dashboard.js @@ -1,3 +1,8 @@ + +/* + * Global variables + */ + gGraphs = {}; var brush = d3.svg.brush() @@ -11,6 +16,11 @@ var x = d3.time.scale().range([0, width]), y = d3.scale.linear().range([height, 0]); +/* + * DOM functions + */ + + $(document).on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); @@ -29,6 +39,10 @@ $(document).on('drop', function (e) { }); +/* + * Processing functions + */ + function processFiles(files) { for (f = 0; file = files[f]; f++) { processFile(file); @@ -47,15 +61,16 @@ function processFile(file) { function processCSV(csv, filename) { lines = csv.split('\n'); - line2 = lines[2].replace(/"/g, '').split(','); + host = lines[2].replace(/"/g, '').split(',')[1]; groups = lines[4].replace(/"/g, '').split(','); headers = lines[5].replace(/"/g, '').split(','); - host = line2[1]; graphs = []; map = []; gindex = -1; + nlines = lines.length - 6; + /* Browse headers */ for (i = 0, j = 0; i < headers.length; i++, j++) { if (groups[i] != "") { last_group = groups[i]; @@ -68,18 +83,33 @@ function processCSV(csv, filename) { map[i] = {group: gindex, index: j, name: headers[i]}; } - for (lindex = 6; lindex < lines.length; lindex++) { + xValues = getValues(graphs, 'system', 'time'); + /* Use time for XAxis */ + if (xValues !== null) { + graphs.xAxis = function (xa) { xa.axisLabel('Time').tickFormat(function(d) { return d3.time.format('%Hh %Mm %Ss')(new Date(d)); }) }; + for (lindex = 6, iindex = 0; lindex < lines.length; lindex++, iindex++) { + line = lines[lindex].replace(/"/g, '').split(','); + for (cindex = 0; cindex < line.length; cindex++) { + lmap = map[cindex]; + if (lmap.name === 'time') { + xValues.push(Date.parse(line[cindex].replace(/(\d+)-(\d+)\s+(\d+):(\d+):(\d+)/, '1942/$2/$1 $3:$4:$5'))); + break; + } + } + } /* Use sequence for xAxis */ + } else { + xValues = Array.apply(null, Array(nlines)).map(function (_, i) {return i;}); + graphs.xAxis = function (xa) { xa.axisLabel('').tickFormat(function(d) { return d3.format('d')(new Date(d)); }) }; + } + + /* Populate graph data */ + for (lindex = 6, iindex = 0; lindex < lines.length; lindex++, iindex++) { line = lines[lindex].replace(/"/g, '').split(','); for (cindex = 0; cindex < line.length; cindex++) { lmap = map[cindex]; - if (lmap.name == 'time') { - timeStr = line[cindex]; - timeStr = timeStr.replace(/(\d+)-(\d+)\s+(\d+):(\d+):(\d+)/, '1942/$2/$1 $3:$4:$5') - time = Date.parse(timeStr); - } - else { + if (lmap.name != 'time') { nVal = parseFloat(line[cindex]); - + /* non numerical line */ if (isNaN(nVal)) { val = line[cindex] graphs[lmap.group].yformat = function(_) {return _}; @@ -89,11 +119,12 @@ function processCSV(csv, filename) { graphs[lmap.group].yformat = d3.format('<-,02f'); } - graphs[lmap.group].d[lmap.index].values.push({y: val, x: time}); + graphs[lmap.group].d[lmap.index].values.push({y: val, x: xValues[iindex]}); } } } + /* 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; if (lines.length > 500) { @@ -102,6 +133,7 @@ function processCSV(csv, filename) { displayFocusGraph(graphs, dmin, dmax); + /* create & display the graphs */ for (gindex = 0; gindex < graphs.length; gindex++) { if (graphs[gindex].name != "system" && graphs[gindex].d[0].key != "time") { graphName = graphs[gindex].name; @@ -145,7 +177,7 @@ function displayGraph(graphName, graphData, graphFormat, panel, dmin, dmax) { .showLegend(true) ; - chart.xAxis.axisLabel('Time').tickFormat(function(d) { return d3.time.format('%Hh %Mm %Ss')(new Date(d)); }); + graphs.xAxis(chart.xAxis); chart.yAxis.tickFormat(graphFormat); elt.call(chart); @@ -177,7 +209,21 @@ function getValues(graphs, group, header) { } } - return []; + return null; +} + +function getExists(graphs, group, header) { + for (i in graphs) { + if (graphs[i].name == group) { + for (j in graphs[i].d) { + if (graphs[i].d[j].key == header) { + return true; + } + } + } + } + + return false; } var displayFocusGraphInitialized = false;