feat: update to Angular 8, Nebular 4 (#2114)

src/app/pages/charts/chartjs/chartjs.component.scss

@@ -11,7 +11,7 @@
     height: nb-theme(card-height-medium);
     width: 100%;
 
-    /deep/ chart {
+    ::ng-deep chart {
       display: block;
       height: 100%;
       width: 100%;

src/app/pages/charts/charts.module.ts

@@ -2,6 +2,7 @@ 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';
 
@@ -49,7 +50,14 @@ const components = [
 ];
 
 @NgModule({
-  imports: [ThemeModule, ChartsRoutingModule, NgxEchartsModule, NgxChartsModule, ChartModule],
+  imports: [
+    ThemeModule,
+    ChartsRoutingModule,
+    NgxEchartsModule,
+    NgxChartsModule,
+    ChartModule,
+    NbCardModule,
+  ],
   declarations: [...routedComponents, ...components],
 })
 export class ChartsModule {}

src/app/pages/charts/d3/d3.component.scss

@@ -11,30 +11,36 @@
     width: 100%;
     height: nb-theme(card-height-medium);
 
-    /deep/ {
+    ::ng-deep {
       .pie-label {
-        fill: nb-theme(color-fg-heading);
-      }
-
-      .grid-line-path {
-        stroke: nb-theme(separator);
+        fill: nb-theme(text-basic-color);
       }
 
       text {
-        fill: nb-theme(color-fg-heading);
+        fill: nb-theme(text-hint-color);
       }
 
       .chart-legend {
         .legend-labels {
-          background: nb-theme(color-bg);
+          background: nb-theme(background-basic-color-2);
         }
         .legend-label {
-          color: nb-theme(color-fg-heading);
+          color: nb-theme(text-hint-color);
           .active .legend-label-text {
-            color: nb-theme(color-fg-heading);
+            color: nb-theme(text-basic-color);
           }
         }
       }
+
+      .total-value,
+      .item-value,
+      .item-percent {
+        line-height: 1.25;
+      }
+
+      .legend-items {
+        overflow-y: hidden;
+      }
     }
   }
 }

src/app/pages/charts/echarts/echarts.component.scss

@@ -13,7 +13,7 @@
     width: 100%;
   }
 
-  /deep/ .echart {
+  ::ng-deep .echart {
     height: 100%;
     width: 100%;
   }