Add dashboard page

Author: Blari

package.json

@@ -27,6 +27,7 @@
     "angular-calendar": "^0.28.20",
     "apexcharts": "^3.35.3",
     "date-fns": "^2.14.0",
+    "echarts": "^4.7.0",
     "font-awesome": "^4.7.0",
     "moment": "2.15.2",
     "ng-apexcharts": "^1.7.1",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 import { ToastrModule } from 'ngx-toastr';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
+import { DashboardModule } from './modules/dashboard/dashboard.module';
 
 import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
@@ -31,6 +32,7 @@ import { HttpInterceptorService } from './shared/services/http-interceptor.servi
     CrudModule,
     BrowserAnimationsModule,
     RouterModule,
+    DashboardModule,
     AppRoutingModule,
     ToastrModule.forRoot(),
     MatCardModule,

src/app/consts/routes.ts

@@ -1,5 +1,5 @@
 export enum routes {
-  DASHBOARD = '/app/dashboard',
+  DASHBOARD = '/dashboard',
   PROFILE = '/user/profile',
   CHANGE_PASSWORD = '/app/change-password',
   LOGIN = '/login',

src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts

@@ -7,12 +7,16 @@ import {
   ApexTooltip,
   ApexMarkers,
   ApexXAxis,
+  ApexStroke,
+  ApexLegend,
+  ApexGrid,
   ApexPlotOptions
 } from 'ng-apexcharts';
 
 import { DailyLineChartData, TimeData } from '../../models';
 import { colors } from '../../../../consts';
 import { customTooltip } from '../../consts';
+import * as ApexCharts from 'apexcharts';
 
 type ChartOptions = {
   series: ApexAxisChartSeries;
@@ -163,7 +167,7 @@ export class DailyLineChartComponent implements OnInit, OnChanges, AfterViewInit
           stops: [0, 100, 100, 100]
         }
       },
-      labels: labels,
+      labels,
       xaxis: {
         type: 'datetime',
         labels: {

src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.ts

@@ -1,5 +1,18 @@
 import { Component, Input, OnInit } from '@angular/core';
-
+import {
+  ApexAxisChartSeries,
+  ApexChart,
+  ApexFill,
+  ApexYAxis,
+  ApexTooltip,
+  ApexMarkers,
+  ApexXAxis,
+  ApexStroke,
+  ApexLegend,
+  ApexGrid,
+  ApexPlotOptions,
+  ApexDataLabels
+} from 'ng-apexcharts';
 import { ProjectStatData, ProjectTimeData } from '../../models';
 import { colors } from '../../../../consts';
 

src/app/modules/dashboard/components/server-chart/server-chart.component.ts

@@ -7,7 +7,7 @@ import {
   ApexStroke,
   ApexYAxis,
   ApexTitleSubtitle,
-  ApexLegend, ApexGrid
+  ApexLegend, ApexGrid, ApexFill
 } from 'ng-apexcharts';
 
 import { ServerChartData } from '../../models';

src/app/modules/dashboard/components/visits-chart/visits-chart.component.ts

@@ -2,7 +2,7 @@ import {AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges, V
 
 import { VisitsChartData } from '../../models';
 import { colors } from '../../../../consts';
-import {ChartOptions} from '../../../templates/charts/models/chart-options';
+import { ChartOptions } from '../../../templates/charts/models/chart-options';
 
 @Component({
   selector: 'app-visits-chart',
@@ -19,6 +19,7 @@ export class VisitsChartComponent implements OnChanges, AfterViewInit {
   public colors: typeof colors = colors;
   public chartOptions: Partial<ChartOptions>;
 
+  // tslint:disable-next-line:use-lifecycle-interface
   public ngOnInit(): void {
     this.initChart();
   }
@@ -35,15 +36,15 @@ export class VisitsChartComponent implements OnChanges, AfterViewInit {
               : colors.PINK
           ]
         }
-      })
+      });
     }
   }
 
   public ngAfterViewInit() {
     this.chartObj = new ApexCharts(
       this.chart.nativeElement,
       this.chartOptions
-    )
+    );
 
     this.chartObj.render();
   }
@@ -54,7 +55,7 @@ export class VisitsChartComponent implements OnChanges, AfterViewInit {
       chart: {
         height: 130,
         width: 130,
-        type: "radialBar",
+        type: 'radialBar',
         offsetY: -10
       },
       plotOptions: {
@@ -63,16 +64,16 @@ export class VisitsChartComponent implements OnChanges, AfterViewInit {
           endAngle: 180,
           dataLabels: {
             name: {
-              fontSize: "16px",
+              fontSize: '16px',
               color: undefined,
               offsetY: 120
             },
             value: {
               offsetY: 76,
-              fontSize: "22px",
+              fontSize: '22px',
               color: undefined,
-              formatter: function(val) {
-                return val + "%";
+              formatter(val) {
+                return val + '%';
               }
             },
             show: false

src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.ts

@@ -43,6 +43,7 @@ export class DashboardPageComponent {
     this.projectsStatsData$ = this.service.loadProjectsStatsData();
   }
 
+  // tslint:disable-next-line:use-lifecycle-interface
   public ngOnInit(): void {
     this.sharedService.currentTheme.subscribe((theme: string) => {
       this.currentTheme = theme;

yarn.lock

@@ -2777,6 +2777,13 @@ domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+echarts@^4.7.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
+  integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
+  dependencies:
+    zrender "4.3.2"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6313,3 +6320,8 @@ zone.js@~0.11.4:
   integrity sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==
   dependencies:
     tslib "^2.0.0"
+
+[email protected]:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
+  integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==