13 changed files with 228 additions and 15 deletions
@ -1,2 +1,3 @@ |
|||
<p>dashboard works!</p> |
|||
{{day}} |
|||
<div class="dashboard-container"> |
|||
<app-graph [data]="data"></app-graph> |
|||
</div> |
|||
|
|||
@ -1,18 +1,37 @@ |
|||
import { Component, OnInit, Input } from '@angular/core' |
|||
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core' |
|||
import { StationService } from '../station.service' |
|||
import { environment } from '../../environments/environment' |
|||
|
|||
@Component({ |
|||
selector: 'app-dashboard', |
|||
templateUrl: './dashboard.component.html', |
|||
styleUrls: ['./dashboard.component.scss'] |
|||
styleUrls: ['./dashboard.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
|
|||
export class DashboardComponent implements OnInit { |
|||
|
|||
@Input() day: string = '' |
|||
public data: any = [] |
|||
|
|||
constructor() { } |
|||
constructor( |
|||
private stationService: StationService |
|||
) { } |
|||
|
|||
ngOnInit(): void { |
|||
if(this.day) this.getData() |
|||
} |
|||
|
|||
getData(): void { |
|||
this.stationService.getData(this.day).toPromise().then( (data) => { |
|||
console.log(data) |
|||
this.data = data.items |
|||
},(error) => { |
|||
console.error(error) |
|||
}).catch((e) => { |
|||
console.error(e) |
|||
}) |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
@ -1 +1,6 @@ |
|||
<p>graph works!</p> |
|||
<div class="graph"> |
|||
<div class="canvas-container"> |
|||
<div echarts class="canvas" [options]="graph.options" (chartInit)="onChartInit($event, graph)"></div> |
|||
<div class="canvas-loader" *ngIf="graph.loading"><div class="spinner"></div></div> |
|||
</div> |
|||
</div> |
|||
|
|||
@ -0,0 +1,76 @@ |
|||
@import "../../assets/scss/variables"; |
|||
|
|||
.graph { |
|||
position: relative; |
|||
display: block; |
|||
background: $white; |
|||
border-radius: 3px; |
|||
padding: 0px; |
|||
width: 100%; |
|||
height: calc(100vh - $header-height-mobile); |
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
height: calc(100vh - $header-height-mobile); |
|||
} |
|||
|
|||
.canvas-container { |
|||
position: relative; |
|||
display: block; |
|||
border-radius: 3px; |
|||
padding: 0px; |
|||
height: calc(100vh - $header-height-mobile); |
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
height: calc(100vh - $header-height-mobile); |
|||
} |
|||
|
|||
.canvas-loader { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
border-radius: 3px; |
|||
background: $white; |
|||
margin-top: 0; |
|||
width: 100%; |
|||
height: 630px; |
|||
z-index: 1; |
|||
|
|||
>.spinner { |
|||
position: absolute; |
|||
top: calc(50% - 30px); |
|||
left: calc(50% - 30px); |
|||
border-radius: 50%; |
|||
width: 100px; |
|||
height: 100px; |
|||
border-top: 15px solid $black-alpha; |
|||
border-right: 15px solid $black-alpha; |
|||
border-bottom: 15px solid $black-alpha; |
|||
border-left: 15px solid $white; |
|||
animation: graphLoader 1s infinite linear; |
|||
&:after { |
|||
border-radius: 50%; |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.canvas { |
|||
position: relative; |
|||
display: block; |
|||
border-radius: 3px; |
|||
padding: 0px; |
|||
height: calc(100vh - $header-height-mobile); |
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
height: calc(100vh - $header-height-mobile); |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
@keyframes graphLoader { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
@ -1,15 +1,95 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Component, OnInit, Input, SimpleChanges } from '@angular/core' |
|||
import { StationService } from '../station.service' |
|||
import { environment } from '../../environments/environment' |
|||
|
|||
import { EChartsOption, graphic } from 'echarts' |
|||
|
|||
@Component({ |
|||
selector: 'app-graph', |
|||
templateUrl: './graph.component.html', |
|||
styleUrls: ['./graph.component.scss'] |
|||
}) |
|||
|
|||
export class GraphComponent implements OnInit { |
|||
|
|||
constructor() { } |
|||
@Input() data: any = [] |
|||
|
|||
public graph: any = {} |
|||
public directions: any = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'] |
|||
public dirArrows: any = ['\u2B07', '\u2B0B', '\u2B05', '\u2B09', '\u2B06', '\u2B08', '\u27A1', '\u2B0A'] |
|||
|
|||
constructor( |
|||
private stationService: StationService |
|||
) { } |
|||
|
|||
ngOnInit(): void { |
|||
//this.loadGraphs()
|
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
if(changes['data'] && changes['data'].currentValue) { |
|||
this.data = changes['data'].currentValue |
|||
this.loadGraphs() |
|||
} |
|||
} |
|||
|
|||
|
|||
loadGraphs():void { |
|||
this.graph.loading = true |
|||
|
|||
let xAxis:any = [] |
|||
let yAxis:any = [] |
|||
let yAxis2:any = [] |
|||
this.data.forEach( (item:any) => { |
|||
xAxis.push(item.date.substring(11,16)) |
|||
yAxis.push(item.speed) |
|||
yAxis2.push(item.temperature) |
|||
}) |
|||
|
|||
this.graph.options = { |
|||
color: ['#FFBF00', '#00DDFF', '#FFBF00', '#37A2FF', '#FF0087'], |
|||
tooltip: { |
|||
trigger: 'item', |
|||
//axisPointer: { type: 'cross', axis:'y', label: false},
|
|||
formatter: (params: any) => { |
|||
const data = this.data[params.dataIndex] |
|||
return `<div class="tooltip">
|
|||
<span class="title">${data.date.substring(11)}</span> |
|||
<span class="item"><b>Vento:</b> ${data.speed} Km/h ${this.dirArrows[data.direction]} ${this.directions[data.direction]}</span> |
|||
<span class="item"><b>Temperatura:</b> ${data.temperature} °C</span> |
|||
<span class="item"><b>Pressione:</b> ${data.pressure} hpa</span> |
|||
<span class="item"><b>Umidità:</b> ${data.humidity} %</span>`/* : null*/
|
|||
} |
|||
}, |
|||
grid: {left: 0, right: 0, containLabel: true }, |
|||
legend: { data: ['Speed', 'Dir', 'Temp', 'Press', 'Umid'] }, |
|||
xAxis: { type: 'category', boundaryGap: true, axisTick: true, data: xAxis }, |
|||
yAxis: [{ type: 'value', show: false }], |
|||
series: [ |
|||
{ name: 'temp', type: 'line', data: yAxis2, yAxisIndex: 0, smooth: true, stack: 'Total', |
|||
areaStyle: {}, lineStyle: { width: 0 }, |
|||
label: { show: false, position: 'top', formatter: (d: any) => { |
|||
const temp = this.data[d.dataIndex].temperature |
|||
return `${temp} °C` |
|||
}} |
|||
|
|||
}, |
|||
{ name: 'speed', type: 'line', data: yAxis, yAxisIndex: 0, smooth: true, stack: 'Total', |
|||
areaStyle: {}, |
|||
label: { show: true, position: 'top', formatter: (d: any) => { |
|||
const speed = this.data[d.dataIndex].speed |
|||
const dir = this.data[d.dataIndex].direction |
|||
return `${this.dirArrows[dir]} ${speed} km/h` |
|||
}} |
|||
} |
|||
] |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
onChartInit(event: any, graph: any): void { |
|||
graph.loading = false |
|||
} |
|||
|
|||
} |
|||
|
|||
@ -1,4 +1,4 @@ |
|||
export const environment = { |
|||
production: true, |
|||
REST_API: 'http://2.233.91.82/weather/api/' |
|||
API_URL: 'http://2.233.91.82/weather/api/' |
|||
} |
|||
|
|||
@ -1,4 +1,4 @@ |
|||
export const environment = { |
|||
production: false, |
|||
REST_API: 'http://weatherapi.local' |
|||
API_URL: 'http://weatherapi.local' |
|||
} |
|||
|
|||
Loading…
Reference in new issue