From e4c04e652d144b3aa3a5726dc90287771da20642 Mon Sep 17 00:00:00 2001
From: ElonH <elonhhuang@gmail.com>
Date: Wed, 27 May 2020 16:27:02 +0800
Subject: [PATCH] feat(speed-diff): show acceleration

---
 src/app/pages/jobs/jobs.module.ts             |  9 +++++-
 .../jobs/speed-chart/speed-chart.component.ts | 17 ++++++++++-
 .../jobs/speed-chart/speed-diff.component.ts  | 29 +++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/app/pages/jobs/speed-chart/speed-diff.component.ts

diff --git a/src/app/pages/jobs/jobs.module.ts b/src/app/pages/jobs/jobs.module.ts
index 7f84150..f6f5e11 100644
--- a/src/app/pages/jobs/jobs.module.ts
+++ b/src/app/pages/jobs/jobs.module.ts
@@ -15,9 +15,16 @@ import { SpeedChartComponent } from './speed-chart/speed-chart.component';
 import { SummaryComponent } from './summary/summary.component';
 import { TransfersComponent } from './transferring/transferring.component';
 import { ChartsModule } from 'ng2-charts';
+import { SpeedDiffComponent } from './speed-chart/speed-diff.component';
 
 @NgModule({
-	declarations: [JobsComponent, SpeedChartComponent, SummaryComponent, TransfersComponent],
+	declarations: [
+		JobsComponent,
+		SpeedChartComponent,
+		SummaryComponent,
+		TransfersComponent,
+		SpeedDiffComponent,
+	],
 	imports: [
 		CommonModule,
 		JobsRoutingModule,
diff --git a/src/app/pages/jobs/speed-chart/speed-chart.component.ts b/src/app/pages/jobs/speed-chart/speed-chart.component.ts
index 74ed950..e8f4e7d 100644
--- a/src/app/pages/jobs/speed-chart/speed-chart.component.ts
+++ b/src/app/pages/jobs/speed-chart/speed-chart.component.ts
@@ -3,6 +3,7 @@ import { CoreStatsFlow } from 'src/app/@dataflow/rclone';
 import { ChartDataSets, ChartOptions, ChartPoint } from 'chart.js';
 import { Color, BaseChartDirective } from 'ng2-charts';
 import * as moment from 'moment';
+import { pairwise } from 'rxjs/operators';
 
 @Component({
 	selector: 'jobs-speed-chart',
@@ -15,6 +16,7 @@ import * as moment from 'moment';
 				[colors]="lineChartColors"
 				chartType="line"
 			></canvas>
+			<jobs-speed-diff [val]="speedDiff"> </jobs-speed-diff>
 		</div>
 	`,
 	styles: [
@@ -28,6 +30,11 @@ import * as moment from 'moment';
 				width: 100%;
 				height: 100%;
 			}
+			.chart-container jobs-speed-diff {
+				position: absolute;
+				right: 1rem;
+				top: 0.25rem;
+			}
 		`,
 	],
 })
@@ -72,6 +79,7 @@ export class SpeedChartComponent implements OnInit {
 		},
 		legend: {
 			display: true,
+			align: 'start',
 		},
 		hover: {
 			intersect: false,
@@ -150,8 +158,11 @@ export class SpeedChartComponent implements OnInit {
 	@Input()
 	treadhold = 60;
 
+	speedDiff = 0;
+
 	ngOnInit() {
-		this.stats$.getOutput().subscribe((node) => {
+		const statsOut = this.stats$.getOutput();
+		statsOut.subscribe((node) => {
 			if (node[1].length !== 0) return;
 			const time = moment();
 			const speed = node[0]['core-stats'].speed;
@@ -169,5 +180,9 @@ export class SpeedChartComponent implements OnInit {
 			avgData.push({ x: time, y: avg });
 			this.chart.update();
 		});
+		statsOut.pipe(pairwise()).subscribe(([pre, cur]) => {
+			if (pre[1].length !== 0 || cur[1].length !== 0) return;
+			this.speedDiff = Math.round(cur[0]['core-stats'].speed - pre[0]['core-stats'].speed);
+		});
 	}
 }
diff --git a/src/app/pages/jobs/speed-chart/speed-diff.component.ts b/src/app/pages/jobs/speed-chart/speed-diff.component.ts
new file mode 100644
index 0000000..d76b493
--- /dev/null
+++ b/src/app/pages/jobs/speed-chart/speed-diff.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+	selector: 'jobs-speed-diff',
+	template: `
+		<span> {{ val }} </span>
+		<nb-icon
+			[icon]="'arrow-' + (val < 0 ? 'down' : 'up')"
+			[status]="val < 0 ? 'danger' : 'success'"
+		>
+		</nb-icon>
+	`,
+	styles: [
+		`
+			nb-icon {
+				font-size: 1.5rem;
+				line-height: 0.65;
+			}
+		`,
+	],
+})
+export class SpeedDiffComponent implements OnInit {
+	@Input()
+	val = 0;
+
+	constructor() {}
+
+	ngOnInit() {}
+}