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

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,48 +1,54 @@
-import { delay } from 'rxjs/operators';
+import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-
+import { LayoutService } from '../../../../@core/data/layout.service';
-declare const echarts: any;
 
 @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 => {
+    this.theme.getJsTheme()
+      .pipe(
+        takeWhile(() => this.alive),
+        delay(1),
+      )
+      .subscribe(config => {
         const eTheme: any = config.variables.electricity;
 
         this.option = {
@@ -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;
   }
 }

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

@@ -1,8 +1,7 @@
-import { delay } from 'rxjs/operators';
+import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-
+import { LayoutService } from '../../../@core/data/layout.service';
-declare const echarts: any;
 
 const points = [300, 520, 435, 530, 730, 620, 660, 860];
 
@@ -10,22 +9,38 @@ const points = [300, 520, 435, 530, 730, 620, 660, 860];
   selector: 'ngx-traffic-chart',
   styleUrls: ['./traffic.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class TrafficChartComponent implements AfterViewInit, OnDestroy {
 
+  private alive = true;
+
   type = 'month';
   types = ['week', 'month', 'year'];
   option: any = {};
-  themeSubscription: any;
+  echartsIntance: any;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
+    this.theme.getJsTheme()
-
+      .pipe(
+        delay(1),
+        takeWhile(() => this.alive),
+      )
+      .subscribe(config => {
         const trafficTheme: any = config.variables.traffic;
 
         this.option = Object.assign({}, {
@@ -145,7 +160,17 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  onChartInit(echarts) {
+    this.echartsIntance = echarts;
+  }
+
+  resizeChart() {
+    if (this.echartsIntance) {
+      this.echartsIntance.resize();
+    }
+  }
+
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 }

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

@@ -3,12 +3,17 @@ import { NbThemeService } from '@nebular/theme';
 import { delay, takeWhile } from 'rxjs/operators';
 
 import { OrdersChart } from '../../../../@core/data/orders-chart.service';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-orders-chart',
   styleUrls: ['./charts-common.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart" (chartInit)="onChartInit($event)"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
@@ -27,7 +32,13 @@ export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges
     }
   }
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit(): void {

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

@@ -3,6 +3,7 @@ import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 
 import { ProfitChart } from '../../../../@core/data/profit-chart.service';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-profit-chart',
@@ -21,7 +22,13 @@ export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges
   echartsIntance: any;
   options: any = {};
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngOnChanges(): void {

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

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 
 @Component({
@@ -11,7 +12,11 @@ import { takeWhile } from 'rxjs/operators';
       <span class="title">Selected Country</span>
       <h2>{{countryName}}</h2>
     </div>
-    <div echarts [options]="option" class="echart" (chartInit)="onChartInit($event)"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
@@ -26,7 +31,13 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
   option: any = {};
   echartsInstance;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -157,6 +168,12 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
     this.echartsInstance = ec;
   }
 
+  resizeChart() {
+    if (this.echartsInstance) {
+      this.echartsInstance.resize();
+    }
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }

src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts

@@ -1,6 +1,7 @@
 import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-earning-live-update-chart',
@@ -20,7 +21,13 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
   option: any;
   echartsInstance;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngOnChanges(): void {
@@ -29,10 +36,6 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
     }
   }
 
-  onChartInit(ec) {
-    this.echartsInstance = ec;
-  }
-
   ngAfterViewInit() {
     this.theme.getJsTheme()
       .pipe(
@@ -145,6 +148,16 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
     });
   }
 
+  onChartInit(ec) {
+    this.echartsInstance = ec;
+  }
+
+  resizeChart() {
+    if (this.echartsInstance) {
+      this.echartsInstance.resize();
+    }
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }

src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts

@@ -1,6 +1,7 @@
 import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 const points = [300, 520, 435, 530, 730, 620, 660, 860];
 
@@ -8,16 +9,26 @@ const points = [300, 520, 435, 530, 730, 620, 660, 860];
   selector: 'ngx-stats-ares-chart',
   styleUrls: ['stats-card-back.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart"></div>
+    <div echarts [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
 
   private alive = true;
 
+  echartsIntance: any;
   option: any = {};
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit() {
@@ -146,6 +157,16 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  onChartInit(echarts) {
+    this.echartsIntance = echarts;
+  }
+
+  resizeChart() {
+    if (this.echartsIntance) {
+      this.echartsIntance.resize();
+    }
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }

src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts

@@ -1,11 +1,16 @@
 import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-stats-bar-animation-chart',
   template: `
-    <div echarts [options]="options" class="echart"></div>
+    <div echarts
+         [options]="options"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy {
@@ -17,9 +22,16 @@ export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy
     secondLine: [],
   };
 
+  echartsIntance: any;
   options: any = {};
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit() {
@@ -125,6 +137,16 @@ export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy
     };
   }
 
+  onChartInit(echarts) {
+    this.echartsIntance = echarts;
+  }
+
+  resizeChart() {
+    if (this.echartsIntance) {
+      this.echartsIntance.resize();
+    }
+  }
+
   ngOnDestroy(): void {
     this.alive = false;
   }

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 declare const echarts: any;
 
@@ -8,7 +9,11 @@ declare const echarts: any;
   selector: 'ngx-traffic-bar-chart',
   styleUrls: ['traffic-back-card.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart" (chartInit)="onChartInit($event)"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnChanges {
@@ -20,15 +25,27 @@ export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnCha
   private alive = true;
 
   option: any = {};
-  echartsInstance;
+  echartsInstance: any;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   onChartInit(ec) {
     this.echartsInstance = ec;
   }
 
+  resizeChart() {
+    if (this.echartsInstance) {
+      this.echartsInstance.resize();
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (!changes.data.isFirstChange() && !changes.labels.isFirstChange()) {
       this.echartsInstance.setOption({

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss

@@ -28,7 +28,7 @@
     font-size: 1.25rem;
     position: relative;
     color: nb-theme(color-fg);
-    padding: nb-theme(card-padding);
+    padding: 1rem nb-theme(card-padding);
     border-bottom:
       nb-theme(list-item-border-width)
       nb-theme(card-header-border-type)

src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts

@@ -1,12 +1,17 @@
 import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 @Component({
   selector: 'ngx-visitors-analytics-chart',
   styleUrls: ['./visitors-analytics-chart.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)">
+    </div>
   `,
 })
 export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit, OnDestroy {
@@ -36,8 +41,10 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
   option: any;
   data: Array<any>;
   themeSubscription: any;
+  echartsIntance: any;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
     const outerLinePointsLength = this.outerLinePoints.length;
     const monthsLength = this.months.length;
 
@@ -52,6 +59,12 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
         value: p,
       };
     });
+
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit(): void {
@@ -235,6 +248,16 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
     };
   }
 
+  onChartInit(echarts) {
+    this.echartsIntance = echarts;
+  }
+
+  resizeChart() {
+    if (this.echartsIntance) {
+      this.echartsIntance.resize();
+    }
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }

src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html

@@ -4,7 +4,12 @@
     <div class="visitors-title">New Visitors</div>
   </div>
   <div class="statistics-chart">
-    <div echarts [options]="option" class="echart"></div>
+    <div echarts
+         [options]="option"
+         class="echart"
+         (chartInit)="onChartInit($event)"
+    >
+    </div>
   </div>
   <div class="statistics-footer">
     <div class="chart-values">

src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { delay, takeWhile } from 'rxjs/operators';
+import { LayoutService } from '../../../../@core/data/layout.service';
 
 
 @Component({
@@ -15,8 +16,15 @@ export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDe
 
   option: any = {};
   chartLegend: {iconColor: string; title: string}[];
+  echartsIntance: any;
 
-  constructor(private theme: NbThemeService) {
+  constructor(private theme: NbThemeService,
+              private layoutService: LayoutService) {
+    this.layoutService.onChangeLayoutSize()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(() => this.resizeChart());
   }
 
   ngAfterViewInit() {
@@ -190,6 +198,16 @@ export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDe
     };
   }
 
+  onChartInit(echarts) {
+    this.echartsIntance = echarts;
+  }
+
+  resizeChart() {
+    if (this.echartsIntance) {
+      this.echartsIntance.resize();
+    }
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }