dchen4/data-analyse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

queue added

Browse Source
This commit is contained in:
Yurun Chen
2024-12-06 15:11:16 +11:00
parent a6ee2d6889
commit 163a3cffc4
2 changed files with 102 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@@ -95,7 +95,7 @@
<script id="category-template" type="text/x-handlebars-template"> <script id="category-template" type="text/x-handlebars-template">
<div> <div>
<strong>Category:</strong><br> <strong>Category:</strong><br>
<select class="form-select selectwidthauto" multiple aria-label="multiple select" name="category" > <select oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel" multiple="multiple" size="5">
{{#each this}} {{#each this}}
<option>{{this.[1]}}</option> <option>{{this.[1]}}</option>
{{/each}} {{/each}}
@@ -113,9 +113,9 @@
<script id="subcategory-template" type="text/x-handlebars-template"> <script id="subcategory-template" type="text/x-handlebars-template">
<div> <div>
<strong>Subcategory:</strong><br> <strong>Subcategory:</strong><br>
<select class="form-select selectwidthauto" multiple aria-label="multiple select" name="subcat_sel" > <select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" >
{{#each this}} {{#each this}}
<option>{{this.[1]}}</option> <option>{{this}}</option>
{{/each}} {{/each}}
</select> </select>
</div> </div>
@@ -131,7 +131,35 @@
<div class="col-8"> <div class="col-8">
<div class="col-12"> <div class="col-12">
<!--this is gonna be the selected values--> <!--this is gonna be the selected values-->
<div class="row">hey</div> <div class="row">
<div id="filter_queue"></div>
<!--Template-->
<script id="filter_queue_template" type="text/x-handlebars-template">
<div>
<h5>Queries:</h5>
<br>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Subdiv/LGA</th>
<th scope="col">Category</th>
<th scope="col">Subcategory</th>
</tr>
</thead>
<tbody>
{{#each this}}
<tr>
<td>{{this.subdivs}} {{this.lgas}}</td>
<td>{{this.categorys}}</td>
<td>{{this.subcategorys}}</td>
</tr>
{{/each}}
</tbody>
</table>
<h5>Multiple choices in a given column will be AVGed.</h5>
</div>
</script>
</div>
<div class="row"> <div class="row">
<div> <div>
<canvas id="chart_canvas"></canvas> <canvas id="chart_canvas"></canvas>

79
index.js
View File

@@ -7,6 +7,8 @@ statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id
*/ */
//init sqlite //init sqlite
function getSelectValues(sel) { function getSelectValues(sel) {
var result = []; var result = [];
var options = sel && sel.options; var options = sel && sel.options;
@@ -62,7 +64,7 @@ class db_handler {
console.log(column,condition); 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"}); var res = this.db.exec(stmt, {"returnValue":"resultRows"});
console.log(res) console.log(stmt)
return res return res
} }
@@ -82,25 +84,50 @@ class db_handler {
return this.db.exec(stmt, {"returnValue": "resultRows"}) return this.db.exec(stmt, {"returnValue": "resultRows"})
} }
select_n_join_multicond(selects, joinparams, conditions, columns){ select_n_join_multicond(selects, joinparams, conditions, columns,table){
var cols = []; var cols = [];
var add = " OR "; var add = " OR ";
//match according subcat //match according subcat
var stmt = ("SELECT "+selects+" FROM subcat INNER JOIN ON "+joinparams[0]+"="+joinparams[1]+" WHERE ("+columns[0]+"='"+conditions[0]+"'") var stmt = ("SELECT "+selects+" FROM "+table+" INNER JOIN categories ON "+joinparams[0]+"="+joinparams[1]+" WHERE ("+columns+"='"+conditions[0]+"'")
for (var i=1;i<conditions.length;i++){ for (var i=1;i<conditions.length;i++){
stmt = stmt+add+columns[i]+"='"+conditions[i]+"'"; stmt = stmt+add+columns+"='"+conditions[i]+"'";
} }
stmt = stmt+")"; stmt = stmt+")";
console.log(stmt)
return this.db.exec(stmt, {"returnValue": "resultRows"})
}
select_n_join_singlecond(joinparams, condition,column){
var stmt = "SELECT * FROM subcat INNER JOIN categories ON "+joinparams[0]+" = "+joinparams[1]+" WHERE ("+column+"="+condition+")";
var res = this.db.exec(stmt, {"returnValue": "resultRows"})
console.log(stmt)
console.log(res)
return res
} }
} }
class Component { class Component {
constructor(dbhandler){ constructor(dbhandler){
this.handler = dbhandler; this.handler = dbhandler;
} }
} }
class FilterQueue{
constructor(){
this.src = document.getElementById("filter_queue_template").innerHTML ;
this.lst = [];
}
update(queryobj){
this.lst.push(queryobj);
this.template = Handlebars.compile(this.src);
document.getElementById("filter_queue").innerHTML=this.template(this.lst);
}
}
new Chart(document.getElementById("chart_canvas"), { new Chart(document.getElementById("chart_canvas"), {
type: 'bar', type: 'bar',
data: { data: {
@@ -133,6 +160,7 @@ class ChartComponent extends Component {
} }
} }
//left column filter component //left column filter component
class Filter extends Component{ class Filter extends Component{
constructor(dbhandler){ constructor(dbhandler){
@@ -144,7 +172,7 @@ class Filter extends Component{
this.all_location = this.handler.select_all("location"); this.all_location = this.handler.select_all("location");
this.distinct_subdiv = this.handler.select_distinct("subdiv","location") this.distinct_subdiv = this.handler.select_distinct("subdiv","location")
console.log(this.distinct_subdiv); console.log(this.distinct_subdiv);
this.all_subcat = this.handler.select_all("subcat"); this.all_subcat = this.handler.select_distinct("name","subcat");
this.category = this.handler.select_all("categories"); this.category = this.handler.select_all("categories");
this.distinct_lga = this.handler.select_distinct("lga","location") this.distinct_lga = this.handler.select_distinct("lga","location")
console.log(this.category) console.log(this.category)
@@ -200,10 +228,11 @@ class Filter extends Component{
document.getElementById("lga").innerHTML = this.lga_template(outarr); document.getElementById("lga").innerHTML = this.lga_template(outarr);
} else if (id=1){ } else if (id=1){
//if it is subcat according to cat //if it is subcat according to cat
var selel = document.getElementById("lga_sel"); var selel = document.getElementById("category_sel");
var result = getSelectValues(selel); var result = getSelectValues(selel);
var outarr = []; var outarr = [];
var queryres; var queryres;
//if multisel //if multisel
if (result.length != 1){ if (result.length != 1){
console.log(result) console.log(result)
@@ -213,26 +242,54 @@ class Filter extends Component{
conds.push(result[i]); conds.push(result[i]);
columns.push(""); columns.push("");
} }
queryres = this.handler.select_n_join_multicond("subcat.id",joinparams.columns, conds, "location");
queryres = this.handler.select_n_join_multicond("subcat.id, subcat.name",["categories.id " ," subcat.cat_id"], conds, "categories.name","subcat");
console.log(queryres) console.log(queryres)
} else { } else {
var cat_id = this.handler.select_singlecond("name",result[0],"categories")[0][0];
//if single select //if single select
queryres = this.handler.select_singlecond("subdiv",result[0],"location"); queryres = this.handler.select_n_join_singlecond(["subcat.cat_id","categories.id"],cat_id,"categories.id");
} }
if (queryres.length !=0){
for (var i=0; i<queryres.length;i++){ for (var i=0; i<queryres.length;i++){
//extract LGA list //extract subcat list
outarr.push(queryres[i][2]); outarr.push(queryres[i][1]);
}
} else {
//just append the category into the subcategory
outarr.push(result);
} }
console.log(outarr) console.log(outarr)
document.getElementById("lga").innerHTML = this.lga_template(outarr); document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr);
} }
} }
add_filter(){
var selelsubdiv = document.getElementById("subdiv_sel");
var selellga = document.getElementById("lga_sel");
var selelcat = document.getElementById("category_sel");
var selelsub = document.getElementById("subcat_sel");
var subdiv = getSelectValues(selelsubdiv);
var lga = getSelectValues(selellga);
var cat = getSelectValues(selelcat);
var sub = getSelectValues(selelsub);
var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""}
pass_obj.subdivs = subdiv
pass_obj.lgas = lga
pass_obj.categorys = cat
pass_obj.subcategorys = sub
queue_filter.update(pass_obj);
}
} }
function init(sqlite3){ function init(sqlite3){
global_component = new Filter(new db_handler(sqlite3)); global_component = new Filter(new db_handler(sqlite3));
chart = new Chart(new db_handler(sqlite3)); chart = new Chart(new db_handler(sqlite3));
queue_filter = new FilterQueue();
} }