234 lines
7.4 KiB
TypeScript
234 lines
7.4 KiB
TypeScript
import { Component, ElementRef, ViewChild } from '@angular/core';
|
|
import { Data } from '@angular/router';
|
|
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>;
|
|
Pepperoni: IonCheckbox
|
|
constructor(private myDataProvider: DataProviderService, public loadingController: LoadingController) {
|
|
Chart.register(...registerables);
|
|
}
|
|
// getallData(){
|
|
// this.data$=this.myDataProvider.allData();
|
|
// }
|
|
// 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() {
|
|
var that = this
|
|
this.hideBarCharts=true
|
|
this.hidePieCharts=true
|
|
this.hideNotice=true
|
|
this.initializeChecklist();
|
|
this.func();
|
|
//this.data=this.myDataProvider.getData();
|
|
};
|
|
|
|
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;
|
|
//console.log(this.myDataProvider.getData())
|
|
var that = this
|
|
this.myDataProvider.getData(null,null).subscribe(data => {
|
|
var dataJSON: Array<Object>
|
|
dataJSON = JSON.parse(data.toString())
|
|
var x = []
|
|
var y = []
|
|
for (var i = 0; i < dataJSON.length; i++) {
|
|
var frame = dataJSON[i];
|
|
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 Requests',
|
|
data: y,
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255,99,132,1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
doughnutChartMethod() {
|
|
var that = this
|
|
|
|
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];
|
|
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 Requests',
|
|
data: dataval,
|
|
backgroundColor: [
|
|
'rgba(255, 159, 64, 0.2)',
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)'
|
|
],
|
|
hoverBackgroundColor: [
|
|
'#FFCE56',
|
|
'#FF6384',
|
|
'#36A2EB',
|
|
'#FFCE56',
|
|
'#FF6384'
|
|
]
|
|
}]
|
|
}
|
|
});
|
|
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
|
|
}
|
|
});
|
|
}
|
|
doRefresh(event){
|
|
this.myDataProvider.updateData();
|
|
this.barChartMethod();
|
|
this.doughnutChartMethod();
|
|
setTimeout(() => {
|
|
console.log('Async operation has ended');
|
|
event.target.complete();
|
|
}, 2000);
|
|
}
|
|
}
|