echarts integration

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"

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 {

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]

Web/weather/src/app/dashboard/dashboard.component.html

@@ -1,2 +1,3 @@
-<p>dashboard works!</p>
-{{day}}
+<div class="dashboard-container">
+  <app-graph [data]="data"></app-graph>
+</div>

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)
+    })
+  }
+
+
 }

Web/weather/src/app/graph/graph.component.html

@@ -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>

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); }
+}

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 `<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
   }
 
 }

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({

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;
+  }
+}

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/'
 }

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'
 }

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"