Skip to content

GitLab

Commit 279d0deb authored by Porter Libby's avatar Porter Libby
Browse files

fix all JS indentation

parent 1c0241ee
Expand all Hide whitespace changes
Inline Side-by-side
public/js/data.js
View file @ 279d0deb
This diff is collapsed.
public/js/graph.js
View file @ 279d0deb
......@@ -10,7 +10,7 @@
var lineChart;
// create null chart for no data case
$( document ).ready(function() {
$(document).ready(function () {
lineChart = new Chart(document.getElementById("line-chart"), {
type: 'scatter', // init to scatter plot
data: {},
......@@ -24,7 +24,8 @@ $( document ).ready(function() {
}
});
});
function createGraphReading(dataset, q_arr, color){
function createGraphReading(dataset, q_arr, color) {
console.log(dataset);
//reset containers
document.getElementById('readingStats').style.display = 'block';
......@@ -34,36 +35,36 @@ function createGraphReading(dataset, q_arr, color){
var parent = document.getElementById('readingStats');
parent.innerHTML = "";
if (dataset != null){
if (dataset != null) {
// create title
var trip = dataset[0].tripname;
var site = dataset[0].sitename;
var sector = dataset[0].sectorname;
var title = document.createElement('h');
title.innerHTML = "Spots from " + trip + ", " + site + ", " + sector;
title.innerHTML = "Spots from " + trip + ", " + site + ", " + sector;
parent.append(title);
const table = document.createElement('table');
var tableHTML = "";
var keys = ["Spot","Date","Time","elevation","longitude","latitude","accuracy"];
for(x=9;x<Object.keys(dataset[0]).length;x++){
var keys = ["Spot", "Date", "Time", "elevation", "longitude", "latitude", "accuracy"];
for (x = 9; x < Object.keys(dataset[0]).length; x++) {
keys.push(Object.keys(dataset[0])[x]);
}
tableHTML += createTableHeader(keys);
for ( x = 0 ; x < dataset.length ; x++){
for (x = 0; x < dataset.length; x++) {
prop_arr = [];
for (y=0;y<keys.length;y++){
if (keys[y] == "Date"){
for (y = 0; y < keys.length; y++) {
if (keys[y] == "Date") {
date = new Date(dataset[x]["recordtime"]);
prop_arr.push(date.getFullYear()+'-' + (date.getMonth()+1) + '-'+date.getDate());
prop_arr.push(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
prop_arr.push(date.toLocaleTimeString('en-US'));
y++;
}else{
} else {
prop_arr.push(dataset[x][keys[y]]);
}
}
......@@ -75,38 +76,42 @@ function createGraphReading(dataset, q_arr, color){
}
}
function createTableRow(arr){
function createTableRow(arr) {
text = '<tr>';
for (j=0;j<arr.length;j++){
if(j==0){
for (j = 0; j < arr.length; j++) {
if (j == 0) {
text += "<th>Spot " + arr[j] + "</th>"
}else{
} else {
text += "<td>" + arr[j] + "</td>"
}
}
text += '</tr>';
return text;
}
function createTableHeader(arr){
function createTableHeader(arr) {
text = '<tr>';
for (j=0;j<arr.length;j++){
if(j==0){
for (j = 0; j < arr.length; j++) {
if (j == 0) {
text += "<th>" + "" + "</th>"
}else{
} else {
text += "<th>" + arr[j] + "</th>"
}
}
text += '</tr>';
return text;
}
function createGraphStreaming(dataset, title,color){
function createGraphStreaming(dataset, title, color) {
// reset some containers
document.getElementById('line-chart').style.display = 'block';
document.getElementById('readingStats').style.display = 'none';
title = ''
times_arr = []; // x axis ticks (timestamps)
data = [[]]; // this array will each set of data (split by sensor)
data = [
[]
]; // this array will each set of data (split by sensor)
loc = 0; // set tracking
types = []; // type tracking
......@@ -114,39 +119,55 @@ function createGraphStreaming(dataset, title,color){
title += dataset[0].platformname + ' (' + dataset[0].recordtime + ')';
// sort dataset according to sensortype value
dataset.sort(function(a, b){
var nameA=a.sensortype, nameB=b.sensortype;
dataset.sort(function (a, b) {
var nameA = a.sensortype,
nameB = b.sensortype;
if (nameA < nameB) //sort string ascending
return -1
return -1
if (nameA > nameB)
return 1
return 0 //default return value (no sorting)
})
// create independent buckets of data for each plot
for (x=0;x<dataset.length;x++){
if (!(times_arr.includes(moment(dataset[x].recordtime)))){
for (x = 0; x < dataset.length; x++) {
if (!(times_arr.includes(moment(dataset[x].recordtime)))) {
times_arr.push(moment(dataset[x].recordtime));
}
if (x == 0){ // if first element
if (x == 0) { // if first element
types.push(dataset[x].sensortype + ' (' + dataset[x].sensorunits + ')'); // these will be labels
data[loc].push({x:moment(dataset[x].recordtime), y:dataset[x].value_1,sensorid:dataset[x].sensorid, sensorunits:dataset[x].sensorunits});
}else if ((data[data.length - 1][0]) && (data[data.length - 1][0].sensorid == dataset[x].sensorid)){ // data matches last used bucket
data[loc].push({x:moment(dataset[x].recordtime), y:dataset[x].value_1, sensorid:dataset[x].sensorid, sensorunits:dataset[x].sensorunits});
}
else{ // no match, create new bucket
data[loc].push({
x: moment(dataset[x].recordtime),
y: dataset[x].value_1,
sensorid: dataset[x].sensorid,
sensorunits: dataset[x].sensorunits
});
} else if ((data[data.length - 1][0]) && (data[data.length - 1][0].sensorid == dataset[x].sensorid)) { // data matches last used bucket
data[loc].push({
x: moment(dataset[x].recordtime),
y: dataset[x].value_1,
sensorid: dataset[x].sensorid,
sensorunits: dataset[x].sensorunits
});
} else { // no match, create new bucket
data.push([]); // create empty subset
loc++;
types.push(dataset[x].sensortype + ' (' + dataset[x].sensorunits + ')'); // these will be labels
data[loc].push({x:moment(dataset[x].recordtime), y:dataset[x].value_1, sensorid:dataset[x].sensorid, sensorunits:dataset[x].sensorunits});
data[loc].push({
x: moment(dataset[x].recordtime),
y: dataset[x].value_1,
sensorid: dataset[x].sensorid,
sensorunits: dataset[x].sensorunits
});
}
}
addData(lineChart, times_arr, data,types,color,title);
addData(lineChart, times_arr, data, types, color, title);
}
function addData(chart,times,data,types,color,title) {
function addData(chart, times, data, types, color, title) {
console.warn('UPDATING CHART: this might take a minute!');
if (chart){
if (chart) {
chart.destroy(); // clear old information so it doesnt overflow
}
......@@ -162,24 +183,40 @@ function addData(chart,times,data,types,color,title) {
pan: {
enabled: true,
mode: 'x',
// Function called while the user is panning
onPan: function({chart}) { console.log(`I'm panning!!!`); },
onPan: function ({
chart
}) {
console.log(`I'm panning!!!`);
},
// Function called once panning is completed
onPanComplete: function({chart}) { console.log(`I was panned!!!`); }
onPanComplete: function ({
chart
}) {
console.log(`I was panned!!!`);
}
},
// Container for zoom options
zoom: {
enabled: true,
drag: false,
mode: 'x',
speed: 0.1,
// Function called while the user is zooming
onZoom: function({chart}) { console.log(`I'm zooming!!!`); },
onZoom: function ({
chart
}) {
console.log(`I'm zooming!!!`);
},
// Function called once zooming is completed
onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); }
onZoomComplete: function ({
chart
}) {
console.log(`I was zoomed!!!`);
}
}
}
},
......@@ -192,7 +229,7 @@ function addData(chart,times,data,types,color,title) {
type: 'time',
position: 'bottom',
time: {
unit:'minute'
unit: 'minute'
},
ticks: {
autoSkip: true,
......@@ -200,27 +237,27 @@ function addData(chart,times,data,types,color,title) {
}
}]
},
tooltips: {
callbacks: {
tooltips: {
callbacks: {
label: function (tti, data) { // callback to set tooltips
var lab = tti.yLabel + " (" + (new Date(tti.xLabel).toLocaleTimeString()) + ")";
return lab;
return lab;
}
}
}
},
legend: {
position: 'top',
labels: {
fontColor: 'rgb(255, 99, 132)'
},
onClick: function(e, legendItem) {
onClick: function (e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden;
ci.data.datasets.forEach(function(e, i) {
ci.data.datasets.forEach(function (e, i) {
var meta = ci.getDatasetMeta(i);
if (i !== index) {
if (!alreadyHidden) {
meta.hidden = meta.hidden === null ? !meta.hidden : null;
......@@ -231,8 +268,8 @@ function addData(chart,times,data,types,color,title) {
meta.hidden = null;
}
});
ci.update();
ci.update();
}
}
}
......@@ -241,7 +278,7 @@ function addData(chart,times,data,types,color,title) {
chart.options.title.text = title; // graph title
chart.data.labels = times;
for (x = 0;x<data.length;x++){ // create plot for each set of data [elevation,pressure,etc...]
for (x = 0; x < data.length; x++) { // create plot for each set of data [elevation,pressure,etc...]
var dataset = {
label: types[x],
borderColor: getRandomColor(), // choose random color for now
......@@ -252,4 +289,4 @@ function addData(chart,times,data,types,color,title) {
chart.data.datasets.push(dataset);
}
chart.update();
}
}
\ No newline at end of file
public/js/main.js
View file @ 279d0deb
......@@ -7,15 +7,15 @@
# Starts the program + general stuff
*/
function ready(){
function ready() {
switchToData() // set screen to data
$.ajax({
type: 'GET',
url: '/v',
success: function(response) {
success: function (response) {
document.getElementById("version-tag").innerText = "IFS Datavis Tool v" + response;
},
error: function(xhr, status, err) {
error: function (xhr, status, err) {
console.log(xhr.responseText);
}
});
......@@ -25,18 +25,18 @@ function ready(){
url_parts = base_url.split('?')
url_params = null;
if (url_parts[1]){ // selection exists
if (url_parts[1].length > 0){ // params exist
if (url_parts[1]) { // selection exists
if (url_parts[1].length > 0) { // params exist
url_params = url_parts[1].split('/');
console.log(url_params);
}
if ((url_params[0] == 'query') && (url_params.length > 5)){ // load premade query
if ((url_params[0] == 'query') && (url_params.length > 5)) { // load premade query
loadQuery(url_params);
}else{
} else {
console.warn('Query incomplete; Ignored.');
}
}
document.getElementById('loading').style.display = 'none';
document.getElementById("button_permalink").disabled = true;
document.getElementById("button_csv").disabled = true;
......
public/js/map.js
View file @ 279d0deb
......@@ -8,160 +8,150 @@
*/
var mapstate = 0; // keep track of which map overlay is being used
var default_center = [-13.7055,65.2941]; //default starting coords for the map view
var default_center = [-13.7055, 65.2941]; //default starting coords for the map view
var view;
var map;
var prev_points = [];
// Set map types
maptype1 = "topo";
maptype1 = "topo"; // depreciated but better imagery for iceland
maptype2 = "satellite";
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/CoordinateConversion"
], function (
Map,
MapView,
BasemapToggle,
CoordinateConversion,
) {
map = new Map({
basemap: maptype1
});
require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic", "esri/widgets/BasemapToggle", "esri/widgets/CoordinateConversion", "esri/PopupTemplate" ], function(
Map,
SceneView,
MapView,
Graphic,
BasemapToggle,
CoordinateConversion,
PopupTemplate
) {
map = new Map({
basemap: maptype1
});
view = new MapView({
center: [-13.68, 65.29],
container: "viewDiv",
map: map,
zoom: 15
});
var basemapToggle = new BasemapToggle({
viewModel: { // autocasts as new BasemapToggleViewModel()
view: view, // The view that provides access to the map's "streets" basemap
nextBasemap: maptype2 // Allows for toggling to the "hybrid" basemap
}
});
var coordinateConversionWidget = new CoordinateConversion({
view: view
});
view.ui.add(basemapToggle, {
position: "bottom-left",
width: 200
});
view.ui.add(coordinateConversionWidget, "bottom-left");
view = new MapView({
center: [-13.68, 65.29], // center over iceland
container: "viewDiv",
map: map,
zoom: 15
});
var basemapToggle = new BasemapToggle({
viewModel: { // autocasts as new BasemapToggleViewModel()
view: view, // The view that provides access to the map's "streets" basemap
nextBasemap: maptype2 // Allows for toggling to the "hybrid" basemap
}
});
var coordinateConversionWidget = new CoordinateConversion({
view: view
});
view.ui.add(basemapToggle, {
position: "bottom-left",
width: 200
});
view.ui.add(coordinateConversionWidget, "bottom-left");
});
function createPoints(points,color){
new_points = [points[0]];
prunes = 0;
for(x=1;x<points.length;x++){
if ((points[x].latitude == points[x-1].latitude) && (points[x].longitude == points[x-1].longitude) && (points[x].recordtime == points[x-1].recordtime)){
prunes++;
}else{
new_points.push(points[x]);
}
}
points = new_points
console.log(points);
console.info("Pruned " + prunes + " duplicate map points.");
console.warn('UPDATING MAP: this might take a minute!');
require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic", "esri/widgets/BasemapToggle", "esri/widgets/CoordinateConversion", "esri/PopupTemplate", "esri/layers/FeatureLayer" ], function(
Map,
SceneView,
MapView,
Graphic,
BasemapToggle,
CoordinateConversion,
PopupTemplate,
FeatureLayer
){
if (prev_points.length != 0){
view.graphics.removeMany(prev_points);
prev_points = [];
}
out_points = [];
function createPoints(points, color) {
new_points = [points[0]];
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: color,
};
if (points.length > 0){
view.center = [points[0].longitude, points[0].latitude]; // set center of view to the first point in the set
}
// Prune points that would show up as duplicates on the map
prunes = 0;
for (x = 1; x < points.length; x++) {
if ((points[x].latitude == points[x - 1].latitude) && (points[x].longitude == points[x - 1].longitude) && (points[x].recordtime == points[x - 1].recordtime)) {
prunes++;
} else {
new_points.push(points[x]);
}
}
points = new_points
console.info("Pruned " + prunes + " duplicate map points.");
console.warn('UPDATING MAP: this might take a minute!');
for(x=0;x<points.length;x++){
var point = {
type: "point", // autocasts as new Point()
longitude: points[x].longitude,
latitude: points[x].latitude
};
// ESRI Rendering
require(["esri/Graphic"], function (Graphic) {
if (prev_points.length != 0) {
view.graphics.removeMany(prev_points);
prev_points = [];
}
out_points = [];
let timedate = new Date(points[x].recordtime).toString().split(" ")
let date = timedate[0] + " " + timedate[1] + " " + timedate[2] + ", " + timedate[3];
let time = timedate[4] + " " + timedate[6] + " " + timedate[7] + " " + timedate[8];
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: color,
};
if (points.length > 0) {
view.center = [points[0].longitude, points[0].latitude]; // set center of view to the first point in the set
}
var pointAttr = {
Longitude: points[x].longitude,
Latitude: points[x].latitude,
Elevation: points[x].elevation,
Accuracy: points[x].accuracy,
Time: time,
Date: date,
Platform: points[x].platformid,
SensorType: points[x].sensortype,
SensorValue: points[x].value_1 + " " + points[x].sensorunits,
}
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol,
attributes: pointAttr,
popupTemplate: { // NEW
// autocasts as new PopupTemplate()
title: "{Platform} - {Time}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Longitude"
},
{
fieldName: "Latitude"
},
{
fieldName: "Elevation"
},
{
fieldName: "Accuracy"
},
{
fieldName: "Time"
},
{
fieldName: "Date"
},
{
fieldName: "Platform"
},
{
fieldName: "SensorType"
},
{
fieldName: "SensorValue"
}
]
}
]
}
});
out_points.push(pointGraphic);
}
prev_points = prev_points.concat(out_points);
view.graphics.addMany(out_points);
});
for (x = 0; x < points.length; x++) { // iterate over all points
var point = {
type: "point", // autocasts as new Point()
longitude: points[x].longitude,
latitude: points[x].latitude
};
// split date/time information for easy of reading
let timedate = new Date(points[x].recordtime).toString().split(" ")
let date = timedate[0] + " " + timedate[1] + " " + timedate[2] + ", " + timedate[3];
let time = timedate[4] + " " + timedate[6] + " " + timedate[7] + " " + timedate[8];
// Create point attributes to display from map popup
var pointAttr = {
Longitude: points[x].longitude,
Latitude: points[x].latitude,
Elevation: points[x].elevation,
Accuracy: points[x].accuracy,
Time: time,
Date: date,
Platform: points[x].platformid,
SensorType: points[x].sensortype,
SensorValue: points[x].value_1 + " " + points[x].sensorunits,
}
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol,
attributes: pointAttr,