diff --git a/Web/weather/package.json b/Web/weather/package.json index e17b494..402d0be 100644 --- a/Web/weather/package.json +++ b/Web/weather/package.json @@ -20,6 +20,7 @@ "bootstrap": "^5.2.3", "echarts": "^5.4.1", "hamburgers": "^1.2.1", + "ngx-echarts": "14", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/Web/weather/src/app/app.component.scss b/Web/weather/src/app/app.component.scss index 5f959c1..79c2c92 100644 --- a/Web/weather/src/app/app.component.scss +++ b/Web/weather/src/app/app.component.scss @@ -14,6 +14,7 @@ linear-gradient(to bottom, $black-alpha, $dark-gray); background-size: 10px 10px, 10px 10px, 10px 5px; background-position: 0px 0px, 5px 5px, 0px 0px; + z-index: 100; @media (min-width: map-get($grid-breakpoints, 'md')) { height: $header-height; @@ -42,13 +43,16 @@ .menu-items { position: absolute; display: block; - width: 100%; top: $header-height-mobile; left: 0; + width: 100%; + height: calc(100vh - $header-height-mobile); + background: $white; overflow: hidden; @media (min-width: map-get($grid-breakpoints, 'md')) { top: $header-height; + height: calc(100vh - $header-height-mobile); } .item { diff --git a/Web/weather/src/app/app.module.ts b/Web/weather/src/app/app.module.ts index 318f116..4ecd546 100644 --- a/Web/weather/src/app/app.module.ts +++ b/Web/weather/src/app/app.module.ts @@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; +import { NgxEchartsModule } from 'ngx-echarts'; import { environment } from '../environments/environment' import { AppComponent } from './app.component'; @@ -21,7 +22,10 @@ import { DashboardComponent } from './dashboard/dashboard.component'; BrowserModule, FormsModule, BrowserAnimationsModule, - HttpClientModule + HttpClientModule, + NgxEchartsModule.forRoot({ + echarts: () => import('echarts') + }) ], providers: [], bootstrap: [AppComponent] diff --git a/Web/weather/src/app/dashboard/dashboard.component.html b/Web/weather/src/app/dashboard/dashboard.component.html index 972ea9d..7c1e2d0 100644 --- a/Web/weather/src/app/dashboard/dashboard.component.html +++ b/Web/weather/src/app/dashboard/dashboard.component.html @@ -1,2 +1,3 @@ -

dashboard works!

-{{day}} +
+ +
diff --git a/Web/weather/src/app/dashboard/dashboard.component.ts b/Web/weather/src/app/dashboard/dashboard.component.ts index fa13b0f..9e27068 100644 --- a/Web/weather/src/app/dashboard/dashboard.component.ts +++ b/Web/weather/src/app/dashboard/dashboard.component.ts @@ -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) + }) + } + + } diff --git a/Web/weather/src/app/graph/graph.component.html b/Web/weather/src/app/graph/graph.component.html index 5989ffa..ca0fe38 100644 --- a/Web/weather/src/app/graph/graph.component.html +++ b/Web/weather/src/app/graph/graph.component.html @@ -1 +1,6 @@ -

graph works!

+
+
+
+
+
+
diff --git a/Web/weather/src/app/graph/graph.component.scss b/Web/weather/src/app/graph/graph.component.scss index e69de29..b2954af 100644 --- a/Web/weather/src/app/graph/graph.component.scss +++ b/Web/weather/src/app/graph/graph.component.scss @@ -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); } +} diff --git a/Web/weather/src/app/graph/graph.component.ts b/Web/weather/src/app/graph/graph.component.ts index ae46986..9a188f5 100644 --- a/Web/weather/src/app/graph/graph.component.ts +++ b/Web/weather/src/app/graph/graph.component.ts @@ -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 `
+ ${data.date.substring(11)} + Vento: ${data.speed} Km/h ${this.dirArrows[data.direction]} ${this.directions[data.direction]} + Temperatura: ${data.temperature} °C + Pressione: ${data.pressure} hpa + Umidità: ${data.humidity} %`/* : 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 } } diff --git a/Web/weather/src/app/station.service.ts b/Web/weather/src/app/station.service.ts index 3352b78..e51f0ba 100644 --- a/Web/weather/src/app/station.service.ts +++ b/Web/weather/src/app/station.service.ts @@ -12,9 +12,9 @@ export class StationService { private restApi = `${environment.API_URL}` - constructor(private http: HttpClient) { - this.layout = null - } + constructor( + private http: HttpClient + ) { } commonHeaders(): any { return new HttpHeaders({ diff --git a/Web/weather/src/assets/scss/global.scss b/Web/weather/src/assets/scss/global.scss index 23205a9..f137a31 100644 --- a/Web/weather/src/assets/scss/global.scss +++ b/Web/weather/src/assets/scss/global.scss @@ -113,3 +113,19 @@ section { padding-top: $header-height; } } + + +.tooltip { + display: block; + padding: 10px 30px; + + .title { + display: block; + font-weight: bold; + } + .item { + display: block; + padding: 5px 0; + border-bottom: 1px dotted $light-gray; + } +} diff --git a/Web/weather/src/environments/environment.prod.ts b/Web/weather/src/environments/environment.prod.ts index fa8826e..2bd135a 100644 --- a/Web/weather/src/environments/environment.prod.ts +++ b/Web/weather/src/environments/environment.prod.ts @@ -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/' } diff --git a/Web/weather/src/environments/environment.ts b/Web/weather/src/environments/environment.ts index a33dae4..d708b4f 100644 --- a/Web/weather/src/environments/environment.ts +++ b/Web/weather/src/environments/environment.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - REST_API: 'http://weatherapi.local' + API_URL: 'http://weatherapi.local' } diff --git a/Web/weather/yarn.lock b/Web/weather/yarn.lock index e6ccfc6..586ddd1 100644 --- a/Web/weather/yarn.lock +++ b/Web/weather/yarn.lock @@ -4416,6 +4416,13 @@ neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== +ngx-echarts@14: + version "14.0.0" + resolved "https://registry.yarnpkg.com/ngx-echarts/-/ngx-echarts-14.0.0.tgz#6f6e03ae1d41f7805e302d293f8d0df2ef01180b" + integrity sha512-Q8J/DXiWqYM2vqTfQq16A7KyxbWECZSiAApS0rBjsAJCPjG/VZogUe0snZ/i3mA6bV3vYm41imTYOaH+Rl97QA== + dependencies: + tslib "^2.3.0" + nice-napi@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/nice-napi/-/nice-napi-1.0.2.tgz#dc0ab5a1eac20ce548802fc5686eaa6bc654927b"