all working
This commit is contained in:
BIN
data.sqlite3
BIN
data.sqlite3
Binary file not shown.
@@ -64,7 +64,7 @@ for i in range(len(biglst)):
|
||||
locid = cur.fetchall()[0][0]
|
||||
cur.execute("SELECT id FROM categories WHERE name='"+biglst[i][2]+"'")
|
||||
catid = cur.fetchall()[0][0]
|
||||
cur.execute("SELECT id FROM subcat WHERE cat_id='"+str(catid)+"'")
|
||||
cur.execute("SELECT id FROM subcat WHERE name ='"+str(biglst[i][3])+"'")
|
||||
subcatid = 0
|
||||
#if there are no subcategory
|
||||
try:
|
||||
@@ -80,7 +80,7 @@ for i in range(len(biglst)):
|
||||
|
||||
|
||||
init_lst.append({"cat_id": catid, "subcat_id": subcatid, "loc_id": locid, "mnth": pandas.to_datetime(str(init_date+numpy.timedelta64(j-4, 'M'))).strftime('%Y.%m'),"cnt":json.dumps(dat_lst)})
|
||||
print(str(i))
|
||||
print(i)
|
||||
cur.executemany(stat_ins, init_lst)
|
||||
conn.commit()
|
||||
|
||||
|
||||
121
index.html
121
index.html
@@ -5,99 +5,16 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- 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/@coreui/coreui@5.2.0/dist/css/themes/bootstrap/bootstrap.min.css" rel="stylesheet" integrity="sha384-nQQlHXZO4YmST3YDqk/JU3f1t2D58a/nPd1QbiLecouKn68glzRym4BlOxlr5Rrg" crossorigin="anonymous">
|
||||
</head>
|
||||
<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>
|
||||
<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/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
|
||||
<!--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-->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
|
||||
<!-- vue stuff-->
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></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 -->
|
||||
<!-- bootstrap--> <!-- 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>
|
||||
|
||||
@@ -224,6 +141,7 @@
|
||||
<table class="table">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Subdivision</th>
|
||||
<th scope="col">LGA</th>
|
||||
<th scope="col">Category</th>
|
||||
@@ -233,6 +151,7 @@
|
||||
<tbody>
|
||||
{{#each this}}
|
||||
<tr>
|
||||
<td>{{@index}}</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>
|
||||
@@ -242,13 +161,11 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
|
||||
<label for="startRange" class="form-label">Start Month</label>
|
||||
<input type="range" class="form-range" min="0" max="216" id="startRange" oninput="queue_filter.bound_range(0)">
|
||||
<label for="endRange" class="form-label">End Month</label>
|
||||
<input type="range" class="form-range" min="0" max="216" id="endRange" oninput="queue_filter.bound_range(1)">
|
||||
<p class="text-center" id="mnth_range"></p>
|
||||
<p>*Multiple choices in a given column for line graph will be averaged. Bar graph will be cumulative.</p>
|
||||
</div>
|
||||
|
||||
@@ -272,7 +189,20 @@
|
||||
</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="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<canvas id="pie_canvas"></canvas>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<canvas id="bar_canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
<div id="result_table"></div>
|
||||
<!--template-->
|
||||
@@ -291,7 +221,6 @@
|
||||
<tr>
|
||||
<td>{{lookup ../months @index}}</td>
|
||||
{{#each ../values}}
|
||||
{{log this}}
|
||||
<td>{{lookup this @../index}}</td>
|
||||
|
||||
{{/each}}
|
||||
|
||||
40
index.js
40
index.js
@@ -216,7 +216,11 @@ class FilterQueue{
|
||||
update(queryobj){
|
||||
this.lst.push(queryobj);
|
||||
this.render();
|
||||
console.log(this.lst)
|
||||
this.start_rng = document.getElementById("startRange");
|
||||
this.end_rng = document.getElementById("endRange");
|
||||
this.start_rng.value = 0;
|
||||
this.end_rng.value = 215;
|
||||
this.bound_range(1)
|
||||
}
|
||||
|
||||
clear(){
|
||||
@@ -228,8 +232,35 @@ class FilterQueue{
|
||||
return this.db_handler.select_multicond_and(name, conds, table);
|
||||
}
|
||||
|
||||
bound_range(which){
|
||||
this.start_rng = document.getElementById("startRange");
|
||||
this.end_rng = document.getElementById("endRange");
|
||||
var start_cnt = Number(this.start_rng.value);
|
||||
var end_cnt = Number(this.end_rng.value);
|
||||
if (which ==0){
|
||||
if (start_cnt >= end_cnt){
|
||||
console.log(start_cnt, end_cnt);
|
||||
this.start_rng.value = Number(end_cnt)-1;
|
||||
}
|
||||
} else if (which == 1){
|
||||
if (end_cnt <= start_cnt){
|
||||
this.end_rng.value = Number(start_cnt)+1;
|
||||
}
|
||||
}
|
||||
|
||||
var start_mnth = moment().year(1995).month(Number(this.start_rng.value)+1).date(0).startOf('month').format("MMM YYYY");
|
||||
var end_mnth = moment().year(1995).month(Number(this.end_rng.value)+1).date(0).startOf('month').format("MMM YYYY");
|
||||
document.getElementById("mnth_range").innerHTML = start_mnth+" - "+end_mnth;
|
||||
}
|
||||
|
||||
set_range(){
|
||||
this.start ;
|
||||
}
|
||||
|
||||
go(){
|
||||
//form structured query from lists, loop through the objects
|
||||
var start_cnt = Number(this.start_rng.value);
|
||||
var end_cnt = Number(this.end_rng.value);
|
||||
var plotlst = [];
|
||||
var pielst = [];
|
||||
var k=0;
|
||||
@@ -311,6 +342,7 @@ class FilterQueue{
|
||||
if (subcat_arr[0] != "*"){
|
||||
for (i=0;i<subcat_arr.length;i++){
|
||||
subcatid = (this.dbhandler.select_singlecond("name", subcat_arr[i], "subcat"))
|
||||
console.log(subcatid)
|
||||
subcatids.push(subcatid[0][0])
|
||||
}
|
||||
} else {
|
||||
@@ -328,7 +360,7 @@ class FilterQueue{
|
||||
var res_arr = []
|
||||
|
||||
//all array
|
||||
for (var i=0;i<JSON.parse(res[0][5]).length;i++){
|
||||
for (var i=start_cnt;i<end_cnt;i++){
|
||||
var val;
|
||||
val = JSON.parse(res[0][5])[i]
|
||||
//one array, find avg of all 1st val
|
||||
@@ -342,7 +374,7 @@ class FilterQueue{
|
||||
//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++){
|
||||
for (var i=start_cnt; i<end_cnt;i++){
|
||||
val = JSON.parse(res[0][5])[i]
|
||||
for (var j=1;j<res.length;j++){
|
||||
val += JSON.parse(res[j][5])[i]
|
||||
@@ -358,7 +390,7 @@ class FilterQueue{
|
||||
}
|
||||
|
||||
var label_arr=[];
|
||||
for (let i = 0; i < 216; i++) {
|
||||
for (let i = start_cnt; i < end_cnt; i++) {
|
||||
label_arr.push(moment().year(1995).month(i+1).date(0).startOf('month').format("MMM YYYY"))
|
||||
}
|
||||
//formulate graph object
|
||||
|
||||
Reference in New Issue
Block a user