diff --git a/src/app/@core/data/data.module.ts b/src/app/@core/data/data.module.ts index e617712e..88eca356 100644 --- a/src/app/@core/data/data.module.ts +++ b/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({ diff --git a/src/app/@core/data/layout.service.ts b/src/app/@core/data/layout.service.ts new file mode 100644 index 00000000..6854fd32 --- /dev/null +++ b/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 { + return this.layoutSize$.pipe( + share(), + delay(1), + ); + } +} diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index 3b580a9d..6686221b 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/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; } diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts index 5a4a8082..1f2ac96a 100644 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ b/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: ` -
+
+
`, }) export class ElectricityChartComponent implements AfterViewInit, OnDestroy { + private alive = true; + option: any; data: Array; - 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; } } diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts index cc9aa624..c0bfa9f5 100644 --- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts +++ b/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'; - -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: ` -
+
+
`, }) 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; } } diff --git a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts b/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts index 1fe34063..d5fca982 100644 --- a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts +++ b/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: ` -
+
+
`, }) 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 { diff --git a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts b/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts index 5ff1b0e8..4d8ba299 100644 --- a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts +++ b/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 { diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts index 05773c1f..cdf6d60e 100644 --- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts +++ b/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'; Selected Country

{{countryName}}

-
+
+
`, }) 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; } diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts b/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts index 4d820e55..28267c33 100644 --- a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts +++ b/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; } diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts b/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts index bca1813e..6ec7e4a4 100644 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts +++ b/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: ` -
+
+
`, }) 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; } diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts b/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts index 89ebdf05..a78d305f 100644 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts +++ b/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: ` -
+
+
`, }) 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; } diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts index dd99aa23..51c5b317 100644 --- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts +++ b/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: ` -
+
+
`, }) 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({ diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss index 6c9bf8d8..c27753e7 100644 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss +++ b/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) diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts index f00bf964..25e9f766 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts @@ -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: ` -
+
+
`, }) 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; 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; } diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html index cd7e6d97..d148c099 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html @@ -4,7 +4,12 @@
New Visitors
-
+
+
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts index 95eb4105..80de7870 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts +++ b/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; }