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

less polished

Browse Source
This commit is contained in:
Yurun Chen
2024-12-12 16:33:24 +11:00
parent 3e64c270e6
commit b9ecdecd99
2 changed files with 170 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
index.html
View File

@@ -8,6 +8,86 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <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> </head>
<body style="background-color: #fffee0;"> <body style="background-color: #fffee0;">
<style>
.range_container {
display: flex;
flex-direction: column;
width: 80%;
margin: 35% auto;
}
.sliders_control {
position: relative;
min-height: 50px;
}
.form_control {
position: relative;
display: flex;
justify-content: space-between;
font-size: 24px;
color: #635a5a;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #f7f7f7;
}
input[type=range]::-webkit-slider-thumb:active {
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}
input[type="number"] {
color: #8a8383;
width: 50px;
height: 30px;
font-size: 20px;
border: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 2px;
width: 100%;
position: absolute;
background-color: #C6C6C6;
pointer-events: none;
}
#fromSlider {
height: 0;
z-index: 1;
}
</style>
<!--chartjs--> <!--chartjs-->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--handlebars--> <!--handlebars-->
@@ -59,7 +139,7 @@
<!--template--> <!--template-->
<script id="subdiv-template" type="text/x-handlebars-template"> <script id="subdiv-template" type="text/x-handlebars-template">
<div> <div>
<strong>Subdiv:</strong><br> <strong>Subdivision:</strong><br>
<select oninput="global_component.update_listbox(0)" class="form-select selectwidthauto" multiple aria-label="multiple select" id="subdiv_sel" 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}} {{#each this}}
<option>{{this}}</option> <option>{{this}}</option>
@@ -98,7 +178,7 @@
<strong>Category:</strong><br> <strong>Category:</strong><br>
<select oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel" multiple="multiple" size="5"> <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}}</option>
{{/each}} {{/each}}
</select> </select>
</div> </div>
@@ -114,7 +194,7 @@
<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" id="subcat_sel" > <select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" disabled>
{{#each this}} {{#each this}}
<option>{{this}}</option> <option>{{this}}</option>
{{/each}} {{/each}}
@@ -123,6 +203,7 @@
</script> </script>
<!--/template--> <!--/template-->
<br> <br>
<button type="button" class="btn btn-warning" onclick="global_component.clear()">Clear</button>
<button type="button" class="btn btn-primary" onclick="global_component.add_filter()">Add filter</button> <button type="button" class="btn btn-primary" onclick="global_component.add_filter()">Add filter</button>
</li> </li>
@@ -138,11 +219,12 @@
<script id="filter_queue_template" type="text/x-handlebars-template"> <script id="filter_queue_template" type="text/x-handlebars-template">
<div> <div>
<h5>Queries:</h5> <h5>Queries:</h5>
<p>*multiple queries possible</p>
<br> <br>
<table class="table"> <table class="table">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">Subdiv</th> <th scope="col">Subdivision</th>
<th scope="col">LGA</th> <th scope="col">LGA</th>
<th scope="col">Category</th> <th scope="col">Category</th>
<th scope="col">Subcategory</th> <th scope="col">Subcategory</th>
@@ -159,7 +241,15 @@
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
<h5>Multiple choices in a given column for line graph will be AVGed. Bar graph will be cumulative.</h5> <br>
<label for="customRange1" class="form-label">Begin Month</label><br>
<input type="range" class="form-range w-25 text-center" min="0" max="215" step="1" id="customRange1">
<br>
<label for="customRange2" class="form-label">End Month</label><br>
<input type="range" class="form-range w-25 text-center" min="1" max="216" step="1" id="customRange2">
<br>
<p>*Multiple choices in a given column for line graph will be averaged. Bar graph will be cumulative.</p>
</div> </div>
<button type="button" class="btn btn-danger" onclick="queue_filter.clear()">Clear query queue</button> <button type="button" class="btn btn-danger" onclick="queue_filter.clear()">Clear query queue</button>
@@ -187,24 +277,33 @@
<div id="result_table"></div> <div id="result_table"></div>
<!--template--> <!--template-->
<script id="result_template" type="text/x-handlebars-template"> <script id="result_template" type="text/x-handlebars-template">
<br>
<table class="table"> <table class="table">
<thead class="thead-dark"> <thead>
<tr> <th>Months</th>
<th scope="col">Month</th> {{#each this.columns}}
{{#each columns}}
<th scope="col">{{this}}</th> <th scope="col">{{this}}</th>
{{/each}} {{/each}}
</tr>
</thead> </thead>
<tbody> <tbody>
{{#each (range 0 (maxLength this)) as |rowIndex|}} {{#each this.values.[0]}}
<tr> <tr>
<td>{{months.[rowIndex]}}</td> <td>{{lookup ../months @index}}</td>
{{#each this as |array|}} {{#each ../values}}
<td>{{array.[rowIndex]}}</td> {{log this}}
<td>{{lookup this @../index}}</td>
{{/each}} {{/each}}
</tr> </tr>
{{/each}} {{/each}}
<tr>
<td>Total:</td>
{{#each this.sum}}
<td>{{this}}</td>
{{/each}}
</tr>
</tbody> </tbody>
</table> </table>
</script> </script>

60
index.js
View File

@@ -271,18 +271,27 @@ class FilterQueue{
} else if (lga_arr[0] == "*" && subdiv_arr[0] !="*"){ } else if (lga_arr[0] == "*" && subdiv_arr[0] !="*"){
//if lga is not constraint //if lga is not constraint
locids_raw = this.dbhandler.select_multicond(column_arr1, subdiv_arr, "location") locids_raw = this.dbhandler.select_multicond(column_arr1, subdiv_arr, "location")
if (locids_raw.length != 1){
for (var record in locids_raw){ for (var record in locids_raw){
locids.push(record[0]) locids.push(record[0])
} }
} else {
locids = [locids_raw[0][0]]
}
console.log(locids) console.log(locids)
} }
else if (subdiv_arr[0] == "*" && lga_arr[0] != "*"){ else if (subdiv_arr[0] == "*" && lga_arr[0] != "*"){
locids_raw = this.dbhandler.select_multicond(column_arr, lga_arr,"location"); locids_raw = this.dbhandler.select_multicond(column_arr, lga_arr,"location");
console.log(locids_raw.length); console.log(locids_raw);
if (locids_raw.length != 1){
for (var record in locids_raw){ for (var record in locids_raw){
console.log(record[0]); console.log(record);
locids.push(record[0]); locids.push(record[0]);
} }
} else {
locids = [locids_raw[0][0]]
}
console.log(locids,locids_raw); console.log(locids,locids_raw);
} }
else if (lga_arr[0] == "*" && subdiv_arr[0] == "*"){ else if (lga_arr[0] == "*" && subdiv_arr[0] == "*"){
@@ -326,7 +335,7 @@ class FilterQueue{
for (var j=1;j<res.length;j++){ for (var j=1;j<res.length;j++){
val = (val+JSON.parse(res[j][5])[i])/2 val = (val+JSON.parse(res[j][5])[i])/2
} }
res_arr.push(val); res_arr.push(Math.round(val));
} }
//bar graph, sum everything in the query basically //bar graph, sum everything in the query basically
@@ -338,7 +347,7 @@ class FilterQueue{
for (var j=1;j<res.length;j++){ for (var j=1;j<res.length;j++){
val += JSON.parse(res[j][5])[i] val += JSON.parse(res[j][5])[i]
} }
val+=val val+=Math.round(val)
} }
console.log(val) console.log(val)
pielst.push(val) pielst.push(val)
@@ -426,7 +435,8 @@ class FilterQueue{
var source = document.getElementById("result_template").innerHTML; var source = document.getElementById("result_template").innerHTML;
this.table_template = Handlebars.compile(source); this.table_template = Handlebars.compile(source);
document.getElementById("result_table").innerHTML = this.table_template({"columns": pie_lbl, "months" :label_arr, "values":plotlst}) console.log(label_arr)
document.getElementById("result_table").innerHTML = this.table_template({"columns": pie_lbl, "months" :label_arr, "values":plotlst, "sum":pielst})
} }
} }
@@ -465,23 +475,38 @@ class Filter extends Component{
//subdiv filter rendering //subdiv filter rendering
var source = document.getElementById("subdiv-template").innerHTML; var source = document.getElementById("subdiv-template").innerHTML;
this.subdiv_template = Handlebars.compile(source); this.subdiv_template = Handlebars.compile(source);
var html = this.subdiv_template(this.distinct_subdiv); var html = this.subdiv_template(this.distinct_subdiv.sort());
document.getElementById("subdiv").innerHTML = html; document.getElementById("subdiv").innerHTML = html;
//LGA filter rendering //LGA filter rendering
source = document.getElementById("lga-template").innerHTML; source = document.getElementById("lga-template").innerHTML;
this.lga_template = Handlebars.compile(source); this.lga_template = Handlebars.compile(source);
document.getElementById("lga").innerHTML = this.lga_template(this.distinct_lga); document.getElementById("lga").innerHTML = this.lga_template(this.distinct_lga.sort());
//category filter rendering //category filter rendering
source = document.getElementById("category-template").innerHTML; source = document.getElementById("category-template").innerHTML;
this.category_template = Handlebars.compile(source); this.category_template = Handlebars.compile(source);
document.getElementById("category").innerHTML = this.category_template(this.category); var categoryin = [];
for (var i=0; i<this.category.length; i++){
categoryin.push(this.category[i][1])
}
document.getElementById("category").innerHTML = this.category_template(categoryin.sort());
//subcat filter rendering //subcat filter rendering
source = document.getElementById("subcategory-template").innerHTML; source = document.getElementById("subcategory-template").innerHTML;
this.subcat_template = Handlebars.compile(source); this.subcat_template = Handlebars.compile(source);
document.getElementById("subcategory").innerHTML = this.subcat_template(this.all_subcat) document.getElementById("subcategory").innerHTML = this.subcat_template(this.all_subcat.sort())
//don't select statistics, use where to filter too darn slow 266k records //don't select statistics, use where to filter too darn slow 266k records
} }
clear(){
var sel_lst = [document.getElementById("subdiv_sel"),document.getElementById("lga_sel"),document.getElementById("category_sel"),document.getElementById("subcat_sel")]
for (var j=0; j<sel_lst.length;j++){
for(var i=0;i<sel_lst[j].options.length;i++){
if(sel_lst[j].options[i].selected==true){
sel_lst[j].options[i].selected=false;
}
}
}
}
//there shall be linked data, on update filter out subdata //there shall be linked data, on update filter out subdata
update_listbox(id){ update_listbox(id){
//if subdiv fetch according LGA //if subdiv fetch according LGA
@@ -511,7 +536,7 @@ class Filter extends Component{
outarr.push(queryres[i][2]); outarr.push(queryres[i][2]);
} }
console.log(outarr) console.log(outarr)
document.getElementById("lga").innerHTML = this.lga_template(outarr); document.getElementById("lga").innerHTML = this.lga_template(outarr.sort());
} 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("category_sel"); var selel = document.getElementById("category_sel");
@@ -543,12 +568,13 @@ class Filter extends Component{
//extract subcat list //extract subcat list
outarr.push(queryres[i][1]); outarr.push(queryres[i][1]);
} }
document.getElementById("subcat_sel").removeAttribute("disabled");
document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr.sort());
} else { } else {
document.getElementById("subcat_sel").innerHTML = this.subcat_template([]);
//just append the category into the subcategory //just append the category into the subcategory
outarr.push("No Subcat, Do not select"); document.getElementById("subcat_sel").setAttribute("disabled", true);
} }
console.log(outarr)
document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr);
} }
} }
@@ -612,7 +638,13 @@ function init(sqlite3){
}); });
Handlebars.registerHelper('maxLength', function(arrays) { Handlebars.registerHelper('maxLength', function(arrays) {
return Math.max(...arrays.map(array => array.length)); var len = Math.max(...arrays.map(array => array.length));
console.log(len);
return len;
});
Handlebars.registerHelper("setVar", function(varName, varValue, options) {
options.data.root[varName] = varValue;
}); });