var dashboardView = Backbone.View.extend({ el: '#content', updateInterval: 6000, clients: [], systems: [], convertedData: {}, oldSum: {}, initialize: function () { var self = this; this.collection.fetch({ success: function() { self.renderCharts(); window.setInterval(function() { self.collection.fetch({ success: function() { self.updateSystems(); self.updateCharts(); } }); }, self.updateInterval); } }); }, template: new EJS({url: 'js/templates/dashboardView.ejs'}), render: function() { var self = this; $(this.el).html(this.template.text); $.each(this.options.description.models[0].attributes.groups, function(key, val) { $('#content').append( '
' + '

'+this.name+'

' + '
'); }); $.each(this.options.description.models[0].attributes.figures, function(key, val) { if (this.group === 'system') { self.renderSystem(this.identifier, this.name, this.description, this.type, this.units); self.systems.push(this.identifier); } else if (this.group === 'client') { self.renderClient(this.identifier, this.name, this.description, this.type, this.units); self.clients.push(this.identifier); } }); if (this.collection.models[0] === undefined) { this.collection.fetch({ success: function() { self.renderCharts(); } }); } else { self.renderCharts(); } return this; }, renderCharts: function () { var self = this; this.generateClientData(); var label; $.each(self.clients, function(key, client) { var client = client; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .axisLabel('Time') $.each(self.options.description.models[0].attributes.figures, function(k,v) { if (v.identifier === client) { label = v.units; } }); chart.yAxis .axisLabel(label) d3.select("#"+client+"Chart svg") .datum(self.generateD3Input(self.convertedData[client], client, "#8AA051")) .transition().duration(500) .call(chart) nv.utils.windowResize(function() { d3.select('#httpConnectionsChart svg').call(chart); }); return chart; }); }); }, updateCharts: function () { var self = this; this.generateClientData(); var label; $.each(self.clients, function(key, client) { var client = client; var chart = nv.models.lineChart(); chart.xAxis .axisLabel("Time (ms)") $.each(self.options.description.models[0].attributes.figures, function(k,v) { if (v.identifier === client) { label = v.units; } }); chart.yAxis .axisLabel(label) d3.select("#"+client+"Chart svg") .datum(self.generateD3Input(self.convertedData[client], client, "#8AA051")) .transition().duration(500) .call(chart) d3.selectAll('.nv-x text').text(function(d){ if (isNaN(d)) { return d; } else { var date = new Date(d*1000); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); return hours+":"+minutes+":"+seconds; } }); }); }, generateClientData: function () { var self = this; var x = []; //Time var y = []; //Value var tempName; var tempArray = []; $.each(this.collection.models[0].attributes.client, function(key, val) { tempName = key; if (self.convertedData[tempName] === undefined) { self.convertedData[tempName] = []; } if (self.convertedData[tempName].length === 0) { self.oldSum[tempName] = val.sum; tempArray = self.convertedData[tempName]; var timeStamp = Math.round(+new Date()/1000); tempArray.push({x:timeStamp, y:0}); } if (self.convertedData[tempName].length !== 0) { tempArray = self.convertedData[tempName]; var timeStamp = Math.round(+new Date()/1000); if (val.sum === undefined) { tempArray.push({x:timeStamp, y:val}); return; } var calculatedSum = val.sum - self.oldSum[tempName]; self.oldSum[tempName] = val.sum; tempArray.push({x:timeStamp, y:calculatedSum}); } }); }, generateD3Input: function (values, key, color) { if (values === undefined) { return; } return [ { values: values, key: key, color: color } ] }, renderClient: function (identifier, name, desc, type, units) { $('#client').append( '
' + '
' + name + '
' + '
' + '
' ); }, renderSystem: function (identifier, name, desc, type, units) { $('#system').append( '
' + '' + '' + '' + '
'+ name +''+ 'counting...' +'
' + '
' ); }, updateClient: function (identifier, count, counts) { }, updateSystems: function () { $.each(this.collection.models[0].attributes.system, function(key, val) { $('#'+key+' .updateValue').html(val); }); } });