feat(speed-charts): a simple speed chart

package.json

@@ -43,8 +43,10 @@
     "@nebular/eva-icons": "^5.0.0",
     "@nebular/theme": "^5.0.0",
     "bootstrap": "^4.5.0",
+    "chart.js": "^2.9.3",
     "eva-icons": "^1.1.3",
     "nebular-icons": "^1.1.0",
+    "ng2-charts": "^2.3.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/@dataflow/extra/name-validation.ts

@@ -1,8 +1,8 @@
 import { SupersetFlow,  FlowInNode, CombErr } from '../core';
 import { Observable, of } from 'rxjs';
-import { IUser, UsersFlowNode } from './users-flow';
+import { IUser, UsersFlowOutNode } from './users-flow';
 
-export interface NameValidationPreNode extends UsersFlowNode {
+export interface NameValidationPreNode extends UsersFlowOutNode {
 	currentName: string;
 }
 

src/app/@dataflow/extra/users-flow.ts

@@ -11,17 +11,17 @@ export interface IUser extends IRcloneServer {
 	name: string;
 }
 
-export interface UsersFlowNode extends FlowInNode {
+export interface UsersFlowOutNode extends FlowInNode {
 	users: IUser[];
 	loginUser: IUser;
 }
 
-export abstract class UsersFlow extends BareFlow<FlowInNode, UsersFlowNode> {
+export abstract class UsersFlow extends BareFlow<FlowInNode, UsersFlowOutNode> {
 	public static readonly defaultUser: IUser[] = [
 		{ name: 'localhost', url: 'http://localhost:5572' },
 	];
 	private static trigger$ = new Subject<number>();
-	protected request(pre: CombErr<FlowInNode>): Observable<CombErr<UsersFlowNode>> {
+	protected request(pre: CombErr<FlowInNode>): Observable<CombErr<UsersFlowOutNode>> {
 		return of([{ users: UsersFlow.getAll(), loginUser: UsersFlow.getLogin() }, []]);
 	}
 	public static getAll(): IUser[] {

src/app/@dataflow/rclone/core-stats-flow.ts

@@ -0,0 +1,33 @@
+import { PostFlow } from './post-flow';
+import { NoopAuthFlowSupNode } from './noop-auth-flow';
+import { FlowOutNode, CombErr } from '../core';
+import { AjaxFlowInteralNode } from '../core/ajax-flow';
+import { IRcloneServer } from '../extra';
+
+export interface CoreStatsFlowOutNode extends FlowOutNode {
+	'core-stats': {
+		bytes: number;
+		checks: number;
+		deletes: number;
+		elapsedTime: number;
+		errors: number;
+		fatalError: boolean;
+		retryError: boolean;
+		speed: number;
+		transfers: number;
+	};
+}
+
+export interface CoreStatsFlowSupNode extends CoreStatsFlowOutNode, NoopAuthFlowSupNode {}
+
+export abstract class CoreStatsFlow extends PostFlow<IRcloneServer, CoreStatsFlowOutNode> {
+	// public prerequest$: Observable<CombErr<IRcloneServer>>;
+	protected cmd: string = 'core/stats';
+	protected params: object = {};
+	protected cacheSupport: boolean = false;
+	protected reconstructAjaxResult(x: AjaxFlowInteralNode): CombErr<CoreStatsFlowOutNode> {
+		if (x[1].length !== 0) return [{}, x[1]] as any;
+		const rsp = x[0].ajaxRsp.response;
+		return [{ 'core-stats': rsp }, []];
+	}
+}

src/app/@dataflow/rclone/index.ts

@@ -1,2 +1,3 @@
 export * from './post-flow';
 export * from './noop-auth-flow';
+export * from './core-stats-flow';

src/app/pages/dashboard/dashboard.component.ts

@@ -11,7 +11,7 @@ import { Component, OnInit } from '@angular/core';
 			</div>
 			<div class="row">
 				<div class="col-sm-12 col-md-6 col-xl-6">
-					<nb-card><nb-card-body>speed</nb-card-body></nb-card>
+					<dashboard-speed-card> </dashboard-speed-card>
 				</div>
 				<div class="col-sm-12 col-md-6 col-xl-6">
 					<nb-card><nb-card-body>core/stats</nb-card-body></nb-card>

src/app/pages/dashboard/dashboard.module.ts

@@ -3,10 +3,13 @@ import { CommonModule } from '@angular/common';
 
 import { DashboardRoutingModule } from './dashboard-routing.module';
 import { DashboardComponent } from './dashboard.component';
-import { NbCardModule } from '@nebular/theme';
+import { NbCardModule, NbButtonModule, NbIconModule } from '@nebular/theme';
+import { SpeedCardComponent } from './speed-card/speed-card.component';
+import { SpeedChartsComponent } from './speed-card/speed-charts.component';
+import { ChartsModule } from 'ng2-charts';
 
 @NgModule({
-	declarations: [DashboardComponent],
-	imports: [CommonModule, DashboardRoutingModule, NbCardModule],
+	declarations: [DashboardComponent, SpeedCardComponent, SpeedChartsComponent],
+	imports: [CommonModule, DashboardRoutingModule, NbCardModule, NbButtonModule, NbIconModule, ChartsModule],
 })
 export class DashboardModule {}

src/app/pages/dashboard/speed-card/speed-card.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'dashboard-speed-card',
+	template: `
+		<nb-flip-card #flip [showToggleButton]="false">
+			<nb-card-front>
+				<nb-card>
+					<nb-card-header>
+						<span>Speed Chart</span>
+						<button nbButton size="small" shape="round" appearance="ghost" (click)="flip.toggle()">
+							<nb-icon icon="options-2"></nb-icon>
+						</button>
+					</nb-card-header>
+					<nb-card-body>
+						<dashboard-speed-charts> </dashboard-speed-charts>
+					</nb-card-body>
+				</nb-card>
+			</nb-card-front>
+			<nb-card-back>
+				<nb-card>
+					<nb-card-header>
+						<span>Speed Limitation</span>
+						<button nbButton size="small" shape="round" appearance="ghost" (click)="flip.toggle()">
+							<nb-icon icon="arrow-back"></nb-icon>
+						</button>
+					</nb-card-header>
+					<nb-card-body>
+						123
+					</nb-card-body>
+				</nb-card>
+			</nb-card-back>
+		</nb-flip-card>
+	`,
+	styles: [],
+})
+export class SpeedCardComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit() {}
+}