From 63f0fe3070baa100e7c2ed2099a0ff2a9f59dc6b Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Tue, 27 Apr 2021 16:45:40 +0300 Subject: [PATCH] Add external dashboard to homepage. --- src/app/pages/pages.component.html | 91 +----------- src/app/pages/pages.component.ts | 185 +----------------------- src/app/shared/_pipes/safe.pipe.spec.ts | 8 + src/app/shared/_pipes/safe.pipe.ts | 15 ++ src/app/shared/shared.module.ts | 9 +- 5 files changed, 35 insertions(+), 273 deletions(-) create mode 100644 src/app/shared/_pipes/safe.pipe.spec.ts create mode 100644 src/app/shared/_pipes/safe.pipe.ts diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index b596f15..4a2ac16 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -16,95 +16,8 @@
- - CICADA DASHBOARD - -
-
- - Filter by location : - -
-
- - - {{village}} - - -
-
- - -
-
-
-
-
- - -
-
-
-
-
-

MASTER WALLET BALANCE

-

{{10000000 | number}} RCU

-
-
-

TOTAL DISTRIBUTED

-

{{disbursements * 1000 | number}} RCU

-
-
-

TOTAL SPENT

-

{{transactions * 100000 | number}} RCU

-
-
-

TOTAL USERS

-

{{users * 10 | number}} users

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

TRANSFER USAGES

-
- - -
-
-
-
-

PARTNER LIVE FEED

- -
-
-
+
+
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 14ba106..576c61b 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,8 +1,4 @@ -import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; -import {Color, Label} from 'ng2-charts'; -import {ChartDataSets, ChartOptions, ChartType} from 'chart.js'; -import {LocationService, LoggingService} from '@app/_services'; -import {ArraySum} from '@app/_helpers'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ selector: 'app-pages', @@ -10,181 +6,8 @@ import {ArraySum} from '@app/_helpers'; styleUrls: ['./pages.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class PagesComponent implements OnInit { - disbursements: number = 0; - users: any; - locations: any; - transactions: number = 0; - public lineChartData: ChartDataSets[] = [ - { data: [65, 59, 80, 81, 56, 55, 40], label: 'User Registration'}, - { data: [28, 48, 40, 19, 86, 27, 90], label: 'Transaction Volumes'}, - { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Token Disbursements', yAxisID: 'y-axis-1'} - ]; +export class PagesComponent { + url: string = 'https://dashboard.sarafu.network/'; - public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - - public lineChartOptions: (ChartOptions & { annotation: any }) = { - responsive: true, - scales: { - // We use this empty structure as a placeholder for dynamic theming. - xAxes: [{}], - yAxes: [ - { - id: 'y-axis-0', - position: 'left', - }, - { - id: 'y-axis-1', - position: 'right', - gridLines: { - color: 'rgba(255,0,0,0.3)', - }, - ticks: { - fontColor: 'red', - } - } - ] - }, - annotation: { - annotations: [ - { - type: 'line', - mode: 'vertical', - scaleID: 'x-axis-0', - value: 'March', - borderColor: 'orange', - borderWidth: 2, - label: { - enabled: true, - fontColor: 'orange', - content: 'LineAnno' - } - }, - ], - }, - }; - - public lineChartColors: Color[] = [ - { // grey - backgroundColor: 'rgba(148,159,177,0.2)', - borderColor: 'rgba(148,159,177,1)', - pointBackgroundColor: 'rgba(148,159,177,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(148,159,177,0.8)' - }, - { // dark grey - backgroundColor: 'rgba(77,83,96,0.2)', - borderColor: 'rgba(77,83,96,1)', - pointBackgroundColor: 'rgba(77,83,96,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(77,83,96,1)' - }, - { // red - backgroundColor: 'rgba(255,0,0,0.3)', - borderColor: 'red', - pointBackgroundColor: 'rgba(148,159,177,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(148,159,177,0.8)' - } - ]; - - public lineChartLegend = true; - public lineChartType = 'line'; - - public barChartOptions: ChartOptions = { - responsive: true, - // We use these empty structures as placeholders for dynamic theming. - scales: { xAxes: [{}], yAxes: [{}] }, - plugins: { - datalabels: { - anchor: 'end', - align: 'end', - } - } - }; - public barChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - public barChartType: ChartType = 'horizontalBar'; - public barChartLegend = true; - public barChartData: ChartDataSets[] = [ - { data: [65, 59, 80, 81, 56, 55, 40], label: 'New Users'}, - { data: [28, 48, 40, 19, 86, 27, 90], label: 'Recurrent Users'} - ]; - - public transferUsagesChartLabels: Label[] = ['Food/Water', 'Fuel/Energy', 'Education', 'Health', 'Shop', 'Environment', 'Transport', - 'Farming/Labour', 'Savings Group', 'Savings Group']; - public transferUsagesChartData: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; - public transferUsagesChartType: ChartType = 'pie'; - public transferUsagesChartOptions: ChartOptions = { - responsive: true, - legend: { - position: 'top', - }, - plugins: { - datalabels: { - formatter: (value, ctx) => { - const label = ctx.chart.data.labels[ctx.dataIndex]; - return label; - }, - }, - } - }; - public transferUsagesChartLegend = true; - public transferUsagesChartColors = [ - { - backgroundColor: [ - 'rgba(0,0,255,0.3)', - 'rgba(255,0,0,0.3)', - 'rgba(0,255,0,0.3)', - 'rgba(255,0,255,0.3)', - 'rgba(255,255,0,0.3)', - 'rgba(0,255,255,0.3)', - 'rgba(255,255,255,0.3)', - 'rgba(255,100,0,0.3)', - 'rgba(0,255,100,0.3)', - 'rgba(100,0,255,0.3)'], - }, - ]; - - constructor( - private locationService: LocationService, - private loggingService: LoggingService - ) { - this.locationService.getLocations(); - this.locationService.locationsSubject.subscribe(locations => { - this.locations = locations; - }); - } - - ngOnInit(): void { - this.newDataPoint([50, 80], 'August'); - this.transferUsagesChartData = [18, 12, 10, 8, 6, 5, 5, 3, 2, 1]; - this.disbursements = ArraySum.arraySum(this.lineChartData.find(data => data.label === 'Token Disbursements').data); - this.users = ArraySum.arraySum(this.barChartData.find(data => data.label === 'New Users').data); - this.transactions = ArraySum.arraySum(this.lineChartData.find(data => data.label === 'Transaction Volumes').data); - } - - newDataPoint(dataArr: any[], label: string): void { - this.barChartData.forEach((dataset, index) => { - this.barChartData[index] = Object.assign({}, this.barChartData[index], { - data: [...this.barChartData[index].data, dataArr[index]] - }); - }); - - this.barChartLabels = [...this.barChartLabels, label]; - } - - public chartClicked({ event, active}: { event: MouseEvent, active: {}[] }): void { - this.loggingService.sendInfoLevelMessage(`Event: ${event}, ${active}`); - } - - public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void { - this.loggingService.sendInfoLevelMessage(`Event: ${event}, ${active}`); - } - - public trackByName(index, item): string { - return item.name; - } + constructor() { } } diff --git a/src/app/shared/_pipes/safe.pipe.spec.ts b/src/app/shared/_pipes/safe.pipe.spec.ts new file mode 100644 index 0000000..49ee0ad --- /dev/null +++ b/src/app/shared/_pipes/safe.pipe.spec.ts @@ -0,0 +1,8 @@ +import { SafePipe } from './safe.pipe'; + +describe('SafePipe', () => { + it('create an instance', () => { + const pipe = new SafePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/shared/_pipes/safe.pipe.ts b/src/app/shared/_pipes/safe.pipe.ts new file mode 100644 index 0000000..73ffce6 --- /dev/null +++ b/src/app/shared/_pipes/safe.pipe.ts @@ -0,0 +1,15 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import {DomSanitizer} from '@angular/platform-browser'; + +@Pipe({ + name: 'safe' +}) +export class SafePipe implements PipeTransform { + + constructor(private sanitizer: DomSanitizer) {} + + transform(url: string, ...args: unknown[]): unknown { + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index b559ab4..81a60b3 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -8,8 +8,9 @@ import { MenuToggleDirective } from '@app/shared/_directives/menu-toggle.directi import {RouterModule} from '@angular/router'; import {MatIconModule} from '@angular/material/icon'; import {TokenRatioPipe} from '@app/shared/_pipes/token-ratio.pipe'; -import { ErrorDialogComponent } from './error-dialog/error-dialog.component'; +import { ErrorDialogComponent } from '@app/shared/error-dialog/error-dialog.component'; import {MatDialogModule} from '@angular/material/dialog'; +import { SafePipe } from '@app/shared/_pipes/safe.pipe'; @@ -21,14 +22,16 @@ import {MatDialogModule} from '@angular/material/dialog'; MenuSelectionDirective, MenuToggleDirective, TokenRatioPipe, - ErrorDialogComponent + ErrorDialogComponent, + SafePipe ], exports: [ TopbarComponent, FooterComponent, SidebarComponent, MenuSelectionDirective, - TokenRatioPipe + TokenRatioPipe, + SafePipe ], imports: [ CommonModule,