From 382f824e016a175e569c72f8db3e873b1782e20d Mon Sep 17 00:00:00 2001
From: csba1652 <Bilal.Hassan@student.uibk.ac.at>
Date: Tue, 14 Feb 2023 16:53:30 +0100
Subject: [PATCH] pages summary home header coming soon
---
.../coming-soon/coming-soon.component.html | 6 +
.../coming-soon/coming-soon.component.scss | 22 ++
.../coming-soon/coming-soon.component.spec.ts | 23 ++
.../coming-soon/coming-soon.component.ts | 10 +
.../components/compare/compare.component.css | 37 +++
.../components/compare/compare.component.html | 44 +++
.../compare/compare.component.spec.ts | 23 ++
.../components/compare/compare.component.ts | 95 +++++++
.../cooming-soon-header.component.css | 0
.../cooming-soon-header.component.html | 1 +
.../cooming-soon-header.component.spec.ts | 23 ++
.../cooming-soon-header.component.ts | 10 +
.../config-header/config-header.component.css | 33 +++
.../config-header.component.html | 6 +
.../config-header.component.spec.ts | 23 ++
.../config-header/config-header.component.ts | 10 +
.../data-header/data-header.component.css | 26 ++
.../data-header/data-header.component.html | 7 +
.../data-header/data-header.component.spec.ts | 23 ++
.../data-header/data-header.component.ts | 10 +
.../components/summary/summary.component.css | 36 +++
.../components/summary/summary.component.html | 50 ++++
.../summary/summary.component.spec.ts | 23 ++
.../components/summary/summary.component.ts | 205 ++++++++++++++
.../module/components/zoom/zoom.component.css | 37 +++
.../components/zoom/zoom.component.html | 41 +++
.../components/zoom/zoom.component.spec.ts | 23 ++
.../module/components/zoom/zoom.component.ts | 113 ++++++++
src/app/module/pages/home/home.component.html | 45 ++++
src/app/module/pages/home/home.component.scss | 253 ++++++++++++++++++
.../module/pages/home/home.component.spec.ts | 23 ++
src/app/module/pages/home/home.component.ts | 222 +++++++++++++++
32 files changed, 1503 insertions(+)
create mode 100644 src/app/module/components/coming-soon/coming-soon.component.html
create mode 100644 src/app/module/components/coming-soon/coming-soon.component.scss
create mode 100644 src/app/module/components/coming-soon/coming-soon.component.spec.ts
create mode 100644 src/app/module/components/coming-soon/coming-soon.component.ts
create mode 100644 src/app/module/components/compare/compare.component.css
create mode 100644 src/app/module/components/compare/compare.component.html
create mode 100644 src/app/module/components/compare/compare.component.spec.ts
create mode 100644 src/app/module/components/compare/compare.component.ts
create mode 100644 src/app/module/components/cooming-soon-header/cooming-soon-header.component.css
create mode 100644 src/app/module/components/cooming-soon-header/cooming-soon-header.component.html
create mode 100644 src/app/module/components/cooming-soon-header/cooming-soon-header.component.spec.ts
create mode 100644 src/app/module/components/cooming-soon-header/cooming-soon-header.component.ts
create mode 100644 src/app/module/components/header/config-header/config-header.component.css
create mode 100644 src/app/module/components/header/config-header/config-header.component.html
create mode 100644 src/app/module/components/header/config-header/config-header.component.spec.ts
create mode 100644 src/app/module/components/header/config-header/config-header.component.ts
create mode 100644 src/app/module/components/header/data-header/data-header.component.css
create mode 100644 src/app/module/components/header/data-header/data-header.component.html
create mode 100644 src/app/module/components/header/data-header/data-header.component.spec.ts
create mode 100644 src/app/module/components/header/data-header/data-header.component.ts
create mode 100644 src/app/module/components/summary/summary.component.css
create mode 100644 src/app/module/components/summary/summary.component.html
create mode 100644 src/app/module/components/summary/summary.component.spec.ts
create mode 100644 src/app/module/components/summary/summary.component.ts
create mode 100644 src/app/module/components/zoom/zoom.component.css
create mode 100644 src/app/module/components/zoom/zoom.component.html
create mode 100644 src/app/module/components/zoom/zoom.component.spec.ts
create mode 100644 src/app/module/components/zoom/zoom.component.ts
create mode 100644 src/app/module/pages/home/home.component.html
create mode 100644 src/app/module/pages/home/home.component.scss
create mode 100644 src/app/module/pages/home/home.component.spec.ts
create mode 100644 src/app/module/pages/home/home.component.ts
diff --git a/src/app/module/components/coming-soon/coming-soon.component.html b/src/app/module/components/coming-soon/coming-soon.component.html
new file mode 100644
index 0000000..732c930
--- /dev/null
+++ b/src/app/module/components/coming-soon/coming-soon.component.html
@@ -0,0 +1,6 @@
+<div class="coming-soon">
+ <div class="coming-soon-text">
+ <h1>COMING SOON :)</h1>
+ </div>
+
+</div>
diff --git a/src/app/module/components/coming-soon/coming-soon.component.scss b/src/app/module/components/coming-soon/coming-soon.component.scss
new file mode 100644
index 0000000..f8a6e0e
--- /dev/null
+++ b/src/app/module/components/coming-soon/coming-soon.component.scss
@@ -0,0 +1,22 @@
+.coming-soon{
+ height: 120vh;
+ width: 100%;
+
+ background-image: url("../../../../assets/comingSoon.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+h1{
+ color: white;
+}
+
+.coming-soon-text{
+
+}
+
+
diff --git a/src/app/module/components/coming-soon/coming-soon.component.spec.ts b/src/app/module/components/coming-soon/coming-soon.component.spec.ts
new file mode 100644
index 0000000..3044c45
--- /dev/null
+++ b/src/app/module/components/coming-soon/coming-soon.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComingSoonComponent } from './coming-soon.component';
+
+describe('ComingSoonComponent', () => {
+ let component: ComingSoonComponent;
+ let fixture: ComponentFixture<ComingSoonComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ComingSoonComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ComingSoonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/coming-soon/coming-soon.component.ts b/src/app/module/components/coming-soon/coming-soon.component.ts
new file mode 100644
index 0000000..6c31917
--- /dev/null
+++ b/src/app/module/components/coming-soon/coming-soon.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-coming-soon',
+ templateUrl: './coming-soon.component.html',
+ styleUrls: ['./coming-soon.component.scss']
+})
+export class ComingSoonComponent {
+
+}
diff --git a/src/app/module/components/compare/compare.component.css b/src/app/module/components/compare/compare.component.css
new file mode 100644
index 0000000..ce815c0
--- /dev/null
+++ b/src/app/module/components/compare/compare.component.css
@@ -0,0 +1,37 @@
+
+.chart{
+ position: relative;
+ width: 100%;
+ background-color: var(--chart-background);
+ overflow: hidden;
+ padding: 10px;
+
+}
+
+.chart-below{
+ position: relative;
+ border: 1px solid blue;
+ height: 200px;
+ width: 900px;
+
+}
+
+.chart-container{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.main-char{
+ display: flex;
+ flex-direction: column;
+}
+
+.chart-form{
+ margin-left: 30px;
+ height: 150px;
+
+ display: flex;
+ align-items: center;
+}
diff --git a/src/app/module/components/compare/compare.component.html b/src/app/module/components/compare/compare.component.html
new file mode 100644
index 0000000..fb6667b
--- /dev/null
+++ b/src/app/module/components/compare/compare.component.html
@@ -0,0 +1,44 @@
+<div class="main-char">
+
+ <div class="chart-form">
+ <div class="chart-form" >
+ <mat-form-field appearance="fill" >
+ <mat-label>Select a Sensor</mat-label>
+ <mat-select >
+ <mat-option value="Temperature">Temperature</mat-option>
+ <mat-option value="Humidity">Humidity</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <mat-form-field appearance="fill">
+ <mat-label>From</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-hint>MM/DD/YYYY</mat-hint>
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ <mat-form-field appearance="fill">
+ <mat-label>To</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-hint>MM/DD/YYYY</mat-hint>
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+
+ </div>
+ </div>
+
+ <div class="chart">
+ <canvas id="linechartCompare" width="100%"></canvas>
+ </div>
+
+ <div class="chart">
+ <canvas id="barchartBCompare" ></canvas>
+ </div>
+
+</div>
+
+
+
diff --git a/src/app/module/components/compare/compare.component.spec.ts b/src/app/module/components/compare/compare.component.spec.ts
new file mode 100644
index 0000000..a897a27
--- /dev/null
+++ b/src/app/module/components/compare/compare.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompareComponent } from './compare.component';
+
+describe('CompareComponent', () => {
+ let component: CompareComponent;
+ let fixture: ComponentFixture<CompareComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CompareComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(CompareComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/compare/compare.component.ts b/src/app/module/components/compare/compare.component.ts
new file mode 100644
index 0000000..3112b41
--- /dev/null
+++ b/src/app/module/components/compare/compare.component.ts
@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import {Chart} from "chart.js/auto";
+
+@Component({
+ selector: 'app-compare',
+ templateUrl: './compare.component.html',
+ styleUrls: ['./compare.component.css']
+})
+export class CompareComponent {
+ labels:any=["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul","Aug","Sep","Okt","Nov","Dez"]
+ //*************************lineChart-Trio*****************************
+ data:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain-2021",
+ data: [1400, 3000, 2500, 4500, 2500, 2000, 900,200,600,1200,1600,1900],
+ fill:true,
+ // fillColor: '#d20f0f',
+ borderColor:"rgba(255, 10, 13, 0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.3)",
+ tension:0.2
+ },
+ {
+ label: "Rain-2022",
+ data: [1500, 2500, 2500, 4000, 2600, 3500, 2900,400,200,1400,1200,2400],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(136,26,28,0.8)",
+ backgroundColor: "rgba(14,44,117,0.8)",
+ tension:0.2
+ }
+ ]
+ }
+
+ linConfig:any={
+ type:'bar',
+ data:this.data,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30
+ }
+ }
+ //*************************BarChart-Rain*****************************
+ databar:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain-2021",
+ data: [1400, 3000, 2500, 4500, 2500, 2000, 900,200,600,1200,1600,1900],
+ fill:true,
+ // fillColor: '#d20f0f',
+ borderColor:"rgba(255, 10, 13, 0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.3)",
+ tension:0.2
+ },
+ {
+ label: "Rain-2022",
+ data: [1500, 2500, 2500, 4000, 2600, 3500, 2900,400,200,1400,1200,2400],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(136,26,28,0.8)",
+ backgroundColor: "rgba(14,44,117,0.8)",
+ tension:0.2
+ }]
+ }
+ barConfig:any={
+ type:'line',
+ data:this.databar,
+ options:{
+ hoverRadius:12,
+ hitRadius:30,
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero:true
+ },
+
+ }]
+ }
+ },
+ }
+
+ linechart: any;
+ barchartB:any
+
+ ngOnInit(): void {
+ this.linechart = new Chart('linechartCompare', this.linConfig)
+ this.barchartB = new Chart('barchartBCompare', this.barConfig)
+ }
+}
diff --git a/src/app/module/components/cooming-soon-header/cooming-soon-header.component.css b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/module/components/cooming-soon-header/cooming-soon-header.component.html b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.html
new file mode 100644
index 0000000..6fa26eb
--- /dev/null
+++ b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.html
@@ -0,0 +1 @@
+<p>cooming-soon-header works!</p>
diff --git a/src/app/module/components/cooming-soon-header/cooming-soon-header.component.spec.ts b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.spec.ts
new file mode 100644
index 0000000..9df1034
--- /dev/null
+++ b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoomingSoonHeaderComponent } from './cooming-soon-header.component';
+
+describe('CoomingSoonHeaderComponent', () => {
+ let component: CoomingSoonHeaderComponent;
+ let fixture: ComponentFixture<CoomingSoonHeaderComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CoomingSoonHeaderComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(CoomingSoonHeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/cooming-soon-header/cooming-soon-header.component.ts b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.ts
new file mode 100644
index 0000000..533005a
--- /dev/null
+++ b/src/app/module/components/cooming-soon-header/cooming-soon-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-cooming-soon-header',
+ templateUrl: './cooming-soon-header.component.html',
+ styleUrls: ['./cooming-soon-header.component.css']
+})
+export class CoomingSoonHeaderComponent {
+
+}
diff --git a/src/app/module/components/header/config-header/config-header.component.css b/src/app/module/components/header/config-header/config-header.component.css
new file mode 100644
index 0000000..1423f97
--- /dev/null
+++ b/src/app/module/components/header/config-header/config-header.component.css
@@ -0,0 +1,33 @@
+.item{
+ margin: 10px;
+ height: 30px;
+ width: 150px;
+
+ display: flex;
+ align-items: flex-end;
+
+
+ text-decoration:none;
+ text-align: center;
+ color: var(--c-gray-400);
+ font-size: 1.125rem;
+
+ align-items: center;
+}
+
+
+.item:hover{
+
+ transform: translateX(4px);
+ color:white;
+}
+
+nav{
+ display: flex;
+}
+
+.white-icon{
+
+ margin-bottom: 2px;
+ margin-right: 2px;
+}
diff --git a/src/app/module/components/header/config-header/config-header.component.html b/src/app/module/components/header/config-header/config-header.component.html
new file mode 100644
index 0000000..95af216
--- /dev/null
+++ b/src/app/module/components/header/config-header/config-header.component.html
@@ -0,0 +1,6 @@
+<nav>
+ <a class="item" routerLink="/homeConfigStation" > <mat-icon class="white-icon">add_home</mat-icon>Station </a>
+ <a class="item" routerLink="/homeConfigHost"> <mat-icon class="white-icon">roofing</mat-icon> Host </a>
+ <a class="item" routerLink="/homeConfigClient" > <mat-icon class="white-icon">settings_input_antenna</mat-icon> Client </a>
+ <a class="item" routerLink="/homeConfigSensor" > <mat-icon class="white-icon">thermostat</mat-icon> Sensor </a>
+</nav>
diff --git a/src/app/module/components/header/config-header/config-header.component.spec.ts b/src/app/module/components/header/config-header/config-header.component.spec.ts
new file mode 100644
index 0000000..4ee3904
--- /dev/null
+++ b/src/app/module/components/header/config-header/config-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigHeaderComponent } from './config-header.component';
+
+describe('ConfigHeaderComponent', () => {
+ let component: ConfigHeaderComponent;
+ let fixture: ComponentFixture<ConfigHeaderComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ConfigHeaderComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ConfigHeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/header/config-header/config-header.component.ts b/src/app/module/components/header/config-header/config-header.component.ts
new file mode 100644
index 0000000..b7b2825
--- /dev/null
+++ b/src/app/module/components/header/config-header/config-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-config-header',
+ templateUrl: './config-header.component.html',
+ styleUrls: ['./config-header.component.css']
+})
+export class ConfigHeaderComponent {
+
+}
diff --git a/src/app/module/components/header/data-header/data-header.component.css b/src/app/module/components/header/data-header/data-header.component.css
new file mode 100644
index 0000000..2d4c6b0
--- /dev/null
+++ b/src/app/module/components/header/data-header/data-header.component.css
@@ -0,0 +1,26 @@
+.item{
+ margin: 10px;
+ height: 30px;
+ width: 150px;
+
+ display: flex;
+ align-items: flex-end;
+
+
+ text-decoration:none;
+ text-align: center;
+ color: var(--c-gray-400);
+ font-size: 1.125rem;
+
+}
+
+
+.item:hover{
+
+ transform: translateX(4px);
+ color:white;
+}
+
+nav{
+ display: flex;
+}
diff --git a/src/app/module/components/header/data-header/data-header.component.html b/src/app/module/components/header/data-header/data-header.component.html
new file mode 100644
index 0000000..8d3980e
--- /dev/null
+++ b/src/app/module/components/header/data-header/data-header.component.html
@@ -0,0 +1,7 @@
+
+<nav>
+ <a class="item" routerLink="/homeDataSummary" > <mat-icon class="white-icon">table_chart</mat-icon> Summary </a>
+ <a class="item" routerLink="/homeDataZoom"> <mat-icon class="white-icon">zoom_in</mat-icon> Level 2 </a>
+ <a class="item" routerLink="/homeDataCompare"> <mat-icon class="white-icon">compare</mat-icon> Level 3 </a>
+</nav>
+
diff --git a/src/app/module/components/header/data-header/data-header.component.spec.ts b/src/app/module/components/header/data-header/data-header.component.spec.ts
new file mode 100644
index 0000000..445c73c
--- /dev/null
+++ b/src/app/module/components/header/data-header/data-header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataHeaderComponent } from './data-header.component';
+
+describe('DataHeaderComponent', () => {
+ let component: DataHeaderComponent;
+ let fixture: ComponentFixture<DataHeaderComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ DataHeaderComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(DataHeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/header/data-header/data-header.component.ts b/src/app/module/components/header/data-header/data-header.component.ts
new file mode 100644
index 0000000..13ed4ac
--- /dev/null
+++ b/src/app/module/components/header/data-header/data-header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-data-header',
+ templateUrl: './data-header.component.html',
+ styleUrls: ['./data-header.component.css']
+})
+export class DataHeaderComponent {
+
+}
diff --git a/src/app/module/components/summary/summary.component.css b/src/app/module/components/summary/summary.component.css
new file mode 100644
index 0000000..635d989
--- /dev/null
+++ b/src/app/module/components/summary/summary.component.css
@@ -0,0 +1,36 @@
+
+
+/*you have to make the div position relativ so that the chart is working*/
+
+.chart{
+ position: relative;
+ width: 43vw;
+ height: 40vh;
+ background-color: var(--chart-background);
+ overflow: hidden;
+ padding: 10px;
+
+}
+
+.chart-container{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+}
+
+.main-chart{
+ display: flex;
+ flex-direction: column;
+}
+
+.chart-form{
+ margin-left: 30px;
+ height: 150px;
+
+ display: flex;
+ align-items: center;
+
+
+}
diff --git a/src/app/module/components/summary/summary.component.html b/src/app/module/components/summary/summary.component.html
new file mode 100644
index 0000000..834d76f
--- /dev/null
+++ b/src/app/module/components/summary/summary.component.html
@@ -0,0 +1,50 @@
+<div class="main-chart">
+
+</div>
+
+<div class="chart-form">
+ <div class="chart-form" >
+ <mat-form-field appearance="fill" >
+ <mat-label>Select a Sensor</mat-label>
+ <mat-select >
+ <mat-option value="Temperature">Temperature</mat-option>
+ <mat-option value="Humidity">Humidity</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <mat-form-field appearance="fill">
+ <mat-label>From</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-hint>MM/DD/YYYY</mat-hint>
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ <mat-form-field appearance="fill">
+ <mat-label>To</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-hint>MM/DD/YYYY</mat-hint>
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ </div>
+</div>
+
+<div class="chart-container">
+ <div class="chart">
+ <canvas id="chart2" width="100%"></canvas>
+ </div>
+
+ <div class="chart">
+ <canvas id="soloLineChart" width="100%"></canvas>
+ </div>
+
+ <div class="chart">
+ <canvas id="barchart" width="100%"></canvas>
+ </div>
+
+ <div class="chart">
+ <canvas id="pointChart" width="100%"></canvas>
+ </div>
+</div>
diff --git a/src/app/module/components/summary/summary.component.spec.ts b/src/app/module/components/summary/summary.component.spec.ts
new file mode 100644
index 0000000..0ce9d33
--- /dev/null
+++ b/src/app/module/components/summary/summary.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryComponent } from './summary.component';
+
+describe('SummaryComponent', () => {
+ let component: SummaryComponent;
+ let fixture: ComponentFixture<SummaryComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ SummaryComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(SummaryComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/summary/summary.component.ts b/src/app/module/components/summary/summary.component.ts
new file mode 100644
index 0000000..1dd7475
--- /dev/null
+++ b/src/app/module/components/summary/summary.component.ts
@@ -0,0 +1,205 @@
+import { Component } from '@angular/core';
+import {Chart} from "chart.js/auto";
+
+@Component({
+ selector: 'app-summary',
+ templateUrl: './summary.component.html',
+ styleUrls: ['./summary.component.css']
+})
+export class SummaryComponent {
+ constructor() { }
+ labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+
+//*************************lineChart-Trio*****************************
+ data:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Temperature-1",
+ data: [14, 30, 25, 41, 25, 32, 30],
+ fill:true,
+ // fillColor: '#d20f0f',
+ borderColor:"rgba(255, 10, 13, 0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ },
+ {
+ label: "Temperature-2",
+ data: [15, 25, 25, 38, 26, 35, 29],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(136,26,28,0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ },
+ {
+ label: "Temperature-3",
+ data: [17, 23, 23, 35, 23, 40, 29],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(255,10,141,0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ }
+ ]
+ }
+
+ linConfig:any={
+ type:'line',
+ data:this.data,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30
+ }
+ }
+ //*************************BarChart-Rain*****************************
+ databar:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ backgroundColor: "rgba(10,145,255,0.5)",
+ // borderColor:"#111",
+
+ }]
+ }
+ barConfig:any={
+ type:'bar',
+ data:this.databar,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30
+ }
+ }
+//*************************lineChart-Solo*****************************
+ data_lineSolo:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Global Radiation",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ borderColor:"rgba(75,154,3,0.9)",
+ backgroundColor: "rgba(10,255,43,0.1)",
+ // borderColor:"#111",
+
+ }]
+ }
+ config_lineSolo:any={
+ type:'line',
+ data:this.data_lineSolo,
+ options:{
+ responsive:true,
+ radius:3,
+ hoverRadius:12,
+ hitRadius:30,
+ tension:0.05,
+
+ }
+ }
+ //*************************Pint-Dendrometer-Solo*****************************
+ data_pointSolo:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Dendrometer",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+
+ // borderColor:"rgb(39,45,33)",
+ borderColor:"rgb(100,176,27)",
+ backgroundColor: "rgba(10,255,43,0.00)",
+ showLine:false
+ // borderColor:"#111",
+
+ }]
+ }
+ config_pointSolo:any={
+ type:'line',
+ data:this.data_pointSolo,
+ options:{
+ plugins: {
+ legend: {
+ display: true,
+ labels: {
+ color: 'white'
+ }
+ }
+ },
+ labelColors:'white',
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30,
+ tension:0.05,
+ pointBorderWidth:4,
+ scales: {
+ x: {
+ grid: {
+ color:"rgba(255,255,255,0.3)",
+ },
+ ticks: {
+ color: "white"
+ }
+ },
+ y: {
+ grid: {
+ color:"rgba(255,255,255,0.3)",
+ },
+ ticks: {
+ color: "white"
+ }
+ }
+ }
+
+ }
+ }
+
+ white_data_pointSolo:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Dendrometer",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ borderColor:"rgba(75,154,3,0.9)",
+ backgroundColor: "rgba(10,255,43,0)",
+ showLine:false
+ // borderColor:"#111",
+
+ }]
+ }
+
+
+ white_config_pointSolo:any={
+ type:'line',
+ data:this.white_data_pointSolo,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30,
+ tension:0.05,
+ pointBorderWidth:4,
+
+ }
+ }
+
+ linechart: any;
+ barchart:any
+ soloLineChart:any
+ pointChart:any
+
+ ngOnInit(): void {
+ this.linechart=new Chart('chart2',this.linConfig)
+ this.barchart=new Chart('barchart',this.barConfig)
+ this.soloLineChart=new Chart('soloLineChart',this.config_lineSolo)
+ this.pointChart= new Chart('pointChart',this.white_config_pointSolo)
+ }
+}
diff --git a/src/app/module/components/zoom/zoom.component.css b/src/app/module/components/zoom/zoom.component.css
new file mode 100644
index 0000000..2cf5069
--- /dev/null
+++ b/src/app/module/components/zoom/zoom.component.css
@@ -0,0 +1,37 @@
+
+.chart{
+ position: relative;
+ width: 100%;
+ background-color: var(--chart-background);
+ overflow: hidden;
+ padding: 10px;
+
+}
+
+.chart-below{
+ position: relative;
+ border: 1px solid blue;
+ height: 200px;
+ width: 900px;
+
+}
+
+.chart-container{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.main-chart{
+ display: flex;
+ flex-direction: column;
+}
+
+.chart-form{
+ margin-left: 30px;
+ height: 150px;
+
+ display: flex;
+ align-items: center;
+}
diff --git a/src/app/module/components/zoom/zoom.component.html b/src/app/module/components/zoom/zoom.component.html
new file mode 100644
index 0000000..f5254a5
--- /dev/null
+++ b/src/app/module/components/zoom/zoom.component.html
@@ -0,0 +1,41 @@
+<div class="main-chart">
+
+ <div class="chart-form">
+ <div class="chart-form" >
+ <mat-form-field appearance="fill" >
+ <mat-label>Select a Sensor</mat-label>
+ <mat-select >
+ <mat-option value="Temperature">Temperature</mat-option>
+ <mat-option value="Humidity">Humidity</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <mat-form-field appearance="fill">
+ <mat-label>From </mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-hint>MM/DD/YYYY</mat-hint>
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ <mat-form-field appearance="fill">
+ <mat-label>To</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <mat-hint>MM/DD/YYYY</mat-hint>
+ <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ </div>
+ </div>
+
+ <div class="chart">
+ <canvas id="linechart" width="100%"></canvas>
+ </div>
+
+ <div class="chart">
+ <canvas id="barchartB" ></canvas>
+ </div>
+
+
+</div>
diff --git a/src/app/module/components/zoom/zoom.component.spec.ts b/src/app/module/components/zoom/zoom.component.spec.ts
new file mode 100644
index 0000000..0ba1246
--- /dev/null
+++ b/src/app/module/components/zoom/zoom.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZoomComponent } from './zoom.component';
+
+describe('ZoomComponent', () => {
+ let component: ZoomComponent;
+ let fixture: ComponentFixture<ZoomComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ZoomComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ZoomComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/zoom/zoom.component.ts b/src/app/module/components/zoom/zoom.component.ts
new file mode 100644
index 0000000..4dc9677
--- /dev/null
+++ b/src/app/module/components/zoom/zoom.component.ts
@@ -0,0 +1,113 @@
+import { Component } from '@angular/core';
+import {Chart} from "chart.js/auto";
+
+@Component({
+ selector: 'app-zoom',
+ templateUrl: './zoom.component.html',
+ styleUrls: ['./zoom.component.css']
+})
+export class ZoomComponent {
+ labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+
+//*************************lineChart-Trio*****************************
+ data:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Temperature-1",
+ data: [1400, 3000, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ // fillColor: '#d20f0f',
+ borderColor:"rgba(255, 10, 13, 0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ },
+ {
+ label: "Temperature-2",
+ data: [1500, 2500, 2500, 4000, 2600, 3500, 2900],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(136,26,28,0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ },
+ {
+ label: "Temperature-3",
+ data: [1700, 2300, 2300, 3500, 2300, 4500, 2900],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(255,10,141,0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ }
+ ]
+ }
+
+ linConfig:any={
+ type:'line',
+ data:this.data,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30,
+ /* scales: {y: { title: { display: true, text: 'mm' }},
+
+ xAxes: {
+ title: {
+ display: true,
+ text: "test",
+ font: {
+ size: 15
+ }
+ }
+ }
+ }
+ */
+
+ }
+ }
+ //*************************BarChart-Rain*****************************
+ databar:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ backgroundColor: "rgba(10,145,255,0.5)",
+ // borderColor:"#111",
+
+ }]
+ }
+ barConfig:any={
+ type:'bar',
+ data:this.databar,
+ options:{
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ yAxes: [{
+ title: {
+ display: true,
+ text: "test"},
+ ticks: {
+ beginAtZero:true
+ }
+ }]
+ }
+ },
+ }
+
+ linechart: any;
+ barchartB:any
+
+ ngOnInit(): void {
+ this.linechart = new Chart('linechart', this.linConfig)
+ this.barchartB = new Chart('barchartB', this.barConfig)
+ }
+
+}
+
+
diff --git a/src/app/module/pages/home/home.component.html b/src/app/module/pages/home/home.component.html
new file mode 100644
index 0000000..0ed3626
--- /dev/null
+++ b/src/app/module/pages/home/home.component.html
@@ -0,0 +1,45 @@
+
+<div class="body-container">
+
+ <section class="sidebar">
+
+ <div class="container-logo">
+ <!--
+ <img src="../../assets/images/logo_tree.png"> -->
+ <mat-icon>forest</mat-icon>
+ <!-- <div class="logo-font"> #FFF</div> -->
+ <div class="logo-light">FORTE</div>
+ </div>
+ <nav>
+ <a routerLink="/homeConfigStation" class="item"> <mat-icon class="white-icon">settings</mat-icon> Config </a>
+ <a routerLink="/data" class="item"> <mat-icon class="white-icon">multiline_chart</mat-icon> Data </a>
+ <!-- <a routerLink="/ComingSoon" class="item"> <mat-icon class="white-icon">insights</mat-icon> Insights </a>
+ <a routerLink="/ComingSoon" class="item"> <mat-icon class="white-icon">tasks</mat-icon> Report </a>
+-->
+ </nav>
+ </section>
+
+ <header class="header">
+
+ <nav>
+ <!--
+ <a class="item" [routerLink]='[{ outlets: { home: ["summary"],header: ["data"] } }]' > <mat-icon class="white-icon">table_chart</mat-icon> Summary </a>
+ <a class="item" [routerLink]='[{ outlets: { home: ["zoom"],header: ["data"] } }]'> <mat-icon class="white-icon">zoom_in</mat-icon> Zen Mode </a>
+ <a class="item" [routerLink]='[{ outlets: { home: ["compare"],header: ["data"] } }]'> <mat-icon class="white-icon">compare</mat-icon> Compare </a>
+-->
+
+ <router-outlet name="child1"></router-outlet>
+ <!--
+ <app-data-header></app-data-header> -->
+ </nav>
+
+ </header>
+
+
+
+ <main class="main">
+
+ <router-outlet name="child2"></router-outlet>`
+
+ </main>
+</div>
diff --git a/src/app/module/pages/home/home.component.scss b/src/app/module/pages/home/home.component.scss
new file mode 100644
index 0000000..aa14e28
--- /dev/null
+++ b/src/app/module/pages/home/home.component.scss
@@ -0,0 +1,253 @@
+
+.body-container {
+ --dust: #f;
+
+ --blue: #1e90ff;
+ --white: #ffffff;
+ --c-gray-900: #000000;
+ --c-gray-800: #1f1f1f;
+ --c-gray-700: #2e2e2e;
+ --c-gray-600: #313131;
+ --c-gray-500: #969593;
+ --c-gray-400: #a6a6a6;
+ --c-gray-300: #bdbbb7;
+ --c-gray-200: #f1f1f1;
+ --c-gray-100: #ffffff;
+
+ --c-blue: #060122;
+
+ --c-green-500: #45ffbc;
+ --c-olive-500: #e3ffa8;
+
+ --c-white: var(--c-gray-100);
+
+ --c-text-primary: var(--c-gray-100);
+ --c-text-secondary: var(--c-gray-200);
+ --c-text-tertiary: var(--c-gray-500);
+
+ --chart-background: rgba(250, 250, 250, 0.87);
+ --main-background:#fff; // darkmode var(--c-gray-800);
+}
+
+.body-container{
+ height: 100vh;
+ display: grid;
+ grid-template-columns: 200px 1fr;
+ grid-template-rows: 70px 1fr;
+ grid-template-areas:
+ "side header"
+ "side main";
+
+ font-family: "Be Vietnam Pro", sans-serif;
+}
+
+.header{
+
+ grid-area: header;
+ background-color: var(--c-gray-800);
+ border-bottom: 3px solid var(--c-gray-700);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ nav{
+ display: flex;
+ }
+
+ .item{
+ margin: 10px;
+ height: 30px;
+ width: 150px;
+
+ display: flex;
+ align-items: flex-end;
+
+
+ text-decoration:none;
+ text-align: center;
+ color: var(--c-gray-400);
+ font-size: 1.125rem;
+
+ }
+
+
+ .item:hover{
+
+ transform: translateX(4px);
+ color:white;
+ }
+}
+
+.sidebar{
+ background-color: var(--c-gray-700);
+ grid-area: side;
+ display: flex;
+ flex-direction:column ;
+ align-items: flex-end;
+ transition: 0.25s ease;
+
+ nav{
+ display: flex;
+ flex-direction:column ;
+ margin-top: 200px;
+ }
+
+ .item{
+ margin: 10px;
+ height: 30px;
+ width: 150px;
+
+ display: flex;
+ align-items: flex-end;
+
+
+ text-decoration:none;
+ text-align: center;
+ color: var(--c-gray-400);
+ font-size: 1.125rem;
+
+
+
+
+ img{
+ display: flex;
+ width: 60px;
+ }
+
+ .container-logo{
+
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ color: var(--c-gray-400);
+
+ .logo-font{
+ font-family: "Bodoni 72";
+ font-weight: bold;
+ }
+
+ .logo-light{
+ font-family: "Apple Braille";
+ font-weight: lighter;
+ font-size: 0.9rem;
+ border-bottom: solid 1px var(--c-gray-400);;
+ }
+ }
+
+
+ }
+
+ .item:hover{
+
+ transform: translateX(4px);
+ color:white;
+ }
+
+
+
+ img{
+ display: flex;
+ width: 60px;
+ }
+
+ .container-logo{
+ margin-top: 5px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ color: white;
+
+
+ .logo-font{
+ font-family: "Bodoni 72";
+ font-weight: bold;
+ }
+
+ .logo-light{
+ margin: 10px;
+ font-family: "Apple Braille";
+ font-weight: lighter;
+ font-size: 0.9rem;
+ border-bottom: solid 1px var(--c-gray-400);;
+ }
+ }
+}
+$gradient: linear-gradient(35deg, red, purple);
+.main{
+ background-color: var(--main-background);
+ grid-area: main;
+
+ display: flex;
+ flex-direction: column;
+}
+
+.main-header{
+ width: 100%;
+ height: 250px;
+ background-color: #313131;
+ display: flex;
+}
+
+.header-item{
+ width: 400px;
+ height: 200px;
+ background-color: #969593;
+ border-radius: 20px;
+ margin: 20px;
+}
+
+.maps{
+ display: flex;
+ margin: 30px;
+}
+
+
+
+
+// Icon classes
+.mat-icon{
+ margin-right: 5px;
+}
+
+.chart-form{
+ margin-left: 30px;
+ height: 150px;
+
+ display: flex;
+ align-items: center;
+
+
+}
+
+form{
+ width: 100%;
+ margin: 10px;
+ display: flex;
+ height: 70px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/module/pages/home/home.component.spec.ts b/src/app/module/pages/home/home.component.spec.ts
new file mode 100644
index 0000000..5075be7
--- /dev/null
+++ b/src/app/module/pages/home/home.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture<HomeComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ HomeComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/pages/home/home.component.ts b/src/app/module/pages/home/home.component.ts
new file mode 100644
index 0000000..463b813
--- /dev/null
+++ b/src/app/module/pages/home/home.component.ts
@@ -0,0 +1,222 @@
+import {Component, ElementRef, HostBinding, Input, OnInit, ViewChild} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import {Chart} from "chart.js/auto";
+import {config, filter} from "rxjs";
+import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+ private i:boolean=true
+/*
+ constructor(private router: Router) {
+ router.events.pipe(
+ filter(event => event instanceof NavigationEnd)
+ )
+ .subscribe(event => {
+ console.log(event.toString());
+ });
+ }
+ */
+ constructor(private router: Router) {
+
+ }
+ labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+
+//*************************lineChart-Trio*****************************
+ data:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Temperature-1",
+ data: [1400, 3000, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ // fillColor: '#d20f0f',
+ borderColor:"rgba(255, 10, 13, 0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ },
+ {
+ label: "Temperature-2",
+ data: [1500, 2500, 2500, 4000, 2600, 3500, 2900],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(136,26,28,0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ },
+ {
+ label: "Temperature-3",
+ data: [1700, 2300, 2300, 3500, 2300, 4500, 2900],
+ fill:true,
+ // fillColor: '#d20f0f',
+ // borderColor:"#200",
+ borderColor:"rgba(255,10,141,0.8)",
+ backgroundColor: "rgba(255, 10, 13, 0.1)",
+ tension:0.2
+ }
+ ]
+ }
+
+ linConfig:any={
+ type:'line',
+ data:this.data,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30
+ }
+ }
+ //*************************BarChart-Rain*****************************
+ databar:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ backgroundColor: "rgba(10,145,255,0.5)",
+ // borderColor:"#111",
+
+ }]
+ }
+ barConfig:any={
+ type:'bar',
+ data:this.databar,
+ options:{
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30
+ }
+ }
+//*************************lineChart-Solo*****************************
+ data_lineSolo:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ borderColor:"rgba(75,154,3,0.9)",
+ backgroundColor: "rgba(10,255,43,0.1)",
+ // borderColor:"#111",
+
+ }]
+ }
+ config_lineSolo:any={
+ type:'line',
+ data:this.data_lineSolo,
+ options:{
+ responsive:true,
+ radius:3,
+ hoverRadius:12,
+ hitRadius:30,
+ tension:0.05,
+
+ }
+ }
+ //*************************Pint-Dendrometer-Solo*****************************
+ data_pointSolo:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Dendrometer",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+
+ // borderColor:"rgb(39,45,33)",
+ borderColor:"rgb(100,176,27)",
+ backgroundColor: "rgba(10,255,43,0.00)",
+ showLine:false
+ // borderColor:"#111",
+
+ }]
+ }
+ blacK_config_pointSolo:any={
+ type:'line',
+ data:this.data_pointSolo,
+ options:{
+ plugins: {
+ legend: {
+ display: true,
+ labels: {
+ // color: 'white'
+ }
+ }
+ },
+ labelColors:'white',
+ responsive:true,
+ radius:5,
+ hoverRadius:12,
+ hitRadius:30,
+ tension:0.05,
+ pointBorderWidth:4,
+ scales: {
+ x: {
+ grid: {
+ color:"rgba(255,255,255,0.3)",
+ },
+ ticks: {
+ color: "white"
+ }
+ },
+ y: {
+ grid: {
+ color:"rgba(255,255,255,0.3)",
+ },
+ ticks: {
+ color: "white"
+ }
+ }
+ }
+
+ }
+ }
+ white_data_pointSolo:any ={
+ labels:this.labels,
+ datasets: [ {
+ label: "Rain",
+ data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
+ fill:true,
+ fillColor:'#111',
+ borderColor:"rgba(75,154,3,0.9)",
+ backgroundColor: "rgba(10,255,43,0.1)",
+ // borderColor:"#111",
+
+ }]
+ }
+
+
+ white_config_pointSolo:any={
+ type:'line',
+ data:this.white_data_pointSolo,
+ options:{
+ responsive:true,
+ radius:3,
+ hoverRadius:12,
+ hitRadius:30,
+ tension:0.05,
+
+ }
+ }
+
+ linechart: any;
+ barchart:any
+ soloLineChart:any
+ pointChart:any
+
+ ngOnInit(): void {
+ this.linechart=new Chart('chart2',this.linConfig)
+ this.barchart=new Chart('barchart',this.barConfig)
+ this.soloLineChart=new Chart('soloLineChart',this.config_lineSolo)
+ this.pointChart= new Chart('pointChart',this.white_config_pointSolo)
+ console.log("helllllo")
+ console.log("hello"+this.router.url)
+ }
+
+
+}
--
GitLab