From ea892fd51ae64bfe77f4437d3d9e69306d83ed98 Mon Sep 17 00:00:00 2001 From: Nikos Roussos Date: Sun, 12 Feb 2017 19:31:35 +0200 Subject: [PATCH] Switch from jshint to eslint --- .eslintrc.json | 35 +++++++ .travis.yml | 5 +- db/static/js/app.backbone.js | 189 ++++++++++++++++++----------------- db/static/js/app.js | 2 +- db/static/js/map.js | 20 ++-- db/static/js/stats.js | 141 ++++++++++++++------------ 6 files changed, 220 insertions(+), 172 deletions(-) create mode 100644 .eslintrc.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..ee15285 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,35 @@ +{ + "env": { + "browser": true, + "es6": true, + "jquery": true + }, + "extends": "eslint:recommended", + "rules": { + "indent": [ + "error", + 4 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "always" + ], + "curly": [ + "error", + "all" + ], + "one-var-declaration-per-line": [ + "error", + "always" + ], + "new-cap": "error" + } +} diff --git a/.travis.yml b/.travis.yml index 0e29da0..1a5f0fa 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,9 +1,10 @@ language: python +dist: trusty python: - "2.7" install: - pip install flake8 - - npm install -g jshint + - npm install -g eslint script: - flake8 . - - jshint . + - eslint 'db/static/js/*.js' diff --git a/db/static/js/app.backbone.js b/db/static/js/app.backbone.js index 1dacc5b..0dda666 100644 --- a/db/static/js/app.backbone.js +++ b/db/static/js/app.backbone.js @@ -1,3 +1,4 @@ +/* global d3 Backbone moment _ */ // D3 visualisation d3.lineChart = function(telemetry_key, unit) { @@ -10,9 +11,9 @@ d3.lineChart = function(telemetry_key, unit) { var svg; // Define the div for the tooltip - var div = d3.select("body").append("div") - .attr("class", "chart-tooltip") - .style("opacity", 0); + var div = d3.select('body').append('div') + .attr('class', 'chart-tooltip') + .style('opacity', 0); function render(selection) { selection.each(function(_data) { @@ -21,7 +22,7 @@ d3.lineChart = function(telemetry_key, unit) { var x1 = d3.scale.ordinal() - .domain(_data.map(function(d, i){ + .domain(_data.map(function(d){ return parseDate(d.telemetry.observation_datetime); })) .rangePoints([0, chartW]); @@ -29,17 +30,17 @@ d3.lineChart = function(telemetry_key, unit) { var y1; switch(_data.length) { - case 1: - y1 = d3.scale.linear() - .domain([0, d3.max(_data, function(d, i){ return +d.telemetry.damod_data[telemetry_key]; })]) - .range([chartH, 0]) - .nice(4); - break; - default: - y1 = d3.scale.linear() - .domain(d3.extent(_data, function(d, i){ return +d.telemetry.damod_data[telemetry_key]; })) + case 1: + y1 = d3.scale.linear() + .domain([0, d3.max(_data, function(d){ return +d.telemetry.damod_data[telemetry_key]; })]) .range([chartH, 0]) .nice(4); + break; + default: + y1 = d3.scale.linear() + .domain(d3.extent(_data, function(d){ return +d.telemetry.damod_data[telemetry_key]; })) + .range([chartH, 0]) + .nice(4); } var xAxis = d3.svg.axis() @@ -74,83 +75,83 @@ d3.lineChart = function(telemetry_key, unit) { .transition() .call(yAxis); - svg.selectAll(".x-axis-group.axis text") // select all the text elements for the xaxis - .attr("transform", function(d) { - return "translate(-50,50)rotate(-45)"; + svg.selectAll('.x-axis-group.axis text') // select all the text elements for the xaxis + .attr('transform', function() { + return 'translate(-50,50)rotate(-45)'; }); // Axis labels - svg.append("text") - .attr("transform", "translate(" + (chartW + config.margin.right + 18) + " ," + (chartH + 10) + ")") - .style("text-anchor", "middle") - .text("Observation Datetime"); + svg.append('text') + .attr('transform', 'translate(' + (chartW + config.margin.right + 18) + ' ,' + (chartH + 10) + ')') + .style('text-anchor', 'middle') + .text('Observation Datetime'); - svg.append("text") - .attr("transform", "rotate(-90)") - .attr("y", 40) - .attr("x", 0 - (chartH / 2)) - .attr("dy", "1em") - .style("text-anchor", "middle") - .text("Value (" + unit + ")"); + svg.append('text') + .attr('transform', 'rotate(-90)') + .attr('y', 40) + .attr('x', 0 - (chartH / 2)) + .attr('dy', '1em') + .style('text-anchor', 'middle') + .text('Value (' + unit + ')'); switch(_data.length) { - case 1: - // Add the scatterplot - svg.selectAll("dot") - .data(_data) - .enter().append("circle") - .attr("r", 4) - .attr("cx", function(d, i) { return chartW / 2 + config.margin.left; }) - .attr("cy", function(d) { return y1(d.telemetry.damod_data[telemetry_key]) + config.margin.top; }) - .attr("class", "circle") - .on("mouseover", function(d) { - div.transition() - .duration(200) - .style("opacity", 1); - div.html(d.telemetry.damod_data[telemetry_key] + ' (' + unit + ')') - .style("left", (d3.event.pageX) + "px") - .style("top", (d3.event.pageY - 26) + "px"); - }) - .on("mouseout", function(d) { - div.transition() - .duration(500) - .style("opacity", 0); - }); - break; - default: - var xInterval = chartW / (_data.length - 1); + case 1: + // Add the scatterplot + svg.selectAll('dot') + .data(_data) + .enter().append('circle') + .attr('r', 4) + .attr('cx', function() { return chartW / 2 + config.margin.left; }) + .attr('cy', function(d) { return y1(d.telemetry.damod_data[telemetry_key]) + config.margin.top; }) + .attr('class', 'circle') + .on('mouseover', function(d) { + div.transition() + .duration(200) + .style('opacity', 1); + div.html(d.telemetry.damod_data[telemetry_key] + ' (' + unit + ')') + .style('left', (d3.event.pageX) + 'px') + .style('top', (d3.event.pageY - 26) + 'px'); + }) + .on('mouseout', function() { + div.transition() + .duration(500) + .style('opacity', 0); + }); + break; + default: + var xInterval = chartW / (_data.length - 1); - // Define the line - var valueline = d3.svg.line() - .x(function(d,i) { return (xInterval*i + config.margin.left); }) - .y(function(d) { return y1(d.telemetry.damod_data[telemetry_key]) + config.margin.top; }); + // Define the line + var valueline = d3.svg.line() + .x(function(d,i) { return (xInterval*i + config.margin.left); }) + .y(function(d) { return y1(d.telemetry.damod_data[telemetry_key]) + config.margin.top; }); - // Add the valueline path - svg.append("path") - .attr("class", "line") - .attr("d", valueline(_data)); + // Add the valueline path + svg.append('path') + .attr('class', 'line') + .attr('d', valueline(_data)); - // Add the scatterplot - svg.selectAll("dot") - .data(_data) - .enter().append("circle") - .attr("r", 4) - .attr("cx", function(d, i) { return xInterval*i + config.margin.left; }) - .attr("cy", function(d) { return y1(d.telemetry.damod_data[telemetry_key]) + config.margin.top; }) - .attr("class", "circle") - .on("mouseover", function(d) { - div.transition() - .duration(200) - .style("opacity", 1); - div.html(d.telemetry.damod_data[telemetry_key] + ' (' + unit + ')') - .style("left", (d3.event.pageX) + "px") - .style("top", (d3.event.pageY - 26) + "px"); - }) - .on("mouseout", function(d) { - div.transition() - .duration(500) - .style("opacity", 0); - }); + // Add the scatterplot + svg.selectAll('dot') + .data(_data) + .enter().append('circle') + .attr('r', 4) + .attr('cx', function(d, i) { return xInterval*i + config.margin.left; }) + .attr('cy', function(d) { return y1(d.telemetry.damod_data[telemetry_key]) + config.margin.top; }) + .attr('class', 'circle') + .on('mouseover', function(d) { + div.transition() + .duration(200) + .style('opacity', 1); + div.html(d.telemetry.damod_data[telemetry_key] + ' (' + unit + ')') + .style('left', (d3.event.pageX) + 'px') + .style('top', (d3.event.pageY - 26) + 'px'); + }) + .on('mouseout', function() { + div.transition() + .duration(500) + .style('opacity', 0); + }); } @@ -185,12 +186,12 @@ if (has_telemetry_data) { // Backbone Models - var TelemetryData = Backbone.Model.extend({}); + Backbone.Model.extend({}); // Backbone Collections var TelemetryCollection = Backbone.Collection.extend({ - url:"/api/telemetry/?satellite=" + satelliteId + url:'/api/telemetry/?satellite=' + satelliteId }); var TelemetryDescriptors = TelemetryCollection.extend({ @@ -206,7 +207,7 @@ if (has_telemetry_data) { return( collection.get('telemetry').observation_datetime ); }, byDate: function (start_date, end_date) { - filtered = this.filter(function (model) { + var filtered = this.filter(function (model) { var date = parseDateFilter(model.get('telemetry').observation_datetime); return ( date >= start_date && date <= end_date ); }); @@ -217,7 +218,7 @@ if (has_telemetry_data) { // Backbone Views var TelemetryDescriptorsView = Backbone.View.extend({ - el: "#telemetry-descriptors", + el: '#telemetry-descriptors', template: _.template($('#telemetryDescriptorsTemplate').html()), initialize: function(){ this.listenTo(this.collection, 'add reset change remove', this.renderItem); @@ -230,7 +231,7 @@ if (has_telemetry_data) { }); var TelemetryChartView = Backbone.View.extend({ - el: ".chart", + el: '.chart', chart: null, chartSelection: null, initialize: function() { @@ -238,10 +239,10 @@ if (has_telemetry_data) { this.updateDates(moment().subtract(7, 'days').format('YYYY/MM/DD'), moment().format('YYYY/MM/DD')); this.renderPlaceholder(); this.collection.on('update filter', this.render, this); - chart = d3.lineChart(); + d3.lineChart(); }, events: { - "click .telemetry-key": "updateKey", + 'click .telemetry-key': 'updateKey', }, render: function() { if (this.collection.length > 0) { @@ -258,12 +259,12 @@ if (has_telemetry_data) { }, renderPlaceholder: function() { $('#telemetry-descriptors').hide(); - $('#data-available').html("

There is no data available for the selected dates.

"); + $('#data-available').html('

There is no data available for the selected dates.

'); d3.select('svg').remove(); }, updateKey: function(e){ d3.select('svg').remove(); - this.chartSelection.call(d3.lineChart($(e.currentTarget).data("key"), $(e.currentTarget).data("unit"))); + this.chartSelection.call(d3.lineChart($(e.currentTarget).data('key'), $(e.currentTarget).data('unit'))); var active = $(e.currentTarget); active.addClass('active'); $('li').not(active).removeClass('active'); @@ -276,23 +277,23 @@ if (has_telemetry_data) { // Fetch data and render views - var telemetryDescriptorsView = new TelemetryDescriptorsView({ collection: new TelemetryDescriptors() }); + new TelemetryDescriptorsView({ collection: new TelemetryDescriptors() }); var telemetryValues = new TelemetryValues(); var telemetryChartView = new TelemetryChartView({collection: telemetryValues}); $('input[name="daterange"]').daterangepicker( { locale: { - format: 'YYYY/MM/DD' + format: 'YYYY/MM/DD' }, dateLimit: { - "days": 60 + 'days': 60 }, autoApply: true, startDate: moment().subtract(7, 'days').format('YYYY/MM/DD'), endDate: moment().format('YYYY/MM/DD'), }, - function(start, end, label) { + function(start, end) { telemetryChartView.updateDates(start.format('YYYYMMDD'), end.format('YYYYMMDD')); } ); diff --git a/db/static/js/app.js b/db/static/js/app.js index 2a852dd..88a0b2e 100644 --- a/db/static/js/app.js +++ b/db/static/js/app.js @@ -7,7 +7,7 @@ $(document).ready(function() { }); var t = $('input'); - t.bind('propertychange keyup input paste', function(event) { + t.bind('propertychange keyup input paste', function() { var term = t.val().toLowerCase(); if (term !== '') { $('.satellite-group-item').hide(); diff --git a/db/static/js/map.js b/db/static/js/map.js index 754eff8..fb04c4b 100644 --- a/db/static/js/map.js +++ b/db/static/js/map.js @@ -1,3 +1,5 @@ +/*global L */ + $(document).ready(function() { 'use strict'; @@ -17,16 +19,16 @@ $(document).ready(function() { var geojson = { type: 'FeatureCollection', features: [{ - "type": "Feature", - "geometry": { - "type": "Point", - "coordinates": [lon, lat] + 'type': 'Feature', + 'geometry': { + 'type': 'Point', + 'coordinates': [lon, lat] }, - "properties": { - "icon": { - "iconUrl": "/static/img/satellite-marker.png", - "iconSize": [32, 32], - "iconAnchor": [16, 16], + 'properties': { + 'icon': { + 'iconUrl': '/static/img/satellite-marker.png', + 'iconSize': [32, 32], + 'iconAnchor': [16, 16], } } }] diff --git a/db/static/js/stats.js b/db/static/js/stats.js index 162d566..fe68e36 100644 --- a/db/static/js/stats.js +++ b/db/static/js/stats.js @@ -1,74 +1,83 @@ -$.getJSON( "/statistics/", function( data ) { +/* global Chart */ - var i, r, g, b, a; - // Create colors for Mode Chart - var mode_colors = []; - for (i = 0; i < data.mode_label.length; i++) { - r = Math.floor(data.mode_data[i]* 10); - b = Math.floor(0.3 * 255); - g = Math.floor(data.mode_data[i]* 10); - a = 0.5; - color = "rgba(" + r + "," + g + "," + b + "," + a + ")"; - mode_colors.push(color); - } +$(document).ready(function() { - // Create colors for Band Chart - var band_colors = []; - for (i = 0; i < data.band_label.length; i++) { - b = Math.floor(0.1 * 255); - g = Math.floor(data.band_data[i]); - r = Math.floor(data.band_data[i]); - a = 0.5; - color = "rgba(" + r + "," + g + "," + b + "," + a + ")"; - band_colors.push(color); - } + $.getJSON('/statistics/', function( data ) { - // Global chart configuration - Chart.defaults.global.legend.display = false; - Chart.defaults.global.title.display = true; - Chart.defaults.global.title.fontSize = 16; - Chart.defaults.global.title.fontColor= '#444'; - - //Mode Chart - var mode_c = document.getElementById("modes"); - var modeChart = new Chart(mode_c, { - type: 'doughnut', - data: { - labels: data.mode_label, - datasets: [{ - backgroundColor: mode_colors, - data: data.mode_data, - borderWidth: 1 - }] - }, - options: { - title : { - text: data.mode_data.length + ' Modes' - } + var i; + var r; + var g; + var b; + var a; + // Create colors for Mode Chart + var mode_colors = []; + for (i = 0; i < data.mode_label.length; i++) { + r = Math.floor(data.mode_data[i]* 10); + b = Math.floor(0.3 * 255); + g = Math.floor(data.mode_data[i]* 10); + a = 0.5; + var color = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; + mode_colors.push(color); } - }); - //Band Chart - var band_c = document.getElementById("bands"); - var bandChart = new Chart(band_c, { - type: 'doughnut', - data: { - labels: data.band_label, - datasets: [{ - backgroundColor: band_colors, - data: data.band_data, - borderWidth: 1 - }] - }, - options: { - title : { - text: data.band_data.length + ' Bands' - } + // Create colors for Band Chart + var band_colors = []; + for (i = 0; i < data.band_label.length; i++) { + b = Math.floor(0.1 * 255); + g = Math.floor(data.band_data[i]); + r = Math.floor(data.band_data[i]); + a = 0.5; + color = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; + band_colors.push(color); } - }); - //HUD Stats - $('#stats-alive').html(data.transmitters_alive); - $('#stats-transmitters').html(data.transmitters); - $('#stats-satellites').html(data.total_satellites); + // Global chart configuration + Chart.defaults.global.legend.display = false; + Chart.defaults.global.title.display = true; + Chart.defaults.global.title.fontSize = 16; + Chart.defaults.global.title.fontColor= '#444'; + + //Mode Chart + var mode_c = document.getElementById('modes'); + new Chart(mode_c, { + type: 'doughnut', + data: { + labels: data.mode_label, + datasets: [{ + backgroundColor: mode_colors, + data: data.mode_data, + borderWidth: 1 + }] + }, + options: { + title : { + text: data.mode_data.length + ' Modes' + } + } + }); + + //Band Chart + var band_c = document.getElementById('bands'); + new Chart(band_c, { + type: 'doughnut', + data: { + labels: data.band_label, + datasets: [{ + backgroundColor: band_colors, + data: data.band_data, + borderWidth: 1 + }] + }, + options: { + title : { + text: data.band_data.length + ' Bands' + } + } + }); + + //HUD Stats + $('#stats-alive').html(data.transmitters_alive); + $('#stats-transmitters').html(data.transmitters); + $('#stats-satellites').html(data.total_satellites); + }); });