searching implemented for landing charts

archerimpact · Sep 2, 2018 · 4971680 · 4971680
1 parent d676ba5
commit 4971680
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 13 deletions.
diff --git a/js/database.js b/js/database.js
@@ -959,6 +959,37 @@ class Database {
     });
   }
 
+  /* Get data for one field across all projects. */
+  get_data_by_field(field, callback) {
+    var _this = this;
+    var db = this.db;
+    db.serialize(function() {
+      _this.has_metadata_attr([field], function(attr_exists) {
+        if (attr_exists) {
+          var apertures = [];
+          var counts = [];
+          var stmt = db.prepare("SELECT COUNT(*) as Count, " + field + " FROM Images WHERE " + field + " IS NOT NULL GROUP BY " + field);
+          stmt.each([], function(err, row) {
+            if (err) {
+              console.error("FAILING: " + err);
+              callback([], []);
+              return;
+            }
+
+            apertures.push(JSON.parse(row[field]));
+            counts.push(row['Count']);
+          }, function() {
+            callback(apertures, counts);
+          });
+          stmt.finalize();
+        } else {
+          console.error("column DNE: " + field);
+          callback([], []);
+        }
+      });
+    });
+  }
+
   /* Uses callback(img_path, proj_name, dictionary) to return dict of metafields to metadata.
    * Ignores any fields that are not filled in or not selected. */
   get_selected_image_metadata(img_path, proj_name, selected, callback) {

diff --git a/js/landing.js b/js/landing.js
@@ -27,15 +27,15 @@ function dashSearch() {
 
   var results = [];
   var searchId = $("#dashSearchId").val();
-  if (searchId) {    
+  if (searchId) {
     database.has_project(searchId, function(bool) {
       if (bool) {
         database.get_project_thumbnail(searchId, function(path) {
           var results = {};
           results.path = path;
           results.proj_name = searchId;
           insertSearchResults(false, results);
-        }); 
+        });
       } else {
         insertSearchResults(true, "No Projects Found: " + searchId);
       }
@@ -126,10 +126,55 @@ function create_image_locations_map() {
   });
 }
 
+function create_data_charts() {
+  database.get_metadata_fields(charts_helper)
+}
+
+function charts_helper(fields) {
+  var options = ""
+  var template = "<option value='field'>field</option>"
+  for (var ind in fields) {
+    var field = fields[ind]
+    options += template.replace(/field/g, field)
+  }
+  var data1 = document.getElementById('field-select-1')
+  var data2 = document.getElementById('field-select-2')
+  data1.innerHTML = "<option selected hidden disabled>Camera Make</option>" + options
+  data2.innerHTML = "<option selected hidden disabled>Aperture</option>" + options
+
+  var _ = new Choices(data1, {
+    searchPlaceholderValue: "Type to search",
+  })
+  _ = new Choices(data2, {
+    searchPlaceholderValue: "Type to search"
+  })
+
+  function selectorFunction(event) {
+    database.get_data_by_field(event.detail.choice.value, function(labels, counts) {
+      if (event.path[0].id === 'field-select-1') {
+        var target = 'chart-1'
+        document.getElementById('chart1-parent').innerHTML = "<canvas id='chart-1'></canvas>"
+      } else {
+        var target = 'chart-2'
+        document.getElementById('chart2-parent').innerHTML = "<canvas id='chart-2'></canvas>"
+      }
+      addPieChart(
+        target,
+        labels,
+        counts,
+        event.detail.choice.value,
+      )
+    })
+  }
+
+  data1.addEventListener('choice', selectorFunction)
+  data2.addEventListener('choice', selectorFunction)
+}
+
 function create_image_models_chart() {
   database.get_all_image_models(function(models, counts) {
 		addPieChart(
-			"all-image-models",
+			"chart-1",
 			models,
 			counts,
 			"Camera Make"
@@ -140,7 +185,7 @@ function create_image_models_chart() {
 function create_image_apertures_chart() {
   database.get_all_image_apertures(function(apertures, counts) {
 		addPieChart(
-			"all-image-apertures",
+			"chart-2",
 			apertures,
 			counts,
 			"Aperture"
@@ -151,8 +196,8 @@ function create_image_apertures_chart() {
 function clear_charts() {
   $("#all-image-by-date").html("");
   $("#all-image-locations").html("");
-  $("#all-image-models").html("");
-  $("#all-image-apertures").html("");
+  $("#chart-1").html("");
+  $("#chart-2").html("");
 }
 
 function populate_landing() {
@@ -161,6 +206,7 @@ function populate_landing() {
   create_image_locations_map();
   create_image_models_chart();
   create_image_apertures_chart();
+  create_data_charts();
 }
 
-populate_landing();
+populate_landing();
diff --git a/sections/landing.html b/sections/landing.html
@@ -69,12 +69,12 @@
             <div class="col-xs-6" style="padding-right: 15px">
               <div class="panel panel-default">
                 <div class="panel-heading">
-                  Camera Models
+                  <select class="form-control" data-trigger name="choices-single" id="field-select-1"></select>
                 </div>
                 <!-- /.panel-heading -->
                 <div class="panel-body">
-                  <div class="flot-chart">
-                    <canvas id="all-image-models"></canvas>
+                  <div class="flot-chart" id="chart1-parent">
+                    <canvas id="chart-1"></canvas>
                   </div>
                 </div>
                 <!-- /.panel-body -->
@@ -85,12 +85,12 @@
             <div class="col-xs-6" style="padding-right: 15px">
               <div class="panel panel-default">
                 <div class="panel-heading">
-                  Camera Apertures
+                  <select class="form-control" data-trigger name="choices-single" id="field-select-2"></select>
                 </div>
                 <!-- /.panel-heading -->
                 <div class="panel-body">
-                  <div class="flot-chart">
-                    <canvas id="all-image-apertures"></canvas>
+                  <div class="flot-chart" id="chart2-parent">
+                    <canvas id="chart-2"></canvas>
                   </div>
                 </div>
                 <!-- /.panel-body -->