pages summary home header coming soon

src/app/module/components/summary/summary.component.css

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

src/app/module/components/summary/summary.component.html

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

src/app/module/components/summary/summary.component.spec.ts

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

src/app/module/components/summary/summary.component.ts

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

src/app/module/components/zoom/zoom.component.css

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

src/app/module/components/zoom/zoom.component.html

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

src/app/module/components/zoom/zoom.component.spec.ts

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

src/app/module/components/zoom/zoom.component.ts

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

src/app/module/pages/home/home.component.html

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

src/app/module/pages/home/home.component.scss

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

src/app/module/pages/home/home.component.spec.ts

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

src/app/module/pages/home/home.component.ts

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