siwat
/
REDACTED-1-AdvComProg-Final
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make it better

This commit is contained in:
Siwat Sirichai 2021-12-08 16:18:17 +07:00
parent 972fcdfffe
commit 6320923922
12 changed files with 199 additions and 11119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11010
6338003821AdvComProgFinalProjectServer_v1_1.ipynb
View File

File diff suppressed because one or more lines are too long

7
6338003821advcomprogfinalprojectserver_v1_1.py
View File

@ -7,10 +7,10 @@ Original file is located at
https://colab.research.google.com/drive/1B0ihZ275Hw0V034W4eFtKc-wxwkg7iLS
"""
! pip install pymongo[srv]
#! pip install pymongo[srv]
! pip install flask_ngrok
! pip install flask_cors
#! pip install flask_ngrok
#! pip install flask_cors
# Write all of your functions in this cell
from flask import Flask,request,flash, request, redirect, url_for, Response,jsonify
@ -95,6 +95,7 @@ def filter():
@app.route('/alldata')
def get_data():
collection_data2=client.data.data2
dp = list(collection_data2.find().sort([('timeStamp', pymongo.DESCENDING)]))
df = json_normalize(dp)
df.rename(columns = {'accessor.identifier':'iden'}, inplace = True)

2
package-lock.json generated
View File

@ -32,7 +32,7 @@
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/cli": "12.1.4",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",

2
package.json
View File

@ -37,7 +37,7 @@
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/cli": "12.1.4",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",

8
src/app/app.component.html
View File

@ -7,17 +7,17 @@
<ion-tab-button tab="home">
<ion-icon mode="md" name="analytics"></ion-icon>
<ion-label>data</ion-label>
<ion-label>Data</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab1" class="inner-left-btn">
<ion-icon name="search"></ion-icon>
<ion-label>search</ion-label>
<ion-icon name="Search"></ion-icon>
<ion-label>Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="add-circle-outline"></ion-icon>
<ion-label>insert</ion-label>
<ion-label>Insert</ion-label>
</ion-tab-button>
</ion-tab-bar>

17
src/app/data-provider.service.ts
View File

@ -1,21 +1,30 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { providerData } from '../../src/models/temp.model';
import { ReplaySubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataProviderService {
constructor(private http: HttpClient ) { }
public cache = new ReplaySubject(1);
constructor(private http: HttpClient ) {
this.updateData();
}
public updateData(){
this.http.get(this.url+'/alldata').subscribe(data=>this.cache.next(data));
}
// allData(){
// return this.http.get('https://bc50-104-199-132-26.ngrok.io/alldata');
// }
public url = 'http://796c-35-186-184-86.ngrok.io/'
insert(dbname: String,colname: String,web: String,cat: String){
//return this.http.get<providerData>("http://0b75-35-247-61-40.ngrok.io/insert?dbname="+dbname+"&collectionname="+colname+"&web="+web+"&cat="+cat);
return this.http.get<providerData>("https://d036-104-199-132-26.ngrok.io/insert?dbname=data&collectionname=testdata&web=com.burbn.instagram&cat=photos");
//return this.http.get<providerData>("http://localhost:/insert?dbname="+dbname+"&collectionname="+colname+"&web="+web+"&cat="+cat);
return this.http.get<providerData>(this.url+"/insert?dbname=data&collectionname=testdata&web=com.burbn.instagram&cat=photos");
}
public getData(listData: any,lineChart: any) {
return this.http.get('https://d036-104-199-132-26.ngrok.io/alldata');
return this.cache.asObservable();
}
update(data: any) {
return data;

66
src/app/home/home.page.html
View File

@ -1,4 +1,3 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
@ -9,30 +8,45 @@
<ion-content [fullscreen]="true">
<div class="ion-padding">
<ion-card>
<ion-card-header>
Bar Chart {{a$ | async}}
</ion-card-header>
<ion-card-content>
<canvas #barCanvas style="position: relative; height:20vh; width:40vw"></canvas>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
Doughnut Chart
</ion-card-header>
<ion-card-content>
<canvas #doughnutCanvas style="position: relative; height:60vh; width:40vw"></canvas>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
Line Chart {{showData}}
</ion-card-header>
<ion-card-content>
<canvas #lineCanvas style="position: relative; height:20vh; width:40vw"></canvas>
</ion-card-content>
<ion-text>
<center>
<h3>
{{checkLabel}}
</h3>
</center>
</ion-text>
<div style="height: 200px; overflow-x: auto">
<ion-list>
<ion-item *ngFor="let entry of apps">
<ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="end" [(ngModel)]="entry.isChecked" value="box" name="box"
(ionChange)="checklistChanged()"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</ion-card>
<div [hidden]=hideBarCharts>
<ion-card>
<ion-card-header>
{{barLabel}}
</ion-card-header>
<ion-card-content>
<canvas #barCanvas style="position: relative; height:20vh; width:40vw"></canvas>
</ion-card-content>
</ion-card>
</div>
<div [hidden]=hidePieCharts>
<ion-card>
<ion-card-header>
{{doughnutLabel}}
</ion-card-header>
<ion-card-content>
<canvas #doughnutCanvas style="position: relative; height:60vh; width:40vw"></canvas>
</ion-card-content>
</ion-card>
</div>
<div [hidden]=hideNotice>
<h2>Please select atleast one entry to view charts.</h2>
</div>
</div>
</ion-content>
</ion-content>

161
src/app/home/home.page.ts
View File

@ -4,27 +4,37 @@ import { Chart, registerables } from 'chart.js';
import { DataProviderService } from '../data-provider.service';
import { providerData } from 'src/models/temp.model';
import { Observable } from 'rxjs';
import { IonCheckbox, IonList, LoadingController } from '@ionic/angular';
import { loadingController } from '@ionic/core';
import { async } from '@angular/core/testing';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
// Importing ViewChild. We need @ViewChild decorator to get a reference to the local variable
// that we have added to the canvas element in the HTML template.
@ViewChild('barCanvas', { static: true }) private barCanvas: ElementRef;
@ViewChild('doughnutCanvas', { static: true }) private doughnutCanvas: ElementRef;
@ViewChild('lineCanvas', { static: true }) private lineCanvas: ElementRef;
public apps = [];
selectiveItems = [];
//data = null;
barChart: any;
doughnutChart: any;
lineChart: any;
checkLabel: string
showData = [];
hideBarCharts: boolean
hidePieCharts: boolean
hideNotice: boolean
barLabel: string
doughnutLabel: string
a$: Observable<providerData>;
constructor(private myDataProvider: DataProviderService) {
Pepperoni: IonCheckbox
constructor(private myDataProvider: DataProviderService, public loadingController: LoadingController) {
Chart.register(...registerables);
}
// getallData(){
@ -32,19 +42,46 @@ export class HomePage {
// }
// When we try to call our chart to initialize methods in ngOnInit() it shows an error nativeElement of undefined.
// So, we need to call all chart methods in ngAfterViewInit() where @ViewChild and @ViewChildren will be resolved.
ionViewDidEnter() {
this.barChartMethod();
this.doughnutChartMethod();
this.lineChartMethod();
var that = this
this.hideBarCharts=true
this.hidePieCharts=true
this.hideNotice=true
this.initializeChecklist();
this.func();
//this.data=this.myDataProvider.getData(this.showData,this.lineChart);
}
};
func(){
this.a$ = this.myDataProvider.insert(null,null,null,null)
console.log(this.a$)
initializeChecklist() {
this.checkLabel = "Loading . . ."
this.myDataProvider.getData(null, null).subscribe(data => {
var dataJSON: Array<Object>
dataJSON = JSON.parse(data.toString())
this.apps = []
for (var i = 0; i < dataJSON.length; i++) {
this.apps.push({ val: dataJSON[i]['iden'], isChecked: true });
this.selectiveItems.push(dataJSON[i]['iden'])
};
});
this.checklistChanged();
}
func() {
//this.a$ = this.myDataProvider.insert(null, null, null, null)
//console.log(this.a$)
}
checklistChanged() {
this.selectiveItems = []
for (var i = 0; i < this.apps.length; i++) {
if (this.apps[i].isChecked) {
this.selectiveItems.push(this.apps[i].val)
}
}
this.barChartMethod();
this.doughnutChartMethod();
console.log(this.selectiveItems)
}
barChartMethod() {
// Now we need to supply a Chart element reference with an object that defines the type of chart we want to use, and the type of data we want to display.
//var data;
@ -57,17 +94,29 @@ export class HomePage {
var y = []
for (var i = 0; i < dataJSON.length; i++) {
var frame = dataJSON[i];
y.push(frame['all'])
x.push(frame['iden'])
console.log(this.selectiveItems.includes(frame['iden']))
if (this.selectiveItems.includes(frame['iden'])) {
y.push(frame['all'])
x.push(frame['iden'])
}
};
//console.log(x)
//console.log(y)
if (this.barChart != undefined)
this.barChart.destroy();
else {
for (var i = 0; i < this.apps.length; i++) {
if (this.apps[i].isChecked) {
this.selectiveItems.push(this.apps[i].val)
}
}
}
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'bar',
data: {
labels: x,
datasets: [{
label: '# of Votes',
label: '# of Requests',
data: y,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
@ -101,29 +150,43 @@ export class HomePage {
this.myDataProvider.getData(null, null).subscribe(data => {
var dataJSON: Array<Object>
dataJSON = JSON.parse(data.toString())
if (this.doughnutChart != undefined)
this.doughnutChart.destroy();
else {
for (var i = 0; i < this.apps.length; i++) {
if (this.apps[i].isChecked) {
this.selectiveItems.push(this.apps[i].val)
}
}
}
var camera = 0
var kTCCServicePhotosAdd = 0
var location = 0
var mediaLibrary = 0
var microphone = 0
var photos = 0
var sel = 0
for (var i = 0; i < dataJSON.length; i++) {
var frame = dataJSON[i];
camera += frame['camera']
kTCCServicePhotosAdd += frame['kTCCServicePhotosAdd'];
location += frame['location']
mediaLibrary += frame['mediaLibrary']
microphone += frame['microphone']
photos += frame['photos']
if (this.selectiveItems.includes(frame['iden'])) {
camera += frame['camera']
kTCCServicePhotosAdd += frame['kTCCServicePhotosAdd'];
location += frame['location']
mediaLibrary += frame['mediaLibrary']
microphone += frame['microphone']
photos += frame['photos']
sel ++
}
};
var dataval = [camera, kTCCServicePhotosAdd, location, mediaLibrary, microphone, photos]
this.doughnutLabel="Pie chart of "+(camera+kTCCServicePhotosAdd+location+mediaLibrary+microphone+photos)+" requests"
this.barLabel="Bar chart of "+(camera+kTCCServicePhotosAdd+location+mediaLibrary+microphone+photos)+" requests"
this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: ['cam', 'PhotosAdd', 'gps', 'media', 'mic', 'photos'],
datasets: [{
label: '# of Votes',
label: '# of Requests',
data: dataval,
backgroundColor: [
'rgba(255, 159, 64, 0.2)',
@ -142,43 +205,21 @@ export class HomePage {
}]
}
});
});
}
lineChartMethod() {
var that = this
var dataSet
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [
{
label: 'Sell per week',
fill: false,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.showData,
spanGaps: false,
}
]
this.checkLabel = this.apps.length+" entries found, "+sel+" selected."
if(sel==0){
this.hideBarCharts=true
this.hidePieCharts=true
this.hideNotice=false
} else if(sel==1){
this.hidePieCharts=false
this.hideBarCharts=true
this.hideNotice=true
} else {
this.hidePieCharts=false
this.hideBarCharts=false
this.hideNotice=true
}
});
}
}
}

6
src/app/tab1/tab1.page.html
View File

@ -1,9 +1,11 @@
<ion-header>
<ion-toolbar>
<ion-title>tab1</ion-title>
<ion-title>Search</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-content>

4
src/app/tab2/tab2.module.ts
View File

@ -17,4 +17,6 @@ import { Tab2Page } from './tab2.page';
],
declarations: [Tab2Page]
})
export class Tab2PageModule {}
export class Tab2PageModule {
}

21
src/app/tab2/tab2.page.html
View File

@ -1,9 +1,22 @@
<ion-header>
<ion-toolbar>
<ion-title>tab2</ion-title>
<ion-title>Insert</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<ion-card>
<ion-item>
<ion-label>Web</ion-label>
<br/>
<ion-input [(ngModel)]="web"></ion-input>
</ion-item>
<ion-item>
<ion-label>Category</ion-label>
<br/>
<ion-input [(ngModel)]="category"></ion-input>
</ion-item>
<ion-button expand='full' (click)="submit()">
Submit
</ion-button>
</ion-card>
</ion-content>

14
src/app/tab2/tab2.page.ts
View File

@ -1,15 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { DataProviderService } from '../data-provider.service';
@Component({
selector: 'app-tab2',
templateUrl: './tab2.page.html',
styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {
constructor() { }
public web: String
public category: String
constructor(private DataProviderService: DataProviderService) {}
ngOnInit() {
}
submit() {
var dbname = "data"
var colname = "testdata"
this.DataProviderService.insert(dbname,colname,this.web,this.category)
}
}