fix(charts): unsubscribe when destroy component

src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,12 +7,13 @@ import { NbThemeService } from '@nebular/theme';
     <chart type="horizontalBar" [data]="data" [options]="options"></chart>
   `,
 })
-export class ChartjsBarHorizontalComponent {
+export class ChartjsBarHorizontalComponent implements OnDestroy {
   data: any;
   options: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
@@ -74,6 +75,10 @@ export class ChartjsBarHorizontalComponent {
     });
   }
 
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+
   private random() {
     return Math.round(Math.random() * 100);
   }

src/app/pages/charts/chartjs/chartjs-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService, NbColorHelper } from '@nebular/theme';
 
 @Component({
@@ -7,12 +7,13 @@ import { NbThemeService, NbColorHelper } from '@nebular/theme';
     <chart type="bar" [data]="data" [options]="options"></chart>
   `,
 })
-export class ChartjsBarComponent {
+export class ChartjsBarComponent implements OnDestroy {
   data: any;
   options: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
@@ -65,4 +66,8 @@ export class ChartjsBarComponent {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/chartjs/chartjs-line.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService, NbColorHelper } from '@nebular/theme';
 
 @Component({
@@ -7,12 +7,13 @@ import { NbThemeService, NbColorHelper } from '@nebular/theme';
     <chart type="line" [data]="data" [options]="options"></chart>
   `,
 })
-export class ChartjsLineComponent {
+export class ChartjsLineComponent implements OnDestroy {
   data: any;
   options: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
@@ -73,4 +74,8 @@ export class ChartjsLineComponent {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,12 +7,13 @@ import { NbThemeService } from '@nebular/theme';
     <chart type="line" [data]="data" [options]="options"></chart>
   `,
 })
-export class ChartjsMultipleXaxisComponent {
+export class ChartjsMultipleXaxisComponent implements OnDestroy {
   data: {};
   options: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
@@ -106,6 +107,10 @@ export class ChartjsMultipleXaxisComponent {
     });
   }
 
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+
   private random() {
     return Math.round(Math.random() * 100);
   }

src/app/pages/charts/chartjs/chartjs-pie.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,12 +7,13 @@ import { NbThemeService } from '@nebular/theme';
     <chart type="pie" [data]="data" [options]="options"></chart>
   `,
 })
-export class ChartjsPieComponent {
+export class ChartjsPieComponent implements OnDestroy {
   data: any;
   options: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
@@ -54,4 +55,8 @@ export class ChartjsPieComponent {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/chartjs/chartjs-radar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService, NbColorHelper } from '@nebular/theme';
 
 @Component({
@@ -7,12 +7,13 @@ import { NbThemeService, NbColorHelper } from '@nebular/theme';
     <chart type="radar" [data]="data" [options]="options"></chart>
   `,
 })
-export class ChartjsRadarComponent {
+export class ChartjsRadarComponent implements OnDestroy {
   options: any;
   data: {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const chartjs: any = config.variables.chartjs;
@@ -56,4 +57,8 @@ export class ChartjsRadarComponent {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/d3/d3-advanced-pie.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -10,7 +10,7 @@ import { NbThemeService } from '@nebular/theme';
     </ngx-charts-advanced-pie-chart>
   `,
 })
-export class D3AdvancedPieComponent {
+export class D3AdvancedPieComponent implements OnDestroy {
   single = [
     {
       name: 'Germany',
@@ -26,13 +26,18 @@ export class D3AdvancedPieComponent {
     },
   ];
   colorScheme: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    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/app/pages/charts/d3/d3-area-stack.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -18,7 +18,7 @@ import { NbThemeService } from '@nebular/theme';
     </ngx-charts-area-chart>
   `,
 })
-export class D3AreaStackComponent {
+export class D3AreaStackComponent implements OnDestroy {
   multi = [{
     name: 'Germany',
     series: [{
@@ -56,13 +56,18 @@ export class D3AreaStackComponent {
   xAxisLabel = 'Country';
   yAxisLabel = 'Population';
   colorScheme: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    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/app/pages/charts/d3/d3-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -15,7 +15,7 @@ import { NbThemeService } from '@nebular/theme';
     </ngx-charts-bar-vertical>
   `,
 })
-export class D3BarComponent {
+export class D3BarComponent implements OnDestroy {
 
   results = [
     { name: 'Germany', value: 8940 },
@@ -28,13 +28,18 @@ export class D3BarComponent {
   xAxisLabel = 'Country';
   yAxisLabel = 'Population';
   colorScheme: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    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/app/pages/charts/d3/d3-line.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -17,7 +17,7 @@ import { NbThemeService } from '@nebular/theme';
     </ngx-charts-line-chart>
   `,
 })
-export class D3LineComponent {
+export class D3LineComponent implements OnDestroy {
   multi = [
     {
       name: 'Germany',
@@ -67,13 +67,18 @@ export class D3LineComponent {
   showYAxisLabel = true;
   yAxisLabel = 'Population';
   colorScheme: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    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/app/pages/charts/d3/d3-pie.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -12,7 +12,7 @@ import { NbThemeService } from '@nebular/theme';
     </ngx-charts-pie-chart>
   `,
 })
-export class D3PieComponent {
+export class D3PieComponent implements OnDestroy {
   results = [
     { name: 'Germany', value: 8940 },
     { name: 'USA', value: 5000 },
@@ -21,13 +21,18 @@ export class D3PieComponent {
   showLegend = true;
   showLabels = true;
   colorScheme: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    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/app/pages/charts/d3/d3-polar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -18,7 +18,7 @@ import { NbThemeService } from '@nebular/theme';
     </ngx-charts-polar-chart>
   `,
 })
-export class D3PolarComponent {
+export class D3PolarComponent implements OnDestroy {
   multi = [
     {
       name: 'Germany',
@@ -81,13 +81,18 @@ export class D3PolarComponent {
   xAxisLabel = 'Country';
   yAxisLabel = 'Population';
   colorScheme: any;
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
+    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/app/pages/charts/echarts/echarts-area-stack.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsAreaStackComponent implements AfterViewInit {
+export class EchartsAreaStackComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const echarts: any = config.variables.echarts;
@@ -132,4 +133,8 @@ export class EchartsAreaStackComponent implements AfterViewInit {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/echarts/echarts-bar-animation.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsBarAnimationComponent implements AfterViewInit {
+export class EchartsBarAnimationComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
       const xAxisData = [];
       const data1 = [];
       const data2 = [];
@@ -101,4 +102,8 @@ export class EchartsBarAnimationComponent implements AfterViewInit {
       }
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/echarts/echarts-bar.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsBarComponent implements AfterViewInit {
+export class EchartsBarComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const echarts: any = config.variables.echarts;
@@ -84,4 +85,8 @@ export class EchartsBarComponent implements AfterViewInit {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/echarts/echarts-line.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsLineComponent implements AfterViewInit {
+export class EchartsLineComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const echarts: any = config.variables.echarts;
@@ -98,4 +99,8 @@ export class EchartsLineComponent implements AfterViewInit {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsMultipleXaxisComponent implements AfterViewInit {
+export class EchartsMultipleXaxisComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const echarts: any = config.variables.echarts;
@@ -158,4 +159,8 @@ export class EchartsMultipleXaxisComponent implements AfterViewInit {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/echarts/echarts-pie.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsPieComponent implements AfterViewInit {
+export class EchartsPieComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors = config.variables;
       const echarts: any = config.variables.echarts;
@@ -73,4 +74,8 @@ export class EchartsPieComponent implements AfterViewInit {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }

src/app/pages/charts/echarts/echarts-radar.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -7,14 +7,15 @@ import { NbThemeService } from '@nebular/theme';
     <div echarts [options]="options" class="echart"></div>
   `,
 })
-export class EchartsRadarComponent implements AfterViewInit {
+export class EchartsRadarComponent implements AfterViewInit, OnDestroy {
   options: any = {};
+  themeSubscription: any;
 
   constructor(private theme: NbThemeService) {
   }
 
   ngAfterViewInit() {
-    this.theme.getJsTheme().subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
       const colors: any = config.variables;
       const echarts: any = config.variables.echarts;
@@ -68,4 +69,8 @@ export class EchartsRadarComponent implements AfterViewInit {
       };
     });
   }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
 }