29 changed files with 165 additions and 156 deletions
@ -1,4 +0,0 @@ |
|||
{ |
|||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 |
|||
"recommendations": ["angular.ng-template"] |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
{ |
|||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 |
|||
"version": "0.2.0", |
|||
"configurations": [ |
|||
{ |
|||
"name": "ng serve", |
|||
"type": "pwa-chrome", |
|||
"request": "launch", |
|||
"preLaunchTask": "npm: start", |
|||
"url": "http://localhost:4200/" |
|||
}, |
|||
{ |
|||
"name": "ng test", |
|||
"type": "chrome", |
|||
"request": "launch", |
|||
"preLaunchTask": "npm: test", |
|||
"url": "http://localhost:9876/debug.html" |
|||
} |
|||
] |
|||
} |
|||
@ -1,42 +0,0 @@ |
|||
{ |
|||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 |
|||
"version": "2.0.0", |
|||
"tasks": [ |
|||
{ |
|||
"type": "npm", |
|||
"script": "start", |
|||
"isBackground": true, |
|||
"problemMatcher": { |
|||
"owner": "typescript", |
|||
"pattern": "$tsc", |
|||
"background": { |
|||
"activeOnStart": true, |
|||
"beginsPattern": { |
|||
"regexp": "(.*?)" |
|||
}, |
|||
"endsPattern": { |
|||
"regexp": "bundle generation complete" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"type": "npm", |
|||
"script": "test", |
|||
"isBackground": true, |
|||
"problemMatcher": { |
|||
"owner": "typescript", |
|||
"pattern": "$tsc", |
|||
"background": { |
|||
"activeOnStart": true, |
|||
"beginsPattern": { |
|||
"regexp": "(.*?)" |
|||
}, |
|||
"endsPattern": { |
|||
"regexp": "bundle generation complete" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -1 +0,0 @@ |
|||
<p>app-layout works!</p> |
|||
@ -1,23 +0,0 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { AppLayoutComponent } from './app-layout.component'; |
|||
|
|||
describe('AppLayoutComponent', () => { |
|||
let component: AppLayoutComponent; |
|||
let fixture: ComponentFixture<AppLayoutComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ AppLayoutComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
|
|||
fixture = TestBed.createComponent(AppLayoutComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -1,15 +0,0 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'app-app-layout', |
|||
templateUrl: './app-layout.component.html', |
|||
styleUrls: ['./app-layout.component.scss'] |
|||
}) |
|||
export class AppLayoutComponent implements OnInit { |
|||
|
|||
constructor() { } |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
} |
|||
@ -1,3 +1,20 @@ |
|||
<div class="dashboard-container"> |
|||
<app-graph [data]="data"></app-graph> |
|||
|
|||
<div class="date-container"> |
|||
<input type="date" class="input-date" [(ngModel)]="day" (change)="getData()" [max]="today"> |
|||
</div> |
|||
|
|||
<div class="info-container" *ngIf="data.length"> |
|||
<span class="item"><span class="icon-watch_later"></span> Date/Time: <span class="value">{{data[data.length-1].date}}</span></span> |
|||
<span class="item"><span class="icon-wind"></span> Speed: <span class="value">{{data[data.length-1].speed}} Km/h</span></span> |
|||
<span class="item"><span class="icon-compass"></span> Direction: <span class="value">{{dirLabels[data[data.length-1].direction]}} {{dirArrows[data[data.length-1].direction]}}</span></span> |
|||
<span class="item"><span class="icon-device_thermostat"></span> Temperature: <span class="value">{{data[data.length-1].temperature}} °C</span></span> |
|||
<span class="item"><span class="icon-play_for_work"></span> Pressure: <span class="value">{{data[data.length-1].pressure}} hpa</span></span> |
|||
<span class="item"><span class="icon-opacity"></span> Humidity: <span class="value">{{data[data.length-1].humidity}}%</span></span> |
|||
</div> |
|||
|
|||
<div class="graph-container"> |
|||
<div class="no-data" *ngIf="!data.length">No data for selected date</div> |
|||
<app-graph [data]="data" *ngIf="data.length"></app-graph> |
|||
</div> |
|||
</div> |
|||
|
|||
@ -0,0 +1,44 @@ |
|||
@import "../../assets/scss/variables"; |
|||
|
|||
.dashboard-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.date-container { |
|||
display: block; |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
|
|||
.info-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
|
|||
.item { |
|||
display: inline-block; |
|||
padding: 5px 10px; |
|||
border: 1px solid $gray; |
|||
border-radius: 3px; |
|||
margin: 3px; |
|||
font-size: $font-14; |
|||
font-weight: bold; |
|||
.value { |
|||
font-weight: normal; |
|||
font-size: $font-18; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.graph-container { |
|||
display: block; |
|||
width: 100%; |
|||
padding: 0; |
|||
} |
|||
|
|||
.no-data { |
|||
padding: 20px; |
|||
margin: auto; |
|||
} |
|||
} |
|||
@ -1,6 +1,6 @@ |
|||
<div class="graph"> |
|||
<div class="canvas-container"> |
|||
<div echarts class="canvas" [options]="graph.options" (chartInit)="onChartInit($event, graph)"></div> |
|||
<div echarts class="canvas" [options]="graph.options" (chartInit)="onChartInit($event, graph)" (chartFinished)="onChartInit($event, graph)"></div> |
|||
<div class="canvas-loader" *ngIf="graph.loading"><div class="spinner"></div></div> |
|||
</div> |
|||
</div> |
|||
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue