Compare commits
2 Commits
163a3cffc4
...
b9ecdecd99
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b9ecdecd99 | ||
|
|
3e64c270e6 |
170
index.html
170
index.html
@@ -7,7 +7,87 @@
|
||||
<!-- 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;">
|
||||
<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-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<!--handlebars-->
|
||||
@@ -19,11 +99,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="#"> Crime statistic analysis</a>
|
||||
<a class="navbar-brand" href="#"> 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>
|
||||
@@ -58,7 +139,7 @@
|
||||
<!--template-->
|
||||
<script id="subdiv-template" type="text/x-handlebars-template">
|
||||
<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">
|
||||
{{#each this}}
|
||||
<option>{{this}}</option>
|
||||
@@ -97,7 +178,7 @@
|
||||
<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">
|
||||
{{#each this}}
|
||||
<option>{{this.[1]}}</option>
|
||||
<option>{{this}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
@@ -113,7 +194,7 @@
|
||||
<script id="subcategory-template" type="text/x-handlebars-template">
|
||||
<div>
|
||||
<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}}
|
||||
<option>{{this}}</option>
|
||||
{{/each}}
|
||||
@@ -122,6 +203,7 @@
|
||||
</script>
|
||||
<!--/template-->
|
||||
<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>
|
||||
</li>
|
||||
|
||||
@@ -137,11 +219,13 @@
|
||||
<script id="filter_queue_template" type="text/x-handlebars-template">
|
||||
<div>
|
||||
<h5>Queries:</h5>
|
||||
<p>*multiple queries possible</p>
|
||||
<br>
|
||||
<table class="table">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">Subdiv/LGA</th>
|
||||
<th scope="col">Subdivision</th>
|
||||
<th scope="col">LGA</th>
|
||||
<th scope="col">Category</th>
|
||||
<th scope="col">Subcategory</th>
|
||||
</tr>
|
||||
@@ -149,20 +233,82 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<br>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<th>Months</th>
|
||||
{{#each this.columns}}
|
||||
<th scope="col">{{this}}</th>
|
||||
{{/each}}
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each this.values.[0]}}
|
||||
<tr>
|
||||
<td>{{lookup ../months @index}}</td>
|
||||
{{#each ../values}}
|
||||
{{log this}}
|
||||
<td>{{lookup this @../index}}</td>
|
||||
|
||||
{{/each}}
|
||||
|
||||
</tr>
|
||||
{{/each}}
|
||||
<tr>
|
||||
<td>Total:</td>
|
||||
{{#each this.sum}}
|
||||
<td>{{this}}</td>
|
||||
{{/each}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
425
index.js
425
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,36 +202,246 @@ 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)
|
||||
}
|
||||
|
||||
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")
|
||||
if (locids_raw.length != 1){
|
||||
for (var record in locids_raw){
|
||||
locids.push(record[0])
|
||||
}
|
||||
} else {
|
||||
locids = [locids_raw[0][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);
|
||||
if (locids_raw.length != 1){
|
||||
for (var record in locids_raw){
|
||||
console.log(record);
|
||||
locids.push(record[0]);
|
||||
}
|
||||
} else {
|
||||
locids = [locids_raw[0][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(Math.round(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+=Math.round(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: label_arr,
|
||||
datasets: graph_lst
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
console.log(label_arr)
|
||||
document.getElementById("result_table").innerHTML = this.table_template({"columns": pie_lbl, "months" :label_arr, "values":plotlst, "sum":pielst})
|
||||
}
|
||||
}
|
||||
|
||||
new Chart(document.getElementById("chart_canvas"), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
class ChartComponent extends Component {
|
||||
constructor(dbhandler){
|
||||
@@ -179,23 +475,38 @@ class Filter extends Component{
|
||||
//subdiv filter rendering
|
||||
var source = document.getElementById("subdiv-template").innerHTML;
|
||||
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;
|
||||
//LGA filter rendering
|
||||
source = document.getElementById("lga-template").innerHTML;
|
||||
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
|
||||
source = document.getElementById("category-template").innerHTML;
|
||||
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
|
||||
source = document.getElementById("subcategory-template").innerHTML;
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
update_listbox(id){
|
||||
//if subdiv fetch according LGA
|
||||
@@ -225,7 +536,7 @@ class Filter extends Component{
|
||||
outarr.push(queryres[i][2]);
|
||||
}
|
||||
console.log(outarr)
|
||||
document.getElementById("lga").innerHTML = this.lga_template(outarr);
|
||||
document.getElementById("lga").innerHTML = this.lga_template(outarr.sort());
|
||||
} else if (id=1){
|
||||
//if it is subcat according to cat
|
||||
var selel = document.getElementById("category_sel");
|
||||
@@ -257,12 +568,13 @@ class Filter extends Component{
|
||||
//extract subcat list
|
||||
outarr.push(queryres[i][1]);
|
||||
}
|
||||
document.getElementById("subcat_sel").removeAttribute("disabled");
|
||||
document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr.sort());
|
||||
} else {
|
||||
document.getElementById("subcat_sel").innerHTML = this.subcat_template([]);
|
||||
//just append the category into the subcategory
|
||||
outarr.push(result);
|
||||
document.getElementById("subcat_sel").setAttribute("disabled", true);
|
||||
}
|
||||
console.log(outarr)
|
||||
document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -277,11 +589,36 @@ class Filter extends Component{
|
||||
var cat = getSelectValues(selelcat);
|
||||
var sub = getSelectValues(selelsub);
|
||||
|
||||
console.log(subdiv.length)
|
||||
|
||||
|
||||
|
||||
|
||||
var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""}
|
||||
pass_obj.subdivs = subdiv
|
||||
pass_obj.lgas = lga
|
||||
pass_obj.categorys = cat
|
||||
pass_obj.subcategorys = sub
|
||||
//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 +627,26 @@ 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) {
|
||||
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;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user