all working

This commit is contained in:
dchen4
2024-12-12 17:56:53 +11:00
parent b9ecdecd99
commit 548838a391
4 changed files with 64 additions and 103 deletions

Binary file not shown.

View File

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

View File

@@ -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>
<!--chartjs-->
<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}}

View File

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