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

aa

parent 8a2f8c29
Branches
No related tags found
No related merge requests found
......@@ -4,9 +4,10 @@ import * as L from 'leaflet';
import { ConfigService } from '@ngx-config/core';
import { GetLinesService } from '../services/get-lines.service';
import { GetLineService } from '../services/get-line.service';
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';
@Component({
selector: 'ngx-bus-od',
......@@ -78,12 +79,12 @@ export class BusOdComponent implements OnInit {
}
processLine(data: any){
console.log('processLine::: data='+JSON.stringify(data));
//console.log('processLine::: data='+JSON.stringify(data));
///////////////////////////////////////////////////////////////////////////////
let sel: HTMLSelectElement = <HTMLSelectElement>document.getElementById("lineasCB");
let linea = sel.selectedOptions[0].value;
console.log("get_line()::: line="+linea);
console.log("init.js.get_line()::: SUCCESS");
//console.log("get_line()::: line="+linea);
//console.log("init.js.get_line()::: SUCCESS");
//console.log("init.js.get_line()::: data="+JSON.stringify(data));
let nodes = [{'id':-4,'name':'-4'},{'id':-3,'name':'-3'},{'id':-2,'name':'-2'},{'id':-1,'name':'-1'}];
this.dict_stps_seq = {};
......@@ -92,9 +93,14 @@ export class BusOdComponent implements OnInit {
this.dict_stps_seq[-2] = -2;
this.dict_stps_seq[-1] = -1;
let latLons = [];
/*
for (let [key, value] of Object.entries(this.markers)){
//value.remove(this.map);
this.map.removeLayer(value);
}*/
for(let key in this.markers){
let val = this.markers[key];
this.map.removeLayer(val);
}
this.markers = {};
this.dict_stps_name = {};
......@@ -143,20 +149,11 @@ export class BusOdComponent implements OnInit {
}
//console.log('links='+JSON.stringify(links));
document.getElementById("chartDiv").innerHTML = "";
this.plot_chart(linea,nodes,links);
this.plot_chart(linea,nodes,links,this);
}
add_line(latLons: any){
console.log('bus-od.components.ts.add_line::: latLons='+JSON.stringify(latLons));
/*this.path = new google.maps.Polyline({
path: latLons,
geodesic: true,
strokeColor: "#ffa600",
strokeOpacity: 1.0,
strokeWeight: 2
});
this.path.setMap(MapsLib.map);*/
this.path = L.polyline( latLons,{
color: 'blue',
fillColor: "#ffa600",
......@@ -166,7 +163,6 @@ export class BusOdComponent implements OnInit {
}
add_marker(seq:number,id:number,lt:number,ln:number){
let clr_back = "484848";
let clr_border = "484848";
......@@ -175,14 +171,12 @@ export class BusOdComponent implements OnInit {
const marker = L.marker([lt, ln],{icon: licon}).addTo(this.map);
marker['id'] = id;
marker['seq'] = seq;
this.markers[id] = marker;
}
plot_chart(llinea:any,lnodes:any,llinks:any){
plot_chart(llinea:any,lnodes:any,llinks:any,bocomp:any){
// set the dimensions and margins of the graph
var margin = {top: 270, right: 30, bottom: 20, left: 260},
var margin = {top: 270, right: 210, bottom: 20, left: 30},
width = 1200 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
......@@ -194,10 +188,9 @@ export class BusOdComponent implements OnInit {
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// List of node names
var allNodes = lnodes.map(function(d){return d.name;});
var allNodes = lnodes.map(function(d:any){return d.name;});
console.log('plot_chart::: allNodes='+JSON.stringify(allNodes));
// A linear scale to position the nodes on the X axis
var x = d3.scalePoint().range([0, width]).domain(allNodes);
......@@ -207,7 +200,7 @@ export class BusOdComponent implements OnInit {
.data(lnodes)
.enter()
.append("circle")
.attr("cx", function(d){ return(x(d.name)); })
.attr("cx", function(d:any){ return(x(d.name)); })
.attr("cy", height-30)
.attr("r", 8)
.style("fill", "#ffa600");
......@@ -218,9 +211,9 @@ export class BusOdComponent implements OnInit {
.data(lnodes)
.enter()
.append("text")
.attr("x", function(d){ return(x(d.name)); })
.attr("x", function(d:any){ return(x(d.name)); })
.attr("y", height-10)
.text(function(d){ return(d.name); })
.text(function(d:any){ return(d.name); })
.style("text-anchor", "middle")
//.attr("transform", "rotate(10)");
......@@ -229,7 +222,7 @@ export class BusOdComponent implements OnInit {
// In my input data, links are provided between nodes -id-, NOT between node names.
// So I have to do a link between this id and the name
var idToNode = {};
lnodes.forEach(function (n) {
lnodes.forEach(function (n:any) {
idToNode[n.id] = n;
});
// Cool, now if I do idToNode["2"].name I've got the name of the node with id 2
......@@ -239,7 +232,7 @@ export class BusOdComponent implements OnInit {
.data(llinks)
.enter()
.append('path')
.attr('d', function (d) {
.attr('d', function (d:any) {
let start = x(idToNode[d.source].name); // X position of start node on the X axis
let end = x(idToNode[d.target].name); // X position of end node
......@@ -256,22 +249,24 @@ export class BusOdComponent implements OnInit {
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Add the highlighting functionality ///////////////////////////////////////////////////////////////////////////////////////////////
nodes
.on('mouseover', function (d) {
.on('mouseover', function (d:any) {
// Highlight the nodes: every node is green except of him
nodes.style('fill', "#B8B8B8");
d3.select(this).style('fill', '#ffa600');
highlight_stop(d.name, d.name2);
console.log("mouseover d="+JSON.stringify(d)+"\t this="+JSON.stringify(this));
let e2 = this["__data__"]
bocomp.highlight_stop(e2.name, e2.name2, bocomp);
// Highlight the connections
links
.style('stroke', function (link_d) { return link_d.source === d.id ? '#ffa600' : '#b8b8b8';})
.style('stroke-width', function (link_d) { return link_d.source === d.id ? dict_inis_I[link_d.source][link_d.target]/10.0 : 1;});
.style('stroke', function (link_d:any) { return link_d.source === e2.id ? '#ffa600' : '#b8b8b8';})
.style('stroke-width', function (link_d:any) { return link_d.source === e2.id ? bocomp.dict_inis_I[link_d.source][link_d.target]/10.0 : 1;});
})
.on('mouseout', function (d) {
.on('mouseout', function (d:any) {
nodes.style('fill', "#ffa600");
links
.style('stroke', 'black')
.style('stroke-width', '1');
highlight_stop(null, null);
bocomp.highlight_stop(null, null, bocomp);
});
// text hover nodes
svg
......@@ -281,12 +276,11 @@ export class BusOdComponent implements OnInit {
.style("font-size", "17px")
.attr("x", -160)
.attr("y", -220)
.html("Bus Line: "+lline);
.html("Bus Line: "+llinea);
///////////////////////////////////////////////////////////////////////////////////////////////
}
tableCreate(name:any, name2:any) {
tableCreate(name:any, name2:any, bocomp:any) {
let dd = document.getElementById('tableDiv');
dd.innerHTML = "";
if ( name2 !== null ){
......@@ -302,12 +296,15 @@ export class BusOdComponent implements OnInit {
tbl2.style.border = '1px solid black';
let table_values = [];
for (let [key, value] of Object.entries(this.dict_inis[name])){
console.log("tableCreate::: dict_inis="+JSON.stringify(bocomp.dict_inis));
console.log("tableCreate::: dict_inis="+JSON.stringify(bocomp.dict_inis));
for ( let key in bocomp.dict_inis[name]){
let value = bocomp.dict_inis[name][key];
let keyS = key;
if ( key > 0 ){
keyS = key+": "+this.dict_stps_name[key];
if ( Number(key) > 0 ){
keyS = key+": "+bocomp.dict_stps_name[key];
}
let sq = this.dict_stps_seq[key];
let sq = bocomp.dict_stps_seq[key];
let added = false;
let ele = [keyS,value,sq];
for(let i=0;i<table_values.length;i++){
......@@ -322,8 +319,10 @@ export class BusOdComponent implements OnInit {
table_values.push(ele);
}
}
console.log('tableCreate::: dict_inis\n'+JSON.stringify(this.dict_inis[name]));
console.log('tableCreate::: table_values\n'+JSON.stringify(table_values));
console.log('tableCreate::: name ='+name);
console.log('tableCreate::: name2 ='+name2);
console.log('tableCreate::: dict_inis[name] ='+JSON.stringify(bocomp.dict_inis[name]));
console.log('tableCreate::: table_values ='+JSON.stringify(table_values));
for(let k=0;k<table_values.length;k++){
let keyS = table_values[k][0];
let value = table_values[k][1];
......@@ -342,22 +341,23 @@ export class BusOdComponent implements OnInit {
}
}
highlight_stop(name: any, name2:any){
//console.log('highlight_stop::: name='+name);
highlight_stop(name: any, name2:any, bocomp: any){
console.log('highlight_stop::: name='+name+ '\t\tname2='+name2);
let clr_back = "484848";
let clr_back2 = "ffa600";
let clr_border = "484848";
let clr_border2 = "ffa600";
let clr_text = "FFFFFF";
let clr_text2 = "ffa600";
for (let [key, value] of Object.entries(this.markers)){
if ( value.id === name ){
value.setIcon({url: "http://www.googlemapsmarkers.com/v1/"+value.id+"/"+clr_back+"/"+clr_text+"/"+clr_border2});
for (let key in this.markers){
let mark = this.markers[key];
if ( mark.id === name ){
mark.icon = L.icon({iconUrl:"http://www.googlemapsmarkers.com/v1/"+mark.id+"/"+clr_back+"/"+clr_text+"/"+clr_border2});
}else{
value.setIcon({url: "http://www.googlemapsmarkers.com/v1/"+value.id+"/"+clr_back+"/"+clr_text+"/"+clr_border});
mark.icon = L.icon({iconUrl:"http://www.googlemapsmarkers.com/v1/"+mark.id+"/"+clr_back+"/"+clr_text+"/"+clr_border});
}
}
this.tableCreate(name, name2);
bocomp.tableCreate(name, name2, bocomp);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment