Merge branch 'master' of https://github.com/probably-not-porter/datavis

README.md

@@ -13,7 +13,6 @@ Contributors: Porter Libby
 
 [ Live Demo Version ](http://cluster.earlham.edu:9900/)
 
-[ Mobile Front-end ](https://github.com/probably-not-porter/datavis-mobile)
 
 
 

public/css/data.css

@@ -13,7 +13,7 @@
 
 }
 #data{
-    margin-top: 120px;
+    margin-top: 100px;
     text-align: center;
     padding-bottom: 100px;
 }

public/css/main.css

@@ -38,9 +38,9 @@ html, body, #viewDiv{
     margin-top: 0px;
     border-radius: 10px; 
     border: 1px solid var(--theme2);
-    -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
-    -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
-    box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
+    -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.15);
+    -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.15);
+    box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.15);
 }
 .nav-view-button:hover{
     background-color: var(--theme3);

public/css/mobile.css

+@media only screen and (max-width: 600px) {
+    #navcontrols{
+        top:2px;
+    }
+    .nav-view-button{
+        vertical-align: top;
+    }
+    #title{
+        font-size: 15px;
+    }      
+}
\ No newline at end of file

public/js/data.js

@@ -251,26 +251,27 @@ function getReadings(spot_id){
         url: '/readings',
         data: {spotid: spot_id, sectorid: query_selection[2], siteid: query_selection[1], tripid: query_selection[0]},
         success: function(response) { 
-            var streamings = [];
+            var readings = [];
 
             for(x = 0; x < response.length; x++){
-                streamings.push(response[x]);
+                readings.push(response[x]);
             }
 
-            console.info('DATA - STREAMINGS');
-            console.info('Loaded ' + streamings.length + " points.");
+            console.info('DATA - readings');
+            console.info('Loaded ' + readings.length + " points.");
 
             var color = getRandomColor();
-            query_data = streamings;
+            query_data = readings;
 
-            createReading(streamings,'test',color);
+            createPoints([readings[0]], color);
+            createGraphReading(readings, query_selection,  color);
 
             var dataview = document.getElementById("dataView")
             dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
             dataview.querySelector("#nav-button-map").classList.add("new_data_button");
 
             document.getElementById('reading').innerHTML = "";
-            document.getElementById('data-prompt').innerHTML = "Loaded "+streamings.length+" points to the graph and map!";
+            document.getElementById('data-prompt').innerHTML = "Loaded "+readings.length+" points to the graph and map!";
 
             document.getElementById("button_permalink").disabled = false;
             document.getElementById("button_csv").disabled = false;
@@ -364,18 +365,28 @@ function getStreamings(date){
             var color = getRandomColor();
             query_data = streamings;
 
-            createGraph(streamings,date,color);
-            createPoints(streamings,color);
+            if (streamings.length != 0){
+                createGraphStreaming(streamings,date,color);
+                createPoints(streamings,color);
 
-            var dataview = document.getElementById("dataView")
-            dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
-            dataview.querySelector("#nav-button-map").classList.add("new_data_button");
+                var dataview = document.getElementById("dataView")
+                dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
+                dataview.querySelector("#nav-button-map").classList.add("new_data_button");
 
-            document.getElementById('streaming').innerHTML = "";
-            document.getElementById('data-prompt').innerHTML = "Loaded "+streamings.length+" points to the graph and map!";
+                document.getElementById('streaming').innerHTML = "";
+                document.getElementById('data-prompt').innerHTML = "Loaded "+streamings.length+" points to the graph and map!";
 
-            document.getElementById("button_permalink").disabled = false;
-            document.getElementById("button_csv").disabled = false;
+                document.getElementById("button_permalink").disabled = false;
+                document.getElementById("button_csv").disabled = false;
+            }
+            else{
+                console.error('ERR: empty set');
+                document.getElementById('streaming').innerHTML = "";
+                document.getElementById('data-prompt').innerHTML = "Selected set contains no valid points";
+            }
+            
+
+            
         },
         error: function(xhr, status, err) {
             console.log(xhr.responseText);
@@ -492,14 +503,6 @@ function renderStreamingsDates(dates){
         togglediv('#streamingsplatforms-ls','streamingsplatforms-button');
     }
 }
-
-function createReading(data,title,color){
-    createPoints([data[0]], color);
-    for(x=0;x<data.length;x++){
-        console.log(data[x]);
-    }
-}
-
 /*
 Other
 

public/js/graph.js

@@ -24,7 +24,54 @@ $( document ).ready(function() {
         }
     });
 });
-function createGraph(dataset, title,color){
+function createGraphReading(dataset, q_arr, color){
+    //reset containers
+    document.getElementById('readingStats').style.display = 'block';
+    document.getElementById('line-chart').style.display = 'none';
+
+    //prepare active container
+    var parent = document.getElementById('readingStats');
+    parent.innerHTML = "";
+
+    // create title
+    var trip = q_arr[0];
+    var site = q_arr[1];
+    var sector = q_arr[2];
+    var spot = q_arr[3];
+
+    var title = document.createElement('h');
+    title.innerHTML = "Trip " + trip + ", Site " + site + ", Sector " + sector + ", Spot " + spot; 
+    parent.append(title);
+
+    //fill with content
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Latitude: " + dataset[x].latitude;
+    parent.append(textElem);
+
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Longitude: " + dataset[x].longitude;
+    parent.append(textElem);
+
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Elevation: " + dataset[x].elevation;
+    parent.append(textElem);
+
+    var textElem = document.createElement('p');
+    textElem.innerHTML = "Accuracy: " + dataset[x].accuracy;
+    parent.append(textElem);
+    
+    for (x=0;x<dataset.length;x++){
+        var textElem = document.createElement('p');
+        textElem.innerHTML = dataset[x].sensorid + ": " + dataset[x].value;
+        parent.append(textElem);
+    }
+    
+}
+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)
@@ -70,6 +117,7 @@ function addData(chart,times,data,types,color,title) {
     if (chart){
         chart.destroy(); // clear old information so it doesnt overflow
     }
+
     chart = new Chart(document.getElementById("line-chart"), { // create new chart structure for streaming data
         type: 'scatter',
         data: {},

public/js/map.js

@@ -35,7 +35,7 @@ require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic
       center: [-13.68, 65.29],
       container: "viewDiv",
       map: map,
-      zoom: 11
+      zoom: 15
     });
     var basemapToggle = new BasemapToggle({
         viewModel: {  // autocasts as new BasemapToggleViewModel()

public/js/util.js

@@ -43,65 +43,54 @@ function switchToData(){
     setTimeout(function(){ document.getElementById("loading").style.display = "none"; }, 10);}
 
 // TEAMPLATES FOR DOM PIECES
-function createRadioElementTrips( mode, name, checked, label, id ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getSites(' + id + ')" type="radio" name="' + name + '" id="' + label + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
-    }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + label + '"><strong>'+ label + "</strong><span class='detailed_info'> (ID: " + id +')</span></label></div>';
 
-    return radioHtml;
-}
-
-function createRadioElementSites( mode, name, checked, label, siteid ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getSectors('+ siteid + ')" type="radio" name="' + name + '" id="' + label + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
+// generalized formula
+function createRadioElement(name, id, label, f){
+    console.log(name,id,label);
+    var radioHtml = '<div class="elem-div elem-0">'
+    if (typeof id === 'string' || id instanceof String){
+        radioHtml += '<input class="data-radio form-radio" onchange="'+ f +'(';
+        radioHtml += "'" + id + "'";
+        radioHtml +=')" type="radio" name="' + name + '" id="' + label + '" />';
+    }else{
+        radioHtml += '<input class="data-radio form-radio" onchange="'+ f +'(' + id + ')" type="radio" name="' + name + '" id="' + label + '" />';
     }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong><span class='detailed_info'> (ID: " + siteid +')</span></label></div>';
+    radioHtml += '<label for="' + label + '">';
+    radioHtml += '<strong>'+ label + "</strong>";
+    radioHtml += '<span class="detailed_info"> (ID: ' + id +')</span>';
+    radioHtml += '</label></div>';
 
     return radioHtml;
 }
-function createRadioElementSectors( mode, name, checked, label,sectorid ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" '
-    // switch for streaming
-    if (query_type == 1){
-        radioHtml += 'onchange="getStreamingsPlatforms('+ sectorid + ')"';
-    }else{
-        radioHtml += 'onchange="getSpots('+ sectorid + ')"';
-    }
-
-    radioHtml += ' type="radio" name="' + name + '" id="' + label + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
-    }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong><span class='detailed_info'> (ID: " + sectorid +')</span></label></div>';
 
-    return radioHtml;
+// take information from data.js and write it into html
+function createRadioElementTrips( mode, name, checked, label, id ) {
+    var f = "getSites";
+    return createRadioElement(name, id, label, f);
 }
-function createRadioElementSpots( mode, name, checked, label,spotid ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getReadings('+ spotid + ')" type="radio" name="' + name + '" id="' + label + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
-    }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + label + '"><strong>Spot #'+ label +'</strong></label></div>';
 
-    return radioHtml;
+function createRadioElementSites( mode, name, checked, label, id ) {
+    var f = "getSectors";
+    return createRadioElement(name, id, label, f);
 }
-function createRadioElementStreamingsPlatforms( mode, name, checked, id,name ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getStreamingsDates('+ "'" +id.toString()+ "'" +')"type="radio" name="' + 'streamingplatforms' + '" id="' + name + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
+// this one is different since it changes for reading and streaming
+function createRadioElementSectors( mode, name, checked, label, id ) {
+    var f = "getSpots"; // if reading
+    if (query_type == 1){ // if streaming
+        f = "getStreamingsPlatforms";
     }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + name + '"><strong>'+ name + "</strong><span class='detailed_info'> (ID: " + id + ")" +'</span></label></div>';
+    return createRadioElement(name, id, label, f);
+}
+function createRadioElementSpots( mode, name, checked, label,id ) {
+    var f = "getReadings";
+    return createRadioElement(name, id, label, f);
     
-    return radioHtml;
 }
+function createRadioElementStreamingsPlatforms( mode, name, checked, id, label ) {
+    var f = "getStreamingsDates";   
+    return createRadioElement(name, id, label, f);
+}
+// this one doesnt use the general formula.
 function createRadioElementStreamingsDates( mode, name, checked, date ) {
     var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getStreamings('+ "'" + date + "'" +')"type="radio" name="' + name + '" id="' + date + '"';
     if ( checked ) {
@@ -113,22 +102,12 @@ function createRadioElementStreamingsDates( mode, name, checked, date ) {
     return radioHtml;
 }
 function createRadioElementStreamings( mode, name, checked, label ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onclick="displayStreamings(' + "'" + label + "'" + ')" type="radio" name="' + name + '" id="' + label + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
-    }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + label + '"><strong>Set '+ label +'</strong></label></div>';
-    return radioHtml;
+    var f = "displayStreamings";
+    return createRadioElement(name, name, label, f);
 }
 function createRadioElementReadings( mode, name, checked, label ) {
-    var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onclick="displayReadings(' + "'" + label + "'" + ')" type="radio" name="' + name + '" id="' + label + '"';
-    if ( checked ) {
-        radioHtml += ' checked="checked"';
-    }
-    radioHtml += '/>';
-    radioHtml += '<label for="' + label + '"><strong>Set '+ label +'</strong></label></div>';
-    return radioHtml;
+    var f = "displayReadings";
+    return createRadioElement(name, label, label, f);
 }
 
 function getRandomColor() {

views/index.ejs

@@ -20,6 +20,7 @@
         <link rel="stylesheet" type="text/css" href="css/graph.css" />
         <link rel="stylesheet" type="text/css" href="css/data.css" />
         <link rel="stylesheet" type="text/css" href="css/map.css" />
+        <link rel="stylesheet" type="text/css" href="css/mobile.css" />
     </head>
     <body>
         <div id='loading'>
@@ -67,6 +68,7 @@
         <div id='graphView'>
             <div id='graph'>
                 <canvas id="line-chart"></canvas>
+                <div id='readingStats' style='position:absolute;z-index: 10;width: 100%; height: 100%;'></div>
             </div>
             <div id='navcontrols'>
                 <div class='tooltip2'>
@@ -107,8 +109,7 @@
 
         <div id='dataView'>
             <div id='title'>
-                <span style='font-size:30px;'>IFS Datavis Tool</span><br>
-                <span style='font-size:15px;'>Additional Info</span>
+                <span style='font-size:20px;'>IFS Datavis Tool</span><br>
             </div>
             <div id='data'>
                 <div class='data-catagory' id='query_type'>