fix(chart): resize chart on sidebar expand/collapse (#1816)

Author: denStrigo

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

@@ -15,6 +15,7 @@ import { EarningService } from './earning.service';
 import { OrdersProfitChartService } from './orders-profit-chart.service';
 import { TrafficBarService } from './traffic-bar.service';
 import { ProfitBarAnimationChartService } from './profit-bar-animation-chart.service';
+import { LayoutService } from './layout.service';
 
 const SERVICES = [
   UserService,
@@ -31,6 +32,7 @@ const SERVICES = [
   OrdersProfitChartService,
   TrafficBarService,
   ProfitBarAnimationChartService,
+  LayoutService,
 ];
 
 @NgModule({

src/app/@core/data/layout.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { delay, share } from 'rxjs/operators';
+
+@Injectable()
+export class LayoutService {
+
+  protected layoutSize$ = new Subject();
+
+  changeLayoutSize() {
+    this.layoutSize$.next();
+  }
+
+  onChangeLayoutSize(): Observable<any> {
+    return this.layoutSize$.pipe(
+      share(),
+      delay(1),
+    );
+  }
+}

src/app/@theme/components/header/header.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NbMenuService, NbSidebarService } from '@nebular/theme';
 import { UserService } from '../../../@core/data/users.service';
 import { AnalyticsService } from '../../../@core/utils/analytics.service';
+import { LayoutService } from '../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-header',
@@ -11,7 +12,6 @@ import { AnalyticsService } from '../../../@core/utils/analytics.service';
 })
 export class HeaderComponent implements OnInit {
 
-
   @Input() position = 'normal';
 
   user: any;
@@ -21,7 +21,8 @@ export class HeaderComponent implements OnInit {
   constructor(private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
               private userService: UserService,
-              private analyticsService: AnalyticsService) {
+              private analyticsService: AnalyticsService,
+              private layoutService: LayoutService) {
   }
 
   ngOnInit() {
@@ -31,11 +32,14 @@ export class HeaderComponent implements OnInit {
 
   toggleSidebar(): boolean {
     this.sidebarService.toggle(true, 'menu-sidebar');
+    this.layoutService.changeLayoutSize();
+
     return false;
   }
 
   toggleSettings(): boolean {
     this.sidebarService.toggle(false, 'settings-sidebar');
+
     return false;
   }
 

src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -1,51 +1,57 @@
-import { delay } from 'rxjs/operators';
+import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-
-declare const echarts: any;
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-electricity-chart',
   styleUrls: ['./electricity-chart.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
 
+  private alive = true;
+
   option: any;
   data: Array<any>;
-  themeSubscription: any;
+  echartsIntance: any;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
 
     const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
       720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,
       145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
       340, 340, 340, 340, 340, 340, 340, 340];
 
-    // const points = [];
-    // let pointsCount = 100;
-    // let min = -3;
-    // let max = 3;
-    // let xStep = (max - min) / pointsCount;
-    //
-    // for(let x = -3; x <= 3; x += xStep) {
-    //   let res = x**3 - 5*x + 17;
-    //   points.push(Math.round(res * 25));
-    // }
-
     this.data = points.map((p, index) => ({
       label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
       value: p,
     }));
+
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit(): void {
-    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
-      const eTheme: any = config.variables.electricity;
+    this.theme.getJsTheme()
+      .pipe(
+        takeWhile(() => this.alive),
+        delay(1),
+      )
+      .subscribe(config => {
+        const eTheme: any = config.variables.electricity;
 
-      this.option = {
+        this.option = {
           grid: {
             left: 0,
             top: 0,
@@ -184,7 +190,17 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  onChartInit(echarts) {
+    this.echartsIntance = echarts;
+  }
+
+  resizeChart() {
+    if (this.echartsIntance) {
+      this.echartsIntance.resize();
+    }
+  }
+
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 }