Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Denis Strigo 2018-08-09 15:24:44 +03:00 • committed by Dmitry Nehaychik
parent f20c371c17
commit aa8e7cdf27
16 changed files with 393 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/@core/data/data.module.ts
View file

@ -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({

20
src/app/@core/data/layout.service.ts Normal file
View file

@ -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),
);
}
}

8
src/app/@theme/components/header/header.component.ts
View file

@ -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;
}

58
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -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;
}
}

267
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -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';
declare const echarts: any;
import { LayoutService } from '../../../@core/data/layout.service';
const points = [300, 520, 435, 530, 730, 620, 660, 860];
@ -10,142 +9,168 @@ 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;
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: points,
},
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
this.option = Object.assign({}, {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: trafficTheme.colorBlack,
opacity: 0.06,
width: '1',
},
},
},
tooltip: {
axisPointer: {
type: 'shadow',
},
textStyle: {
color: trafficTheme.tooltipTextColor,
fontWeight: trafficTheme.tooltipFontWeight,
fontSize: 16,
},
position: 'top',
backgroundColor: trafficTheme.tooltipBg,
borderColor: trafficTheme.tooltipBorderColor,
borderWidth: 3,
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: 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,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: points,
},
],
});
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: trafficTheme.colorBlack,
opacity: 0.06,
width: '1',
},
},
},
tooltip: {
axisPointer: {
type: 'shadow',
},
textStyle: {
color: trafficTheme.tooltipTextColor,
fontWeight: trafficTheme.tooltipFontWeight,
fontSize: 16,
},
position: 'top',
backgroundColor: trafficTheme.tooltipBg,
borderColor: trafficTheme.tooltipBorderColor,
borderWidth: 3,
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: 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: points,
},
],
});
});
}
onChartInit(echarts) {
this.echartsIntance = echarts;
}
resizeChart() {
if (this.echartsIntance) {
this.echartsIntance.resize();
}
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.alive = false;
}
}

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

@ -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 {

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

@ -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 {

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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({

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

@ -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)

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

@ -1,24 +1,29 @@
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 {
private alive = true;
private innerLinePoints: number[] = [
94, 188, 225, 244, 253, 254, 249, 235, 208,
173, 141, 118, 105, 97, 94, 96, 104, 121, 147,
183, 224, 265, 302, 333, 358, 375, 388, 395,
400, 400, 397, 390, 377, 360, 338, 310, 278,
241, 204, 166, 130, 98, 71, 49, 32, 20, 13, 9,
];
94, 188, 225, 244, 253, 254, 249, 235, 208,
173, 141, 118, 105, 97, 94, 96, 104, 121, 147,
183, 224, 265, 302, 333, 358, 375, 388, 395,
400, 400, 397, 390, 377, 360, 338, 310, 278,
241, 204, 166, 130, 98, 71, 49, 32, 20, 13, 9,
];
private outerLinePoints: number[] = [
85, 71, 59, 50, 45, 42, 41, 44 , 58, 88,
136 , 199, 267, 326, 367, 391, 400, 397,
@ -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;
}

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

@ -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">

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

@ -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;
}