tooltips on reserves, fix armory, improve load times

src/frontend/src/app/@core/core.module.ts

@@ -1,15 +1,10 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf, APP_INITIALIZER } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { throwIfAlreadyLoaded } from './module-import-guard';
-import { CookieService } from 'ngx-cookie-service';
 
-import {
-  AnalyticsService,
-  LayoutService,
-  PlayerService,
-  StateService,
-} from './utils';
 import { ApiService, initializeLoginSvc } from '../frontcraft/services/login-api';
+import { CookieService } from 'ngx-cookie-service';
+import { LayoutService } from './utils';
 
 const DATA_SERVICES = [  
   {provide: ApiService, useClass: ApiService},
@@ -24,12 +19,8 @@ const DATA_SERVICES = [
 
 export const NB_CORE_PROVIDERS = [
   ...DATA_SERVICES,
-
-  AnalyticsService,
-  LayoutService,
-  PlayerService,
-  StateService,
   CookieService,
+  LayoutService
 ];
 
 @NgModule({

src/frontend/src/app/@core/utils/analytics.service.ts

@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { Location } from '@angular/common';
-import { filter } from 'rxjs/operators';
-
-declare const ga: any;
-
-@Injectable()
-export class AnalyticsService {
-  private enabled: boolean;
-
-  constructor(private location: Location, private router: Router) {
-    this.enabled = false;
-  }
-
-  trackPageViews() {
-    if (this.enabled) {
-      this.router.events.pipe(
-        filter((event) => event instanceof NavigationEnd),
-      )
-        .subscribe(() => {
-          ga('send', {hitType: 'pageview', page: this.location.path()});
-        });
-    }
-  }
-
-  trackEvent(eventName: string) {
-    if (this.enabled) {
-      ga('send', 'event', eventName);
-    }
-  }
-}

src/frontend/src/app/@core/utils/index.ts

@@ -1,11 +1,7 @@
 import { LayoutService } from './layout.service';
-import { AnalyticsService } from './analytics.service';
-import { PlayerService } from './player.service';
 import { StateService } from './state.service';
 
 export {
   LayoutService,
-  AnalyticsService,
-  PlayerService,
   StateService,
 };

src/frontend/src/app/@core/utils/player.service.ts

@@ -1,66 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export class Track {
-  name: string;
-  artist: string;
-  url: string;
-  cover: string;
-}
-
-@Injectable()
-export class PlayerService {
-  current: number;
-  playlist: Track[] = [
-    {
-      name: 'Don\'t Wanna Fight',
-      artist: 'Alabama Shakes',
-      url: 'https://p.scdn.co/mp3-preview/6156cdbca425a894972c02fca9d76c0b70e001af',
-      cover: 'assets/images/cover1.jpg',
-    },
-    {
-      name: 'Harder',
-      artist: 'Daft Punk',
-      url: 'https://p.scdn.co/mp3-preview/92a04c7c0e96bf93a1b1b1cae7dfff1921969a7b',
-      cover: 'assets/images/cover2.jpg',
-    },
-    {
-      name: 'Come Together',
-      artist: 'Beatles',
-      url: 'https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9',
-      cover: 'assets/images/cover3.jpg',
-    },
-  ];
-
-  random(): Track {
-    this.current = Math.floor(Math.random() * this.playlist.length);
-    return this.playlist[this.current];
-  }
-
-  next(): Track {
-    return this.getNextTrack();
-  }
-
-  prev() {
-    return this.getPrevTrack();
-  }
-
-  private getNextTrack(): Track {
-    if (this.current === this.playlist.length - 1) {
-      this.current = 0;
-    } else {
-      this.current++;
-    }
-
-    return this.playlist[this.current];
-  }
-
-  private getPrevTrack(): Track {
-    if (this.current === 0) {
-      this.current = this.playlist.length - 1;
-    } else {
-      this.current--;
-    }
-
-    return this.playlist[this.current];
-  }
-}

src/frontend/src/app/app.component.ts

@@ -4,7 +4,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 import { Component, OnInit } from '@angular/core';
-import { AnalyticsService } from './@core/utils/analytics.service';
 import { ApiService } from './frontcraft/services/login-api';
 
 @Component({
@@ -13,13 +12,11 @@ import { ApiService } from './frontcraft/services/login-api';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private loginSvc: ApiService, private analytics: AnalyticsService) {
+  constructor(private loginSvc: ApiService) {
     
   }
 
   ngOnInit(): void {
-    this.analytics.trackPageViews();
- 
     window['s'] = this.loginSvc
   }
 }

src/frontend/src/app/app.module.ts

@@ -7,7 +7,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { CoreModule } from './@core/core.module';
 import { ThemeModule } from './@theme/theme.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -22,6 +21,7 @@ import {
 } from '@nebular/theme';
 import { ApiService, initializeLoginSvc } from './frontcraft/services/login-api';
 import { CookieService } from 'ngx-cookie-service';
+import { CoreModule } from './@core/core.module';
 
 @NgModule({
   declarations: [AppComponent],

src/frontend/src/app/demo_pages/charts/chartjs/chartjs-bar-horizontal.component.ts

@@ -1,85 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-chartjs-bar-horizontal',
-  template: `
-    <chart type="horizontalBar" [data]="data" [options]="options"></chart>
-  `,
-})
-export class ChartjsBarHorizontalComponent implements OnDestroy {
-  data: any;
-  options: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const chartjs: any = config.variables.chartjs;
-
-      this.data = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
-        datasets: [{
-            label: 'Dataset 1',
-            backgroundColor: colors.infoLight,
-            borderWidth: 1,
-            data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          }, {
-            label: 'Dataset 2',
-            backgroundColor: colors.successLight,
-            data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          },
-        ],
-      };
-
-      this.options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        elements: {
-          rectangle: {
-            borderWidth: 2,
-          },
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                display: true,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              gridLines: {
-                display: false,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-        },
-        legend: {
-          position: 'right',
-          labels: {
-            fontColor: chartjs.textColor,
-          },
-        },
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-
-  private random() {
-    return Math.round(Math.random() * 100);
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs-bar.component.ts

@@ -1,73 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService, NbColorHelper } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-chartjs-bar',
-  template: `
-    <chart type="bar" [data]="data" [options]="options"></chart>
-  `,
-})
-export class ChartjsBarComponent implements OnDestroy {
-  data: any;
-  options: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const chartjs: any = config.variables.chartjs;
-
-      this.data = {
-        labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
-        datasets: [{
-          data: [65, 59, 80, 81, 56, 55, 40],
-          label: 'Series A',
-          backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
-        }, {
-          data: [28, 48, 40, 19, 86, 27, 90],
-          label: 'Series B',
-          backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
-        }],
-      };
-
-      this.options = {
-        maintainAspectRatio: false,
-        responsive: true,
-        legend: {
-          labels: {
-            fontColor: chartjs.textColor,
-          },
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                display: false,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              gridLines: {
-                display: true,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-        },
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs-line.component.ts

@@ -1,81 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService, NbColorHelper } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-chartjs-line',
-  template: `
-    <chart type="line" [data]="data" [options]="options"></chart>
-  `,
-})
-export class ChartjsLineComponent implements OnDestroy {
-  data: any;
-  options: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const chartjs: any = config.variables.chartjs;
-
-      this.data = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          data: [65, 59, 80, 81, 56, 55, 40],
-          label: 'Series A',
-          backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
-          borderColor: colors.primary,
-        }, {
-          data: [28, 48, 40, 19, 86, 27, 90],
-          label: 'Series B',
-          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
-          borderColor: colors.danger,
-        }, {
-          data: [18, 48, 77, 9, 100, 27, 40],
-          label: 'Series C',
-          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
-          borderColor: colors.info,
-        },
-        ],
-      };
-
-      this.options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                display: true,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              gridLines: {
-                display: true,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-        },
-        legend: {
-          labels: {
-            fontColor: chartjs.textColor,
-          },
-        },
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs-multiple-xaxis.component.ts

@@ -1,117 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-chartjs-multiple-xaxis',
-  template: `
-    <chart type="line" [data]="data" [options]="options"></chart>
-  `,
-})
-export class ChartjsMultipleXaxisComponent implements OnDestroy {
-  data: {};
-  options: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const chartjs: any = config.variables.chartjs;
-
-      this.data = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
-        datasets: [{
-          label: 'dataset - big points',
-          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          borderColor: colors.primary,
-          backgroundColor: colors.primary,
-          fill: false,
-          borderDash: [5, 5],
-          pointRadius: 8,
-          pointHoverRadius: 10,
-        }, {
-          label: 'dataset - individual point sizes',
-          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          borderColor: colors.dangerLight,
-          backgroundColor: colors.dangerLight,
-          fill: false,
-          borderDash: [5, 5],
-          pointRadius: 8,
-          pointHoverRadius: 10,
-        }, {
-          label: 'dataset - large pointHoverRadius',
-          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          borderColor: colors.info,
-          backgroundColor: colors.info,
-          fill: false,
-          pointRadius: 8,
-          pointHoverRadius: 10,
-        }, {
-          label: 'dataset - large pointHitRadius',
-          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
-          borderColor: colors.success,
-          backgroundColor: colors.success,
-          fill: false,
-          pointRadius: 8,
-          pointHoverRadius: 10,
-        }],
-      };
-
-      this.options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          position: 'bottom',
-          labels: {
-            fontColor: chartjs.textColor,
-          },
-        },
-        hover: {
-          mode: 'index',
-        },
-        scales: {
-          xAxes: [
-            {
-              display: true,
-              scaleLabel: {
-                display: true,
-                labelString: 'Month',
-              },
-              gridLines: {
-                display: true,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              display: true,
-              scaleLabel: {
-                display: true,
-                labelString: 'Value',
-              },
-              gridLines: {
-                display: true,
-                color: chartjs.axisLineColor,
-              },
-              ticks: {
-                fontColor: chartjs.textColor,
-              },
-            },
-          ],
-        },
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-
-  private random() {
-    return Math.round(Math.random() * 100);
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs-pie.component.ts

@@ -1,56 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-chartjs-pie',
-  template: `
-    <chart type="pie" [data]="data" [options]="options"></chart>
-  `,
-})
-export class ChartjsPieComponent implements OnDestroy {
-  data: any;
-  options: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const chartjs: any = config.variables.chartjs;
-
-      this.data = {
-        labels: ['Download Sales', 'In-Store Sales', 'Mail Sales'],
-        datasets: [{
-          data: [300, 500, 100],
-          backgroundColor: [colors.primaryLight, colors.infoLight, colors.successLight],
-        }],
-      };
-
-      this.options = {
-        maintainAspectRatio: false,
-        responsive: true,
-        scales: {
-          xAxes: [
-            {
-              display: false,
-            },
-          ],
-          yAxes: [
-            {
-              display: false,
-            },
-          ],
-        },
-        legend: {
-          labels: {
-            fontColor: chartjs.textColor,
-          },
-        },
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs-radar.component.ts

@@ -1,64 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService, NbColorHelper } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-chartjs-radar',
-  template: `
-    <chart type="radar" [data]="data" [options]="options"></chart>
-  `,
-})
-export class ChartjsRadarComponent implements OnDestroy {
-  options: any;
-  data: {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const chartjs: any = config.variables.chartjs;
-
-      this.data = {
-        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-        datasets: [{
-          data: [65, 59, 90, 81, 56, 55, 40],
-          label: 'Series A',
-          borderColor: colors.danger,
-          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5),
-        }, {
-          data: [28, 48, 40, 19, 96, 27, 100],
-          label: 'Series B',
-          borderColor: colors.warning,
-          backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5),
-        }],
-      };
-
-      this.options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        scaleFontColor: 'white',
-        legend: {
-          labels: {
-            fontColor: chartjs.textColor,
-          },
-        },
-        scale: {
-          pointLabels: {
-            fontSize: 14,
-            fontColor: chartjs.textColor,
-          },
-          gridLines: {
-            color: chartjs.axisLineColor,
-          },
-          angleLines: {
-            color: chartjs.axisLineColor,
-          },
-        },
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs.component.html

@@ -1,50 +0,0 @@
-<div class="row">
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Pie</nb-card-header>
-      <nb-card-body>
-        <ngx-chartjs-pie></ngx-chartjs-pie>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Bar</nb-card-header>
-      <nb-card-body>
-        <ngx-chartjs-bar></ngx-chartjs-bar>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Line</nb-card-header>
-      <nb-card-body>
-        <ngx-chartjs-line></ngx-chartjs-line>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Multiple x-axis</nb-card-header>
-      <nb-card-body>
-        <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Bar Horizontal</nb-card-header>
-      <nb-card-body>
-        <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Radar</nb-card-header>
-      <nb-card-body>
-        <ngx-chartjs-radar></ngx-chartjs-radar>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>

src/frontend/src/app/demo_pages/charts/chartjs/chartjs.component.scss

@@ -1,20 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  ngx-chartjs-pie,
-  ngx-chartjs-bar,
-  ngx-chartjs-line,
-  ngx-chartjs-multiple-xaxis,
-  ngx-chartjs-bar-horizontal,
-  ngx-chartjs-radar {
-    display: block;
-    height: nb-theme(card-height-medium);
-    width: 100%;
-
-    ::ng-deep chart {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-  }
-}

src/frontend/src/app/demo_pages/charts/chartjs/chartjs.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-chartjs',
-  styleUrls: ['./chartjs.component.scss'],
-  templateUrl: './chartjs.component.html',
-})
-export class ChartjsComponent {}

src/frontend/src/app/demo_pages/charts/charts-routing.module.ts

@@ -1,35 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ChartsComponent } from './charts.component';
-import { EchartsComponent } from './echarts/echarts.component';
-import { D3Component } from './d3/d3.component';
-import { ChartjsComponent } from './chartjs/chartjs.component';
-
-const routes: Routes = [{
-  path: '',
-  component: ChartsComponent,
-  children: [{
-    path: 'echarts',
-    component: EchartsComponent,
-  }, {
-    path: 'd3',
-    component: D3Component,
-  }, {
-    path: 'chartjs',
-    component: ChartjsComponent,
-  }],
-}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ChartsRoutingModule { }
-
-export const routedComponents = [
-  ChartsComponent,
-  EchartsComponent,
-  D3Component,
-  ChartjsComponent,
-];

src/frontend/src/app/demo_pages/charts/charts.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-charts',
-  template: `
-    <router-outlet></router-outlet>
-  `,
-})
-export class ChartsComponent {
-}

src/frontend/src/app/demo_pages/charts/charts.module.ts

@@ -1,63 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NgxEchartsModule } from 'ngx-echarts';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { ChartModule } from 'angular2-chartjs';
-import { NbCardModule } from '@nebular/theme';
-
-import { ThemeModule } from '../../@theme/theme.module';
-
-import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
-import { ChartjsBarComponent } from './chartjs/chartjs-bar.component';
-import { ChartjsLineComponent } from './chartjs/chartjs-line.component';
-import { ChartjsPieComponent } from './chartjs/chartjs-pie.component';
-import { ChartjsMultipleXaxisComponent } from './chartjs/chartjs-multiple-xaxis.component';
-import { ChartjsBarHorizontalComponent } from './chartjs/chartjs-bar-horizontal.component';
-import { ChartjsRadarComponent } from './chartjs/chartjs-radar.component';
-import { D3BarComponent } from './d3/d3-bar.component';
-import { D3LineComponent } from './d3/d3-line.component';
-import { D3PieComponent } from './d3/d3-pie.component';
-import { D3AreaStackComponent } from './d3/d3-area-stack.component';
-import { D3PolarComponent } from './d3/d3-polar.component';
-import { D3AdvancedPieComponent } from './d3/d3-advanced-pie.component';
-import { EchartsLineComponent } from './echarts/echarts-line.component';
-import { EchartsPieComponent } from './echarts/echarts-pie.component';
-import { EchartsBarComponent } from './echarts/echarts-bar.component';
-import { EchartsMultipleXaxisComponent } from './echarts/echarts-multiple-xaxis.component';
-import { EchartsAreaStackComponent } from './echarts/echarts-area-stack.component';
-import { EchartsBarAnimationComponent } from './echarts/echarts-bar-animation.component';
-import { EchartsRadarComponent } from './echarts/echarts-radar.component';
-
-const components = [
-  ChartjsBarComponent,
-  ChartjsLineComponent,
-  ChartjsPieComponent,
-  ChartjsMultipleXaxisComponent,
-  ChartjsBarHorizontalComponent,
-  ChartjsRadarComponent,
-  D3BarComponent,
-  D3LineComponent,
-  D3PieComponent,
-  D3AreaStackComponent,
-  D3PolarComponent,
-  D3AdvancedPieComponent,
-  EchartsLineComponent,
-  EchartsPieComponent,
-  EchartsBarComponent,
-  EchartsMultipleXaxisComponent,
-  EchartsAreaStackComponent,
-  EchartsBarAnimationComponent,
-  EchartsRadarComponent,
-];
-
-@NgModule({
-  imports: [
-    ThemeModule,
-    ChartsRoutingModule,
-    NgxEchartsModule,
-    NgxChartsModule,
-    ChartModule,
-    NbCardModule,
-  ],
-  declarations: [...routedComponents, ...components],
-})
-export class ChartsModule {}

src/frontend/src/app/demo_pages/charts/d3/d3-advanced-pie.component.ts

@@ -1,43 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-d3-advanced-pie',
-  template: `
-    <ngx-charts-advanced-pie-chart
-      [scheme]="colorScheme"
-      [results]="single">
-    </ngx-charts-advanced-pie-chart>
-  `,
-})
-export class D3AdvancedPieComponent implements OnDestroy {
-  single = [
-    {
-      name: 'Germany',
-      value: 8940000,
-    },
-    {
-      name: 'USA',
-      value: 5000000,
-    },
-    {
-      name: 'France',
-      value: 7200000,
-    },
-  ];
-  colorScheme: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const colors: any = config.variables;
-      this.colorScheme = {
-        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3-area-stack.component.ts

@@ -1,73 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-d3-area-stack',
-  template: `
-    <ngx-charts-area-chart
-      [scheme]="colorScheme"
-      [results]="multi"
-      [xAxis]="showXAxis"
-      [yAxis]="showYAxis"
-      [legend]="showLegend"
-      [showXAxisLabel]="showXAxisLabel"
-      [showYAxisLabel]="showYAxisLabel"
-      [xAxisLabel]="xAxisLabel"
-      [yAxisLabel]="yAxisLabel"
-      [autoScale]="autoScale">
-    </ngx-charts-area-chart>
-  `,
-})
-export class D3AreaStackComponent implements OnDestroy {
-  multi = [{
-    name: 'Germany',
-    series: [{
-        name: '2010',
-        value: 7300000,
-      }, {
-        name: '2011',
-        value: 8940000,
-      }],
-  }, {
-    name: 'USA',
-    series: [{
-        name: '2010',
-        value: 7870000,
-      }, {
-        name: '2011',
-        value: 8270000,
-      }],
-  }, {
-    name: 'France',
-    series: [{
-        name: '2010',
-        value: 5000002,
-      }, {
-        name: '2011',
-        value: 5800000,
-      }],
-  }];
-  showLegend = true;
-  autoScale = true;
-  showXAxis = true;
-  showYAxis = true;
-  showXAxisLabel = true;
-  showYAxisLabel = true;
-  xAxisLabel = 'Country';
-  yAxisLabel = 'Population';
-  colorScheme: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const colors: any = config.variables;
-      this.colorScheme = {
-        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3-bar.component.ts

@@ -1,45 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-d3-bar',
-  template: `
-    <ngx-charts-bar-vertical
-      [scheme]="colorScheme"
-      [results]="results"
-      [xAxis]="showXAxis"
-      [yAxis]="showYAxis"
-      [legend]="showLegend"
-      [xAxisLabel]="xAxisLabel"
-      [yAxisLabel]="yAxisLabel">
-    </ngx-charts-bar-vertical>
-  `,
-})
-export class D3BarComponent implements OnDestroy {
-
-  results = [
-    { name: 'Germany', value: 8940 },
-    { name: 'USA', value: 5000 },
-    { name: 'France', value: 7200 },
-  ];
-  showLegend = true;
-  showXAxis = true;
-  showYAxis = true;
-  xAxisLabel = 'Country';
-  yAxisLabel = 'Population';
-  colorScheme: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const colors: any = config.variables;
-      this.colorScheme = {
-        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3-line.component.ts

@@ -1,84 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-d3-line',
-  template: `
-    <ngx-charts-line-chart
-      [scheme]="colorScheme"
-      [results]="multi"
-      [xAxis]="showXAxis"
-      [yAxis]="showYAxis"
-      [legend]="showLegend"
-      [showXAxisLabel]="showXAxisLabel"
-      [showYAxisLabel]="showYAxisLabel"
-      [xAxisLabel]="xAxisLabel"
-      [yAxisLabel]="yAxisLabel">
-    </ngx-charts-line-chart>
-  `,
-})
-export class D3LineComponent implements OnDestroy {
-  multi = [
-    {
-      name: 'Germany',
-      series: [
-        {
-          name: '2010',
-          value: 7300,
-        },
-        {
-          name: '2011',
-          value: 8940,
-        },
-      ],
-    },
-    {
-      name: 'USA',
-      series: [
-        {
-          name: '2010',
-          value: 7870,
-        },
-        {
-          name: '2011',
-          value: 8270,
-        },
-      ],
-    },
-    {
-      name: 'France',
-      series: [
-        {
-          name: '2010',
-          value: 5002,
-        },
-        {
-          name: '2011',
-          value: 5800,
-        },
-      ],
-    },
-  ];
-  showLegend = true;
-  showXAxis = true;
-  showYAxis = true;
-  showXAxisLabel = true;
-  xAxisLabel = 'Country';
-  showYAxisLabel = true;
-  yAxisLabel = 'Population';
-  colorScheme: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const colors: any = config.variables;
-      this.colorScheme = {
-        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3-pie.component.ts

@@ -1,38 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-d3-pie',
-  template: `
-    <ngx-charts-pie-chart
-      [scheme]="colorScheme"
-      [results]="results"
-      [legend]="showLegend"
-      [labels]="showLabels">
-    </ngx-charts-pie-chart>
-  `,
-})
-export class D3PieComponent implements OnDestroy {
-  results = [
-    { name: 'Germany', value: 8940 },
-    { name: 'USA', value: 5000 },
-    { name: 'France', value: 7200 },
-  ];
-  showLegend = true;
-  showLabels = true;
-  colorScheme: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const colors: any = config.variables;
-      this.colorScheme = {
-        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3-polar.component.ts

@@ -1,98 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-d3-polar',
-  template: `
-    <ngx-charts-polar-chart
-      [scheme]="colorScheme"
-      [results]="multi"
-      [xAxis]="showXAxis"
-      [yAxis]="showYAxis"
-      [legend]="showLegend"
-      [showXAxisLabel]="showXAxisLabel"
-      [showYAxisLabel]="showYAxisLabel"
-      [xAxisLabel]="xAxisLabel"
-      [yAxisLabel]="yAxisLabel"
-      [autoScale]="autoScale">
-    </ngx-charts-polar-chart>
-  `,
-})
-export class D3PolarComponent implements OnDestroy {
-  multi = [
-    {
-      name: 'Germany',
-      series: [
-        {
-          name: '1990',
-          value: 31476,
-        },
-        {
-          name: '2000',
-          value: 36953,
-        },
-        {
-          name: '2010',
-          value: 40632,
-        },
-      ],
-    },
-    {
-      name: 'USA',
-      series: [
-        {
-          name: '1990',
-          value: 37060,
-        },
-        {
-          name: '2000',
-          value: 45986,
-        },
-        {
-          name: '2010',
-          value: 49737,
-        },
-      ],
-    },
-    {
-      name: 'France',
-      series: [
-        {
-          name: '1990',
-          value: 29476,
-        },
-        {
-          name: '2000',
-          value: 34774,
-        },
-        {
-          name: '2010',
-          value: 36240,
-        },
-      ],
-    },
-  ];
-  showLegend = true;
-  autoScale = true;
-  showXAxis = true;
-  showYAxis = true;
-  showXAxisLabel = true;
-  showYAxisLabel = true;
-  xAxisLabel = 'Country';
-  yAxisLabel = 'Population';
-  colorScheme: any;
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const colors: any = config.variables;
-      this.colorScheme = {
-        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3.component.html

@@ -1,42 +0,0 @@
-<div class="row">
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Pie</nb-card-header>
-      <nb-card-body>
-        <ngx-d3-pie></ngx-d3-pie>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Bar</nb-card-header>
-      <nb-card-body>
-        <ngx-d3-bar></ngx-d3-bar>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Line</nb-card-header>
-      <nb-card-body>
-        <ngx-d3-line></ngx-d3-line>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Advanced Pie</nb-card-header>
-      <nb-card-body>
-        <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Area Chart</nb-card-header>
-      <nb-card-body>
-        <ngx-d3-area-stack></ngx-d3-area-stack>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>

src/frontend/src/app/demo_pages/charts/d3/d3.component.scss

@@ -1,46 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  ngx-d3-bar,
-  ngx-d3-pie,
-  ngx-d3-advanced-pie,
-  ngx-d3-area-stack,
-  ngx-d3-line,
-  ngx-d3-polar {
-    display: block;
-    width: 100%;
-    height: nb-theme(card-height-medium);
-
-    ::ng-deep {
-      .pie-label {
-        fill: nb-theme(text-basic-color);
-      }
-
-      text {
-        fill: nb-theme(text-hint-color);
-      }
-
-      .chart-legend {
-        .legend-labels {
-          background: nb-theme(background-basic-color-2);
-        }
-        .legend-label {
-          color: nb-theme(text-hint-color);
-          .active .legend-label-text {
-            color: nb-theme(text-basic-color);
-          }
-        }
-      }
-
-      .total-value,
-      .item-value,
-      .item-percent {
-        line-height: 1.25;
-      }
-
-      .legend-items {
-        overflow-y: hidden;
-      }
-    }
-  }
-}

src/frontend/src/app/demo_pages/charts/d3/d3.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-d3',
-  styleUrls: ['./d3.component.scss'],
-  templateUrl: './d3.component.html',
-})
-export class D3Component {}

src/frontend/src/app/demo_pages/charts/echarts/echarts-area-stack.component.ts

@@ -1,140 +0,0 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-area-stack',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsAreaStackComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: echarts.tooltipBackgroundColor,
-            },
-          },
-        },
-        legend: {
-          data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
-          textStyle: {
-            color: echarts.textColor,
-          },
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: echarts.splitLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: 'Mail marketing',
-            type: 'line',
-            stack: 'Total amount',
-            areaStyle: { normal: { opacity: echarts.areaOpacity } },
-            data: [120, 132, 101, 134, 90, 230, 210],
-          },
-          {
-            name: 'Affiliate advertising',
-            type: 'line',
-            stack: 'Total amount',
-            areaStyle: { normal: { opacity: echarts.areaOpacity } },
-            data: [220, 182, 191, 234, 290, 330, 310],
-          },
-          {
-            name: 'Video ad',
-            type: 'line',
-            stack: 'Total amount',
-            areaStyle: { normal: { opacity: echarts.areaOpacity } },
-            data: [150, 232, 201, 154, 190, 330, 410],
-          },
-          {
-            name: 'Direct interview',
-            type: 'line',
-            stack: 'Total amount',
-            areaStyle: { normal: { opacity: echarts.areaOpacity } },
-            data: [320, 332, 301, 334, 390, 330, 320],
-          },
-          {
-            name: 'Search engine',
-            type: 'line',
-            stack: 'Total amount',
-            label: {
-              normal: {
-                show: true,
-                position: 'top',
-                textStyle: {
-                  color: echarts.textColor,
-                },
-              },
-            },
-            areaStyle: { normal: { opacity: echarts.areaOpacity } },
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-          },
-        ],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts-bar-animation.component.ts

@@ -1,103 +0,0 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-bar-animation',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsBarAnimationComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-      const xAxisData = [];
-      const data1 = [];
-      const data2 = [];
-
-      const colors: any = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.primaryLight, colors.infoLight],
-        legend: {
-          data: ['bar', 'bar2'],
-          align: 'left',
-          textStyle: {
-            color: echarts.textColor,
-          },
-        },
-        xAxis: [
-          {
-            data: xAxisData,
-            silent: false,
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: echarts.splitLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: 'bar',
-            type: 'bar',
-            data: data1,
-            animationDelay: idx => idx * 10,
-          },
-          {
-            name: 'bar2',
-            type: 'bar',
-            data: data2,
-            animationDelay: idx => idx * 10 + 100,
-          },
-        ],
-        animationEasing: 'elasticOut',
-        animationDelayUpdate: idx => idx * 5,
-      };
-
-      for (let i = 0; i < 100; i++) {
-        xAxisData.push('Category ' + i);
-        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
-        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts-bar.component.ts

@@ -1,92 +0,0 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-bar',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsBarComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.primaryLight],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: echarts.splitLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: 'Score',
-            type: 'bar',
-            barWidth: '60%',
-            data: [10, 52, 200, 334, 390, 330, 220],
-          },
-        ],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts-line.component.ts

@@ -1,106 +0,0 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-line',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsLineComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.danger, colors.primary, colors.info],
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}',
-        },
-        legend: {
-          left: 'left',
-          data: ['Line 1', 'Line 2', 'Line 3'],
-          textStyle: {
-            color: echarts.textColor,
-          },
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: 'log',
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: echarts.splitLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        series: [
-          {
-            name: 'Line 1',
-            type: 'line',
-            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
-          },
-          {
-            name: 'Line 2',
-            type: 'line',
-            data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
-          },
-          {
-            name: 'Line 3',
-            type: 'line',
-            data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
-          },
-        ],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts-multiple-xaxis.component.ts

@@ -1,166 +0,0 @@
-import { Component, AfterViewInit, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-multiple-xaxis',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsMultipleXaxisComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.success, colors.info],
-        tooltip: {
-          trigger: 'none',
-          axisPointer: {
-            type: 'cross',
-          },
-        },
-        legend: {
-          data: ['2015 Precipitation', '2016 Precipitation'],
-          textStyle: {
-            color: echarts.textColor,
-          },
-        },
-        grid: {
-          top: 70,
-          bottom: 50,
-        },
-        xAxis: [
-          {
-            type: 'category',
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              onZero: false,
-              lineStyle: {
-                color: colors.info,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-            axisPointer: {
-              label: {
-                formatter: params => {
-                  return (
-                    'Precipitation  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
-                  );
-                },
-              },
-            },
-            data: [
-              '2016-1',
-              '2016-2',
-              '2016-3',
-              '2016-4',
-              '2016-5',
-              '2016-6',
-              '2016-7',
-              '2016-8',
-              '2016-9',
-              '2016-10',
-              '2016-11',
-              '2016-12',
-            ],
-          },
-          {
-            type: 'category',
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              onZero: false,
-              lineStyle: {
-                color: colors.success,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-            axisPointer: {
-              label: {
-                formatter: params => {
-                  return (
-                    'Precipitation  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
-                  );
-                },
-              },
-            },
-            data: [
-              '2015-1',
-              '2015-2',
-              '2015-3',
-              '2015-4',
-              '2015-5',
-              '2015-6',
-              '2015-7',
-              '2015-8',
-              '2015-9',
-              '2015-10',
-              '2015-11',
-              '2015-12',
-            ],
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLine: {
-              lineStyle: {
-                color: echarts.axisLineColor,
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: echarts.splitLineColor,
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                color: echarts.textColor,
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: '2015 Precipitation',
-            type: 'line',
-            xAxisIndex: 1,
-            smooth: true,
-            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
-          },
-          {
-            name: '2016 Precipitation',
-            type: 'line',
-            smooth: true,
-            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
-          },
-        ],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts-pie.component.ts

@@ -1,81 +0,0 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-pie',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsPieComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
-          textStyle: {
-            color: echarts.textColor,
-          },
-        },
-        series: [
-          {
-            name: 'Countries',
-            type: 'pie',
-            radius: '80%',
-            center: ['50%', '50%'],
-            data: [
-              { value: 335, name: 'Germany' },
-              { value: 310, name: 'France' },
-              { value: 234, name: 'Canada' },
-              { value: 135, name: 'Russia' },
-              { value: 1548, name: 'USA' },
-            ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: echarts.itemHoverShadowColor,
-              },
-            },
-            label: {
-              normal: {
-                textStyle: {
-                  color: echarts.textColor,
-                },
-              },
-            },
-            labelLine: {
-              normal: {
-                lineStyle: {
-                  color: echarts.axisLineColor,
-                },
-              },
-            },
-          },
-        ],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts-radar.component.ts

@@ -1,76 +0,0 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-echarts-radar',
-  template: `
-    <div echarts [options]="options" class="echart"></div>
-  `,
-})
-export class EchartsRadarComponent implements AfterViewInit, OnDestroy {
-  options: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
-
-      const colors: any = config.variables;
-      const echarts: any = config.variables.echarts;
-
-      this.options = {
-        backgroundColor: echarts.bg,
-        color: [colors.danger, colors.warning],
-        tooltip: {},
-        legend: {
-          data: ['Allocated Budget', 'Actual Spending'],
-          textStyle: {
-            color: echarts.textColor,
-          },
-        },
-        radar: {
-          name: {
-            textStyle: {
-              color: echarts.textColor,
-            },
-          },
-          indicator: [
-            { name: 'Sales', max: 6500 },
-            { name: 'Administration', max: 16000 },
-            { name: 'Information Techology', max: 30000 },
-            { name: 'Customer Support', max: 38000 },
-            { name: 'Development', max: 52000 },
-            { name: 'Marketing', max: 25000 },
-          ],
-          splitArea: {
-            areaStyle: {
-              color: 'transparent',
-            },
-          },
-        },
-        series: [
-          {
-            name: 'Budget vs Spending',
-            type: 'radar',
-            data: [
-              {
-                value: [4300, 10000, 28000, 35000, 50000, 19000],
-                name: 'Allocated Budget',
-              },
-              {
-                value: [5000, 14000, 28000, 31000, 42000, 21000],
-                name: 'Actual Spending',
-              },
-            ],
-          },
-        ],
-      };
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts.component.html

@@ -1,58 +0,0 @@
-<div class="row">
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Pie</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-pie></ngx-echarts-pie>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Bar</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-bar></ngx-echarts-bar>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Line</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-line></ngx-echarts-line>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Multiple x-axis</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Area Stack</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-area-stack></ngx-echarts-area-stack>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Bar Animation</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
-      </nb-card-body>
-    </nb-card>
-  </div>
-  <div class="col-lg-6">
-    <nb-card>
-      <nb-card-header>Radar</nb-card-header>
-      <nb-card-body>
-        <ngx-echarts-radar></ngx-echarts-radar>
-      </nb-card-body>
-    </nb-card>
-  </div>
-</div>

src/frontend/src/app/demo_pages/charts/echarts/echarts.component.scss

@@ -1,20 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  ngx-echarts-pie,
-  ngx-echarts-bar,
-  ngx-echarts-line,
-  ngx-echarts-multiple-xaxis,
-  ngx-echarts-area-stack,
-  ngx-echarts-bar-animation,
-  ngx-echarts-radar {
-    display: block;
-    height: nb-theme(card-height-medium);
-    width: 100%;
-  }
-
-  ::ng-deep .echart {
-    height: 100%;
-    width: 100%;
-  }
-}

src/frontend/src/app/demo_pages/charts/echarts/echarts.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-echarts',
-  styleUrls: ['./echarts.component.scss'],
-  templateUrl: './echarts.component.html',
-})
-export class EchartsComponent {}

src/frontend/src/app/demo_pages/dashboard/contacts/contacts.component.html

@@ -1,23 +0,0 @@
-<nb-card size="giant">
-  <nb-tabset fullWidth>
-
-    <nb-tab tabTitle="Contacts">
-      <nb-list>
-        <nb-list-item class="contact" *ngFor="let c of contacts">
-          <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
-          <nb-icon icon="phone-outline" pack="eva"></nb-icon>
-        </nb-list-item>
-      </nb-list>
-    </nb-tab>
-
-    <nb-tab tabTitle="Recent">
-      <nb-list>
-        <nb-list-item class="contact" *ngFor="let c of recent">
-          <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
-          <span class="caption">{{ c.time | date: 'shortTime' }}</span>
-        </nb-list-item>
-      </nb-list>
-    </nb-tab>
-
-  </nb-tabset>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/contacts/contacts.component.scss

@@ -1,34 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  nb-card {
-    overflow: hidden;
-  }
-
-  nb-tabset {
-    display: flex;
-    flex-direction: column;
-
-    ::ng-deep ul {
-      // make same size as card header
-      padding-bottom: 1px;
-      ::ng-deep .tab-link {
-        padding: 1.25rem 2rem;
-      }
-    }
-  }
-
-  nb-tab {
-    padding: 0;
-  }
-
-  .contact {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:first-child {
-      border-top: none;
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/contacts/contacts.component.ts

@@ -1,34 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { takeWhile } from 'rxjs/operators';
-import { forkJoin } from 'rxjs';
-
-import { Contacts, RecentUsers, UserData } from '../../../@core/data/users';
-
-@Component({
-  selector: 'ngx-contacts',
-  styleUrls: ['./contacts.component.scss'],
-  templateUrl: './contacts.component.html',
-})
-export class ContactsComponent implements OnDestroy {
-
-  private alive = true;
-
-  contacts: any[];
-  recent: any[];
-
-  constructor(private userService: UserData) {
-    forkJoin(
-      this.userService.getContacts(),
-      this.userService.getRecentUsers(),
-    )
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(([contacts, recent]: [Contacts[], RecentUsers[]]) => {
-        this.contacts = contacts;
-        this.recent = recent;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/dashboard.component.html

@@ -1,42 +0,0 @@
-<div class="row">
-  <div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
-    <ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
-      <i [ngClass]="statusCard.iconClass"></i>
-    </ngx-status-card>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
-    <ngx-temperature></ngx-temperature>
-  </div>
-
-  <div class="col-xxxl-9 col-xxl-8 col-lg-7 col-md-6">
-    <ngx-electricity></ngx-electricity>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-xxxl-9 col-xl-12">
-    <ngx-rooms></ngx-rooms>
-  </div>
-
-  <div class="col-xxxl-3 col-xxl-4 col-lg-7 col-md-6">
-    <ngx-contacts></ngx-contacts>
-  </div>
-
-  <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
-    <ngx-solar [chartValue]="solarValue"></ngx-solar>
-
-    <ngx-kitten></ngx-kitten>
-  </div>
-
-  <div class="col-xxxl-3 col-xxl-4 col-md-5">
-    <ngx-traffic></ngx-traffic>
-    <ngx-weather></ngx-weather>
-  </div>
-
-  <div class="col-xxxl-6 col-xxl-12 col-md-7">
-    <ngx-security-cameras></ngx-security-cameras>
-  </div>
-</div>

src/frontend/src/app/demo_pages/dashboard/dashboard.component.scss

@@ -1,16 +0,0 @@
-@import '../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  .solar-card nb-card-header {
-    border: none;
-    padding-bottom: 0;
-  }
-
-  @include media-breakpoint-down(sm) {
-    ngx-traffic {
-      display: none;
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/dashboard.component.ts

@@ -1,99 +0,0 @@
-import {Component, OnDestroy} from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators' ;
-import { SolarData } from '../../@core/data/solar';
-
-interface CardSettings {
-  title: string;
-  iconClass: string;
-  type: string;
-}
-
-@Component({
-  selector: 'ngx-dashboard',
-  styleUrls: ['./dashboard.component.scss'],
-  templateUrl: './dashboard.component.html',
-})
-export class DashboardComponent implements OnDestroy {
-
-  private alive = true;
-
-  solarValue: number;
-  lightCard: CardSettings = {
-    title: 'Light',
-    iconClass: 'nb-lightbulb',
-    type: 'primary',
-  };
-  rollerShadesCard: CardSettings = {
-    title: 'Roller Shades',
-    iconClass: 'nb-roller-shades',
-    type: 'success',
-  };
-  wirelessAudioCard: CardSettings = {
-    title: 'Wireless Audio',
-    iconClass: 'nb-audio',
-    type: 'info',
-  };
-  coffeeMakerCard: CardSettings = {
-    title: 'Coffee Maker',
-    iconClass: 'nb-coffee-maker',
-    type: 'warning',
-  };
-
-  statusCards: string;
-
-  commonStatusCardsSet: CardSettings[] = [
-    this.lightCard,
-    this.rollerShadesCard,
-    this.wirelessAudioCard,
-    this.coffeeMakerCard,
-  ];
-
-  statusCardsByThemes: {
-    default: CardSettings[];
-    cosmic: CardSettings[];
-    corporate: CardSettings[];
-    dark: CardSettings[];
-  } = {
-    default: this.commonStatusCardsSet,
-    cosmic: this.commonStatusCardsSet,
-    corporate: [
-      {
-        ...this.lightCard,
-        type: 'warning',
-      },
-      {
-        ...this.rollerShadesCard,
-        type: 'primary',
-      },
-      {
-        ...this.wirelessAudioCard,
-        type: 'danger',
-      },
-      {
-        ...this.coffeeMakerCard,
-        type: 'info',
-      },
-    ],
-    dark: this.commonStatusCardsSet,
-  };
-
-  constructor(private themeService: NbThemeService,
-              private solarService: SolarData) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.statusCards = this.statusCardsByThemes[theme.name];
-    });
-
-    this.solarService.getSolarData()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((data) => {
-        this.solarValue = data;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/dashboard.module.ts

@@ -1,69 +0,0 @@
-import { NgModule } from '@angular/core';
-import {
-  NbActionsModule,
-  NbButtonModule,
-  NbCardModule,
-  NbTabsetModule,
-  NbUserModule,
-  NbRadioModule,
-  NbSelectModule,
-  NbListModule,
-  NbIconModule,
-} from '@nebular/theme';
-import { NgxEchartsModule } from 'ngx-echarts';
-
-import { ThemeModule } from '../../@theme/theme.module';
-import { DashboardComponent } from './dashboard.component';
-import { StatusCardComponent } from './status-card/status-card.component';
-import { ContactsComponent } from './contacts/contacts.component';
-import { RoomsComponent } from './rooms/rooms.component';
-import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
-import { TemperatureComponent } from './temperature/temperature.component';
-import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
-import { KittenComponent } from './kitten/kitten.component';
-import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
-import { ElectricityComponent } from './electricity/electricity.component';
-import { ElectricityChartComponent } from './electricity/electricity-chart/electricity-chart.component';
-import { WeatherComponent } from './weather/weather.component';
-import { SolarComponent } from './solar/solar.component';
-import { PlayerComponent } from './rooms/player/player.component';
-import { TrafficComponent } from './traffic/traffic.component';
-import { TrafficChartComponent } from './traffic/traffic-chart.component';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-  imports: [
-    FormsModule,
-    ThemeModule,
-    NbCardModule,
-    NbUserModule,
-    NbButtonModule,
-    NbTabsetModule,
-    NbActionsModule,
-    NbRadioModule,
-    NbSelectModule,
-    NbListModule,
-    NbIconModule,
-    NbButtonModule,
-    NgxEchartsModule,
-  ],
-  declarations: [
-    DashboardComponent,
-    StatusCardComponent,
-    TemperatureDraggerComponent,
-    ContactsComponent,
-    RoomSelectorComponent,
-    TemperatureComponent,
-    RoomsComponent,
-    KittenComponent,
-    SecurityCamerasComponent,
-    ElectricityComponent,
-    ElectricityChartComponent,
-    WeatherComponent,
-    PlayerComponent,
-    SolarComponent,
-    TrafficComponent,
-    TrafficChartComponent,
-  ],
-})
-export class DashboardModule { }

src/frontend/src/app/demo_pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss

@@ -1,14 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-
-  display: block;
-  flex: 1;
-  position: relative;
-
-  .echart {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -1,197 +0,0 @@
-import { delay, takeWhile } from 'rxjs/operators';
-import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { LayoutService } from '../../../../@core/utils';
-import { ElectricityChart } from '../../../../@core/data/electricity';
-
-@Component({
-  selector: 'ngx-electricity-chart',
-  styleUrls: ['./electricity-chart.component.scss'],
-  template: `
-    <div echarts
-         [options]="option"
-         class="echart"
-         (chartInit)="onChartInit($event)">
-    </div>
-  `,
-})
-export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
-
-  private alive = true;
-
-  @Input() data: ElectricityChart[];
-
-  option: any;
-  echartsIntance: any;
-
-  constructor(private theme: NbThemeService,
-              private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
-      .pipe(
-        takeWhile(() => this.alive),
-      )
-      .subscribe(() => this.resizeChart());
-  }
-
-  ngAfterViewInit(): void {
-    this.theme.getJsTheme()
-      .pipe(
-        takeWhile(() => this.alive),
-        delay(1),
-      )
-      .subscribe(config => {
-        const eTheme: any = config.variables.electricity;
-
-        this.option = {
-          grid: {
-            left: 0,
-            top: 0,
-            right: 0,
-            bottom: 80,
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'line',
-              lineStyle: {
-                color: eTheme.tooltipLineColor,
-                width: eTheme.tooltipLineWidth,
-              },
-            },
-            textStyle: {
-              color: eTheme.tooltipTextColor,
-              fontSize: 20,
-              fontWeight: eTheme.tooltipFontWeight,
-            },
-            position: 'top',
-            backgroundColor: eTheme.tooltipBg,
-            borderColor: eTheme.tooltipBorderColor,
-            borderWidth: 1,
-            formatter: '{c0} kWh',
-            extraCssText: eTheme.tooltipExtraCss,
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            offset: 25,
-            data: this.data.map(i => i.label),
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              color: eTheme.xAxisTextColor,
-              fontSize: 18,
-            },
-            axisLine: {
-              lineStyle: {
-                color: eTheme.axisLineColor,
-                width: '2',
-              },
-            },
-          },
-          yAxis: {
-            boundaryGap: [0, '5%'],
-            axisLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: eTheme.yAxisSplitLine,
-                width: '1',
-              },
-            },
-          },
-          series: [
-            {
-              type: 'line',
-              smooth: true,
-              symbolSize: 20,
-              itemStyle: {
-                normal: {
-                  opacity: 0,
-                },
-                emphasis: {
-                  color: '#ffffff',
-                  borderColor: eTheme.itemBorderColor,
-                  borderWidth: 2,
-                  opacity: 1,
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: eTheme.lineWidth,
-                  type: eTheme.lineStyle,
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: eTheme.lineGradFrom,
-                  }, {
-                    offset: 1,
-                    color: eTheme.lineGradTo,
-                  }]),
-                  shadowColor: eTheme.lineShadow,
-                  shadowBlur: 6,
-                  shadowOffsetY: 12,
-                },
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: eTheme.areaGradFrom,
-                  }, {
-                    offset: 1,
-                    color: eTheme.areaGradTo,
-                  }]),
-                },
-              },
-              data: this.data.map(i => i.value),
-            },
-
-            {
-              type: 'line',
-              smooth: true,
-              symbol: 'none',
-              lineStyle: {
-                normal: {
-                  width: eTheme.lineWidth,
-                  type: eTheme.lineStyle,
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: eTheme.lineGradFrom,
-                  }, {
-                    offset: 1,
-                    color: eTheme.lineGradTo,
-                  }]),
-                  shadowColor: eTheme.shadowLineDarkBg,
-                  shadowBlur: 14,
-                  opacity: 1,
-                },
-              },
-              data: this.data.map(i => i.value),
-            },
-          ],
-        };
-    });
-  }
-
-  onChartInit(echarts) {
-    this.echartsIntance = echarts;
-  }
-
-  resizeChart() {
-    if (this.echartsIntance) {
-      this.echartsIntance.resize();
-    }
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/electricity/electricity.component.html

@@ -1,47 +0,0 @@
-<nb-card class="cards-container">
-  <nb-card size="large" class="table-card">
-    <nb-card-header>
-      Electricity Consumption
-    </nb-card-header>
-
-    <nb-tabset fullWidth>
-      <nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
-        <nb-list>
-          <nb-list-item *ngFor="let month of year.months">
-            <span class="month">{{ month.month }}</span>
-            <span>
-              <nb-icon
-                [class.down]="month.down"
-                [class.up]="!month.down"
-                [icon]="month.down ? 'arrow-down' : 'arrow-up'" pack="eva">
-              </nb-icon>
-              {{ month.delta }}
-            </span>
-            <span class="results">
-              {{ month.kWatts }} <span class="caption">kWh</span> / {{ month.cost }} <span class="caption">USD</span>
-            </span>
-          </nb-list-item>
-        </nb-list>
-      </nb-tab>
-    </nb-tabset>
-  </nb-card>
-
-  <nb-card size="large" class="chart-card">
-    <nb-card-header>
-      <span class="stats">
-        <span class="caption">Consumed</span>
-        <span>816 <span class="caption">kWh</span></span>
-      </span>
-      <span class="stats">
-        <span class="caption">Spent</span>
-        <span>291 <span class="caption">USD</span></span>
-      </span>
-
-      <nb-select [(selected)]="type" class="type-select">
-        <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
-      </nb-select>
-    </nb-card-header>
-
-    <ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
-  </nb-card>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/electricity/electricity.component.scss

@@ -1,90 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  .cards-container {
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-  }
-
-  .table-card,
-  .chart-card {
-    box-shadow: none;
-    margin-bottom: 0;
-    border-width: 0;
-  }
-
-  .table-card {
-    flex: 0 0 auto;
-  }
-
-  .chart-card {
-    flex: 1 0 auto;
-  }
-
-  .chart-card nb-card-header {
-    display: flex;
-    align-items: center;
-    padding-top: nb-theme(card-header-with-select-padding-top);
-    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
-
-    // prevents double border from chart yAxisSplitLine
-    margin-bottom: -1px;
-  }
-
-  .type-select {
-    margin-left: auto;
-  }
-
-  .stats {
-    margin-right: 1rem;
-
-    > .caption {
-      display: block;
-    }
-  }
-
-  nb-tabset {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  nb-tab {
-    padding: 0;
-  }
-
-  nb-list-item {
-    display: flex;
-    align-items: baseline;
-
-    &:first-child {
-      border-top: none;
-    }
-  }
-
-  .month {
-    width: 2rem;
-  }
-
-  nb-icon.down {
-    color: nb-theme(color-danger-default);
-  }
-
-  nb-icon.up {
-    color: nb-theme(color-success-default);
-  }
-
-  .results {
-    margin-left: auto;
-  }
-
-  @include media-breakpoint-down(xl) {
-    .table-card {
-      display: none;
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/electricity/electricity.component.ts

@@ -1,48 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-import { Electricity, ElectricityChart, ElectricityData } from '../../../@core/data/electricity';
-import { takeWhile } from 'rxjs/operators';
-import { forkJoin } from 'rxjs';
-
-@Component({
-  selector: 'ngx-electricity',
-  styleUrls: ['./electricity.component.scss'],
-  templateUrl: './electricity.component.html',
-})
-export class ElectricityComponent implements OnDestroy {
-
-  private alive = true;
-
-  listData: Electricity[];
-  chartData: ElectricityChart[];
-
-  type = 'week';
-  types = ['week', 'month', 'year'];
-
-  currentTheme: string;
-  themeSubscription: any;
-
-  constructor(private electricityService: ElectricityData,
-              private themeService: NbThemeService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        this.currentTheme = theme.name;
-    });
-
-    forkJoin(
-      this.electricityService.getListData(),
-      this.electricityService.getChartData(),
-    )
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(([listData, chartData]: [Electricity[], ElectricityChart[]] ) => {
-        this.listData = listData;
-        this.chartData = chartData;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/kitten/kitten.component.html

@@ -1,25 +0,0 @@
-<nb-card size="medium">
-  <div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div>
-
-  <div class="details">
-    <div class="h4">UI Kitten</div>
-    <div class="description">
-      UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
-    </div>
-  </div>
-
-  <nb-card-footer>
-    <a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
-      <nb-icon icon="globe" pack="eva"></nb-icon>
-    </a>
-    <a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">
-      <i class="link-icon ion-social-apple"></i>
-    </a>
-    <a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank">
-      <i class="link-icon ion-social-android"></i>
-    </a>
-    <a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
-      <nb-icon icon="github" pack="eva"></nb-icon>
-    </a>
-  </nb-card-footer>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/kitten/kitten.component.scss

@@ -1,39 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-
-  .picture {
-    background-position: center;
-    background-size: cover;
-    position: relative;
-    border-top-left-radius: nb-theme(card-border-radius);
-    border-top-right-radius: nb-theme(card-border-radius);
-    flex: 1;
-  }
-
-  .details {
-    padding: nb-theme(card-padding);
-  }
-
-  .description {
-    text-align: justify;
-  }
-
-  nb-card-footer {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-  }
-
-  .link-icon {
-    font-size: 1.75rem;
-  }
-
-  nb-icon {
-    font-size: 1.55rem;
-
-    ::ng-deep svg {
-      vertical-align: top;
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/kitten/kitten.component.ts

@@ -1,23 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'ngx-kitten',
-  styleUrls: ['./kitten.component.scss'],
-  templateUrl: './kitten.component.html',
-})
-export class KittenComponent implements OnDestroy {
-
-  currentTheme: string;
-  themeSubscription: any;
-
-  constructor(private themeService: NbThemeService) {
-    this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
-      this.currentTheme = theme.name;
-    });
-  }
-
-  ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/dashboard/rooms/player/player.component.html

@@ -1,59 +0,0 @@
-<nb-card>
-  <nb-card-header class="header">My Playlist</nb-card-header>
-
-  <nb-card-body class="body">
-    <div class="track-info">
-      <div class="cover" style.background-image="url('{{track.cover}}')"></div>
-      <div class="details">
-        <h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
-        <span>{{ track.artist }}</span>
-      </div>
-    </div>
-
-    <div class="progress-wrap">
-      <input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
-             (input)="setProgress(duration.value)" #duration>
-      <div class="progress-foreground" [style.width.%]="getProgress()"></div>
-    </div>
-
-    <div class="timing">
-      <small class="current">{{ player.currentTime | timing }}</small>
-      <small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
-    </div>
-
-    <div class="controls">
-      <button class="control-button" nbButton ghost size="tiny" (click)="toggleShuffle()" [class.on]="shuffle">
-        <nb-icon icon="shuffle-2-outline" pack="eva"></nb-icon>
-      </button>
-      <button class="control-button" nbButton ghost size="medium" (click)="prev()">
-        <nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
-      </button>
-      <button class="control-button play-button" nbButton ghost size="medium" (click)="playPause()">
-        <nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva">
-        </nb-icon>
-      </button>
-      <button class="control-button skip-forward-button" nbButton ghost size="medium" (click)="next()">
-        <nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon>
-      </button>
-      <button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop">
-        <nb-icon icon="repeat-outline" pack="eva"></nb-icon>
-      </button>
-    </div>
-  </nb-card-body>
-
-  <nb-card-footer class="footer">
-    <div class="volume">
-      <button nbButton ghost size="small" (click)="setVolume(0)">
-        <nb-icon class="volume-icon" icon="volume-down-outline" pack="eva"></nb-icon>
-      </button>
-      <div class="progress-wrap">
-        <input type="range" class="progress" [value]="getVolume()" max="100"
-               (input)="setVolume(volume.value)" #volume>
-        <div class="progress-foreground" [style.width.%]="getVolume()"></div>
-      </div>
-      <button nbButton ghost size="small" (click)="setVolume(100)">
-        <nb-icon class="volume-icon" icon="volume-up-outline" pack="eva"></nb-icon>
-      </button>
-    </div>
-  </nb-card-footer>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/rooms/player/player.component.scss

@@ -1,283 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  height: 100%;
-
-  nb-card {
-    box-shadow: none;
-    border-width: 0;
-    margin: 0;
-    height: 100%;
-  }
-
-  .body {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-  }
-
-  .track-info {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    flex: 1;
-    padding: nb-theme(card-padding);
-  }
-
-  .cover {
-    border-radius: nb-theme(card-border-radius);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 10rem;
-    height: 10rem;
-  }
-
-  .details {
-    text-align: center;
-    padding-top: 1.5rem;
-
-    span {
-      color: nb-theme(text-hint-color);
-    }
-  }
-
-  .progress-wrap {
-    position: relative;
-    height: 1rem;
-  }
-
-  .progress-foreground {
-    background-color: nb-theme(color-primary-default);
-    height: 2px;
-    position: absolute;
-    left: 0;
-    margin-top: calc(0.75rem - 1px);
-    width: 100px;
-  }
-
-  .progress {
-    appearance: none;
-    width: 100%;
-    background: transparent;
-    height: 1.5rem;
-    outline: none;
-    position: absolute;
-
-    @include install-thumb() {
-      width: 1rem;
-      height: 1rem;
-      border-radius: 50%;
-      background: nb-theme(color-primary-default);
-      cursor: pointer;
-      margin-top: calc(-0.5rem + 1px);
-      border: none;
-    }
-
-    @include install-track() {
-      width: 100%;
-      height: 2px;
-      cursor: pointer;
-      background: nb-theme(border-basic-color-3);
-    }
-  }
-
-  .timing {
-    padding-top: 0.5rem;
-    margin: 0 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    color: nb-theme(text-hint-color);
-
-    .current {
-      @include nb-ltr(order, 0);
-      @include nb-rtl(order, 1);
-    }
-    .remaining {
-      @include nb-ltr(order, 1);
-      @include nb-rtl(order, 0);
-    }
-  }
-
-  .controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    @include nb-rtl(flex-direction, row-reverse);
-    padding: 1rem;
-    max-width: 400px;
-    width: 100%;
-    margin: 0 auto;
-  }
-
-  .control-button {
-    color: nb-theme(text-hint-color);
-
-    &.on {
-      color: nb-theme(color-primary-default);
-    }
-
-    nb-icon {
-      font-size: 1.5em;
-    }
-  }
-
-  .volume {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 auto;
-    position: relative;
-    max-width: 400px;
-
-    .progress-wrap {
-      height: 2.25rem;
-      margin: 0;
-      width: 80%;
-
-      .progress-foreground {
-        left: auto;
-        margin-top: calc(1rem + 1px);
-        z-index: 0;
-        max-width: 99.5%;
-      }
-
-      .progress {
-        height: 2.25rem;
-        overflow: visible;
-
-        @include install-thumb() {
-          width: 1.5rem;
-          height: 1.5rem;
-          background-color: nb-theme(background-basic-color-1);
-          box-shadow: 0 0.125rem 0.5rem 0 nb-theme(border-basic-color-3);
-          border: 1px solid nb-theme(border-basic-color-3);
-          margin-top: -0.75rem;
-          position: relative;
-          z-index: 10;
-        }
-      }
-    }
-  }
-
-  .volume-icon {
-    font-size: 1em;
-    color: nb-theme(text-hint-color);
-  }
-
-  &.collapsed {
-    $player-height: 4.5rem;
-
-    border: none;
-    height: $player-height;
-
-    .header {
-      display: none;
-    }
-
-    .body {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0;
-      overflow: visible;
-    }
-
-    .footer {
-      display: none;
-    }
-
-    .track-info {
-      height: $player-height;
-      flex-direction: row;
-      padding: 0;
-      flex: none;
-
-      .cover {
-        height: $player-height;
-        width: $player-height;
-        flex: none;
-      }
-
-      .details {
-        margin-left: 0.875rem;
-        text-align: left;
-        padding: 0;
-
-        h4 {
-          margin-bottom: 0.125rem;
-        }
-      }
-    }
-
-    .progress-wrap {
-      width: calc(100% - 6rem);
-      align-self: flex-start;
-      position: absolute;
-      left: 0;
-      margin-top: calc(-0.75rem + 1px);
-      margin-left: calc(#{$player-height} + 0.75rem);
-    }
-
-    .timing {
-      display: none;
-    }
-
-    .controls {
-      padding: 0 1rem 0 0;
-      max-width: inherit;
-      width: inherit;
-      margin: 0;
-
-      button {
-        display: none;
-      }
-      .play-button,
-      .skip-forward-button {
-        display: block;
-        font-size: 1.3rem;
-      }
-
-      @include media-breakpoint-down(is) {
-        .play-button,
-        .skip-forward-button {
-          padding: 0.5rem;
-        }
-      }
-
-      @include media-breakpoint-down(xs) {
-        .skip-forward-button {
-          display: none;
-        }
-      }
-    }
-
-    .volume {
-      display: none;
-    }
-
-    .track-info .details {
-      @include media-breakpoint-down(is) {
-        span {
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-between(lg, lg) {
-    .controls {
-      padding: 0.5rem;
-    }
-
-    .control-button.size-medium {
-      padding: nb-theme(button-ghost-small-padding);
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/rooms/player/player.component.ts

@@ -1,100 +0,0 @@
-import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
-import { PlayerService, Track } from '../../../../@core/utils/player.service';
-
-@Component({
-  selector: 'ngx-player',
-  styleUrls: ['./player.component.scss'],
-  templateUrl: './player.component.html',
-})
-export class PlayerComponent implements OnDestroy {
-  @Input()
-  @HostBinding('class.collapsed')
-  collapsed: boolean;
-
-  track: Track;
-  player: HTMLAudioElement;
-  shuffle: boolean;
-
-  constructor(private playerService: PlayerService) {
-    this.track = this.playerService.random();
-    this.createPlayer();
-  }
-
-  ngOnDestroy() {
-    this.player.pause();
-    this.player.src = '';
-    this.player.load();
-  }
-
-  prev() {
-    if (!this.player.loop) {
-      if (this.shuffle) {
-        this.track = this.playerService.random();
-      } else {
-        this.track = this.playerService.prev();
-      }
-    }
-
-    this.reload();
-  }
-
-  next() {
-    if (!this.player.loop) {
-      if (this.shuffle) {
-        this.track = this.playerService.random();
-      } else {
-        this.track = this.playerService.next();
-      }
-    }
-
-    this.reload();
-  }
-
-  playPause() {
-    if (this.player.paused) {
-      this.player.play();
-    } else {
-      this.player.pause();
-    }
-  }
-
-  toggleShuffle() {
-    this.shuffle = !this.shuffle;
-  }
-
-  toggleLoop() {
-    this.player.loop = !this.player.loop;
-  }
-
-  setVolume(volume: number) {
-    this.player.volume = volume / 100;
-  }
-
-  getVolume(): number {
-    return this.player.volume * 100;
-  }
-
-  setProgress(duration: number) {
-    this.player.currentTime = this.player.duration * duration / 100;
-  }
-
-  getProgress(): number {
-    return this.player.currentTime / this.player.duration * 100 || 0;
-  }
-
-  private createPlayer() {
-    this.player = new Audio();
-    this.player.onended = () => this.next();
-    this.setTrack();
-  }
-
-  private reload() {
-    this.setTrack();
-    this.player.play();
-  }
-
-  private setTrack() {
-    this.player.src = this.track.url;
-    this.player.load();
-  }
-}

src/frontend/src/app/demo_pages/dashboard/rooms/room-selector/room-selector.component.html

@@ -1,90 +0,0 @@
-<nb-card>
-  <nb-card-header>Room Management</nb-card-header>
-  <div class="room-selector">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-         [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
-      <defs>
-
-        <filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
-          <feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
-        </filter>
-
-        <pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
-                 patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
-          <line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
-          <line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
-          <line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
-          <line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
-          <line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
-          <line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
-          <line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
-          <line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
-          <line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
-          <line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
-          <line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
-          <line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
-          <line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
-          <line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
-          <line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
-          <line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
-          <line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
-          <line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
-          <line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
-          <line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
-          <line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
-          <line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
-          <line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
-          <line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
-          <line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
-          <line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
-          <line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
-          <line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
-          <line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
-          <line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
-          <line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
-          <line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
-          <line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
-          <line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
-          <line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
-          <line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
-          <line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
-          <line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
-          <line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
-          <line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
-          <line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
-          <line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
-          <line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
-          <line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
-          <line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
-          <line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
-          <line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
-          <line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
-          <line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
-          <line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
-          <line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
-          <line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
-          <line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
-          <line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
-        </pattern>
-      </defs>
-
-      <g>
-        <path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
-      </g>
-
-      <g>
-        <path class="stroked-element"
-              [attr.fill]="getUrlPath('#New_Pattern_Swatch_1')"
-              [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
-      </g>
-
-      <g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
-        <path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
-        <path class="room-border" [attr.d]="room.border.d" />
-        <path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
-        <text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
-              [attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
-      </g>
-    </svg>
-  </div>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/rooms/room-selector/room-selector.component.scss

@@ -1,76 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-
-  nb-card {
-    background-color: transparent;
-    border-width: 0;
-    box-shadow: none;
-    margin: 0;
-  }
-
-  nb-card-header {
-    border-color: transparent;
-  }
-
-  svg {
-    width: 100%;
-  }
-
-  .stroke-pattern {
-    fill: none;
-    stroke: #bdc4cd;
-    stroke-miterlimit: 10;
-    opacity: 0.1;
-    stroke-width: 1px;
-  }
-
-  .stroked-element {
-    stroke-width: 4px;
-    stroke: #bdc4cd;
-    stroke-miterlimit: 10;
-  }
-
-  .room-border {
-    stroke-width: 4px;
-    stroke: #bdc4cd;
-    stroke-miterlimit: 10;
-    fill: none;
-  }
-
-  .room-bg {
-    fill: nb-theme(card-background-color);
-    stroke: transparent;
-    cursor: pointer;
-    stroke-width: 4px;
-  }
-
-  .room-bg-border-grad {
-    fill: none;
-    stroke: none;
-    stroke-width: 4px;
-  }
-
-  .room-text {
-    cursor: pointer;
-    user-select: none;
-    pointer-events: none;
-    fill: nb-theme(text-hint-color);
-  }
-
-  .selected-room {
-    z-index: 40;
-
-    .room-text {
-      fill: nb-theme(text-basic-color);
-    }
-    .room-border {
-      stroke: nb-theme(color-primary-default);
-    }
-  }
-
-  .header {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/rooms/room-selector/room-selector.component.ts

@@ -1,122 +0,0 @@
-import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core';
-import { Location, LocationStrategy } from '@angular/common';
-import { NbThemeService } from '@nebular/theme';
-import { map, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-
-@Component({
-  selector: 'ngx-room-selector',
-  templateUrl: './room-selector.component.html',
-  styleUrls: ['./room-selector.component.scss'],
-})
-export class RoomSelectorComponent implements OnInit, OnDestroy {
-
-  private destroy$ = new Subject<void>();
-  private hideGrid: boolean;
-
-  @Output() select: EventEmitter<number> = new EventEmitter();
-
-  selectedRoom = null;
-  sortedRooms = [];
-  viewBox = '-20 -20 618.88 407.99';
-  isIE = !!(navigator.userAgent.match(/Trident/)
-            || navigator.userAgent.match(/MSIE/)
-            || navigator.userAgent.match(/Edge/));
-  isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') >= 0;
-  roomSvg = {
-    borders: [{
-      d: 'M186.21,130.05H216.37V160H186.21Z',
-    }],
-    stokedAreas: [
-      { d: 'M562.71,225V354h-290V319H418.37a6.09,6.09,0,0,0,6.09-6.09V225Z' },
-      { d: 'M8.09,130V347.91A6.09,6.09,0,0,0,14.18,354h54V130Z' },
-      { d: 'M216.37,49.82H358.8V92.5H216.37Z' },
-    ],
-    rooms: [
-      {
-        id: '0',
-        name: { text: 'Kitchen', x: 142, y: 240.8 },
-        area: { d: 'M68.18,130V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V160H186.21V130Z' },
-        border: { d: 'M96,130H68.18V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V225 M152.71,' +
-          '130H186.21V160H218.5' },
-      },
-      {
-        id: '1',
-        name: { text: 'Bedroom', x: 109, y: 66 },
-        area: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09,' +
-          '6.09,0,0,0,8.09,130H96Z' },
-        border: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09' +
-          ',6.09,0,0,0,8.09,130H96' },
-      },
-      {
-        id: '2',
-        name: { text: 'Living Room', x: 468, y: 134 },
-        area: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' +
-          ',6.09,0,0,1-6.09,6.09h-212Z' },
-        border: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' +
-          ',6.09,0,0,1-6.09,6.09h-212' },
-      },
-      {
-        id: '3',
-        name: { text: 'Hallway', x: 320, y: 273 },
-        area: { d: 'M216.37,354V92.5H358.8V225H424.39V319H272.71V354Z' },
-        border: { d: 'M216.37,225V356 M216.21,162V92.5H358.8V160 M358.8,225H424.39V312.91a6.09,' +
-          '6.09,0,0,1,-6.09,6.09H272.71V356' },
-      },
-    ],
-  };
-
-  @HostBinding('style.background')
-  get background(): 'none' | null {
-    return this.hideGrid ? 'none' : null;
-  }
-
-  constructor(
-    private location: Location,
-    private locationStrategy: LocationStrategy,
-    private themeService: NbThemeService,
-  ) {
-    this.selectRoom('2');
-  }
-
-  ngOnInit() {
-    this.hideGrid = this.themeService.currentTheme === 'corporate';
-
-    this.themeService.onThemeChange()
-      .pipe(
-        map(({ name }) => name === 'corporate'),
-        takeUntil(this.destroy$),
-      )
-      .subscribe((hideGrid: boolean) => this.hideGrid = hideGrid);
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  private sortRooms() {
-    this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
-      if (a.id === this.selectedRoom) {
-        return 1;
-      }
-      if (b.id === this.selectedRoom) {
-        return -1;
-      }
-      return 0;
-    });
-  }
-
-  selectRoom(roomNumber) {
-    this.select.emit(roomNumber);
-    this.selectedRoom = roomNumber;
-    this.sortRooms();
-  }
-
-  getUrlPath(id: string) {
-    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
-    const path = this.location.path().replace(/\/$/, '');
-
-    return `url(${baseHref}${path}${id})`;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/rooms/rooms.component.scss

@@ -1,67 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  ngx-room-selector {
-    width: 70%;
-    border-right: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
-    background: url('../../../../assets/images/square_pattern.svg') repeat;
-    background-size: 75px;
-
-    &.dark-background {
-      background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
-    }
-  }
-
-  ngx-player {
-    width: 30%;
-  }
-
-  nb-card {
-    display: flex;
-    flex-direction: row;
-  }
-
-  ngx-room-selector {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    ::ng-deep .room-selector {
-      display: flex;
-      align-items: center;
-      justify-items: center;
-      flex: 1;
-      margin: 0 auto;
-      width: 90%;
-      max-width: 650px;
-      padding-bottom: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-    &.expanded ngx-room-selector {
-      display: none;
-    }
-
-    ngx-room-selector, ngx-player {
-      width: 100%;
-      border: none;
-    }
-
-    nb-card {
-      flex-direction: column;
-      justify-content: space-between;
-
-      .collapse {
-        display: inline-block;
-        position: absolute;
-        top: 0.7rem;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 2rem;
-      }
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/rooms/rooms.component.ts

@@ -1,77 +0,0 @@
-import { Component, HostBinding, OnDestroy } from '@angular/core';
-import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
-import { map } from 'rxjs/operators';
-
-@Component({
-  selector: 'ngx-rooms',
-  styleUrls: ['./rooms.component.scss'],
-  template: `
-    <nb-card [size]="breakpoint.width >= breakpoints.sm ? 'giant' : ''">
-      <nb-icon icon="arrow-ios-downward" pack="eva"
-               (click)="collapse()"
-               class="collapse"
-               [hidden]="isCollapsed()">
-      </nb-icon>
-      <ngx-room-selector [class.dark-background]="isDarkTheme" (select)="select($event)"></ngx-room-selector>
-      <ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
-    </nb-card>
-  `,
-})
-export class RoomsComponent implements OnDestroy {
-
-  @HostBinding('class.expanded')
-  private expanded: boolean;
-  private selected: number;
-
-  isDarkTheme: boolean;
-
-  breakpoint: NbMediaBreakpoint;
-  breakpoints: any;
-  themeSubscription: any;
-  themeChangeSubscription: any;
-
-  constructor(private themeService: NbThemeService,
-              private breakpointService: NbMediaBreakpointsService) {
-
-    this.breakpoints = this.breakpointService.getBreakpointsMap();
-    this.themeSubscription = this.themeService.onMediaQueryChange()
-      .subscribe(([, newValue]) => {
-        this.breakpoint = newValue;
-      });
-
-    this.themeChangeSubscription = this.themeService.onThemeChange()
-      .pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
-      .subscribe((isDark: boolean) => this.isDarkTheme = isDark);
-  }
-
-  select(roomNumber) {
-    if (this.isSelected(roomNumber)) {
-      this.expand();
-    } else {
-      this.collapse();
-    }
-
-    this.selected = roomNumber;
-  }
-
-  expand() {
-    this.expanded = true;
-  }
-
-  collapse() {
-    this.expanded = false;
-  }
-
-  isCollapsed() {
-    return !this.expanded;
-  }
-
-  private isSelected(roomNumber): boolean {
-    return this.selected === roomNumber;
-  }
-
-  ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
-    this.themeChangeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/dashboard/security-cameras/security-cameras.component.html

@@ -1,61 +0,0 @@
-<nb-card size="giant">
-
-  <nb-card-header>
-    Security Cameras
-
-    <button class="single-view-button"
-            nbButton
-            size="small"
-            [appearance]="isSingleView ? 'filled' : 'outline'"
-            (click)="isSingleView = true">
-      <i class="nb-square"></i>
-    </button>
-    <button class="grid-view-button"
-            nbButton
-            size="small"
-            [appearance]="isSingleView ? 'outline' : 'filled'"
-            (click)="isSingleView = false">
-      <nb-icon icon="grid" pack="eva"></nb-icon>
-    </button>
-  </nb-card-header>
-
-  <div class="grid-container">
-
-    <div class="single-view" *ngIf="isSingleView">
-      <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
-        <span class="camera-name">{{ selectedCamera.title }}</span>
-      </div>
-    </div>
-
-    <div class="grid-view" *ngIf="!isSingleView">
-      <div class="camera"
-           *ngFor="let camera of cameras"
-           [style.background-image]="'url(' + camera.source + ')'"
-           (click)="selectCamera(camera)">
-        <span class="camera-name">{{ camera.title }}</span>
-      </div>
-    </div>
-
-  </div>
-
-  <nb-card-footer>
-    <nb-actions [size]="actionSize" fullWidth>
-      <nb-action>
-        <nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
-        Pause
-      </nb-action>
-      <nb-action>
-        <nb-icon icon="list-outline" pack="eva"></nb-icon>
-        Logs
-      </nb-action>
-      <nb-action>
-        <nb-icon icon="search-outline" pack="eva"></nb-icon>
-        Search
-      </nb-action>
-      <nb-action>
-        <nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
-        Setup
-      </nb-action>
-    </nb-actions>
-  </nb-card-footer>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/security-cameras/security-cameras.component.scss

@@ -1,114 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
-  .single-view-button {
-    .nb-square {
-      font-size: 1.25rem;
-    }
-
-    @include nb-ltr {
-      margin-left: auto;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    @include nb-rtl {
-      margin-right: auto;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  .grid-view-button {
-    ::ng-deep svg {
-      vertical-align: top;
-    }
-
-    @include nb-ltr {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    @include nb-rtl {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .grid-container {
-    height: 100%;
-    display: flex;
-  }
-
-  .single-view,
-  .grid-view {
-    flex: 1 0 100%;
-  }
-
-  .grid-view {
-    display: flex;
-    flex-wrap: wrap;
-
-    .camera {
-      flex: 1 0 50%;
-    }
-  }
-
-  .single-view .camera {
-    width: 100%;
-    height: 100%;
-  }
-
-  .camera {
-    background-position: center;
-    background-size: cover;
-    position: relative;
-
-    &::before {
-      background-color: rgba(255, 255, 255, 0.1);
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      opacity: 1;
-    }
-
-    &:hover::before {
-      opacity: 0;
-    }
-  }
-
-  .camera-name {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    color: white;
-    background: nb-theme(overlay-backdrop-background-color);
-    padding: 0.5rem 1rem;
-  }
-
-  nb-action {
-    nb-icon {
-      @include nb-ltr(margin-right, 0.5rem);
-      @include nb-rtl(margin-left, 0.5rem);
-    }
-
-    ::ng-deep svg {
-      vertical-align: top;
-    }
-  }
-
-  @include media-breakpoint-down(xl) {
-    nb-action {
-      padding: 0;
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/security-cameras/security-cameras.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { map, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-import { NbComponentSize, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
-
-import { Camera, SecurityCamerasData } from '../../../@core/data/security-cameras';
-
-@Component({
-  selector: 'ngx-security-cameras',
-  styleUrls: ['./security-cameras.component.scss'],
-  templateUrl: './security-cameras.component.html',
-})
-export class SecurityCamerasComponent implements OnInit, OnDestroy {
-
-  private destroy$ = new Subject<void>();
-
-  cameras: Camera[];
-  selectedCamera: Camera;
-  isSingleView = false;
-  actionSize: NbComponentSize = 'medium';
-
-  constructor(
-    private themeService: NbThemeService,
-    private breakpointService: NbMediaBreakpointsService,
-    private securityCamerasService: SecurityCamerasData,
-  ) {}
-
-  ngOnInit() {
-    this.securityCamerasService.getCamerasData()
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((cameras: Camera[]) => {
-        this.cameras = cameras;
-        this.selectedCamera = this.cameras[0];
-      });
-
-    const breakpoints = this.breakpointService.getBreakpointsMap();
-    this.themeService.onMediaQueryChange()
-      .pipe(map(([, breakpoint]) => breakpoint.width))
-      .subscribe((width: number) => {
-        this.actionSize = width > breakpoints.md ? 'medium' : 'small';
-      });
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  selectCamera(camera: any) {
-    this.selectedCamera = camera;
-    this.isSingleView = true;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/solar/solar.component.scss

@@ -1,30 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    overflow: hidden;
-  }
-
-  .echart {
-    position: absolute;
-    left: 1em;
-    height: calc(100% - 2 * 1rem);
-    width: 40%;
-  }
-
-  .info {
-    margin-left: 45%;
-    padding-top: 1rem;
-  }
-
-  .value {
-    margin: 0;
-  }
-
-  .details {
-    color: nb-theme(text-hint-color);
-  }
-}

src/frontend/src/app/demo_pages/dashboard/solar/solar.component.ts

@@ -1,186 +0,0 @@
-import { delay } from 'rxjs/operators';
-import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-
-declare const echarts: any;
-
-@Component({
-  selector: 'ngx-solar',
-  styleUrls: ['./solar.component.scss'],
-  template: `
-    <nb-card size="tiny" class="solar-card">
-      <nb-card-header>Solar Energy Consumption</nb-card-header>
-      <nb-card-body>
-        <div echarts [options]="option" class="echart">
-        </div>
-        <div class="info">
-          <div class="h4 value">6.421 kWh</div>
-          <div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
-        </div>
-      </nb-card-body>
-    </nb-card>
-  `,
-})
-export class SolarComponent implements AfterViewInit, OnDestroy {
-
-  private value = 0;
-
-  @Input('chartValue')
-  set chartValue(value: number) {
-    this.value = value;
-
-    if (this.option.series) {
-      this.option.series[0].data[0].value = value;
-      this.option.series[0].data[1].value = 100 - value;
-      this.option.series[1].data[0].value = value;
-    }
-  }
-
-  option: any = {};
-  themeSubscription: any;
-
-  constructor(private theme: NbThemeService) {
-  }
-
-  ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
-
-      const solarTheme: any = config.variables.solar;
-
-      this.option = Object.assign({}, {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
-        },
-        series: [
-          {
-            name: ' ',
-            clockWise: true,
-            hoverAnimation: false,
-            type: 'pie',
-            center: ['45%', '50%'],
-            radius: solarTheme.radius,
-            data: [
-              {
-                value: this.value,
-                name: ' ',
-                label: {
-                  normal: {
-                    position: 'center',
-                    formatter: '{d}%',
-                    textStyle: {
-                      fontSize: '22',
-                      fontFamily: config.variables.fontSecondary,
-                      fontWeight: '600',
-                      color: config.variables.fgHeading,
-                    },
-                  },
-                },
-                tooltip: {
-                  show: false,
-                },
-                itemStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: solarTheme.gradientLeft,
-                      },
-                      {
-                        offset: 1,
-                        color: solarTheme.gradientRight,
-                      },
-                    ]),
-                    shadowColor: solarTheme.shadowColor,
-                    shadowBlur: 0,
-                    shadowOffsetX: 0,
-                    shadowOffsetY: 3,
-                  },
-                },
-                hoverAnimation: false,
-              },
-              {
-                value: 100 - this.value,
-                name: ' ',
-                tooltip: {
-                  show: false,
-                },
-                label: {
-                  normal: {
-                    position: 'inner',
-                  },
-                },
-                itemStyle: {
-                  normal: {
-                    color: solarTheme.secondSeriesFill,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: ' ',
-            clockWise: true,
-            hoverAnimation: false,
-            type: 'pie',
-            center: ['45%', '50%'],
-            radius: solarTheme.radius,
-            data: [
-              {
-                value: this.value,
-                name: ' ',
-                label: {
-                  normal: {
-                    position: 'inner',
-                    show: false,
-                  },
-                },
-                tooltip: {
-                  show: false,
-                },
-                itemStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: solarTheme.gradientLeft,
-                      },
-                      {
-                        offset: 1,
-                        color: solarTheme.gradientRight,
-                      },
-                    ]),
-                    shadowColor: solarTheme.shadowColor,
-                    shadowBlur: 7,
-                  },
-                },
-                hoverAnimation: false,
-              },
-              {
-                value: 28,
-                name: ' ',
-                tooltip: {
-                  show: false,
-                },
-                label: {
-                  normal: {
-                    position: 'inner',
-                  },
-                },
-                itemStyle: {
-                  normal: {
-                    color: 'none',
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      });
-    });
-  }
-
-  ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
-  }
-}

src/frontend/src/app/demo_pages/dashboard/status-card/status-card.component.scss

@@ -1,79 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  nb-card {
-    flex-direction: row;
-    align-items: center;
-    height: 6rem;
-    overflow: visible;
-
-    .icon-container {
-      height: 100%;
-      padding: 0.625rem;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 5.75rem;
-      height: 4.75rem;
-      font-size: 3.75rem;
-      border-radius: nb-theme(card-border-radius);
-      transition: width 0.4s ease;
-      transform: translate3d(0, 0, 0);
-      -webkit-transform-style: preserve-3d;
-      -webkit-backface-visibility: hidden;
-      color: nb-theme(text-control-color);
-
-      @each $status in nb-get-statuses() {
-        &.status-#{$status} {
-          $left-color: nb-theme(button-hero-#{$status}-left-background-color);
-          $right-color: nb-theme(button-hero-#{$status}-right-background-color);
-          background-image: linear-gradient(to right, $left-color, $right-color);
-
-          &:hover {
-            $left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
-            $right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
-            background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
-          }
-        }
-      }
-    }
-
-    &.off {
-      color: nb-theme(text-hint-color);
-
-      .status,
-      .title,
-      .icon {
-        color: nb-theme(text-hint-color);
-      }
-
-      @each $status in nb-get-statuses() {
-        .icon.status-#{$status} {
-          box-shadow: none;
-          background-image: linear-gradient(to right, transparent, transparent);
-        }
-      }
-    }
-
-    .details {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      height: 100%;
-      @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
-      @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
-      border-left: 1px solid transparent;
-    }
-
-    .title {
-      margin: 0;
-    }
-
-    .status {
-      text-transform: uppercase;
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/status-card/status-card.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ngx-status-card',
-  styleUrls: ['./status-card.component.scss'],
-  template: `
-    <nb-card (click)="on = !on" [ngClass]="{'off': !on}">
-      <div class="icon-container">
-        <div class="icon status-{{ type }}">
-          <ng-content></ng-content>
-        </div>
-      </div>
-
-      <div class="details">
-        <div class="title h5">{{ title }}</div>
-        <div class="status paragraph-2">{{ on ? 'ON' : 'OFF' }}</div>
-      </div>
-    </nb-card>
-  `,
-})
-export class StatusCardComponent {
-
-  @Input() title: string;
-  @Input() type: string;
-  @Input() on = true;
-}

src/frontend/src/app/demo_pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html

@@ -1,47 +0,0 @@
-<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACJJREFUaN7twTEBAAAAwiD7pzbFPmAAAAAAAAAAAAAAAGQOLbQAAU3zwM4AAAAASUVORK5CYII=">
-
-<div class="svg-container">
-  <svg #svgRoot xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
-       [attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
-    <defs>
-
-      <filter [attr.id]="'blurFilter' + svgControlId" x="0" y="0" width="100%" height="100%">
-        <feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
-        <feComponentTransfer>
-          <feFuncA type="discrete" tableValues="1 1"/>
-        </feComponentTransfer>
-      </filter>
-
-      <clipPath [attr.id]="'sliderClip' + svgControlId">
-        <path [attr.d]="styles.clipPathStr" stroke="black"></path>
-      </clipPath>
-
-    </defs>
-    <g [attr.transform]="styles.arcTranslateStr">
-
-      <g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
-        <g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
-          <path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
-        </g>
-        <!-- ngFor is a quirk fix for webkit rendering issues -->
-        <path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color" *ngFor="let number of [0,1,2,3,4,5]"></path>
-      </g>
-
-      <circle [attr.cx]="styles.thumbPosition.x"
-              [attr.cy]="styles.thumbPosition.y"
-              [attr.r]="pinRadius"
-              [attr.stroke-width]="thumbBorder / scaleFactor"
-              [attr.fill]="off ? 'none' : thumbBg"
-              [attr.stroke]="off ? 'none' : thumbBorderColor">
-      </circle>
-    </g>
-  </svg>
-</div>
-
-<div class="temperature-bg">
-  <ng-content></ng-content>
-</div>
-
-<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
-  <nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
-</button>

src/frontend/src/app/demo_pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss

@@ -1,63 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  position: relative;
-
-  img {
-    width: 100%;
-    height: auto;
-    visibility: hidden;
-  }
-
-  .svg-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-  }
-
-  .temperature-bg {
-    position: absolute;
-    width: 88%;
-    height: 88%;
-    top: 13%;
-    left: 6%;
-    border-radius: 50%;
-    z-index: 1;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
-  }
-
-  .power-bg {
-    position: absolute;
-    width: 5.25rem;
-    height: 5.25rem;
-    background-color: nb-theme(card-background-color);
-    border-radius: 50%;
-    bottom: 2%;
-    left: 50%;
-    transform: translate(-50%, 50%);
-    z-index: 2;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
-
-    &.on {
-      color: nb-theme(text-hint-color);
-    }
-  }
-
-  .power-icon {
-    font-size: 3rem;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts

@@ -1,380 +0,0 @@
-import {
-  Component,
-  HostListener,
-  ViewChild,
-  ElementRef,
-  Input,
-  Output,
-  EventEmitter,
-  AfterViewInit,
-  OnChanges,
-} from '@angular/core';
-import { Location, LocationStrategy } from '@angular/common';
-
-let uniqueId = 0;
-const VIEW_BOX_SIZE = 300;
-
-@Component({
-  selector: 'ngx-temperature-dragger',
-  templateUrl: './temperature-dragger.component.html',
-  styleUrls: ['./temperature-dragger.component.scss'],
-})
-export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
-
-  @ViewChild('svgRoot', { static: true }) svgRoot: ElementRef;
-
-  @Input() fillColors: string|string[];
-  @Input() disableArcColor;
-  @Input() bottomAngle = 90;
-  @Input() arcThickness = 18; // CSS pixels
-  @Input() thumbRadius = 16; // CSS pixels
-  @Input() thumbBorder = 3;
-  @Input() thumbBg;
-  @Input() thumbBorderColor;
-  @Input() maxLeap = 0.4;
-
-  value = 50;
-  @Output() valueChange = new EventEmitter<Number>();
-  @Input('value') set setValue(value) {
-    this.value = value;
-  }
-
-  @Input() min = 0; // min output value
-  @Input() max = 100; // max output value
-  @Input() step = 0.1;
-
-  @Output() power = new EventEmitter<boolean>();
-
-  @HostListener('window:mouseup', ['$event'])
-  onMouseUp(event) {
-    this.recalculateValue(event);
-    this.isMouseDown = false;
-  }
-
-  @HostListener('window:mousemove', ['$event'])
-  onMouseMove(event: MouseEvent) {
-    this.recalculateValue(event);
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event) {
-    this.invalidate();
-  }
-
-  off = false;
-  oldValue: number;
-
-  svgControlId = uniqueId++;
-  scaleFactor = 1;
-  bottomAngleRad = 0;
-  radius = 100;
-  translateXValue = 0;
-  translateYValue = 0;
-  thickness = 6;
-  pinRadius = 10;
-  colors: any = [];
-
-  styles = {
-    viewBox: '0 0 300 300',
-    arcTranslateStr: 'translate(0, 0)',
-    clipPathStr: '',
-    gradArcs: [],
-    nonSelectedArc: {},
-    thumbPosition: { x: 0, y: 0 },
-    blurRadius: 15,
-  };
-
-  private isMouseDown = false;
-  private init = false;
-
-  constructor(
-    private location: Location,
-    private locationStrategy: LocationStrategy,
-  ) {
-    this.oldValue = this.value;
-  }
-
-  ngAfterViewInit(): void {
-    // IE fix
-    setTimeout(() => {
-      this.invalidate();
-      this.init = true;
-    });
-  }
-
-  ngOnChanges(): void {
-    if (this.init) {
-      this.invalidate();
-    }
-  }
-
-  mouseDown(event) {
-    this.isMouseDown = true;
-    if (!this.off) {
-      this.recalculateValue(event, true);
-    }
-  }
-
-  switchPower() {
-    this.off = !this.off;
-    this.power.emit(!this.off);
-
-    if (this.off) {
-      this.oldValue = this.value;
-      this.value = this.min;
-    } else {
-      this.value = this.oldValue;
-    }
-
-    this.invalidatePinPosition();
-  }
-
-  getUrlPath(id: string) {
-    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
-    const path = this.location.path().replace(/\/$/, '');
-
-    return `url(${baseHref}${path}${id}${this.svgControlId})`;
-  }
-
-  private invalidate(): void {
-    this.bottomAngleRad = TemperatureDraggerComponent.toRad(this.bottomAngle);
-    this.calculateVars();
-
-    this.invalidateClipPathStr();
-    this.invalidatePinPosition();
-
-    // Chrome fix, temporary solution
-    // TODO: review set data to styles object
-    setTimeout(() => {
-      this.invalidateGradientArcs();
-    });
-  }
-
-  private calculateVars() {
-    this.bottomAngleRad = TemperatureDraggerComponent.toRad(this.bottomAngle);
-    this.colors = (typeof this.fillColors === 'string') ? [this.fillColors] : this.fillColors;
-
-    const halfAngle = this.bottomAngleRad / 2;
-
-    const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect();
-    const svgAreaFactor = svgBoundingRect.height && svgBoundingRect.width / svgBoundingRect.height || 1;
-    const svgHeight = VIEW_BOX_SIZE / svgAreaFactor;
-    const thumbMaxRadius = this.thumbRadius + this.thumbBorder;
-    const thumbMargin = 2 * thumbMaxRadius > this.arcThickness
-      ? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor
-      : 0;
-
-    this.scaleFactor = svgBoundingRect.width / VIEW_BOX_SIZE || 1;
-    this.styles.viewBox = `0 0 ${VIEW_BOX_SIZE} ${svgHeight}`;
-
-
-    const circleFactor = this.bottomAngleRad <= Math.PI
-      ? ( 2 / (1 + Math.cos(halfAngle)) )
-      : ( 2 * Math.sin(halfAngle) / (1 + Math.cos(halfAngle)) );
-    if (circleFactor > svgAreaFactor) {
-      if (this.bottomAngleRad > Math.PI) {
-        this.radius = (VIEW_BOX_SIZE - 2 * thumbMargin) / (2 * Math.sin(halfAngle));
-      } else {
-        this.radius = VIEW_BOX_SIZE / 2 - thumbMargin;
-      }
-    } else {
-      this.radius = (svgHeight - 2 * thumbMargin) / (1 + Math.cos(halfAngle));
-    }
-
-    this.translateXValue = VIEW_BOX_SIZE / 2 - this.radius;
-    this.translateYValue = (svgHeight) / 2 - this.radius * (1 + Math.cos(halfAngle)) / 2;
-
-    this.styles.arcTranslateStr = `translate(${this.translateXValue}, ${this.translateYValue})`;
-
-    this.thickness = this.arcThickness / this.scaleFactor;
-    this.pinRadius = this.thumbRadius / this.scaleFactor;
-  }
-
-  private calculateClipPathSettings() {
-    const halfAngle = this.bottomAngleRad / 2;
-    const innerRadius = this.radius - this.thickness;
-
-    const xStartMultiplier = 1 - Math.sin(halfAngle);
-    const yMultiplier = 1 + Math.cos(halfAngle);
-    const xEndMultiplier = 1 + Math.sin(halfAngle);
-
-    return {
-      outer: {
-        start: {
-          x: xStartMultiplier * this.radius,
-          y: yMultiplier * this.radius,
-        },
-        end: {
-          x: xEndMultiplier * this.radius,
-          y: yMultiplier * this.radius,
-        },
-        radius: this.radius,
-      },
-      inner: {
-        start: {
-          x: xStartMultiplier * innerRadius + this.thickness,
-          y: yMultiplier * innerRadius + this.thickness,
-        },
-        end: {
-          x: xEndMultiplier * innerRadius + this.thickness,
-          y: yMultiplier * innerRadius + this.thickness,
-        },
-        radius: innerRadius,
-      },
-      thickness: this.thickness,
-      big: this.bottomAngleRad < Math.PI ? '1' : '0',
-    };
-
-  }
-
-  private invalidateClipPathStr() {
-    const s = this.calculateClipPathSettings();
-
-    let path = `M ${s.outer.start.x},${s.outer.start.y}`; // Start at startangle top
-
-    // Outer arc
-    // Draw an arc of radius 'radius'
-    // Arc details...
-    path += ` A ${s.outer.radius},${s.outer.radius}
-       0 ${s.big} 1
-       ${s.outer.end.x},${s.outer.end.y}`; // Arc goes to top end angle coordinate
-
-    // Outer to inner connector
-    path += ` A ${s.thickness / 2},${s.thickness / 2}
-       0 1 1
-       ${s.inner.end.x},${s.inner.end.y}`;
-
-    // Inner arc
-    path += ` A ${s.inner.radius},${s.inner.radius}
-       1 ${s.big} 0
-       ${s.inner.start.x},${s.inner.start.y}`;
-
-    // Outer to inner connector
-    path += ` A ${s.thickness / 2},${s.thickness / 2}
-       0 1 1
-       ${s.outer.start.x},${s.outer.start.y}`;
-
-    // Close path
-    path += ' Z';
-    this.styles.clipPathStr = path;
-  }
-
-  private calculateGradientConePaths(angleStep) {
-    const radius = this.radius;
-
-    function calcX(angle) {
-      return radius * (1 - 2 * Math.sin(angle));
-    }
-
-    function calcY(angle) {
-      return radius * (1 + 2 * Math.cos(angle));
-    }
-
-    const gradArray = [];
-
-    for (let i = 0, currentAngle = this.bottomAngleRad / 2; i < this.colors.length; i++, currentAngle += angleStep) {
-      gradArray.push({
-        start: { x: calcX(currentAngle), y: calcY(currentAngle) },
-        end: { x: calcX(currentAngle + angleStep), y: calcY(currentAngle + angleStep) },
-        big: Math.PI <= angleStep ? 1 : 0,
-      });
-    }
-    return gradArray;
-  }
-
-  private invalidateGradientArcs() {
-    const radius = this.radius;
-
-    function getArc(des) {
-      return `M ${radius},${radius}
-         L ${des.start.x},${des.start.y}
-         A ${2 * radius},${2 * radius}
-         0 ${des.big} 1
-         ${des.end.x},${des.end.y}
-         Z`;
-    }
-
-    const angleStep = (2 * Math.PI - this.bottomAngleRad) / this.colors.length;
-    const s = this.calculateGradientConePaths(angleStep);
-
-    this.styles.gradArcs = [];
-    for (let i = 0; i < s.length; i++) {
-      const si = s[i];
-      const arcValue = getArc(si);
-      this.styles.gradArcs.push({
-        color: this.colors[i],
-        d: arcValue,
-      });
-    }
-
-    this.styles.blurRadius = 2 * radius * Math.sin(angleStep / 6);
-  }
-
-  private invalidateNonSelectedArc() {
-    const angle = this.bottomAngleRad / 2 + (1 - this.getValuePercentage()) * (2 * Math.PI - this.bottomAngleRad);
-    this.styles.nonSelectedArc = {
-      color: this.disableArcColor,
-      d: `M ${this.radius},${this.radius}
-       L ${this.radius},${3 * this.radius}
-       A ${2 * this.radius},${2 * this.radius}
-       1 ${angle > Math.PI ? '1' : '0'} 0
-       ${this.radius + this.radius * 2 * Math.sin(angle)},${this.radius + this.radius * 2 * Math.cos(angle)}
-       Z`,
-    };
-  }
-
-  private invalidatePinPosition() {
-    const radiusOffset = this.thickness / 2;
-    const curveRadius = this.radius - radiusOffset;
-    const actualAngle = (2 * Math.PI - this.bottomAngleRad) * this.getValuePercentage() + this.bottomAngleRad / 2;
-    this.styles.thumbPosition = {
-      x: curveRadius * (1 - Math.sin(actualAngle)) + radiusOffset,
-      y: curveRadius * (1 + Math.cos(actualAngle)) + radiusOffset,
-    };
-    this.invalidateNonSelectedArc();
-  }
-
-  private recalculateValue(event, allowJumping = false) {
-    if (this.isMouseDown && !this.off) {
-      const rect = this.svgRoot.nativeElement.getBoundingClientRect();
-      const center = {
-        x: rect.left + VIEW_BOX_SIZE * this.scaleFactor / 2,
-        y: rect.top + (this.translateYValue + this.radius) * this.scaleFactor,
-      };
-      let actualAngle = Math.atan2(center.x - event.clientX, event.clientY - center.y);
-      if (actualAngle < 0) {
-        actualAngle = actualAngle + 2 * Math.PI;
-      }
-
-      const previousRelativeValue = this.getValuePercentage();
-      let relativeValue = 0;
-      if (actualAngle < this.bottomAngleRad / 2) {
-        relativeValue = 0;
-      } else if (actualAngle > 2 * Math.PI - this.bottomAngleRad / 2) {
-        relativeValue = 1;
-      } else {
-        relativeValue = (actualAngle - this.bottomAngleRad / 2) / (2 * Math.PI - this.bottomAngleRad);
-      }
-
-      const value = this.toValueNumber(relativeValue);
-
-      if (this.value !== value && (allowJumping || Math.abs(relativeValue - previousRelativeValue) < this.maxLeap)) {
-        this.value = value;
-        this.valueChange.emit(this.value);
-        this.invalidatePinPosition();
-      }
-    }
-  }
-
-  private getValuePercentage() {
-    return (this.value - this.min) / (this.max - this.min);
-  }
-
-  private toValueNumber(factor) {
-    return Math.round(factor * (this.max - this.min) / this.step) * this.step + this.min;
-  }
-
-  private static toRad(angle) {
-    return Math.PI * angle / 180;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/temperature/temperature.component.html

@@ -1,69 +0,0 @@
-<nb-card size="large">
-  <nb-tabset fullWidth>
-
-    <nb-tab tabTitle="Temperature">
-
-      <div class="slider-container">
-        <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
-                                 [min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="theme.arcEmpty"
-                                 [fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
-
-          <div class="slider-value-container"  [ngClass]="{ 'off': temperatureOff }">
-            <div class="value temperature h1">
-              {{ temperatureOff ? '--' : (temperature | ngxRound) }}
-            </div>
-            <div class="desc">
-              Celsius
-            </div>
-          </div>
-        </ngx-temperature-dragger>
-      </div>
-
-      <nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
-        <nb-radio value="cool">
-          <i class="nb-snowy-circled"></i>
-        </nb-radio>
-        <nb-radio value="warm">
-          <i class="nb-sunny-circled"></i>
-        </nb-radio>
-        <nb-radio value="heat">
-          <i class="nb-flame-circled"></i>
-        </nb-radio>
-        <nb-radio value="fan">
-          <i class="nb-loop-circled"></i>
-        </nb-radio>
-      </nb-radio-group>
-    </nb-tab>
-
-    <nb-tab tabTitle="Humidity">
-
-      <div class="slider-container">
-        <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
-                                 [min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="theme.arcEmpty"
-                                 [fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
-
-          <div class="slider-value-container"  [ngClass]="{ 'off': humidityOff }">
-            <div class="value humidity h1">
-              {{ humidityOff ? '--' : (humidity | ngxRound) }}
-            </div>
-          </div>
-        </ngx-temperature-dragger>
-      </div>
-
-      <nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
-        <nb-radio value="cool">
-          <i class="nb-snowy-circled"></i>
-        </nb-radio>
-        <nb-radio value="warm">
-          <i class="nb-sunny-circled"></i>
-        </nb-radio>
-        <nb-radio value="heat">
-          <i class="nb-flame-circled"></i>
-        </nb-radio>
-        <nb-radio value="fan">
-          <i class="nb-loop-circled"></i>
-        </nb-radio>
-      </nb-radio-group>
-    </nb-tab>
-  </nb-tabset>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/temperature/temperature.component.scss

@@ -1,121 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-tabset {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    ::ng-deep ul {
-      // make same size as card header
-      border-color: transparent;
-      padding-bottom: 1px;
-      .tab-link {
-        padding: 1.25rem 2rem;
-      }
-    }
-  }
-
-  nb-tab.content-active {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    position: relative;
-    height: 100%;
-  }
-
-  .slider-container {
-    display: flex;
-    flex: 1;
-    -ms-flex: 1 1 auto;
-    justify-content: center;
-    align-items: center;
-  }
-
-  ngx-temperature-dragger {
-    margin-top: -1.5rem;
-    width: 100%;
-    max-width: 300px;
-  }
-
-  .slider-value-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .value {
-      position: relative;
-      margin: 0;
-
-      &.temperature::before {
-        position: absolute;
-        content: '°';
-        top: 0;
-        right: -0.85rem;
-      }
-
-      &.humidity::before {
-        position: absolute;
-        content: '%';
-        top: 3px;
-        right: -1.6rem;
-        font-size: 0.7em;
-      }
-    }
-
-    &.off {
-      .value {
-        color: nb-theme(text-hint-color);
-        letter-spacing: 0.25rem;
-        padding-left: 0.5rem;
-
-        &::before {
-          display: none;
-        }
-      }
-
-      .desc {
-        display: none;
-      }
-    }
-  }
-
-  nb-radio-group {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  nb-radio {
-    flex: 0 0 auto;
-    width: calc(3.5rem + 2px);
-    height: calc(3.5rem + 2px);
-
-    ::ng-deep {
-      .outer-circle,
-      .inner-circle {
-        display: none;
-      }
-
-      label {
-        padding: 0;
-      }
-
-      .text {
-        border: 1px solid transparent;
-        font-size: 2.5rem;
-        padding: 0.5rem;
-        margin: 0;
-        color: nb-theme(text-hint-color);
-      }
-
-      input:checked ~ .text {
-        border-color: nb-theme(color-primary-default);
-        border-radius: nb-theme(card-border-radius);
-        color: nb-theme(text-primary-color);
-      }
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/temperature/temperature.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { Temperature, TemperatureHumidityData } from '../../../@core/data/temperature-humidity';
-import { takeWhile } from 'rxjs/operators';
-import { forkJoin } from 'rxjs';
-
-@Component({
-  selector: 'ngx-temperature',
-  styleUrls: ['./temperature.component.scss'],
-  templateUrl: './temperature.component.html',
-})
-export class TemperatureComponent implements OnDestroy {
-
-  private alive = true;
-
-  temperatureData: Temperature;
-  temperature: number;
-  temperatureOff = false;
-  temperatureMode = 'cool';
-
-  humidityData: Temperature;
-  humidity: number;
-  humidityOff = false;
-  humidityMode = 'heat';
-
-  theme: any;
-  themeSubscription: any;
-
-  constructor(private themeService: NbThemeService,
-              private temperatureHumidityService: TemperatureHumidityData) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(config => {
-      this.theme = config.variables.temperature;
-    });
-
-    forkJoin(
-      this.temperatureHumidityService.getTemperatureData(),
-      this.temperatureHumidityService.getHumidityData(),
-    )
-      .subscribe(([temperatureData, humidityData]: [Temperature, Temperature]) => {
-        this.temperatureData = temperatureData;
-        this.temperature = this.temperatureData.value;
-
-        this.humidityData = humidityData;
-        this.humidity = this.humidityData.value;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/traffic/traffic-chart.component.ts

@@ -1,174 +0,0 @@
-import { delay, takeWhile } from 'rxjs/operators';
-import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { LayoutService } from '../../../@core/utils';
-
-@Component({
-  selector: 'ngx-traffic-chart',
-  template: `
-    <div echarts
-         [options]="option"
-         class="echart"
-         (chartInit)="onChartInit($event)">
-    </div>
-  `,
-})
-export class TrafficChartComponent implements AfterViewInit, OnDestroy {
-
-  private alive = true;
-
-  @Input() points: number[];
-
-  type = 'month';
-  types = ['week', 'month', 'year'];
-  option: any = {};
-  echartsIntance: any;
-
-  constructor(private theme: NbThemeService,
-              private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
-      .pipe(
-        takeWhile(() => this.alive),
-      )
-      .subscribe(() => this.resizeChart());
-  }
-
-  ngAfterViewInit() {
-    this.theme.getJsTheme()
-      .pipe(
-        delay(1),
-        takeWhile(() => this.alive),
-      )
-      .subscribe(config => {
-        const trafficTheme: any = config.variables.traffic;
-
-        this.option = Object.assign({}, {
-          grid: {
-            left: 0,
-            top: 0,
-            right: 0,
-            bottom: 0,
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: this.points,
-          },
-          yAxis: {
-            boundaryGap: [0, '5%'],
-            axisLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: trafficTheme.yAxisSplitLine,
-                width: '1',
-              },
-            },
-          },
-          tooltip: {
-            axisPointer: {
-              type: 'shadow',
-            },
-            textStyle: {
-              color: trafficTheme.tooltipTextColor,
-              fontWeight: trafficTheme.tooltipFontWeight,
-              fontSize: 16,
-            },
-            position: 'top',
-            backgroundColor: trafficTheme.tooltipBg,
-            borderColor: trafficTheme.tooltipBorderColor,
-            borderWidth: 1,
-            formatter: '{c0} MB',
-            extraCssText: trafficTheme.tooltipExtraCss,
-          },
-          series: [
-            {
-              type: 'line',
-              symbol: 'circle',
-              symbolSize: 8,
-              sampling: 'average',
-              silent: true,
-              itemStyle: {
-                normal: {
-                  color: trafficTheme.shadowLineDarkBg,
-                },
-                emphasis: {
-                  color: 'rgba(0,0,0,0)',
-                  borderColor: 'rgba(0,0,0,0)',
-                  borderWidth: 0,
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: 2,
-                  color: trafficTheme.shadowLineDarkBg,
-                },
-              },
-              data: this.points.map(p => p - 15),
-            },
-            {
-              type: 'line',
-              symbol: 'circle',
-              symbolSize: 6,
-              sampling: 'average',
-              itemStyle: {
-                normal: {
-                  color: trafficTheme.itemColor,
-                  borderColor: trafficTheme.itemBorderColor,
-                  borderWidth: 2,
-                },
-                emphasis: {
-                  color: 'white',
-                  borderColor: trafficTheme.itemEmphasisBorderColor,
-                  borderWidth: 2,
-                },
-              },
-              lineStyle: {
-                normal: {
-                  width: 2,
-                  color: trafficTheme.lineBg,
-                  shadowColor: trafficTheme.lineBg,
-                  shadowBlur: trafficTheme.lineShadowBlur,
-                },
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: trafficTheme.gradFrom,
-                  }, {
-                    offset: 1,
-                    color: trafficTheme.gradTo,
-                  }]),
-                  opacity: 1,
-                },
-              },
-              data: this.points,
-            },
-          ],
-        });
-    });
-  }
-
-  onChartInit(echarts) {
-    this.echartsIntance = echarts;
-  }
-
-  resizeChart() {
-    if (this.echartsIntance) {
-      this.echartsIntance.resize();
-    }
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/traffic/traffic.component.scss

@@ -1,35 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-
-  nb-card {
-    position: relative;
-    overflow: hidden;
-  }
-
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: nb-theme(card-header-with-select-padding-top);
-    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
-    margin-bottom: -1px;
-  }
-
-  ngx-traffic-chart {
-    flex: 1;
-  }
-
-  ::ng-deep {
-    .echart {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-
-    canvas {
-      border-bottom-left-radius: nb-theme(card-border-radius);
-      border-bottom-right-radius: nb-theme(card-border-radius);
-    }
-  }
-}

src/frontend/src/app/demo_pages/dashboard/traffic/traffic.component.ts

@@ -1,51 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-
-import { TrafficChartData } from '../../../@core/data/traffic-chart';
-
-@Component({
-  selector: 'ngx-traffic',
-  styleUrls: ['./traffic.component.scss'],
-  template: `
-    <nb-card size="tiny">
-      <nb-card-header>
-        <span>Traffic Consumption</span>
-
-        <nb-select [(selected)]="type">
-          <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
-        </nb-select>
-      </nb-card-header>
-
-      <ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
-    </nb-card>
-  `,
-})
-export class TrafficComponent implements OnDestroy {
-
-  private alive = true;
-
-  trafficChartPoints: number[];
-  type = 'month';
-  types = ['week', 'month', 'year'];
-  currentTheme: string;
-
-  constructor(private themeService: NbThemeService,
-              private trafficChartService: TrafficChartData) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-      this.currentTheme = theme.name;
-    });
-
-    this.trafficChartService.getTrafficChartData()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((data) => {
-        this.trafficChartPoints = data;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/weather/weather.component.html

@@ -1,53 +0,0 @@
-<nb-card size="medium">
-  <nb-card-body>
-    <span class="h3 location">New York</span>
-    <span class="date">Mon 29 May</span>
-
-    <div class="today">
-      <span class="today-temperature h1">20&deg;</span>
-      <nb-icon icon="sun-outline" pack="eva" class="today-icon"></nb-icon>
-    </div>
-
-    <div class="today-details">
-      <div class="parameter">
-        <span class="caption parameter-name">max</span>
-        <span class="parameter-value">23&deg;</span>
-      </div>
-      <div class="parameter">
-        <span class="caption parameter-name">min</span>
-        <span class="parameter-value">19&deg;</span>
-      </div>
-      <div class="parameter">
-        <span class="caption parameter-name">wind</span>
-        <span class="parameter-value">4 km/h</span>
-      </div>
-      <div class="parameter">
-        <span class="caption parameter-name">hum</span>
-        <span class="parameter-value">87%</span>
-      </div>
-    </div>
-
-    <div class="weekly-forecast">
-      <div class="day">
-        <span class="caption">Sun</span>
-        <i class="weather-icon ion-ios-cloudy-outline"></i>
-        <span class="temperature">17&deg;</span>
-      </div>
-      <div class="day">
-        <span class="caption">Mon</span>
-        <i class="weather-icon ion-ios-sunny-outline"></i>
-        <span class="temperature">19&deg;</span>
-      </div>
-      <div class="day">
-        <span class="caption">Tue</span>
-        <i class="weather-icon ion-ios-rainy-outline"></i>
-        <span class="temperature">22&deg;</span>
-      </div>
-      <div class="day">
-        <span class="caption">Wed</span>
-        <i class="weather-icon ion-ios-partlysunny-outline"></i>
-        <span class="temperature">21&deg;</span>
-      </div>
-    </div>
-  </nb-card-body>
-</nb-card>

src/frontend/src/app/demo_pages/dashboard/weather/weather.component.scss

@@ -1,76 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .location,
-  .date {
-    display: block;
-  }
-
-  .location {
-    margin-bottom: 0.1rem;
-  }
-
-  .today {
-    display: flex;
-    justify-content: space-around;
-  }
-
-  .today-temperature {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: 2rem 1.5rem;
-  }
-
-  .today-icon {
-    color: nb-theme(color-primary-default);
-    font-size: 10rem;
-    line-height: 1;
-    margin-top: -4rem;
-    margin-left: auto;
-    margin-right: 0.4rem;
-  }
-
-  .today-details {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 2rem;
-  }
-
-  .parameter {
-    flex: 1 1 auto;
-    text-align: center;
-  }
-
-  .parameter-name,
-  .parameter-value {
-    display: block;
-  }
-
-  .caption {
-    text-transform: uppercase;
-  }
-
-  .weekly-forecast {
-    display: flex;
-    justify-content: space-around;
-    margin: auto 0;
-  }
-
-  .day {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .weather-icon {
-    font-size: 2.5rem;
-    line-height: 2.5rem;
-  }
-}

src/frontend/src/app/demo_pages/dashboard/weather/weather.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-weather',
-  styleUrls: ['./weather.component.scss'],
-  templateUrl: './weather.component.html',
-})
-
-export class WeatherComponent {
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html

@@ -1,7 +0,0 @@
-<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
-
-<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
-  <nb-option *ngFor="let period of types" [value]="period">
-    {{ period }}
-  </nb-option>
-</nb-select>

src/frontend/src/app/demo_pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss

@@ -1,25 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  padding: 1.5rem 4.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin: -1rem;
-
-  ngx-legend-chart,
-  .period-select {
-    padding-top: 1rem;
-    @include nb-ltr(padding-left, 0.5rem);
-    @include nb-rtl(padding-right, 0.5rem);
-  }
-
-  @include media-breakpoint-up(md) {
-    .period-select {
-      @include nb-ltr(margin-left, auto);
-      @include nb-rtl(margin-right, auto);
-    }
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.ts

@@ -1,69 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-
-
-@Component({
-  selector: 'ngx-chart-panel-header',
-  styleUrls: ['./chart-panel-header.component.scss'],
-  templateUrl: './chart-panel-header.component.html',
-})
-export class ChartPanelHeaderComponent implements OnDestroy {
-
-  private alive = true;
-
-  @Output() periodChange = new EventEmitter<string>();
-
-  @Input() type: string = 'week';
-
-  types: string[] = ['week', 'month', 'year'];
-  chartLegend: {iconColor: string; title: string}[];
-  breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
-  breakpoints: any;
-  currentTheme: string;
-
-  constructor(private themeService: NbThemeService,
-              private breakpointService: NbMediaBreakpointsService) {
-    this.themeService.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(theme => {
-        const orderProfitLegend = theme.variables.orderProfitLegend;
-
-        this.currentTheme = theme.name;
-        this.setLegendItems(orderProfitLegend);
-      });
-
-      this.breakpoints = this.breakpointService.getBreakpointsMap();
-      this.themeService.onMediaQueryChange()
-        .pipe(takeWhile(() => this.alive))
-        .subscribe(([oldValue, newValue]) => {
-          this.breakpoint = newValue;
-        });
-  }
-
-  setLegendItems(orderProfitLegend) {
-    this.chartLegend = [
-      {
-        iconColor: orderProfitLegend.firstItem,
-        title: 'Payment',
-      },
-      {
-        iconColor: orderProfitLegend.secondItem,
-        title: 'Canceled',
-      },
-      {
-        iconColor: orderProfitLegend.thirdItem,
-        title: 'All orders',
-      },
-    ];
-  }
-
-  changePeriod(period: string): void {
-    this.type = period;
-    this.periodChange.emit(period);
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss

@@ -1,15 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  .summary-container {
-    display: flex;
-    flex-wrap: wrap;
-    flex: 1;
-    background-color: nb-theme(background-basic-color-2);
-    justify-content: space-between;
-    padding: 1.5rem 4rem 1rem;
-    border: 1px solid nb-theme(border-basic-color-3);
-    border-left: none;
-    border-right: none;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts

@@ -1,18 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ngx-chart-panel-summary',
-  styleUrls: ['./chart-panel-summary.component.scss'],
-  template: `
-    <div class="summary-container">
-      <div *ngFor="let item of summary">
-        <div>{{ item.title }}</div>
-        <div class="h6">{{ item.value }}</div>
-      </div>
-    </div>
-  `,
-})
-export class ChartPanelSummaryComponent {
-  @Input() summary: {title: string; value: number}[];
-}
-

src/frontend/src/app/demo_pages/e-commerce/charts-panel/charts-panel.component.html

@@ -1,22 +0,0 @@
-<nb-card size="large">
-  <nb-tabset fullWidth (changeTab)="changeTab($event)">
-    <nb-tab tabTitle="Orders">
-      <div class="chart-container">
-        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
-        <ngx-chart-panel-header [type]="period"
-                                (periodChange)="setPeriodAndGetChartData($event)">
-        </ngx-chart-panel-header>
-        <ngx-orders-chart #ordersChart [ordersChartData]="ordersChartData"></ngx-orders-chart>
-      </div>
-    </nb-tab>
-    <nb-tab tabTitle="Profit" [lazyLoad]="true">
-      <div class="chart-container">
-        <ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
-        <ngx-chart-panel-header [type]="period"
-                                (periodChange)="setPeriodAndGetChartData($event)">
-        </ngx-chart-panel-header>
-        <ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
-      </div>
-    </nb-tab>
-  </nb-tabset>
-</nb-card>

src/frontend/src/app/demo_pages/e-commerce/charts-panel/charts-panel.component.scss

@@ -1,41 +0,0 @@
-@import '../../../@theme/styles/themes';
-
-$legend-all-orders-color: #00977e;
-$legend-payment-color: #6935ca;
-$legend-canceled-color: #3f4fda;
-
-@include nb-install-component() {
-
-  nb-tabset {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    ::ng-deep ul {
-      // make same size as card header
-      border-color: transparent;
-      padding-bottom: 1px;
-      .tab-link {
-        padding: 1.25rem 2rem;
-      }
-    }
-  }
-
-  nb-tab {
-    flex: 1;
-    padding: 0 0 1.25rem;
-  }
-
-  .chart-container {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  ngx-profit-chart,
-  ngx-orders-chart {
-    padding: 0 1.25rem;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/charts-panel.component.ts

@@ -1,74 +0,0 @@
-import { Component, OnDestroy, ViewChild } from '@angular/core';
-import { takeWhile } from 'rxjs/operators';
-
-import { OrdersChartComponent } from './charts/orders-chart.component';
-import { ProfitChartComponent } from './charts/profit-chart.component';
-import { OrdersChart } from '../../../@core/data/orders-chart';
-import { ProfitChart } from '../../../@core/data/profit-chart';
-import { OrderProfitChartSummary, OrdersProfitChartData } from '../../../@core/data/orders-profit-chart';
-
-@Component({
-  selector: 'ngx-ecommerce-charts',
-  styleUrls: ['./charts-panel.component.scss'],
-  templateUrl: './charts-panel.component.html',
-})
-export class ECommerceChartsPanelComponent implements OnDestroy {
-
-  private alive = true;
-
-  chartPanelSummary: OrderProfitChartSummary[];
-  period: string = 'week';
-  ordersChartData: OrdersChart;
-  profitChartData: ProfitChart;
-
-  @ViewChild('ordersChart', { static: true }) ordersChart: OrdersChartComponent;
-  @ViewChild('profitChart', { static: true }) profitChart: ProfitChartComponent;
-
-  constructor(private ordersProfitChartService: OrdersProfitChartData) {
-    this.ordersProfitChartService.getOrderProfitChartSummary()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((summary) => {
-        this.chartPanelSummary = summary;
-      });
-
-    this.getOrdersChartData(this.period);
-    this.getProfitChartData(this.period);
-  }
-
-  setPeriodAndGetChartData(value: string): void {
-    if (this.period !== value) {
-      this.period = value;
-    }
-
-    this.getOrdersChartData(value);
-    this.getProfitChartData(value);
-  }
-
-  changeTab(selectedTab) {
-    if (selectedTab.tabTitle === 'Profit') {
-      this.profitChart.resizeChart();
-    } else {
-      this.ordersChart.resizeChart();
-    }
-  }
-
-  getOrdersChartData(period: string) {
-    this.ordersProfitChartService.getOrdersChartData(period)
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(ordersChartData => {
-        this.ordersChartData = ordersChartData;
-      });
-  }
-
-  getProfitChartData(period: string) {
-    this.ordersProfitChartService.getProfitChartData(period)
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(profitChartData => {
-        this.profitChartData = profitChartData;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/charts/charts-common.component.scss

@@ -1,11 +0,0 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  flex: 1;
-
-  .echart {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/charts/orders-chart.component.ts

@@ -1,307 +0,0 @@
-import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { delay, takeWhile } from 'rxjs/operators';
-
-import { OrdersChart } from '../../../../@core/data/orders-chart';
-import { LayoutService } from '../../../../@core/utils/layout.service';
-
-@Component({
-  selector: 'ngx-orders-chart',
-  styleUrls: ['./charts-common.component.scss'],
-  template: `
-    <div echarts
-         [options]="option"
-         class="echart"
-         (chartInit)="onChartInit($event)">
-    </div>
-  `,
-})
-export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
-
-  @Input()
-  ordersChartData: OrdersChart;
-
-  private alive = true;
-
-  echartsIntance: any;
-  option: any;
-
-  ngOnChanges(): void {
-    if (this.option) {
-      this.updateOrdersChartOptions(this.ordersChartData);
-    }
-  }
-
-  constructor(private theme: NbThemeService,
-              private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
-      .pipe(
-        takeWhile(() => this.alive),
-      )
-      .subscribe(() => this.resizeChart());
-  }
-
-  ngAfterViewInit(): void {
-    this.theme.getJsTheme()
-      .pipe(
-        takeWhile(() => this.alive),
-        delay(1),
-      )
-      .subscribe(config => {
-        const eTheme: any = config.variables.orders;
-
-        this.setOptions(eTheme);
-        this.updateOrdersChartOptions(this.ordersChartData);
-      });
-  }
-
-  setOptions(eTheme) {
-    this.option = {
-      grid: {
-        left: 40,
-        top: 20,
-        right: 0,
-        bottom: 40,
-      },
-      tooltip: {
-        trigger: 'item',
-        axisPointer: {
-          type: 'line',
-          lineStyle: {
-            color: eTheme.tooltipLineColor,
-            width: eTheme.tooltipLineWidth,
-          },
-        },
-        textStyle: {
-          color: eTheme.tooltipTextColor,
-          fontSize: eTheme.tooltipFontSize,
-          fontWeight: eTheme.tooltipFontWeight,
-        },
-        position: 'top',
-        backgroundColor: eTheme.tooltipBg,
-        borderColor: eTheme.tooltipBorderColor,
-        borderWidth: 1,
-        formatter: (params) => {
-          return Math.round(parseInt(params.value, 10));
-        },
-        extraCssText: eTheme.tooltipExtraCss,
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        offset: 5,
-        data: [],
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          color: eTheme.axisTextColor,
-          fontSize: eTheme.axisFontSize,
-        },
-        axisLine: {
-          lineStyle: {
-            color: eTheme.axisLineColor,
-            width: '2',
-          },
-        },
-      },
-      yAxis: {
-        type: 'value',
-        boundaryGap: false,
-        axisLine: {
-          lineStyle: {
-            color: eTheme.axisLineColor,
-            width: '1',
-          },
-        },
-        axisLabel: {
-          color: eTheme.axisTextColor,
-          fontSize: eTheme.axisFontSize,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitLine: {
-
-          lineStyle: {
-            color: eTheme.yAxisSplitLine,
-            width: '1',
-          },
-        },
-      },
-      series: [
-        this.getFirstLine(eTheme),
-        this.getSecondLine(eTheme),
-        this.getThirdLine(eTheme),
-      ],
-    };
-  }
-
-  getFirstLine(eTheme) {
-    return {
-      type: 'line',
-      smooth: true,
-      symbolSize: 20,
-      itemStyle: {
-        normal: {
-          opacity: 0,
-        },
-        emphasis: {
-          opacity: 0,
-        },
-      },
-      lineStyle: {
-        normal: {
-          width: 0,
-        },
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: eTheme.firstAreaGradFrom,
-          }, {
-            offset: 1,
-            color: eTheme.firstAreaGradTo,
-          }]),
-          opacity: 1,
-        },
-      },
-      data: [],
-    };
-  }
-
-  getSecondLine(eTheme) {
-    return         {
-      type: 'line',
-      smooth: true,
-      symbolSize: 20,
-      itemStyle: {
-        normal: {
-          opacity: 0,
-        },
-        emphasis: {
-          color: '#ffffff',
-          borderColor: eTheme.itemBorderColor,
-          borderWidth: 2,
-          opacity: 1,
-        },
-      },
-      lineStyle: {
-        normal: {
-          width: eTheme.lineWidth,
-          type: eTheme.lineStyle,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: eTheme.secondLineGradFrom,
-          }, {
-            offset: 1,
-            color: eTheme.secondLineGradTo,
-          }]),
-        },
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: eTheme.secondAreaGradFrom,
-          }, {
-            offset: 1,
-            color: eTheme.secondAreaGradTo,
-          }]),
-        },
-      },
-      data: [],
-    };
-  }
-
-  getThirdLine(eTheme) {
-    return {
-      type: 'line',
-      smooth: true,
-      symbolSize: 20,
-      itemStyle: {
-        normal: {
-          opacity: 0,
-        },
-        emphasis: {
-          color: '#ffffff',
-          borderColor: eTheme.itemBorderColor,
-          borderWidth: 2,
-          opacity: 1,
-        },
-      },
-      lineStyle: {
-        normal: {
-          width: eTheme.lineWidth,
-          type: eTheme.lineStyle,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: eTheme.thirdLineGradFrom,
-          }, {
-            offset: 1,
-            color: eTheme.thirdLineGradTo,
-          }]),
-        },
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: eTheme.thirdAreaGradFrom,
-          }, {
-            offset: 1,
-            color: eTheme.thirdAreaGradTo,
-          }]),
-        },
-      },
-      data: [],
-    };
-  }
-
-  updateOrdersChartOptions(ordersChartData: OrdersChart) {
-    const options = this.option;
-    const series = this.getNewSeries(options.series, ordersChartData.linesData);
-    const xAxis = this.getNewXAxis(options.xAxis, ordersChartData.chartLabel);
-
-    this.option = {
-      ...options,
-      xAxis,
-      series,
-    };
-  }
-
-  getNewSeries(series, linesData: number[][]) {
-    return series.map((line, index) => {
-      return {
-        ...line,
-        data: linesData[index],
-      };
-    });
-  }
-
-  getNewXAxis(xAxis, chartLabel: string[]) {
-    return {
-      ...xAxis,
-      data: chartLabel,
-    };
-  }
-
-  onChartInit(echarts) {
-    this.echartsIntance = echarts;
-  }
-
-  resizeChart() {
-    if (this.echartsIntance) {
-      // Fix recalculation chart size
-      // TODO: investigate more deeply
-      setTimeout(() => {
-        this.echartsIntance.resize();
-      }, 0);
-    }
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/charts-panel/charts/profit-chart.component.ts

@@ -1,200 +0,0 @@
-import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-
-import { ProfitChart } from '../../../../@core/data/profit-chart';
-import { LayoutService } from '../../../../@core/utils/layout.service';
-
-@Component({
-  selector: 'ngx-profit-chart',
-  styleUrls: ['./charts-common.component.scss'],
-  template: `
-    <div echarts [options]="options" class="echart" (chartInit)="onChartInit($event)"></div>
-  `,
-})
-export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges {
-
-  @Input()
-  profitChartData: ProfitChart;
-
-  private alive = true;
-
-  echartsIntance: any;
-  options: any = {};
-
-  constructor(private theme: NbThemeService,
-              private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
-      .pipe(
-        takeWhile(() => this.alive),
-      )
-      .subscribe(() => this.resizeChart());
-  }
-
-  ngOnChanges(): void {
-    if (this.echartsIntance) {
-      this.updateProfitChartOptions(this.profitChartData);
-    }
-  }
-
-  ngAfterViewInit() {
-    this.theme.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(config => {
-        const eTheme: any = config.variables.profit;
-
-        this.setOptions(eTheme);
-      });
-  }
-
-  setOptions(eTheme) {
-    this.options = {
-      backgroundColor: eTheme.bg,
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-          shadowStyle: {
-            color: 'rgba(0, 0, 0, 0.3)',
-          },
-        },
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true,
-      },
-      xAxis: [
-        {
-          type: 'category',
-          data: this.profitChartData.chartLabel,
-          axisTick: {
-            alignWithLabel: true,
-          },
-          axisLine: {
-            lineStyle: {
-              color: eTheme.axisLineColor,
-            },
-          },
-          axisLabel: {
-            color: eTheme.axisTextColor,
-            fontSize: eTheme.axisFontSize,
-          },
-        },
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          axisLine: {
-            lineStyle: {
-              color: eTheme.axisLineColor,
-            },
-          },
-          splitLine: {
-            lineStyle: {
-              color: eTheme.splitLineColor,
-            },
-          },
-          axisLabel: {
-            color: eTheme.axisTextColor,
-            fontSize: eTheme.axisFontSize,
-          },
-        },
-      ],
-      series: [
-        {
-          name: 'Canceled',
-          type: 'bar',
-          barGap: 0,
-          barWidth: '20%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: eTheme.firstLineGradFrom,
-              }, {
-                offset: 1,
-                color: eTheme.firstLineGradTo,
-              }]),
-            },
-          },
-          data: this.profitChartData.data[0],
-        },
-        {
-          name: 'Payment',
-          type: 'bar',
-          barWidth: '20%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: eTheme.secondLineGradFrom,
-              }, {
-                offset: 1,
-                color: eTheme.secondLineGradTo,
-              }]),
-            },
-          },
-          data: this.profitChartData.data[1],
-        },
-        {
-          name: 'All orders',
-          type: 'bar',
-          barWidth: '20%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: eTheme.thirdLineGradFrom,
-              }, {
-                offset: 1,
-                color: eTheme.thirdLineGradTo,
-              }]),
-            },
-          },
-          data: this.profitChartData.data[2],
-        },
-      ],
-    };
-  }
-
-  updateProfitChartOptions(profitChartData: ProfitChart) {
-    const options = this.options;
-    const series = this.getNewSeries(options.series, profitChartData.data);
-
-    this.echartsIntance.setOption({
-      series: series,
-      xAxis: {
-        data: this.profitChartData.chartLabel,
-      },
-    });
-  }
-
-  getNewSeries(series, data: number[][]) {
-    return series.map((line, index) => {
-      return {
-        ...line,
-        data: data[index],
-      };
-    });
-  }
-
-  onChartInit(echarts) {
-    this.echartsIntance = echarts;
-  }
-
-  resizeChart() {
-    if (this.echartsIntance) {
-      // Fix recalculation chart size
-      // TODO: investigate more deeply
-      setTimeout(() => {
-        this.echartsIntance.resize();
-      }, 0);
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/chart/country-orders-chart.component.scss

@@ -1,23 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex: 1;
-  padding: nb-theme(card-padding);
-
-  .header {
-    margin-left: 1rem;
-  }
-
-  .echart {
-    height: 75%;
-  }
-
-  @include media-breakpoint-down(sm) {
-    height: 50%;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/chart/country-orders-chart.component.ts

@@ -1,181 +0,0 @@
-import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-import { LayoutService } from '../../../../@core/utils/layout.service';
-
-
-@Component({
-  selector: 'ngx-country-orders-chart',
-  styleUrls: ['./country-orders-chart.component.scss'],
-  template: `
-    <div class="header">
-      <span class="caption">Selected Country/Region</span>
-      <h2 class="h4">{{ countryName }}</h2>
-    </div>
-    <div echarts
-         [options]="option"
-         class="echart"
-         (chartInit)="onChartInit($event)">
-    </div>
-  `,
-})
-export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
-
-  @Input() countryName: string;
-  @Input() data: number[];
-  @Input() maxValue: number;
-  @Input() labels: string[];
-
-  private alive = true;
-
-  option: any = {};
-  echartsInstance;
-
-  constructor(private theme: NbThemeService,
-              private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
-      .pipe(
-        takeWhile(() => this.alive),
-      )
-      .subscribe(() => this.resizeChart());
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.data && !changes.data.isFirstChange()) {
-      this.echartsInstance.setOption({
-        series: [
-          {
-            data: this.data.map(v => this.maxValue),
-          },
-          {
-            data: this.data,
-          },
-          {
-            data: this.data,
-          },
-        ],
-      });
-    }
-  }
-
-  ngAfterViewInit() {
-    this.theme.getJsTheme()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(config => {
-        const countriesTheme: any = config.variables.countryOrders;
-
-        this.option = Object.assign({}, {
-          grid: {
-            left: '3%',
-            right: '3%',
-            bottom: '3%',
-            top: '3%',
-            containLabel: true,
-          },
-          xAxis: {
-            axisLabel: {
-              color: countriesTheme.chartAxisTextColor,
-              fontSize: countriesTheme.chartAxisFontSize,
-            },
-            axisLine: {
-              lineStyle: {
-                color: countriesTheme.chartAxisLineColor,
-                width: '2',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              lineStyle: {
-                color: countriesTheme.chartAxisSplitLine,
-                width: '1',
-              },
-            },
-          },
-          yAxis: {
-            data: this.labels,
-            axisLabel: {
-              color: countriesTheme.chartAxisTextColor,
-              fontSize: countriesTheme.chartAxisFontSize,
-            },
-            axisLine: {
-              lineStyle: {
-                color: countriesTheme.chartAxisLineColor,
-                width: '2',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-          series: [
-            { // For shadow
-              type: 'bar',
-              data: this.data.map(v => this.maxValue),
-              cursor: 'default',
-              itemStyle: {
-                normal: {
-                  color: countriesTheme.chartInnerLineColor,
-                },
-                opacity: 1,
-              },
-              barWidth: '40%',
-              barGap: '-100%',
-              barCategoryGap: '30%',
-              animation: false,
-              z: 1,
-            },
-            { // For bottom line
-              type: 'bar',
-              data: this.data,
-              cursor: 'default',
-              itemStyle: {
-                normal: {
-                  color: countriesTheme.chartLineBottomShadowColor,
-                },
-                opacity: 1,
-              },
-              barWidth: '40%',
-              barGap: '-100%',
-              barCategoryGap: '30%',
-              z: 2,
-            },
-            {
-              type: 'bar',
-              barWidth: '35%',
-              data: this.data,
-              cursor: 'default',
-              itemStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                    offset: 0,
-                    color: countriesTheme.chartGradientFrom,
-                  }, {
-                    offset: 1,
-                    color: countriesTheme.chartGradientTo,
-                  }]),
-                },
-              },
-              z: 3,
-            },
-          ],
-        });
-      });
-  }
-
-  onChartInit(ec) {
-    this.echartsInstance = ec;
-  }
-
-  resizeChart() {
-    if (this.echartsInstance) {
-      this.echartsInstance.resize();
-    }
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/country-orders.component.scss

@@ -1,18 +0,0 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    display: flex;
-    height: 100%;
-    padding: 0;
-  }
-
-  @include media-breakpoint-down(sm) {
-    nb-card-body {
-      flex-direction: column;
-    }
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/country-orders.component.ts

@@ -1,64 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
-import { CountryOrderData } from '../../../@core/data/country-order';
-
-@Component({
-  selector: 'ngx-country-orders',
-  styleUrls: ['./country-orders.component.scss'],
-  template: `
-    <nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
-      <nb-card-header>Country Orders Statistics</nb-card-header>
-      <nb-card-body>
-        <ngx-country-orders-map (select)="selectCountryById($event)"
-                                countryId="USA">
-        </ngx-country-orders-map>
-        <ngx-country-orders-chart [countryName]="countryName"
-                                  [data]="countryData"
-                                  [labels]="countriesCategories"
-                                  maxValue="20">
-        </ngx-country-orders-chart>
-      </nb-card-body>
-    </nb-card>
-  `,
-})
-export class CountryOrdersComponent implements OnDestroy {
-
-  private alive = true;
-
-  countryName = '';
-  countryData: number[] = [];
-  countriesCategories: string[];
-  breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
-  breakpoints: any;
-
-  constructor(private themeService: NbThemeService,
-              private breakpointService: NbMediaBreakpointsService,
-              private countryOrderService: CountryOrderData) {
-    this.breakpoints = this.breakpointService.getBreakpointsMap();
-    this.themeService.onMediaQueryChange()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(([oldValue, newValue]) => {
-        this.breakpoint = newValue;
-      });
-    this.countryOrderService.getCountriesCategories()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((countriesCategories) => {
-        this.countriesCategories = countriesCategories;
-      });
-  }
-
-  selectCountryById(countryName: string) {
-    this.countryName = countryName;
-
-    this.countryOrderService.getCountriesCategoriesData(countryName)
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((countryData) => {
-        this.countryData = countryData;
-      });
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/map/country-orders-map.component.scss

@@ -1,57 +0,0 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  display: block;
-  height: 100%;
-  width: 60%;
-
-  .leaflet-container {
-    height: 100%;
-    background-color: nb-theme(background-basic-color-2);
-  }
-
-  ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
-    z-index: 997;
-  }
-
-  ::ng-deep .leaflet-bar {
-    box-shadow: none;
-  }
-
-  ::ng-deep .leaflet-control-zoom {
-    border: none;
-
-    a {
-      background-color: nb-theme(color-primary-default);
-      color: nb-theme(text-alternate-color);
-      border-bottom: none;
-    }
-
-    .leaflet-disabled {
-      background-color: nb-theme(color-primary-disabled);
-    }
-
-    .leaflet-control-zoom-in {
-      border-top-left-radius: nb-theme(button-rectangle-border-radius);
-      border-top-right-radius: nb-theme(button-rectangle-border-radius);
-    }
-
-    .leaflet-control-zoom-out {
-      margin-top: 1px;
-      border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
-      border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
-    }
-  }
-
-  ::ng-deep .leaflet-control-attribution {
-    background: transparent;
-  }
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    height: 50%;
-  }
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/map/country-orders-map.component.ts

@@ -1,144 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-
-import * as L from 'leaflet';
-
-import { CountryOrdersMapService } from './country-orders-map.service';
-import { NbThemeService } from '@nebular/theme';
-import { combineLatest } from 'rxjs';
-import { takeWhile } from 'rxjs/operators';
-
-
-@Component({
-  selector: 'ngx-country-orders-map',
-  styleUrls: ['./country-orders-map.component.scss'],
-  template: `
-    <div leaflet [leafletOptions]="options" [leafletLayers]="layers" (leafletMapReady)="mapReady($event)"></div>
-  `,
-})
-export class CountryOrdersMapComponent implements OnDestroy {
-
-  @Input() countryId: string;
-
-  @Output() select: EventEmitter<any> = new EventEmitter();
-
-  layers = [];
-  currentTheme: any;
-  alive = true;
-  selectedCountry;
-
-  options = {
-    zoom: 2,
-    minZoom: 2,
-    maxZoom: 6,
-    zoomControl: false,
-    center: L.latLng({lat: 38.991709, lng: -76.886109}),
-    maxBounds: new L.LatLngBounds(
-      new L.LatLng(-89.98155760646617, -180),
-      new L.LatLng(89.99346179538875, 180),
-    ),
-    maxBoundsViscosity: 1.0,
-  };
-
-  constructor(private ecMapService: CountryOrdersMapService,
-              private theme: NbThemeService) {
-
-    combineLatest([
-      this.ecMapService.getCords(),
-      this.theme.getJsTheme(),
-    ])
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(([cords, config]: [any, any]) => {
-        this.currentTheme = config.variables.countryOrders;
-        this.layers = [this.createGeoJsonLayer(cords)];
-        this.selectFeature(this.findFeatureLayerByCountryId(this.countryId));
-      });
-  }
-
-  mapReady(map: L.Map) {
-    map.addControl(L.control.zoom({position: 'bottomright'}));
-
-    // fix the map fully displaying, existing leaflet bag
-    setTimeout(() => {
-      map.invalidateSize();
-    }, 0);
-  }
-
-  private createGeoJsonLayer(cords) {
-    return L.geoJSON(
-      cords as any,
-      {
-        style: () => ({
-          weight: this.currentTheme.countryBorderWidth,
-          fillColor: this.currentTheme.countryFillColor,
-          fillOpacity: 1,
-          color: this.currentTheme.countryBorderColor,
-          opacity: 1,
-        }),
-        onEachFeature: (f, l) => {
-          this.onEachFeature(f, l);
-        },
-      });
-  }
-
-  private onEachFeature(feature, layer) {
-    layer.on({
-      mouseover: (e) => this.highlightFeature(e.target),
-      mouseout: (e) => this.moveout(e.target),
-      click: (e) => this.selectFeature(e.target),
-    });
-  }
-
-  private highlightFeature(featureLayer) {
-    if (featureLayer) {
-      featureLayer.setStyle({
-        weight: this.currentTheme.hoveredCountryBorderWidth,
-        fillColor: this.currentTheme.hoveredCountryFillColor,
-        color: this.currentTheme.hoveredCountryBorderColor,
-      });
-
-      if (!L.Browser.ie && !L.Browser.opera12 && !L.Browser.edge) {
-        featureLayer.bringToFront();
-      }
-    }
-  }
-
-  private moveout(featureLayer) {
-    if (featureLayer !== this.selectedCountry) {
-      this.resetHighlight(featureLayer);
-
-      // When countries have common border we should highlight selected country once again
-      this.highlightFeature(this.selectedCountry);
-    }
-  }
-
-  private resetHighlight(featureLayer) {
-    if (featureLayer) {
-      const geoJsonLayer = this.layers[0];
-
-      geoJsonLayer.resetStyle(featureLayer);
-    }
-  }
-
-  private selectFeature(featureLayer) {
-    if (featureLayer !== this.selectedCountry) {
-      this.resetHighlight(this.selectedCountry);
-      this.highlightFeature(featureLayer);
-      this.selectedCountry = featureLayer;
-      this.select.emit(featureLayer.feature.properties.name);
-    }
-  }
-
-  private findFeatureLayerByCountryId(id) {
-    const layers = this.layers[0].getLayers();
-    const featureLayer = layers.find(item => {
-      return item.feature.id === id;
-    });
-
-    return featureLayer ? featureLayer : null;
-  }
-
-  ngOnDestroy(): void {
-    this.alive = false;
-  }
-
-}

src/frontend/src/app/demo_pages/e-commerce/country-orders/map/country-orders-map.service.ts

@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-
-@Injectable()
-export class CountryOrdersMapService {
-
-  constructor(private http: HttpClient) {}
-
-  getCords(): Observable<any> {
-    return this.http.get('assets/leaflet-countries/countries.geo.json');
-  }
-
-}

src/frontend/src/app/demo_pages/e-commerce/e-commerce.component.html

@@ -1,38 +0,0 @@
-<div class="row">
-  <div class="col-xxl-5">
-    <div class="row">
-      <div class="col-md-6">
-        <ngx-profit-card></ngx-profit-card>
-      </div>
-      <div class="col-md-6">
-        <ngx-earning-card></ngx-earning-card>
-      </div>
-    </div>
-
-    <ngx-traffic-reveal-card></ngx-traffic-reveal-card>
-  </div>
-
-  <div class="col-xxl-7">
-    <ngx-ecommerce-charts></ngx-ecommerce-charts>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-xxl-9">
-    <ngx-country-orders></ngx-country-orders>
-  </div>
-
-  <div class="col-xxl-3">
-    <ngx-progress-section></ngx-progress-section>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-xxl-9">
-    <ngx-ecommerce-visitors-analytics></ngx-ecommerce-visitors-analytics>
-  </div>
-
-  <div class="col-xxl-3">
-    <ngx-user-activity></ngx-user-activity>
-  </div>
-</div>

src/frontend/src/app/demo_pages/e-commerce/e-commerce.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-ecommerce',
-  templateUrl: './e-commerce.component.html',
-})
-export class ECommerceComponent {
-}