ChrisChen/ChurchAngular
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Remove pages

Browse Source
This commit is contained in:
Chris Chen 2024-04-06 10:04:16 -07:00
parent e2f55f0b8b
commit 3b37d7d798
324 changed files with 1 additions and 16158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -16,7 +16,6 @@
"@angular/compiler": "^16.2.12", "@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12", "@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12", "@angular/forms": "^16.2.12",
"@angular/google-maps": "^12.2.13",
"@angular/platform-browser": "^16.2.12", "@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12", "@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12", "@angular/router": "^16.2.12",
@ -918,20 +917,6 @@
"rxjs": "^6.5.3 || ^7.4.0" "rxjs": "^6.5.3 || ^7.4.0"
} }
}, },
"node_modules/@angular/google-maps": {
"version": "12.2.13",
"resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-12.2.13.tgz",
"integrity": "sha512-iSej7gRAFZfcJ61scFI+lLird4oy0l4a2ipsoXvEiR5lwumHFGB63wT8zmG6GRQXu2SAfxnItdjRGZSTu5MVqw==",
"dependencies": {
"@types/googlemaps": "^3.43.1",
"tslib": "^2.2.0"
},
"peerDependencies": {
"@angular/common": "^12.0.0 || ^13.0.0-0",
"@angular/core": "^12.0.0 || ^13.0.0-0",
"rxjs": "^6.5.3 || ^7.0.0"
}
},
"node_modules/@angular/language-service": { "node_modules/@angular/language-service": {
"version": "16.2.12", "version": "16.2.12",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-16.2.12.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-16.2.12.tgz",
@ -4988,12 +4973,6 @@
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true "dev": true
}, },
"node_modules/@types/googlemaps": {
"version": "3.43.3",
"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
"integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==",
"deprecated": "Types for the Google Maps browser API have moved to @types/google.maps. Note: these types are not for the googlemaps npm package, which is a Node API."
},
"node_modules/@types/http-errors": { "node_modules/@types/http-errors": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@ -24652,15 +24631,6 @@
"tslib": "^2.3.0" "tslib": "^2.3.0"
} }
}, },
"@angular/google-maps": {
"version": "12.2.13",
"resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-12.2.13.tgz",
"integrity": "sha512-iSej7gRAFZfcJ61scFI+lLird4oy0l4a2ipsoXvEiR5lwumHFGB63wT8zmG6GRQXu2SAfxnItdjRGZSTu5MVqw==",
"requires": {
"@types/googlemaps": "^3.43.1",
"tslib": "^2.2.0"
}
},
"@angular/language-service": { "@angular/language-service": {
"version": "16.2.12", "version": "16.2.12",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-16.2.12.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-16.2.12.tgz",
@ -27547,11 +27517,6 @@
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true "dev": true
}, },
"@types/googlemaps": {
"version": "3.43.3",
"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
"integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg=="
},
"@types/http-errors": { "@types/http-errors": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",

1
package.json
View File

@ -36,7 +36,6 @@
"@angular/compiler": "^16.2.12", "@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12", "@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12", "@angular/forms": "^16.2.12",
"@angular/google-maps": "^12.2.13",
"@angular/platform-browser": "^16.2.12", "@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12", "@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12", "@angular/router": "^16.2.12",

5
src/app/app-routing.module.ts
View File

@ -17,11 +17,6 @@ export const routes: Routes = [
loadChildren: () => import('./invitation/invitation.module') loadChildren: () => import('./invitation/invitation.module')
.then(m => m.InvitationModule), .then(m => m.InvitationModule),
}, },
{
path: 'pages',
loadChildren: () => import('./pages/pages.module')
.then(m => m.PagesModule),
},
{ {
path: 'auth', path: 'auth',
component: NbAuthComponent, component: NbAuthComponent,

85
src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts
View File

@ -1,85 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-bar-horizontal',
template: `
<chart type="horizontalBar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsBarHorizontalComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Dataset 1',
backgroundColor: colors.infoLight,
borderWidth: 1,
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
}, {
label: 'Dataset 2',
backgroundColor: colors.successLight,
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
elements: {
rectangle: {
borderWidth: 2,
},
},
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
legend: {
position: 'right',
labels: {
fontColor: chartjs.textColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
private random() {
return Math.round(Math.random() * 100);
}
}

73
src/app/pages/charts/chartjs/chartjs-bar.component.ts
View File

@ -1,73 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-bar',
template: `
<chart type="bar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsBarComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
}],
};
this.options = {
maintainAspectRatio: false,
responsive: true,
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
scales: {
xAxes: [
{
gridLines: {
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

81
src/app/pages/charts/chartjs/chartjs-line.component.ts
View File

@ -1,81 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-line',
template: `
<chart type="line" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsLineComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
borderColor: colors.primary,
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
borderColor: colors.danger,
}, {
data: [18, 48, 77, 9, 100, 27, 40],
label: 'Series C',
backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
borderColor: colors.info,
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

117
src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts
View File

@ -1,117 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-multiple-xaxis',
template: `
<chart type="line" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsMultipleXaxisComponent implements OnDestroy {
data: {};
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'dataset - big points',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.primary,
backgroundColor: colors.primary,
fill: false,
borderDash: [5, 5],
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - individual point sizes',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.dangerLight,
backgroundColor: colors.dangerLight,
fill: false,
borderDash: [5, 5],
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - large pointHoverRadius',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.info,
backgroundColor: colors.info,
fill: false,
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - large pointHitRadius',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.success,
backgroundColor: colors.success,
fill: false,
pointRadius: 8,
pointHoverRadius: 10,
}],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
fontColor: chartjs.textColor,
},
},
hover: {
mode: 'index',
},
scales: {
xAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: 'Month',
},
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
private random() {
return Math.round(Math.random() * 100);
}
}

56
src/app/pages/charts/chartjs/chartjs-pie.component.ts
View File

@ -1,56 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-pie',
template: `
<chart type="pie" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsPieComponent implements OnDestroy {
data: any;
options: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['Download Sales', 'In-Store Sales', 'Mail Sales'],
datasets: [{
data: [300, 500, 100],
backgroundColor: [colors.primaryLight, colors.infoLight, colors.successLight],
}],
};
this.options = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [
{
display: false,
},
],
yAxes: [
{
display: false,
},
],
},
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

64
src/app/pages/charts/chartjs/chartjs-radar.component.ts
View File

@ -1,64 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-radar',
template: `
<chart type="radar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsRadarComponent implements OnDestroy {
options: any;
data: {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
data: [65, 59, 90, 81, 56, 55, 40],
label: 'Series A',
borderColor: colors.danger,
backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5),
}, {
data: [28, 48, 40, 19, 96, 27, 100],
label: 'Series B',
borderColor: colors.warning,
backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5),
}],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
scaleFontColor: 'white',
legend: {
labels: {
fontColor: chartjs.textColor,
},
},
scale: {
pointLabels: {
fontSize: 14,
fontColor: chartjs.textColor,
},
gridLines: {
color: chartjs.axisLineColor,
},
angleLines: {
color: chartjs.axisLineColor,
},
},
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

50
src/app/pages/charts/chartjs/chartjs.component.html
View File

@ -1,50 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Pie</nb-card-header>
<nb-card-body>
<ngx-chartjs-pie></ngx-chartjs-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
<ngx-chartjs-bar></ngx-chartjs-bar>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Line</nb-card-header>
<nb-card-body>
<ngx-chartjs-line></ngx-chartjs-line>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Multiple x-axis</nb-card-header>
<nb-card-body>
<ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar Horizontal</nb-card-header>
<nb-card-body>
<ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Radar</nb-card-header>
<nb-card-body>
<ngx-chartjs-radar></ngx-chartjs-radar>
</nb-card-body>
</nb-card>
</div>
</div>

20
src/app/pages/charts/chartjs/chartjs.component.scss
View File

@ -1,20 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-chartjs-pie,
ngx-chartjs-bar,
ngx-chartjs-line,
ngx-chartjs-multiple-xaxis,
ngx-chartjs-bar-horizontal,
ngx-chartjs-radar {
display: block;
height: nb-theme(card-height-medium);
width: 100%;
::ng-deep chart {
display: block;
height: 100%;
width: 100%;
}
}
}

8
src/app/pages/charts/chartjs/chartjs.component.ts
View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chartjs',
styleUrls: ['./chartjs.component.scss'],
templateUrl: './chartjs.component.html',
})
export class ChartjsComponent {}

35
src/app/pages/charts/charts-routing.module.ts
View File

@ -1,35 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChartsComponent } from './charts.component';
import { EchartsComponent } from './echarts/echarts.component';
import { D3Component } from './d3/d3.component';
import { ChartjsComponent } from './chartjs/chartjs.component';
const routes: Routes = [{
path: '',
component: ChartsComponent,
children: [{
path: 'echarts',
component: EchartsComponent,
}, {
path: 'd3',
component: D3Component,
}, {
path: 'chartjs',
component: ChartjsComponent,
}],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ChartsRoutingModule { }
export const routedComponents = [
ChartsComponent,
EchartsComponent,
D3Component,
ChartjsComponent,
];

10
src/app/pages/charts/charts.component.ts
View File

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-charts',
template: `
<router-outlet></router-outlet>
`,
})
export class ChartsComponent {
}

63
src/app/pages/charts/charts.module.ts
View File

@ -1,63 +0,0 @@
import { NgModule } from '@angular/core';
import { NgxEchartsModule } from 'ngx-echarts';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { ChartModule } from 'angular2-chartjs';
import { NbCardModule } from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module';
import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
import { ChartjsBarComponent } from './chartjs/chartjs-bar.component';
import { ChartjsLineComponent } from './chartjs/chartjs-line.component';
import { ChartjsPieComponent } from './chartjs/chartjs-pie.component';
import { ChartjsMultipleXaxisComponent } from './chartjs/chartjs-multiple-xaxis.component';
import { ChartjsBarHorizontalComponent } from './chartjs/chartjs-bar-horizontal.component';
import { ChartjsRadarComponent } from './chartjs/chartjs-radar.component';
import { D3BarComponent } from './d3/d3-bar.component';
import { D3LineComponent } from './d3/d3-line.component';
import { D3PieComponent } from './d3/d3-pie.component';
import { D3AreaStackComponent } from './d3/d3-area-stack.component';
import { D3PolarComponent } from './d3/d3-polar.component';
import { D3AdvancedPieComponent } from './d3/d3-advanced-pie.component';
import { EchartsLineComponent } from './echarts/echarts-line.component';
import { EchartsPieComponent } from './echarts/echarts-pie.component';
import { EchartsBarComponent } from './echarts/echarts-bar.component';
import { EchartsMultipleXaxisComponent } from './echarts/echarts-multiple-xaxis.component';
import { EchartsAreaStackComponent } from './echarts/echarts-area-stack.component';
import { EchartsBarAnimationComponent } from './echarts/echarts-bar-animation.component';
import { EchartsRadarComponent } from './echarts/echarts-radar.component';
const components = [
ChartjsBarComponent,
ChartjsLineComponent,
ChartjsPieComponent,
ChartjsMultipleXaxisComponent,
ChartjsBarHorizontalComponent,
ChartjsRadarComponent,
D3BarComponent,
D3LineComponent,
D3PieComponent,
D3AreaStackComponent,
D3PolarComponent,
D3AdvancedPieComponent,
EchartsLineComponent,
EchartsPieComponent,
EchartsBarComponent,
EchartsMultipleXaxisComponent,
EchartsAreaStackComponent,
EchartsBarAnimationComponent,
EchartsRadarComponent,
];
@NgModule({
imports: [
ThemeModule,
ChartsRoutingModule,
NgxEchartsModule,
NgxChartsModule,
ChartModule,
NbCardModule,
],
declarations: [...routedComponents, ...components],
})
export class ChartsModule {}

43
src/app/pages/charts/d3/d3-advanced-pie.component.ts
View File

@ -1,43 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-advanced-pie',
template: `
<ngx-charts-advanced-pie-chart
[scheme]="colorScheme"
[results]="single">
</ngx-charts-advanced-pie-chart>
`,
})
export class D3AdvancedPieComponent implements OnDestroy {
single = [
{
name: 'Germany',
value: 8940000,
},
{
name: 'USA',
value: 5000000,
},
{
name: 'France',
value: 7200000,
},
];
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

73
src/app/pages/charts/d3/d3-area-stack.component.ts
View File

@ -1,73 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-area-stack',
template: `
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale">
</ngx-charts-area-chart>
`,
})
export class D3AreaStackComponent implements OnDestroy {
multi = [{
name: 'Germany',
series: [{
name: '2010',
value: 7300000,
}, {
name: '2011',
value: 8940000,
}],
}, {
name: 'USA',
series: [{
name: '2010',
value: 7870000,
}, {
name: '2011',
value: 8270000,
}],
}, {
name: 'France',
series: [{
name: '2010',
value: 5000002,
}, {
name: '2011',
value: 5800000,
}],
}];
showLegend = true;
autoScale = true;
showXAxis = true;
showYAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

45
src/app/pages/charts/d3/d3-bar.component.ts
View File

@ -1,45 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-bar',
template: `
<ngx-charts-bar-vertical
[scheme]="colorScheme"
[results]="results"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
`,
})
export class D3BarComponent implements OnDestroy {
results = [
{ name: 'Germany', value: 8940 },
{ name: 'USA', value: 5000 },
{ name: 'France', value: 7200 },
];
showLegend = true;
showXAxis = true;
showYAxis = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

84
src/app/pages/charts/d3/d3-line.component.ts
View File

@ -1,84 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-line',
template: `
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-line-chart>
`,
})
export class D3LineComponent implements OnDestroy {
multi = [
{
name: 'Germany',
series: [
{
name: '2010',
value: 7300,
},
{
name: '2011',
value: 8940,
},
],
},
{
name: 'USA',
series: [
{
name: '2010',
value: 7870,
},
{
name: '2011',
value: 8270,
},
],
},
{
name: 'France',
series: [
{
name: '2010',
value: 5002,
},
{
name: '2011',
value: 5800,
},
],
},
];
showLegend = true;
showXAxis = true;
showYAxis = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

38
src/app/pages/charts/d3/d3-pie.component.ts
View File

@ -1,38 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-pie',
template: `
<ngx-charts-pie-chart
[scheme]="colorScheme"
[results]="results"
[legend]="showLegend"
[labels]="showLabels">
</ngx-charts-pie-chart>
`,
})
export class D3PieComponent implements OnDestroy {
results = [
{ name: 'Germany', value: 8940 },
{ name: 'USA', value: 5000 },
{ name: 'France', value: 7200 },
];
showLegend = true;
showLabels = true;
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

98
src/app/pages/charts/d3/d3-polar.component.ts
View File

@ -1,98 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-d3-polar',
template: `
<ngx-charts-polar-chart
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale">
</ngx-charts-polar-chart>
`,
})
export class D3PolarComponent implements OnDestroy {
multi = [
{
name: 'Germany',
series: [
{
name: '1990',
value: 31476,
},
{
name: '2000',
value: 36953,
},
{
name: '2010',
value: 40632,
},
],
},
{
name: 'USA',
series: [
{
name: '1990',
value: 37060,
},
{
name: '2000',
value: 45986,
},
{
name: '2010',
value: 49737,
},
],
},
{
name: 'France',
series: [
{
name: '1990',
value: 29476,
},
{
name: '2000',
value: 34774,
},
{
name: '2010',
value: 36240,
},
],
},
];
showLegend = true;
autoScale = true;
showXAxis = true;
showYAxis = true;
showXAxisLabel = true;
showYAxisLabel = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

42
src/app/pages/charts/d3/d3.component.html
View File

@ -1,42 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Pie</nb-card-header>
<nb-card-body>
<ngx-d3-pie></ngx-d3-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
<ngx-d3-bar></ngx-d3-bar>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Line</nb-card-header>
<nb-card-body>
<ngx-d3-line></ngx-d3-line>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Advanced Pie</nb-card-header>
<nb-card-body>
<ngx-d3-advanced-pie></ngx-d3-advanced-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Area Chart</nb-card-header>
<nb-card-body>
<ngx-d3-area-stack></ngx-d3-area-stack>
</nb-card-body>
</nb-card>
</div>
</div>

46
src/app/pages/charts/d3/d3.component.scss
View File

@ -1,46 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-d3-bar,
ngx-d3-pie,
ngx-d3-advanced-pie,
ngx-d3-area-stack,
ngx-d3-line,
ngx-d3-polar {
display: block;
width: 100%;
height: nb-theme(card-height-medium);
::ng-deep {
.pie-label {
fill: nb-theme(text-basic-color);
}
text {
fill: nb-theme(text-hint-color);
}
.chart-legend {
.legend-labels {
background: nb-theme(background-basic-color-2);
}
.legend-label {
color: nb-theme(text-hint-color);
.active .legend-label-text {
color: nb-theme(text-basic-color);
}
}
}
.total-value,
.item-value,
.item-percent {
line-height: 1.25;
}
.legend-items {
overflow-y: hidden;
}
}
}
}

8
src/app/pages/charts/d3/d3.component.ts
View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-d3',
styleUrls: ['./d3.component.scss'],
templateUrl: './d3.component.html',
})
export class D3Component {}

140
src/app/pages/charts/echarts/echarts-area-stack.component.ts
View File

@ -1,140 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-area-stack',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsAreaStackComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: echarts.tooltipBackgroundColor,
},
},
},
legend: {
data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
textStyle: {
color: echarts.textColor,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: 'Mail marketing',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Affiliate advertising',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video ad',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: 'Direct interview',
type: 'line',
stack: 'Total amount',
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: 'Search engine',
type: 'line',
stack: 'Total amount',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: echarts.textColor,
},
},
},
areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

103
src/app/pages/charts/echarts/echarts-bar-animation.component.ts
View File

@ -1,103 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-bar-animation',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsBarAnimationComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const xAxisData = [];
const data1 = [];
const data2 = [];
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.primaryLight, colors.infoLight],
legend: {
data: ['bar', 'bar2'],
align: 'left',
textStyle: {
color: echarts.textColor,
},
},
xAxis: [
{
data: xAxisData,
silent: false,
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: idx => idx * 10,
},
{
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: idx => idx * 10 + 100,
},
],
animationEasing: 'elasticOut',
animationDelayUpdate: idx => idx * 5,
};
for (let i = 0; i < 100; i++) {
xAxisData.push('Category ' + i);
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

92
src/app/pages/charts/echarts/echarts-bar.component.ts
View File

@ -1,92 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-bar',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsBarComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.primaryLight],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: 'Score',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

106
src/app/pages/charts/echarts/echarts-line.component.ts
View File

@ -1,106 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-line',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsLineComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.danger, colors.primary, colors.info],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
},
legend: {
left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: {
color: echarts.textColor,
},
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
yAxis: [
{
type: 'log',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
series: [
{
name: 'Line 1',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
},
{
name: 'Line 2',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
},
{
name: 'Line 3',
type: 'line',
data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

166
src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts
View File

@ -1,166 +0,0 @@
import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-multiple-xaxis',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsMultipleXaxisComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.success, colors.info],
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross',
},
},
legend: {
data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: {
color: echarts.textColor,
},
},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors.info,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
axisPointer: {
label: {
formatter: params => {
return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
},
data: [
'2016-1',
'2016-2',
'2016-3',
'2016-4',
'2016-5',
'2016-6',
'2016-7',
'2016-8',
'2016-9',
'2016-10',
'2016-11',
'2016-12',
],
},
{
type: 'category',
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors.success,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
axisPointer: {
label: {
formatter: params => {
return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
},
data: [
'2015-1',
'2015-2',
'2015-3',
'2015-4',
'2015-5',
'2015-6',
'2015-7',
'2015-8',
'2015-9',
'2015-10',
'2015-11',
'2015-12',
],
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
series: [
{
name: '2015 Precipitation',
type: 'line',
xAxisIndex: 1,
smooth: true,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: '2016 Precipitation',
type: 'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

81
src/app/pages/charts/echarts/echarts-pie.component.ts
View File

@ -1,81 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-pie',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsPieComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: {
color: echarts.textColor,
},
},
series: [
{
name: 'Countries',
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
data: [
{ value: 335, name: 'Germany' },
{ value: 310, name: 'France' },
{ value: 234, name: 'Canada' },
{ value: 135, name: 'Russia' },
{ value: 1548, name: 'USA' },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: echarts.itemHoverShadowColor,
},
},
label: {
normal: {
textStyle: {
color: echarts.textColor,
},
},
},
labelLine: {
normal: {
lineStyle: {
color: echarts.axisLineColor,
},
},
},
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

76
src/app/pages/charts/echarts/echarts-radar.component.ts
View File

@ -1,76 +0,0 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-echarts-radar',
template: `
<div echarts [options]="options" class="echart"></div>
`,
})
export class EchartsRadarComponent implements AfterViewInit, OnDestroy {
options: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: echarts.bg,
color: [colors.danger, colors.warning],
tooltip: {},
legend: {
data: ['Allocated Budget', 'Actual Spending'],
textStyle: {
color: echarts.textColor,
},
},
radar: {
name: {
textStyle: {
color: echarts.textColor,
},
},
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Techology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 },
],
splitArea: {
areaStyle: {
color: 'transparent',
},
},
},
series: [
{
name: 'Budget vs Spending',
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: 'Allocated Budget',
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: 'Actual Spending',
},
],
},
],
};
});
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}
}

58
src/app/pages/charts/echarts/echarts.component.html
View File

@ -1,58 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Pie</nb-card-header>
<nb-card-body>
<ngx-echarts-pie></ngx-echarts-pie>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar</nb-card-header>
<nb-card-body>
<ngx-echarts-bar></ngx-echarts-bar>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Line</nb-card-header>
<nb-card-body>
<ngx-echarts-line></ngx-echarts-line>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Multiple x-axis</nb-card-header>
<nb-card-body>
<ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Area Stack</nb-card-header>
<nb-card-body>
<ngx-echarts-area-stack></ngx-echarts-area-stack>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Bar Animation</nb-card-header>
<nb-card-body>
<ngx-echarts-bar-animation></ngx-echarts-bar-animation>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Radar</nb-card-header>
<nb-card-body>
<ngx-echarts-radar></ngx-echarts-radar>
</nb-card-body>
</nb-card>
</div>
</div>

20
src/app/pages/charts/echarts/echarts.component.scss
View File

@ -1,20 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-echarts-pie,
ngx-echarts-bar,
ngx-echarts-line,
ngx-echarts-multiple-xaxis,
ngx-echarts-area-stack,
ngx-echarts-bar-animation,
ngx-echarts-radar {
display: block;
height: nb-theme(card-height-medium);
width: 100%;
}
::ng-deep .echart {
height: 100%;
width: 100%;
}
}

8
src/app/pages/charts/echarts/echarts.component.ts
View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-echarts',
styleUrls: ['./echarts.component.scss'],
templateUrl: './echarts.component.html',
})
export class EchartsComponent {}

23
src/app/pages/dashboard/contacts/contacts.component.html
View File

@ -1,23 +0,0 @@
<nb-card size="giant">
<nb-tabset fullWidth>
<nb-tab tabTitle="Contacts">
<nb-list>
<nb-list-item class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
</nb-list-item>
</nb-list>
</nb-tab>
<nb-tab tabTitle="Recent">
<nb-list>
<nb-list-item class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>

34
src/app/pages/dashboard/contacts/contacts.component.scss
View File

@ -1,34 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card {
overflow: hidden;
}
nb-tabset {
display: flex;
flex-direction: column;
::ng-deep ul {
// make same size as card header
padding-bottom: 1px;
::ng-deep .tab-link {
padding: 1.25rem 2rem;
}
}
}
nb-tab {
padding: 0;
}
.contact {
display: flex;
align-items: center;
justify-content: space-between;
&:first-child {
border-top: none;
}
}
}

34
src/app/pages/dashboard/contacts/contacts.component.ts
View File

@ -1,34 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
import { Contacts, RecentUsers, UserData } from '../../../@core/data/users';
@Component({
selector: 'ngx-contacts',
styleUrls: ['./contacts.component.scss'],
templateUrl: './contacts.component.html',
})
export class ContactsComponent implements OnDestroy {
private alive = true;
contacts: any[];
recent: any[];
constructor(private userService: UserData) {
forkJoin(
this.userService.getContacts(),
this.userService.getRecentUsers(),
)
.pipe(takeWhile(() => this.alive))
.subscribe(([contacts, recent]: [Contacts[], RecentUsers[]]) => {
this.contacts = contacts;
this.recent = recent;
});
}
ngOnDestroy() {
this.alive = false;
}
}

42
src/app/pages/dashboard/dashboard.component.html
View File

@ -1,42 +0,0 @@
<div class="row">
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
<i [ngClass]="statusCard.iconClass"></i>
</ngx-status-card>
</div>
</div>
<div class="row">
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-temperature></ngx-temperature>
</div>
<div class="col-xxxl-9 col-xxl-8 col-lg-7 col-md-6">
<ngx-electricity></ngx-electricity>
</div>
</div>
<div class="row">
<div class="col-xxxl-9 col-xl-12">
<ngx-rooms></ngx-rooms>
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-7 col-md-6">
<ngx-contacts></ngx-contacts>
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-solar [chartValue]="solarValue"></ngx-solar>
<ngx-kitten></ngx-kitten>
</div>
<div class="col-xxxl-3 col-xxl-4 col-md-5">
<ngx-traffic></ngx-traffic>
<ngx-weather></ngx-weather>
</div>
<div class="col-xxxl-6 col-xxl-12 col-md-7">
<ngx-security-cameras></ngx-security-cameras>
</div>
</div>

16
src/app/pages/dashboard/dashboard.component.scss
View File

@ -1,16 +0,0 @@
@import '../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.solar-card nb-card-header {
border: none;
padding-bottom: 0;
}
@include media-breakpoint-down(sm) {
ngx-traffic {
display: none;
}
}
}

99
src/app/pages/dashboard/dashboard.component.ts
View File

@ -1,99 +0,0 @@
import {Component, OnDestroy} from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators' ;
import { SolarData } from '../../@core/data/solar';
interface CardSettings {
title: string;
iconClass: string;
type: string;
}
@Component({
selector: 'ngx-dashboard',
styleUrls: ['./dashboard.component.scss'],
templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnDestroy {
private alive = true;
solarValue: number;
lightCard: CardSettings = {
title: 'Light',
iconClass: 'nb-lightbulb',
type: 'primary',
};
rollerShadesCard: CardSettings = {
title: 'Roller Shades',
iconClass: 'nb-roller-shades',
type: 'success',
};
wirelessAudioCard: CardSettings = {
title: 'Wireless Audio',
iconClass: 'nb-audio',
type: 'info',
};
coffeeMakerCard: CardSettings = {
title: 'Coffee Maker',
iconClass: 'nb-coffee-maker',
type: 'warning',
};
statusCards: string;
commonStatusCardsSet: CardSettings[] = [
this.lightCard,
this.rollerShadesCard,
this.wirelessAudioCard,
this.coffeeMakerCard,
];
statusCardsByThemes: {
default: CardSettings[];
cosmic: CardSettings[];
corporate: CardSettings[];
dark: CardSettings[];
} = {
default: this.commonStatusCardsSet,
cosmic: this.commonStatusCardsSet,
corporate: [
{
...this.lightCard,
type: 'warning',
},
{
...this.rollerShadesCard,
type: 'primary',
},
{
...this.wirelessAudioCard,
type: 'danger',
},
{
...this.coffeeMakerCard,
type: 'info',
},
],
dark: this.commonStatusCardsSet,
};
constructor(private themeService: NbThemeService,
private solarService: SolarData) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.statusCards = this.statusCardsByThemes[theme.name];
});
this.solarService.getSolarData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.solarValue = data;
});
}
ngOnDestroy() {
this.alive = false;
}
}

69
src/app/pages/dashboard/dashboard.module.ts
View File

@ -1,69 +0,0 @@
import { NgModule } from '@angular/core';
import {
NbActionsModule,
NbButtonModule,
NbCardModule,
NbTabsetModule,
NbUserModule,
NbRadioModule,
NbSelectModule,
NbListModule,
NbIconModule,
} from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts';
import { ThemeModule } from '../../@theme/theme.module';
import { DashboardComponent } from './dashboard.component';
import { StatusCardComponent } from './status-card/status-card.component';
import { ContactsComponent } from './contacts/contacts.component';
import { RoomsComponent } from './rooms/rooms.component';
import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
import { TemperatureComponent } from './temperature/temperature.component';
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
import { KittenComponent } from './kitten/kitten.component';
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
import { ElectricityComponent } from './electricity/electricity.component';
import { ElectricityChartComponent } from './electricity/electricity-chart/electricity-chart.component';
import { WeatherComponent } from './weather/weather.component';
import { SolarComponent } from './solar/solar.component';
import { PlayerComponent } from './rooms/player/player.component';
import { TrafficComponent } from './traffic/traffic.component';
import { TrafficChartComponent } from './traffic/traffic-chart.component';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ThemeModule,
NbCardModule,
NbUserModule,
NbButtonModule,
NbTabsetModule,
NbActionsModule,
NbRadioModule,
NbSelectModule,
NbListModule,
NbIconModule,
NbButtonModule,
NgxEchartsModule,
],
declarations: [
DashboardComponent,
StatusCardComponent,
TemperatureDraggerComponent,
ContactsComponent,
RoomSelectorComponent,
TemperatureComponent,
RoomsComponent,
KittenComponent,
SecurityCamerasComponent,
ElectricityComponent,
ElectricityChartComponent,
WeatherComponent,
PlayerComponent,
SolarComponent,
TrafficComponent,
TrafficChartComponent,
],
})
export class DashboardModule { }

14
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
View File

@ -1,14 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
display: block;
flex: 1;
position: relative;
.echart {
position: absolute;
width: 100%;
height: 100%;
}
}

198
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View File

@ -1,198 +0,0 @@
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"
[merge]="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;
}
}

47
src/app/pages/dashboard/electricity/electricity.component.html
View File

@ -1,47 +0,0 @@
<nb-card class="cards-container">
<nb-card size="large" class="table-card">
<nb-card-header>
Electricity Consumption
</nb-card-header>
<nb-tabset fullWidth>
<nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
<nb-list>
<nb-list-item *ngFor="let month of year.months">
<span class="month">{{ month.month }}</span>
<span>
<nb-icon
[class.down]="month.down"
[class.up]="!month.down"
[icon]="month.down ? 'arrow-down' : 'arrow-up'" pack="eva">
</nb-icon>
{{ month.delta }}
</span>
<span class="results">
{{ month.kWatts }} <span class="caption">kWh</span> / {{ month.cost }} <span class="caption">USD</span>
</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>
<nb-card size="large" class="chart-card">
<nb-card-header>
<span class="stats">
<span class="caption">Consumed</span>
<span>816 <span class="caption">kWh</span></span>
</span>
<span class="stats">
<span class="caption">Spent</span>
<span>291 <span class="caption">USD</span></span>
</span>
<nb-select [(selected)]="type" class="type-select">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>
<ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
</nb-card>
</nb-card>

90
src/app/pages/dashboard/electricity/electricity.component.scss
View File

@ -1,90 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.cards-container {
display: flex;
flex-direction: row;
overflow: hidden;
}
.table-card,
.chart-card {
box-shadow: none;
margin-bottom: 0;
border-width: 0;
}
.table-card {
flex: 0 0 auto;
}
.chart-card {
flex: 1 0 auto;
}
.chart-card nb-card-header {
display: flex;
align-items: center;
padding-top: nb-theme(card-header-with-select-padding-top);
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
// prevents double border from chart yAxisSplitLine
margin-bottom: -1px;
}
.type-select {
margin-left: auto;
}
.stats {
margin-right: 1rem;
> .caption {
display: block;
}
}
nb-tabset {
display: flex;
flex-direction: column;
overflow: hidden;
}
nb-tab {
padding: 0;
}
nb-list-item {
display: flex;
align-items: baseline;
&:first-child {
border-top: none;
}
}
.month {
width: 2rem;
}
nb-icon.down {
color: nb-theme(color-danger-default);
}
nb-icon.up {
color: nb-theme(color-success-default);
}
.results {
margin-left: auto;
}
@include media-breakpoint-down(xl) {
.table-card {
display: none;
}
}
}

48
src/app/pages/dashboard/electricity/electricity.component.ts
View File

@ -1,48 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { Electricity, ElectricityChart, ElectricityData } from '../../../@core/data/electricity';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
@Component({
selector: 'ngx-electricity',
styleUrls: ['./electricity.component.scss'],
templateUrl: './electricity.component.html',
})
export class ElectricityComponent implements OnDestroy {
private alive = true;
listData: Electricity[];
chartData: ElectricityChart[];
type = 'week';
types = ['week', 'month', 'year'];
currentTheme: string;
themeSubscription: any;
constructor(private electricityService: ElectricityData,
private themeService: NbThemeService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
forkJoin(
this.electricityService.getListData(),
this.electricityService.getChartData(),
)
.pipe(takeWhile(() => this.alive))
.subscribe(([listData, chartData]: [Electricity[], ElectricityChart[]] ) => {
this.listData = listData;
this.chartData = chartData;
});
}
ngOnDestroy() {
this.alive = false;
}
}

25
src/app/pages/dashboard/kitten/kitten.component.html
View File

@ -1,25 +0,0 @@
<nb-card size="medium">
<div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div>
<div class="details">
<div class="h4">UI Kitten</div>
<div class="description">
UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
</div>
</div>
<nb-card-footer>
<a href="https://akveo.github.io/react-native-ui-kitten?utm_campaign=ui_kitten%20-%20home%20-%20ngx_admin%20code%20embed&utm_source=ngx_admin&utm_medium=embedded&utm_content=iot_dashboard_kitten_card" target="_blank">
<nb-icon icon="globe" pack="eva"></nb-icon>
</a>
<a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">
<i class="link-icon ion-social-apple"></i>
</a>
<a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank">
<i class="link-icon ion-social-android"></i>
</a>
<a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
<nb-icon icon="github" pack="eva"></nb-icon>
</a>
</nb-card-footer>
</nb-card>

39
src/app/pages/dashboard/kitten/kitten.component.scss
View File

@ -1,39 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
.picture {
background-position: center;
background-size: cover;
position: relative;
border-top-left-radius: nb-theme(card-border-radius);
border-top-right-radius: nb-theme(card-border-radius);
flex: 1;
}
.details {
padding: nb-theme(card-padding);
}
.description {
text-align: justify;
}
nb-card-footer {
display: flex;
justify-content: space-around;
align-items: center;
}
.link-icon {
font-size: 1.75rem;
}
nb-icon {
font-size: 1.55rem;
::ng-deep svg {
vertical-align: top;
}
}
}

23
src/app/pages/dashboard/kitten/kitten.component.ts
View File

@ -1,23 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-kitten',
styleUrls: ['./kitten.component.scss'],
templateUrl: './kitten.component.html',
})
export class KittenComponent implements OnDestroy {
currentTheme: string;
themeSubscription: any;
constructor(private themeService: NbThemeService) {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

59
src/app/pages/dashboard/rooms/player/player.component.html
View File

@ -1,59 +0,0 @@
<nb-card>
<nb-card-header class="header">My Playlist</nb-card-header>
<nb-card-body class="body">
<div class="track-info">
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
<div class="details">
<h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
<span>{{ track.artist }}</span>
</div>
</div>
<div class="progress-wrap">
<input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
(input)="setProgress(duration.value)" #duration>
<div class="progress-foreground" [style.width.%]="getProgress()"></div>
</div>
<div class="timing">
<small class="current">{{ player.currentTime | timing }}</small>
<small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
</div>
<div class="controls">
<button class="control-button" nbButton ghost size="tiny" (click)="toggleShuffle()" [class.on]="shuffle">
<nb-icon icon="shuffle-2-outline" pack="eva"></nb-icon>
</button>
<button class="control-button" nbButton ghost size="medium" (click)="prev()">
<nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
</button>
<button class="control-button play-button" nbButton ghost size="medium" (click)="playPause()">
<nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva">
</nb-icon>
</button>
<button class="control-button skip-forward-button" nbButton ghost size="medium" (click)="next()">
<nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon>
</button>
<button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop">
<nb-icon icon="repeat-outline" pack="eva"></nb-icon>
</button>
</div>
</nb-card-body>
<nb-card-footer class="footer">
<div class="volume">
<button nbButton ghost size="small" (click)="setVolume(0)">
<nb-icon class="volume-icon" icon="volume-down-outline" pack="eva"></nb-icon>
</button>
<div class="progress-wrap">
<input type="range" class="progress" [value]="getVolume()" max="100"
(input)="setVolume(volume.value)" #volume>
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
</div>
<button nbButton ghost size="small" (click)="setVolume(100)">
<nb-icon class="volume-icon" icon="volume-up-outline" pack="eva"></nb-icon>
</button>
</div>
</nb-card-footer>
</nb-card>

283
src/app/pages/dashboard/rooms/player/player.component.scss
View File

@ -1,283 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
height: 100%;
nb-card {
box-shadow: none;
border-width: 0;
margin: 0;
height: 100%;
}
.body {
display: flex;
flex-direction: column;
padding: 0;
}
.track-info {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1;
padding: nb-theme(card-padding);
}
.cover {
border-radius: nb-theme(card-border-radius);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 10rem;
height: 10rem;
}
.details {
text-align: center;
padding-top: 1.5rem;
span {
color: nb-theme(text-hint-color);
}
}
.progress-wrap {
position: relative;
height: 1rem;
}
.progress-foreground {
background-color: nb-theme(color-primary-default);
height: 2px;
position: absolute;
left: 0;
margin-top: calc(0.75rem - 1px);
width: 100px;
}
.progress {
appearance: none;
width: 100%;
background: transparent;
height: 1.5rem;
outline: none;
position: absolute;
@include install-thumb() {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: nb-theme(color-primary-default);
cursor: pointer;
margin-top: calc(-0.5rem + 1px);
border: none;
}
@include install-track() {
width: 100%;
height: 2px;
cursor: pointer;
background: nb-theme(border-basic-color-3);
}
}
.timing {
padding-top: 0.5rem;
margin: 0 0.5rem;
display: flex;
justify-content: space-between;
color: nb-theme(text-hint-color);
.current {
@include nb-ltr(order, 0);
@include nb-rtl(order, 1);
}
.remaining {
@include nb-ltr(order, 1);
@include nb-rtl(order, 0);
}
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
@include nb-rtl(flex-direction, row-reverse);
padding: 1rem;
max-width: 400px;
width: 100%;
margin: 0 auto;
}
.control-button {
color: nb-theme(text-hint-color);
&.on {
color: nb-theme(color-primary-default);
}
nb-icon {
font-size: 1.5em;
}
}
.volume {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
position: relative;
max-width: 400px;
.progress-wrap {
height: 2.25rem;
margin: 0;
width: 80%;
.progress-foreground {
left: auto;
margin-top: calc(1rem + 1px);
z-index: 0;
max-width: 99.5%;
}
.progress {
height: 2.25rem;
overflow: visible;
@include install-thumb() {
width: 1.5rem;
height: 1.5rem;
background-color: nb-theme(background-basic-color-1);
box-shadow: 0 0.125rem 0.5rem 0 nb-theme(border-basic-color-3);
border: 1px solid nb-theme(border-basic-color-3);
margin-top: -0.75rem;
position: relative;
z-index: 10;
}
}
}
}
.volume-icon {
font-size: 1em;
color: nb-theme(text-hint-color);
}
&.collapsed {
$player-height: 4.5rem;
border: none;
height: $player-height;
.header {
display: none;
}
.body {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
overflow: visible;
}
.footer {
display: none;
}
.track-info {
height: $player-height;
flex-direction: row;
padding: 0;
flex: none;
.cover {
height: $player-height;
width: $player-height;
flex: none;
}
.details {
margin-left: 0.875rem;
text-align: left;
padding: 0;
h4 {
margin-bottom: 0.125rem;
}
}
}
.progress-wrap {
width: calc(100% - 6rem);
align-self: flex-start;
position: absolute;
left: 0;
margin-top: calc(-0.75rem + 1px);
margin-left: calc(#{$player-height} + 0.75rem);
}
.timing {
display: none;
}
.controls {
padding: 0 1rem 0 0;
max-width: inherit;
width: inherit;
margin: 0;
button {
display: none;
}
.play-button,
.skip-forward-button {
display: block;
font-size: 1.3rem;
}
@include media-breakpoint-down(is) {
.play-button,
.skip-forward-button {
padding: 0.5rem;
}
}
@include media-breakpoint-down(xs) {
.skip-forward-button {
display: none;
}
}
}
.volume {
display: none;
}
.track-info .details {
@include media-breakpoint-down(is) {
span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
@include media-breakpoint-between(lg, lg) {
.controls {
padding: 0.5rem;
}
.control-button.size-medium {
padding: nb-theme(button-ghost-small-padding);
}
}
}

100
src/app/pages/dashboard/rooms/player/player.component.ts
View File

@ -1,100 +0,0 @@
import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
import { PlayerService, Track } from '../../../../@core/utils/player.service';
@Component({
selector: 'ngx-player',
styleUrls: ['./player.component.scss'],
templateUrl: './player.component.html',
})
export class PlayerComponent implements OnDestroy {
@Input()
@HostBinding('class.collapsed')
collapsed: boolean;
track: Track;
player: HTMLAudioElement;
shuffle: boolean;
constructor(private playerService: PlayerService) {
this.track = this.playerService.random();
this.createPlayer();
}
ngOnDestroy() {
this.player.pause();
this.player.src = '';
this.player.load();
}
prev() {
if (!this.player.loop) {
if (this.shuffle) {
this.track = this.playerService.random();
} else {
this.track = this.playerService.prev();
}
}
this.reload();
}
next() {
if (!this.player.loop) {
if (this.shuffle) {
this.track = this.playerService.random();
} else {
this.track = this.playerService.next();
}
}
this.reload();
}
playPause() {
if (this.player.paused) {
this.player.play();
} else {
this.player.pause();
}
}
toggleShuffle() {
this.shuffle = !this.shuffle;
}
toggleLoop() {
this.player.loop = !this.player.loop;
}
setVolume(volume: number) {
this.player.volume = volume / 100;
}
getVolume(): number {
return this.player.volume * 100;
}
setProgress(duration: number) {
this.player.currentTime = this.player.duration * duration / 100;
}
getProgress(): number {
return this.player.currentTime / this.player.duration * 100 || 0;
}
private createPlayer() {
this.player = new Audio();
this.player.onended = () => this.next();
this.setTrack();
}
private reload() {
this.setTrack();
this.player.play();
}
private setTrack() {
this.player.src = this.track.url;
this.player.load();
}
}

90
src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
View File

@ -1,90 +0,0 @@
<nb-card>
<nb-card-header>Room Management</nb-card-header>
<div class="room-selector">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
<defs>
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
</filter>
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
</pattern>
</defs>
<g>
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
</g>
<g>
<path class="stroked-element"
[attr.fill]="getUrlPath('#New_Pattern_Swatch_1')"
[attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
</g>
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
<path class="room-border" [attr.d]="room.border.d" />
<path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
</g>
</svg>
</div>
</nb-card>

76
src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
View File

@ -1,76 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
nb-card {
background-color: transparent;
border-width: 0;
box-shadow: none;
margin: 0;
}
nb-card-header {
border-color: transparent;
}
svg {
width: 100%;
}
.stroke-pattern {
fill: none;
stroke: #bdc4cd;
stroke-miterlimit: 10;
opacity: 0.1;
stroke-width: 1px;
}
.stroked-element {
stroke-width: 4px;
stroke: #bdc4cd;
stroke-miterlimit: 10;
}
.room-border {
stroke-width: 4px;
stroke: #bdc4cd;
stroke-miterlimit: 10;
fill: none;
}
.room-bg {
fill: nb-theme(card-background-color);
stroke: transparent;
cursor: pointer;
stroke-width: 4px;
}
.room-bg-border-grad {
fill: none;
stroke: none;
stroke-width: 4px;
}
.room-text {
cursor: pointer;
user-select: none;
pointer-events: none;
fill: nb-theme(text-hint-color);
}
.selected-room {
z-index: 40;
.room-text {
fill: nb-theme(text-basic-color);
}
.room-border {
stroke: nb-theme(color-primary-default);
}
}
.header {
border-bottom: none;
padding-bottom: 0;
}
}

122
src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts
View File

@ -1,122 +0,0 @@
import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core';
import { Location, LocationStrategy } from '@angular/common';
import { NbThemeService } from '@nebular/theme';
import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'ngx-room-selector',
templateUrl: './room-selector.component.html',
styleUrls: ['./room-selector.component.scss'],
})
export class RoomSelectorComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
private hideGrid: boolean;
@Output() select: EventEmitter<number> = new EventEmitter();
selectedRoom = null;
sortedRooms = [];
viewBox = '-20 -20 618.88 407.99';
isIE = !!(navigator.userAgent.match(/Trident/)
|| navigator.userAgent.match(/MSIE/)
|| navigator.userAgent.match(/Edge/));
isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') >= 0;
roomSvg = {
borders: [{
d: 'M186.21,130.05H216.37V160H186.21Z',
}],
stokedAreas: [
{ d: 'M562.71,225V354h-290V319H418.37a6.09,6.09,0,0,0,6.09-6.09V225Z' },
{ d: 'M8.09,130V347.91A6.09,6.09,0,0,0,14.18,354h54V130Z' },
{ d: 'M216.37,49.82H358.8V92.5H216.37Z' },
],
rooms: [
{
id: '0',
name: { text: 'Kitchen', x: 142, y: 240.8 },
area: { d: 'M68.18,130V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V160H186.21V130Z' },
border: { d: 'M96,130H68.18V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V225 M152.71,' +
'130H186.21V160H218.5' },
},
{
id: '1',
name: { text: 'Bedroom', x: 109, y: 66 },
area: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09,' +
'6.09,0,0,0,8.09,130H96Z' },
border: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09' +
',6.09,0,0,0,8.09,130H96' },
},
{
id: '2',
name: { text: 'Living Room', x: 468, y: 134 },
area: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' +
',6.09,0,0,1-6.09,6.09h-212Z' },
border: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' +
',6.09,0,0,1-6.09,6.09h-212' },
},
{
id: '3',
name: { text: 'Hallway', x: 320, y: 273 },
area: { d: 'M216.37,354V92.5H358.8V225H424.39V319H272.71V354Z' },
border: { d: 'M216.37,225V356 M216.21,162V92.5H358.8V160 M358.8,225H424.39V312.91a6.09,' +
'6.09,0,0,1,-6.09,6.09H272.71V356' },
},
],
};
@HostBinding('style.background')
get background(): 'none' | null {
return this.hideGrid ? 'none' : null;
}
constructor(
private location: Location,
private locationStrategy: LocationStrategy,
private themeService: NbThemeService,
) {
this.selectRoom('2');
}
ngOnInit() {
this.hideGrid = this.themeService.currentTheme === 'corporate';
this.themeService.onThemeChange()
.pipe(
map(({ name }) => name === 'corporate'),
takeUntil(this.destroy$),
)
.subscribe((hideGrid: boolean) => this.hideGrid = hideGrid);
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
private sortRooms() {
this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
if (a.id === this.selectedRoom) {
return 1;
}
if (b.id === this.selectedRoom) {
return -1;
}
return 0;
});
}
selectRoom(roomNumber) {
this.select.emit(roomNumber);
this.selectedRoom = roomNumber;
this.sortRooms();
}
getUrlPath(id: string) {
const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
const path = this.location.path().replace(/\/$/, '');
return `url(${baseHref}${path}${id})`;
}
}

67
src/app/pages/dashboard/rooms/rooms.component.scss
View File

@ -1,67 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
ngx-room-selector {
width: 70%;
border-right: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
background: url('../../../../assets/images/square_pattern.svg') repeat;
background-size: 75px;
&.dark-background {
background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
}
}
ngx-player {
width: 30%;
}
nb-card {
display: flex;
flex-direction: row;
}
ngx-room-selector {
display: flex;
flex-direction: column;
flex: 1;
::ng-deep .room-selector {
display: flex;
align-items: center;
justify-items: center;
flex: 1;
margin: 0 auto;
width: 90%;
max-width: 650px;
padding-bottom: 1rem;
}
}
@include media-breakpoint-down(md) {
&.expanded ngx-room-selector {
display: none;
}
ngx-room-selector, ngx-player {
width: 100%;
border: none;
}
nb-card {
flex-direction: column;
justify-content: space-between;
.collapse {
display: inline-block;
position: absolute;
top: 0.7rem;
left: 50%;
transform: translateX(-50%);
font-size: 2rem;
}
}
}
}

77
src/app/pages/dashboard/rooms/rooms.component.ts
View File

@ -1,77 +0,0 @@
import { Component, HostBinding, OnDestroy } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
import { map } from 'rxjs/operators';
@Component({
selector: 'ngx-rooms',
styleUrls: ['./rooms.component.scss'],
template: `
<nb-card [size]="breakpoint.width >= breakpoints.sm ? 'giant' : ''">
<nb-icon icon="arrow-ios-downward" pack="eva"
(click)="collapse()"
class="collapse"
[hidden]="isCollapsed()">
</nb-icon>
<ngx-room-selector [class.dark-background]="isDarkTheme" (select)="select($event)"></ngx-room-selector>
<ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
</nb-card>
`,
})
export class RoomsComponent implements OnDestroy {
@HostBinding('class.expanded')
private expanded: boolean;
private selected: number;
isDarkTheme: boolean;
breakpoint: NbMediaBreakpoint;
breakpoints: any;
themeSubscription: any;
themeChangeSubscription: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeSubscription = this.themeService.onMediaQueryChange()
.subscribe(([, newValue]) => {
this.breakpoint = newValue;
});
this.themeChangeSubscription = this.themeService.onThemeChange()
.pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
.subscribe((isDark: boolean) => this.isDarkTheme = isDark);
}
select(roomNumber) {
if (this.isSelected(roomNumber)) {
this.expand();
} else {
this.collapse();
}
this.selected = roomNumber;
}
expand() {
this.expanded = true;
}
collapse() {
this.expanded = false;
}
isCollapsed() {
return !this.expanded;
}
private isSelected(roomNumber): boolean {
return this.selected === roomNumber;
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.themeChangeSubscription.unsubscribe();
}
}

61
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View File

@ -1,61 +0,0 @@
<nb-card size="giant">
<nb-card-header>
Security Cameras
<button class="single-view-button"
nbButton
size="small"
[appearance]="isSingleView ? 'filled' : 'outline'"
(click)="isSingleView = true">
<i class="nb-square"></i>
</button>
<button class="grid-view-button"
nbButton
size="small"
[appearance]="isSingleView ? 'outline' : 'filled'"
(click)="isSingleView = false">
<nb-icon icon="grid" pack="eva"></nb-icon>
</button>
</nb-card-header>
<div class="grid-container">
<div class="single-view" *ngIf="isSingleView">
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
<span class="camera-name">{{ selectedCamera.title }}</span>
</div>
</div>
<div class="grid-view" *ngIf="!isSingleView">
<div class="camera"
*ngFor="let camera of cameras"
[style.background-image]="'url(' + camera.source + ')'"
(click)="selectCamera(camera)">
<span class="camera-name">{{ camera.title }}</span>
</div>
</div>
</div>
<nb-card-footer>
<nb-actions [size]="actionSize" fullWidth>
<nb-action>
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
Pause
</nb-action>
<nb-action>
<nb-icon icon="list-outline" pack="eva"></nb-icon>
Logs
</nb-action>
<nb-action>
<nb-icon icon="search-outline" pack="eva"></nb-icon>
Search
</nb-action>
<nb-action>
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
Setup
</nb-action>
</nb-actions>
</nb-card-footer>
</nb-card>

114
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View File

@ -1,114 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';
@include nb-install-component() {
nb-card-header {
display: flex;
align-items: center;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.single-view-button {
.nb-square {
font-size: 1.25rem;
}
@include nb-ltr {
margin-left: auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@include nb-rtl {
margin-right: auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.grid-view-button {
::ng-deep svg {
vertical-align: top;
}
@include nb-ltr {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@include nb-rtl {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.grid-container {
height: 100%;
display: flex;
}
.single-view,
.grid-view {
flex: 1 0 100%;
}
.grid-view {
display: flex;
flex-wrap: wrap;
.camera {
flex: 1 0 50%;
}
}
.single-view .camera {
width: 100%;
height: 100%;
}
.camera {
background-position: center;
background-size: cover;
position: relative;
&::before {
background-color: rgba(255, 255, 255, 0.1);
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
}
&:hover::before {
opacity: 0;
}
}
.camera-name {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background: nb-theme(overlay-backdrop-background-color);
padding: 0.5rem 1rem;
}
nb-action {
nb-icon {
@include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem);
}
::ng-deep svg {
vertical-align: top;
}
}
@include media-breakpoint-down(xl) {
nb-action {
padding: 0;
}
}
}

53
src/app/pages/dashboard/security-cameras/security-cameras.component.ts
View File

@ -1,53 +0,0 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { NbComponentSize, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
import { Camera, SecurityCamerasData } from '../../../@core/data/security-cameras';
@Component({
selector: 'ngx-security-cameras',
styleUrls: ['./security-cameras.component.scss'],
templateUrl: './security-cameras.component.html',
})
export class SecurityCamerasComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
cameras: Camera[];
selectedCamera: Camera;
isSingleView = false;
actionSize: NbComponentSize = 'medium';
constructor(
private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService,
private securityCamerasService: SecurityCamerasData,
) {}
ngOnInit() {
this.securityCamerasService.getCamerasData()
.pipe(takeUntil(this.destroy$))
.subscribe((cameras: Camera[]) => {
this.cameras = cameras;
this.selectedCamera = this.cameras[0];
});
const breakpoints = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
.pipe(map(([, breakpoint]) => breakpoint.width))
.subscribe((width: number) => {
this.actionSize = width > breakpoints.md ? 'medium' : 'small';
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
selectCamera(camera: any) {
this.selectedCamera = camera;
this.isSingleView = true;
}
}

30
src/app/pages/dashboard/solar/solar.component.scss
View File

@ -1,30 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';
@include nb-install-component() {
nb-card-body {
overflow: hidden;
}
.echart {
position: absolute;
left: 1em;
height: calc(100% - 2 * 1rem);
width: 40%;
}
.info {
margin-left: 45%;
padding-top: 1rem;
}
.value {
margin: 0;
}
.details {
color: nb-theme(text-hint-color);
}
}

186
src/app/pages/dashboard/solar/solar.component.ts
View File

@ -1,186 +0,0 @@
import { delay } from 'rxjs/operators';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@Component({
selector: 'ngx-solar',
styleUrls: ['./solar.component.scss'],
template: `
<nb-card size="tiny" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="h4 value">6.421 kWh</div>
<div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
</div>
</nb-card-body>
</nb-card>
`,
})
export class SolarComponent implements AfterViewInit, OnDestroy {
private value = 0;
@Input('chartValue')
set chartValue(value: number) {
this.value = value;
if (this.option.series) {
this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value;
this.option.series[1].data[0].value = value;
}
}
option: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
const solarTheme: any = config.variables.solar;
this.option = Object.assign({}, {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
series: [
{
name: ' ',
clockWise: true,
hoverAnimation: false,
type: 'pie',
center: ['45%', '50%'],
radius: solarTheme.radius,
data: [
{
value: this.value,
name: ' ',
label: {
normal: {
position: 'center',
formatter: '{d}%',
textStyle: {
fontSize: '22',
fontFamily: config.variables.fontSecondary,
fontWeight: '600',
color: config.variables.fgHeading,
},
},
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: solarTheme.gradientRight,
},
]),
shadowColor: solarTheme.shadowColor,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
},
},
hoverAnimation: false,
},
{
value: 100 - this.value,
name: ' ',
tooltip: {
show: false,
},
label: {
normal: {
position: 'inner',
},
},
itemStyle: {
normal: {
color: solarTheme.secondSeriesFill,
},
},
},
],
},
{
name: ' ',
clockWise: true,
hoverAnimation: false,
type: 'pie',
center: ['45%', '50%'],
radius: solarTheme.radius,
data: [
{
value: this.value,
name: ' ',
label: {
normal: {
position: 'inner',
show: false,
},
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: solarTheme.gradientRight,
},
]),
shadowColor: solarTheme.shadowColor,
shadowBlur: 7,
},
},
hoverAnimation: false,
},
{
value: 28,
name: ' ',
tooltip: {
show: false,
},
label: {
normal: {
position: 'inner',
},
},
itemStyle: {
normal: {
color: 'none',
},
},
},
],
},
],
});
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

79
src/app/pages/dashboard/status-card/status-card.component.scss
View File

@ -1,79 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card {
flex-direction: row;
align-items: center;
height: 6rem;
overflow: visible;
.icon-container {
height: 100%;
padding: 0.625rem;
}
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 5.75rem;
height: 4.75rem;
font-size: 3.75rem;
border-radius: nb-theme(card-border-radius);
transition: width 0.4s ease;
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
color: nb-theme(text-control-color);
@each $status in nb-get-statuses() {
&.status-#{$status} {
$left-color: nb-theme(button-hero-#{$status}-left-background-color);
$right-color: nb-theme(button-hero-#{$status}-right-background-color);
background-image: linear-gradient(to right, $left-color, $right-color);
&:hover {
$left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
$right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
}
}
}
}
&.off {
color: nb-theme(text-hint-color);
.status,
.title,
.icon {
color: nb-theme(text-hint-color);
}
@each $status in nb-get-statuses() {
.icon.status-#{$status} {
box-shadow: none;
background-image: linear-gradient(to right, transparent, transparent);
}
}
}
.details {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
@include nb-ltr(padding, 0 0.5rem 0 0.75rem);
@include nb-rtl(padding, 0 0.75rem 0 0.5rem);
border-left: 1px solid transparent;
}
.title {
margin: 0;
}
.status {
text-transform: uppercase;
}
}
}

26
src/app/pages/dashboard/status-card/status-card.component.ts
View File

@ -1,26 +0,0 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'ngx-status-card',
styleUrls: ['./status-card.component.scss'],
template: `
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
<div class="icon-container">
<div class="icon status-{{ type }}">
<ng-content></ng-content>
</div>
</div>
<div class="details">
<div class="title h5">{{ title }}</div>
<div class="status paragraph-2">{{ on ? 'ON' : 'OFF' }}</div>
</div>
</nb-card>
`,
})
export class StatusCardComponent {
@Input() title: string;
@Input() type: string;
@Input() on = true;
}

47
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View File

@ -1,47 +0,0 @@
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACJJREFUaN7twTEBAAAAwiD7pzbFPmAAAAAAAAAAAAAAAGQOLbQAAU3zwM4AAAAASUVORK5CYII=">
<div class="svg-container">
<svg #svgRoot xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
[attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
<defs>
<filter [attr.id]="'blurFilter' + svgControlId" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
<feComponentTransfer>
<feFuncA type="discrete" tableValues="1 1"/>
</feComponentTransfer>
</filter>
<clipPath [attr.id]="'sliderClip' + svgControlId">
<path [attr.d]="styles.clipPathStr" stroke="black"></path>
</clipPath>
</defs>
<g [attr.transform]="styles.arcTranslateStr">
<g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
<g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
<path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
</g>
<!-- ngFor is a quirk fix for webkit rendering issues -->
<path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color" *ngFor="let number of [0,1,2,3,4,5]"></path>
</g>
<circle [attr.cx]="styles.thumbPosition.x"
[attr.cy]="styles.thumbPosition.y"
[attr.r]="pinRadius"
[attr.stroke-width]="thumbBorder / scaleFactor"
[attr.fill]="off ? 'none' : thumbBg"
[attr.stroke]="off ? 'none' : thumbBorderColor">
</circle>
</g>
</svg>
</div>
<div class="temperature-bg">
<ng-content></ng-content>
</div>
<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
</button>

63
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View File

@ -1,63 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
position: relative;
img {
width: 100%;
height: auto;
visibility: hidden;
}
.svg-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.temperature-bg {
position: absolute;
width: 88%;
height: 88%;
top: 13%;
left: 6%;
border-radius: 50%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
}
.power-bg {
position: absolute;
width: 5.25rem;
height: 5.25rem;
background-color: nb-theme(card-background-color);
border-radius: 50%;
bottom: 2%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&.on {
color: nb-theme(text-hint-color);
}
}
.power-icon {
font-size: 3rem;
}
}

380
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View File

@ -1,380 +0,0 @@
import {
Component,
HostListener,
ViewChild,
ElementRef,
Input,
Output,
EventEmitter,
AfterViewInit,
OnChanges,
} from '@angular/core';
import { Location, LocationStrategy } from '@angular/common';
let uniqueId = 0;
const VIEW_BOX_SIZE = 300;
@Component({
selector: 'ngx-temperature-dragger',
templateUrl: './temperature-dragger.component.html',
styleUrls: ['./temperature-dragger.component.scss'],
})
export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@ViewChild('svgRoot', { static: true }) svgRoot: ElementRef;
@Input() fillColors: string|string[];
@Input() disableArcColor;
@Input() bottomAngle = 90;
@Input() arcThickness = 18; // CSS pixels
@Input() thumbRadius = 16; // CSS pixels
@Input() thumbBorder = 3;
@Input() thumbBg;
@Input() thumbBorderColor;
@Input() maxLeap = 0.4;
value = 50;
@Output() valueChange = new EventEmitter<Number>();
@Input('value') set setValue(value) {
this.value = value;
}
@Input() min = 0; // min output value
@Input() max = 100; // max output value
@Input() step = 0.1;
@Output() power = new EventEmitter<boolean>();
@HostListener('window:mouseup', ['$event'])
onMouseUp(event) {
this.recalculateValue(event);
this.isMouseDown = false;
}
@HostListener('window:mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
this.recalculateValue(event);
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.invalidate();
}
off = false;
oldValue: number;
svgControlId = uniqueId++;
scaleFactor = 1;
bottomAngleRad = 0;
radius = 100;
translateXValue = 0;
translateYValue = 0;
thickness = 6;
pinRadius = 10;
colors: any = [];
styles = {
viewBox: '0 0 300 300',
arcTranslateStr: 'translate(0, 0)',
clipPathStr: '',
gradArcs: [],
nonSelectedArc: {},
thumbPosition: { x: 0, y: 0 },
blurRadius: 15,
};
private isMouseDown = false;
private init = false;
constructor(
private location: Location,
private locationStrategy: LocationStrategy,
) {
this.oldValue = this.value;
}
ngAfterViewInit(): void {
// IE fix
setTimeout(() => {
this.invalidate();
this.init = true;
});
}
ngOnChanges(): void {
if (this.init) {
this.invalidate();
}
}
mouseDown(event) {
this.isMouseDown = true;
if (!this.off) {
this.recalculateValue(event, true);
}
}
switchPower() {
this.off = !this.off;
this.power.emit(!this.off);
if (this.off) {
this.oldValue = this.value;
this.value = this.min;
} else {
this.value = this.oldValue;
}
this.invalidatePinPosition();
}
getUrlPath(id: string) {
const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
const path = this.location.path().replace(/\/$/, '');
return `url(${baseHref}${path}${id}${this.svgControlId})`;
}
private invalidate(): void {
this.bottomAngleRad = TemperatureDraggerComponent.toRad(this.bottomAngle);
this.calculateVars();
this.invalidateClipPathStr();
this.invalidatePinPosition();
// Chrome fix, temporary solution
// TODO: review set data to styles object
setTimeout(() => {
this.invalidateGradientArcs();
});
}
private calculateVars() {
this.bottomAngleRad = TemperatureDraggerComponent.toRad(this.bottomAngle);
this.colors = (typeof this.fillColors === 'string') ? [this.fillColors] : this.fillColors;
const halfAngle = this.bottomAngleRad / 2;
const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect();
const svgAreaFactor = svgBoundingRect.height && svgBoundingRect.width / svgBoundingRect.height || 1;
const svgHeight = VIEW_BOX_SIZE / svgAreaFactor;
const thumbMaxRadius = this.thumbRadius + this.thumbBorder;
const thumbMargin = 2 * thumbMaxRadius > this.arcThickness
? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor
: 0;
this.scaleFactor = svgBoundingRect.width / VIEW_BOX_SIZE || 1;
this.styles.viewBox = `0 0 ${VIEW_BOX_SIZE} ${svgHeight}`;
const circleFactor = this.bottomAngleRad <= Math.PI
? ( 2 / (1 + Math.cos(halfAngle)) )
: ( 2 * Math.sin(halfAngle) / (1 + Math.cos(halfAngle)) );
if (circleFactor > svgAreaFactor) {
if (this.bottomAngleRad > Math.PI) {
this.radius = (VIEW_BOX_SIZE - 2 * thumbMargin) / (2 * Math.sin(halfAngle));
} else {
this.radius = VIEW_BOX_SIZE / 2 - thumbMargin;
}
} else {
this.radius = (svgHeight - 2 * thumbMargin) / (1 + Math.cos(halfAngle));
}
this.translateXValue = VIEW_BOX_SIZE / 2 - this.radius;
this.translateYValue = (svgHeight) / 2 - this.radius * (1 + Math.cos(halfAngle)) / 2;
this.styles.arcTranslateStr = `translate(${this.translateXValue}, ${this.translateYValue})`;
this.thickness = this.arcThickness / this.scaleFactor;
this.pinRadius = this.thumbRadius / this.scaleFactor;
}
private calculateClipPathSettings() {
const halfAngle = this.bottomAngleRad / 2;
const innerRadius = this.radius - this.thickness;
const xStartMultiplier = 1 - Math.sin(halfAngle);
const yMultiplier = 1 + Math.cos(halfAngle);
const xEndMultiplier = 1 + Math.sin(halfAngle);
return {
outer: {
start: {
x: xStartMultiplier * this.radius,
y: yMultiplier * this.radius,
},
end: {
x: xEndMultiplier * this.radius,
y: yMultiplier * this.radius,
},
radius: this.radius,
},
inner: {
start: {
x: xStartMultiplier * innerRadius + this.thickness,
y: yMultiplier * innerRadius + this.thickness,
},
end: {
x: xEndMultiplier * innerRadius + this.thickness,
y: yMultiplier * innerRadius + this.thickness,
},
radius: innerRadius,
},
thickness: this.thickness,
big: this.bottomAngleRad < Math.PI ? '1' : '0',
};
}
private invalidateClipPathStr() {
const s = this.calculateClipPathSettings();
let path = `M ${s.outer.start.x},${s.outer.start.y}`; // Start at startangle top
// Outer arc
// Draw an arc of radius 'radius'
// Arc details...
path += ` A ${s.outer.radius},${s.outer.radius}
0 ${s.big} 1
${s.outer.end.x},${s.outer.end.y}`; // Arc goes to top end angle coordinate
// Outer to inner connector
path += ` A ${s.thickness / 2},${s.thickness / 2}
0 1 1
${s.inner.end.x},${s.inner.end.y}`;
// Inner arc
path += ` A ${s.inner.radius},${s.inner.radius}
1 ${s.big} 0
${s.inner.start.x},${s.inner.start.y}`;
// Outer to inner connector
path += ` A ${s.thickness / 2},${s.thickness / 2}
0 1 1
${s.outer.start.x},${s.outer.start.y}`;
// Close path
path += ' Z';
this.styles.clipPathStr = path;
}
private calculateGradientConePaths(angleStep) {
const radius = this.radius;
function calcX(angle) {
return radius * (1 - 2 * Math.sin(angle));
}
function calcY(angle) {
return radius * (1 + 2 * Math.cos(angle));
}
const gradArray = [];
for (let i = 0, currentAngle = this.bottomAngleRad / 2; i < this.colors.length; i++, currentAngle += angleStep) {
gradArray.push({
start: { x: calcX(currentAngle), y: calcY(currentAngle) },
end: { x: calcX(currentAngle + angleStep), y: calcY(currentAngle + angleStep) },
big: Math.PI <= angleStep ? 1 : 0,
});
}
return gradArray;
}
private invalidateGradientArcs() {
const radius = this.radius;
function getArc(des) {
return `M ${radius},${radius}
L ${des.start.x},${des.start.y}
A ${2 * radius},${2 * radius}
0 ${des.big} 1
${des.end.x},${des.end.y}
Z`;
}
const angleStep = (2 * Math.PI - this.bottomAngleRad) / this.colors.length;
const s = this.calculateGradientConePaths(angleStep);
this.styles.gradArcs = [];
for (let i = 0; i < s.length; i++) {
const si = s[i];
const arcValue = getArc(si);
this.styles.gradArcs.push({
color: this.colors[i],
d: arcValue,
});
}
this.styles.blurRadius = 2 * radius * Math.sin(angleStep / 6);
}
private invalidateNonSelectedArc() {
const angle = this.bottomAngleRad / 2 + (1 - this.getValuePercentage()) * (2 * Math.PI - this.bottomAngleRad);
this.styles.nonSelectedArc = {
color: this.disableArcColor,
d: `M ${this.radius},${this.radius}
L ${this.radius},${3 * this.radius}
A ${2 * this.radius},${2 * this.radius}
1 ${angle > Math.PI ? '1' : '0'} 0
${this.radius + this.radius * 2 * Math.sin(angle)},${this.radius + this.radius * 2 * Math.cos(angle)}
Z`,
};
}
private invalidatePinPosition() {
const radiusOffset = this.thickness / 2;
const curveRadius = this.radius - radiusOffset;
const actualAngle = (2 * Math.PI - this.bottomAngleRad) * this.getValuePercentage() + this.bottomAngleRad / 2;
this.styles.thumbPosition = {
x: curveRadius * (1 - Math.sin(actualAngle)) + radiusOffset,
y: curveRadius * (1 + Math.cos(actualAngle)) + radiusOffset,
};
this.invalidateNonSelectedArc();
}
private recalculateValue(event, allowJumping = false) {
if (this.isMouseDown && !this.off) {
const rect = this.svgRoot.nativeElement.getBoundingClientRect();
const center = {
x: rect.left + VIEW_BOX_SIZE * this.scaleFactor / 2,
y: rect.top + (this.translateYValue + this.radius) * this.scaleFactor,
};
let actualAngle = Math.atan2(center.x - event.clientX, event.clientY - center.y);
if (actualAngle < 0) {
actualAngle = actualAngle + 2 * Math.PI;
}
const previousRelativeValue = this.getValuePercentage();
let relativeValue = 0;
if (actualAngle < this.bottomAngleRad / 2) {
relativeValue = 0;
} else if (actualAngle > 2 * Math.PI - this.bottomAngleRad / 2) {
relativeValue = 1;
} else {
relativeValue = (actualAngle - this.bottomAngleRad / 2) / (2 * Math.PI - this.bottomAngleRad);
}
const value = this.toValueNumber(relativeValue);
if (this.value !== value && (allowJumping || Math.abs(relativeValue - previousRelativeValue) < this.maxLeap)) {
this.value = value;
this.valueChange.emit(this.value);
this.invalidatePinPosition();
}
}
}
private getValuePercentage() {
return (this.value - this.min) / (this.max - this.min);
}
private toValueNumber(factor) {
return Math.round(factor * (this.max - this.min) / this.step) * this.step + this.min;
}
private static toRad(angle) {
return Math.PI * angle / 180;
}
}

69
src/app/pages/dashboard/temperature/temperature.component.html
View File

@ -1,69 +0,0 @@
<nb-card size="large">
<nb-tabset fullWidth>
<nb-tab tabTitle="Temperature">
<div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="theme.arcEmpty"
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature h1">
{{ temperatureOff ? '--' : (temperature | ngxRound) }}
</div>
<div class="desc">
Celsius
</div>
</div>
</ngx-temperature-dragger>
</div>
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
<nb-radio value="cool">
<i class="nb-snowy-circled"></i>
</nb-radio>
<nb-radio value="warm">
<i class="nb-sunny-circled"></i>
</nb-radio>
<nb-radio value="heat">
<i class="nb-flame-circled"></i>
</nb-radio>
<nb-radio value="fan">
<i class="nb-loop-circled"></i>
</nb-radio>
</nb-radio-group>
</nb-tab>
<nb-tab tabTitle="Humidity">
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="theme.arcEmpty"
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity h1">
{{ humidityOff ? '--' : (humidity | ngxRound) }}
</div>
</div>
</ngx-temperature-dragger>
</div>
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
<nb-radio value="cool">
<i class="nb-snowy-circled"></i>
</nb-radio>
<nb-radio value="warm">
<i class="nb-sunny-circled"></i>
</nb-radio>
<nb-radio value="heat">
<i class="nb-flame-circled"></i>
</nb-radio>
<nb-radio value="fan">
<i class="nb-loop-circled"></i>
</nb-radio>
</nb-radio-group>
</nb-tab>
</nb-tabset>
</nb-card>

121
src/app/pages/dashboard/temperature/temperature.component.scss
View File

@ -1,121 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-tabset {
display: flex;
flex-direction: column;
height: 100%;
::ng-deep ul {
// make same size as card header
border-color: transparent;
padding-bottom: 1px;
.tab-link {
padding: 1.25rem 2rem;
}
}
}
nb-tab.content-active {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
height: 100%;
}
.slider-container {
display: flex;
flex: 1;
-ms-flex: 1 1 auto;
justify-content: center;
align-items: center;
}
ngx-temperature-dragger {
margin-top: -1.5rem;
width: 100%;
max-width: 300px;
}
.slider-value-container {
display: flex;
flex-direction: column;
align-items: center;
.value {
position: relative;
margin: 0;
&.temperature::before {
position: absolute;
content: '°';
top: 0;
right: -0.85rem;
}
&.humidity::before {
position: absolute;
content: '%';
top: 3px;
right: -1.6rem;
font-size: 0.7em;
}
}
&.off {
.value {
color: nb-theme(text-hint-color);
letter-spacing: 0.25rem;
padding-left: 0.5rem;
&::before {
display: none;
}
}
.desc {
display: none;
}
}
}
nb-radio-group {
display: flex;
justify-content: space-between;
}
nb-radio {
flex: 0 0 auto;
width: calc(3.5rem + 2px);
height: calc(3.5rem + 2px);
::ng-deep {
.outer-circle,
.inner-circle {
display: none;
}
label {
padding: 0;
}
.text {
border: 1px solid transparent;
font-size: 2.5rem;
padding: 0.5rem;
margin: 0;
color: nb-theme(text-hint-color);
}
input:checked ~ .text {
border-color: nb-theme(color-primary-default);
border-radius: nb-theme(card-border-radius);
color: nb-theme(text-primary-color);
}
}
}
}

53
src/app/pages/dashboard/temperature/temperature.component.ts
View File

@ -1,53 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { Temperature, TemperatureHumidityData } from '../../../@core/data/temperature-humidity';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
@Component({
selector: 'ngx-temperature',
styleUrls: ['./temperature.component.scss'],
templateUrl: './temperature.component.html',
})
export class TemperatureComponent implements OnDestroy {
private alive = true;
temperatureData: Temperature;
temperature: number;
temperatureOff = false;
temperatureMode = 'cool';
humidityData: Temperature;
humidity: number;
humidityOff = false;
humidityMode = 'heat';
theme: any;
themeSubscription: any;
constructor(private themeService: NbThemeService,
private temperatureHumidityService: TemperatureHumidityData) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(config => {
this.theme = config.variables.temperature;
});
forkJoin(
this.temperatureHumidityService.getTemperatureData(),
this.temperatureHumidityService.getHumidityData(),
)
.subscribe(([temperatureData, humidityData]: [Temperature, Temperature]) => {
this.temperatureData = temperatureData;
this.temperature = this.temperatureData.value;
this.humidityData = humidityData;
this.humidity = this.humidityData.value;
});
}
ngOnDestroy() {
this.alive = false;
}
}

174
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View File

@ -1,174 +0,0 @@
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;
}
}

35
src/app/pages/dashboard/traffic/traffic.component.scss
View File

@ -1,35 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card {
position: relative;
overflow: hidden;
}
nb-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: nb-theme(card-header-with-select-padding-top);
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
margin-bottom: -1px;
}
ngx-traffic-chart {
flex: 1;
}
::ng-deep {
.echart {
display: block;
height: 100%;
width: 100%;
}
canvas {
border-bottom-left-radius: nb-theme(card-border-radius);
border-bottom-right-radius: nb-theme(card-border-radius);
}
}
}

51
src/app/pages/dashboard/traffic/traffic.component.ts
View File

@ -1,51 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { TrafficChartData } from '../../../@core/data/traffic-chart';
@Component({
selector: 'ngx-traffic',
styleUrls: ['./traffic.component.scss'],
template: `
<nb-card size="tiny">
<nb-card-header>
<span>Traffic Consumption</span>
<nb-select [(selected)]="type">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
</nb-card>
`,
})
export class TrafficComponent implements OnDestroy {
private alive = true;
trafficChartPoints: number[];
type = 'month';
types = ['week', 'month', 'year'];
currentTheme: string;
constructor(private themeService: NbThemeService,
private trafficChartService: TrafficChartData) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
this.trafficChartService.getTrafficChartData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.trafficChartPoints = data;
});
}
ngOnDestroy() {
this.alive = false;
}
}

53
src/app/pages/dashboard/weather/weather.component.html
View File

@ -1,53 +0,0 @@
<nb-card size="medium">
<nb-card-body>
<span class="h3 location">New York</span>
<span class="date">Mon 29 May</span>
<div class="today">
<span class="today-temperature h1">20&deg;</span>
<nb-icon icon="sun-outline" pack="eva" class="today-icon"></nb-icon>
</div>
<div class="today-details">
<div class="parameter">
<span class="caption parameter-name">max</span>
<span class="parameter-value">23&deg;</span>
</div>
<div class="parameter">
<span class="caption parameter-name">min</span>
<span class="parameter-value">19&deg;</span>
</div>
<div class="parameter">
<span class="caption parameter-name">wind</span>
<span class="parameter-value">4 km/h</span>
</div>
<div class="parameter">
<span class="caption parameter-name">hum</span>
<span class="parameter-value">87%</span>
</div>
</div>
<div class="weekly-forecast">
<div class="day">
<span class="caption">Sun</span>
<i class="weather-icon ion-ios-cloudy-outline"></i>
<span class="temperature">17&deg;</span>
</div>
<div class="day">
<span class="caption">Mon</span>
<i class="weather-icon ion-ios-sunny-outline"></i>
<span class="temperature">19&deg;</span>
</div>
<div class="day">
<span class="caption">Tue</span>
<i class="weather-icon ion-ios-rainy-outline"></i>
<span class="temperature">22&deg;</span>
</div>
<div class="day">
<span class="caption">Wed</span>
<i class="weather-icon ion-ios-partlysunny-outline"></i>
<span class="temperature">21&deg;</span>
</div>
</div>
</nb-card-body>
</nb-card>

76
src/app/pages/dashboard/weather/weather.component.scss
View File

@ -1,76 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card-body {
display: flex;
flex-direction: column;
}
.location,
.date {
display: block;
}
.location {
margin-bottom: 0.1rem;
}
.today {
display: flex;
justify-content: space-around;
}
.today-temperature {
display: flex;
flex-direction: column;
justify-content: center;
margin: 2rem 1.5rem;
}
.today-icon {
color: nb-theme(color-primary-default);
font-size: 10rem;
line-height: 1;
margin-top: -4rem;
margin-left: auto;
margin-right: 0.4rem;
}
.today-details {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
.parameter {
flex: 1 1 auto;
text-align: center;
}
.parameter-name,
.parameter-value {
display: block;
}
.caption {
text-transform: uppercase;
}
.weekly-forecast {
display: flex;
justify-content: space-around;
margin: auto 0;
}
.day {
display: flex;
flex-direction: column;
text-align: center;
}
.weather-icon {
font-size: 2.5rem;
line-height: 2.5rem;
}
}

10
src/app/pages/dashboard/weather/weather.component.ts
View File

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-weather',
styleUrls: ['./weather.component.scss'],
templateUrl: './weather.component.html',
})
export class WeatherComponent {
}

7
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
View File

@ -1,7 +0,0 @@
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period">
{{ period }}
</nb-option>
</nb-select>

25
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
View File

@ -1,25 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
padding: 1.5rem 4.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: -1rem;
ngx-legend-chart,
.period-select {
padding-top: 1rem;
@include nb-ltr(padding-left, 0.5rem);
@include nb-rtl(padding-right, 0.5rem);
}
@include media-breakpoint-up(md) {
.period-select {
@include nb-ltr(margin-left, auto);
@include nb-rtl(margin-right, auto);
}
}
}

69
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.ts
View File

@ -1,69 +0,0 @@
import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-chart-panel-header',
styleUrls: ['./chart-panel-header.component.scss'],
templateUrl: './chart-panel-header.component.html',
})
export class ChartPanelHeaderComponent implements OnDestroy {
private alive = true;
@Output() periodChange = new EventEmitter<string>();
@Input() type: string = 'week';
types: string[] = ['week', 'month', 'year'];
chartLegend: {iconColor: string; title: string}[];
breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
breakpoints: any;
currentTheme: string;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
const orderProfitLegend = theme.variables.orderProfitLegend;
this.currentTheme = theme.name;
this.setLegendItems(orderProfitLegend);
});
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
}
setLegendItems(orderProfitLegend) {
this.chartLegend = [
{
iconColor: orderProfitLegend.firstItem,
title: 'Payment',
},
{
iconColor: orderProfitLegend.secondItem,
title: 'Canceled',
},
{
iconColor: orderProfitLegend.thirdItem,
title: 'All orders',
},
];
}
changePeriod(period: string): void {
this.type = period;
this.periodChange.emit(period);
}
ngOnDestroy() {
this.alive = false;
}
}

15
src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
View File

@ -1,15 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
.summary-container {
display: flex;
flex-wrap: wrap;
flex: 1;
background-color: nb-theme(background-basic-color-2);
justify-content: space-between;
padding: 1.5rem 4rem 1rem;
border: 1px solid nb-theme(border-basic-color-3);
border-left: none;
border-right: none;
}
}

18
src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts
View File

@ -1,18 +0,0 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'ngx-chart-panel-summary',
styleUrls: ['./chart-panel-summary.component.scss'],
template: `
<div class="summary-container">
<div *ngFor="let item of summary">
<div>{{ item.title }}</div>
<div class="h6">{{ item.value }}</div>
</div>
</div>
`,
})
export class ChartPanelSummaryComponent {
@Input() summary: {title: string; value: number}[];
}

22
src/app/pages/e-commerce/charts-panel/charts-panel.component.html
View File

@ -1,22 +0,0 @@
<nb-card size="large">
<nb-tabset fullWidth (changeTab)="changeTab($event)">
<nb-tab tabTitle="Orders">
<div class="chart-container">
<ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
<ngx-chart-panel-header [type]="period"
(periodChange)="setPeriodAndGetChartData($event)">
</ngx-chart-panel-header>
<ngx-orders-chart #ordersChart [ordersChartData]="ordersChartData"></ngx-orders-chart>
</div>
</nb-tab>
<nb-tab tabTitle="Profit" [lazyLoad]="true">
<div class="chart-container">
<ngx-chart-panel-summary [summary]="chartPanelSummary"></ngx-chart-panel-summary>
<ngx-chart-panel-header [type]="period"
(periodChange)="setPeriodAndGetChartData($event)">
</ngx-chart-panel-header>
<ngx-profit-chart #profitChart [profitChartData]="profitChartData"></ngx-profit-chart>
</div>
</nb-tab>
</nb-tabset>
</nb-card>

41
src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
View File

@ -1,41 +0,0 @@
@import '../../../@theme/styles/themes';
$legend-all-orders-color: #00977e;
$legend-payment-color: #6935ca;
$legend-canceled-color: #3f4fda;
@include nb-install-component() {
nb-tabset {
display: flex;
flex-direction: column;
flex: 1;
::ng-deep ul {
// make same size as card header
border-color: transparent;
padding-bottom: 1px;
.tab-link {
padding: 1.25rem 2rem;
}
}
}
nb-tab {
flex: 1;
padding: 0 0 1.25rem;
}
.chart-container {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
ngx-profit-chart,
ngx-orders-chart {
padding: 0 1.25rem;
}
}

74
src/app/pages/e-commerce/charts-panel/charts-panel.component.ts
View File

@ -1,74 +0,0 @@
import { Component, OnDestroy, ViewChild } from '@angular/core';
import { takeWhile } from 'rxjs/operators';
import { OrdersChartComponent } from './charts/orders-chart.component';
import { ProfitChartComponent } from './charts/profit-chart.component';
import { OrdersChart } from '../../../@core/data/orders-chart';
import { ProfitChart } from '../../../@core/data/profit-chart';
import { OrderProfitChartSummary, OrdersProfitChartData } from '../../../@core/data/orders-profit-chart';
@Component({
selector: 'ngx-ecommerce-charts',
styleUrls: ['./charts-panel.component.scss'],
templateUrl: './charts-panel.component.html',
})
export class ECommerceChartsPanelComponent implements OnDestroy {
private alive = true;
chartPanelSummary: OrderProfitChartSummary[];
period: string = 'week';
ordersChartData: OrdersChart;
profitChartData: ProfitChart;
@ViewChild('ordersChart', { static: true }) ordersChart: OrdersChartComponent;
@ViewChild('profitChart', { static: true }) profitChart: ProfitChartComponent;
constructor(private ordersProfitChartService: OrdersProfitChartData) {
this.ordersProfitChartService.getOrderProfitChartSummary()
.pipe(takeWhile(() => this.alive))
.subscribe((summary) => {
this.chartPanelSummary = summary;
});
this.getOrdersChartData(this.period);
this.getProfitChartData(this.period);
}
setPeriodAndGetChartData(value: string): void {
if (this.period !== value) {
this.period = value;
}
this.getOrdersChartData(value);
this.getProfitChartData(value);
}
changeTab(selectedTab) {
if (selectedTab.tabTitle === 'Profit') {
this.profitChart.resizeChart();
} else {
this.ordersChart.resizeChart();
}
}
getOrdersChartData(period: string) {
this.ordersProfitChartService.getOrdersChartData(period)
.pipe(takeWhile(() => this.alive))
.subscribe(ordersChartData => {
this.ordersChartData = ordersChartData;
});
}
getProfitChartData(period: string) {
this.ordersProfitChartService.getProfitChartData(period)
.pipe(takeWhile(() => this.alive))
.subscribe(profitChartData => {
this.profitChartData = profitChartData;
});
}
ngOnDestroy() {
this.alive = false;
}
}

11
src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss
View File

@ -1,11 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
flex: 1;
.echart {
display: block;
height: 100%;
width: 100%;
}
}

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

@ -1,308 +0,0 @@
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"
[merge]="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;
}
}

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

@ -1,200 +0,0 @@
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;
}
}

23
src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
View File

@ -1,23 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
padding: nb-theme(card-padding);
.header {
margin-left: 1rem;
}
.echart {
height: 75%;
}
@include media-breakpoint-down(sm) {
height: 50%;
}
}

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

@ -1,181 +0,0 @@
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;
}
}

18
src/app/pages/e-commerce/country-orders/country-orders.component.scss
View File

@ -1,18 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-card-body {
display: flex;
height: 100%;
padding: 0;
}
@include media-breakpoint-down(sm) {
nb-card-body {
flex-direction: column;
}
}
}

67
src/app/pages/e-commerce/country-orders/country-orders.component.ts
View File

@ -1,67 +0,0 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { CountryOrderData } from '../../../@core/data/country-order';
@Component({
selector: 'ngx-country-orders',
styleUrls: ['./country-orders.component.scss'],
template: `
<nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
<nb-card-header>Country Orders Statistics</nb-card-header>
<nb-card-body>
<ngx-country-orders-map (select)="selectCountryById($event)"
countryId="USA">
</ngx-country-orders-map>
<ngx-country-orders-chart [countryName]="countryName"
[data]="countryData"
[labels]="countriesCategories"
maxValue="20">
</ngx-country-orders-chart>
</nb-card-body>
</nb-card>
`,
})
export class CountryOrdersComponent implements OnInit, OnDestroy {
private alive = true;
countryName = '';
countryData: number[] = [];
countriesCategories: string[];
breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
breakpoints: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService,
private countryOrderService: CountryOrderData) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
}
ngOnInit() {
this.themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
this.countryOrderService.getCountriesCategories()
.pipe(takeWhile(() => this.alive))
.subscribe((countriesCategories) => {
this.countriesCategories = countriesCategories;
});
}
selectCountryById(countryName: string) {
this.countryName = countryName;
this.countryOrderService.getCountriesCategoriesData(countryName)
.pipe(takeWhile(() => this.alive))
.subscribe((countryData) => {
this.countryData = countryData;
});
}
ngOnDestroy() {
this.alive = false;
}
}

57
src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
View File

@ -1,57 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
display: block;
height: 100%;
width: 60%;
.leaflet-container {
height: 100%;
background-color: nb-theme(background-basic-color-2);
}
::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
z-index: 997;
}
::ng-deep .leaflet-bar {
box-shadow: none;
}
::ng-deep .leaflet-control-zoom {
border: none;
a {
background-color: nb-theme(color-primary-default);
color: nb-theme(text-alternate-color);
border-bottom: none;
}
.leaflet-disabled {
background-color: nb-theme(color-primary-disabled);
}
.leaflet-control-zoom-in {
border-top-left-radius: nb-theme(button-rectangle-border-radius);
border-top-right-radius: nb-theme(button-rectangle-border-radius);
}
.leaflet-control-zoom-out {
margin-top: 1px;
border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
}
}
::ng-deep .leaflet-control-attribution {
background: transparent;
}
@include media-breakpoint-down(sm) {
width: 100%;
height: 50%;
}
}

144
src/app/pages/e-commerce/country-orders/map/country-orders-map.component.ts
View File

@ -1,144 +0,0 @@
import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import * as L from 'leaflet';
import { CountryOrdersMapService } from './country-orders-map.service';
import { NbThemeService } from '@nebular/theme';
import { combineLatest } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-country-orders-map',
styleUrls: ['./country-orders-map.component.scss'],
template: `
<div leaflet [leafletOptions]="options" [leafletLayers]="layers" (leafletMapReady)="mapReady($event)"></div>
`,
})
export class CountryOrdersMapComponent implements OnDestroy {
@Input() countryId: string;
@Output() select: EventEmitter<any> = new EventEmitter();
layers = [];
currentTheme: any;
alive = true;
selectedCountry;
options = {
zoom: 2,
minZoom: 2,
maxZoom: 6,
zoomControl: false,
center: L.latLng({lat: 38.991709, lng: -76.886109}),
maxBounds: new L.LatLngBounds(
new L.LatLng(-89.98155760646617, -180),
new L.LatLng(89.99346179538875, 180),
),
maxBoundsViscosity: 1.0,
};
constructor(private ecMapService: CountryOrdersMapService,
private theme: NbThemeService) {
combineLatest([
this.ecMapService.getCords(),
this.theme.getJsTheme(),
])
.pipe(takeWhile(() => this.alive))
.subscribe(([cords, config]: [any, any]) => {
this.currentTheme = config.variables.countryOrders;
this.layers = [this.createGeoJsonLayer(cords)];
this.selectFeature(this.findFeatureLayerByCountryId(this.countryId));
});
}
mapReady(map: L.Map) {
map.addControl(L.control.zoom({position: 'bottomright'}));
// fix the map fully displaying, existing leaflet bag
setTimeout(() => {
map.invalidateSize();
}, 0);
}
private createGeoJsonLayer(cords) {
return L.geoJSON(
cords as any,
{
style: () => ({
weight: this.currentTheme.countryBorderWidth,
fillColor: this.currentTheme.countryFillColor,
fillOpacity: 1,
color: this.currentTheme.countryBorderColor,
opacity: 1,
}),
onEachFeature: (f, l) => {
this.onEachFeature(f, l);
},
});
}
private onEachFeature(feature, layer) {
layer.on({
mouseover: (e) => this.highlightFeature(e.target),
mouseout: (e) => this.moveout(e.target),
click: (e) => this.selectFeature(e.target),
});
}
private highlightFeature(featureLayer) {
if (featureLayer) {
featureLayer.setStyle({
weight: this.currentTheme.hoveredCountryBorderWidth,
fillColor: this.currentTheme.hoveredCountryFillColor,
color: this.currentTheme.hoveredCountryBorderColor,
});
if (!L.Browser.ie && !L.Browser.opera12 && !L.Browser.edge) {
featureLayer.bringToFront();
}
}
}
private moveout(featureLayer) {
if (featureLayer !== this.selectedCountry) {
this.resetHighlight(featureLayer);
// When countries have common border we should highlight selected country once again
this.highlightFeature(this.selectedCountry);
}
}
private resetHighlight(featureLayer) {
if (featureLayer) {
const geoJsonLayer = this.layers[0];
geoJsonLayer.resetStyle(featureLayer);
}
}
private selectFeature(featureLayer) {
if (featureLayer !== this.selectedCountry) {
this.resetHighlight(this.selectedCountry);
this.highlightFeature(featureLayer);
this.selectedCountry = featureLayer;
this.select.emit(featureLayer.feature.properties.name);
}
}
private findFeatureLayerByCountryId(id) {
const layers = this.layers[0].getLayers();
const featureLayer = layers.find(item => {
return item.feature.id === id;
});
return featureLayer ? featureLayer : null;
}
ngOnDestroy(): void {
this.alive = false;
}
}

15
src/app/pages/e-commerce/country-orders/map/country-orders-map.service.ts
View File

@ -1,15 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class CountryOrdersMapService {
constructor(private http: HttpClient) {}
getCords(): Observable<any> {
return this.http.get('assets/leaflet-countries/countries.geo.json');
}
}

38
src/app/pages/e-commerce/e-commerce.component.html
View File

@ -1,38 +0,0 @@
<div class="row">
<div class="col-xxl-5">
<div class="row">
<div class="col-md-6">
<ngx-profit-card></ngx-profit-card>
</div>
<div class="col-md-6">
<ngx-earning-card></ngx-earning-card>
</div>
</div>
<ngx-traffic-reveal-card></ngx-traffic-reveal-card>
</div>
<div class="col-xxl-7">
<ngx-ecommerce-charts></ngx-ecommerce-charts>
</div>
</div>
<div class="row">
<div class="col-xxl-9">
<ngx-country-orders></ngx-country-orders>
</div>
<div class="col-xxl-3">
<ngx-progress-section></ngx-progress-section>
</div>
</div>
<div class="row">
<div class="col-xxl-9">
<ngx-ecommerce-visitors-analytics></ngx-ecommerce-visitors-analytics>
</div>
<div class="col-xxl-3">
<ngx-user-activity></ngx-user-activity>
</div>
</div>

8
src/app/pages/e-commerce/e-commerce.component.ts
View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-ecommerce',
templateUrl: './e-commerce.component.html',
})
export class ECommerceComponent {
}

113
src/app/pages/e-commerce/e-commerce.module.ts
View File

@ -1,113 +0,0 @@
import { NgModule } from '@angular/core';
import {
NbButtonModule,
NbCardModule,
NbProgressBarModule,
NbTabsetModule,
NbUserModule,
NbIconModule,
NbSelectModule,
NbListModule,
} from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { ThemeModule } from '../../@theme/theme.module';
import { ECommerceComponent } from './e-commerce.component';
import { ProfitCardComponent } from './profit-card/profit-card.component';
import { ECommerceChartsPanelComponent } from './charts-panel/charts-panel.component';
import { OrdersChartComponent } from './charts-panel/charts/orders-chart.component';
import { ProfitChartComponent } from './charts-panel/charts/profit-chart.component';
import { ChartPanelHeaderComponent } from './charts-panel/chart-panel-header/chart-panel-header.component';
import { ChartPanelSummaryComponent } from './charts-panel/chart-panel-summary/chart-panel-summary.component';
import { ChartModule } from 'angular2-chartjs';
import { StatsCardBackComponent } from './profit-card/back-side/stats-card-back.component';
import { StatsAreaChartComponent } from './profit-card/back-side/stats-area-chart.component';
import { StatsBarAnimationChartComponent } from './profit-card/front-side/stats-bar-animation-chart.component';
import { StatsCardFrontComponent } from './profit-card/front-side/stats-card-front.component';
import { TrafficRevealCardComponent } from './traffic-reveal-card/traffic-reveal-card.component';
import { TrafficBarComponent } from './traffic-reveal-card/front-side/traffic-bar/traffic-bar.component';
import { TrafficFrontCardComponent } from './traffic-reveal-card/front-side/traffic-front-card.component';
import { TrafficCardsHeaderComponent } from './traffic-reveal-card/traffic-cards-header/traffic-cards-header.component';
import { TrafficBackCardComponent } from './traffic-reveal-card/back-side/traffic-back-card.component';
import { TrafficBarChartComponent } from './traffic-reveal-card/back-side/traffic-bar-chart.component';
import {
ECommerceVisitorsAnalyticsComponent,
} from './visitors-analytics/visitors-analytics.component';
import {
ECommerceVisitorsAnalyticsChartComponent,
} from './visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component';
import {
ECommerceVisitorsStatisticsComponent,
} from './visitors-analytics/visitors-statistics/visitors-statistics.component';
import { ECommerceLegendChartComponent } from './legend-chart/legend-chart.component';
import { ECommerceUserActivityComponent } from './user-activity/user-activity.component';
import { ECommerceProgressSectionComponent } from './progress-section/progress-section.component';
import { SlideOutComponent } from './slide-out/slide-out.component';
import { CountryOrdersComponent } from './country-orders/country-orders.component';
import { CountryOrdersMapComponent } from './country-orders/map/country-orders-map.component';
import { CountryOrdersMapService } from './country-orders/map/country-orders-map.service';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { CountryOrdersChartComponent } from './country-orders/chart/country-orders-chart.component';
import { EarningCardComponent } from './earning-card/earning-card.component';
import { EarningCardBackComponent } from './earning-card/back-side/earning-card-back.component';
import { EarningPieChartComponent } from './earning-card/back-side/earning-pie-chart.component';
import { EarningCardFrontComponent } from './earning-card/front-side/earning-card-front.component';
import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earning-live-update-chart.component';
@NgModule({
imports: [
ThemeModule,
NbCardModule,
NbUserModule,
NbButtonModule,
NbIconModule,
NbTabsetModule,
NbSelectModule,
NbListModule,
ChartModule,
NbProgressBarModule,
NgxEchartsModule,
NgxChartsModule,
LeafletModule,
],
declarations: [
ECommerceComponent,
StatsCardFrontComponent,
StatsAreaChartComponent,
StatsBarAnimationChartComponent,
ProfitCardComponent,
ECommerceChartsPanelComponent,
ChartPanelHeaderComponent,
ChartPanelSummaryComponent,
OrdersChartComponent,
ProfitChartComponent,
StatsCardBackComponent,
TrafficRevealCardComponent,
TrafficBarChartComponent,
TrafficFrontCardComponent,
TrafficBackCardComponent,
TrafficBarComponent,
TrafficCardsHeaderComponent,
CountryOrdersComponent,
CountryOrdersMapComponent,
CountryOrdersChartComponent,
ECommerceVisitorsAnalyticsComponent,
ECommerceVisitorsAnalyticsChartComponent,
ECommerceVisitorsStatisticsComponent,
ECommerceLegendChartComponent,
ECommerceUserActivityComponent,
ECommerceProgressSectionComponent,
SlideOutComponent,
EarningCardComponent,
EarningCardFrontComponent,
EarningCardBackComponent,
EarningPieChartComponent,
EarningLiveUpdateChartComponent,
],
providers: [
CountryOrdersMapService,
],
})
export class ECommerceModule { }

14
src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html
View File

@ -1,14 +0,0 @@
<nb-card-header>
Earnings
</nb-card-header>
<nb-card-body>
<div class="chart-info">
<div [style.color]="color">{{ name }}</div>
<div class="time-period caption">Last week:</div>
<div class="h6">{{ value }}%</div>
</div>
<ngx-earning-pie-chart [values]="earningPieChartData"
(selectPie)="changeChartInfo($event)"
[defaultSelectedCurrency]="defaultSelectedCurrency">
</ngx-earning-pie-chart>
</nb-card-body>

40
src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
View File

@ -1,40 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
ngx-earning-pie-chart,
.chart-info {
flex: 1;
}
.chart-info {
padding-top: 0.7rem;
}
.time-period {
margin-top: 1.5rem;
}
.value {
margin-top: 0.2rem;
}
.echart {
position: absolute;
width: calc(50% - 1.25rem);
height: calc(100% - 2rem);
}
@include media-breakpoint-between(xl, xl) {
ngx-earning-pie-chart {
flex: 2;
}
}
@include media-breakpoint-between(sm, sm) {
ngx-earning-pie-chart {
flex: 2;
}
}
}

36
src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.ts
View File

@ -1,36 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { PieChart, EarningData } from '../../../../@core/data/earning';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-earning-card-back',
styleUrls: ['./earning-card-back.component.scss'],
templateUrl: './earning-card-back.component.html',
})
export class EarningCardBackComponent implements OnDestroy {
private alive = true;
earningPieChartData: PieChart[];
name: string;
color: string;
value: number;
defaultSelectedCurrency: string = 'Bitcoin';
constructor(private earningService: EarningData ) {
this.earningService.getEarningPieChartData()
.pipe(takeWhile(() => this.alive))
.subscribe((earningPieChartData) => {
this.earningPieChartData = earningPieChartData;
});
}
changeChartInfo(pieData: {value: number; name: string; color: any}) {
this.value = pieData.value;
this.name = pieData.name;
this.color = pieData.color;
}
ngOnDestroy() {
this.alive = false;
}
}

Some files were not shown because too many files have changed in this diff Show More