mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
fix: replace change layout with safe change
This commit is contained in:
sashaqred
Maksim Karatkevich
parent
448229bd7f
commit
0232d5edd6
11 changed files with 2147 additions and 0 deletions
|
|
@ -0,0 +1,197 @@
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { LayoutService } from '../../../../@core/utils';
|
||||||
|
import { ElectricityChart } from '../../../../@core/data/electricity';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-electricity-chart',
|
||||||
|
styleUrls: ['./electricity-chart.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
[options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() data: ElectricityChart[];
|
||||||
|
|
||||||
|
option: any;
|
||||||
|
echartsIntance: any;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
delay(1),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
const eTheme: any = config.variables.electricity;
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 80,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.tooltipLineColor,
|
||||||
|
width: eTheme.tooltipLineWidth,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: eTheme.tooltipTextColor,
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: eTheme.tooltipFontWeight,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: eTheme.tooltipBg,
|
||||||
|
borderColor: eTheme.tooltipBorderColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
formatter: '{c0} kWh',
|
||||||
|
extraCssText: eTheme.tooltipExtraCss,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
offset: 25,
|
||||||
|
data: this.data.map(i => i.label),
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.xAxisTextColor,
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
width: '2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
boundaryGap: [0, '5%'],
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.yAxisSplitLine,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 20,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: '#ffffff',
|
||||||
|
borderColor: eTheme.itemBorderColor,
|
||||||
|
borderWidth: 2,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: eTheme.lineWidth,
|
||||||
|
type: eTheme.lineStyle,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.lineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.lineGradTo,
|
||||||
|
}]),
|
||||||
|
shadowColor: eTheme.lineShadow,
|
||||||
|
shadowBlur: 6,
|
||||||
|
shadowOffsetY: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.areaGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.areaGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.data.map(i => i.value),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'none',
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: eTheme.lineWidth,
|
||||||
|
type: eTheme.lineStyle,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.lineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.lineGradTo,
|
||||||
|
}]),
|
||||||
|
shadowColor: eTheme.shadowLineDarkBg,
|
||||||
|
shadowBlur: 14,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.data.map(i => i.value),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
174
src/app/pages/dashboard/traffic/traffic-chart.component.ts
Normal file
174
src/app/pages/dashboard/traffic/traffic-chart.component.ts
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { LayoutService } from '../../../@core/utils';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-traffic-chart',
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
[options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class TrafficChartComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() points: number[];
|
||||||
|
|
||||||
|
type = 'month';
|
||||||
|
types = ['week', 'month', 'year'];
|
||||||
|
option: any = {};
|
||||||
|
echartsIntance: any;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
delay(1),
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
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: this.points,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
boundaryGap: [0, '5%'],
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: trafficTheme.yAxisSplitLine,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: trafficTheme.tooltipTextColor,
|
||||||
|
fontWeight: trafficTheme.tooltipFontWeight,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: trafficTheme.tooltipBg,
|
||||||
|
borderColor: trafficTheme.tooltipBorderColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
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: this.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: this.points,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,307 @@
|
||||||
|
import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { OrdersChart } from '../../../../@core/data/orders-chart';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-orders-chart',
|
||||||
|
styleUrls: ['./charts-common.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
[options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
ordersChartData: OrdersChart;
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
echartsIntance: any;
|
||||||
|
option: any;
|
||||||
|
|
||||||
|
ngOnChanges(): void {
|
||||||
|
if (this.option) {
|
||||||
|
this.updateOrdersChartOptions(this.ordersChartData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
delay(1),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
const eTheme: any = config.variables.orders;
|
||||||
|
|
||||||
|
this.setOptions(eTheme);
|
||||||
|
this.updateOrdersChartOptions(this.ordersChartData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(eTheme) {
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
left: 40,
|
||||||
|
top: 20,
|
||||||
|
right: 0,
|
||||||
|
bottom: 40,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.tooltipLineColor,
|
||||||
|
width: eTheme.tooltipLineWidth,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: eTheme.tooltipTextColor,
|
||||||
|
fontSize: eTheme.tooltipFontSize,
|
||||||
|
fontWeight: eTheme.tooltipFontWeight,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: eTheme.tooltipBg,
|
||||||
|
borderColor: eTheme.tooltipBorderColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
formatter: (params) => {
|
||||||
|
return Math.round(parseInt(params.value, 10));
|
||||||
|
},
|
||||||
|
extraCssText: eTheme.tooltipExtraCss,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
offset: 5,
|
||||||
|
data: [],
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.axisTextColor,
|
||||||
|
fontSize: eTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
width: '2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.axisTextColor,
|
||||||
|
fontSize: eTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.yAxisSplitLine,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
this.getFirstLine(eTheme),
|
||||||
|
this.getSecondLine(eTheme),
|
||||||
|
this.getThirdLine(eTheme),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getFirstLine(eTheme) {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 20,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.firstAreaGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.firstAreaGradTo,
|
||||||
|
}]),
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getSecondLine(eTheme) {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 20,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: '#ffffff',
|
||||||
|
borderColor: eTheme.itemBorderColor,
|
||||||
|
borderWidth: 2,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: eTheme.lineWidth,
|
||||||
|
type: eTheme.lineStyle,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.secondLineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.secondLineGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.secondAreaGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.secondAreaGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getThirdLine(eTheme) {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 20,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: '#ffffff',
|
||||||
|
borderColor: eTheme.itemBorderColor,
|
||||||
|
borderWidth: 2,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: eTheme.lineWidth,
|
||||||
|
type: eTheme.lineStyle,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.thirdLineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.thirdLineGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.thirdAreaGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.thirdAreaGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateOrdersChartOptions(ordersChartData: OrdersChart) {
|
||||||
|
const options = this.option;
|
||||||
|
const series = this.getNewSeries(options.series, ordersChartData.linesData);
|
||||||
|
const xAxis = this.getNewXAxis(options.xAxis, ordersChartData.chartLabel);
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
...options,
|
||||||
|
xAxis,
|
||||||
|
series,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getNewSeries(series, linesData: number[][]) {
|
||||||
|
return series.map((line, index) => {
|
||||||
|
return {
|
||||||
|
...line,
|
||||||
|
data: linesData[index],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getNewXAxis(xAxis, chartLabel: string[]) {
|
||||||
|
return {
|
||||||
|
...xAxis,
|
||||||
|
data: chartLabel,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
// Fix recalculation chart size
|
||||||
|
// TODO: investigate more deeply
|
||||||
|
setTimeout(() => {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { takeWhile } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { ProfitChart } from '../../../../@core/data/profit-chart';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-profit-chart',
|
||||||
|
styleUrls: ['./charts-common.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div echarts [options]="options" class="echart" (chartInit)="onChartInit($event)"></div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges {
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
profitChartData: ProfitChart;
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
echartsIntance: any;
|
||||||
|
options: any = {};
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(): void {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.updateProfitChartOptions(this.profitChartData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(takeWhile(() => this.alive))
|
||||||
|
.subscribe(config => {
|
||||||
|
const eTheme: any = config.variables.profit;
|
||||||
|
|
||||||
|
this.setOptions(eTheme);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(eTheme) {
|
||||||
|
this.options = {
|
||||||
|
backgroundColor: eTheme.bg,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: this.profitChartData.chartLabel,
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.axisTextColor,
|
||||||
|
fontSize: eTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.splitLineColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.axisTextColor,
|
||||||
|
fontSize: eTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Canceled',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 0,
|
||||||
|
barWidth: '20%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.firstLineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.firstLineGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.profitChartData.data[0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Payment',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.secondLineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.secondLineGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.profitChartData.data[1],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'All orders',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.thirdLineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.thirdLineGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.profitChartData.data[2],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateProfitChartOptions(profitChartData: ProfitChart) {
|
||||||
|
const options = this.options;
|
||||||
|
const series = this.getNewSeries(options.series, profitChartData.data);
|
||||||
|
|
||||||
|
this.echartsIntance.setOption({
|
||||||
|
series: series,
|
||||||
|
xAxis: {
|
||||||
|
data: this.profitChartData.chartLabel,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getNewSeries(series, data: number[][]) {
|
||||||
|
return series.map((line, index) => {
|
||||||
|
return {
|
||||||
|
...line,
|
||||||
|
data: data[index],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
// Fix recalculation chart size
|
||||||
|
// TODO: investigate more deeply
|
||||||
|
setTimeout(() => {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { takeWhile } from 'rxjs/operators';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-country-orders-chart',
|
||||||
|
styleUrls: ['./country-orders-chart.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div class="header">
|
||||||
|
<span class="caption">Selected Country/Region</span>
|
||||||
|
<h2 class="h4">{{ countryName }}</h2>
|
||||||
|
</div>
|
||||||
|
<div echarts
|
||||||
|
[options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
|
||||||
|
|
||||||
|
@Input() countryName: string;
|
||||||
|
@Input() data: number[];
|
||||||
|
@Input() maxValue: number;
|
||||||
|
@Input() labels: string[];
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
option: any = {};
|
||||||
|
echartsInstance;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes.data && !changes.data.isFirstChange()) {
|
||||||
|
this.echartsInstance.setOption({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: this.data.map(v => this.maxValue),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: this.data,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: this.data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(takeWhile(() => this.alive))
|
||||||
|
.subscribe(config => {
|
||||||
|
const countriesTheme: any = config.variables.countryOrders;
|
||||||
|
|
||||||
|
this.option = Object.assign({}, {
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '3%',
|
||||||
|
bottom: '3%',
|
||||||
|
top: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
axisLabel: {
|
||||||
|
color: countriesTheme.chartAxisTextColor,
|
||||||
|
fontSize: countriesTheme.chartAxisFontSize,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: countriesTheme.chartAxisLineColor,
|
||||||
|
width: '2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: countriesTheme.chartAxisSplitLine,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
data: this.labels,
|
||||||
|
axisLabel: {
|
||||||
|
color: countriesTheme.chartAxisTextColor,
|
||||||
|
fontSize: countriesTheme.chartAxisFontSize,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: countriesTheme.chartAxisLineColor,
|
||||||
|
width: '2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ // For shadow
|
||||||
|
type: 'bar',
|
||||||
|
data: this.data.map(v => this.maxValue),
|
||||||
|
cursor: 'default',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: countriesTheme.chartInnerLineColor,
|
||||||
|
},
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
barWidth: '40%',
|
||||||
|
barGap: '-100%',
|
||||||
|
barCategoryGap: '30%',
|
||||||
|
animation: false,
|
||||||
|
z: 1,
|
||||||
|
},
|
||||||
|
{ // For bottom line
|
||||||
|
type: 'bar',
|
||||||
|
data: this.data,
|
||||||
|
cursor: 'default',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: countriesTheme.chartLineBottomShadowColor,
|
||||||
|
},
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
barWidth: '40%',
|
||||||
|
barGap: '-100%',
|
||||||
|
barCategoryGap: '30%',
|
||||||
|
z: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '35%',
|
||||||
|
data: this.data,
|
||||||
|
cursor: 'default',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: countriesTheme.chartGradientFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: countriesTheme.chartGradientTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
z: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(ec) {
|
||||||
|
this.echartsInstance = ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsInstance) {
|
||||||
|
this.echartsInstance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-earning-live-update-chart',
|
||||||
|
styleUrls: ['earning-card-front.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
class="echart"
|
||||||
|
[options]="option"
|
||||||
|
(chartInit)="onChartInit($event)"></div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy, OnChanges {
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() liveUpdateChartData: { value: [string, number] }[];
|
||||||
|
|
||||||
|
option: any;
|
||||||
|
echartsInstance;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(): void {
|
||||||
|
if (this.option) {
|
||||||
|
this.updateChartOptions(this.liveUpdateChartData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
delay(1),
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
const earningLineTheme: any = config.variables.earningLine;
|
||||||
|
|
||||||
|
this.setChartOption(earningLineTheme);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setChartOption(earningLineTheme) {
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
boundaryGap: [0, '5%'],
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: earningLineTheme.tooltipTextColor,
|
||||||
|
fontWeight: earningLineTheme.tooltipFontWeight,
|
||||||
|
fontSize: earningLineTheme.tooltipFontSize,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: earningLineTheme.tooltipBg,
|
||||||
|
borderColor: earningLineTheme.tooltipBorderColor,
|
||||||
|
borderWidth: earningLineTheme.tooltipBorderWidth,
|
||||||
|
formatter: params => `$ ${Math.round(parseInt(params.value[1], 10))}`,
|
||||||
|
extraCssText: earningLineTheme.tooltipExtraCss,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'circle',
|
||||||
|
sampling: 'average',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: earningLineTheme.gradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: earningLineTheme.gradTo,
|
||||||
|
}]),
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.liveUpdateChartData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
animation: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateChartOptions(chartData: { value: [string, number] }[]) {
|
||||||
|
this.echartsInstance.setOption({
|
||||||
|
series: [{
|
||||||
|
data: chartData,
|
||||||
|
}],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(ec) {
|
||||||
|
this.echartsInstance = ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsInstance) {
|
||||||
|
this.echartsInstance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { LayoutService } from '../../../../@core/utils';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-stats-ares-chart',
|
||||||
|
styleUrls: ['stats-card-back.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div echarts [options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() points: number[];
|
||||||
|
|
||||||
|
echartsIntance: any;
|
||||||
|
option: any = {};
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
delay(1),
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
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: this.points,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
boundaryGap: [0, '5%'],
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: trafficTheme.yAxisSplitLine,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: trafficTheme.tooltipTextColor,
|
||||||
|
fontWeight: trafficTheme.tooltipFontWeight,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: trafficTheme.tooltipBg,
|
||||||
|
borderColor: trafficTheme.tooltipBorderColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
formatter: '$ {c0}',
|
||||||
|
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: this.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: this.points,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { takeWhile } from 'rxjs/operators';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-stats-bar-animation-chart',
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
[options]="options"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() linesData: { firstLine: number[]; secondLine: number[] } = {
|
||||||
|
firstLine: [],
|
||||||
|
secondLine: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
echartsIntance: any;
|
||||||
|
options: any = {};
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(takeWhile(() => this.alive))
|
||||||
|
.subscribe(config => {
|
||||||
|
const profitBarAnimationEchart: any = config.variables.profitBarAnimationEchart;
|
||||||
|
|
||||||
|
this.setChartOption(profitBarAnimationEchart);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setChartOption(chartVariables) {
|
||||||
|
this.options = {
|
||||||
|
color: [
|
||||||
|
chartVariables.firstAnimationBarColor,
|
||||||
|
chartVariables.secondAnimationBarColor,
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['transactions', 'orders'],
|
||||||
|
borderWidth: 0,
|
||||||
|
borderRadius: 0,
|
||||||
|
itemWidth: 15,
|
||||||
|
itemHeight: 15,
|
||||||
|
textStyle: {
|
||||||
|
color: chartVariables.textColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: chartVariables.tooltipTextColor,
|
||||||
|
fontWeight: chartVariables.tooltipFontWeight,
|
||||||
|
fontSize: chartVariables.tooltipFontSize,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: chartVariables.tooltipBg,
|
||||||
|
borderColor: chartVariables.tooltipBorderColor,
|
||||||
|
borderWidth: chartVariables.tooltipBorderWidth,
|
||||||
|
formatter: params => `$ ${Math.round(parseInt(params.value, 10))}`,
|
||||||
|
extraCssText: chartVariables.tooltipExtraCss,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
data: this.linesData.firstLine.map((_, index) => index),
|
||||||
|
silent: false,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: chartVariables.splitLineStyleColor,
|
||||||
|
opacity: chartVariables.splitLineStyleOpacity,
|
||||||
|
width: chartVariables.splitLineStyleWidth,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'transactions',
|
||||||
|
type: 'bar',
|
||||||
|
data: this.linesData.firstLine,
|
||||||
|
animationDelay: idx => idx * 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'orders',
|
||||||
|
type: 'bar',
|
||||||
|
data: this.linesData.secondLine,
|
||||||
|
animationDelay: idx => idx * 10 + 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
animationEasing: 'elasticOut',
|
||||||
|
animationDelayUpdate: idx => idx * 5,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { takeWhile } from 'rxjs/operators';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
declare const echarts: any;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-traffic-bar-chart',
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
[options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnChanges {
|
||||||
|
|
||||||
|
@Input() data: number[];
|
||||||
|
@Input() labels: string[];
|
||||||
|
@Input() formatter: string;
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
option: any = {};
|
||||||
|
echartsInstance: any;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.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({
|
||||||
|
series: [{
|
||||||
|
data: this.data,
|
||||||
|
}],
|
||||||
|
xAxis: {
|
||||||
|
data: this.labels,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: this.formatter,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(takeWhile(() => this.alive))
|
||||||
|
.subscribe(config => {
|
||||||
|
const trafficTheme: any = config.variables.trafficBarEchart;
|
||||||
|
|
||||||
|
this.option = Object.assign({}, {
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type : 'category',
|
||||||
|
data : this.labels,
|
||||||
|
axisLabel: {
|
||||||
|
color: trafficTheme.axisTextColor,
|
||||||
|
fontSize: trafficTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
boundaryGap: [0, '5%'],
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: trafficTheme.tooltipTextColor,
|
||||||
|
fontWeight: trafficTheme.tooltipFontWeight,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: trafficTheme.tooltipBg,
|
||||||
|
borderColor: trafficTheme.tooltipBorderColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
formatter: this.formatter,
|
||||||
|
extraCssText: trafficTheme.tooltipExtraCss,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '40%',
|
||||||
|
data: this.data,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: trafficTheme.gradientFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: trafficTheme.gradientTo,
|
||||||
|
}]),
|
||||||
|
opacity: 1,
|
||||||
|
shadowColor: trafficTheme.gradientFrom,
|
||||||
|
shadowBlur: trafficTheme.shadowBlur,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,234 @@
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { LayoutService } from '../../../../@core/utils';
|
||||||
|
import { OutlineData } from '../../../../@core/data/visitors-analytics';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-visitors-analytics-chart',
|
||||||
|
styleUrls: ['./visitors-analytics-chart.component.scss'],
|
||||||
|
template: `
|
||||||
|
<div echarts
|
||||||
|
[options]="option"
|
||||||
|
class="echart"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() chartData: {
|
||||||
|
innerLine: number[];
|
||||||
|
outerLine: OutlineData[];
|
||||||
|
};
|
||||||
|
|
||||||
|
option: any;
|
||||||
|
themeSubscription: any;
|
||||||
|
echartsIntance: any;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
delay(1),
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
const eTheme: any = config.variables.visitors;
|
||||||
|
|
||||||
|
this.setOptions(eTheme);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(eTheme) {
|
||||||
|
this.option = {
|
||||||
|
grid: {
|
||||||
|
left: 40,
|
||||||
|
top: 20,
|
||||||
|
right: 0,
|
||||||
|
bottom: 60,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.tooltipLineColor,
|
||||||
|
width: eTheme.tooltipLineWidth,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: eTheme.tooltipTextColor,
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: eTheme.tooltipFontWeight,
|
||||||
|
},
|
||||||
|
position: 'top',
|
||||||
|
backgroundColor: eTheme.tooltipBg,
|
||||||
|
borderColor: eTheme.tooltipBorderColor,
|
||||||
|
borderWidth: 1,
|
||||||
|
formatter: (params) => {
|
||||||
|
return Math.round(parseInt(params[0].value, 10));
|
||||||
|
},
|
||||||
|
extraCssText: eTheme.tooltipExtraCss,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
offset: 25,
|
||||||
|
data: this.chartData.outerLine.map(i => i.label),
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.axisTextColor,
|
||||||
|
fontSize: eTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
width: '2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.axisLineColor,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: eTheme.axisTextColor,
|
||||||
|
fontSize: eTheme.axisFontSize,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
|
||||||
|
lineStyle: {
|
||||||
|
color: eTheme.yAxisSplitLine,
|
||||||
|
width: '1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
this.getInnerLine(eTheme),
|
||||||
|
this.getOuterLine(eTheme),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getOuterLine(eTheme) {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 20,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: '#ffffff',
|
||||||
|
borderColor: eTheme.itemBorderColor,
|
||||||
|
borderWidth: 2,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: eTheme.lineWidth,
|
||||||
|
type: eTheme.lineStyle,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.lineGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.lineGradTo,
|
||||||
|
}]),
|
||||||
|
shadowColor: eTheme.lineShadow,
|
||||||
|
shadowBlur: 6,
|
||||||
|
shadowOffsetY: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.areaGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.areaGradTo,
|
||||||
|
}]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.chartData.outerLine.map(i => i.value),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getInnerLine(eTheme) {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 20,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
extraCssText: '',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: eTheme.innerLineWidth,
|
||||||
|
type: eTheme.innerLineStyle,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: eTheme.innerAreaGradFrom,
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: eTheme.innerAreaGradTo,
|
||||||
|
}]),
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.chartData.innerLine,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,215 @@
|
||||||
|
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { delay, takeWhile } from 'rxjs/operators';
|
||||||
|
import { LayoutService } from '../../../../@core/utils/layout.service';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-visitors-statistics',
|
||||||
|
styleUrls: ['./visitors-statistics.component.scss'],
|
||||||
|
templateUrl: './visitors-statistics.component.html',
|
||||||
|
})
|
||||||
|
export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
|
private alive = true;
|
||||||
|
|
||||||
|
@Input() value: number;
|
||||||
|
|
||||||
|
option: any = {};
|
||||||
|
chartLegend: { iconColor: string; title: string }[];
|
||||||
|
echartsIntance: any;
|
||||||
|
|
||||||
|
constructor(private theme: NbThemeService,
|
||||||
|
private layoutService: LayoutService) {
|
||||||
|
this.layoutService.onSafeChangeLayoutSize()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
)
|
||||||
|
.subscribe(() => this.resizeChart());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.theme.getJsTheme()
|
||||||
|
.pipe(
|
||||||
|
takeWhile(() => this.alive),
|
||||||
|
delay(1),
|
||||||
|
)
|
||||||
|
.subscribe(config => {
|
||||||
|
const variables: any = config.variables;
|
||||||
|
const visitorsPieLegend: any = config.variables.visitorsPieLegend;
|
||||||
|
|
||||||
|
this.setOptions(variables);
|
||||||
|
this.setLegendItems(visitorsPieLegend);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setLegendItems(visitorsPieLegend) {
|
||||||
|
this.chartLegend = [
|
||||||
|
{
|
||||||
|
iconColor: visitorsPieLegend.firstSection,
|
||||||
|
title: 'New Visitors',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconColor: visitorsPieLegend.secondSection,
|
||||||
|
title: 'Return Visitors',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
setOptions(variables) {
|
||||||
|
const visitorsPie: any = variables.visitorsPie;
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: ' ',
|
||||||
|
clockWise: true,
|
||||||
|
hoverAnimation: false,
|
||||||
|
type: 'pie',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: visitorsPie.firstPieRadius,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: this.value,
|
||||||
|
name: ' ',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
position: 'center',
|
||||||
|
formatter: '',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '22',
|
||||||
|
fontFamily: variables.fontSecondary,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: variables.fgHeading,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: visitorsPie.firstPieGradientLeft,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: visitorsPie.firstPieGradientRight,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: visitorsPie.firstPieShadowColor,
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - this.value,
|
||||||
|
name: ' ',
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
position: 'inner',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: variables.layoutBg,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' ',
|
||||||
|
clockWise: true,
|
||||||
|
hoverAnimation: false,
|
||||||
|
type: 'pie',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: visitorsPie.secondPieRadius,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: this.value,
|
||||||
|
name: ' ',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
position: 'center',
|
||||||
|
formatter: '',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '22',
|
||||||
|
fontFamily: variables.fontSecondary,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: variables.fgHeading,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - this.value,
|
||||||
|
name: ' ',
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
position: 'inner',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: visitorsPie.secondPieGradientLeft,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: visitorsPie.secondPieGradientRight,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
shadowColor: visitorsPie.secondPieShadowColor,
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowOffsetX: visitorsPie.shadowOffsetX,
|
||||||
|
shadowOffsetY: visitorsPie.shadowOffsetY,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onChartInit(echarts) {
|
||||||
|
this.echartsIntance = echarts;
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeChart() {
|
||||||
|
if (this.echartsIntance) {
|
||||||
|
this.echartsIntance.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.alive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue