diff --git a/package-lock.json b/package-lock.json index 4d61a1a..9379896 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,8 @@ "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "@iridiumidentity/ngx-iridium-client": "^0.2.1", + "echarts": "^5.4.3", + "ngx-echarts": "^16.0.0", "ngx-google-analytics": "^14.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -7642,6 +7644,20 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/echarts": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz", + "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.4" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -11592,6 +11608,17 @@ "node": ">=10" } }, + "node_modules/ngx-echarts": { + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-16.0.0.tgz", + "integrity": "sha512-hdM7/CL29bY3sF3V5ihb7H1NeUsQlhijp8tVxT23+vkNTf9SJrUHPjs9oHOMkbTlr2Q8HB+eVpckYAL/tuK0CQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "echarts": ">=5.0.0" + } + }, "node_modules/ngx-google-analytics": { "version": "14.0.1", "resolved": "https://registry.npmjs.org/ngx-google-analytics/-/ngx-google-analytics-14.0.1.tgz", @@ -15444,6 +15471,19 @@ "dependencies": { "tslib": "^2.3.0" } + }, + "node_modules/zrender": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz", + "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } } diff --git a/package.json b/package.json index 1f5eb4b..039317d 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "@iridiumidentity/ngx-iridium-client": "^0.2.1", + "echarts": "^5.4.3", + "ngx-echarts": "^16.0.0", "ngx-google-analytics": "^14.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/projects/iridium-ui/src/app/app.module.ts b/projects/iridium-ui/src/app/app.module.ts index eca7859..78b6009 100644 --- a/projects/iridium-ui/src/app/app.module.ts +++ b/projects/iridium-ui/src/app/app.module.ts @@ -20,11 +20,7 @@ import { MatListModule } from '@angular/material/list'; import { RegisterComponent } from './components/register/register.component'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { SpinnerComponent } from './components/spinner/spinner.component'; -import { - HTTP_INTERCEPTORS, - HttpClientModule, - HttpClientXsrfModule, -} from '@angular/common/http'; +import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { MatDialogModule } from '@angular/material/dialog'; import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component'; import { diff --git a/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.css b/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.css index e69de29..6e37d1f 100644 --- a/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.css +++ b/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.css @@ -0,0 +1,6 @@ +.main-container { + display: flex; + align-items: center; + flex-direction: row; + justify-content: center; +} diff --git a/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.ts b/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.ts index e0356fd..997ed13 100644 --- a/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.ts +++ b/projects/iridium-ui/src/app/components/dashboard/content/system-overview/system-overview.component.ts @@ -1,5 +1,7 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { DynamicContentViewItem } from '../dynamic-content-view-item'; +import * as echarts from 'echarts'; +import { TenantOverviewMetricService } from '../../../../services/tenant-overview-metric.service'; @Component({ selector: 'app-system-overview', @@ -8,5 +10,4 @@ import { DynamicContentViewItem } from '../dynamic-content-view-item'; }) export class SystemOverviewComponent implements DynamicContentViewItem { @Input() data: any; - constructor() {} } diff --git a/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.css b/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.css index e69de29..6e37d1f 100644 --- a/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.css +++ b/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.css @@ -0,0 +1,6 @@ +.main-container { + display: flex; + align-items: center; + flex-direction: row; + justify-content: center; +} diff --git a/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.html b/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.html index 0fe388a..5bd7c9a 100644 --- a/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.html +++ b/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.html @@ -1 +1,9 @@ -

tenant-overview works!

+
+
+

New users over the last 24 hours

+
+
+ +
+
+
diff --git a/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.ts b/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.ts index 9bcad09..00abd9f 100644 --- a/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.ts +++ b/projects/iridium-ui/src/app/components/dashboard/content/tenant-overview/tenant-overview.component.ts @@ -1,12 +1,41 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { DynamicContentViewItem } from '../dynamic-content-view-item'; +import { TenantOverviewMetricService } from '../../../../services/tenant-overview-metric.service'; +import * as echarts from 'echarts'; +import { environment } from '../../../../../environments/environment'; +import { AggregateUsersConfigService } from '../../../../services/aggregate-users-config.service'; @Component({ selector: 'app-tenant-overview', templateUrl: './tenant-overview.component.html', styleUrls: ['./tenant-overview.component.css'], }) -export class TenantOverviewComponent implements DynamicContentViewItem { +export class TenantOverviewComponent implements DynamicContentViewItem, OnInit { + readonly daysToSubtract = environment.tenantMetricDaysToGoBack; @Input() data: any; - constructor() {} + constructor( + private overviewMetricService: TenantOverviewMetricService, + private aggregateConfigService: AggregateUsersConfigService + ) {} + + ngOnInit(): void { + let pieChart = echarts.init(document.getElementById('pie'), { + width: 600, + height: 400, + }); + + const subtractDays = (date: Date, days: number): Date => { + const result = new Date(date); + result.setDate(result.getDate() - days); + return result; + }; + + const result = subtractDays(new Date(), this.daysToSubtract); + + this.overviewMetricService + .getAccountTypeCount(this.data.tenantId, result) + .subscribe(data => { + pieChart.setOption(this.aggregateConfigService.get(data)); + }); + } } diff --git a/projects/iridium-ui/src/app/components/dashboard/dashboard.component.ts b/projects/iridium-ui/src/app/components/dashboard/dashboard.component.ts index a0fcfa1..e3fdfc8 100644 --- a/projects/iridium-ui/src/app/components/dashboard/dashboard.component.ts +++ b/projects/iridium-ui/src/app/components/dashboard/dashboard.component.ts @@ -108,7 +108,7 @@ export class DashboardComponent implements OnInit, OnDestroy { this.views = this.contentViewService.getViewsForTenant( this.selectedTenant ); - this.view = this.contentViewService.getView('system overview'); + this.view = this.contentViewService.getView('tenant overview'); } } diff --git a/projects/iridium-ui/src/app/services/aggregate-users-config.service.spec.ts b/projects/iridium-ui/src/app/services/aggregate-users-config.service.spec.ts new file mode 100644 index 0000000..1c6f3e1 --- /dev/null +++ b/projects/iridium-ui/src/app/services/aggregate-users-config.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AggregateUsersConfigService } from './aggregate-users-config.service'; + +describe('AggregateUsersConfigGeneratorService', () => { + let service: AggregateUsersConfigService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(AggregateUsersConfigService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/iridium-ui/src/app/services/aggregate-users-config.service.ts b/projects/iridium-ui/src/app/services/aggregate-users-config.service.ts new file mode 100644 index 0000000..a38314d --- /dev/null +++ b/projects/iridium-ui/src/app/services/aggregate-users-config.service.ts @@ -0,0 +1,42 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class AggregateUsersConfigService { + constructor() {} + + get(data: Map) { + return { + tooltip: { + trigger: 'item', + }, + legend: { + orient: 'vertical', + x: 'left', + }, + series: [ + { + type: 'pie', + radius: ['50%', '70%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center', + }, + labelLine: { + show: false, + }, + emphasis: { + label: { + show: true, + fontSize: '30', + fontWeight: 'bold', + }, + }, + data: data, + }, + ], + }; + } +} diff --git a/projects/iridium-ui/src/app/services/tenant-overview-metric.service.spec.ts b/projects/iridium-ui/src/app/services/tenant-overview-metric.service.spec.ts new file mode 100644 index 0000000..ba384c2 --- /dev/null +++ b/projects/iridium-ui/src/app/services/tenant-overview-metric.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { TenantOverviewMetricService } from './tenant-overview-metric.service'; + +describe('TenantOverviewMetricService', () => { + let service: TenantOverviewMetricService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(TenantOverviewMetricService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/iridium-ui/src/app/services/tenant-overview-metric.service.ts b/projects/iridium-ui/src/app/services/tenant-overview-metric.service.ts new file mode 100644 index 0000000..38c4849 --- /dev/null +++ b/projects/iridium-ui/src/app/services/tenant-overview-metric.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { environment } from '../../environments/environment'; +import { CookieService } from './cookie.service'; + +@Injectable({ + providedIn: 'root', +}) +export class TenantOverviewMetricService { + constructor( + private http: HttpClient, + private cookieService: CookieService + ) {} + + public getAccountTypeCount(tenantId: string, from: Date) { + const token = this.cookieService.getCookie('iridium-token'); + const headers = new HttpHeaders({ + Accept: 'application/json', + Authorization: 'Bearer ' + token, + }); + const options = { headers: headers }; + return this.http + .get>( + environment.iridiumTrackerBaseUrl + + `tenants/${tenantId}/account-type-metrics?from=${from.toISOString()}`, + options + ) + .pipe(); + } +} diff --git a/projects/iridium-ui/src/environments/environment.development.ts b/projects/iridium-ui/src/environments/environment.development.ts index 06b9a5a..93ac6e1 100644 --- a/projects/iridium-ui/src/environments/environment.development.ts +++ b/projects/iridium-ui/src/environments/environment.development.ts @@ -1,5 +1,7 @@ export const environment = { production: false, + tenantMetricDaysToGoBack: 1, + iridiumTrackerBaseUrl: 'http://localhost:8382/', iridium: { domain: 'http://localhost:8381/', redirectUri: 'http://localhost:4200/callback', diff --git a/projects/iridium-ui/src/environments/environment.ts b/projects/iridium-ui/src/environments/environment.ts index 0f3e7cf..a96ca5c 100644 --- a/projects/iridium-ui/src/environments/environment.ts +++ b/projects/iridium-ui/src/environments/environment.ts @@ -1,5 +1,7 @@ export const environment = { production: true, + tenantMetricDaysToGoBack: 1, + iridiumTrackerBaseUrl: 'TRACKER_DOMAIN_GOES_HERE', iridium: { domain: 'MANAGEMENT_DOMAIN_GOES_HERE', redirectUri: 'REDIRECT_URI_GOES_HERE',