sadfas

index.html

@@ -8,6 +8,8 @@
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     </head>
     <body style="background-color: azure;">
+        <!--chartjs-->
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
         <!--handlebars-->
         <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
         <!-- bootstrap-->
@@ -57,7 +59,7 @@
                         <script id="subdiv-template" type="text/x-handlebars-template">
                           <div>
                               <strong>Subdiv:</strong><br>
-                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="subdiv" multiple="multiple" size="5">
+                              <select oninput="global_component.update_listbox(0)" class="form-select selectwidthauto" multiple aria-label="multiple select" id="subdiv_sel" multiple="multiple" size="5">
                                 {{#each this}}
                                     <option>{{this}}</option>
                                 {{/each}}
@@ -75,9 +77,9 @@
                         <script id="lga-template" type="text/x-handlebars-template">
                           <div>
                               <strong>LGA:</strong><br>
-                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="lga" multiple="multiple" size="5">
+                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" id="lga_sel" multiple="multiple" size="5">
                                 {{#each this}}
-                                    <option>{{this.[2]}}</option>
+                                    <option>{{this}}</option>
                                 {{/each}}
                                </select>
                           </div>
@@ -103,9 +105,31 @@
                           <!--/template--> 
                       </li>
 
+                      <li class="list-group-item">
+                        <div id="subcategory">
+
+                        </div>
+                        <!--template-->
+                        <script id="subcategory-template" type="text/x-handlebars-template">
+                          <div>
+                              <strong>Category:</strong><br>
+                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="category" >
+                                {{#each this}}
+                                    <option>{{this.[1]}}</option>
+                                {{/each}}
+                              </select>
+                          </div>
+                        </script>
+                        <!--/template--> 
+                    </li>
+
                     </ul>
                 </div>
+                <!--charts!-->
                 <div class="col-8">
+                  <div>
+                    <canvas id="Chart"></canvas>
+                  </div>                  
                 </div>
               </div>
          </div>

index.js

@@ -5,7 +5,23 @@ location(id INTEGER PRIMARY KEY AUTOINCREMENT , subdiv TEXT, LGA TEXT)
 statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id INTEGER DEFAULT 0, location_id INTEGER, month TEXT NOT NULL, count INTEGER NOT NULL,FOREIGN KEY(category_id) REFERENCES categories(id), FOREIGN KEY(subcat_id) REFERENCES subcat(id), FOREIGN KEY(location_id) REFERENCES location(id))
 
 */
+var chart;
 //init sqlite
+function getSelectValues(sel) {
+    var result = [];
+    var options = sel && sel.options;
+    var opt;
+  
+    for (var i=0, iLen=options.length; i<iLen; i++) {
+      opt = options[i];
+  
+      if (opt.selected) {
+        result.push(opt.value || opt.text);
+      }
+    }
+    return result;
+  }
+
 const eUploadDb = document.querySelector('#load-db');
 
 window.sqlite3InitModule().then(function(sqlite3){
@@ -22,6 +38,7 @@ window.sqlite3InitModule().then(function(sqlite3){
             const rc = sqlite3.capi.sqlite3_deserialize(
             db.pointer, 'main', p, this.result.byteLength, this.result.byteLength,
             sqlite3.capi.SQLITE_DESERIALIZE_FREEONCLOSE);
+            globalThis.db = db;
             init(db);
         });
         r.readAsArrayBuffer(f);
@@ -43,7 +60,20 @@ class db_handler {
     
     select_singlecond(column, condition, table){
         console.log(column,condition);
-        var stmt = ("SELECT * FROM "+table+" WHERE "+column+" = '"+condition+"'");
+        var stmt = ("SELECT * FROM "+table+" WHERE "+column+"='"+condition+"'");
+        var res = this.db.exec(stmt, {"returnValue":"resultRows"});
+        console.log(res)
+        return res
+    }
+
+    select_multicond(columns, conditions, table){
+        var add = (" OR ")
+        var stmt = ("SELECT * FROM "+table+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
+        for (var i=1;i<conditions.length;i++){
+             stmt = stmt+add+columns[i]+"='"+conditions[i]+"'";
+        }
+        stmt = stmt+")"
+        console.log(stmt);
         return this.db.exec(stmt, {"returnValue":"resultRows"})
     }
 
@@ -51,6 +81,18 @@ class db_handler {
         var stmt = ("SELECT DISTINCT "+column+" FROM "+table);
         return this.db.exec(stmt, {"returnValue": "resultRows"})
     }
+
+    select_n_join_multicond(selects, joinparams, conditions, columns){
+        var cols = [];
+        var add = " OR ";
+        //match according subcat
+        var stmt = ("SELECT "+selects+" FROM subcat INNER JOIN ON "+joinparams[0]+"="+joinparams[1]+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
+        for (var i=1;i<conditions.length;i++){
+            stmt = stmt+add+columns[i]+"='"+conditions[i]+"'";
+        }
+        stmt = stmt+")";
+    }
+
 }
 
 class Component {
@@ -59,6 +101,18 @@ class Component {
     }
 }
 
+class Chart extends Component {
+    constructor(dbhandler){
+        super(dbhandler);
+        this.ctx = document.getElementById("Chart");
+    }
+
+    //params = {"subdiv","lga nullable", "cat", "subcat"}
+    render(params){
+
+    }
+}
+
 //left column filter component
 class Filter extends Component{
     constructor(dbhandler){
@@ -72,33 +126,90 @@ class Filter extends Component{
         console.log(this.distinct_subdiv);
         this.all_subcat = this.handler.select_all("subcat");
         this.category = this.handler.select_all("categories");
+        this.distinct_lga = this.handler.select_distinct("lga","location")
         console.log(this.category)
         //subdiv filter rendering
         var source = document.getElementById("subdiv-template").innerHTML;
-        var subdiv_template = Handlebars.compile(source);
+        this.subdiv_template = Handlebars.compile(source);
-        var html = subdiv_template(this.distinct_subdiv);
+        var html = this.subdiv_template(this.distinct_subdiv);
         document.getElementById("subdiv").innerHTML = html;
         //LGA filter rendering
         source = document.getElementById("lga-template").innerHTML;
-        var lga_template = Handlebars.compile(source);
+        this.lga_template = Handlebars.compile(source);
-        document.getElementById("lga").innerHTML = lga_template(this.all_location);
+        document.getElementById("lga").innerHTML = this.lga_template(this.distinct_lga);
         //category filter rendering
         source = document.getElementById("category-template").innerHTML;
-        var category_template = Handlebars.compile(source);
+        this.category_template = Handlebars.compile(source);
-        console.log(category_template(this.category))
+        document.getElementById("category").innerHTML = this.category_template(this.category);
-        document.getElementById("category").innerHTML = category_template(this.category);
         //don't select statistics, use where to filter too darn slow 266k records
     }
     
     //there shall be linked data, on update filter out subdata
-    update_listbox(){
+    update_listbox(id){
+        //if subdiv fetch according LGA
+        if (id ==0 ){
+            var selel = document.getElementById("subdiv_sel");
+            var result = getSelectValues(selel);
+            //if multiselect
+            var outarr = [];
+            var queryres;
+            if (result.length != 1){
+                console.log(result)
+                var conds = [];
+                var columns = [];
+                for (var i=0;i<result.length;i++){
+                    conds.push(result[i]);
+                    columns.push("subdiv");
+                }
+                queryres = this.handler.select_multicond(columns, conds, "location");
+                console.log(queryres)
+            } else {
+                //if single select
+                queryres = this.handler.select_singlecond("subdiv",result[0],"location");
 
+            }
+            for (var i=0; i<queryres.length;i++){
+                //extract LGA list
+                outarr.push(queryres[i][2]);
+            }
+            console.log(outarr)
+            document.getElementById("lga").innerHTML = this.lga_template(outarr);
+        } else if (id=1){
+            //if it is subcat according to cat
+            var selel = document.getElementById("lga_sel");
+            var result = getSelectValues(selel);
+            var outarr = [];
+            var queryres;
+            //if multisel
+            if (result.length != 1){
+                console.log(result)
+                var conds = [];
+                var columns = [];
+                for (var i=0;i<result.length;i++){
+                    conds.push(result[i]);
+                    columns.push("");
+                }
+                queryres = this.handler.select_n_join_multicond("subcat.id",joinparams.columns, conds, "location");
+                console.log(queryres)
+            } else {
+                //if single select
+                queryres = this.handler.select_singlecond("subdiv",result[0],"location");
+
+            }
+            for (var i=0; i<queryres.length;i++){
+                //extract LGA list
+                outarr.push(queryres[i][2]);
+            }
+            console.log(outarr)
+            document.getElementById("lga").innerHTML = this.lga_template(outarr);
+        }
     }
     
 }
 
 function init(sqlite3){
     global_component = new Filter(new db_handler(sqlite3));
+    chart = new Chart(new db_handler(sqlite3));
 }
 
 function filtergen(){