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

sadfas

Browse Source
This commit is contained in:
Yurun Chen
2024-12-04 14:17:54 +11:00
parent 9cf7776a20
commit 6e91372224
2 changed files with 148 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@@ -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>

131
index.js
View File

@@ -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);
var html = subdiv_template(this.distinct_subdiv);
this.subdiv_template = Handlebars.compile(source);
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);
document.getElementById("lga").innerHTML = lga_template(this.all_location);
this.lga_template = Handlebars.compile(source);
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);
console.log(category_template(this.category))
document.getElementById("category").innerHTML = category_template(this.category);
this.category_template = Handlebars.compile(source);
document.getElementById("category").innerHTML = this.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(){