diff --git a/package-lock.json b/package-lock.json index 73b85d9..0a1bd5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@angular/compiler": "^16.2.12", "@angular/core": "^16.2.12", "@angular/forms": "^16.2.12", - "@angular/google-maps": "^12.2.13", "@angular/platform-browser": "^16.2.12", "@angular/platform-browser-dynamic": "^16.2.12", "@angular/router": "^16.2.12", @@ -918,20 +917,6 @@ "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": { "version": "16.2.12", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-16.2.12.tgz", @@ -4988,12 +4973,6 @@ "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "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": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", @@ -24652,15 +24631,6 @@ "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": { "version": "16.2.12", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-16.2.12.tgz", @@ -27547,11 +27517,6 @@ "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", "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": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", diff --git a/package.json b/package.json index e245406..214fad2 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,6 @@ "@angular/compiler": "^16.2.12", "@angular/core": "^16.2.12", "@angular/forms": "^16.2.12", - "@angular/google-maps": "^12.2.13", "@angular/platform-browser": "^16.2.12", "@angular/platform-browser-dynamic": "^16.2.12", "@angular/router": "^16.2.12", @@ -111,4 +110,4 @@ "ts-node": "3.2.2", "typescript": "~4.9.5" } -} \ No newline at end of file +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ba83c75..d09b090 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -17,11 +17,6 @@ export const routes: Routes = [ loadChildren: () => import('./invitation/invitation.module') .then(m => m.InvitationModule), }, - { - path: 'pages', - loadChildren: () => import('./pages/pages.module') - .then(m => m.PagesModule), - }, { path: 'auth', component: NbAuthComponent, diff --git a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts deleted file mode 100644 index 803c751..0000000 --- a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-chartjs-bar-horizontal', - template: ` - - `, -}) -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); - } -} diff --git a/src/app/pages/charts/chartjs/chartjs-bar.component.ts b/src/app/pages/charts/chartjs/chartjs-bar.component.ts deleted file mode 100644 index 0fa9535..0000000 --- a/src/app/pages/charts/chartjs/chartjs-bar.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService, NbColorHelper } from '@nebular/theme'; - -@Component({ - selector: 'ngx-chartjs-bar', - template: ` - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/chartjs/chartjs-line.component.ts b/src/app/pages/charts/chartjs/chartjs-line.component.ts deleted file mode 100644 index b4cfcfe..0000000 --- a/src/app/pages/charts/chartjs/chartjs-line.component.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService, NbColorHelper } from '@nebular/theme'; - -@Component({ - selector: 'ngx-chartjs-line', - template: ` - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts deleted file mode 100644 index ec2e485..0000000 --- a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-chartjs-multiple-xaxis', - template: ` - - `, -}) -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); - } -} diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts deleted file mode 100644 index 8d9dbf9..0000000 --- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-chartjs-pie', - template: ` - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/chartjs/chartjs-radar.component.ts b/src/app/pages/charts/chartjs/chartjs-radar.component.ts deleted file mode 100644 index 20b7257..0000000 --- a/src/app/pages/charts/chartjs/chartjs-radar.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService, NbColorHelper } from '@nebular/theme'; - -@Component({ - selector: 'ngx-chartjs-radar', - template: ` - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/chartjs/chartjs.component.html b/src/app/pages/charts/chartjs/chartjs.component.html deleted file mode 100644 index dbcafda..0000000 --- a/src/app/pages/charts/chartjs/chartjs.component.html +++ /dev/null @@ -1,50 +0,0 @@ -
-
- - Pie - - - - -
-
- - Bar - - - - -
-
- - Line - - - - -
-
- - Multiple x-axis - - - - -
-
- - Bar Horizontal - - - - -
-
- - Radar - - - - -
-
diff --git a/src/app/pages/charts/chartjs/chartjs.component.scss b/src/app/pages/charts/chartjs/chartjs.component.scss deleted file mode 100644 index 6c4e189..0000000 --- a/src/app/pages/charts/chartjs/chartjs.component.scss +++ /dev/null @@ -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%; - } - } -} diff --git a/src/app/pages/charts/chartjs/chartjs.component.ts b/src/app/pages/charts/chartjs/chartjs.component.ts deleted file mode 100644 index 659a19a..0000000 --- a/src/app/pages/charts/chartjs/chartjs.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-chartjs', - styleUrls: ['./chartjs.component.scss'], - templateUrl: './chartjs.component.html', -}) -export class ChartjsComponent {} diff --git a/src/app/pages/charts/charts-routing.module.ts b/src/app/pages/charts/charts-routing.module.ts deleted file mode 100644 index 3ce0a5b..0000000 --- a/src/app/pages/charts/charts-routing.module.ts +++ /dev/null @@ -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, -]; diff --git a/src/app/pages/charts/charts.component.ts b/src/app/pages/charts/charts.component.ts deleted file mode 100644 index c8bc8db..0000000 --- a/src/app/pages/charts/charts.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-charts', - template: ` - - `, -}) -export class ChartsComponent { -} diff --git a/src/app/pages/charts/charts.module.ts b/src/app/pages/charts/charts.module.ts deleted file mode 100644 index 32b4fd9..0000000 --- a/src/app/pages/charts/charts.module.ts +++ /dev/null @@ -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 {} diff --git a/src/app/pages/charts/d3/d3-advanced-pie.component.ts b/src/app/pages/charts/d3/d3-advanced-pie.component.ts deleted file mode 100644 index 21d44e9..0000000 --- a/src/app/pages/charts/d3/d3-advanced-pie.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-d3-advanced-pie', - template: ` - - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/d3/d3-area-stack.component.ts b/src/app/pages/charts/d3/d3-area-stack.component.ts deleted file mode 100644 index 367fccb..0000000 --- a/src/app/pages/charts/d3/d3-area-stack.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-d3-area-stack', - template: ` - - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/d3/d3-bar.component.ts b/src/app/pages/charts/d3/d3-bar.component.ts deleted file mode 100644 index 1935758..0000000 --- a/src/app/pages/charts/d3/d3-bar.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-d3-bar', - template: ` - - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/d3/d3-line.component.ts b/src/app/pages/charts/d3/d3-line.component.ts deleted file mode 100644 index f1d4b4e..0000000 --- a/src/app/pages/charts/d3/d3-line.component.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-d3-line', - template: ` - - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/d3/d3-pie.component.ts b/src/app/pages/charts/d3/d3-pie.component.ts deleted file mode 100644 index 39faf8c..0000000 --- a/src/app/pages/charts/d3/d3-pie.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-d3-pie', - template: ` - - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/d3/d3-polar.component.ts b/src/app/pages/charts/d3/d3-polar.component.ts deleted file mode 100644 index e7fe3c9..0000000 --- a/src/app/pages/charts/d3/d3-polar.component.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-d3-polar', - template: ` - - - `, -}) -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(); - } -} diff --git a/src/app/pages/charts/d3/d3.component.html b/src/app/pages/charts/d3/d3.component.html deleted file mode 100644 index bb1275b..0000000 --- a/src/app/pages/charts/d3/d3.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
- - Pie - - - - -
-
- - Bar - - - - -
-
- - Line - - - - -
-
- - Advanced Pie - - - - -
-
- - Area Chart - - - - -
-
diff --git a/src/app/pages/charts/d3/d3.component.scss b/src/app/pages/charts/d3/d3.component.scss deleted file mode 100644 index 3ddb4e8..0000000 --- a/src/app/pages/charts/d3/d3.component.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/app/pages/charts/d3/d3.component.ts b/src/app/pages/charts/d3/d3.component.ts deleted file mode 100644 index 6eaf9ea..0000000 --- a/src/app/pages/charts/d3/d3.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-d3', - styleUrls: ['./d3.component.scss'], - templateUrl: './d3.component.html', -}) -export class D3Component {} diff --git a/src/app/pages/charts/echarts/echarts-area-stack.component.ts b/src/app/pages/charts/echarts/echarts-area-stack.component.ts deleted file mode 100644 index a9e0e4c..0000000 --- a/src/app/pages/charts/echarts/echarts-area-stack.component.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { AfterViewInit, Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-area-stack', - template: ` -
- `, -}) -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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts deleted file mode 100644 index 32c9505..0000000 --- a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { AfterViewInit, Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-bar-animation', - template: ` -
- `, -}) -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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts-bar.component.ts b/src/app/pages/charts/echarts/echarts-bar.component.ts deleted file mode 100644 index db753b2..0000000 --- a/src/app/pages/charts/echarts/echarts-bar.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { AfterViewInit, Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-bar', - template: ` -
- `, -}) -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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts-line.component.ts b/src/app/pages/charts/echarts/echarts-line.component.ts deleted file mode 100644 index 7be38d5..0000000 --- a/src/app/pages/charts/echarts/echarts-line.component.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { AfterViewInit, Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-line', - template: ` -
- `, -}) -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}
{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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts deleted file mode 100644 index 5daefea..0000000 --- a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { Component, AfterViewInit, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-multiple-xaxis', - template: ` -
- `, -}) -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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts-pie.component.ts b/src/app/pages/charts/echarts/echarts-pie.component.ts deleted file mode 100644 index 9373d30..0000000 --- a/src/app/pages/charts/echarts/echarts-pie.component.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { AfterViewInit, Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-pie', - template: ` -
- `, -}) -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}
{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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts-radar.component.ts b/src/app/pages/charts/echarts/echarts-radar.component.ts deleted file mode 100644 index 6b3229a..0000000 --- a/src/app/pages/charts/echarts/echarts-radar.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { AfterViewInit, Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-echarts-radar', - template: ` -
- `, -}) -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(); - } -} diff --git a/src/app/pages/charts/echarts/echarts.component.html b/src/app/pages/charts/echarts/echarts.component.html deleted file mode 100644 index b3a7ec4..0000000 --- a/src/app/pages/charts/echarts/echarts.component.html +++ /dev/null @@ -1,58 +0,0 @@ -
-
- - Pie - - - - -
-
- - Bar - - - - -
-
- - Line - - - - -
-
- - Multiple x-axis - - - - -
-
- - Area Stack - - - - -
-
- - Bar Animation - - - - -
-
- - Radar - - - - -
-
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss deleted file mode 100644 index 6f3cb3c..0000000 --- a/src/app/pages/charts/echarts/echarts.component.scss +++ /dev/null @@ -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%; - } -} diff --git a/src/app/pages/charts/echarts/echarts.component.ts b/src/app/pages/charts/echarts/echarts.component.ts deleted file mode 100644 index 66bb439..0000000 --- a/src/app/pages/charts/echarts/echarts.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-echarts', - styleUrls: ['./echarts.component.scss'], - templateUrl: './echarts.component.html', -}) -export class EchartsComponent {} diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html deleted file mode 100644 index 0aac40b..0000000 --- a/src/app/pages/dashboard/contacts/contacts.component.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - {{ c.time | date: 'shortTime' }} - - - - - - diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss deleted file mode 100644 index 787ed0b..0000000 --- a/src/app/pages/dashboard/contacts/contacts.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/dashboard/contacts/contacts.component.ts b/src/app/pages/dashboard/contacts/contacts.component.ts deleted file mode 100644 index c8a523d..0000000 --- a/src/app/pages/dashboard/contacts/contacts.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html deleted file mode 100644 index 6b99758..0000000 --- a/src/app/pages/dashboard/dashboard.component.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
- - - -
-
- -
-
- -
- -
- -
-
- -
-
- -
- -
- -
- -
- - - -
- -
- - -
- -
- -
-
diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss deleted file mode 100644 index c9e3499..0000000 --- a/src/app/pages/dashboard/dashboard.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts deleted file mode 100644 index c359216..0000000 --- a/src/app/pages/dashboard/dashboard.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts deleted file mode 100644 index b938dd6..0000000 --- a/src/app/pages/dashboard/dashboard.module.ts +++ /dev/null @@ -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 { } diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss deleted file mode 100644 index 3debfa4..0000000 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss +++ /dev/null @@ -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%; - } -} diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts deleted file mode 100644 index f8fac76..0000000 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ /dev/null @@ -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: ` -
-
- `, -}) -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; - } -} diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html deleted file mode 100644 index 7085cbd..0000000 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - Electricity Consumption - - - - - - - {{ month.month }} - - - - {{ month.delta }} - - - {{ month.kWatts }} kWh / {{ month.cost }} USD - - - - - - - - - - - Consumed - 816 kWh - - - Spent - 291 USD - - - - {{ t }} - - - - - - diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss deleted file mode 100644 index 6c97668..0000000 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/dashboard/electricity/electricity.component.ts b/src/app/pages/dashboard/electricity/electricity.component.ts deleted file mode 100644 index bf16e49..0000000 --- a/src/app/pages/dashboard/electricity/electricity.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/kitten/kitten.component.html b/src/app/pages/dashboard/kitten/kitten.component.html deleted file mode 100644 index 54a6488..0000000 --- a/src/app/pages/dashboard/kitten/kitten.component.html +++ /dev/null @@ -1,25 +0,0 @@ - -
- -
-
UI Kitten
-
- 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! -
-
- - - - - - - - - - - - - - - - diff --git a/src/app/pages/dashboard/kitten/kitten.component.scss b/src/app/pages/dashboard/kitten/kitten.component.scss deleted file mode 100644 index 5aa6788..0000000 --- a/src/app/pages/dashboard/kitten/kitten.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/dashboard/kitten/kitten.component.ts b/src/app/pages/dashboard/kitten/kitten.component.ts deleted file mode 100644 index bab6305..0000000 --- a/src/app/pages/dashboard/kitten/kitten.component.ts +++ /dev/null @@ -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(); - } -} diff --git a/src/app/pages/dashboard/rooms/player/player.component.html b/src/app/pages/dashboard/rooms/player/player.component.html deleted file mode 100644 index 75323a8..0000000 --- a/src/app/pages/dashboard/rooms/player/player.component.html +++ /dev/null @@ -1,59 +0,0 @@ - - My Playlist - - -
-
-
-

{{ track.name }}

- {{ track.artist }} -
-
- -
- -
-
- -
- {{ player.currentTime | timing }} - - {{ player.duration - player.currentTime | timing }} -
- -
- - - - - -
- - - -
- -
- -
-
- -
- - diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss deleted file mode 100644 index bbe30ef..0000000 --- a/src/app/pages/dashboard/rooms/player/player.component.scss +++ /dev/null @@ -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); - } - } -} diff --git a/src/app/pages/dashboard/rooms/player/player.component.ts b/src/app/pages/dashboard/rooms/player/player.component.ts deleted file mode 100644 index ce0327c..0000000 --- a/src/app/pages/dashboard/rooms/player/player.component.ts +++ /dev/null @@ -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(); - } -} diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html deleted file mode 100644 index 1226fa0..0000000 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html +++ /dev/null @@ -1,90 +0,0 @@ - - Room Management -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{room.name.text}} - - -
- diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss deleted file mode 100644 index d66ebb2..0000000 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts deleted file mode 100644 index 7e0639a..0000000 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts +++ /dev/null @@ -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(); - private hideGrid: boolean; - - @Output() select: EventEmitter = 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})`; - } -} diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss deleted file mode 100644 index 1086912..0000000 --- a/src/app/pages/dashboard/rooms/rooms.component.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts deleted file mode 100644 index 8235f4d..0000000 --- a/src/app/pages/dashboard/rooms/rooms.component.ts +++ /dev/null @@ -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: ` - - - - - - - `, -}) -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(); - } -} diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.html b/src/app/pages/dashboard/security-cameras/security-cameras.component.html deleted file mode 100644 index 739acc0..0000000 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - Security Cameras - - - - - -
- -
-
- {{ selectedCamera.title }} -
-
- -
-
- {{ camera.title }} -
-
- -
- - - - - - Pause - - - - Logs - - - - Search - - - - Setup - - - - diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss deleted file mode 100644 index 567b323..0000000 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.ts b/src/app/pages/dashboard/security-cameras/security-cameras.component.ts deleted file mode 100644 index 3daf032..0000000 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.ts +++ /dev/null @@ -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(); - - 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; - } -} diff --git a/src/app/pages/dashboard/solar/solar.component.scss b/src/app/pages/dashboard/solar/solar.component.scss deleted file mode 100644 index ff36cdf..0000000 --- a/src/app/pages/dashboard/solar/solar.component.scss +++ /dev/null @@ -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); - } -} diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts deleted file mode 100644 index 07754dd..0000000 --- a/src/app/pages/dashboard/solar/solar.component.ts +++ /dev/null @@ -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: ` - - Solar Energy Consumption - -
-
-
-
6.421 kWh
-
out of 8.421 kWh
-
- - - `, -}) -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}
{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(); - } -} diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss deleted file mode 100644 index 03be02f..0000000 --- a/src/app/pages/dashboard/status-card/status-card.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/dashboard/status-card/status-card.component.ts b/src/app/pages/dashboard/status-card/status-card.component.ts deleted file mode 100644 index 1627640..0000000 --- a/src/app/pages/dashboard/status-card/status-card.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'ngx-status-card', - styleUrls: ['./status-card.component.scss'], - template: ` - -
-
- -
-
- -
-
{{ title }}
-
{{ on ? 'ON' : 'OFF' }}
-
- - `, -}) -export class StatusCardComponent { - - @Input() title: string; - @Input() type: string; - @Input() on = true; -} diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html deleted file mode 100644 index 7f46e33..0000000 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html +++ /dev/null @@ -1,47 +0,0 @@ - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss deleted file mode 100644 index 0fa12c1..0000000 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts deleted file mode 100644 index a585301..0000000 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts +++ /dev/null @@ -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(); - @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(); - - @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; - } -} diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html deleted file mode 100644 index 8f6c0e4..0000000 --- a/src/app/pages/dashboard/temperature/temperature.component.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - -
- - -
-
- {{ temperatureOff ? '--' : (temperature | ngxRound) }} -
-
- Celsius -
-
- -
- - - - - - - - - - - - - - - - - - - -
- - -
-
- {{ humidityOff ? '--' : (humidity | ngxRound) }} -
-
- -
- - - - - - - - - - - - - - - - - - diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss deleted file mode 100644 index cb447c1..0000000 --- a/src/app/pages/dashboard/temperature/temperature.component.scss +++ /dev/null @@ -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); - } - } - } -} diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts deleted file mode 100644 index 4706f5f..0000000 --- a/src/app/pages/dashboard/temperature/temperature.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts deleted file mode 100644 index e4e3e38..0000000 --- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts +++ /dev/null @@ -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: ` -
-
- `, -}) -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; - } -} diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss deleted file mode 100644 index abe930e..0000000 --- a/src/app/pages/dashboard/traffic/traffic.component.scss +++ /dev/null @@ -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); - } - } -} diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts deleted file mode 100644 index 3ddd6e2..0000000 --- a/src/app/pages/dashboard/traffic/traffic.component.ts +++ /dev/null @@ -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: ` - - - Traffic Consumption - - - {{ t }} - - - - - - `, -}) -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; - } -} diff --git a/src/app/pages/dashboard/weather/weather.component.html b/src/app/pages/dashboard/weather/weather.component.html deleted file mode 100644 index 5df699d..0000000 --- a/src/app/pages/dashboard/weather/weather.component.html +++ /dev/null @@ -1,53 +0,0 @@ - - - New York - Mon 29 May - -
- 20° - -
- -
-
- max - 23° -
-
- min - 19° -
-
- wind - 4 km/h -
-
- hum - 87% -
-
- -
-
- Sun - - 17° -
-
- Mon - - 19° -
-
- Tue - - 22° -
-
- Wed - - 21° -
-
- - diff --git a/src/app/pages/dashboard/weather/weather.component.scss b/src/app/pages/dashboard/weather/weather.component.scss deleted file mode 100644 index 2ac7e09..0000000 --- a/src/app/pages/dashboard/weather/weather.component.scss +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/dashboard/weather/weather.component.ts b/src/app/pages/dashboard/weather/weather.component.ts deleted file mode 100644 index 0a02e5b..0000000 --- a/src/app/pages/dashboard/weather/weather.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-weather', - styleUrls: ['./weather.component.scss'], - templateUrl: './weather.component.html', -}) - -export class WeatherComponent { -} diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html deleted file mode 100644 index 30bf039..0000000 --- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - {{ period }} - - diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss deleted file mode 100644 index 52cb2ca..0000000 --- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss +++ /dev/null @@ -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); - } - } -} diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.ts b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.ts deleted file mode 100644 index 0cbd26f..0000000 --- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.ts +++ /dev/null @@ -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(); - - @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; - } -} diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss deleted file mode 100644 index dd8509a..0000000 --- a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts b/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts deleted file mode 100644 index bb1c2f7..0000000 --- a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'ngx-chart-panel-summary', - styleUrls: ['./chart-panel-summary.component.scss'], - template: ` -
-
-
{{ item.title }}
-
{{ item.value }}
-
-
- `, -}) -export class ChartPanelSummaryComponent { - @Input() summary: {title: string; value: number}[]; -} - diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.html b/src/app/pages/e-commerce/charts-panel/charts-panel.component.html deleted file mode 100644 index 4ed097a..0000000 --- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.html +++ /dev/null @@ -1,22 +0,0 @@ - - - -
- - - - -
- - -
- - - - -
- - - diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss deleted file mode 100644 index acf1a90..0000000 --- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.ts b/src/app/pages/e-commerce/charts-panel/charts-panel.component.ts deleted file mode 100644 index 3e95930..0000000 --- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss b/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss deleted file mode 100644 index 744a237..0000000 --- a/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - flex: 1; - - .echart { - display: block; - height: 100%; - width: 100%; - } -} diff --git a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts b/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts deleted file mode 100644 index 9968426..0000000 --- a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts +++ /dev/null @@ -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: ` -
-
- `, -}) -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; - } -} diff --git a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts b/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts deleted file mode 100644 index 65cb017..0000000 --- a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts +++ /dev/null @@ -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: ` -
- `, -}) -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; - } -} diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss deleted file mode 100644 index f323ef3..0000000 --- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss +++ /dev/null @@ -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%; - } -} diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts deleted file mode 100644 index 826a7fe..0000000 --- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts +++ /dev/null @@ -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: ` -
- Selected Country/Region -

{{ countryName }}

-
-
-
- `, -}) -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; - } - -} diff --git a/src/app/pages/e-commerce/country-orders/country-orders.component.scss b/src/app/pages/e-commerce/country-orders/country-orders.component.scss deleted file mode 100644 index c5f8e69..0000000 --- a/src/app/pages/e-commerce/country-orders/country-orders.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/e-commerce/country-orders/country-orders.component.ts b/src/app/pages/e-commerce/country-orders/country-orders.component.ts deleted file mode 100644 index 17dd386..0000000 --- a/src/app/pages/e-commerce/country-orders/country-orders.component.ts +++ /dev/null @@ -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: ` - - Country Orders Statistics - - - - - - - - `, -}) -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; - } -} diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss deleted file mode 100644 index 4971dde..0000000 --- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss +++ /dev/null @@ -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%; - } -} diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.ts b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.ts deleted file mode 100644 index 528e56c..0000000 --- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.ts +++ /dev/null @@ -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: ` -
- `, -}) -export class CountryOrdersMapComponent implements OnDestroy { - - @Input() countryId: string; - - @Output() select: EventEmitter = 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; - } - -} diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.service.ts b/src/app/pages/e-commerce/country-orders/map/country-orders-map.service.ts deleted file mode 100644 index 9bb3fc5..0000000 --- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.service.ts +++ /dev/null @@ -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 { - return this.http.get('assets/leaflet-countries/countries.geo.json'); - } - -} diff --git a/src/app/pages/e-commerce/e-commerce.component.html b/src/app/pages/e-commerce/e-commerce.component.html deleted file mode 100644 index a2798c8..0000000 --- a/src/app/pages/e-commerce/e-commerce.component.html +++ /dev/null @@ -1,38 +0,0 @@ -
-
-
-
- -
-
- -
-
- - -
- -
- -
-
- -
-
- -
- -
- -
-
- -
-
- -
- -
- -
-
diff --git a/src/app/pages/e-commerce/e-commerce.component.ts b/src/app/pages/e-commerce/e-commerce.component.ts deleted file mode 100644 index 7dbe6e2..0000000 --- a/src/app/pages/e-commerce/e-commerce.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-ecommerce', - templateUrl: './e-commerce.component.html', -}) -export class ECommerceComponent { -} diff --git a/src/app/pages/e-commerce/e-commerce.module.ts b/src/app/pages/e-commerce/e-commerce.module.ts deleted file mode 100644 index c3f8ef2..0000000 --- a/src/app/pages/e-commerce/e-commerce.module.ts +++ /dev/null @@ -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 { } diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html deleted file mode 100644 index 182dcc3..0000000 --- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - Earnings - - -
-
{{ name }}
-
Last week:
-
{{ value }}%
-
- - - diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss deleted file mode 100644 index 231576c..0000000 --- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.ts b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.ts deleted file mode 100644 index 68f1914..0000000 --- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.ts +++ /dev/null @@ -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; - } -} diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-pie-chart.component.ts b/src/app/pages/e-commerce/earning-card/back-side/earning-pie-chart.component.ts deleted file mode 100644 index 0c1315d..0000000 --- a/src/app/pages/e-commerce/earning-card/back-side/earning-pie-chart.component.ts +++ /dev/null @@ -1,209 +0,0 @@ -import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { delay, takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-earning-pie-chart', - styleUrls: ['./earning-card-back.component.scss'], - template: ` -
-
- `, -}) -export class EarningPieChartComponent implements AfterViewInit, OnDestroy { - - @Output() selectPie = new EventEmitter<{value: number; name: string; color: string}>(); - @Input() values: {value: number; name: string; }[]; - @Input() defaultSelectedCurrency: string; - - private alive = true; - - options: any = {}; - echartsInstance; - - constructor(private theme: NbThemeService) { - } - - onChartInit(ec) { - this.echartsInstance = ec; - } - - onChartClick(event) { - const pieData = { - value: event.value, - name: event.name, - color: event.color.colorStops[0].color, - }; - - this.emitSelectPie(pieData); - } - - emitSelectPie(pieData: {value: number; name: string; color: any}) { - this.selectPie.emit(pieData); - } - - ngAfterViewInit() { - this.theme.getJsTheme() - .pipe( - takeWhile(() => this.alive), - delay(1), - ) - .subscribe(config => { - const variables = config.variables; - - this.options = this.getOptions(variables); - const defaultSelectedData = - this.options.series[0].data.find((item) => item.name === this.defaultSelectedCurrency); - const color = defaultSelectedData.itemStyle.normal.color.colorStops[0].color; - const pieData = { - value: defaultSelectedData.value, - name: defaultSelectedData.name, - color, - }; - - this.emitSelectPie(pieData); - }); - } - - getOptions(variables) { - const earningPie: any = variables.earningPie; - - return { - tooltip: { - trigger: 'item', - formatter: '', - }, - series: [ - { - name: ' ', - clockWise: true, - hoverAnimation: false, - type: 'pie', - center: earningPie.center, - radius: earningPie.radius, - data: [ - { - value: this.values[0].value, - name: this.values[0].name, - label: { - normal: { - position: 'center', - formatter: '', - textStyle: { - fontSize: '22', - fontFamily: variables.fontSecondary, - fontWeight: '600', - color: variables.fgHeading, - }, - }, - }, - tooltip: { - show: false, - }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: earningPie.firstPieGradientLeft, - }, - { - offset: 1, - color: earningPie.firstPieGradientRight, - }, - ]), - shadowColor: earningPie.firstPieShadowColor, - shadowBlur: 0, - shadowOffsetX: 0, - shadowOffsetY: 3, - }, - }, - }, - { - value: this.values[1].value, - name: this.values[1].name, - label: { - normal: { - position: 'center', - formatter: '', - textStyle: { - fontSize: '22', - fontFamily: variables.fontSecondary, - fontWeight: '600', - color: variables.fgHeading, - }, - }, - }, - tooltip: { - show: false, - }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: earningPie.secondPieGradientLeft, - }, - { - offset: 1, - color: earningPie.secondPieGradientRight, - }, - ]), - shadowColor: earningPie.secondPieShadowColor, - shadowBlur: 0, - shadowOffsetX: 0, - shadowOffsetY: 3, - }, - }, - }, - { - value: this.values[2].value, - name: this.values[2].name, - label: { - normal: { - position: 'center', - formatter: '', - textStyle: { - fontSize: '22', - fontFamily: variables.fontSecondary, - fontWeight: '600', - color: variables.fgHeading, - }, - }, - }, - tooltip: { - show: false, - }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: earningPie.thirdPieGradientLeft, - }, - { - offset: 1, - color: earningPie.thirdPieGradientRight, - }, - ]), - shadowColor: earningPie.thirdPieShadowColor, - shadowBlur: 0, - shadowOffsetX: 0, - shadowOffsetY: 3, - }, - }, - }, - ], - }, - ], - }; - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.html b/src/app/pages/e-commerce/earning-card/earning-card.component.html deleted file mode 100644 index af143d4..0000000 --- a/src/app/pages/e-commerce/earning-card/earning-card.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.scss b/src/app/pages/e-commerce/earning-card/earning-card.component.scss deleted file mode 100644 index 293d271..0000000 --- a/src/app/pages/e-commerce/earning-card/earning-card.component.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card { - position: relative; - } - - .flip-icon { - position: absolute; - right: 0.625rem; - top: 1rem; - @include nb-rtl(right, auto); - @include nb-rtl(left, 0.625rem); - cursor: pointer; - } - - ::ng-deep .flipped { - .back-container { - .flip-icon { - transform: scaleX(-1); - } - } - - .front-container { - .flip-icon { - display: none; - } - } - } - - ngx-earning-card-back, - ngx-earning-card-front { - display: flex; - flex-direction: column; - flex: 1; - } - - ::ng-deep nb-card-body { - overflow: hidden; - display: flex; - } -} diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.ts b/src/app/pages/e-commerce/earning-card/earning-card.component.ts deleted file mode 100644 index ec1c8b8..0000000 --- a/src/app/pages/e-commerce/earning-card/earning-card.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-earning-card', - styleUrls: ['./earning-card.component.scss'], - templateUrl: './earning-card.component.html', -}) -export class EarningCardComponent { - - flipped = false; - - toggleView() { - this.flipped = !this.flipped; - } -} diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html deleted file mode 100644 index 0f93231..0000000 --- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html +++ /dev/null @@ -1,23 +0,0 @@ - - - {{ currency }} - - - -
-
Daily Income
-
{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}
-
- - - {{ earningLiveUpdateCardData.delta.value }}% -
-
- - - diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss deleted file mode 100644 index f825da3..0000000 --- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss +++ /dev/null @@ -1,62 +0,0 @@ -@import '../../../../@theme/styles/themes'; -@import '~@nebular/theme/styles/global/typography/typography'; - -@include nb-install-component() { - display: flex; - flex-direction: column; - flex: 1; - - nb-card-header { - flex-direction: row; - padding-top: nb-theme(card-header-with-select-padding-top); - padding-bottom: nb-theme(card-header-with-select-padding-bottom); - } - - nb-card-body { - padding: 1rem 0 0; - flex-direction: column; - flex: 1; - } - - .chart-info { - position: relative; - display: flex; - flex-direction: column; - margin: 0 nb-theme(card-padding); - } - - .delta { - &.up .direction { - color: nb-theme(color-success-default); - } - &.down .direction { - color: nb-theme(color-danger-default); - } - } - - .delta { - position: absolute; - display: inline-block; - top: 0; - right: 0; - @include nb-rtl(left, 0); - @include nb-rtl(right, auto); - } - - ngx-earning-live-update-chart { - flex: 1; - position: relative; - - ::ng-deep { - canvas { - border-bottom-left-radius: nb-theme(card-border-radius); - border-bottom-right-radius: nb-theme(card-border-radius); - } - .echart { - position: absolute; - height: 100%; - width: 100%; - } - } - } -} diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.ts b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.ts deleted file mode 100644 index 1e8094d..0000000 --- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { interval , Subscription } from 'rxjs'; -import { switchMap, takeWhile } from 'rxjs/operators'; -import { LiveUpdateChart, EarningData } from '../../../../@core/data/earning'; - -@Component({ - selector: 'ngx-earning-card-front', - styleUrls: ['./earning-card-front.component.scss'], - templateUrl: './earning-card-front.component.html', -}) -export class EarningCardFrontComponent implements OnDestroy, OnInit { - private alive = true; - - @Input() selectedCurrency: string = 'Bitcoin'; - - intervalSubscription: Subscription; - currencies: string[] = ['Bitcoin', 'Tether', 'Ethereum']; - currentTheme: string; - earningLiveUpdateCardData: LiveUpdateChart; - liveUpdateChartData: { value: [string, number] }[]; - - constructor(private themeService: NbThemeService, - private earningService: EarningData) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.currentTheme = theme.name; - }); - } - - ngOnInit() { - this.getEarningCardData(this.selectedCurrency); - } - - changeCurrency(currency) { - if (this.selectedCurrency !== currency) { - this.selectedCurrency = currency; - - this.getEarningCardData(this.selectedCurrency); - } - } - - private getEarningCardData(currency) { - this.earningService.getEarningCardData(currency) - .pipe(takeWhile(() => this.alive)) - .subscribe((earningLiveUpdateCardData: LiveUpdateChart) => { - this.earningLiveUpdateCardData = earningLiveUpdateCardData; - this.liveUpdateChartData = earningLiveUpdateCardData.liveChart; - - this.startReceivingLiveData(currency); - }); - } - - startReceivingLiveData(currency) { - if (this.intervalSubscription) { - this.intervalSubscription.unsubscribe(); - } - - this.intervalSubscription = interval(200) - .pipe( - takeWhile(() => this.alive), - switchMap(() => this.earningService.getEarningLiveUpdateCardData(currency)), - ) - .subscribe((liveUpdateChartData: any[]) => { - this.liveUpdateChartData = [...liveUpdateChartData]; - }); - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts b/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts deleted file mode 100644 index 0b7c747..0000000 --- a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { delay, takeWhile } from 'rxjs/operators'; -import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { LayoutService } from '../../../../@core/utils/layout.service'; - -@Component({ - selector: 'ngx-earning-live-update-chart', - styleUrls: ['earning-card-front.component.scss'], - template: ` -
- `, -}) -export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy, OnChanges { - private alive = true; - - @Input() liveUpdateChartData: { value: [string, number] }[]; - - option: any; - echartsInstance; - - constructor(private theme: NbThemeService, - private layoutService: LayoutService) { - this.layoutService.onSafeChangeLayoutSize() - .pipe( - takeWhile(() => this.alive), - ) - .subscribe(() => this.resizeChart()); - } - - ngOnChanges(): void { - if (this.option) { - this.updateChartOptions(this.liveUpdateChartData); - } - } - - ngAfterViewInit() { - this.theme.getJsTheme() - .pipe( - delay(1), - takeWhile(() => this.alive), - ) - .subscribe(config => { - const earningLineTheme: any = config.variables.earningLine; - - this.setChartOption(earningLineTheme); - }); - } - - setChartOption(earningLineTheme) { - this.option = { - grid: { - left: 0, - top: 0, - right: 0, - bottom: 0, - }, - xAxis: { - type: 'time', - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - }, - yAxis: { - boundaryGap: [0, '5%'], - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - }, - tooltip: { - axisPointer: { - type: 'shadow', - }, - textStyle: { - color: earningLineTheme.tooltipTextColor, - fontWeight: earningLineTheme.tooltipFontWeight, - fontSize: earningLineTheme.tooltipFontSize, - }, - position: 'top', - backgroundColor: earningLineTheme.tooltipBg, - borderColor: earningLineTheme.tooltipBorderColor, - borderWidth: earningLineTheme.tooltipBorderWidth, - formatter: params => `$ ${Math.round(parseInt(params.value[1], 10))}`, - extraCssText: earningLineTheme.tooltipExtraCss, - }, - series: [ - { - type: 'line', - symbol: 'circle', - sampling: 'average', - itemStyle: { - normal: { - opacity: 0, - }, - emphasis: { - opacity: 0, - }, - }, - lineStyle: { - normal: { - width: 0, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: earningLineTheme.gradFrom, - }, { - offset: 1, - color: earningLineTheme.gradTo, - }]), - opacity: 1, - }, - }, - data: this.liveUpdateChartData, - }, - ], - animation: true, - }; - } - - updateChartOptions(chartData: { value: [string, number] }[]) { - this.echartsInstance.setOption({ - series: [{ - data: chartData, - }], - }); - } - - onChartInit(ec) { - this.echartsInstance = ec; - } - - resizeChart() { - if (this.echartsInstance) { - this.echartsInstance.resize(); - } - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/legend-chart/enum.legend-item-color.ts b/src/app/pages/e-commerce/legend-chart/enum.legend-item-color.ts deleted file mode 100644 index 96b411d..0000000 --- a/src/app/pages/e-commerce/legend-chart/enum.legend-item-color.ts +++ /dev/null @@ -1,7 +0,0 @@ -export enum NgxLegendItemColor { - GREEN = 'green', - PURPLE = 'purple', - LIGHT_PURPLE = 'light-purple', - BLUE = 'blue', - YELLOW = 'yellow', -} diff --git a/src/app/pages/e-commerce/legend-chart/legend-chart.component.html b/src/app/pages/e-commerce/legend-chart/legend-chart.component.html deleted file mode 100644 index a581ce5..0000000 --- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
-
{{ legend.title }}
-
diff --git a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss b/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss deleted file mode 100644 index c8a6dfe..0000000 --- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../../@theme/styles/themes'; -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@include nb-install-component() { - display: flex; - flex-wrap: wrap; - - .legend { - display: flex; - justify-content: space-between; - align-items: center; - - &:not(:last-child) { - @include nb-ltr(margin-right, 1rem); - @include nb-rtl(margin-left, 1rem); - } - } - - .legend-item-color { - min-width: 15px; - min-height: 15px; - border-radius: 0.2rem; - } - - .legend-title { - @include nb-ltr(padding-left, 0.75rem); - @include nb-rtl(padding-right, 0.75rem); - white-space: nowrap; - } -} diff --git a/src/app/pages/e-commerce/legend-chart/legend-chart.component.ts b/src/app/pages/e-commerce/legend-chart/legend-chart.component.ts deleted file mode 100644 index 6da1fc9..0000000 --- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { NgxLegendItemColor } from './enum.legend-item-color'; - -@Component({ - selector: 'ngx-legend-chart', - styleUrls: ['./legend-chart.component.scss'], - templateUrl: './legend-chart.component.html', -}) -export class ECommerceLegendChartComponent { - - /** - * Take an array of legend items - * Available iconColor: 'green', 'purple', 'light-purple', 'blue', 'yellow' - * @type {{iconColor: string; title: string}[]} - */ - @Input() - legendItems: { iconColor: NgxLegendItemColor; title: string }[] = []; -} diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts b/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts deleted file mode 100644 index 2f0e9d0..0000000 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts +++ /dev/null @@ -1,172 +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-stats-ares-chart', - styleUrls: ['stats-card-back.component.scss'], - template: ` -
-
- `, -}) -export class StatsAreaChartComponent implements AfterViewInit, OnDestroy { - - private alive = true; - - @Input() points: number[]; - - echartsIntance: any; - option: any = {}; - - constructor(private theme: NbThemeService, - private layoutService: LayoutService) { - this.layoutService.onSafeChangeLayoutSize() - .pipe( - takeWhile(() => this.alive), - ) - .subscribe(() => this.resizeChart()); - } - - ngAfterViewInit() { - this.theme.getJsTheme() - .pipe( - delay(1), - takeWhile(() => this.alive), - ) - .subscribe(config => { - const trafficTheme: any = config.variables.traffic; - - this.option = Object.assign({}, { - grid: { - left: 0, - top: 0, - right: 0, - bottom: 0, - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: this.points, - }, - yAxis: { - boundaryGap: [0, '5%'], - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - color: trafficTheme.yAxisSplitLine, - width: '1', - }, - }, - }, - tooltip: { - axisPointer: { - type: 'shadow', - }, - textStyle: { - color: trafficTheme.tooltipTextColor, - fontWeight: trafficTheme.tooltipFontWeight, - fontSize: 16, - }, - position: 'top', - backgroundColor: trafficTheme.tooltipBg, - borderColor: trafficTheme.tooltipBorderColor, - borderWidth: 1, - formatter: '$ {c0}', - extraCssText: trafficTheme.tooltipExtraCss, - }, - series: [ - { - type: 'line', - symbol: 'circle', - symbolSize: 8, - sampling: 'average', - silent: true, - itemStyle: { - normal: { - color: trafficTheme.shadowLineDarkBg, - }, - emphasis: { - color: 'rgba(0,0,0,0)', - borderColor: 'rgba(0,0,0,0)', - borderWidth: 0, - }, - }, - lineStyle: { - normal: { - width: 2, - color: trafficTheme.shadowLineDarkBg, - }, - }, - data: this.points.map(p => p - 15), - }, - { - type: 'line', - symbol: 'circle', - symbolSize: 6, - sampling: 'average', - itemStyle: { - normal: { - color: trafficTheme.itemColor, - borderColor: trafficTheme.itemBorderColor, - borderWidth: 2, - }, - emphasis: { - color: 'white', - borderColor: trafficTheme.itemEmphasisBorderColor, - borderWidth: 2, - }, - }, - lineStyle: { - normal: { - width: 2, - color: trafficTheme.lineBg, - shadowColor: trafficTheme.lineBg, - shadowBlur: trafficTheme.lineShadowBlur, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: trafficTheme.gradFrom, - }, { - offset: 1, - color: trafficTheme.gradTo, - }]), - opacity: 1, - }, - }, - data: this.points, - }, - ], - }); - }); - } - - onChartInit(echarts) { - this.echartsIntance = echarts; - } - - resizeChart() { - if (this.echartsIntance) { - this.echartsIntance.resize(); - } - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html deleted file mode 100644 index 821f6b0..0000000 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html +++ /dev/null @@ -1,21 +0,0 @@ - - - Profit - - -
-
-
Jun 1 - Jun 30
-
- $300 -
-
-
-
Jul 1 - Jul 31
-
- $860 -
-
-
- - diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss deleted file mode 100644 index 23f37b2..0000000 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - display: flex; - flex-direction: column; - flex: 1; - - .title { - padding-left: 0.5rem; - } - - nb-card-body { - display: flex; - flex-direction: column; - padding: 0; - overflow: hidden; - } - - .info { - display: flex; - @include nb-rtl(flex-direction, row-reverse); - justify-content: space-between; - padding: 0.75rem 0.75rem 0.5rem; - } - - .period { - width: 49%; - } - - .currency { - padding-right: 0.25rem; - } - - ngx-stats-ares-chart { - flex: 1; - position: relative; - - ::ng-deep { - .echart { - position: absolute; - height: 100%; - width: 100%; - } - - canvas { - border-bottom-left-radius: nb-theme(card-border-radius); - border-bottom-right-radius: nb-theme(card-border-radius); - } - } - } -} diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts deleted file mode 100644 index 95c10aa..0000000 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { StatsBarData } from '../../../../@core/data/stats-bar'; -import { takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-stats-card-back', - styleUrls: ['./stats-card-back.component.scss'], - templateUrl: './stats-card-back.component.html', -}) -export class StatsCardBackComponent implements OnDestroy { - - private alive = true; - - chartData: number[]; - - constructor(private statsBarData: StatsBarData) { - this.statsBarData.getStatsBarData() - .pipe(takeWhile(() => this.alive)) - .subscribe((data) => { - this.chartData = data; - }); - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts b/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts deleted file mode 100644 index 339cd16..0000000 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { takeWhile } from 'rxjs/operators'; -import { LayoutService } from '../../../../@core/utils/layout.service'; - -@Component({ - selector: 'ngx-stats-bar-animation-chart', - template: ` -
-
- `, -}) -export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy { - - private alive = true; - - @Input() linesData: { firstLine: number[]; secondLine: number[] } = { - firstLine: [], - secondLine: [], - }; - - echartsIntance: any; - options: any = {}; - - constructor(private theme: NbThemeService, - private layoutService: LayoutService) { - this.layoutService.onSafeChangeLayoutSize() - .pipe( - takeWhile(() => this.alive), - ) - .subscribe(() => this.resizeChart()); - } - - ngAfterViewInit() { - this.theme.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(config => { - const profitBarAnimationEchart: any = config.variables.profitBarAnimationEchart; - - this.setChartOption(profitBarAnimationEchart); - }); - } - - setChartOption(chartVariables) { - this.options = { - color: [ - chartVariables.firstAnimationBarColor, - chartVariables.secondAnimationBarColor, - ], - grid: { - left: 0, - top: 0, - right: 0, - bottom: 0, - }, - legend: { - data: ['transactions', 'orders'], - borderWidth: 0, - borderRadius: 0, - itemWidth: 15, - itemHeight: 15, - textStyle: { - color: chartVariables.textColor, - }, - }, - tooltip: { - axisPointer: { - type: 'shadow', - }, - textStyle: { - color: chartVariables.tooltipTextColor, - fontWeight: chartVariables.tooltipFontWeight, - fontSize: chartVariables.tooltipFontSize, - }, - position: 'top', - backgroundColor: chartVariables.tooltipBg, - borderColor: chartVariables.tooltipBorderColor, - borderWidth: chartVariables.tooltipBorderWidth, - formatter: params => `$ ${Math.round(parseInt(params.value, 10))}`, - extraCssText: chartVariables.tooltipExtraCss, - }, - xAxis: [ - { - data: this.linesData.firstLine.map((_, index) => index), - silent: false, - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - }, - ], - yAxis: [ - { - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - color: chartVariables.splitLineStyleColor, - opacity: chartVariables.splitLineStyleOpacity, - width: chartVariables.splitLineStyleWidth, - }, - }, - }, - ], - series: [ - { - name: 'transactions', - type: 'bar', - data: this.linesData.firstLine, - animationDelay: idx => idx * 10, - }, - { - name: 'orders', - type: 'bar', - data: this.linesData.secondLine, - animationDelay: idx => idx * 10 + 100, - }, - ], - animationEasing: 'elasticOut', - animationDelayUpdate: idx => idx * 5, - }; - } - - onChartInit(echarts) { - this.echartsIntance = echarts; - } - - resizeChart() { - if (this.echartsIntance) { - this.echartsIntance.resize(); - } - } - - ngOnDestroy(): void { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html deleted file mode 100644 index 246dfea..0000000 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - Profit - - - - diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss deleted file mode 100644 index 03c74d6..0000000 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - display: flex; - flex-direction: column; - flex: 1; - - .title { - padding-left: 0.5rem; - } - - nb-card-header { - margin-bottom: -1px; - } - - nb-card-body { - position: relative; - padding: 0; - overflow: hidden; - } - - ngx-stats-bar-animation-chart { - position: relative; - - ::ng-deep .echart { - height: 100%; - width: 100%; - } - } -} diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.ts b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.ts deleted file mode 100644 index 6f645c8..0000000 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component } from '@angular/core'; -import { ProfitBarAnimationChartData } from '../../../../@core/data/profit-bar-animation-chart'; -import { takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-stats-card-front', - styleUrls: ['./stats-card-front.component.scss'], - templateUrl: './stats-card-front.component.html', -}) -export class StatsCardFrontComponent { - - private alive = true; - - linesData: { firstLine: number[]; secondLine: number[] }; - - constructor(private profitBarAnimationChartService: ProfitBarAnimationChartData) { - this.profitBarAnimationChartService.getChartData() - .pipe(takeWhile(() => this.alive)) - .subscribe((linesData) => { - this.linesData = linesData; - }); - } -} diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.html b/src/app/pages/e-commerce/profit-card/profit-card.component.html deleted file mode 100644 index 31d0fee..0000000 --- a/src/app/pages/e-commerce/profit-card/profit-card.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.scss b/src/app/pages/e-commerce/profit-card/profit-card.component.scss deleted file mode 100644 index 7012104..0000000 --- a/src/app/pages/e-commerce/profit-card/profit-card.component.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .flip-icon { - position: absolute; - right: 0.625rem; - top: 1rem; - @include nb-rtl(right, auto); - @include nb-rtl(left, 0.625rem); - cursor: pointer; - } - - ::ng-deep { - .front-container { - max-width: 100%; - } - - .flipped { - .back-container { - .flip-icon { - transform: scaleX(-1); - } - } - - .front-container { - .flip-icon { - display: none; - } - } - } - } -} diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.ts b/src/app/pages/e-commerce/profit-card/profit-card.component.ts deleted file mode 100644 index ae8247e..0000000 --- a/src/app/pages/e-commerce/profit-card/profit-card.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-profit-card', - styleUrls: ['./profit-card.component.scss'], - templateUrl: './profit-card.component.html', -}) -export class ProfitCardComponent { - - flipped = false; - - toggleView() { - this.flipped = !this.flipped; - } -} diff --git a/src/app/pages/e-commerce/progress-section/progress-section.component.html b/src/app/pages/e-commerce/progress-section/progress-section.component.html deleted file mode 100644 index d7b7a36..0000000 --- a/src/app/pages/e-commerce/progress-section/progress-section.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - -
-
{{ item.title }}
-
{{ item.value | ngxNumberWithCommas }}
- -
- {{ item.description }} -
-
- - diff --git a/src/app/pages/e-commerce/progress-section/progress-section.component.scss b/src/app/pages/e-commerce/progress-section/progress-section.component.scss deleted file mode 100644 index 769aef6..0000000 --- a/src/app/pages/e-commerce/progress-section/progress-section.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import '../../../@theme/styles/themes'; - -$shadow-green: #00977e; - -@include nb-install-component() { - .progress-info { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: 2rem; - - &:first-child { - margin-top: 0; - } - } - - .description { - margin-top: 0.5rem; - } -} diff --git a/src/app/pages/e-commerce/progress-section/progress-section.component.ts b/src/app/pages/e-commerce/progress-section/progress-section.component.ts deleted file mode 100644 index e953972..0000000 --- a/src/app/pages/e-commerce/progress-section/progress-section.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { ProgressInfo, StatsProgressBarData } from '../../../@core/data/stats-progress-bar'; -import { takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-progress-section', - styleUrls: ['./progress-section.component.scss'], - templateUrl: './progress-section.component.html', -}) -export class ECommerceProgressSectionComponent implements OnDestroy { - - private alive = true; - - progressInfoData: ProgressInfo[]; - - constructor(private statsProgressBarService: StatsProgressBarData) { - this.statsProgressBarService.getProgressInfoData() - .pipe(takeWhile(() => this.alive)) - .subscribe((data) => { - this.progressInfoData = data; - }); - } - - ngOnDestroy() { - this.alive = true; - } -} diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.html b/src/app/pages/e-commerce/slide-out/slide-out.component.html deleted file mode 100644 index 67848f7..0000000 --- a/src/app/pages/e-commerce/slide-out/slide-out.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - -
-
- -
-
diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.scss b/src/app/pages/e-commerce/slide-out/slide-out.component.scss deleted file mode 100644 index 4b23267..0000000 --- a/src/app/pages/e-commerce/slide-out/slide-out.component.scss +++ /dev/null @@ -1,112 +0,0 @@ -@import '../../../@theme/styles/themes'; -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@include nb-install-component() { - $slide-out-container-width: 40%; - - .show-hide-toggle { - display: block; - position: absolute; - top: 1.5rem; - @include nb-ltr(right, 1.5rem); - @include nb-rtl(left, 1.5rem); - cursor: pointer; - background-color: transparent; - z-index: 2; - } - - .slide-out-container { - @include nb-ltr { - border-top-right-radius: nb-theme(card-border-radius); - border-bottom-right-radius: nb-theme(card-border-radius); - } - @include nb-rtl { - border-top-left-radius: nb-theme(card-border-radius); - border-bottom-left-radius: nb-theme(card-border-radius); - } - position: absolute; - padding: 1.5rem; - width: $slide-out-container-width; - } - - .slide-out-container, - .slide-out-container::before { - display: block; - height: 100%; - top: 0; - overflow: hidden; - transition: all 0.2s ease-out; - } - - .slide-out-container::before { - content: ''; - @include nb-ltr(right, 0); - @include nb-rtl(left, 0); - width: 100%; - position: absolute; - background: nb-theme(slide-out-background); - box-shadow: nb-theme(slide-out-shadow-color); - @include nb-rtl(box-shadow, nb-theme(slide-out-shadow-color-rtl)); - opacity: 0.9; - z-index: 1; - } - - .slide-out-container.collapsed { - @include nb-ltr(left, calc(100% - 6rem)); - @include nb-rtl(right, calc(100% - 6rem)); - } - - .slide-out-container.expanded { - left: calc(100% + 1px - #{$slide-out-container-width}); - @include nb-rtl(left, auto); - @include nb-rtl(right, calc(100% - #{$slide-out-container-width})); - } - - .content-wrapper { - z-index: 1; - position: relative; - width: 100%; - margin: 0 6rem; - transition: all 0.2s ease-out; - } - - .expanded .content-wrapper { - margin: 0; - } - - @include media-breakpoint-down(md) { - $slide-out-container-width: 50%; - - .slide-out-container { - width: $slide-out-container-width; - } - - .slide-out-container.expanded { - left: calc(100% + 1px - #{$slide-out-container-width}); - @include nb-rtl(right, calc(100% + 1px - #{$slide-out-container-width})); - } - } - - @include media-breakpoint-down(is) { - $slide-out-container-width: 100%; - - .show-hide-toggle { - right: 0.5rem; - } - - .slide-out-container { - width: $slide-out-container-width; - } - - .slide-out-container.collapsed { - left: calc(100% + 1px - 3rem); - @include nb-rtl(right, calc(100% - 3rem)); - } - - .slide-out-container.expanded { - left: calc(100% + 1px - #{$slide-out-container-width}); - @include nb-rtl(right, calc(100% - #{$slide-out-container-width})); - } - } -} diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.ts b/src/app/pages/e-commerce/slide-out/slide-out.component.ts deleted file mode 100644 index e72e477..0000000 --- a/src/app/pages/e-commerce/slide-out/slide-out.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'ngx-slide-out', - styleUrls: ['./slide-out.component.scss'], - templateUrl: './slide-out.component.html', -}) -export class SlideOutComponent { - - @Input() showVisitorsStatistics: boolean = false; - - toggleStatistics() { - this.showVisitorsStatistics = !this.showVisitorsStatistics; - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html deleted file mode 100644 index 8c483a7..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss deleted file mode 100644 index 00e2406..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - display: flex; - flex-direction: column; - flex: 1; - - nb-card-body { - overflow: hidden; - position: relative; - display: flex; - flex-direction: column; - } - - ngx-traffic-bar-chart { - flex: 1; - position: relative; - - ::ng-deep { - canvas { - border-bottom-left-radius: nb-theme(card-border-radius); - border-bottom-right-radius: nb-theme(card-border-radius); - } - - .echart { - height: 100%; - width: 100%; - } - } - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.ts deleted file mode 100644 index 68966a1..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Component, Input, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-traffic-back-card', - styleUrls: ['./traffic-back-card.component.scss'], - templateUrl: './traffic-back-card.component.html', -}) -export class TrafficBackCardComponent implements OnDestroy { - - private alive = true; - - @Input() trafficBarData: any; - - currentTheme: string; - - constructor(private themeService: NbThemeService) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.currentTheme = theme.name; - }); - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts deleted file mode 100644 index f2a55b7..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts +++ /dev/null @@ -1,150 +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'; - -declare const echarts: any; - -@Component({ - selector: 'ngx-traffic-bar-chart', - template: ` -
-
- `, -}) -export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnChanges { - - @Input() data: number[]; - @Input() labels: string[]; - @Input() formatter: string; - - private alive = true; - - option: any = {}; - echartsInstance: any; - - constructor(private theme: NbThemeService, - private layoutService: LayoutService) { - this.layoutService.onSafeChangeLayoutSize() - .pipe( - takeWhile(() => this.alive), - ) - .subscribe(() => this.resizeChart()); - } - - onChartInit(ec) { - this.echartsInstance = ec; - } - - resizeChart() { - if (this.echartsInstance) { - this.echartsInstance.resize(); - } - } - - ngOnChanges(changes: SimpleChanges): void { - if (!changes.data.isFirstChange() && !changes.labels.isFirstChange()) { - this.echartsInstance.setOption({ - series: [{ - data: this.data, - }], - xAxis: { - data: this.labels, - }, - tooltip: { - formatter: this.formatter, - }, - }); - } - } - - ngAfterViewInit() { - this.theme.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(config => { - const trafficTheme: any = config.variables.trafficBarEchart; - - this.option = Object.assign({}, { - grid: { - left: 0, - top: 0, - right: 0, - bottom: 0, - containLabel: true, - }, - xAxis: { - type : 'category', - data : this.labels, - axisLabel: { - color: trafficTheme.axisTextColor, - fontSize: trafficTheme.axisFontSize, - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - }, - yAxis: { - show: false, - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - boundaryGap: [0, '5%'], - }, - tooltip: { - axisPointer: { - type: 'shadow', - }, - textStyle: { - color: trafficTheme.tooltipTextColor, - fontWeight: trafficTheme.tooltipFontWeight, - fontSize: 16, - }, - position: 'top', - backgroundColor: trafficTheme.tooltipBg, - borderColor: trafficTheme.tooltipBorderColor, - borderWidth: 1, - formatter: this.formatter, - extraCssText: trafficTheme.tooltipExtraCss, - }, - series: [ - { - type: 'bar', - barWidth: '40%', - data: this.data, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: trafficTheme.gradientFrom, - }, { - offset: 1, - color: trafficTheme.gradientTo, - }]), - opacity: 1, - shadowColor: trafficTheme.gradientFrom, - shadowBlur: trafficTheme.shadowBlur, - }, - }, - }, - ], - }); - }); - } - - ngOnDestroy() { - this.alive = false; - } - -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html deleted file mode 100644 index 774a04a..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html +++ /dev/null @@ -1,9 +0,0 @@ -{{ barData.prevDate }} -
-
-
-
-
-
-
-{{ barData.nextDate }} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss deleted file mode 100644 index 424bbb4..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import '../../../../../@theme/styles/themes'; - -@include nb-install-component() { - display: flex; - align-items: flex-end; - height: nb-theme(list-item-line-height); - max-width: 7rem; - - .value-prev, - .value-now { - flex: 1; - } - - .progress-line-container { - flex: 1; - margin-bottom: 0.1875rem; - } - - .progress-line-prev, - .progress-line-now { - height: 100%; - width: 0.7rem; - } - - .progress-line-prev { - background-color: nb-theme(border-basic-color-3); - @include nb-ltr { - margin-left: auto; - margin-right: 0.25rem; - } - @include nb-rtl { - margin-left: 0.25rem; - margin-right: auto; - } - } - - .progress-line-now { - @include nb-ltr { - margin-left: 0.25rem; - margin-right: auto; - } - @include nb-rtl { - margin-left: auto; - margin-right: 0.25rem; - } - - &.success { - background-color: nb-theme(color-success-default); - } - &.failure { - background-color: nb-theme(color-danger-default); - } - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.ts deleted file mode 100644 index 830f22f..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'ngx-traffic-bar', - styleUrls: ['./traffic-bar.component.scss'], - templateUrl: './traffic-bar.component.html', -}) -export class TrafficBarComponent { - - @Input() barData: { prevDate: string; prevValue: number; nextDate: string; nextValue: number }; - @Input() successDelta: boolean; -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html deleted file mode 100644 index e762777..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - - {{ item.date }} - {{ item.value }} - - - {{ item.delta.value }}% - - - - - diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss deleted file mode 100644 index 835388a..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - overflow: auto; - - .item { - display: flex; - justify-content: space-between; - align-items: center; - - > * { - flex: 1; - } - - &:first-child { - border-top: none; - } - } - - .delta { - display: flex; - align-items: center; - - &.down { - color: nb-theme(color-danger-default); - } - - &.up { - color: nb-theme(color-success-default); - } - } - - @include media-breakpoint-down(is) { - ngx-traffic-bar { - display: none; - } - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.ts deleted file mode 100644 index 5066653..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component, Input, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { takeWhile } from 'rxjs/operators'; - -import { TrafficList } from '../../../../@core/data/traffic-list'; - -@Component({ - selector: 'ngx-traffic-front-card', - styleUrls: ['./traffic-front-card.component.scss'], - templateUrl: './traffic-front-card.component.html', -}) -export class TrafficFrontCardComponent implements OnDestroy { - - private alive = true; - - @Input() frontCardData: TrafficList; - - currentTheme: string; - - constructor(private themeService: NbThemeService) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.currentTheme = theme.name; - }); - } - - trackByDate(_, item) { - return item.date; - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html deleted file mode 100644 index 4e22530..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - Traffic - - {{ period }} - - diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss deleted file mode 100644 index b92c1db..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - 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); - - @include nb-ltr(padding-right, 4rem); - @include nb-rtl(padding-left, 4rem); - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.ts deleted file mode 100644 index 8bb431e..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-traffic-cards-header', - styleUrls: ['./traffic-cards-header.component.scss'], - templateUrl: './traffic-cards-header.component.html', -}) -export class TrafficCardsHeaderComponent implements OnDestroy { - private alive = true; - - @Output() periodChange = new EventEmitter(); - - @Input() type: string = 'week'; - - types: string[] = ['week', 'month', 'year']; - currentTheme: string; - - constructor(private themeService: NbThemeService) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.currentTheme = theme.name; - }); - } - - changePeriod(period: string): void { - this.type = period; - this.periodChange.emit(period); - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html deleted file mode 100644 index 1b11ab7..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss deleted file mode 100644 index 42f5574..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .toggle-icon { - position: absolute; - top: 1rem; - right: 1.25rem; - @include nb-rtl(right, auto); - @include nb-rtl(left, 1.25rem); - cursor: pointer; - } -} diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts deleted file mode 100644 index 3e2b85a..0000000 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { TrafficList, TrafficListData } from '../../../@core/data/traffic-list'; -import { TrafficBarData, TrafficBar } from '../../../@core/data/traffic-bar'; -import { takeWhile } from 'rxjs/operators'; - -@Component({ - selector: 'ngx-traffic-reveal-card', - styleUrls: ['./traffic-reveal-card.component.scss'], - templateUrl: './traffic-reveal-card.component.html', -}) -export class TrafficRevealCardComponent implements OnDestroy { - - private alive = true; - - trafficBarData: TrafficBar; - trafficListData: TrafficList; - revealed = false; - period: string = 'week'; - - constructor(private trafficListService: TrafficListData, - private trafficBarService: TrafficBarData) { - this.getTrafficFrontCardData(this.period); - this.getTrafficBackCardData(this.period); - } - - toggleView() { - this.revealed = !this.revealed; - } - - setPeriodAngGetData(value: string): void { - this.period = value; - - this.getTrafficFrontCardData(value); - this.getTrafficBackCardData(value); - } - - getTrafficBackCardData(period: string) { - this.trafficBarService.getTrafficBarData(period) - .pipe(takeWhile(() => this.alive )) - .subscribe(trafficBarData => { - this.trafficBarData = trafficBarData; - }); - } - - getTrafficFrontCardData(period: string) { - this.trafficListService.getTrafficListData(period) - .pipe(takeWhile(() => this.alive)) - .subscribe(trafficListData => { - this.trafficListData = trafficListData; - }); - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.html b/src/app/pages/e-commerce/user-activity/user-activity.component.html deleted file mode 100644 index 445f18f..0000000 --- a/src/app/pages/e-commerce/user-activity/user-activity.component.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - User Activity - - {{ t }} - - - - - - -
- {{ item.date }} -
- -
-
Pages Visit
-
{{ item.pagesVisitCount }}
-
- -
-
New visits, %
-
- - {{ item.newVisits }}% -
-
- - - - - diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.scss b/src/app/pages/e-commerce/user-activity/user-activity.component.scss deleted file mode 100644 index 52c59a0..0000000 --- a/src/app/pages/e-commerce/user-activity/user-activity.component.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card-header { - display: flex; - align-items: center; - justify-content: space-between; - border: none; - padding-top: nb-theme(card-header-with-select-padding-top); - padding-bottom: nb-theme(card-header-with-select-padding-bottom); - } - - nb-list { - overflow-x: hidden; - } - - nb-list-item { - display: flex; - align-items: flex-end; - justify-content: space-between; - margin: 0 -0.25rem; - } - - .visited-date, - .visited-pages-count, - .visited-percentages { - flex: 1 0 auto; - margin: 0 0.25rem; - } - - .value { - margin-top: 0.25rem; - color: nb-theme(color-success-default); - } - - .delta { - display: flex; - align-items: center; - position: relative; - - &.down { - color: nb-theme(color-danger-default); - } - - &.up { - color: nb-theme(color-success-default); - } - - nb-icon ::ng-deep svg { - vertical-align: top; - } - } -} diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.ts b/src/app/pages/e-commerce/user-activity/user-activity.component.ts deleted file mode 100644 index 620af6f..0000000 --- a/src/app/pages/e-commerce/user-activity/user-activity.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { takeWhile } from 'rxjs/operators'; - -import { UserActivityData, UserActive } from '../../../@core/data/user-activity'; - -@Component({ - selector: 'ngx-user-activity', - styleUrls: ['./user-activity.component.scss'], - templateUrl: './user-activity.component.html', -}) -export class ECommerceUserActivityComponent implements OnDestroy { - - private alive = true; - - userActivity: UserActive[] = []; - type = 'month'; - types = ['week', 'month', 'year']; - currentTheme: string; - - constructor(private themeService: NbThemeService, - private userActivityService: UserActivityData) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.currentTheme = theme.name; - }); - - this.getUserActivity(this.type); - } - - getUserActivity(period: string) { - this.userActivityService.getUserActivityData(period) - .pipe(takeWhile(() => this.alive)) - .subscribe(userActivityData => { - this.userActivity = userActivityData; - }); - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss deleted file mode 100644 index 677d9ba..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - display: block; - height: 17.5rem; - width: 100%; - - .echart { - display: block; - height: 100%; - width: 100%; - } -} diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts deleted file mode 100644 index dd3c74e..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts +++ /dev/null @@ -1,235 +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 { OutlineData } from '../../../../@core/data/visitors-analytics'; - -@Component({ - selector: 'ngx-visitors-analytics-chart', - styleUrls: ['./visitors-analytics-chart.component.scss'], - template: ` -
-
- `, -}) -export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit, OnDestroy { - - private alive = true; - - @Input() chartData: { - innerLine: number[]; - outerLine: OutlineData[]; - }; - - option: any; - themeSubscription: any; - echartsIntance: any; - - constructor(private theme: NbThemeService, - private layoutService: LayoutService) { - this.layoutService.onSafeChangeLayoutSize() - .pipe( - takeWhile(() => this.alive), - ) - .subscribe(() => this.resizeChart()); - } - - ngAfterViewInit(): void { - this.theme.getJsTheme() - .pipe( - delay(1), - takeWhile(() => this.alive), - ) - .subscribe(config => { - const eTheme: any = config.variables.visitors; - - this.setOptions(eTheme); - }); - } - - setOptions(eTheme) { - this.option = { - grid: { - left: 40, - top: 20, - right: 0, - bottom: 60, - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'line', - lineStyle: { - color: eTheme.tooltipLineColor, - width: eTheme.tooltipLineWidth, - }, - }, - textStyle: { - color: eTheme.tooltipTextColor, - fontSize: 20, - fontWeight: eTheme.tooltipFontWeight, - }, - position: 'top', - backgroundColor: eTheme.tooltipBg, - borderColor: eTheme.tooltipBorderColor, - borderWidth: 1, - formatter: (params) => { - return Math.round(parseInt(params[0].value, 10)); - }, - extraCssText: eTheme.tooltipExtraCss, - }, - xAxis: { - type: 'category', - boundaryGap: false, - offset: 25, - data: this.chartData.outerLine.map(i => i.label), - axisTick: { - show: false, - }, - axisLabel: { - color: eTheme.axisTextColor, - fontSize: eTheme.axisFontSize, - }, - axisLine: { - lineStyle: { - color: eTheme.axisLineColor, - width: '2', - }, - }, - }, - yAxis: { - type: 'value', - boundaryGap: false, - axisLine: { - lineStyle: { - color: eTheme.axisLineColor, - width: '1', - }, - }, - axisLabel: { - color: eTheme.axisTextColor, - fontSize: eTheme.axisFontSize, - }, - axisTick: { - show: false, - }, - splitLine: { - - lineStyle: { - color: eTheme.yAxisSplitLine, - width: '1', - }, - }, - }, - series: [ - this.getInnerLine(eTheme), - this.getOuterLine(eTheme), - ], - }; - } - - getOuterLine(eTheme) { - return { - type: 'line', - smooth: true, - symbolSize: 20, - itemStyle: { - normal: { - opacity: 0, - }, - emphasis: { - color: '#ffffff', - borderColor: eTheme.itemBorderColor, - borderWidth: 2, - opacity: 1, - }, - }, - lineStyle: { - normal: { - width: eTheme.lineWidth, - type: eTheme.lineStyle, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: eTheme.lineGradFrom, - }, { - offset: 1, - color: eTheme.lineGradTo, - }]), - shadowColor: eTheme.lineShadow, - shadowBlur: 6, - shadowOffsetY: 12, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: eTheme.areaGradFrom, - }, { - offset: 1, - color: eTheme.areaGradTo, - }]), - }, - }, - data: this.chartData.outerLine.map(i => i.value), - }; - } - - getInnerLine(eTheme) { - return { - type: 'line', - smooth: true, - symbolSize: 20, - tooltip: { - show: false, - extraCssText: '', - }, - itemStyle: { - normal: { - opacity: 0, - }, - emphasis: { - opacity: 0, - }, - }, - lineStyle: { - normal: { - width: eTheme.innerLineWidth, - type: eTheme.innerLineStyle, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1), - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: eTheme.innerAreaGradFrom, - }, { - offset: 1, - color: eTheme.innerAreaGradTo, - }]), - opacity: 1, - }, - }, - data: this.chartData.innerLine, - }; - } - - onChartInit(echarts) { - this.echartsIntance = echarts; - } - - resizeChart() { - if (this.echartsIntance) { - this.echartsIntance.resize(); - } - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html deleted file mode 100644 index 10a0dae..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - -

Visitors Analytics

-
Consumption
- - -
-
- -
- -
- - - - - - diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss deleted file mode 100644 index b8af1e7..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../../@theme/styles/themes'; -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@include nb-install-component() { - position: relative; - display: block; - overflow: hidden; - - nb-card { - position: relative; - } - - nb-card-header { - border-bottom: none; - } - - .subtitle { - color: nb-theme(text-hint-color); - } - - .container { - display: flex; - flex-direction: row; - } - - .chart-container { - flex: 1; - height: 100%; - display: flex; - flex-direction: column; - overflow: hidden; - position: relative; - } - - .chart-header { - display: flex; - justify-content: space-between; - margin-bottom: 2.125rem; - } - - @include media-breakpoint-down(is) { - ngx-legend-chart { - ::ng-deep .legends { - padding-left: 0; - } - } - } -} diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts deleted file mode 100644 index c5c254b..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { takeWhile } from 'rxjs/operators'; -import { NbThemeService } from '@nebular/theme'; -import { OutlineData, VisitorsAnalyticsData } from '../../../@core/data/visitors-analytics'; -import { forkJoin } from 'rxjs'; - - -@Component({ - selector: 'ngx-ecommerce-visitors-analytics', - styleUrls: ['./visitors-analytics.component.scss'], - templateUrl: './visitors-analytics.component.html', -}) -export class ECommerceVisitorsAnalyticsComponent implements OnDestroy { - private alive = true; - - pieChartValue: number; - chartLegend: {iconColor: string; title: string}[]; - visitorsAnalyticsData: { innerLine: number[]; outerLine: OutlineData[]; }; - - constructor(private themeService: NbThemeService, - private visitorsAnalyticsChartService: VisitorsAnalyticsData) { - this.themeService.getJsTheme() - .pipe(takeWhile(() => this.alive)) - .subscribe(theme => { - this.setLegendItems(theme.variables.visitorsLegend); - }); - - forkJoin( - this.visitorsAnalyticsChartService.getInnerLineChartData(), - this.visitorsAnalyticsChartService.getOutlineLineChartData(), - this.visitorsAnalyticsChartService.getPieChartData(), - ) - .pipe(takeWhile(() => this.alive)) - .subscribe(([innerLine, outerLine, pieChartValue]: [number[], OutlineData[], number]) => { - this.visitorsAnalyticsData = { - innerLine: innerLine, - outerLine: outerLine, - }; - - this.pieChartValue = pieChartValue; - }); - } - - setLegendItems(visitorsLegend): void { - this.chartLegend = [ - { - iconColor: visitorsLegend.firstIcon, - title: 'Unique Visitors', - }, - { - iconColor: visitorsLegend.secondIcon, - title: 'Page Views', - }, - ]; - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html deleted file mode 100644 index 29e9ad8..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html +++ /dev/null @@ -1,18 +0,0 @@ -
-

1,100

-
New Visitors
-
-
-
-
-
-
- 25% - 75% -
- -
-
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss deleted file mode 100644 index 1d1c70d..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss +++ /dev/null @@ -1,44 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - - .visitors-statistics { - width: 100%; - } - - .visitors-title { - margin-top: 1rem; - } - - .statistics-chart { - margin: 1.5rem 0; - width: 100%; - - .echart { - display: block; - height: 13.75rem; - width: 100%; - } - } - - .chart-values { - display: flex; - } - - .chart-value { - flex: 1; - } - - .visitors-statistics-legend ::ng-deep { - .legends { - padding: 0; - margin-left: 0; - } - - .legend { - flex: 1; - margin-left: 0; - justify-content: flex-start; - } - } -} diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts deleted file mode 100644 index 3ba8738..0000000 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts +++ /dev/null @@ -1,215 +0,0 @@ -import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { delay, takeWhile } from 'rxjs/operators'; -import { LayoutService } from '../../../../@core/utils/layout.service'; - - -@Component({ - selector: 'ngx-visitors-statistics', - styleUrls: ['./visitors-statistics.component.scss'], - templateUrl: './visitors-statistics.component.html', -}) -export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDestroy { - - private alive = true; - - @Input() value: number; - - option: any = {}; - chartLegend: { iconColor: string; title: string }[]; - echartsIntance: any; - - constructor(private theme: NbThemeService, - private layoutService: LayoutService) { - this.layoutService.onSafeChangeLayoutSize() - .pipe( - takeWhile(() => this.alive), - ) - .subscribe(() => this.resizeChart()); - } - - ngAfterViewInit() { - this.theme.getJsTheme() - .pipe( - takeWhile(() => this.alive), - delay(1), - ) - .subscribe(config => { - const variables: any = config.variables; - const visitorsPieLegend: any = config.variables.visitorsPieLegend; - - this.setOptions(variables); - this.setLegendItems(visitorsPieLegend); - }); - } - - setLegendItems(visitorsPieLegend) { - this.chartLegend = [ - { - iconColor: visitorsPieLegend.firstSection, - title: 'New Visitors', - }, - { - iconColor: visitorsPieLegend.secondSection, - title: 'Return Visitors', - }, - ]; - } - - setOptions(variables) { - const visitorsPie: any = variables.visitorsPie; - - this.option = { - tooltip: { - trigger: 'item', - formatter: '', - }, - series: [ - { - name: ' ', - clockWise: true, - hoverAnimation: false, - type: 'pie', - center: ['50%', '50%'], - radius: visitorsPie.firstPieRadius, - data: [ - { - value: this.value, - name: ' ', - label: { - normal: { - position: 'center', - formatter: '', - textStyle: { - fontSize: '22', - fontFamily: variables.fontSecondary, - fontWeight: '600', - color: variables.fgHeading, - }, - }, - }, - tooltip: { - show: false, - }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: visitorsPie.firstPieGradientLeft, - }, - { - offset: 1, - color: visitorsPie.firstPieGradientRight, - }, - ]), - shadowColor: visitorsPie.firstPieShadowColor, - shadowBlur: 0, - shadowOffsetX: 0, - shadowOffsetY: 3, - }, - }, - hoverAnimation: false, - }, - { - value: 100 - this.value, - name: ' ', - tooltip: { - show: false, - }, - label: { - normal: { - position: 'inner', - }, - }, - itemStyle: { - normal: { - color: variables.layoutBg, - }, - }, - }, - ], - }, - { - name: ' ', - clockWise: true, - hoverAnimation: false, - type: 'pie', - center: ['50%', '50%'], - radius: visitorsPie.secondPieRadius, - data: [ - { - value: this.value, - name: ' ', - label: { - normal: { - position: 'center', - formatter: '', - textStyle: { - fontSize: '22', - fontFamily: variables.fontSecondary, - fontWeight: '600', - color: variables.fgHeading, - }, - }, - }, - tooltip: { - show: false, - }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1), - }, - }, - hoverAnimation: false, - }, - { - value: 100 - this.value, - name: ' ', - tooltip: { - show: false, - }, - label: { - normal: { - position: 'inner', - }, - }, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: visitorsPie.secondPieGradientLeft, - }, - { - offset: 1, - color: visitorsPie.secondPieGradientRight, - }, - ]), - shadowColor: visitorsPie.secondPieShadowColor, - shadowBlur: 0, - shadowOffsetX: visitorsPie.shadowOffsetX, - shadowOffsetY: visitorsPie.shadowOffsetY, - }, - }, - }, - ], - }, - ], - }; - } - - onChartInit(echarts) { - this.echartsIntance = echarts; - } - - resizeChart() { - if (this.echartsIntance) { - this.echartsIntance.resize(); - } - } - - ngOnDestroy() { - this.alive = false; - } -} diff --git a/src/app/pages/editors/ckeditor/ckeditor.component.ts b/src/app/pages/editors/ckeditor/ckeditor.component.ts deleted file mode 100644 index 9796fd6..0000000 --- a/src/app/pages/editors/ckeditor/ckeditor.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from '@angular/core'; - -import './ckeditor.loader'; -import 'ckeditor'; - -@Component({ - selector: 'ngx-ckeditor', - template: ` - - - CKEditor - - - - - - `, -}) -export class CKEditorComponent { -} diff --git a/src/app/pages/editors/ckeditor/ckeditor.loader.ts b/src/app/pages/editors/ckeditor/ckeditor.loader.ts deleted file mode 100644 index 8232269..0000000 --- a/src/app/pages/editors/ckeditor/ckeditor.loader.ts +++ /dev/null @@ -1 +0,0 @@ -window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.2/full-all/'; diff --git a/src/app/pages/editors/editors-routing.module.ts b/src/app/pages/editors/editors-routing.module.ts deleted file mode 100644 index fd3ae87..0000000 --- a/src/app/pages/editors/editors-routing.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { EditorsComponent } from './editors.component'; -import { TinyMCEComponent } from './tiny-mce/tiny-mce.component'; -import { CKEditorComponent } from './ckeditor/ckeditor.component'; - -const routes: Routes = [{ - path: '', - component: EditorsComponent, - children: [{ - path: 'tinymce', - component: TinyMCEComponent, - }, { - path: 'ckeditor', - component: CKEditorComponent, - }], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class EditorsRoutingModule { } - -export const routedComponents = [ - EditorsComponent, - TinyMCEComponent, - CKEditorComponent, -]; diff --git a/src/app/pages/editors/editors.component.ts b/src/app/pages/editors/editors.component.ts deleted file mode 100644 index 2c176c1..0000000 --- a/src/app/pages/editors/editors.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-editors', - template: ` - - `, -}) -export class EditorsComponent { - -} diff --git a/src/app/pages/editors/editors.module.ts b/src/app/pages/editors/editors.module.ts deleted file mode 100644 index a05493e..0000000 --- a/src/app/pages/editors/editors.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; -import { NbCardModule } from '@nebular/theme'; -import { CKEditorModule } from 'ng2-ckeditor'; - -import { ThemeModule } from '../../@theme/theme.module'; - -import { EditorsRoutingModule, routedComponents } from './editors-routing.module'; - -@NgModule({ - imports: [ - NbCardModule, - ThemeModule, - EditorsRoutingModule, - CKEditorModule, - ], - declarations: [ - ...routedComponents, - ], -}) -export class EditorsModule { } diff --git a/src/app/pages/editors/tiny-mce/tiny-mce.component.ts b/src/app/pages/editors/tiny-mce/tiny-mce.component.ts deleted file mode 100644 index 84bcc73..0000000 --- a/src/app/pages/editors/tiny-mce/tiny-mce.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-tiny-mce-page', - template: ` - - - Tiny MCE - - - - - - `, -}) -export class TinyMCEComponent { -} diff --git a/src/app/pages/extra-components/alert/alert.component.html b/src/app/pages/extra-components/alert/alert.component.html deleted file mode 100644 index 8818b53..0000000 --- a/src/app/pages/extra-components/alert/alert.component.html +++ /dev/null @@ -1,40 +0,0 @@ -
-
- - Colored Alert - - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - - -
- -
- - Outline Alert - - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - - -
- -
- - Accent Alert - - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - You have been successfully authenticated! - - -
-
diff --git a/src/app/pages/extra-components/alert/alert.component.ts b/src/app/pages/extra-components/alert/alert.component.ts deleted file mode 100644 index 120ba6d..0000000 --- a/src/app/pages/extra-components/alert/alert.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-alert', - templateUrl: 'alert.component.html', -}) -export class AlertComponent { - -} diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.html b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.html deleted file mode 100644 index 2e0cb17..0000000 --- a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - -

NbCalendarKitModule is a module that contains multiple useful components for building custom calendars. - So if you think our calendars is not enough powerful for you just use calendar-kit and build your own calendar!

- - - - - diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss deleted file mode 100644 index beb36cc..0000000 --- a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card-header { - display: flex; - justify-content: center; - text-align: center; - - p { - width: 80%; - } - } -} diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts deleted file mode 100644 index 9d3c160..0000000 --- a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; -import { CalendarKitMonthCellComponent } from './month-cell/month-cell.component'; - -@Component({ - selector: 'ngx-calendar-kit', - templateUrl: 'calendar-kit.component.html', - styleUrls: ['calendar-kit.component.scss'] -}) -export class CalendarKitFullCalendarShowcaseComponent { - month = new Date(); - monthCellComponent = CalendarKitMonthCellComponent; -} diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html deleted file mode 100644 index 1545e6d..0000000 --- a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html +++ /dev/null @@ -1,7 +0,0 @@ -

{{ title }}

- - diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss deleted file mode 100644 index 21a02e7..0000000 --- a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - padding: 1rem; -} diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts deleted file mode 100644 index b0f3c22..0000000 --- a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component, EventEmitter } from '@angular/core'; -import { - NbCalendarCell, - NbCalendarDayPickerComponent, - NbCalendarMonthModelService, - NbDateService, -} from '@nebular/theme'; -import { TranslationWidth } from '@angular/common'; - -@Component({ - selector: 'ngx-calendar-kit-month-cell', - styleUrls: ['month-cell.component.scss'], - templateUrl: 'month-cell.component.html', -}) -export class CalendarKitMonthCellComponent extends NbCalendarDayPickerComponent - implements NbCalendarCell { - select: EventEmitter = new EventEmitter(); - selectedValue: Date; - - constructor(private dateService: NbDateService, monthModel: NbCalendarMonthModelService) { - super(monthModel); - } - - get title() { - return this.dateService.getMonthName(this.date, TranslationWidth.Wide); - } -} diff --git a/src/app/pages/extra-components/calendar/calendar.component.html b/src/app/pages/extra-components/calendar/calendar.component.html deleted file mode 100644 index 6a75f62..0000000 --- a/src/app/pages/extra-components/calendar/calendar.component.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
- - Selected date: {{ date | date }} - - -
-
- - Selected range: {{ range.start | date }} - {{ range.end | date }} - - -
-
- - Selected date: {{ date2 | date }} - - -
-
diff --git a/src/app/pages/extra-components/calendar/calendar.component.scss b/src/app/pages/extra-components/calendar/calendar.component.scss deleted file mode 100644 index 3212c52..0000000 --- a/src/app/pages/extra-components/calendar/calendar.component.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .calendars { - display: flex; - flex-wrap: wrap; - margin: -1rem -0.5rem; - justify-content: center; - } - - .calendar-container { - margin: 1rem 0.5rem; - } - - .subtitle { - display: block; - margin-bottom: 0.5rem; - } - - @include media-breakpoint-up(md) { - .calendars { - justify-content: flex-start; - } - } - - @include media-breakpoint-up(lg) { - .calendars { - margin: -1.1rem; - } - .calendar-container { - margin: 1rem; - } - } - - @include media-breakpoint-up(xxxl) { - .calendars { - margin: -1rem; - } - } -} diff --git a/src/app/pages/extra-components/calendar/calendar.component.ts b/src/app/pages/extra-components/calendar/calendar.component.ts deleted file mode 100644 index 5e0b62b..0000000 --- a/src/app/pages/extra-components/calendar/calendar.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component } from '@angular/core'; -import { NbCalendarRange, NbDateService } from '@nebular/theme'; -import { DayCellComponent } from './day-cell/day-cell.component'; - -@Component({ - selector: 'ngx-calendar', - templateUrl: 'calendar.component.html', - styleUrls: ['calendar.component.scss'] -}) -export class CalendarComponent { - - date = new Date(); - date2 = new Date(); - range: NbCalendarRange; - dayCellComponent = DayCellComponent; - - constructor(protected dateService: NbDateService) { - this.range = { - start: this.dateService.addDay(this.monthStart, 3), - end: this.dateService.addDay(this.monthEnd, -3), - }; - } - - get monthStart(): Date { - return this.dateService.getMonthStart(new Date()); - } - - get monthEnd(): Date { - return this.dateService.getMonthEnd(new Date()); - } -} diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html deleted file mode 100644 index 1bd22ab..0000000 --- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html +++ /dev/null @@ -1,2 +0,0 @@ -
{{ day }}
-{{ (day + 100) * day }}$ diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss deleted file mode 100644 index 4054a84..0000000 --- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - text-align: center; - flex-direction: column; - - .caption { - display: block; - } - - &.selected .caption, - &:hover .caption { - color: nb-theme(text-control-color); - } - - &.bounding-month .caption { - color: inherit; - } -} diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts deleted file mode 100644 index d6d821b..0000000 --- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { NbCalendarDayCellComponent } from '@nebular/theme'; - -@Component({ - selector: 'ngx-day-cell', - templateUrl: 'day-cell.component.html', - styleUrls: ['day-cell.component.scss'], - host: { '(click)': 'onClick()', 'class': 'day-cell' }, -}) -export class DayCellComponent extends NbCalendarDayCellComponent { -} diff --git a/src/app/pages/extra-components/chat/bot-replies.ts b/src/app/pages/extra-components/chat/bot-replies.ts deleted file mode 100644 index 23d8cd1..0000000 --- a/src/app/pages/extra-components/chat/bot-replies.ts +++ /dev/null @@ -1,190 +0,0 @@ -const botAvatar: string = 'https://i.ytimg.com/vi/Erqi5ckVoEo/hqdefault.jpg'; - -export const gifsLinks: string[] = [ - 'https://media.tenor.com/images/ac287fd06319e47b1533737662d5bfe8/tenor.gif', - 'https://i.gifer.com/no.gif', - 'https://techcrunch.com/wp-content/uploads/2015/08/safe_image.gif', - 'http://www.reactiongifs.com/r/wnd1.gif', -]; -export const imageLinks: string[] = [ - 'https://picsum.photos/320/240/?image=357', - 'https://picsum.photos/320/240/?image=556', - 'https://picsum.photos/320/240/?image=339', - 'https://picsum.photos/320/240/?image=387', - 'https://picsum.photos/320/240/?image=30', - 'https://picsum.photos/320/240/?image=271', -]; -const fileLink: string = 'http://google.com'; - -export const botReplies = [ - { - regExp: /([H,h]ey)|([H,h]i)/g, - answerArray: ['Hello!', 'Yes?', 'Yes, milord?', 'What can I do for you?'], - type: 'text', - reply: { - text: '', - reply: false, - date: new Date(), - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([H,h]elp)/g, - answerArray: [`No problem! Try sending a message containing word "hey", "image", - "gif", "file", "map", "quote", "file group" to see different message components`], - type: 'text', - reply: { - text: '', - reply: false, - date: new Date(), - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([I,i]mage)|(IMAGE)|([P,p]ic)|(Picture)/g, - answerArray: ['Hey look at this!', 'Ready to work', 'Yes, master.'], - type: 'pic', - reply: { - text: '', - reply: false, - date: new Date(), - type: 'file', - files: [ - { - url: '', - type: 'image/jpeg', - }, - ], - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([G,g]if)|(GIF)/g, - type: 'gif', - answerArray: ['No problem', 'Well done', 'You got it man'], - reply: { - text: '', - reply: false, - date: new Date(), - type: 'file', - files: [ - { - url: '', - type: 'image/gif', - }, - ], - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([F,f]ile group)|(FILE)/g, - type: 'group', - answerArray: ['Take it!', 'Job Done.', 'As you wish'], - reply: { - text: '', - reply: false, - date: new Date(), - type: 'file', - files: [ - { - url: fileLink, - icon: 'nb-compose', - }, - { - url: '', - type: 'image/gif', - }, - { - url: '', - type: 'image/jpeg', - }, - ], - icon: 'nb-compose', - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([F,f]ile)|(FILE)/g, - type: 'file', - answerArray: ['Take it!', 'Job Done.', 'As you wish'], - reply: { - text: '', - reply: false, - date: new Date(), - type: 'file', - files: [ - { - url: fileLink, - icon: 'nb-compose', - }, - ], - icon: 'nb-compose', - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([M,m]ap)|(MAP)/g, - type: 'map', - answerArray: ['Done.', 'My sight is yours.', 'I shall be your eyes.'], - reply: { - text: '', - reply: false, - date: new Date(), - type: 'map', - latitude: 53.914321, - longitude: 27.5998355, - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /([Q,q]uote)|(QUOTE)/g, - type: 'quote', - answerArray: ['Quoted!', 'Say no more.', 'I gladly obey.'], - reply: { - text: '', - reply: false, - date: new Date(), - type: 'quote', - quote: '', - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, - { - regExp: /(.*)/g, - answerArray: ['Hello there! Try typing "help"'], - type: 'text', - reply: { - text: '', - reply: false, - date: new Date(), - user: { - name: 'Bot', - avatar: botAvatar, - }, - }, - }, -]; diff --git a/src/app/pages/extra-components/chat/chat.component.html b/src/app/pages/extra-components/chat/chat.component.html deleted file mode 100644 index 67c732e..0000000 --- a/src/app/pages/extra-components/chat/chat.component.html +++ /dev/null @@ -1,39 +0,0 @@ - - -

Here's a complete example build in a bot-like app. Type help to be able to receive different message types. - Enjoy the conversation and the beautiful UI.

- - -
-
- - - - - - -
-
-
-

Main features:

-
    -
  • different message types support (text, image, file, file group, map, etc)
    • -
  • drag & drop for images and files with preview
    • -
  • different UI styles
    • -
  • custom action buttons (coming soon)
    • -
-
-
-
- - diff --git a/src/app/pages/extra-components/chat/chat.component.scss b/src/app/pages/extra-components/chat/chat.component.scss deleted file mode 100644 index eaf111d..0000000 --- a/src/app/pages/extra-components/chat/chat.component.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - ::ng-deep nb-layout-column { - justify-content: center; - display: flex; - } - - nb-chat { - margin: 3rem auto 0; - width: 500px; - - } - - .chat-container { - margin-bottom: 2rem; - - li { - padding-top: 1rem; - } - } - - .chart-description { - text-align: center; - margin: 0 auto; - width: 52%; - } - - .chart-features { - margin-top: 2.75rem; - } - - @include media-breakpoint-down(xxl) { - nb-chat { - width: 400px; - } - } - - @include media-breakpoint-down(md) { - nb-chat { - width: 400px; - } - - .chart-description { - width: 90%; - } - } - - @include media-breakpoint-down(is) { - nb-chat { - width: 300px; - } - } -} diff --git a/src/app/pages/extra-components/chat/chat.component.ts b/src/app/pages/extra-components/chat/chat.component.ts deleted file mode 100644 index fef91c6..0000000 --- a/src/app/pages/extra-components/chat/chat.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component } from '@angular/core'; - -import { ChatService } from './chat.service'; - -@Component({ - selector: 'ngx-chat', - templateUrl: 'chat.component.html', - styleUrls: ['chat.component.scss'], - providers: [ ChatService ], -}) -export class ChatComponent { - - messages: any[]; - - constructor(protected chatService: ChatService) { - this.messages = this.chatService.loadMessages(); - } - - sendMessage(event: any) { - const files = !event.files ? [] : event.files.map((file) => { - return { - url: file.src, - type: file.type, - icon: 'nb-compose', - }; - }); - - this.messages.push({ - text: event.message, - date: new Date(), - reply: true, - type: files.length ? 'file' : 'text', - files: files, - user: { - name: 'Jonh Doe', - avatar: 'https://i.gifer.com/no.gif', - }, - }); - const botReply = this.chatService.reply(event.message); - if (botReply) { - setTimeout(() => { this.messages.push(botReply); }, 500); - } - } -} diff --git a/src/app/pages/extra-components/chat/chat.service.ts b/src/app/pages/extra-components/chat/chat.service.ts deleted file mode 100644 index 493b4f4..0000000 --- a/src/app/pages/extra-components/chat/chat.service.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { messages } from './messages'; -import { botReplies, gifsLinks, imageLinks } from './bot-replies'; - -@Injectable() -export class ChatService { - - - loadMessages() { - return messages; - } - - loadBotReplies() { - return botReplies; - } - - reply(message: string) { - const botReply: any = this.loadBotReplies() - .find((reply: any) => message.search(reply.regExp) !== -1); - - if (botReply.reply.type === 'quote') { - botReply.reply.quote = message; - } - - if (botReply.type === 'gif') { - botReply.reply.files[0].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)]; - } - - if (botReply.type === 'pic') { - botReply.reply.files[0].url = imageLinks[Math.floor(Math.random() * imageLinks.length)]; - } - - if (botReply.type === 'group') { - botReply.reply.files[1].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)]; - botReply.reply.files[2].url = imageLinks[Math.floor(Math.random() * imageLinks.length)]; - } - - botReply.reply.text = botReply.answerArray[Math.floor(Math.random() * botReply.answerArray.length)]; - return { ...botReply.reply }; - } -} diff --git a/src/app/pages/extra-components/chat/messages.ts b/src/app/pages/extra-components/chat/messages.ts deleted file mode 100644 index b37d6dc..0000000 --- a/src/app/pages/extra-components/chat/messages.ts +++ /dev/null @@ -1,85 +0,0 @@ -export const messages = [ - { - text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', - reply: false, - date: new Date(), - user: { - name: 'John Doe', - avatar: 'https://i.gifer.com/no.gif', - }, - }, - { - text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', - reply: true, - date: new Date(), - user: { - name: 'John Doe', - avatar: 'https://i.gifer.com/no.gif', - }, - }, - { - text: 'Hello, how are you?', - reply: false, - date: new Date(), - user: { - name: 'John Doe', - avatar: '', - }, - }, - { - text: 'Hey looks at that pic I just found!', - reply: false, - date: new Date(), - type: 'file', - files: [ - { - url: 'https://i.gifer.com/no.gif', - type: 'image/jpeg', - icon: false, - }, - ], - user: { - name: 'John Doe', - avatar: '', - }, - }, - { - text: 'What do you mean by that?', - reply: false, - date: new Date(), - type: 'quote', - quote: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', - user: { - name: 'John Doe', - avatar: '', - }, - }, - { - text: 'Attached is an archive I mentioned', - reply: true, - date: new Date(), - type: 'file', - files: [ - { - url: 'https://i.gifer.com/no.gif', - icon: 'file-text-outline', - }, - ], - user: { - name: 'John Doe', - avatar: '', - }, - }, - { - text: 'Meet me there', - reply: false, - date: new Date(), - type: 'map', - latitude: 40.714728, - longitude: -73.998672, - user: { - name: 'John Doe', - avatar: '', - }, - }, -]; diff --git a/src/app/pages/extra-components/extra-components-routing.module.ts b/src/app/pages/extra-components/extra-components-routing.module.ts deleted file mode 100644 index eb7251a..0000000 --- a/src/app/pages/extra-components/extra-components-routing.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { ExtraComponentsComponent } from './extra-components.component'; -import { AlertComponent } from './alert/alert.component'; -import { ProgressBarComponent } from './progress-bar/progress-bar.component'; -import { SpinnerComponent } from './spinner/spinner.component'; -import { CalendarComponent } from './calendar/calendar.component'; -import { ChatComponent } from './chat/chat.component'; -import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component'; - -const routes: Routes = [{ - path: '', - component: ExtraComponentsComponent, - children: [ - { - path: 'calendar', - component: CalendarComponent, - }, - { - path: 'progress-bar', - component: ProgressBarComponent, - }, - { - path: 'spinner', - component: SpinnerComponent, - }, - { - path: 'alert', - component: AlertComponent, - }, - { - path: 'calendar-kit', - component: CalendarKitFullCalendarShowcaseComponent, - }, - { - path: 'chat', - component: ChatComponent, - }, - ], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class ExtraComponentsRoutingModule { -} diff --git a/src/app/pages/extra-components/extra-components.component.ts b/src/app/pages/extra-components/extra-components.component.ts deleted file mode 100644 index f132ff8..0000000 --- a/src/app/pages/extra-components/extra-components.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-components', - template: ` - - `, -}) -export class ExtraComponentsComponent { -} diff --git a/src/app/pages/extra-components/extra-components.module.ts b/src/app/pages/extra-components/extra-components.module.ts deleted file mode 100644 index 3116187..0000000 --- a/src/app/pages/extra-components/extra-components.module.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { NgModule } from '@angular/core'; -import { - NbActionsModule, - NbAlertModule, - NbButtonModule, - NbCalendarKitModule, - NbCalendarModule, - NbCalendarRangeModule, - NbCardModule, - NbChatModule, - NbIconModule, - NbProgressBarModule, - NbSelectModule, - NbSpinnerModule, - NbTabsetModule, -} from '@nebular/theme'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { ExtraComponentsRoutingModule } from './extra-components-routing.module'; - -// components -import { ExtraComponentsComponent } from './extra-components.component'; -import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component'; -import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component'; -import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component'; -import { SpinnerColorComponent } from './spinner/spinner-color/spinner-color.component'; -import { SpinnerComponent } from './spinner/spinner.component'; -import { - InteractiveProgressBarComponent, -} from './progress-bar/interactive-progress-bar/interactive-progress-bar.component'; -import { ProgressBarComponent } from './progress-bar/progress-bar.component'; -import { AlertComponent } from './alert/alert.component'; -import { ChatComponent } from './chat/chat.component'; -import { CalendarComponent } from './calendar/calendar.component'; -import { DayCellComponent } from './calendar/day-cell/day-cell.component'; -import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component'; -import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component'; -import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component'; -import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component'; - -const COMPONENTS = [ - ExtraComponentsComponent, - AlertComponent, - ProgressBarComponent, - InteractiveProgressBarComponent, - SpinnerComponent, - SpinnerColorComponent, - SpinnerSizesComponent, - SpinnerInButtonsComponent, - SpinnerInTabsComponent, - CalendarComponent, - DayCellComponent, - ChatComponent, - NebularFormInputsComponent, - NebularSelectComponent, - CalendarKitFullCalendarShowcaseComponent, - CalendarKitMonthCellComponent, -]; - -const MODULES = [ - NbAlertModule, - NbActionsModule, - NbButtonModule, - NbCalendarModule, - NbCalendarKitModule, - NbCalendarRangeModule, - NbCardModule, - NbChatModule, - NbIconModule, - NbProgressBarModule, - NbSelectModule, - NbSpinnerModule, - NbTabsetModule, - ThemeModule, - ExtraComponentsRoutingModule, -]; - -@NgModule({ - imports: [ - ...MODULES, - ], - declarations: [ - ...COMPONENTS, - ], -}) -export class ExtraComponentsModule { } diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html deleted file mode 100644 index 601251c..0000000 --- a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss deleted file mode 100644 index ca85fb9..0000000 --- a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .inputs-group-margin-bottom { - margin-bottom: 2rem; - - &:last-child { - margin: 0; - } - } -} diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts deleted file mode 100644 index d9757c1..0000000 --- a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-nebular-form-inputs', - templateUrl: 'nebular-form-inputs.component.html', - styleUrls: ['nebular-form-inputs.component.scss'], -}) -export class NebularFormInputsComponent { - -} diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html deleted file mode 100644 index 487a96b..0000000 --- a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html +++ /dev/null @@ -1,344 +0,0 @@ -
-
- - Select - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Multiple Select - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Cleanable - - - Clean - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Placeholder - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Custom Label - - - - Selected: {{ selectedItem }} - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Select Groups - - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 21 - Option 22 - Option 23 - Option 24 - - - - Option 31 - Option 32 - Option 33 - Option 34 - - - - -
- -
- - Disabled Select - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 21 - Option 22 - Option 23 - Option 24 - - - - Option 31 - Option 32 - Option 33 - Option 34 - - - - - -
- -
- - Select Shapes - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Select Sizes - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- -
- - Select Statuses - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- - -
- - Outline Select - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
- - -
- - Select Colors - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - -
-
diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss deleted file mode 100644 index 4380983..0000000 --- a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-select { - display: block; - width: 15rem; - } - - .select-group { - nb-select { - margin-right: 0.75rem; - margin-bottom: 1rem; - } - } -} diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts deleted file mode 100644 index 41cd29f..0000000 --- a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-nebular-select', - templateUrl: 'nebular-select.component.html', - styleUrls: ['nebular-select.component.scss'], -}) -export class NebularSelectComponent { - - commonSelectedItem = '2'; - selectedItem; -} diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html deleted file mode 100644 index 233ba30..0000000 --- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - Progress Bar Interactive - -
- - - -
- - diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss deleted file mode 100644 index c44ec13..0000000 --- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - .container { - display: flex; - align-items: center; - } - - nb-progress-bar { - flex: 1; - margin: 0 1rem; - } -} diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts deleted file mode 100644 index e82687f..0000000 --- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-interactive-progress-bar', - templateUrl: 'interactive-progress-bar.component.html', - styleUrls: ['interactive-progress-bar.component.scss'], -}) -export class InteractiveProgressBarComponent { - - value = 25; - - get status() { - if (this.value <= 25) { - return 'danger'; - } else if (this.value <= 50) { - return 'warning'; - } else if (this.value <= 75) { - return 'info'; - } else { - return 'success'; - } - } - - get canIncrease(): boolean { - return this.value < 100; - } - - get canDecrease(): boolean { - return this.value > 0; - } - - decreaseValue() { - if (this.value > 0) { - this.value -= 25; - } - } - - increaseValue() { - if (this.value < 100) { - this.value += 25; - } - } -} diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.html b/src/app/pages/extra-components/progress-bar/progress-bar.component.html deleted file mode 100644 index 0152cd3..0000000 --- a/src/app/pages/extra-components/progress-bar/progress-bar.component.html +++ /dev/null @@ -1,31 +0,0 @@ - - Progress Bar Status - - primary - info - success - warning - danger - - - - - - - Progress Bar Size - - tiny - small - medium (default) - large - giant - - - - - Progress Bar Value - - - Custom text - - diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/progress-bar.component.scss deleted file mode 100644 index 3fdcd62..0000000 --- a/src/app/pages/extra-components/progress-bar/progress-bar.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-progress-bar ~ nb-progress-bar { - margin-top: 1rem; - } -} diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.ts b/src/app/pages/extra-components/progress-bar/progress-bar.component.ts deleted file mode 100644 index 03f4fe6..0000000 --- a/src/app/pages/extra-components/progress-bar/progress-bar.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-progress-bar', - templateUrl: 'progress-bar.component.html', - styleUrls: ['progress-bar.component.scss'], -}) -export class ProgressBarComponent { - -} diff --git a/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html b/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html deleted file mode 100644 index 4c2447d..0000000 --- a/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - Some card content. - - - - - - Some card content. - - - - - - Some card content. - - - - - - Some card content. - - - - - - Some card content. - - diff --git a/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts b/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts deleted file mode 100644 index b2faf32..0000000 --- a/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-spinner-color', - templateUrl: 'spinner-color.component.html', -}) - -export class SpinnerColorComponent { -} diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html deleted file mode 100644 index bc2ff55..0000000 --- a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html +++ /dev/null @@ -1,39 +0,0 @@ - - Button With Spinner - -
-
- - - - - -
-
- - - - - -
-
- - diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss deleted file mode 100644 index a3c1c46..0000000 --- a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - button { - margin: 1rem; - } - - .size-medium-group { - margin-top: 2rem; - border-top: 1px solid nb-theme(divider-color); - } -} diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts deleted file mode 100644 index 5c84dc1..0000000 --- a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-spinner-in-buttons', - templateUrl: 'spinner-in-buttons.component.html', - styleUrls: ['spinner-in-buttons.component.scss'], -}) - -export class SpinnerInButtonsComponent { - - loadingLargeGroup = false; - loadingMediumGroup = false; - - toggleLoadingLargeGroupAnimation() { - this.loadingLargeGroup = true; - - setTimeout(() => this.loadingLargeGroup = false, 3000); - } - - toggleLoadingMediumGroupAnimation() { - this.loadingMediumGroup = true; - - setTimeout(() => this.loadingMediumGroup = false, 3000); - } -} diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html deleted file mode 100644 index 6816e6c..0000000 --- a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - -

- A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object. -

- - - -

- Nebular's primary goal is to assemble together and connect the most awesome features and libraries - creating an efficient ecosystem to speed up and simplify the development. -

- - - - - diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss deleted file mode 100644 index 17bf08e..0000000 --- a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-tab { - padding: 1.25rem; - } -} diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts deleted file mode 100644 index c9eb751..0000000 --- a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-spinner-in-tabs', - templateUrl: 'spinner-in-tabs.component.html', - styleUrls: ['spinner-in-tabs.component.scss'], -}) - -export class SpinnerInTabsComponent { - - loading = false; - - toggleLoadingAnimation() { - this.loading = true; - setTimeout(() => this.loading = false, 1000); - } -} diff --git a/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html b/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html deleted file mode 100644 index 2269b44..0000000 --- a/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - Some card content. - - - - - - Some card content. - - - - - - Some card content. - - - - - - Some card content. - - - - - - Some card content. - - diff --git a/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts b/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts deleted file mode 100644 index fb968dc..0000000 --- a/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-spinner-sizes', - templateUrl: 'spinner-sizes.component.html', -}) - -export class SpinnerSizesComponent { -} diff --git a/src/app/pages/extra-components/spinner/spinner.component.html b/src/app/pages/extra-components/spinner/spinner.component.html deleted file mode 100644 index bd06ec5..0000000 --- a/src/app/pages/extra-components/spinner/spinner.component.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
- -
-
- -
-
- -
-
- -
-
diff --git a/src/app/pages/extra-components/spinner/spinner.component.scss b/src/app/pages/extra-components/spinner/spinner.component.scss deleted file mode 100644 index a8b9883..0000000 --- a/src/app/pages/extra-components/spinner/spinner.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - button { - margin: 1rem; - } - - ::ng-deep nb-spinner { - z-index: 999; - } -} diff --git a/src/app/pages/extra-components/spinner/spinner.component.ts b/src/app/pages/extra-components/spinner/spinner.component.ts deleted file mode 100644 index 95b183a..0000000 --- a/src/app/pages/extra-components/spinner/spinner.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-spinner', - templateUrl: 'spinner.component.html', - styleUrls: ['spinner.component.scss'], -}) - -export class SpinnerComponent { - - loading = false; - - toggleLoadingAnimation() { - this.loading = true; - setTimeout(() => this.loading = false, 3000); - } -} diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html deleted file mode 100644 index b9bbeb5..0000000 --- a/src/app/pages/forms/buttons/buttons.component.html +++ /dev/null @@ -1,123 +0,0 @@ -
-
- - Hero Buttons - -
- - -
- - - - - Default Buttons - -
- - -
- - - - - Outline Buttons - -
- - -
- - - - - Ghost Buttons - -
- - -
- - -
- -
- - Button shapes - -
- -
- - - - - Button sizes - -
- -
- - -
- -
- - Action Groups - - - - - - - - - - - - - - - - - - - Pause - - - - Logs - - - - Search - - - - Setup - - - - -
-
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss deleted file mode 100644 index 71df895..0000000 --- a/src/app/pages/forms/buttons/buttons.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .buttons-row { - margin: -0.5rem; - } - - button[nbButton] { - margin: 0.5rem; - } - - .action-icon { - @include nb-ltr(margin-right, 0.5rem); - @include nb-rtl(margin-left, 0.5rem); - } - - .actions-card { - height: 8rem; - } -} diff --git a/src/app/pages/forms/buttons/buttons.component.ts b/src/app/pages/forms/buttons/buttons.component.ts deleted file mode 100644 index f839321..0000000 --- a/src/app/pages/forms/buttons/buttons.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; -import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme'; - -@Component({ - selector: 'ngx-buttons', - styleUrls: ['./buttons.component.scss'], - templateUrl: './buttons.component.html', -}) -export class ButtonsComponent { - statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ]; - shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ]; - sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; -} diff --git a/src/app/pages/forms/datepicker/datepicker.component.html b/src/app/pages/forms/datepicker/datepicker.component.html deleted file mode 100644 index f785425..0000000 --- a/src/app/pages/forms/datepicker/datepicker.component.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
- - Common Datepicker - - - - - -
- -
- - Datepicker With Range - - - - - -
-
- - Datepicker With Disabled Min Max Values - - - - - -
-
diff --git a/src/app/pages/forms/datepicker/datepicker.component.scss b/src/app/pages/forms/datepicker/datepicker.component.scss deleted file mode 100644 index 96f5507..0000000 --- a/src/app/pages/forms/datepicker/datepicker.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card-body { - display: flex; - justify-content: space-between; - - input { - width: 100%; - } - } -} diff --git a/src/app/pages/forms/datepicker/datepicker.component.ts b/src/app/pages/forms/datepicker/datepicker.component.ts deleted file mode 100644 index 79ddec0..0000000 --- a/src/app/pages/forms/datepicker/datepicker.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; -import { NbDateService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-datepicker', - templateUrl: 'datepicker.component.html', - styleUrls: ['datepicker.component.scss'], -}) -export class DatepickerComponent { - - min: Date; - max: Date; - - constructor(protected dateService: NbDateService) { - this.min = this.dateService.addDay(this.dateService.today(), -5); - this.max = this.dateService.addDay(this.dateService.today(), 5); - } -} diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html deleted file mode 100644 index 962904a..0000000 --- a/src/app/pages/forms/form-inputs/form-inputs.component.html +++ /dev/null @@ -1,87 +0,0 @@ -
-
- - Default Inputs - - -
- - -
- - - - - - - - - - - -
- -
- - - Select - - - Option 1 - Option 2 - - - - - - Validation States - - - - - - -
- Success Checkbox - Warning Checkbox - Danger Checkbox -
- - - - - Checkboxes & Radios - -
- Checkbox 1 - Checkbox 2 -
-
- - - Radio 1 - - - Radio 2 - - - Radio 3 - - -
-
- Disabled Checkbox - - - Disabled Radio - - -
- - -
-
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.scss b/src/app/pages/forms/form-inputs/form-inputs.component.scss deleted file mode 100644 index f3fbf93..0000000 --- a/src/app/pages/forms/form-inputs/form-inputs.component.scss +++ /dev/null @@ -1,26 +0,0 @@ -nb-card-body { - overflow: visible; - padding-top: 0; - - > * { - margin-top: 1rem; - } -} - -.full-name-inputs, -.validation-checkboxes { - display: flex; - margin: 0 -0.5rem; - - > * { - margin: 0 0.5rem; - } -} - -.checkbox-radio { - display: flex; -} - -.demo-items { - flex: 1 0 33%; -} diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts deleted file mode 100644 index 4ec7045..0000000 --- a/src/app/pages/forms/form-inputs/form-inputs.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-form-inputs', - styleUrls: ['./form-inputs.component.scss'], - templateUrl: './form-inputs.component.html', -}) -export class FormInputsComponent { - - starRate = 2; - heartRate = 4; - radioGroupValue = 'This is value 2'; -} diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.html b/src/app/pages/forms/form-layouts/form-layouts.component.html deleted file mode 100644 index 780ff83..0000000 --- a/src/app/pages/forms/form-layouts/form-layouts.component.html +++ /dev/null @@ -1,165 +0,0 @@ -
-
- - Inline form - -
- - - Remember me - -
- - -
-
- -
-
- - Using the Grid - -
-
- -
- -
-
-
- -
- -
-
-
- -
- - Option 1 - Option 2 - Disabled Option - -
-
-
-
- -
-
-
- - - - - Form without labels - -
-
- -
-
- -
-
- -
- -
- - -
- -
- - Basic form - -
-
- - -
-
- - -
-
- Check me out -
- -
- - - - - Block form - -
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
- - - -
-
- -
-
- - Horizontal form - -
-
- -
- -
-
-
- -
- -
-
-
-
-
- Remember me -
-
-
-
-
- -
-
-
- - -
-
diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.scss b/src/app/pages/forms/form-layouts/form-layouts.component.scss deleted file mode 100644 index 4328e97..0000000 --- a/src/app/pages/forms/form-layouts/form-layouts.component.scss +++ /dev/null @@ -1,15 +0,0 @@ -nb-checkbox { - margin-bottom: 1rem; -} - -.form-inline [fullWidth] { - flex: 1; -} - -.form-inline > * { - margin: 0 1.5rem 1.5rem 0; -} - -nb-card.inline-form-card nb-card-body { - padding-bottom: 0; -} diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.ts b/src/app/pages/forms/form-layouts/form-layouts.component.ts deleted file mode 100644 index 2c90235..0000000 --- a/src/app/pages/forms/form-layouts/form-layouts.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-form-layouts', - styleUrls: ['./form-layouts.component.scss'], - templateUrl: './form-layouts.component.html', -}) -export class FormLayoutsComponent { - -} diff --git a/src/app/pages/forms/forms-routing.module.ts b/src/app/pages/forms/forms-routing.module.ts deleted file mode 100644 index a50d05a..0000000 --- a/src/app/pages/forms/forms-routing.module.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { FormsComponent } from './forms.component'; -import { FormInputsComponent } from './form-inputs/form-inputs.component'; -import { FormLayoutsComponent } from './form-layouts/form-layouts.component'; -import { DatepickerComponent } from './datepicker/datepicker.component'; -import { ButtonsComponent } from './buttons/buttons.component'; - -const routes: Routes = [ - { - path: '', - component: FormsComponent, - children: [ - { - path: 'inputs', - component: FormInputsComponent, - }, - { - path: 'layouts', - component: FormLayoutsComponent, - }, - { - path: 'layouts', - component: FormLayoutsComponent, - }, - { - path: 'buttons', - component: ButtonsComponent, - }, - { - path: 'datepicker', - component: DatepickerComponent, - }, - ], - }, -]; - -@NgModule({ - imports: [ - RouterModule.forChild(routes), - ], - exports: [ - RouterModule, - ], -}) -export class FormsRoutingModule { -} - diff --git a/src/app/pages/forms/forms.component.ts b/src/app/pages/forms/forms.component.ts deleted file mode 100644 index 424ce42..0000000 --- a/src/app/pages/forms/forms.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-form-elements', - template: ` - - `, -}) -export class FormsComponent { -} diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts deleted file mode 100644 index a7b9396..0000000 --- a/src/app/pages/forms/forms.module.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { NgModule } from '@angular/core'; -import { - NbActionsModule, - NbButtonModule, - NbCardModule, - NbCheckboxModule, - NbDatepickerModule, NbIconModule, - NbInputModule, - NbRadioModule, - NbSelectModule, - NbUserModule, -} from '@nebular/theme'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { FormsRoutingModule } from './forms-routing.module'; -import { FormsComponent } from './forms.component'; -import { FormInputsComponent } from './form-inputs/form-inputs.component'; -import { FormLayoutsComponent } from './form-layouts/form-layouts.component'; -import { DatepickerComponent } from './datepicker/datepicker.component'; -import { ButtonsComponent } from './buttons/buttons.component'; -import { FormsModule as ngFormsModule } from '@angular/forms'; - -@NgModule({ - imports: [ - ThemeModule, - NbInputModule, - NbCardModule, - NbButtonModule, - NbActionsModule, - NbUserModule, - NbCheckboxModule, - NbRadioModule, - NbDatepickerModule, - FormsRoutingModule, - NbSelectModule, - NbIconModule, - ngFormsModule, - ], - declarations: [ - FormsComponent, - ButtonsComponent, - FormInputsComponent, - FormLayoutsComponent, - DatepickerComponent, - ], -}) -export class FormsModule { } diff --git a/src/app/pages/group-management/group-management.component.html b/src/app/pages/group-management/group-management.component.html deleted file mode 100644 index 309a52c..0000000 --- a/src/app/pages/group-management/group-management.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - {{ fruit }} - - - - \ No newline at end of file diff --git a/src/app/pages/group-management/group-management.component.scss b/src/app/pages/group-management/group-management.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/pages/group-management/group-management.component.spec.ts b/src/app/pages/group-management/group-management.component.spec.ts deleted file mode 100644 index 374c0a3..0000000 --- a/src/app/pages/group-management/group-management.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GroupManagementComponent } from './group-management.component'; - -describe('GroupManagementComponent', () => { - let component: GroupManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GroupManagementComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(GroupManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/group-management/group-management.component.ts b/src/app/pages/group-management/group-management.component.ts deleted file mode 100644 index 53c3306..0000000 --- a/src/app/pages/group-management/group-management.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Group } from '../../entity/Group'; - -import groupsFromJson from '../../../assets/data/groups.json'; -@Component({ - selector: 'ngx-group-management', - templateUrl: './group-management.component.html', - styleUrls: ['./group-management.component.scss'] -}) -export class GroupManagementComponent implements OnInit { - - constructor() { } - groups: Group[] = groupsFromJson; - ngOnInit(): void { - } - -} diff --git a/src/app/pages/layout/accordion/accordion.component.html b/src/app/pages/layout/accordion/accordion.component.html deleted file mode 100644 index 180e3ab..0000000 --- a/src/app/pages/layout/accordion/accordion.component.html +++ /dev/null @@ -1,82 +0,0 @@ -
-
- - Toggle Accordion By Button - - - - - - - - - Product Details - - - A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object, - including galaxies beyond the Milky Way. - - - - - - Reviews - - - A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object, - including galaxies beyond the Milky Way. - - - - - - Edit - - - A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object, - including galaxies beyond the Milky Way. - - - -
- -
- - - - Product Details - - - A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object, - including galaxies beyond the Milky Way. - - - - - - Reviews - - - A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object, - including galaxies beyond the Milky Way. - - - - - - Edit - - - A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. - Originally, nebula was a name for any diffuse astronomical object, - including galaxies beyond the Milky Way. - - - -
-
diff --git a/src/app/pages/layout/accordion/accordion.component.scss b/src/app/pages/layout/accordion/accordion.component.scss deleted file mode 100644 index 3360786..0000000 --- a/src/app/pages/layout/accordion/accordion.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .accordion-container:first-child { - margin-bottom: nb-theme(card-margin-bottom); - } -} diff --git a/src/app/pages/layout/accordion/accordion.component.ts b/src/app/pages/layout/accordion/accordion.component.ts deleted file mode 100644 index 94965cb..0000000 --- a/src/app/pages/layout/accordion/accordion.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; - -@Component({ - selector: 'ngx-accordion', - templateUrl: 'accordion.component.html', - styleUrls: ['accordion.component.scss'], -}) -export class AccordionComponent { - - @ViewChild('item', { static: true }) accordion; - - toggle() { - this.accordion.toggle(); - } -} diff --git a/src/app/pages/layout/infinite-list/infinite-list.component.html b/src/app/pages/layout/infinite-list/infinite-list.component.html deleted file mode 100644 index 340275d..0000000 --- a/src/app/pages/layout/infinite-list/infinite-list.component.html +++ /dev/null @@ -1,36 +0,0 @@ -
-
- - Own Scroll - - - - - - - - - -
- -
- - Window Scroll - - - - - - - - - -
-
diff --git a/src/app/pages/layout/infinite-list/infinite-list.component.scss b/src/app/pages/layout/infinite-list/infinite-list.component.scss deleted file mode 100644 index 0e5b7ee..0000000 --- a/src/app/pages/layout/infinite-list/infinite-list.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -.infinite-cards { - nb-card { - &.own-scroll { - height: 50vh; - } - } -} diff --git a/src/app/pages/layout/infinite-list/infinite-list.component.ts b/src/app/pages/layout/infinite-list/infinite-list.component.ts deleted file mode 100644 index 34ad3a4..0000000 --- a/src/app/pages/layout/infinite-list/infinite-list.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Component } from '@angular/core'; -import { NewsService } from '../news.service'; - -@Component({ - selector: 'ngx-infinite-list', - templateUrl: 'infinite-list.component.html', - styleUrls: ['infinite-list.component.scss'], -}) -export class InfiniteListComponent { - - - firstCard = { - news: [], - placeholders: [], - loading: false, - pageToLoadNext: 1, - }; - secondCard = { - news: [], - placeholders: [], - loading: false, - pageToLoadNext: 1, - }; - pageSize = 10; - - constructor(private newsService: NewsService) {} - - loadNext(cardData) { - if (cardData.loading) { return; } - - cardData.loading = true; - cardData.placeholders = new Array(this.pageSize); - this.newsService.load(cardData.pageToLoadNext, this.pageSize) - .subscribe(nextNews => { - cardData.placeholders = []; - cardData.news.push(...nextNews); - cardData.loading = false; - cardData.pageToLoadNext++; - }); - } -} diff --git a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.html b/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.html deleted file mode 100644 index 47a3b30..0000000 --- a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
diff --git a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss b/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss deleted file mode 100644 index e04756d..0000000 --- a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -:host { - display: block; - - .title-placeholder { - height: 1.8rem; - margin-bottom: 0.5rem; - width: 80%; - } - - .text-placeholder { - height: 4rem; - margin-bottom: 1rem; - } - - .link-placeholder { - height: 1.25rem; - width: 5rem; - } -} - -@include nb-install-component() { - [class$='placeholder'] { - background: nb-theme(background-basic-color-2); - } -} diff --git a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.ts b/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.ts deleted file mode 100644 index cd6fbb3..0000000 --- a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, HostBinding } from '@angular/core'; - -@Component({ - selector: 'ngx-news-post-placeholder', - templateUrl: 'news-post-placeholder.component.html', - styleUrls: ['news-post-placeholder.component.scss'], -}) -export class NewsPostPlaceholderComponent { - - @HostBinding('attr.aria-label') - label = 'Loading'; -} diff --git a/src/app/pages/layout/infinite-list/news-post/news-post.component.html b/src/app/pages/layout/infinite-list/news-post/news-post.component.html deleted file mode 100644 index af5449d..0000000 --- a/src/app/pages/layout/infinite-list/news-post/news-post.component.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/app/pages/layout/infinite-list/news-post/news-post.component.ts b/src/app/pages/layout/infinite-list/news-post/news-post.component.ts deleted file mode 100644 index 44a80a4..0000000 --- a/src/app/pages/layout/infinite-list/news-post/news-post.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { NewsPost } from '../../news.service'; - -@Component({ - selector: 'ngx-news-post', - templateUrl: 'news-post.component.html', -}) -export class NewsPostComponent { - - @Input() post: NewsPost; -} diff --git a/src/app/pages/layout/layout-routing.module.ts b/src/app/pages/layout/layout-routing.module.ts deleted file mode 100644 index ddf0425..0000000 --- a/src/app/pages/layout/layout-routing.module.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { LayoutComponent } from './layout.component'; -import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component'; -import { AccordionComponent } from './accordion/accordion.component'; -import { InfiniteListComponent } from './infinite-list/infinite-list.component'; -import { ListComponent } from './list/list.component'; -import { StepperComponent } from './stepper/stepper.component'; - -const routes: Routes = [{ - path: '', - component: LayoutComponent, - children: [ - { - path: 'stepper', - component: StepperComponent, - }, - { - path: 'list', - component: ListComponent, - }, - { - path: 'infinite-list', - component: InfiniteListComponent, - }, - { - path: 'accordion', - component: AccordionComponent, - }, - { - path: 'tabs', - component: TabsComponent, - children: [ - { - path: '', - redirectTo: 'tab1', - pathMatch: 'full', - }, - { - path: 'tab1', - component: Tab1Component, - }, - { - path: 'tab2', - component: Tab2Component, - }, - ], - }, - ], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class LayoutRoutingModule { -} diff --git a/src/app/pages/layout/layout.component.ts b/src/app/pages/layout/layout.component.ts deleted file mode 100644 index f58be2e..0000000 --- a/src/app/pages/layout/layout.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-components', - template: ` - - `, -}) -export class LayoutComponent { -} diff --git a/src/app/pages/layout/layout.module.ts b/src/app/pages/layout/layout.module.ts deleted file mode 100644 index 73e1a65..0000000 --- a/src/app/pages/layout/layout.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { - NbAccordionModule, - NbButtonModule, - NbCardModule, - NbListModule, - NbRouteTabsetModule, - NbStepperModule, - NbTabsetModule, NbUserModule, -} from '@nebular/theme'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { LayoutRoutingModule } from './layout-routing.module'; -import { LayoutComponent } from './layout.component'; -import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component'; -import { StepperComponent } from './stepper/stepper.component'; -import { ListComponent } from './list/list.component'; -import { InfiniteListComponent } from './infinite-list/infinite-list.component'; -import { NewsPostComponent } from './infinite-list/news-post/news-post.component'; -import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component'; -import { AccordionComponent } from './accordion/accordion.component'; -import { NewsService } from './news.service'; - -@NgModule({ - imports: [ - FormsModule, - ReactiveFormsModule, - ThemeModule, - NbTabsetModule, - NbRouteTabsetModule, - NbStepperModule, - NbCardModule, - NbButtonModule, - NbListModule, - NbAccordionModule, - NbUserModule, - LayoutRoutingModule, - ], - declarations: [ - LayoutComponent, - TabsComponent, - Tab1Component, - Tab2Component, - StepperComponent, - ListComponent, - NewsPostPlaceholderComponent, - InfiniteListComponent, - NewsPostComponent, - AccordionComponent, - ], - providers: [ - NewsService, - ], -}) -export class LayoutModule { } diff --git a/src/app/pages/layout/list/fruits-list.ts b/src/app/pages/layout/list/fruits-list.ts deleted file mode 100644 index 7bae676..0000000 --- a/src/app/pages/layout/list/fruits-list.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const fruits: string[] = [ - 'Lemons', - 'Raspberries', - 'Strawberries', - 'Blackberries', - 'Kiwis', - 'Grapefruit', - 'Avocado', - 'Watermelon', - 'Cantaloupe', - 'Oranges', - 'Peaches', -]; diff --git a/src/app/pages/layout/list/list.component.html b/src/app/pages/layout/list/list.component.html deleted file mode 100644 index a11abe3..0000000 --- a/src/app/pages/layout/list/list.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
-
- - Some Fruits - - - - {{ fruit }} - - - - -
- -
- - Users - - - - - - - -
-
diff --git a/src/app/pages/layout/list/list.component.scss b/src/app/pages/layout/list/list.component.scss deleted file mode 100644 index 683ca36..0000000 --- a/src/app/pages/layout/list/list.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .list-card { - nb-card-header { - border-bottom: none; - } - - nb-card-body { - padding: 0; - } - } -} diff --git a/src/app/pages/layout/list/list.component.ts b/src/app/pages/layout/list/list.component.ts deleted file mode 100644 index 8e5b29b..0000000 --- a/src/app/pages/layout/list/list.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; -import { fruits } from './fruits-list'; - -@Component({ - selector: 'ngx-list', - templateUrl: 'list.component.html', - styleUrls: ['list.component.scss'], -}) -export class ListComponent { - fruits = fruits; - - users: { name: string, title: string }[] = [ - { name: 'Carla Espinosa', title: 'Nurse' }, - { name: 'Bob Kelso', title: 'Doctor of Medicine' }, - { name: 'Janitor', title: 'Janitor' }, - { name: 'Perry Cox', title: 'Doctor of Medicine' }, - { name: 'Ben Sullivan', title: 'Carpenter and photographer' }, - ]; -} diff --git a/src/app/pages/layout/news.service.ts b/src/app/pages/layout/news.service.ts deleted file mode 100644 index 0ec96c5..0000000 --- a/src/app/pages/layout/news.service.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; -import { delay, map } from 'rxjs/operators'; - -const TOTAL_PAGES = 7; - -export class NewsPost { - title: string; - link: string; - creator: string; - text: string; -} - -@Injectable() -export class NewsService { - - constructor(private http: HttpClient) {} - - load(page: number, pageSize: number): Observable { - const startIndex = ((page - 1) % TOTAL_PAGES) * pageSize; - - return this.http - .get('assets/data/news.json') - .pipe( - map(news => news.splice(startIndex, pageSize)), - delay(1500), - ); - } -} diff --git a/src/app/pages/layout/stepper/stepper.component.html b/src/app/pages/layout/stepper/stepper.component.html deleted file mode 100644 index 86e0116..0000000 --- a/src/app/pages/layout/stepper/stepper.component.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - First step -

Step content #1

- - - - - Second step -

Step content #2

- - - - -

Step content #3

- - - - - Fourth step -

Step content #4

- - - - - - - -
-
- - - - -
-

- Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle, - my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang. -

-
- -
- -
- - -
-

- Pellentesque we gonna chung tortor. - Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor. - Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor. -

-
- -
- - -
- - -
-

- Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot. -

-
- -
- - -
- - -
-

Wizard completed!

- -
- - - - -
- -
- - - - -

Step content #1

-

- Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, - sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis - viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel - placerat quis, lobortis in ligula. -

- - - - -

Step content #2

-

- Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam - sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui - eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. -

- - - - -

Step content #3

-

- Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, - sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis - viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel - placerat quis, lobortis in ligula. -

-

- Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam - sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui - eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. -

- - - - -

Step content #4

-

- Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, - sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis - viverra ex. -

- - - - - - -
-
diff --git a/src/app/pages/layout/stepper/stepper.component.scss b/src/app/pages/layout/stepper/stepper.component.scss deleted file mode 100644 index 067a9e1..0000000 --- a/src/app/pages/layout/stepper/stepper.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -:host ::ng-deep nb-stepper .step-content { - text-align: center; - - button { - cursor: pointer; - margin: 0.5rem; - } -} diff --git a/src/app/pages/layout/stepper/stepper.component.ts b/src/app/pages/layout/stepper/stepper.component.ts deleted file mode 100644 index aeafbc8..0000000 --- a/src/app/pages/layout/stepper/stepper.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; - -@Component({ - selector: 'ngx-stepper', - templateUrl: 'stepper.component.html', - styleUrls: ['stepper.component.scss'], -}) -export class StepperComponent implements OnInit { - - firstForm: UntypedFormGroup; - secondForm: UntypedFormGroup; - thirdForm: UntypedFormGroup; - - constructor(private fb: UntypedFormBuilder) { - } - - ngOnInit() { - this.firstForm = this.fb.group({ - firstCtrl: ['', Validators.required], - }); - - this.secondForm = this.fb.group({ - secondCtrl: ['', Validators.required], - }); - - this.thirdForm = this.fb.group({ - thirdCtrl: ['', Validators.required], - }); - } - - onFirstSubmit() { - this.firstForm.markAsDirty(); - } - - onSecondSubmit() { - this.secondForm.markAsDirty(); - } - - onThirdSubmit() { - this.thirdForm.markAsDirty(); - } -} diff --git a/src/app/pages/layout/tabs/tabs.component.html b/src/app/pages/layout/tabs/tabs.component.html deleted file mode 100644 index 9248cf5..0000000 --- a/src/app/pages/layout/tabs/tabs.component.html +++ /dev/null @@ -1,40 +0,0 @@ -
-
- - - -

In 1975, the first general purpose home automation network technology, X10, was developed. It is a communication protocol for electronic devices. It primarily uses electric power transmission wiring for signalling and control, where the signals involve brief radio frequency bursts of digital data, and remains the most widely available.[8] By 1978, X10 products included a 16 channel command console, a lamp module, and an appliance module. Soon after came the wall switch module and the first X10 timer.

- - - Content #2 - - - Content #3 - - - -
- -
- - - -
- -
- - - -

Home automation or smart home[1] (also known as domotics[2]) is building automation for the home. It involves the control and automation of lighting, heating (such as smart thermostats), ventilation, air conditioning (HVAC), and security, as well as home appliances such as washer/dryers, ovens or refrigerators/freezers. Wi-Fi is often used for remote monitoring and control. Home devices, when remotely monitored and controlled via the Internet, are an important constituent of the Internet of Things. Modern systems generally consist of switches and sensors connected to a central hub sometimes called a "gateway" from which the system is controlled with a user interface that is interacted either with a wall-mounted terminal, mobile phone software, tablet computer or a web interface, often but not always via Internet cloud services.

-

While there are many competing vendors, there are very few worldwide accepted industry standards and the smart home space is heavily fragmented.[3] Popular communications protocol for products include X10, Ethernet, RS-485, 6LoWPAN, Bluetooth LE (BLE), ZigBee and Z-Wave, or other proprietary protocols all of which are incompatible with each other.[4] Manufacturers often prevent independent implementations by withholding documentation and by litigation.[5]

- - - Content #2 - - - Content #3 - - - -
-
diff --git a/src/app/pages/layout/tabs/tabs.component.scss b/src/app/pages/layout/tabs/tabs.component.scss deleted file mode 100644 index 45f4c18..0000000 --- a/src/app/pages/layout/tabs/tabs.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -nb-tabset { - height: 100%; - display: flex; - flex-direction: column; -} - -:host ::ng-deep ngx-tab1, :host ::ng-deep ngx-tab2 { - display: block; - padding: 1rem 2rem; -} diff --git a/src/app/pages/layout/tabs/tabs.component.ts b/src/app/pages/layout/tabs/tabs.component.ts deleted file mode 100644 index e5c642d..0000000 --- a/src/app/pages/layout/tabs/tabs.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-tab1', - template: ` -

Early home automation began with labor-saving machines. Self-contained electric or gas powered - home appliances - became viable in the 1900s with the introduction of - electric power distribution - and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines, - dishwashers, and clothes dryers. -

- `, -}) -export class Tab1Component { } - -@Component({ - selector: 'ngx-tab2', - template: ` -

Tab 2 works!

- `, -}) -export class Tab2Component { } - -@Component({ - selector: 'ngx-tabs', - styleUrls: ['./tabs.component.scss'], - templateUrl: './tabs.component.html', -}) -export class TabsComponent { - - tabs: any[] = [ - { - title: 'Route tab #1', - route: '/pages/layout/tabs/tab1', - }, - { - title: 'Route tab #2', - route: '/pages/layout/tabs/tab2', - }, - ]; - -} diff --git a/src/app/pages/maps/bubble/bubble-map.component.scss b/src/app/pages/maps/bubble/bubble-map.component.scss deleted file mode 100644 index 7a090fc..0000000 --- a/src/app/pages/maps/bubble/bubble-map.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - - nb-card-body { - padding-top: 1.25rem; - } - - .echarts { - width: 100%; - height: nb-theme(card-height-large); - } -} diff --git a/src/app/pages/maps/bubble/bubble-map.component.ts b/src/app/pages/maps/bubble/bubble-map.component.ts deleted file mode 100644 index ffb28bb..0000000 --- a/src/app/pages/maps/bubble/bubble-map.component.ts +++ /dev/null @@ -1,547 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { combineLatest } from 'rxjs'; -import { takeWhile } from 'rxjs/operators'; -import { NbThemeService } from '@nebular/theme'; -import { registerMap } from 'echarts'; - -@Component({ - selector: 'ngx-bubble-map', - styleUrls: ['./bubble-map.component.scss'], - template: ` - - Bubble Maps -
- - `, -}) -export class BubbleMapComponent implements OnDestroy { - - latlong: any = {}; - mapData: any[]; - max = -Infinity; - min = Infinity; - options: any; - - bubbleTheme: any; - geoColors: any[]; - - private alive = true; - - constructor(private theme: NbThemeService, - private http: HttpClient) { - - combineLatest([ - this.http.get('assets/map/world.json'), - this.theme.getJsTheme(), - ]) - .pipe(takeWhile(() => this.alive)) - .subscribe(([map, config]: [any, any]) => { - - registerMap('world', map); - - const colors = config.variables; - this.bubbleTheme = config.variables.bubbleMap; - this.geoColors = [colors.primary, colors.info, colors.success, colors.warning, colors.danger]; - - this.latlong = { - 'AD': { 'latitude': 42.5, 'longitude': 1.5 }, - 'AE': { 'latitude': 24, 'longitude': 54 }, - 'AF': { 'latitude': 33, 'longitude': 65 }, - 'AG': { 'latitude': 17.05, 'longitude': -61.8 }, - 'AI': { 'latitude': 18.25, 'longitude': -63.1667 }, - 'AL': { 'latitude': 41, 'longitude': 20 }, - 'AM': { 'latitude': 40, 'longitude': 45 }, - 'AN': { 'latitude': 12.25, 'longitude': -68.75 }, - 'AO': { 'latitude': -12.5, 'longitude': 18.5 }, - 'AP': { 'latitude': 35, 'longitude': 105 }, - 'AQ': { 'latitude': -90, 'longitude': 0 }, - 'AR': { 'latitude': -34, 'longitude': -64 }, - 'AS': { 'latitude': -14.3333, 'longitude': -170 }, - 'AT': { 'latitude': 47.3333, 'longitude': 13.3333 }, - 'AU': { 'latitude': -27, 'longitude': 133 }, - 'AW': { 'latitude': 12.5, 'longitude': -69.9667 }, - 'AZ': { 'latitude': 40.5, 'longitude': 47.5 }, - 'BA': { 'latitude': 44, 'longitude': 18 }, - 'BB': { 'latitude': 13.1667, 'longitude': -59.5333 }, - 'BD': { 'latitude': 24, 'longitude': 90 }, - 'BE': { 'latitude': 50.8333, 'longitude': 4 }, - 'BF': { 'latitude': 13, 'longitude': -2 }, - 'BG': { 'latitude': 43, 'longitude': 25 }, - 'BH': { 'latitude': 26, 'longitude': 50.55 }, - 'BI': { 'latitude': -3.5, 'longitude': 30 }, - 'BJ': { 'latitude': 9.5, 'longitude': 2.25 }, - 'BM': { 'latitude': 32.3333, 'longitude': -64.75 }, - 'BN': { 'latitude': 4.5, 'longitude': 114.6667 }, - 'BO': { 'latitude': -17, 'longitude': -65 }, - 'BR': { 'latitude': -10, 'longitude': -55 }, - 'BS': { 'latitude': 24.25, 'longitude': -76 }, - 'BT': { 'latitude': 27.5, 'longitude': 90.5 }, - 'BV': { 'latitude': -54.4333, 'longitude': 3.4 }, - 'BW': { 'latitude': -22, 'longitude': 24 }, - 'BY': { 'latitude': 53, 'longitude': 28 }, - 'BZ': { 'latitude': 17.25, 'longitude': -88.75 }, - 'CA': { 'latitude': 54, 'longitude': -100 }, - 'CC': { 'latitude': -12.5, 'longitude': 96.8333 }, - 'CD': { 'latitude': 0, 'longitude': 25 }, - 'CF': { 'latitude': 7, 'longitude': 21 }, - 'CG': { 'latitude': -1, 'longitude': 15 }, - 'CH': { 'latitude': 47, 'longitude': 8 }, - 'CI': { 'latitude': 8, 'longitude': -5 }, - 'CK': { 'latitude': -21.2333, 'longitude': -159.7667 }, - 'CL': { 'latitude': -30, 'longitude': -71 }, - 'CM': { 'latitude': 6, 'longitude': 12 }, - 'CN': { 'latitude': 35, 'longitude': 105 }, - 'CO': { 'latitude': 4, 'longitude': -72 }, - 'CR': { 'latitude': 10, 'longitude': -84 }, - 'CU': { 'latitude': 21.5, 'longitude': -80 }, - 'CV': { 'latitude': 16, 'longitude': -24 }, - 'CX': { 'latitude': -10.5, 'longitude': 105.6667 }, - 'CY': { 'latitude': 35, 'longitude': 33 }, - 'CZ': { 'latitude': 49.75, 'longitude': 15.5 }, - 'DE': { 'latitude': 51, 'longitude': 9 }, - 'DJ': { 'latitude': 11.5, 'longitude': 43 }, - 'DK': { 'latitude': 56, 'longitude': 10 }, - 'DM': { 'latitude': 15.4167, 'longitude': -61.3333 }, - 'DO': { 'latitude': 19, 'longitude': -70.6667 }, - 'DZ': { 'latitude': 28, 'longitude': 3 }, - 'EC': { 'latitude': -2, 'longitude': -77.5 }, - 'EE': { 'latitude': 59, 'longitude': 26 }, - 'EG': { 'latitude': 27, 'longitude': 30 }, - 'EH': { 'latitude': 24.5, 'longitude': -13 }, - 'ER': { 'latitude': 15, 'longitude': 39 }, - 'ES': { 'latitude': 40, 'longitude': -4 }, - 'ET': { 'latitude': 8, 'longitude': 38 }, - 'EU': { 'latitude': 47, 'longitude': 8 }, - 'FI': { 'latitude': 62, 'longitude': 26 }, - 'FJ': { 'latitude': -18, 'longitude': 175 }, - 'FK': { 'latitude': -51.75, 'longitude': -59 }, - 'FM': { 'latitude': 6.9167, 'longitude': 158.25 }, - 'FO': { 'latitude': 62, 'longitude': -7 }, - 'FR': { 'latitude': 46, 'longitude': 2 }, - 'GA': { 'latitude': -1, 'longitude': 11.75 }, - 'GB': { 'latitude': 54, 'longitude': -2 }, - 'GD': { 'latitude': 12.1167, 'longitude': -61.6667 }, - 'GE': { 'latitude': 42, 'longitude': 43.5 }, - 'GF': { 'latitude': 4, 'longitude': -53 }, - 'GH': { 'latitude': 8, 'longitude': -2 }, - 'GI': { 'latitude': 36.1833, 'longitude': -5.3667 }, - 'GL': { 'latitude': 72, 'longitude': -40 }, - 'GM': { 'latitude': 13.4667, 'longitude': -16.5667 }, - 'GN': { 'latitude': 11, 'longitude': -10 }, - 'GP': { 'latitude': 16.25, 'longitude': -61.5833 }, - 'GQ': { 'latitude': 2, 'longitude': 10 }, - 'GR': { 'latitude': 39, 'longitude': 22 }, - 'GS': { 'latitude': -54.5, 'longitude': -37 }, - 'GT': { 'latitude': 15.5, 'longitude': -90.25 }, - 'GU': { 'latitude': 13.4667, 'longitude': 144.7833 }, - 'GW': { 'latitude': 12, 'longitude': -15 }, - 'GY': { 'latitude': 5, 'longitude': -59 }, - 'HK': { 'latitude': 22.25, 'longitude': 114.1667 }, - 'HM': { 'latitude': -53.1, 'longitude': 72.5167 }, - 'HN': { 'latitude': 15, 'longitude': -86.5 }, - 'HR': { 'latitude': 45.1667, 'longitude': 15.5 }, - 'HT': { 'latitude': 19, 'longitude': -72.4167 }, - 'HU': { 'latitude': 47, 'longitude': 20 }, - 'ID': { 'latitude': -5, 'longitude': 120 }, - 'IE': { 'latitude': 53, 'longitude': -8 }, - 'IL': { 'latitude': 31.5, 'longitude': 34.75 }, - 'IN': { 'latitude': 20, 'longitude': 77 }, - 'IO': { 'latitude': -6, 'longitude': 71.5 }, - 'IQ': { 'latitude': 33, 'longitude': 44 }, - 'IR': { 'latitude': 32, 'longitude': 53 }, - 'IS': { 'latitude': 65, 'longitude': -18 }, - 'IT': { 'latitude': 42.8333, 'longitude': 12.8333 }, - 'JM': { 'latitude': 18.25, 'longitude': -77.5 }, - 'JO': { 'latitude': 31, 'longitude': 36 }, - 'JP': { 'latitude': 36, 'longitude': 138 }, - 'KE': { 'latitude': 1, 'longitude': 38 }, - 'KG': { 'latitude': 41, 'longitude': 75 }, - 'KH': { 'latitude': 13, 'longitude': 105 }, - 'KI': { 'latitude': 1.4167, 'longitude': 173 }, - 'KM': { 'latitude': -12.1667, 'longitude': 44.25 }, - 'KN': { 'latitude': 17.3333, 'longitude': -62.75 }, - 'KP': { 'latitude': 40, 'longitude': 127 }, - 'KR': { 'latitude': 37, 'longitude': 127.5 }, - 'KW': { 'latitude': 29.3375, 'longitude': 47.6581 }, - 'KY': { 'latitude': 19.5, 'longitude': -80.5 }, - 'KZ': { 'latitude': 48, 'longitude': 68 }, - 'LA': { 'latitude': 18, 'longitude': 105 }, - 'LB': { 'latitude': 33.8333, 'longitude': 35.8333 }, - 'LC': { 'latitude': 13.8833, 'longitude': -61.1333 }, - 'LI': { 'latitude': 47.1667, 'longitude': 9.5333 }, - 'LK': { 'latitude': 7, 'longitude': 81 }, - 'LR': { 'latitude': 6.5, 'longitude': -9.5 }, - 'LS': { 'latitude': -29.5, 'longitude': 28.5 }, - 'LT': { 'latitude': 55, 'longitude': 24 }, - 'LU': { 'latitude': 49.75, 'longitude': 6 }, - 'LV': { 'latitude': 57, 'longitude': 25 }, - 'LY': { 'latitude': 25, 'longitude': 17 }, - 'MA': { 'latitude': 32, 'longitude': -5 }, - 'MC': { 'latitude': 43.7333, 'longitude': 7.4 }, - 'MD': { 'latitude': 47, 'longitude': 29 }, - 'ME': { 'latitude': 42.5, 'longitude': 19.4 }, - 'MG': { 'latitude': -20, 'longitude': 47 }, - 'MH': { 'latitude': 9, 'longitude': 168 }, - 'MK': { 'latitude': 41.8333, 'longitude': 22 }, - 'ML': { 'latitude': 17, 'longitude': -4 }, - 'MM': { 'latitude': 22, 'longitude': 98 }, - 'MN': { 'latitude': 46, 'longitude': 105 }, - 'MO': { 'latitude': 22.1667, 'longitude': 113.55 }, - 'MP': { 'latitude': 15.2, 'longitude': 145.75 }, - 'MQ': { 'latitude': 14.6667, 'longitude': -61 }, - 'MR': { 'latitude': 20, 'longitude': -12 }, - 'MS': { 'latitude': 16.75, 'longitude': -62.2 }, - 'MT': { 'latitude': 35.8333, 'longitude': 14.5833 }, - 'MU': { 'latitude': -20.2833, 'longitude': 57.55 }, - 'MV': { 'latitude': 3.25, 'longitude': 73 }, - 'MW': { 'latitude': -13.5, 'longitude': 34 }, - 'MX': { 'latitude': 23, 'longitude': -102 }, - 'MY': { 'latitude': 2.5, 'longitude': 112.5 }, - 'MZ': { 'latitude': -18.25, 'longitude': 35 }, - 'NA': { 'latitude': -22, 'longitude': 17 }, - 'NC': { 'latitude': -21.5, 'longitude': 165.5 }, - 'NE': { 'latitude': 16, 'longitude': 8 }, - 'NF': { 'latitude': -29.0333, 'longitude': 167.95 }, - 'NG': { 'latitude': 10, 'longitude': 8 }, - 'NI': { 'latitude': 13, 'longitude': -85 }, - 'NL': { 'latitude': 52.5, 'longitude': 5.75 }, - 'NO': { 'latitude': 62, 'longitude': 10 }, - 'NP': { 'latitude': 28, 'longitude': 84 }, - 'NR': { 'latitude': -0.5333, 'longitude': 166.9167 }, - 'NU': { 'latitude': -19.0333, 'longitude': -169.8667 }, - 'NZ': { 'latitude': -41, 'longitude': 174 }, - 'OM': { 'latitude': 21, 'longitude': 57 }, - 'PA': { 'latitude': 9, 'longitude': -80 }, - 'PE': { 'latitude': -10, 'longitude': -76 }, - 'PF': { 'latitude': -15, 'longitude': -140 }, - 'PG': { 'latitude': -6, 'longitude': 147 }, - 'PH': { 'latitude': 13, 'longitude': 122 }, - 'PK': { 'latitude': 30, 'longitude': 70 }, - 'PL': { 'latitude': 52, 'longitude': 20 }, - 'PM': { 'latitude': 46.8333, 'longitude': -56.3333 }, - 'PR': { 'latitude': 18.25, 'longitude': -66.5 }, - 'PS': { 'latitude': 32, 'longitude': 35.25 }, - 'PT': { 'latitude': 39.5, 'longitude': -8 }, - 'PW': { 'latitude': 7.5, 'longitude': 134.5 }, - 'PY': { 'latitude': -23, 'longitude': -58 }, - 'QA': { 'latitude': 25.5, 'longitude': 51.25 }, - 'RE': { 'latitude': -21.1, 'longitude': 55.6 }, - 'RO': { 'latitude': 46, 'longitude': 25 }, - 'RS': { 'latitude': 44, 'longitude': 21 }, - 'RU': { 'latitude': 60, 'longitude': 100 }, - 'RW': { 'latitude': -2, 'longitude': 30 }, - 'SA': { 'latitude': 25, 'longitude': 45 }, - 'SB': { 'latitude': -8, 'longitude': 159 }, - 'SC': { 'latitude': -4.5833, 'longitude': 55.6667 }, - 'SD': { 'latitude': 15, 'longitude': 30 }, - 'SE': { 'latitude': 62, 'longitude': 15 }, - 'SG': { 'latitude': 1.3667, 'longitude': 103.8 }, - 'SH': { 'latitude': -15.9333, 'longitude': -5.7 }, - 'SI': { 'latitude': 46, 'longitude': 15 }, - 'SJ': { 'latitude': 78, 'longitude': 20 }, - 'SK': { 'latitude': 48.6667, 'longitude': 19.5 }, - 'SL': { 'latitude': 8.5, 'longitude': -11.5 }, - 'SM': { 'latitude': 43.7667, 'longitude': 12.4167 }, - 'SN': { 'latitude': 14, 'longitude': -14 }, - 'SO': { 'latitude': 10, 'longitude': 49 }, - 'SR': { 'latitude': 4, 'longitude': -56 }, - 'ST': { 'latitude': 1, 'longitude': 7 }, - 'SV': { 'latitude': 13.8333, 'longitude': -88.9167 }, - 'SY': { 'latitude': 35, 'longitude': 38 }, - 'SZ': { 'latitude': -26.5, 'longitude': 31.5 }, - 'TC': { 'latitude': 21.75, 'longitude': -71.5833 }, - 'TD': { 'latitude': 15, 'longitude': 19 }, - 'TF': { 'latitude': -43, 'longitude': 67 }, - 'TG': { 'latitude': 8, 'longitude': 1.1667 }, - 'TH': { 'latitude': 15, 'longitude': 100 }, - 'TJ': { 'latitude': 39, 'longitude': 71 }, - 'TK': { 'latitude': -9, 'longitude': -172 }, - 'TM': { 'latitude': 40, 'longitude': 60 }, - 'TN': { 'latitude': 34, 'longitude': 9 }, - 'TO': { 'latitude': -20, 'longitude': -175 }, - 'TR': { 'latitude': 39, 'longitude': 35 }, - 'TT': { 'latitude': 11, 'longitude': -61 }, - 'TV': { 'latitude': -8, 'longitude': 178 }, - 'TW': { 'latitude': 23.5, 'longitude': 121 }, - 'TZ': { 'latitude': -6, 'longitude': 35 }, - 'UA': { 'latitude': 49, 'longitude': 32 }, - 'UG': { 'latitude': 1, 'longitude': 32 }, - 'UM': { 'latitude': 19.2833, 'longitude': 166.6 }, - 'US': { 'latitude': 38, 'longitude': -97 }, - 'UY': { 'latitude': -33, 'longitude': -56 }, - 'UZ': { 'latitude': 41, 'longitude': 64 }, - 'VA': { 'latitude': 41.9, 'longitude': 12.45 }, - 'VC': { 'latitude': 13.25, 'longitude': -61.2 }, - 'VE': { 'latitude': 8, 'longitude': -66 }, - 'VG': { 'latitude': 18.5, 'longitude': -64.5 }, - 'VI': { 'latitude': 18.3333, 'longitude': -64.8333 }, - 'VN': { 'latitude': 16, 'longitude': 106 }, - 'VU': { 'latitude': -16, 'longitude': 167 }, - 'WF': { 'latitude': -13.3, 'longitude': -176.2 }, - 'WS': { 'latitude': -13.5833, 'longitude': -172.3333 }, - 'YE': { 'latitude': 15, 'longitude': 48 }, - 'YT': { 'latitude': -12.8333, 'longitude': 45.1667 }, - 'ZA': { 'latitude': -29, 'longitude': 24 }, - 'ZM': { 'latitude': -15, 'longitude': 30 }, - 'ZW': { 'latitude': -20, 'longitude': 30 }, - }; - - this.mapData = [ - { 'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': this.getRandomGeoColor() }, - { 'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': this.getRandomGeoColor() }, - { 'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': this.getRandomGeoColor() }, - { 'code': 'AO', 'name': 'Angola', 'value': 19618432, 'color': this.getRandomGeoColor() }, - { 'code': 'AR', 'name': 'Argentina', 'value': 40764561, 'color': this.getRandomGeoColor() }, - { 'code': 'AM', 'name': 'Armenia', 'value': 3100236, 'color': this.getRandomGeoColor() }, - { 'code': 'AU', 'name': 'Australia', 'value': 22605732, 'color': this.getRandomGeoColor() }, - { 'code': 'AT', 'name': 'Austria', 'value': 8413429, 'color': this.getRandomGeoColor() }, - { 'code': 'AZ', 'name': 'Azerbaijan', 'value': 9306023, 'color': this.getRandomGeoColor() }, - { 'code': 'BH', 'name': 'Bahrain', 'value': 1323535, 'color': this.getRandomGeoColor() }, - { 'code': 'BD', 'name': 'Bangladesh', 'value': 150493658, 'color': this.getRandomGeoColor() }, - { 'code': 'BY', 'name': 'Belarus', 'value': 9559441, 'color': this.getRandomGeoColor() }, - { 'code': 'BE', 'name': 'Belgium', 'value': 10754056, 'color': this.getRandomGeoColor() }, - { 'code': 'BJ', 'name': 'Benin', 'value': 9099922, 'color': this.getRandomGeoColor() }, - { 'code': 'BT', 'name': 'Bhutan', 'value': 738267, 'color': this.getRandomGeoColor() }, - { 'code': 'BO', 'name': 'Bolivia', 'value': 10088108, 'color': this.getRandomGeoColor() }, - { 'code': 'BA', 'name': 'Bosnia and Herzegovina', 'value': 3752228, 'color': this.getRandomGeoColor() }, - { 'code': 'BW', 'name': 'Botswana', 'value': 2030738, 'color': this.getRandomGeoColor() }, - { 'code': 'BR', 'name': 'Brazil', 'value': 196655014, 'color': this.getRandomGeoColor() }, - { 'code': 'BN', 'name': 'Brunei', 'value': 405938, 'color': this.getRandomGeoColor() }, - { 'code': 'BG', 'name': 'Bulgaria', 'value': 7446135, 'color': this.getRandomGeoColor() }, - { 'code': 'BF', 'name': 'Burkina Faso', 'value': 16967845, 'color': this.getRandomGeoColor() }, - { 'code': 'BI', 'name': 'Burundi', 'value': 8575172, 'color': this.getRandomGeoColor() }, - { 'code': 'KH', 'name': 'Cambodia', 'value': 14305183, 'color': this.getRandomGeoColor() }, - { 'code': 'CM', 'name': 'Cameroon', 'value': 20030362, 'color': this.getRandomGeoColor() }, - { 'code': 'CA', 'name': 'Canada', 'value': 34349561, 'color': this.getRandomGeoColor() }, - { 'code': 'CV', 'name': 'Cape Verde', 'value': 500585, 'color': this.getRandomGeoColor() }, - { 'code': 'CF', 'name': 'Central African Rep.', 'value': 4486837, 'color': this.getRandomGeoColor() }, - { 'code': 'TD', 'name': 'Chad', 'value': 11525496, 'color': this.getRandomGeoColor() }, - { 'code': 'CL', 'name': 'Chile', 'value': 17269525, 'color': this.getRandomGeoColor() }, - { 'code': 'CN', 'name': 'China', 'value': 1347565324, 'color': this.getRandomGeoColor() }, - { 'code': 'CO', 'name': 'Colombia', 'value': 46927125, 'color': this.getRandomGeoColor() }, - { 'code': 'KM', 'name': 'Comoros', 'value': 753943, 'color': this.getRandomGeoColor() }, - { 'code': 'CD', 'name': 'Congo, Dem. Rep.', 'value': 67757577, 'color': this.getRandomGeoColor() }, - { 'code': 'CG', 'name': 'Congo, Rep.', 'value': 4139748, 'color': this.getRandomGeoColor() }, - { 'code': 'CR', 'name': 'Costa Rica', 'value': 4726575, 'color': this.getRandomGeoColor() }, - { 'code': 'CI', 'name': 'Cote d\'Ivoire', 'value': 20152894, 'color': this.getRandomGeoColor() }, - { 'code': 'HR', 'name': 'Croatia', 'value': 4395560, 'color': this.getRandomGeoColor() }, - { 'code': 'CU', 'name': 'Cuba', 'value': 11253665, 'color': this.getRandomGeoColor() }, - { 'code': 'CY', 'name': 'Cyprus', 'value': 1116564, 'color': this.getRandomGeoColor() }, - { 'code': 'CZ', 'name': 'Czech Rep.', 'value': 10534293, 'color': this.getRandomGeoColor() }, - { 'code': 'DK', 'name': 'Denmark', 'value': 5572594, 'color': this.getRandomGeoColor() }, - { 'code': 'DJ', 'name': 'Djibouti', 'value': 905564, 'color': this.getRandomGeoColor() }, - { 'code': 'DO', 'name': 'Dominican Rep.', 'value': 10056181, 'color': this.getRandomGeoColor() }, - { 'code': 'EC', 'name': 'Ecuador', 'value': 14666055, 'color': this.getRandomGeoColor() }, - { 'code': 'EG', 'name': 'Egypt', 'value': 82536770, 'color': this.getRandomGeoColor() }, - { 'code': 'SV', 'name': 'El Salvador', 'value': 6227491, 'color': this.getRandomGeoColor() }, - { 'code': 'GQ', 'name': 'Equatorial Guinea', 'value': 720213, 'color': this.getRandomGeoColor() }, - { 'code': 'ER', 'name': 'Eritrea', 'value': 5415280, 'color': this.getRandomGeoColor() }, - { 'code': 'EE', 'name': 'Estonia', 'value': 1340537, 'color': this.getRandomGeoColor() }, - { 'code': 'ET', 'name': 'Ethiopia', 'value': 84734262, 'color': this.getRandomGeoColor() }, - { 'code': 'FJ', 'name': 'Fiji', 'value': 868406, 'color': this.getRandomGeoColor() }, - { 'code': 'FI', 'name': 'Finland', 'value': 5384770, 'color': this.getRandomGeoColor() }, - { 'code': 'FR', 'name': 'France', 'value': 63125894, 'color': this.getRandomGeoColor() }, - { 'code': 'GA', 'name': 'Gabon', 'value': 1534262, 'color': this.getRandomGeoColor() }, - { 'code': 'GM', 'name': 'Gambia', 'value': 1776103, 'color': this.getRandomGeoColor() }, - { 'code': 'GE', 'name': 'Georgia', 'value': 4329026, 'color': this.getRandomGeoColor() }, - { 'code': 'DE', 'name': 'Germany', 'value': 82162512, 'color': this.getRandomGeoColor() }, - { 'code': 'GH', 'name': 'Ghana', 'value': 24965816, 'color': this.getRandomGeoColor() }, - { 'code': 'GR', 'name': 'Greece', 'value': 11390031, 'color': this.getRandomGeoColor() }, - { 'code': 'GT', 'name': 'Guatemala', 'value': 14757316, 'color': this.getRandomGeoColor() }, - { 'code': 'GN', 'name': 'Guinea', 'value': 10221808, 'color': this.getRandomGeoColor() }, - { 'code': 'GW', 'name': 'Guinea-Bissau', 'value': 1547061, 'color': this.getRandomGeoColor() }, - { 'code': 'GY', 'name': 'Guyana', 'value': 756040, 'color': this.getRandomGeoColor() }, - { 'code': 'HT', 'name': 'Haiti', 'value': 10123787, 'color': this.getRandomGeoColor() }, - { 'code': 'HN', 'name': 'Honduras', 'value': 7754687, 'color': this.getRandomGeoColor() }, - { 'code': 'HK', 'name': 'Hong Kong, China', 'value': 7122187, 'color': this.getRandomGeoColor() }, - { 'code': 'HU', 'name': 'Hungary', 'value': 9966116, 'color': this.getRandomGeoColor() }, - { 'code': 'IS', 'name': 'Iceland', 'value': 324366, 'color': this.getRandomGeoColor() }, - { 'code': 'IN', 'name': 'India', 'value': 1241491960, 'color': this.getRandomGeoColor() }, - { 'code': 'ID', 'name': 'Indonesia', 'value': 242325638, 'color': this.getRandomGeoColor() }, - { 'code': 'IR', 'name': 'Iran', 'value': 74798599, 'color': this.getRandomGeoColor() }, - { 'code': 'IQ', 'name': 'Iraq', 'value': 32664942, 'color': this.getRandomGeoColor() }, - { 'code': 'IE', 'name': 'Ireland', 'value': 4525802, 'color': this.getRandomGeoColor() }, - { 'code': 'IL', 'name': 'Israel', 'value': 7562194, 'color': this.getRandomGeoColor() }, - { 'code': 'IT', 'name': 'Italy', 'value': 60788694, 'color': this.getRandomGeoColor() }, - { 'code': 'JM', 'name': 'Jamaica', 'value': 2751273, 'color': this.getRandomGeoColor() }, - { 'code': 'JP', 'name': 'Japan', 'value': 126497241, 'color': this.getRandomGeoColor() }, - { 'code': 'JO', 'name': 'Jordan', 'value': 6330169, 'color': this.getRandomGeoColor() }, - { 'code': 'KZ', 'name': 'Kazakhstan', 'value': 16206750, 'color': this.getRandomGeoColor() }, - { 'code': 'KE', 'name': 'Kenya', 'value': 41609728, 'color': this.getRandomGeoColor() }, - { 'code': 'KP', 'name': 'Korea, Dem. Rep.', 'value': 24451285, 'color': this.getRandomGeoColor() }, - { 'code': 'KR', 'name': 'Korea, Rep.', 'value': 48391343, 'color': this.getRandomGeoColor() }, - { 'code': 'KW', 'name': 'Kuwait', 'value': 2818042, 'color': this.getRandomGeoColor() }, - { 'code': 'KG', 'name': 'Kyrgyzstan', 'value': 5392580, 'color': this.getRandomGeoColor() }, - { 'code': 'LA', 'name': 'Laos', 'value': 6288037, 'color': this.getRandomGeoColor() }, - { 'code': 'LV', 'name': 'Latvia', 'value': 2243142, 'color': this.getRandomGeoColor() }, - { 'code': 'LB', 'name': 'Lebanon', 'value': 4259405, 'color': this.getRandomGeoColor() }, - { 'code': 'LS', 'name': 'Lesotho', 'value': 2193843, 'color': this.getRandomGeoColor() }, - { 'code': 'LR', 'name': 'Liberia', 'value': 4128572, 'color': this.getRandomGeoColor() }, - { 'code': 'LY', 'name': 'Libya', 'value': 6422772, 'color': this.getRandomGeoColor() }, - { 'code': 'LT', 'name': 'Lithuania', 'value': 3307481, 'color': this.getRandomGeoColor() }, - { 'code': 'LU', 'name': 'Luxembourg', 'value': 515941, 'color': this.getRandomGeoColor() }, - { 'code': 'MK', 'name': 'Macedonia, FYR', 'value': 2063893, 'color': this.getRandomGeoColor() }, - { 'code': 'MG', 'name': 'Madagascar', 'value': 21315135, 'color': this.getRandomGeoColor() }, - { 'code': 'MW', 'name': 'Malawi', 'value': 15380888, 'color': this.getRandomGeoColor() }, - { 'code': 'MY', 'name': 'Malaysia', 'value': 28859154, 'color': this.getRandomGeoColor() }, - { 'code': 'ML', 'name': 'Mali', 'value': 15839538, 'color': this.getRandomGeoColor() }, - { 'code': 'MR', 'name': 'Mauritania', 'value': 3541540, 'color': this.getRandomGeoColor() }, - { 'code': 'MU', 'name': 'Mauritius', 'value': 1306593, 'color': this.getRandomGeoColor() }, - { 'code': 'MX', 'name': 'Mexico', 'value': 114793341, 'color': this.getRandomGeoColor() }, - { 'code': 'MD', 'name': 'Moldova', 'value': 3544864, 'color': this.getRandomGeoColor() }, - { 'code': 'MN', 'name': 'Mongolia', 'value': 2800114, 'color': this.getRandomGeoColor() }, - { 'code': 'ME', 'name': 'Montenegro', 'value': 632261, 'color': this.getRandomGeoColor() }, - { 'code': 'MA', 'name': 'Morocco', 'value': 32272974, 'color': this.getRandomGeoColor() }, - { 'code': 'MZ', 'name': 'Mozambique', 'value': 23929708, 'color': this.getRandomGeoColor() }, - { 'code': 'MM', 'name': 'Myanmar', 'value': 48336763, 'color': this.getRandomGeoColor() }, - { 'code': 'NA', 'name': 'Namibia', 'value': 2324004, 'color': this.getRandomGeoColor() }, - { 'code': 'NP', 'name': 'Nepal', 'value': 30485798, 'color': this.getRandomGeoColor() }, - { 'code': 'NL', 'name': 'Netherlands', 'value': 16664746, 'color': this.getRandomGeoColor() }, - { 'code': 'NZ', 'name': 'New Zealand', 'value': 4414509, 'color': this.getRandomGeoColor() }, - { 'code': 'NI', 'name': 'Nicaragua', 'value': 5869859, 'color': this.getRandomGeoColor() }, - { 'code': 'NE', 'name': 'Niger', 'value': 16068994, 'color': this.getRandomGeoColor() }, - { 'code': 'NG', 'name': 'Nigeria', 'value': 162470737, 'color': this.getRandomGeoColor() }, - { 'code': 'NO', 'name': 'Norway', 'value': 4924848, 'color': this.getRandomGeoColor() }, - { 'code': 'OM', 'name': 'Oman', 'value': 2846145, 'color': this.getRandomGeoColor() }, - { 'code': 'PK', 'name': 'Pakistan', 'value': 176745364, 'color': this.getRandomGeoColor() }, - { 'code': 'PA', 'name': 'Panama', 'value': 3571185, 'color': this.getRandomGeoColor() }, - { 'code': 'PG', 'name': 'Papua New Guinea', 'value': 7013829, 'color': this.getRandomGeoColor() }, - { 'code': 'PY', 'name': 'Paraguay', 'value': 6568290, 'color': this.getRandomGeoColor() }, - { 'code': 'PE', 'name': 'Peru', 'value': 29399817, 'color': this.getRandomGeoColor() }, - { 'code': 'PH', 'name': 'Philippines', 'value': 94852030, 'color': this.getRandomGeoColor() }, - { 'code': 'PL', 'name': 'Poland', 'value': 38298949, 'color': this.getRandomGeoColor() }, - { 'code': 'PT', 'name': 'Portugal', 'value': 10689663, 'color': this.getRandomGeoColor() }, - { 'code': 'PR', 'name': 'Puerto Rico', 'value': 3745526, 'color': this.getRandomGeoColor() }, - { 'code': 'QA', 'name': 'Qatar', 'value': 1870041, 'color': this.getRandomGeoColor() }, - { 'code': 'RO', 'name': 'Romania', 'value': 21436495, 'color': this.getRandomGeoColor() }, - { 'code': 'RU', 'name': 'Russia', 'value': 142835555, 'color': this.getRandomGeoColor() }, - { 'code': 'RW', 'name': 'Rwanda', 'value': 10942950, 'color': this.getRandomGeoColor() }, - { 'code': 'SA', 'name': 'Saudi Arabia', 'value': 28082541, 'color': this.getRandomGeoColor() }, - { 'code': 'SN', 'name': 'Senegal', 'value': 12767556, 'color': this.getRandomGeoColor() }, - { 'code': 'RS', 'name': 'Serbia', 'value': 9853969, 'color': this.getRandomGeoColor() }, - { 'code': 'SL', 'name': 'Sierra Leone', 'value': 5997486, 'color': this.getRandomGeoColor() }, - { 'code': 'SG', 'name': 'Singapore', 'value': 5187933, 'color': this.getRandomGeoColor() }, - { 'code': 'SK', 'name': 'Slovak Republic', 'value': 5471502, 'color': this.getRandomGeoColor() }, - { 'code': 'SI', 'name': 'Slovenia', 'value': 2035012, 'color': this.getRandomGeoColor() }, - { 'code': 'SB', 'name': 'Solomon Islands', 'value': 552267, 'color': this.getRandomGeoColor() }, - { 'code': 'SO', 'name': 'Somalia', 'value': 9556873, 'color': this.getRandomGeoColor() }, - { 'code': 'ZA', 'name': 'South Africa', 'value': 50459978, 'color': this.getRandomGeoColor() }, - { 'code': 'ES', 'name': 'Spain', 'value': 46454895, 'color': this.getRandomGeoColor() }, - { 'code': 'LK', 'name': 'Sri Lanka', 'value': 21045394, 'color': this.getRandomGeoColor() }, - { 'code': 'SD', 'name': 'Sudan', 'value': 34735288, 'color': this.getRandomGeoColor() }, - { 'code': 'SR', 'name': 'Suriname', 'value': 529419, 'color': this.getRandomGeoColor() }, - { 'code': 'SZ', 'name': 'Swaziland', 'value': 1203330, 'color': this.getRandomGeoColor() }, - { 'code': 'SE', 'name': 'Sweden', 'value': 9440747, 'color': this.getRandomGeoColor() }, - { 'code': 'CH', 'name': 'Switzerland', 'value': 7701690, 'color': this.getRandomGeoColor() }, - { 'code': 'SY', 'name': 'Syria', 'value': 20766037, 'color': this.getRandomGeoColor() }, - { 'code': 'TW', 'name': 'Taiwan', 'value': 23072000, 'color': this.getRandomGeoColor() }, - { 'code': 'TJ', 'name': 'Tajikistan', 'value': 6976958, 'color': this.getRandomGeoColor() }, - { 'code': 'TZ', 'name': 'Tanzania', 'value': 46218486, 'color': this.getRandomGeoColor() }, - { 'code': 'TH', 'name': 'Thailand', 'value': 69518555, 'color': this.getRandomGeoColor() }, - { 'code': 'TG', 'name': 'Togo', 'value': 6154813, 'color': this.getRandomGeoColor() }, - { 'code': 'TT', 'name': 'Trinidad and Tobago', 'value': 1346350, 'color': this.getRandomGeoColor() }, - { 'code': 'TN', 'name': 'Tunisia', 'value': 10594057, 'color': this.getRandomGeoColor() }, - { 'code': 'TR', 'name': 'Turkey', 'value': 73639596, 'color': this.getRandomGeoColor() }, - { 'code': 'TM', 'name': 'Turkmenistan', 'value': 5105301, 'color': this.getRandomGeoColor() }, - { 'code': 'UG', 'name': 'Uganda', 'value': 34509205, 'color': this.getRandomGeoColor() }, - { 'code': 'UA', 'name': 'Ukraine', 'value': 45190180, 'color': this.getRandomGeoColor() }, - { 'code': 'AE', 'name': 'United Arab Emirates', 'value': 7890924, 'color': this.getRandomGeoColor() }, - { 'code': 'GB', 'name': 'United Kingdom', 'value': 62417431, 'color': this.getRandomGeoColor() }, - { 'code': 'US', 'name': 'United States', 'value': 313085380, 'color': this.getRandomGeoColor() }, - { 'code': 'UY', 'name': 'Uruguay', 'value': 3380008, 'color': this.getRandomGeoColor() }, - { 'code': 'UZ', 'name': 'Uzbekistan', 'value': 27760267, 'color': this.getRandomGeoColor() }, - { 'code': 'VE', 'name': 'Venezuela', 'value': 29436891, 'color': this.getRandomGeoColor() }, - { 'code': 'PS', 'name': 'West Bank and Gaza', 'value': 4152369, 'color': this.getRandomGeoColor() }, - { 'code': 'VN', 'name': 'Vietnam', 'value': 88791996, 'color': this.getRandomGeoColor() }, - { 'code': 'YE', 'name': 'Yemen, Rep.', 'value': 24799880, 'color': this.getRandomGeoColor() }, - { 'code': 'ZM', 'name': 'Zambia', 'value': 13474959, 'color': this.getRandomGeoColor() }, - { 'code': 'ZW', 'name': 'Zimbabwe', 'value': 12754378, 'color': this.getRandomGeoColor() }]; - - this.mapData.forEach((itemOpt) => { - if (itemOpt.value > this.max) { - this.max = itemOpt.value; - } - if (itemOpt.value < this.min) { - this.min = itemOpt.value; - } - }); - - this.options = { - title: { - text: 'World Population (2011)', - left: 'center', - top: '16px', - textStyle: { - color: this.bubbleTheme.titleColor, - }, - }, - tooltip: { - trigger: 'item', - formatter: params => { - return `${params.name}: ${params.value[2]}`; - }, - }, - visualMap: { - show: false, - min: 0, - max: this.max, - inRange: { - symbolSize: [6, 60], - }, - }, - geo: { - name: 'World Population (2010)', - type: 'map', - map: 'world', - roam: true, - label: { - emphasis: { - show: false, - }, - }, - itemStyle: { - normal: { - areaColor: this.bubbleTheme.areaColor, - borderColor: this.bubbleTheme.areaBorderColor, - }, - emphasis: { - areaColor: this.bubbleTheme.areaHoverColor, - }, - }, - zoom: 1.1, - }, - series: [ - { - type: 'scatter', - coordinateSystem: 'geo', - data: this.mapData.map(itemOpt => { - return { - name: itemOpt.name, - value: [ - this.latlong[itemOpt.code].longitude, - this.latlong[itemOpt.code].latitude, - itemOpt.value, - ], - itemStyle: { - normal: { - color: itemOpt.color, - }, - }, - }; - }), - }, - ], - }; - }); - } - - ngOnDestroy() { - this.alive = false; - } - - private getRandomGeoColor() { - const index = Math.round(Math.random() * this.geoColors.length); - return this.geoColors[index]; - } -} diff --git a/src/app/pages/maps/gmaps/gmaps.component.html b/src/app/pages/maps/gmaps/gmaps.component.html deleted file mode 100644 index 5b285da..0000000 --- a/src/app/pages/maps/gmaps/gmaps.component.html +++ /dev/null @@ -1,8 +0,0 @@ - - Google Maps - - - - - - \ No newline at end of file diff --git a/src/app/pages/maps/gmaps/gmaps.component.scss b/src/app/pages/maps/gmaps/gmaps.component.scss deleted file mode 100644 index b6694cb..0000000 --- a/src/app/pages/maps/gmaps/gmaps.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - - nb-card-body { - padding: 0; - } - - ::ng-deep agm-map { - width: 100%; - height: nb-theme(card-height-large); - } -} diff --git a/src/app/pages/maps/gmaps/gmaps.component.ts b/src/app/pages/maps/gmaps/gmaps.component.ts deleted file mode 100644 index a186733..0000000 --- a/src/app/pages/maps/gmaps/gmaps.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-gmaps', - styleUrls: ['./gmaps.component.scss'], - templateUrl: './gmaps.component.html', -}) -export class GmapsComponent { - readonly position = { lat: 51.678418, lng: 7.809007 }; -} diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss deleted file mode 100644 index a953150..0000000 --- a/src/app/pages/maps/leaflet/leaflet.component.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - - nb-card-body { - padding: 0; - } - - ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom { - z-index: 997; - } - - ::ng-deep .leaflet-container { - width: 100%; - height: nb-theme(card-height-large); - } - - ::ng-deep .leaflet-control-zoom a { - text-decoration: none; - } -} diff --git a/src/app/pages/maps/leaflet/leaflet.component.ts b/src/app/pages/maps/leaflet/leaflet.component.ts deleted file mode 100644 index d32bb9f..0000000 --- a/src/app/pages/maps/leaflet/leaflet.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component } from '@angular/core'; - -import * as L from 'leaflet'; - -@Component({ - selector: 'ngx-leaflet', - styleUrls: ['./leaflet.component.scss'], - template: ` - - Leaflet Maps - -
- - - `, -}) -export class LeafletComponent { - - options = { - layers: [ - L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }), - ], - zoom: 5, - center: L.latLng({ lat: 38.991709, lng: -76.886109 }), - }; -} diff --git a/src/app/pages/maps/maps-routing.module.ts b/src/app/pages/maps/maps-routing.module.ts deleted file mode 100644 index feb58c7..0000000 --- a/src/app/pages/maps/maps-routing.module.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { MapsComponent } from './maps.component'; -import { GmapsComponent } from './gmaps/gmaps.component'; -import { LeafletComponent } from './leaflet/leaflet.component'; -import { BubbleMapComponent } from './bubble/bubble-map.component'; -import { SearchMapComponent } from './search-map/search-map.component'; -import { MapComponent } from './search-map/map/map.component'; -import { SearchComponent } from './search-map/search/search.component'; - -const routes: Routes = [{ - path: '', - component: MapsComponent, - children: [{ - path: 'gmaps', - component: GmapsComponent, - }, { - path: 'leaflet', - component: LeafletComponent, - }, { - path: 'bubble', - component: BubbleMapComponent, - }, { - path: 'searchmap', - component: SearchMapComponent, - }], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class MapsRoutingModule { } - -export const routedComponents = [ - MapsComponent, - GmapsComponent, - LeafletComponent, - BubbleMapComponent, - SearchMapComponent, - MapComponent, - SearchComponent, -]; diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts deleted file mode 100644 index 52f5ea7..0000000 --- a/src/app/pages/maps/maps.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-maps', - template: ` - - `, -}) -export class MapsComponent { -} diff --git a/src/app/pages/maps/maps.module.ts b/src/app/pages/maps/maps.module.ts deleted file mode 100644 index de12b68..0000000 --- a/src/app/pages/maps/maps.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from '@angular/core'; -import { GoogleMapsModule } from '@angular/google-maps'; -import { LeafletModule } from '@asymmetrik/ngx-leaflet'; -import { NgxEchartsModule } from 'ngx-echarts'; -import { NbCardModule } from '@nebular/theme'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { MapsRoutingModule, routedComponents } from './maps-routing.module'; - -@NgModule({ - imports: [ - ThemeModule, - GoogleMapsModule, - LeafletModule.forRoot(), - MapsRoutingModule, - NgxEchartsModule, - NbCardModule, - ], - exports: [], - declarations: [ - ...routedComponents, - ], -}) -export class MapsModule { } diff --git a/src/app/pages/maps/search-map/entity/position.model.ts b/src/app/pages/maps/search-map/entity/position.model.ts deleted file mode 100644 index 26f1e3c..0000000 --- a/src/app/pages/maps/search-map/entity/position.model.ts +++ /dev/null @@ -1,6 +0,0 @@ -export class PositionModel { - constructor( - public lat = 53.9, - public lng = 27.5667, - ) {} -} diff --git a/src/app/pages/maps/search-map/map/map.component.html b/src/app/pages/maps/search-map/map/map.component.html deleted file mode 100644 index 04331a2..0000000 --- a/src/app/pages/maps/search-map/map/map.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/app/pages/maps/search-map/map/map.component.scss b/src/app/pages/maps/search-map/map/map.component.scss deleted file mode 100644 index 13783ab..0000000 --- a/src/app/pages/maps/search-map/map/map.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - - nb-card-body { - padding: 0; - } - - ::ng-deep agm-map { - width: 100%; - height: nb-theme(card-height-large); - } -} diff --git a/src/app/pages/maps/search-map/map/map.component.ts b/src/app/pages/maps/search-map/map/map.component.ts deleted file mode 100644 index 657c6fb..0000000 --- a/src/app/pages/maps/search-map/map/map.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { PositionModel } from '../entity/position.model'; - -@Component({ - selector: 'ngx-map', - templateUrl: './map.component.html', - styleUrls: ['./map.component.scss'], -}) -export class MapComponent implements OnInit { - position: PositionModel = null; - zoom: number = 1; - - @Input() - public set searchedPosition(position: PositionModel) { - if (position) { - this.position = position; - this.zoom = 12; - } - } - - ngOnInit() { - // set up current location - if ('geolocation' in navigator) { - navigator.geolocation.getCurrentPosition((position) => { - this.searchedPosition = new PositionModel( - position.coords.latitude, - position.coords.longitude, - ); - }); - } - } -} diff --git a/src/app/pages/maps/search-map/search-map.component.html b/src/app/pages/maps/search-map/search-map.component.html deleted file mode 100644 index 42a7bdf..0000000 --- a/src/app/pages/maps/search-map/search-map.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - Google Maps with search - - - - - diff --git a/src/app/pages/maps/search-map/search-map.component.ts b/src/app/pages/maps/search-map/search-map.component.ts deleted file mode 100644 index 43f66f8..0000000 --- a/src/app/pages/maps/search-map/search-map.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; -import { PositionModel } from './entity/position.model'; - -@Component({ - selector: 'ngx-search-map', - templateUrl: './search-map.component.html', -}) -export class SearchMapComponent { - searchedPosition: PositionModel = new PositionModel(); - - setPosition(position: PositionModel) { - this.searchedPosition = position; - } -} diff --git a/src/app/pages/maps/search-map/search/search.component.html b/src/app/pages/maps/search-map/search/search.component.html deleted file mode 100644 index 97fa475..0000000 --- a/src/app/pages/maps/search-map/search/search.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- -
diff --git a/src/app/pages/maps/search-map/search/search.component.ts b/src/app/pages/maps/search-map/search/search.component.ts deleted file mode 100644 index 5cb325c..0000000 --- a/src/app/pages/maps/search-map/search/search.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core'; -import { PositionModel } from '../entity/position.model'; - -@Component({ - selector: 'ngx-search', - templateUrl: './search.component.html', -}) -export class SearchComponent implements OnInit { - - @Output() - positionChanged: EventEmitter = new EventEmitter(); - - @ViewChild('search', { static: true }) - searchElementRef: ElementRef; - - constructor(private ngZone: NgZone) {} - - ngOnInit() { - const autocomplete = new google.maps.places.Autocomplete( - this.searchElementRef.nativeElement, { types: ['address'] }, - ); - - autocomplete.addListener('place_changed', () => { - this.ngZone.run(() => { - // get the place result - const place: google.maps.places.PlaceResult = autocomplete.getPlace(); - - // verify result - if (place.geometry === undefined || place.geometry === null) { - return; - } - - this.positionChanged.emit(new PositionModel( - place.geometry.location.lat(), - place.geometry.location.lng(), - )); - }); - }); - } -} diff --git a/src/app/pages/miscellaneous/miscellaneous-routing.module.ts b/src/app/pages/miscellaneous/miscellaneous-routing.module.ts deleted file mode 100644 index 7fdd415..0000000 --- a/src/app/pages/miscellaneous/miscellaneous-routing.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { MiscellaneousComponent } from './miscellaneous.component'; -import { NotFoundComponent } from './not-found/not-found.component'; - -const routes: Routes = [ - { - path: '', - component: MiscellaneousComponent, - children: [ - { - path: '404', - component: NotFoundComponent, - }, - ], - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class MiscellaneousRoutingModule { -} diff --git a/src/app/pages/miscellaneous/miscellaneous.component.ts b/src/app/pages/miscellaneous/miscellaneous.component.ts deleted file mode 100644 index d802435..0000000 --- a/src/app/pages/miscellaneous/miscellaneous.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-miscellaneous', - template: ` - - `, -}) -export class MiscellaneousComponent { -} diff --git a/src/app/pages/miscellaneous/miscellaneous.module.ts b/src/app/pages/miscellaneous/miscellaneous.module.ts deleted file mode 100644 index baae2a1..0000000 --- a/src/app/pages/miscellaneous/miscellaneous.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NgModule } from '@angular/core'; -import { NbButtonModule, NbCardModule } from '@nebular/theme'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { MiscellaneousRoutingModule } from './miscellaneous-routing.module'; -import { MiscellaneousComponent } from './miscellaneous.component'; -import { NotFoundComponent } from './not-found/not-found.component'; - -@NgModule({ - imports: [ - ThemeModule, - NbCardModule, - NbButtonModule, - MiscellaneousRoutingModule, - ], - declarations: [ - MiscellaneousComponent, - NotFoundComponent, - ], -}) -export class MiscellaneousModule { } diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.html b/src/app/pages/miscellaneous/not-found/not-found.component.html deleted file mode 100644 index 9eb129f..0000000 --- a/src/app/pages/miscellaneous/not-found/not-found.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
- - -
-

404 Page Not Found

- The page you were looking for doesn't exist - -
- - -
-
diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.scss b/src/app/pages/miscellaneous/not-found/not-found.component.scss deleted file mode 100644 index 6cb149c..0000000 --- a/src/app/pages/miscellaneous/not-found/not-found.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -.flex-centered { - margin: auto; -} -nb-card-body { - display: flex; -} - -.title { - text-align: center; -} - -.sub-title { - text-align: center; - display: block; - margin-bottom: 3rem; -} - -.home-button { - margin-bottom: 2rem; -} diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.ts b/src/app/pages/miscellaneous/not-found/not-found.component.ts deleted file mode 100644 index cdd0ced..0000000 --- a/src/app/pages/miscellaneous/not-found/not-found.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NbMenuService } from '@nebular/theme'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-not-found', - styleUrls: ['./not-found.component.scss'], - templateUrl: './not-found.component.html', -}) -export class NotFoundComponent { - - constructor(private menuService: NbMenuService) { - } - - goToHome() { - this.menuService.navigateHome(); - } -} diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html deleted file mode 100644 index 267efd3..0000000 --- a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - Enter your name - - - - - - - - diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss deleted file mode 100644 index 4839f6d..0000000 --- a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - input { - width: 100%; - } - - .cancel { - margin-right: 1rem; - } -} diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts deleted file mode 100644 index 5450b9d..0000000 --- a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from '@angular/core'; -import { NbDialogRef } from '@nebular/theme'; - -@Component({ - selector: 'ngx-dialog-name-prompt', - templateUrl: 'dialog-name-prompt.component.html', - styleUrls: ['dialog-name-prompt.component.scss'], -}) -export class DialogNamePromptComponent { - - constructor(protected ref: NbDialogRef) {} - - cancel() { - this.ref.close(); - } - - submit(name) { - this.ref.close(name); - } -} diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.html b/src/app/pages/modal-overlays/dialog/dialog.component.html deleted file mode 100644 index 655d03a..0000000 --- a/src/app/pages/modal-overlays/dialog/dialog.component.html +++ /dev/null @@ -1,70 +0,0 @@ -
-
- - Open Dialog - - - - - - -
- -
- - Open Without Backdrop - - - - - - -
- -
- - Open Without Esc Close - - - - - - -
- -
- - Open Without Backdrop Click - - - - - - -
- -
- - Return Result From Dialog - - -
-

Names:

-
    -
  • {{ name }}
    • -
- - -
-
- - - - Template Dialog - {{ data }} - - - - - - diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.scss b/src/app/pages/modal-overlays/dialog/dialog.component.scss deleted file mode 100644 index 3941f02..0000000 --- a/src/app/pages/modal-overlays/dialog/dialog.component.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card-body { - display: block; - - button { - width: 100%; - margin-bottom: 2rem; - display: block; - - &:last-child { - margin-bottom: 0; - } - } - } - - .result-from-dialog { - flex-direction: column; - } - - .form-input-card { - nb-card-body { - display: block; - } - } - - @include media-breakpoint-down(lg) { - button { - padding: 0.8rem; - } - } - - @include media-breakpoint-down(is) { - button { - padding: 0.75rem; - } - } -} diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.ts b/src/app/pages/modal-overlays/dialog/dialog.component.ts deleted file mode 100644 index 21044a0..0000000 --- a/src/app/pages/modal-overlays/dialog/dialog.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { Component, TemplateRef } from '@angular/core'; -import { NbDialogService } from '@nebular/theme'; -import { ShowcaseDialogComponent } from './showcase-dialog/showcase-dialog.component'; -import { DialogNamePromptComponent } from './dialog-name-prompt/dialog-name-prompt.component'; - -@Component({ - selector: 'ngx-dialog', - templateUrl: 'dialog.component.html', - styleUrls: ['dialog.component.scss'], -}) -export class DialogComponent { - - names: string[] = []; - - constructor(private dialogService: NbDialogService) {} - - open() { - this.dialogService.open(ShowcaseDialogComponent, { - context: { - title: 'This is a title passed to the dialog component', - }, - }); - } - - open2(dialog: TemplateRef) { - this.dialogService.open( - dialog, - { context: 'this is some additional data passed to dialog' }); - } - - open3() { - this.dialogService.open(DialogNamePromptComponent) - .onClose.subscribe(name => name && this.names.push(name)); - } - - openWithoutBackdrop(dialog: TemplateRef) { - this.dialogService.open( - dialog, - { - context: 'this is some additional data passed to dialog', - hasBackdrop: false, - }); - } - - openWithoutBackdropClick(dialog: TemplateRef) { - this.dialogService.open( - dialog, - { - context: 'this is some additional data passed to dialog', - closeOnBackdropClick: false, - }); - } - - openWithoutEscClose(dialog: TemplateRef) { - this.dialogService.open( - dialog, - { - context: 'this is some additional data passed to dialog', - closeOnEsc: false, - }); - } -} diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html deleted file mode 100644 index 4cd3db6..0000000 --- a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - {{ title }} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt. - Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum. - Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci. - Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec - iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus, - in aliquet massa aliquet et. - - - - - diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss deleted file mode 100644 index e654604..0000000 --- a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card { - max-width: 600px; - max-height: 500px; - } -} diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts deleted file mode 100644 index 1f40db2..0000000 --- a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { NbDialogRef } from '@nebular/theme'; - -@Component({ - selector: 'ngx-showcase-dialog', - templateUrl: 'showcase-dialog.component.html', - styleUrls: ['showcase-dialog.component.scss'], -}) -export class ShowcaseDialogComponent { - - @Input() title: string; - - constructor(protected ref: NbDialogRef) {} - - dismiss() { - this.ref.close(); - } -} diff --git a/src/app/pages/modal-overlays/modal-overlays-routing.module.ts b/src/app/pages/modal-overlays/modal-overlays-routing.module.ts deleted file mode 100644 index 9e4eba3..0000000 --- a/src/app/pages/modal-overlays/modal-overlays-routing.module.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { ModalOverlaysComponent } from './modal-overlays.component'; -import { DialogComponent } from './dialog/dialog.component'; -import { WindowComponent } from './window/window.component'; -import { PopoversComponent } from './popovers/popovers.component'; -import { ToastrComponent } from './toastr/toastr.component'; -import { TooltipComponent } from './tooltip/tooltip.component'; - -const routes: Routes = [{ - path: '', - component: ModalOverlaysComponent, - children: [ - { - path: 'dialog', - component: DialogComponent, - }, - { - path: 'window', - component: WindowComponent, - }, - { - path: 'popover', - component: PopoversComponent, - }, - { - path: 'tooltip', - component: TooltipComponent, - }, - { - path: 'toastr', - component: ToastrComponent, - }, - ], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class ModalOverlaysRoutingModule { -} - - diff --git a/src/app/pages/modal-overlays/modal-overlays.component.ts b/src/app/pages/modal-overlays/modal-overlays.component.ts deleted file mode 100644 index 7511f40..0000000 --- a/src/app/pages/modal-overlays/modal-overlays.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-modal-overlays', - template: ` - - `, -}) - -export class ModalOverlaysComponent { -} diff --git a/src/app/pages/modal-overlays/modal-overlays.module.ts b/src/app/pages/modal-overlays/modal-overlays.module.ts deleted file mode 100644 index 465c7a2..0000000 --- a/src/app/pages/modal-overlays/modal-overlays.module.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { - NbButtonModule, - NbCardModule, - NbCheckboxModule, - NbDialogModule, - NbInputModule, - NbPopoverModule, - NbSelectModule, - NbTabsetModule, - NbTooltipModule, - NbWindowModule, -} from '@nebular/theme'; - -// modules -import { ThemeModule } from '../../@theme/theme.module'; -import { ModalOverlaysRoutingModule } from './modal-overlays-routing.module'; - -// components -import { ModalOverlaysComponent } from './modal-overlays.component'; -import { DialogComponent } from './dialog/dialog.component'; -import { ShowcaseDialogComponent } from './dialog/showcase-dialog/showcase-dialog.component'; -import { DialogNamePromptComponent } from './dialog/dialog-name-prompt/dialog-name-prompt.component'; -import { WindowComponent } from './window/window.component'; -import { WindowFormComponent } from './window/window-form/window-form.component'; -import { ToastrComponent } from './toastr/toastr.component'; -import { PopoversComponent } from './popovers/popovers.component'; -import { - NgxPopoverCardComponent, NgxPopoverFormComponent, - NgxPopoverTabsComponent, -} from './popovers/popover-examples.component'; -import { TooltipComponent } from './tooltip/tooltip.component'; - - -const COMPONENTS = [ - ModalOverlaysComponent, - ToastrComponent, - DialogComponent, - ShowcaseDialogComponent, - DialogNamePromptComponent, - WindowComponent, - WindowFormComponent, - PopoversComponent, - NgxPopoverCardComponent, - NgxPopoverFormComponent, - NgxPopoverTabsComponent, - TooltipComponent, -]; - -const ENTRY_COMPONENTS = [ - ShowcaseDialogComponent, - DialogNamePromptComponent, - WindowFormComponent, - NgxPopoverCardComponent, - NgxPopoverFormComponent, - NgxPopoverTabsComponent, -]; - -const MODULES = [ - FormsModule, - ThemeModule, - ModalOverlaysRoutingModule, - NbDialogModule.forChild(), - NbWindowModule.forChild(), - NbCardModule, - NbCheckboxModule, - NbTabsetModule, - NbPopoverModule, - NbButtonModule, - NbInputModule, - NbSelectModule, - NbTooltipModule, -]; - -const SERVICES = [ -]; - -@NgModule({ - imports: [ - ...MODULES, - ], - declarations: [ - ...COMPONENTS, - ], - providers: [ - ...SERVICES, - ] -}) -export class ModalOverlaysModule { -} diff --git a/src/app/pages/modal-overlays/popovers/popover-examples.component.ts b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts deleted file mode 100644 index c542b77..0000000 --- a/src/app/pages/modal-overlays/popovers/popover-examples.component.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-popover-tabs', - template: ` - - -
- Such a wonderful day! -
- - -
- Indeed! -
- - - `, -}) -export class NgxPopoverTabsComponent { -} - -@Component({ - selector: 'ngx-popover-form', - template: ` -
-
-
- -
-
- -
-
- -
- -
-
- `, -}) -export class NgxPopoverFormComponent { -} - -@Component({ - selector: 'ngx-popover-card', - template: ` - - - Hello! - - - Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. - - - `, - styles: [` - nb-card { - margin: 0; - max-width: 20rem; - } - `], -}) -export class NgxPopoverCardComponent { -} diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.html b/src/app/pages/modal-overlays/popovers/popovers.component.html deleted file mode 100644 index 0f9f38d..0000000 --- a/src/app/pages/modal-overlays/popovers/popovers.component.html +++ /dev/null @@ -1,157 +0,0 @@ -
-
- - Popover Position - -

When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.

- - - - - - -
- -
- - Simple Popovers - -

In a simples form popover can take a string of text to render.

- - - - - -
-
- -
-
- - - - -
- Such a wonderful day! -
- - -
- Indeed! -
- - - - - -
-
-
- -
-
- -
-
- -
- -
-
- - - - - - Hello! - - - Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. - Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. - - - - - - Template Popovers - -

You can pass a refference to `ng-template` to be rendered.

- - - - - -
- -
- - Component Popovers - -

Same way popover can render any angular compnoent.

- - - - - -
-
- -
-
- - Event Debouncing - -

Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.

- - - - - - - - - - - - - - - - - - - -
-
diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.scss b/src/app/pages/modal-overlays/popovers/popovers.component.scss deleted file mode 100644 index cfc7a60..0000000 --- a/src/app/pages/modal-overlays/popovers/popovers.component.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import '~@nebular/theme/styles/core/mixins'; - -nb-card-body { - margin: 0 -0.5rem; - - button, - p { - margin: 0.5rem 0.5rem 0; - } -} - -.popover-card { - margin: 0; - max-width: 20rem; -} diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.ts b/src/app/pages/modal-overlays/popovers/popovers.component.ts deleted file mode 100644 index 1200c80..0000000 --- a/src/app/pages/modal-overlays/popovers/popovers.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; -import { - NgxPopoverCardComponent, NgxPopoverFormComponent, - NgxPopoverTabsComponent, -} from './popover-examples.component'; - -@Component({ - selector: 'ngx-popovers', - styleUrls: ['./popovers.component.scss'], - templateUrl: './popovers.component.html', -}) -export class PopoversComponent { - tabsComponent = NgxPopoverTabsComponent; - cardComponent = NgxPopoverCardComponent; - formComponent = NgxPopoverFormComponent; -} diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.html b/src/app/pages/modal-overlays/toastr/toastr.component.html deleted file mode 100644 index 6e1c4c6..0000000 --- a/src/app/pages/modal-overlays/toastr/toastr.component.html +++ /dev/null @@ -1,59 +0,0 @@ - - - Toaster configuration - - - -
-
-
- - - {{ p }} - -
- -
- - -
- -
-
- - -
-
- -
- - -
-
- -
-
- - - {{ t }} - -
- -
- Hide on click -
-
- Prevent arising of duplicate toast -
-
- Show toast with icon -
-
-
- - - - - - - diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.scss b/src/app/pages/modal-overlays/toastr/toastr.component.scss deleted file mode 100644 index 1cfeca4..0000000 --- a/src/app/pages/modal-overlays/toastr/toastr.component.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../../@theme/styles/themes'; -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@include nb-install-component() { - .position-select { - min-width: 13rem; - } - - .label { - display: block; - } - - nb-card-footer button:first-child { - @include nb-ltr(margin-right, 1rem); - @include nb-rtl(margin-left, 1rem); - } -} diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.ts b/src/app/pages/modal-overlays/toastr/toastr.component.ts deleted file mode 100644 index 75806ae..0000000 --- a/src/app/pages/modal-overlays/toastr/toastr.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component } from '@angular/core'; -import { - NbComponentStatus, - NbGlobalLogicalPosition, - NbGlobalPhysicalPosition, - NbGlobalPosition, - NbToastrService, - NbToastrConfig, -} from '@nebular/theme'; - -@Component({ - selector: 'ngx-toastr', - styleUrls: ['./toastr.component.scss'], - templateUrl: './toastr.component.html', -}) -export class ToastrComponent { - constructor(private toastrService: NbToastrService) {} - - config: NbToastrConfig; - - index = 1; - destroyByClick = true; - duration = 2000; - hasIcon = true; - position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT; - preventDuplicates = false; - status: NbComponentStatus = 'primary'; - - title = 'HI there!'; - content = `I'm cool toaster!`; - - types: NbComponentStatus[] = [ - 'primary', - 'success', - 'info', - 'warning', - 'danger', - ]; - positions: string[] = [ - NbGlobalPhysicalPosition.TOP_RIGHT, - NbGlobalPhysicalPosition.TOP_LEFT, - NbGlobalPhysicalPosition.BOTTOM_LEFT, - NbGlobalPhysicalPosition.BOTTOM_RIGHT, - NbGlobalLogicalPosition.TOP_END, - NbGlobalLogicalPosition.TOP_START, - NbGlobalLogicalPosition.BOTTOM_END, - NbGlobalLogicalPosition.BOTTOM_START, - ]; - - quotes = [ - { title: null, body: 'We rock at Angular' }, - { title: null, body: 'Titles are not always needed' }, - { title: null, body: 'Toastr rock!' }, - ]; - - makeToast() { - this.showToast(this.status, this.title, this.content); - } - - openRandomToast () { - const typeIndex = Math.floor(Math.random() * this.types.length); - const quoteIndex = Math.floor(Math.random() * this.quotes.length); - const type = this.types[typeIndex]; - const quote = this.quotes[quoteIndex]; - - this.showToast(type, quote.title, quote.body); - } - - private showToast(type: NbComponentStatus, title: string, body: string) { - const config = { - status: type, - destroyByClick: this.destroyByClick, - duration: this.duration, - hasIcon: this.hasIcon, - position: this.position, - preventDuplicates: this.preventDuplicates, - }; - const titleContent = title ? `. ${title}` : ''; - - this.index += 1; - this.toastrService.show( - body, - `Toast ${this.index}${titleContent}`, - config); - } -} diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.html b/src/app/pages/modal-overlays/tooltip/tooltip.component.html deleted file mode 100644 index edddfcd..0000000 --- a/src/app/pages/modal-overlays/tooltip/tooltip.component.html +++ /dev/null @@ -1,37 +0,0 @@ -
-
- - Tooltip With Icon - - - - - -
- -
- - Tooltip Placements - - - - - - - -
- -
- - Colored Tooltips - - - - - - - - - -
-
diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.scss b/src/app/pages/modal-overlays/tooltip/tooltip.component.scss deleted file mode 100644 index e4c650d..0000000 --- a/src/app/pages/modal-overlays/tooltip/tooltip.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card-body { - margin: -0.5rem; - } - - button { - margin: 0.5rem; - } -} diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.ts b/src/app/pages/modal-overlays/tooltip/tooltip.component.ts deleted file mode 100644 index e1ed822..0000000 --- a/src/app/pages/modal-overlays/tooltip/tooltip.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-tooltip', - templateUrl: 'tooltip.component.html', - styleUrls: ['tooltip.component.scss'], -}) -export class TooltipComponent { - -} diff --git a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss deleted file mode 100644 index 9ef1b9a..0000000 --- a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../../@theme/styles/themes'; - -@include nb-install-component() { - ::ng-deep .form { - display: flex; - flex-direction: column; - - .text-label { - margin-top: 1.5rem; - } - } -} diff --git a/src/app/pages/modal-overlays/window/window-form/window-form.component.ts b/src/app/pages/modal-overlays/window/window-form/window-form.component.ts deleted file mode 100644 index a2b4cdd..0000000 --- a/src/app/pages/modal-overlays/window/window-form/window-form.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component } from '@angular/core'; -import { NbWindowRef } from '@nebular/theme'; - -@Component({ - template: ` -
- - - - - -
- `, - styleUrls: ['window-form.component.scss'], -}) -export class WindowFormComponent { - constructor(public windowRef: NbWindowRef) {} - - close() { - this.windowRef.close(); - } -} diff --git a/src/app/pages/modal-overlays/window/window.component.html b/src/app/pages/modal-overlays/window/window.component.html deleted file mode 100644 index db824d2..0000000 --- a/src/app/pages/modal-overlays/window/window.component.html +++ /dev/null @@ -1,31 +0,0 @@ -
-
- - Window Form - - - - - - -
- -
- - Window Without Backdrop - - - - - - -
-
- - -

Here is the text provided via config: "{{ data.text }}"

- - - - Disabled close on escape click. - diff --git a/src/app/pages/modal-overlays/window/window.component.scss b/src/app/pages/modal-overlays/window/window.component.scss deleted file mode 100644 index 1d41214..0000000 --- a/src/app/pages/modal-overlays/window/window.component.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import '~bootstrap/scss/mixins/breakpoints'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - button + button { - margin-left: 2rem; - } - - @include media-breakpoint-down(xxl) { - nb-card-body { - display: flex; - } - - button { - flex: 1; - padding: 0.8rem; - } - } - - @include media-breakpoint-down(is) { - nb-card-body { - display: block; - } - - button { - + button { - margin-left: 0; - } - - width: 100%; - display: block; - margin-bottom: 2rem; - padding: 0.75rem; - } - } -} diff --git a/src/app/pages/modal-overlays/window/window.component.ts b/src/app/pages/modal-overlays/window/window.component.ts deleted file mode 100644 index a1748dd..0000000 --- a/src/app/pages/modal-overlays/window/window.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, TemplateRef, ViewChild } from '@angular/core'; -import { NbWindowService } from '@nebular/theme'; -import { WindowFormComponent } from './window-form/window-form.component'; - -@Component({ - selector: 'ngx-window', - templateUrl: 'window.component.html', - styleUrls: ['window.component.scss'], -}) -export class WindowComponent { - - @ViewChild('contentTemplate', { static: true }) contentTemplate: TemplateRef; - @ViewChild('disabledEsc', { read: TemplateRef, static: true }) disabledEscTemplate: TemplateRef; - - constructor(private windowService: NbWindowService) {} - - openWindow(contentTemplate) { - this.windowService.open( - contentTemplate, - { - title: 'Window content from template', - context: { - text: 'some text to pass into template', - }, - }, - ); - } - - openWindowForm() { - this.windowService.open(WindowFormComponent, { title: `Window` }); - } - - openWindowWithoutBackdrop() { - this.windowService.open( - this.disabledEscTemplate, - { - title: 'Window without backdrop', - hasBackdrop: false, - closeOnEsc: false, - }, - ); - } -} diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts deleted file mode 100644 index a095e7f..0000000 --- a/src/app/pages/pages-menu.ts +++ /dev/null @@ -1,252 +0,0 @@ -import { NbMenuItem } from '@nebular/theme'; - -export const MENU_ITEMS: NbMenuItem[] = [ - { - title: 'Brothers in arms', - icon: 'people-outline', - link: '/pages/PropheticPrayerMeeting', - home: true, - }, - { - title: 'Brothers in arms', - icon: 'people-outline', - link: '/ire', - }, - // { - // title: 'IoT Dashboard', - // icon: 'home-outline', - // link: '/pages/iot-dashboard', - // }, - // { - // title: 'FEATURES', - // group: true, - // }, - // { - // title: 'Layout', - // icon: 'layout-outline', - // children: [ - // { - // title: 'Stepper', - // link: '/pages/layout/stepper', - // }, - // { - // title: 'List', - // link: '/pages/layout/list', - // }, - // { - // title: 'Infinite List', - // link: '/pages/layout/infinite-list', - // }, - // { - // title: 'Accordion', - // link: '/pages/layout/accordion', - // }, - // { - // title: 'Tabs', - // pathMatch: 'prefix', - // link: '/pages/layout/tabs', - // }, - // ], - // }, - // { - // title: 'Forms', - // icon: 'edit-2-outline', - // children: [ - // { - // title: 'Form Inputs', - // link: '/pages/forms/inputs', - // }, - // { - // title: 'Form Layouts', - // link: '/pages/forms/layouts', - // }, - // { - // title: 'Buttons', - // link: '/pages/forms/buttons', - // }, - // { - // title: 'Datepicker', - // link: '/pages/forms/datepicker', - // }, - // ], - // }, - // { - // title: 'UI Features', - // icon: 'keypad-outline', - // link: '/pages/ui-features', - // children: [ - // { - // title: 'Grid', - // link: '/pages/ui-features/grid', - // }, - // { - // title: 'Icons', - // link: '/pages/ui-features/icons', - // }, - // { - // title: 'Typography', - // link: '/pages/ui-features/typography', - // }, - // { - // title: 'Animated Searches', - // link: '/pages/ui-features/search-fields', - // }, - // ], - // }, - // { - // title: 'Modal & Overlays', - // icon: 'browser-outline', - // children: [ - // { - // title: 'Dialog', - // link: '/pages/modal-overlays/dialog', - // }, - // { - // title: 'Window', - // link: '/pages/modal-overlays/window', - // }, - // { - // title: 'Popover', - // link: '/pages/modal-overlays/popover', - // }, - // { - // title: 'Toastr', - // link: '/pages/modal-overlays/toastr', - // }, - // { - // title: 'Tooltip', - // link: '/pages/modal-overlays/tooltip', - // }, - // ], - // }, - // { - // title: 'Extra Components', - // icon: 'message-circle-outline', - // children: [ - // { - // title: 'Calendar', - // link: '/pages/extra-components/calendar', - // }, - // { - // title: 'Progress Bar', - // link: '/pages/extra-components/progress-bar', - // }, - // { - // title: 'Spinner', - // link: '/pages/extra-components/spinner', - // }, - // { - // title: 'Alert', - // link: '/pages/extra-components/alert', - // }, - // { - // title: 'Calendar Kit', - // link: '/pages/extra-components/calendar-kit', - // }, - // { - // title: 'Chat', - // link: '/pages/extra-components/chat', - // }, - // ], - // }, - // { - // title: 'Maps', - // icon: 'map-outline', - // children: [ - // { - // title: 'Google Maps', - // link: '/pages/maps/gmaps', - // }, - // { - // title: 'Leaflet Maps', - // link: '/pages/maps/leaflet', - // }, - // { - // title: 'Bubble Maps', - // link: '/pages/maps/bubble', - // }, - // { - // title: 'Search Maps', - // link: '/pages/maps/searchmap', - // }, - // ], - // }, - // { - // title: 'Charts', - // icon: 'pie-chart-outline', - // children: [ - // { - // title: 'Echarts', - // link: '/pages/charts/echarts', - // }, - // { - // title: 'Charts.js', - // link: '/pages/charts/chartjs', - // }, - // { - // title: 'D3', - // link: '/pages/charts/d3', - // }, - // ], - // }, - // { - // title: 'Editors', - // icon: 'text-outline', - // children: [ - // { - // title: 'TinyMCE', - // link: '/pages/editors/tinymce', - // }, - // { - // title: 'CKEditor', - // link: '/pages/editors/ckeditor', - // }, - // ], - // }, - // { - // title: 'Tables & Data', - // icon: 'grid-outline', - // children: [ - // { - // title: 'Smart Table', - // link: '/pages/tables/smart-table', - // }, - // { - // title: 'Tree Grid', - // link: '/pages/tables/tree-grid', - // }, - // ], - // }, - // { - // title: 'Miscellaneous', - // icon: 'shuffle-2-outline', - // children: [ - // { - // title: '404', - // link: '/pages/miscellaneous/404', - // }, - // ], - // }, - // { - // title: 'Auth', - // icon: 'lock-outline', - // children: [ - // { - // title: 'Login', - // link: '/auth/login', - // }, - // { - // title: 'Register', - // link: '/auth/register', - // }, - // { - // title: 'Request Password', - // link: '/auth/request-password', - // }, - // { - // title: 'Reset Password', - // link: '/auth/reset-password', - // }, - // ], - // }, -]; diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts deleted file mode 100644 index 0edb810..0000000 --- a/src/app/pages/pages-routing.module.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { RouterModule, Routes } from '@angular/router'; -import { NgModule } from '@angular/core'; - -import { PagesComponent } from './pages.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { ECommerceComponent } from './e-commerce/e-commerce.component'; -import { NotFoundComponent } from './miscellaneous/not-found/not-found.component'; - -const routes: Routes = [{ - path: '', - component: PagesComponent, - children: [ - { - path: 'dashboard', - component: ECommerceComponent, - }, - { - path: 'iot-dashboard', - component: DashboardComponent, - }, - { - path: 'layout', - loadChildren: () => import('./layout/layout.module') - .then(m => m.LayoutModule), - }, - { - path: 'forms', - loadChildren: () => import('./forms/forms.module') - .then(m => m.FormsModule), - }, - { - path: 'ui-features', - loadChildren: () => import('./ui-features/ui-features.module') - .then(m => m.UiFeaturesModule), - }, - { - path: 'modal-overlays', - loadChildren: () => import('./modal-overlays/modal-overlays.module') - .then(m => m.ModalOverlaysModule), - }, - { - path: 'extra-components', - loadChildren: () => import('./extra-components/extra-components.module') - .then(m => m.ExtraComponentsModule), - }, - { - path: 'maps', - loadChildren: () => import('./maps/maps.module') - .then(m => m.MapsModule), - }, - { - path: 'charts', - loadChildren: () => import('./charts/charts.module') - .then(m => m.ChartsModule), - }, - { - path: 'editors', - loadChildren: () => import('./editors/editors.module') - .then(m => m.EditorsModule), - }, - { - path: 'miscellaneous', - loadChildren: () => import('./miscellaneous/miscellaneous.module') - .then(m => m.MiscellaneousModule), - }, - { - path: '', - redirectTo: 'PropheticPrayerMeeting', - pathMatch: 'full', - }, - { - path: '**', - component: NotFoundComponent, - }, - ], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class PagesRoutingModule { -} diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss deleted file mode 100644 index 6919809..0000000 --- a/src/app/pages/pages.component.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../@theme/styles/themes'; - -@include nb-install-component() { - ::ng-deep router-outlet + * { - display: block; - animation: fade 1s; - - @keyframes fade { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - } -} diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts deleted file mode 100644 index c90c3ef..0000000 --- a/src/app/pages/pages.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Component } from '@angular/core'; -import { pipe } from 'rxjs'; -import { first } from 'rxjs/operators'; -import { MENU_ITEMS } from './pages-menu'; - -@Component({ - selector: 'ngx-pages', - styleUrls: ['pages.component.scss'], - template: ` - - - - - `, -}) -export class PagesComponent { - - menu = MENU_ITEMS; - /** - * - */ - constructor() { - - } - ngOnInit() { - // this.groupService.getAll().pipe(first(),) - // .subscribe(result => { - // console.log(result); - // for (let i = 0; i < result.length; i++) { - // const group = result[i]; - // this.menu.push( - // { - // title: 'Brothers in arms', - // icon: 'people-outline', - // link: '/pages/PropheticPrayerMeeting', - // home: true, - // } - // ); - // } - // }) - } -} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts deleted file mode 100644 index 7fad53e..0000000 --- a/src/app/pages/pages.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { NgModule } from '@angular/core'; -import { NbActionsModule, NbButtonModule, NbCardModule, NbCheckboxModule, NbDatepickerModule, NbIconModule, NbInputModule, NbListModule, NbMenuModule, NbRadioModule, NbSelectModule, NbStepperModule, NbTagModule, NbUserModule } from '@nebular/theme'; - -import { ThemeModule } from '../@theme/theme.module'; -import { PagesComponent } from './pages.component'; -import { DashboardModule } from './dashboard/dashboard.module'; -import { ECommerceModule } from './e-commerce/e-commerce.module'; -import { PagesRoutingModule } from './pages-routing.module'; -import { MiscellaneousModule } from './miscellaneous/miscellaneous.module'; -import { GroupManagementComponent } from './group-management/group-management.component'; - -@NgModule({ - imports: [ - PagesRoutingModule, - ThemeModule, - NbMenuModule, - DashboardModule, - ECommerceModule, - MiscellaneousModule, - NbInputModule, - NbCardModule, - NbButtonModule, - NbActionsModule, - NbUserModule, - NbCheckboxModule, - NbRadioModule, - NbDatepickerModule, - NbSelectModule, - NbIconModule, - NbTagModule, - NbStepperModule, - NbListModule, - ], - declarations: [ - PagesComponent, - GroupManagementComponent, - ], -}) -export class PagesModule { -} diff --git a/src/app/pages/ui-features/grid/grid.component.html b/src/app/pages/ui-features/grid/grid.component.html deleted file mode 100644 index e2e3b85..0000000 --- a/src/app/pages/ui-features/grid/grid.component.html +++ /dev/null @@ -1,251 +0,0 @@ -
-
- - - Grid System - - -
Stacked to horizontal
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
.col-md-1
-
-
-
-
-
.col-md-8
-
-
-
.col-md-4
-
-
-
-
-
.col-md-4
-
-
-
.col-md-4
-
-
-
.col-md-4
-
-
-
-
-
.col-md-6
-
-
-
.col-md-6
-
-
- -
Mobile and desktop
-
-
-
.col-12 .col-md-8
-
-
-
.col-6 .col-md-4
-
-
-
-
-
.col-6 .col-md-4
-
-
-
col-6 .col-md-4
-
-
-
.col-6 .col-md-4
-
-
-
-
-
.col-6
-
-
-
.col-6
-
-
- -
Mobile, tablet, desktop
-
-
-
.col-12 .col-sm-6 .col-md-8
-
-
-
.col-6 .col-md-4
-
-
-
-
-
.col-6 .col-sm-4
-
-
-
.col-6 .col-sm-4
-
-
-
.col-6 .col-sm-4
-
-
- -
Column wrapping
-
-
-
.col-9
-
-
-
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. -
-
-
-
.col-6
Subsequent columns continue along the new line.
-
-
- -
Responsive column resets
-
-
-
.col-6 .col-sm-3 -

Resize your viewport or check it out on your phone for an example.

-
-
-
-
.col-6 .col-sm-3
-
-
-
.col-6 .col-sm-3
-
-
-
.col-6 .col-sm-3
-
-
- -
Offsetting columns
-
-
-
.col-md-4
-
-
-
.col-md-4 .offset-md-4
-
-
-
-
-
.col-md-3 .offset-md-3
-
-
-
.col-md-3 .offset-md-3
-
-
-
-
-
.col-md-6 .offset-md-3
-
-
- -
Grid options
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Extra small devices - Phones (<576px) - Small devices - Tablets (≥576px) - Medium devices - Desktops (≥768px) - Large devices - Desktops (≥992px) - Large devices - Desktops (≥1200px) -
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width1.875rem / 30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
-
- - -
-
diff --git a/src/app/pages/ui-features/grid/grid.component.scss b/src/app/pages/ui-features/grid/grid.component.scss deleted file mode 100644 index 668b68a..0000000 --- a/src/app/pages/ui-features/grid/grid.component.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - .show-grid { - .row { - margin: -0.5rem; - } - - div[class^=col-] { - padding: 0.5rem; - box-sizing: border-box; - - div { - text-align: center; - background-color: nb-theme(background-basic-color-2); - padding: 0.75rem 0.25rem; - border-radius: 0.25rem; - } - } - } - - .grid-h { - margin-top: 1.5rem; - - &:first-child { - margin-top: 0; - } - } - - .table-responsive { - margin-top: 1rem; - } -} diff --git a/src/app/pages/ui-features/grid/grid.component.ts b/src/app/pages/ui-features/grid/grid.component.ts deleted file mode 100644 index de95892..0000000 --- a/src/app/pages/ui-features/grid/grid.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-grid', - styleUrls: ['./grid.component.scss'], - templateUrl: './grid.component.html', -}) -export class GridComponent { - -} diff --git a/src/app/pages/ui-features/icons/icons.component.html b/src/app/pages/ui-features/icons/icons.component.html deleted file mode 100644 index 06f2144..0000000 --- a/src/app/pages/ui-features/icons/icons.component.html +++ /dev/null @@ -1,45 +0,0 @@ -
-
- - - Eva Icons - - - - - - See all Eva Icons - - -
- -
- - - Font awesome icons - - - - - - - - See all Font Awesome icons - - - - - - - Ionicons - - - - - - See all ionicons - - - -
-
diff --git a/src/app/pages/ui-features/icons/icons.component.scss b/src/app/pages/ui-features/icons/icons.component.scss deleted file mode 100644 index 786e7cd..0000000 --- a/src/app/pages/ui-features/icons/icons.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - nb-card-body { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } - - nb-icon { - margin: 1rem; - } - - nb-card-footer { - text-align: right; - } -} diff --git a/src/app/pages/ui-features/icons/icons.component.ts b/src/app/pages/ui-features/icons/icons.component.ts deleted file mode 100644 index 91a7c0a..0000000 --- a/src/app/pages/ui-features/icons/icons.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { NbIconLibraries } from '@nebular/theme'; - -@Component({ - selector: 'ngx-icons', - styleUrls: ['./icons.component.scss'], - templateUrl: './icons.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class IconsComponent { - - evaIcons = []; - - constructor(iconsLibrary: NbIconLibraries) { - this.evaIcons = Array.from(iconsLibrary.getPack('eva').icons.keys()) - .filter(icon => icon.indexOf('outline') === -1); - - iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' }); - iconsLibrary.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' }); - iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' }); - } - - icons = { - - ionicons: [ - 'ionic', 'arrow-right-b', 'arrow-down-b', 'arrow-left-b', 'arrow-up-c', 'arrow-right-c', - 'arrow-down-c', 'arrow-left-c', 'arrow-return-right', 'arrow-return-left', 'arrow-swap', - 'arrow-shrink', 'arrow-expand', 'arrow-move', 'arrow-resize', 'chevron-up', - 'chevron-right', 'chevron-down', 'chevron-left', 'navicon-round', 'navicon', - 'drag', 'log-in', 'log-out', 'checkmark-round', 'checkmark', 'checkmark-circled', - 'close-round', 'plus-round', 'minus-round', 'information', 'help', - 'backspace-outline', 'help-buoy', 'asterisk', 'alert', 'alert-circled', - 'refresh', 'loop', 'shuffle', 'home', 'search', 'flag', 'star', - 'heart', 'heart-broken', 'gear-a', 'gear-b', 'toggle-filled', 'toggle', - 'settings', 'wrench', 'hammer', 'edit', 'trash-a', 'trash-b', - 'document', 'document-text', 'clipboard', 'scissors', 'funnel', - 'bookmark', 'email', 'email-unread', 'folder', 'filing', 'archive', - 'reply', 'reply-all', 'forward', - ], - - fontAwesome: [ - 'adjust', 'anchor', 'archive', 'chart-area', 'arrows-alt', 'arrows-alt-h', - 'arrows-alt-v', 'asterisk', 'at', 'car', 'ban', 'university', - 'chart-bar', 'barcode', 'bars', 'bed', 'beer', - 'bell', 'bell-slash', 'bicycle', 'binoculars', - 'birthday-cake', 'bolt', 'bomb', 'book', 'bookmark', - 'briefcase', 'bug', 'building', 'bullhorn', - ], - - fontAwesomeRegular: [ 'chart-bar', 'bell', 'bell-slash', 'bookmark', 'building' ], - }; - -} diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.html b/src/app/pages/ui-features/search-fields/search-fields.component.html deleted file mode 100644 index eee086f..0000000 --- a/src/app/pages/ui-features/search-fields/search-fields.component.html +++ /dev/null @@ -1,73 +0,0 @@ -
-
- - - Layout Rotate Search - - - - - -
-
- - - Modal Zoomin Search - - - - - -
-
- - - Modal Move Search - - - - - -
-
- - - Modal Drop Search - - - - - -
-
- - - Modal Half Search - - - - - -
-
- - - Curtain Search - - - - - -
-
- - - Column Curtain Search - - - - - -
-
- diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.ts b/src/app/pages/ui-features/search-fields/search-fields.component.ts deleted file mode 100644 index ad17f27..0000000 --- a/src/app/pages/ui-features/search-fields/search-fields.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-search-fields', - templateUrl: 'search-fields.component.html', -}) -export class SearchComponent { -} diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html deleted file mode 100644 index 7642d09..0000000 --- a/src/app/pages/ui-features/typography/typography.component.html +++ /dev/null @@ -1,241 +0,0 @@ -
-
- - - Used Fonts - - -
-
-
Open Sans
-
-

- Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. -

-
- - -
- -
- - - Headings - - -
-
-

H1. Heading

-
- -
- 800 2.25rem (36px) -
-
-
-
-

H2. Heading

-
- -
- 800 2rem (32px) -
-
-
-
-

H3. Heading

-
- -
- 800 1.875rem (30px) -
-
-
-
-

H4. Heading

-
- -
- 800 1.625rem (26px) -
-
-
-
-
H5. Heading
-
- -
- 800 1.375rem (22px) -
-
-
-
-
H6. Heading
-
- -
- 800 1.125rem (18px) -
-
- - -
- -
- - - Article Example - - -

So what's About the grammar?

-

- Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - They live in Bookmarksgrove. -

-

- A small river named Duden flows by their place and supplies it with the - necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly - into your mouth. - Even the all-powerful Pointing has no control about the blind texts it is an almost - unorthographic life One day however a small - line of blind text by the name of - Lorem Ipsum decided to leave for - the far World of Grammar. -

- - -
- -
- - - Font Colors - - -
-
-
-
-
Heading Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Body Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Hint Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Link Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Primary Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Success Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Info Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Warning Text
- Far far away, behind the your awesomeness. -
-
-
-
-
-
Danger Text
- Far far away, behind the your awesomeness. -
-
-
- - -
- -
- - - Alerts - - - - Heads up! This alert needs your attention, but it's not super important. - - - Oh snap! Change a few things up and try submitting again. - - - Well done! You successfully read this important alert message. - - - Heads up! This alert needs your attention, but it's not super important. - - - Warning! Better check yourself, you're not looking too good. - - - Oh snap! Change a few things up and try submitting again. - - - -
- -
- - - Lists - - -

Ordered List

-
    -
  1. Far far away, behind the word mountains
    2. -
  2. Far from the countries Vokalia and Consonantia
    3. -
  3. There live the blind texts.
    4. -
  4. Right at the coast of the Semantics.
    5. -
  5. A small river named Duden flows
    6. -
- -

Unordered List

-
    -
  • Far far away, behind the word mountains
    • -
  • Far from the countries Vokalia and Consonantia
    • -
  • There live the blind texts.
    • -
  • Right at the coast of the Semantics.
    • -
  • A small river named Duden flows
    • -
- - -
-
diff --git a/src/app/pages/ui-features/typography/typography.component.scss b/src/app/pages/ui-features/typography/typography.component.scss deleted file mode 100644 index 18f3a73..0000000 --- a/src/app/pages/ui-features/typography/typography.component.scss +++ /dev/null @@ -1,132 +0,0 @@ -@import '../../../@theme/styles/themes'; - -@include nb-install-component() { - - .font-row { - &:first-child { - margin-bottom: 2rem; - } - - .header { - align-items: baseline; - } - - p { - margin: 0; - } - } - - .headings-card { - h1 { - margin: 0; - } - - .header { - padding-bottom: 0.675rem; - margin-bottom: 0.675rem; - - &:last-child { - margin-bottom: 0; - } - } - } - - .header { - display: flex; - flex-wrap: wrap; - align-items: center; - padding-bottom: 1rem; - margin-bottom: 1rem; - border-bottom: 1px solid nb-theme(divider-color); - - &:last-child { - border-bottom: none; - } - - div:first-child { - flex: 2; - -ms-flex: 2 1 auto; - line-height: 1; - align-items: flex-end; - - h1, h2, h3, h4, h5, h6 { - margin-bottom: 0; - } - } - - .variants { - flex: 1; - -ms-flex: 1 1 auto; - display: flex; - justify-content: space-between; - align-items: flex-end; - - span { - padding-right: 1rem; - padding-left: 1rem; - } - } - - .detail { - flex: 1; - display: flex; - } - } - - .colors { - display: flex; - flex-direction: column; - - .item { - display: flex; - align-items: center; - margin-bottom: 1.25rem; - &:last-child { - margin-bottom: 0; - } - } - - .color { - width: 86px; - height: 60px; - border-top-right-radius: 1rem; - border-bottom-left-radius: 1rem; - @include nb-ltr(margin-right, 1rem); - @include nb-rtl(margin-left, 1rem); - } - - h1, h2, h3, h4, h5, h6 { - margin-bottom: 0.25rem; - } - } - - .text-link { - color: nb-theme(link-text-color); - } - - .bg-link { - background: nb-theme(link-text-color); - } - - .bg-heading { - background: nb-theme(text-basic-color); - } - - .bg-body { - background: nb-theme(text-basic-color); - } - - .bg-hint { - background: nb-theme(text-hint-color); - } - - .bg-link { - background: nb-theme(link-text-color); - } - - @each $status in nb-get-statuses() { - .bg-status-#{$status} { - background: nb-theme(text-#{$status}-color); - } - } -} diff --git a/src/app/pages/ui-features/typography/typography.component.ts b/src/app/pages/ui-features/typography/typography.component.ts deleted file mode 100644 index 73560d9..0000000 --- a/src/app/pages/ui-features/typography/typography.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme'; - -@Component({ - selector: 'ngx-typography', - styleUrls: ['./typography.component.scss'], - templateUrl: './typography.component.html', -}) -export class TypographyComponent implements OnDestroy { - breakpoint: NbMediaBreakpoint; - breakpoints: any; - themeSubscription: any; - - constructor(private themeService: NbThemeService, - private breakpointService: NbMediaBreakpointsService) { - - this.breakpoints = this.breakpointService.getBreakpointsMap(); - this.themeSubscription = this.themeService.onMediaQueryChange() - .subscribe(([oldValue, newValue]) => { - this.breakpoint = newValue; - }); - } - - ngOnDestroy() { - this.themeSubscription.unsubscribe(); - } -} diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts deleted file mode 100644 index 912fb5d..0000000 --- a/src/app/pages/ui-features/ui-features-routing.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { UiFeaturesComponent } from './ui-features.component'; -import { GridComponent } from './grid/grid.component'; -import { IconsComponent } from './icons/icons.component'; -import { TypographyComponent } from './typography/typography.component'; -import { SearchComponent } from './search-fields/search-fields.component'; - -const routes: Routes = [{ - path: '', - component: UiFeaturesComponent, - children: [ { - path: 'grid', - component: GridComponent, - }, { - path: 'icons', - component: IconsComponent, - }, { - path: 'typography', - component: TypographyComponent, - }, { - path: 'search-fields', - component: SearchComponent, - }], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class UiFeaturesRoutingModule { } diff --git a/src/app/pages/ui-features/ui-features.component.ts b/src/app/pages/ui-features/ui-features.component.ts deleted file mode 100644 index 0288715..0000000 --- a/src/app/pages/ui-features/ui-features.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-ui-features', - template: ` - - `, -}) -export class UiFeaturesComponent { -} diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts deleted file mode 100644 index 4f1c815..0000000 --- a/src/app/pages/ui-features/ui-features.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { NgModule } from '@angular/core'; -import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { UiFeaturesRoutingModule } from './ui-features-routing.module'; -import { UiFeaturesComponent } from './ui-features.component'; -import { GridComponent } from './grid/grid.component'; -import { IconsComponent } from './icons/icons.component'; -import { TypographyComponent } from './typography/typography.component'; -import { SearchComponent } from './search-fields/search-fields.component'; - -const components = [ - UiFeaturesComponent, - GridComponent, - IconsComponent, - TypographyComponent, - SearchComponent, -]; - -@NgModule({ - imports: [ - NbCardModule, - NbPopoverModule, - NbSearchModule, - NbIconModule, - NbAlertModule, - ThemeModule, - UiFeaturesRoutingModule, - ], - declarations: [ - ...components, - ], -}) -export class UiFeaturesModule { }