Compare commits
2 Commits
163a3cffc4
...
b9ecdecd99
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b9ecdecd99 | ||
|
|
3e64c270e6 |
170
index.html
170
index.html
@@ -7,7 +7,87 @@
|
|||||||
<!-- dependencies -->
|
<!-- 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">
|
<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: 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-->
|
<!--chartjs-->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
<!--handlebars-->
|
<!--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>
|
<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 -->
|
<!-- SQL -->
|
||||||
<script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
|
<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-->
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
|
<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">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
@@ -58,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>
|
||||||
@@ -97,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>
|
||||||
@@ -113,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}}
|
||||||
@@ -122,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>
|
||||||
|
|
||||||
@@ -137,11 +219,13 @@
|
|||||||
<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/LGA</th>
|
<th scope="col">Subdivision</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>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -149,20 +233,82 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
{{#each this}}
|
{{#each this}}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{this.subdivs}} {{this.lgas}}</td>
|
<td style="word-break: break-all">{{this.subdivs}}</td>
|
||||||
<td>{{this.categorys}}</td>
|
<td style="word-break: break-all"> {{this.lgas}}</td>
|
||||||
<td>{{this.subcategorys}}</td>
|
<td style="word-break: break-all">{{this.categorys}}</td>
|
||||||
|
<td style="word-break: break-all">{{this.subcategorys}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
</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>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
|
<br>
|
||||||
<div class="row">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
397
index.js
397
index.js
@@ -9,6 +9,11 @@ statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id
|
|||||||
//init sqlite
|
//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) {
|
function getSelectValues(sel) {
|
||||||
var result = [];
|
var result = [];
|
||||||
var options = sel && sel.options;
|
var options = sel && sel.options;
|
||||||
@@ -68,6 +73,15 @@ class db_handler {
|
|||||||
return res
|
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){
|
select_multicond(columns, conditions, table){
|
||||||
var add = (" OR ")
|
var add = (" OR ")
|
||||||
var stmt = ("SELECT * FROM "+table+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
|
var stmt = ("SELECT * FROM "+table+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
|
||||||
@@ -79,6 +93,21 @@ class db_handler {
|
|||||||
return this.db.exec(stmt, {"returnValue":"resultRows"})
|
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){
|
select_distinct(column, table){
|
||||||
var stmt = ("SELECT DISTINCT "+column+" FROM "+table);
|
var stmt = ("SELECT DISTINCT "+column+" FROM "+table);
|
||||||
return this.db.exec(stmt, {"returnValue": "resultRows"})
|
return this.db.exec(stmt, {"returnValue": "resultRows"})
|
||||||
@@ -105,6 +134,63 @@ class db_handler {
|
|||||||
return res
|
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,204 @@ class Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class FilterQueue{
|
class FilterQueue{
|
||||||
constructor(){
|
constructor(db_handler){
|
||||||
|
this.dbhandler = db_handler;
|
||||||
this.src = document.getElementById("filter_queue_template").innerHTML ;
|
this.src = document.getElementById("filter_queue_template").innerHTML ;
|
||||||
this.lst = [];
|
this.lst = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
update(queryobj){
|
render(){
|
||||||
this.lst.push(queryobj);
|
|
||||||
this.template = Handlebars.compile(this.src);
|
this.template = Handlebars.compile(this.src);
|
||||||
document.getElementById("filter_queue").innerHTML=this.template(this.lst);
|
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"), {
|
clear(){
|
||||||
type: 'bar',
|
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: {
|
data: {
|
||||||
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
|
labels: label_arr,
|
||||||
datasets: [{
|
datasets: graph_lst
|
||||||
label: '# of Votes',
|
|
||||||
data: [12, 19, 3, 5, 2, 3],
|
|
||||||
borderWidth: 1
|
|
||||||
}]
|
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
scales: {
|
scales: {
|
||||||
@@ -147,6 +410,39 @@ 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);
|
||||||
|
console.log(label_arr)
|
||||||
|
document.getElementById("result_table").innerHTML = this.table_template({"columns": pie_lbl, "months" :label_arr, "values":plotlst, "sum":pielst})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class ChartComponent extends Component {
|
class ChartComponent extends Component {
|
||||||
constructor(dbhandler){
|
constructor(dbhandler){
|
||||||
super(dbhandler);
|
super(dbhandler);
|
||||||
@@ -179,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
|
||||||
@@ -225,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");
|
||||||
@@ -257,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(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 cat = getSelectValues(selelcat);
|
||||||
var sub = getSelectValues(selelsub);
|
var sub = getSelectValues(selelsub);
|
||||||
|
|
||||||
|
console.log(subdiv.length)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""}
|
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
|
pass_obj.subdivs = subdiv
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lga.length == 0){
|
||||||
|
pass_obj.lgas = ["*"];
|
||||||
|
} else {
|
||||||
pass_obj.lgas = lga
|
pass_obj.lgas = lga
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cat.length == 0){
|
||||||
|
pass_obj.categorys = ["*"]
|
||||||
|
} else {
|
||||||
pass_obj.categorys = cat
|
pass_obj.categorys = cat
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sub.length == 0){
|
||||||
|
pass_obj.subcategorys = ["*"]
|
||||||
|
} else {
|
||||||
pass_obj.subcategorys = sub
|
pass_obj.subcategorys = sub
|
||||||
|
}
|
||||||
queue_filter.update(pass_obj);
|
queue_filter.update(pass_obj);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -290,6 +627,26 @@ class Filter extends Component{
|
|||||||
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();
|
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