Skip to content
Snippets Groups Projects
Commit 6d057759 authored by Olabarrieta Palacios, Ignacio's avatar Olabarrieta Palacios, Ignacio
Browse files

adding charts to popup

parent f6af1a35
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/app/pages/tecnalia-module/gltraffic-prediction/gltraffic-prediction.component.ts
+ 333
− 14
View file @ 6d057759
......@@ -2,18 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { ConfigService } from '@ngx-config/core';
/*import { NgModule } from '@angular/core';
import * as d3 from 'd3';
import { max } from 'rxjs/operators';
import { DocumentRef } from 'ngx-owl-carousel-o/lib/services/document-ref.service';
import { json } from 'd3';
import { ODMSCatalogue } from '../../data-catalogue/model/odmscatalogue';*/
import { Options, LabelType } from '@angular-slider/ngx-slider';
import { GetPredictionService } from '../services/get-prediction.service';
/*
import { lastChildNotComment } from '@nebular/theme/components/helpers';
import { SlideToggleModule } from 'ngx-slide-toggle';
import { off } from 'process';*/
@Component({
selector: 'ngx-gltraffic-prediction',
......@@ -57,6 +47,8 @@ export class GlTrafficPredictionComponent implements OnInit {
public sPrecp;
public sFutbol;
public predictions = {};
public chart_config0;
options = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 })//,
......@@ -117,6 +109,110 @@ export class GlTrafficPredictionComponent implements OnInit {
ngOnInit(): void {
this.initMapOptions();
let xs = [];
let ys = [];
let yups = [];
let ydowns = [];
let max_x = 0;
let min_x = 0;
let max_y = 0;
this.chart_config0 = {
data: {
labels: xs,
datasets: [
{
label: 'Pred',
backgroundColor: 'rgb(255, 165, 0,0.1)',
type: 'line',
fill: false,
borderColor: 'rgb(255, 0, 0,1)',
borderWidth: 1,
pointRadius: 0,
yAxisID: 'y-axis-1',
data: ys
},
{
label: "BandTop",
type: "line",
backgroundColor: "rgb(255, 165, 0,0.3)",
borderColor: "transparent",
pointRadius: 0,
legend: { display: false },
fill: 0,
tension: 0,
yAxisID: 'y-axis-1',
data: yups
},
{
label: "BandBottom",
type: "line",
backgroundColor: "rgb(255, 165, 0,0.3)",
borderColor: "transparent",
pointRadius: 0,
legend: { display: false },
fill: 0,
tension: 0,
yAxisID: 'y-axis-1',
data: ydowns
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
labels: {
filter: function (legendItem, chartData) {
if (legendItem.datasetIndex == 1 || legendItem.datasetIndex == 2) {
return false;
} else {
return true;
}
}
}
},
scales: {
yAxes: [
{
id: 'y-axis-1',
scaleLabel: {
display: true,
labelString: '# Vehs'
},
type: 'linear',
display: true,
position: 'right',
gridlines: { display: true },
labels: { show: true },
ticks: {
beginAtZero: true,
suggestedMax: max_y
}
},],
xAxes: [{
type: 'time',
barPercentage: 1.0,
time: {
max: max_x,
min: min_x,
displayFormats: {
'hour': 'HH:mm DD-MM-YY',
'day': 'HH:mm DD-MM-YY'
}
}
}]
},
pan: {
enabled: true,
mode: 'x',
speed: 1
},
zoom: {
enabled: true,
mode: 'x',
speed: 100
}
}
};
}
initMapOptions(){
......@@ -168,15 +264,24 @@ export class GlTrafficPredictionComponent implements OnInit {
this.plys[id]= ply;
let win = "<b>Sensor:</b > "+id;
win = win + "<div id='win_'"+id+"' style='border-width:0.5px;border:solid;width:300px;height:200px'></div>"
win = win + "<div id='win_"+id+"' style='border-width:0.5px;border:solid;width:300px;height:200px'>";
win = win + "<div id='chartDiv_"+id+"' style='display:none'>"
win = win + "<chart type='line' style='height:100%' [data]=[] [options]={}}></chart>";
win = win + "</div>";
win = win+"</div>"
ply.bindPopup(win).addTo(this.map);
let main_object = this;
ply.on("click", function (event) {
console.log('opening window with id='+id);
for (const [key, value] of Object.entries(event.target.gtcomp.plys)){
let pl = event.target.gtcomp.plys[key];
pl.setStyle({color:'gray'});
}
event.target.setStyle({color:'red'});
console.log('opening window before setting style to block');
document.getElementById('chartDiv_'+id).style.display = 'block';
//document.getElementById('chartDiv_'+id).innerHTML = "<chart type='line' style='height:100%' [data]="+event.target.gtcomp.chart_config[id].data+" [options]="+event.target.gtcomp.chart_config[id].options+"></chart>";
});
}
});
......@@ -198,9 +303,223 @@ export class GlTrafficPredictionComponent implements OnInit {
}
return color;
}
addPrediction(id:string,result:any){
console.log('addPrediction::: result for id='+id+' obtained...');
this.predictions[id] = result;
console.log('addPrediction::: result for id='+id+' obtained...data.length='+result['preds'].length);
this.createChartConfig(id+"",this.predictions[id]);
}
createChartConfig(id:string, data:any) {
//console.log("createChartConfig::: before chart::: data.length=" + data['preds'].length);
let max_x = data['preds'][data['preds'].length - 1][0];
let min_x = data['preds'][0][0];
//console.log("createChartConfig::: before chart::: min_x =" + new Date(min_x));
//console.log("createChartConfig::: before chart::: max_x =" + new Date(max_x));
//document.getElementById('container_canvas').innerHTML = '';
let xs = [];
let ys = [];
let yups = [];
let ydowns = [];
let preds = [];
let preds_w = [];
let temps = [];
let ts = [];
let precs = [];
let ps = [];
let max_y = 0;
for (let k = 0; k < data['preds'].length; k++) {
xs.push(data['preds'][k][0]);
//ys.push(data['preds'][k][1]);
preds.push({
"name": data['preds'][k][0],
"value": data['preds'][k][1],
"min": data['limits'][k][1],
"max": data['limits'][k][2]
});
ys.push({ "x": data['preds'][k][0], "y": data['preds'][k][1] });//,data['limits'][k][1]]);
yups.push({ "x": data['limits'][k][0], "y": data['limits'][k][1] });//,data['limits'][k][1]]);
ydowns.push({ "x": data['limits'][k][0], "y": data['limits'][k][2] });//,data['limits'][k][1]]);
//preds_w.push(data['limits'][k][2]-data['limits'][k][1]);
max_y = Math.max(max_y, data['preds'][k][1]);
}
max_y = 1.2 * max_y;
/*
for (let k = 0; k < this.temperaturaJA.length; k++) {
if (this.temperaturaJA[k][0] > min_x && this.temperaturaJA[k][0] < max_x) {
temps.push({ "name": this.temperaturaJA[k][0], "value": this.temperaturaJA[k][1] });
ts.push({ "x": this.temperaturaJA[k][0], "y": this.temperaturaJA[k][1] });
}
}
let avg_int = 0;
for (let k = 0; k < this.intensidadJA.length; k++) {
if (this.intensidadJA[k][0] > min_x && this.intensidadJA[k][0] < max_x) {
precs.push({ "name": this.intensidadJA[k][0], "value": this.intensidadJA[k][1] });
ps.push({ "x": this.intensidadJA[k][0], "y": this.intensidadJA[k][1] });
avg_int = avg_int + this.intensidadJA[k][1];
}
}
avg_int = avg_int / (precs.length * 1.0);*/
//console.log('espiras.js.printPrediction::: max_y=' + max_y + ' avg_int=' + avg_int + ' precs.length=' + precs.length);
//console.log('espiras.js.printPrediction::: preds_w='+preds_w.length);
this.chart_config[id] = {
//type: 'line',
data: {
labels: xs,
datasets: [
{
label: 'Pred',
backgroundColor: 'rgb(255, 165, 0,0.1)',
type: 'line',
fill: false,
borderColor: 'rgb(255, 0, 0,1)',
borderWidth: 1,
pointRadius: 0,
yAxisID: 'y-axis-1',
data: ys
},
{
label: "BandTop",
type: "line",
backgroundColor: "rgb(255, 165, 0,0.3)",
borderColor: "transparent",
pointRadius: 0,
legend: { display: false },
fill: 0,
tension: 0,
yAxisID: 'y-axis-1',
data: yups
},
{
label: "BandBottom",
type: "line",
backgroundColor: "rgb(255, 165, 0,0.3)",
borderColor: "transparent",
pointRadius: 0,
legend: { display: false },
fill: 0,
tension: 0,
yAxisID: 'y-axis-1',
data: ydowns
}/*,
{
label: 'Temperature',
backgroundColor: 'rgb(0, 255, 0)',
type: 'line',
fill: false,
borderColor: 'rgb(0, 255, 0)',
borderWidth: 1,
pointRadius: 0,
borderDash: [10, 5],
yAxisID: 'y-axis-2',
data: ts
},
{
type: 'line',
label: 'Precipitation',
fill: false,
backgroundColor: 'rgb(0, 255, 255)',
borderColor: 'rgb(0, 255, 255)',
borderWidth: 1,
pointRadius: 0,
yAxisID: 'y-axis-3',
data: ps
}*/]
}, /*
data: { datasets:
[{ label: 'Pred', type: 'line', series: preds, borderColor: 'rgb(255, 0, 0,1)', backgroundColor: 'rgb(255, 165, 0,0.1)'},
{ label: 'Temperature', type: 'line', series: temps, borderColor: 'rgb(0, 255, 0)' },
{ label: 'Precipitation', type: 'line', series: precs, borderColor: 'rgb(0, 255, 255)'}
]}, */
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
labels: {
filter: function (legendItem, chartData) {
if (legendItem.datasetIndex == 1 || legendItem.datasetIndex == 2) {
return false;
} else {
return true;
}
}
}
},
scales: {
yAxes: [
{
id: 'y-axis-1',
scaleLabel: {
display: true,
labelString: '# Vehs'
},
type: 'linear',
display: true,
position: 'right',
gridlines: { display: true },
labels: { show: true },
ticks: {
beginAtZero: true,
suggestedMax: max_y
}
},/*
{
id: 'y-axis-2',
scaleLabel: {
display: true,
labelString: 'Temp (°C)'
},
type: 'linear',
display: true,
position: 'right',
gridlines: { display: false },
labels: { show: true }
},
{
id: 'y-axis-3',
scaleLabel: {
display: true,
labelString: 'Prec. mm'
},
type: 'linear',
display: true,
position: 'right',
gridlines: { display: false },
labels: { show: true }
}*/],
xAxes: [{
type: 'time',
barPercentage: 1.0,
time: {
max: max_x,
min: min_x,
// unit: 'millisecond',
displayFormats: {
'hour': 'HH:mm DD-MM-YY',
'day': 'HH:mm DD-MM-YY'
}
}
}]
},
pan: {
enabled: true,
mode: 'x',
speed: 1
},
zoom: {
enabled: true,
mode: 'x',
speed: 100
}
}
};
console.log("createChartConfig::: chart_config.length="+Object.keys(this.chart_config).length);// data=" + JSON.stringify(this.chart_config[id].data));
}
load_data(){
this.sCombo = (document.getElementById("combo_combo") as HTMLSelectElement).value;
this.sWeekday = (document.getElementById("weekday_combo") as HTMLSelectElement).value;
......@@ -209,7 +528,7 @@ export class GlTrafficPredictionComponent implements OnInit {
this.sTemp = (document.getElementById("temp_combo") as HTMLSelectElement).value;
this.sPrecp = (document.getElementById("precp_combo") as HTMLSelectElement).value;
this.sFutbol = (document.getElementById("event_combo") as HTMLSelectElement).value;
this.predictions = {};
for(let id in this.plys){
this.getPredictionService.getValuesFromFeatures(id, this.sCombo, this.sWeekday, this.sHoliday, this.sSchool, this.sTemp, this.sPrecp, this.sFutbol).subscribe(res => this.addPrediction(id,res['result']), err => console.log(err));
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment