mostly working

index.html

@@ -7,7 +7,7 @@
         <!-- dependencies -->
         <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;">
+    <body style="background-color: #fffee0;">
         <!--chartjs-->
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
         <!--handlebars-->
@@ -19,11 +19,12 @@
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
         <!-- SQL -->
         <script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js"></script>
 
 
         <!--nav-->
         <nav class="navbar navbar-expand-lg navbar-light bg-warning">
-          <a class="navbar-brand" href="#">&nbsp;&nbsp;Crime statistic analysis</a>
+          <a class="navbar-brand" href="#">&nbsp;&nbsp;NSW Crime statistic analysis</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
@@ -141,7 +142,8 @@
                         <table class="table">
                           <thead class="thead-dark">
                             <tr>
-                              <th scope="col">Subdiv/LGA</th>
+                              <th scope="col">Subdiv</th>
+                              <th scope="col">LGA</th>
                               <th scope="col">Category</th>
                               <th scope="col">Subcategory</th>
                             </tr>
@@ -149,20 +151,65 @@
                             <tbody>
                               {{#each this}}
                               <tr>
-                                <td>{{this.subdivs}} {{this.lgas}}</td>
-                                <td>{{this.categorys}}</td>
-                                <td>{{this.subcategorys}}</td>
+                                <td style="word-break: break-all">{{this.subdivs}}</td>
+                                <td style="word-break: break-all"> {{this.lgas}}</td>
+                                <td style="word-break: break-all">{{this.categorys}}</td>
+                                <td style="word-break: break-all">{{this.subcategorys}}</td>
                               </tr>       
                               {{/each}}
                             </tbody>
                         </table>
-                        <h5>Multiple choices in a given column will be AVGed.</h5>
+                        <h5>Multiple choices in a given column for line graph will be AVGed. Bar graph will be cumulative.</h5>
                       </div>
+
+                      <button type="button" class="btn btn-danger" onclick="queue_filter.clear()">Clear query queue</button>
+                      <button type="button" class="btn btn-success" onclick="queue_filter.go()">Run!</button>
                       </script>
                     </div>
+                    <br>
                     <div class="row">
-                      <div>
-                        <canvas id="chart_canvas"></canvas>
+                      
+                      <ul class="nav nav-tabs" id="myTab" role="tablist">
+                        <li class="nav-item" role="presentation">
+                          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Line</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Pie/Bar</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                          <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Table</button>
+                        </li>
+                      </ul>
+                      <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><canvas id="chart_canvas"></canvas></div>
+                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><canvas id="pie_canvas"></canvas><br><canvas id="bar_canvas"></canvas><br><br></div>
+                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+                            <div id="result_table"></div>
+                            <!--template-->
+                            <script id="result_template" type="text/x-handlebars-template">
+                              <table class="table">
+                                <thead class="thead-dark">
+                                  <tr>
+                                    <th scope="col">Month</th>
+                                    {{#each columns}}
+                                    <th scope="col">{{this}}</th>
+                                    {{/each}}
+                                  </tr>
+                              </thead>
+                                  <tbody>
+                                    {{#each (range 0 (maxLength this)) as |rowIndex|}}
+                                    <tr>
+                                      <td>{{months.[rowIndex]}}</td>
+                                      {{#each this as |array|}}
+                                        <td>{{array.[rowIndex]}}</td>
+                                      {{/each}}
+                                    </tr>
+                                    {{/each}}
+                                  </tbody>
+                              </table>
+                            </script>
+                        </div>
+                      </div>
                       </div>
                   </div>        
                   </div>          

index.js

@@ -9,6 +9,11 @@ statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id
 //init sqlite
 
 
+function random_rgba() {
+    var o = Math.round, r = Math.random, s = 255;
+    return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
+}
+
 function getSelectValues(sel) {
     var result = [];
     var options = sel && sel.options;
@@ -68,6 +73,15 @@ class db_handler {
         return res
     }
 
+    select_singlecond_id(column, condition, table){
+        console.log(column,condition);
+        var stmt = ("SELECT * FROM "+table+" WHERE "+column+" = '"+condition+"'");
+        var res = this.db.exec(stmt, {"returnValue":"resultRows"});
+        console.log(stmt)
+        return res
+    }
+
+
     select_multicond(columns, conditions, table){
         var add = (" OR ")
         var stmt = ("SELECT * FROM "+table+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
@@ -79,6 +93,21 @@ class db_handler {
         return this.db.exec(stmt, {"returnValue":"resultRows"})
     }
 
+    select_multicond_and(columns1, conditions1, columns2, conditions2,table){
+        var add = (" OR ")
+        var stmt = ("SELECT id FROM "+table+" WHERE ("+columns1[0]+"='"+conditions1[0]+"'")
+        for (var i=1;i<conditions1.length;i++){
+             stmt = stmt+add+columns1[i]+"='"+conditions1[i]+"'";
+        } 
+        stmt = stmt+")"+" AND ("+columns2[0]+" = '"+conditions2[0]+"'";
+        for (var i=1;i<conditions2.length;i++){
+            stmt = stmt+add+columns2[i]+"='"+conditions2[i]+"'";
+        }
+        stmt = stmt+")";
+        console.log(stmt);
+        return this.db.exec(stmt, {"returnValue":"resultRows"})
+    }
+
     select_distinct(column, table){
         var stmt = ("SELECT DISTINCT "+column+" FROM "+table);
         return this.db.exec(stmt, {"returnValue": "resultRows"})
@@ -105,6 +134,63 @@ class db_handler {
         return res
        }
 
+    select_records(locids, catids, subcatids){
+        var add = " OR ";
+        var stmt;
+        if (locids != 404){
+                stmt = "SELECT * FROM statistics WHERE (location_id = "+locids[0]
+                for (var i=1;i<locids.length;i++){
+                    stmt = stmt+add+"location_id"+"="+locids[i]+"";
+            }  
+        } else {
+            stmt = "SELECT * FROM statistics WHERE ("
+        }       
+
+        //if location is not a constraint and category is, format as the above stmt
+        if (locids == 404 && catids != 404){
+            stmt = stmt+"category_id = "+catids[0]
+            for (var i=1;i<catids.length;i++){
+                stmt = stmt+add+"category_id"+"="+catids[i]+"";
+            } 
+        //if location and category are all not constraints, keep stmt as is
+        } else if (locids == 404 && catids == 404){
+            stmt = stmt;
+        //if location is not a constraint
+        } else if (locids != 404 && catids != 404) {
+            stmt = stmt+") AND (category_id = "+catids[0]
+            for (var i=1;i<catids.length;i++){
+                stmt = stmt+add+"category_id"+"="+catids[i]+"";
+            } 
+        } else if (locids != 404 && catids == 404){
+            stmt = stmt;
+        }
+
+        //if select all
+        if (subcatids == 404 && catids == 404 && locids == 404) {
+            stmt = "SELECT * FROM statistics";
+        //if subcat constraint
+        } else if (subcatids != 404 && catids == 404 && locids == 404){
+            stmt = stmt + "subcat_id= "+subcatids[0];
+            for (var i=1;i<subcatids.length;i++){
+                stmt = stmt+add+"subcat_id"+"="+subcatids[i]+"";
+            }             
+        //if category is constraint and subcategory is also constraint
+        } else if (subcatids !=404 && catids != 404 || subcatids !=404 && catids ==404 && locids !=404){
+            stmt = stmt + ") AND (subcat_id = "+subcatids[0];
+            for (var i=1;i<subcatids.length;i++){
+                stmt = stmt+add+"subcat_id"+"="+subcatids[i]+"";
+            }              
+        }
+
+        if (stmt!="SELECT * FROM statistics"){
+            stmt = stmt + ")";
+        }
+
+        console.log(stmt);
+        return this.db.exec(stmt, {"returnValue": "resultRows"})
+
+    }
+
 }
 
 
@@ -116,27 +202,195 @@ class Component {
 }
 
 class FilterQueue{
-    constructor(){
+    constructor(db_handler){
+        this.dbhandler = db_handler;
         this.src = document.getElementById("filter_queue_template").innerHTML   ;
         this.lst = [];
     }
 
-    update(queryobj){
-        this.lst.push(queryobj);
+    render(){
         this.template = Handlebars.compile(this.src);
         document.getElementById("filter_queue").innerHTML=this.template(this.lst);
     }
+
+    update(queryobj){
+        this.lst.push(queryobj);
+        this.render();
+        console.log(this.lst)
     }
 
-new Chart(document.getElementById("chart_canvas"), {
-    type: 'bar',
+    clear(){
+        this.lst = [];
+        this.render();
+    }
+
+    get_id(name,conds,table){
+        return this.db_handler.select_multicond_and(name, conds, table);
+    }
+
+    go(){
+        //form structured query from lists, loop through the objects
+        var plotlst = [];
+        var pielst = [];
+        var k=0;
+        while (k<this.lst.length){
+            console.log(k)
+            var cur_obj= this.lst[k];
+            //{subdivs,lgas,categorys,subcategorys}
+            //SELECT id FROM locations WHERE subdivs=subdiv AND subdiv = subdiv AND
+            var lga_arr = cur_obj.lgas;
+            var subdiv_arr = cur_obj.subdivs;
+            var cat_arr = cur_obj.categorys;
+            var subcat_arr = cur_obj.subcategorys;
+            console.log(lga_arr, subdiv_arr, cat_arr, subcat_arr)
+            var column_arr = []
+            var column_arr1 = []
+            var query_arr1 = []
+            var query_arr2 = []
+            var locids = [];
+            var catids = [];
+            var subcatids = [];
+            var subcatid;
+            var locids_raw;
+            var res;
+
+            for (i=0;i<lga_arr.length;i++){
+                column_arr.push("LGA")
+                query_arr1.push(lga_arr[i])
+            }
+            for (i=0;i<subdiv_arr.length;i++){
+                column_arr1.push("subdiv")
+                query_arr2.push(subdiv_arr[i])
+            }
+
+            //if lga and subdiv are all constraint
+            if (lga_arr[0] != "*" && subdiv_arr[0] != "*"){
+                locids = this.dbhandler.select_multicond_and(column_arr,query_arr1,column_arr1,query_arr2,"location")
+
+            //if one of them is constraint
+            } else if (lga_arr[0] == "*" && subdiv_arr[0] !="*"){
+                //if lga is not constraint
+                locids_raw = this.dbhandler.select_multicond(column_arr1, subdiv_arr, "location")
+                for (var record in locids_raw){
+                    locids.push(record[0])
+                }
+                console.log(locids)
+            }
+            else if (subdiv_arr[0] == "*" && lga_arr[0] != "*"){
+                locids_raw = this.dbhandler.select_multicond(column_arr, lga_arr,"location");
+                console.log(locids_raw.length);
+                for (var record in locids_raw){
+                    console.log(record[0]);
+                    locids.push(record[0]);
+                }
+                console.log(locids,locids_raw);
+            }
+             else if (lga_arr[0] == "*" && subdiv_arr[0] == "*"){
+                locids = 404;
+            }
+
+            if (cat_arr[0] != "*"){
+                for (i=0;i<cat_arr.length;i++){
+                    catids.push(this.dbhandler.select_singlecond("name", cat_arr[i], "categories")[0][0])
+                }
+            } else {
+                catids = 404;
+            }
+
+            console.log(subcat_arr)
+
+            if (subcat_arr[0] != "*"){
+                for (i=0;i<subcat_arr.length;i++){
+                    subcatid = (this.dbhandler.select_singlecond("name", subcat_arr[i], "subcat"))
+                    subcatids.push(subcatid[0][0])
+                }
+            } else {
+                subcatids = 404;
+            }
+
+            //now select all data
+
+            console.log(locids, catids, subcatids)
+            res = this.dbhandler.select_records(locids,catids,subcatids);
+
+            console.log(res)
+            //now consolidate it
+            //if line then avg
+            var res_arr = []
+
+            //all array
+            for (var i=0;i<JSON.parse(res[0][5]).length;i++){
+                var val;
+                val = JSON.parse(res[0][5])[i]
+                //one array, find avg of all 1st val
+                for (var j=1;j<res.length;j++){
+                    val = (val+JSON.parse(res[j][5])[i])/2
+                }
+                res_arr.push(val);
+            }
+
+            //bar graph, sum everything in the query basically
+            //first column iteration
+            val = 0;
+            //modify JSON.parse(res[0][5]) and initial i to control the range of the months
+            for (var i=0; i<JSON.parse(res[0][5]).length;i++){
+                val = JSON.parse(res[0][5])[i]
+                for (var j=1;j<res.length;j++){
+                    val += JSON.parse(res[j][5])[i]
+                }
+                val+=val
+            }
+            console.log(val)
+            pielst.push(val)
+            
+            console.log(res_arr)
+            plotlst.push(res_arr)
+            k++
+        }
+
+        var label_arr=[];
+        for (let i = 0; i < 216; i++) {
+          label_arr.push(moment().year(1995).month(i+1).date(0).startOf('month').format("MMM YYYY"))
+        }
+        //formulate graph object
+        var graph_lst = []
+        for (var i=0; i<plotlst.length;i++){
+            graph_lst.push({"lineTension":0.8, label:"Query "+String(i+1), "data": plotlst[i], borderWidth:1})
+        }
+
+        var pie_lbl = [];
+        var pie_dslst = [];
+        var pie_colour = [];
+
+        //why don't we generate the bg colour as well
+        for (var i=0; i<pielst.length;i++){
+            pie_lbl.push("Query "+String(i+1))
+            pie_colour.push(random_rgba())
+        }
+
+        pie_dslst.push({"label": "NSW Crime 1995-2012", "data": pielst, "backgroundColor": pie_colour, "hoverOffset":4})
+
+
+        console.log(graph_lst, plotlst)
+        document.getElementById("chart_canvas");
+
+        if (this.chart){
+            this.chart.destroy();
+        }
+
+        if (this.pie){
+            this.pie.destroy();
+        }
+
+        if (this.bar){
+            this.bar.destroy();
+        }
+        
+        this.chart = new Chart(document.getElementById("chart_canvas"), {
+            type: "line",
             data: {
-      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-      datasets: [{
-        label: '# of Votes',
-        data: [12, 19, 3, 5, 2, 3],
-        borderWidth: 1
-      }]
+              labels: label_arr,
+              datasets: graph_lst
             },
             options: {
               scales: {
@@ -147,6 +401,38 @@ new Chart(document.getElementById("chart_canvas"), {
             }
           });
 
+        this.pie = new Chart(document.getElementById("pie_canvas"), {
+            type: "pie",
+            data: {
+            labels: pie_lbl,
+            datasets: pie_dslst,
+            }
+        });
+
+        this.bar = new Chart(document.getElementById("bar_canvas"),{
+            type: "bar",
+            data: {
+                labels: pie_lbl,
+                datasets : pie_dslst,
+            },
+            options: {
+                scales: {
+                  y: {
+                    beginAtZero: true
+                  }
+                }
+              },
+        })
+
+        var source = document.getElementById("result_template").innerHTML;
+        this.table_template = Handlebars.compile(source);
+        document.getElementById("result_table").innerHTML = this.table_template({"columns": pie_lbl, "months" :label_arr, "values":plotlst})
+    }
+}
+
+
+
+
 class ChartComponent extends Component {
     constructor(dbhandler){
         super(dbhandler);
@@ -259,7 +545,7 @@ class Filter extends Component{
                 }
             } else {
                 //just append the category into the subcategory
-                outarr.push(result);
+                outarr.push("No Subcat, Do not select");
             }
             console.log(outarr)
             document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr);
@@ -277,11 +563,36 @@ class Filter extends Component{
         var cat = getSelectValues(selelcat);
         var sub = getSelectValues(selelsub);
 
+        console.log(subdiv.length)
+
+
+
+
         var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""}
+        //too many darn records, will break it 
+        if (subdiv.length == 0){
+            pass_obj.subdivs = ["*"]
+        } else {
             pass_obj.subdivs = subdiv
+        } 
+
+        if (lga.length == 0){
+            pass_obj.lgas = ["*"];
+        } else {
             pass_obj.lgas = lga
+        }
+
+        if (cat.length == 0){
+            pass_obj.categorys = ["*"]
+        } else {
             pass_obj.categorys = cat
+        }
+
+        if (sub.length == 0){
+            pass_obj.subcategorys = ["*"]
+        } else {
              pass_obj.subcategorys = sub
+        }
         queue_filter.update(pass_obj);
     }
     
@@ -290,6 +601,20 @@ class Filter extends Component{
 function init(sqlite3){
     global_component = new Filter(new db_handler(sqlite3));
     chart = new Chart(new db_handler(sqlite3));
-    queue_filter = new FilterQueue();
+    queue_filter = new FilterQueue(new db_handler(sqlite3));
+
+    Handlebars.registerHelper('range', function(start, end) {
+        let result = [];
+        for (let i = start; i < end; i++) {
+          result.push(i);
+        }
+        return result;
+      });
+
+      Handlebars.registerHelper('maxLength', function(arrays) {
+        return Math.max(...arrays.map(array => array.length));
+      });
+
+
 }