From 5c0dd1fb720c0193135131dfe12267b8b8b4c22e Mon Sep 17 00:00:00 2001
From: ElonH <elonhhuang@gmail.com>
Date: Wed, 27 May 2020 14:22:45 +0800
Subject: [PATCH] feat(job-speed-chart): basic framework

---
 src/app/pages/jobs/jobs.component.ts          |  12 +-
 src/app/pages/jobs/jobs.module.ts             |   2 +
 .../jobs/speed-chart/speed-chart.component.ts | 142 +++++++++++++++++-
 3 files changed, 148 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/jobs/jobs.component.ts b/src/app/pages/jobs/jobs.component.ts
index 953c84f..a887210 100644
--- a/src/app/pages/jobs/jobs.component.ts
+++ b/src/app/pages/jobs/jobs.component.ts
@@ -35,9 +35,9 @@ import { CombErr } from 'src/app/@dataflow/core';
 				<div class="container">
 					<div class="row">
 						<div class="col-6">
-							<nb-card>
+							<nb-card size="small">
 								<nb-card-header> Speed </nb-card-header>
-								<nb-card-body>
+								<nb-card-body class="speed-body">
 									<jobs-speed-chart [stats$]="stats$"> </jobs-speed-chart>
 								</nb-card-body>
 							</nb-card>
@@ -84,12 +84,14 @@ import { CombErr } from 'src/app/@dataflow/core';
 			div.row {
 				padding-top: 1rem;
 			}
-			nb-card {
-				height: 100%;
-			}
 			.active-group {
 				background-color: lightcoral;
 			}
+			.speed-body {
+				padding: 1rem 0 0 0;
+				min-height: 10rem;
+				overflow-y: hidden;
+			}
 		`,
 	],
 })
diff --git a/src/app/pages/jobs/jobs.module.ts b/src/app/pages/jobs/jobs.module.ts
index 082c8fa..7f84150 100644
--- a/src/app/pages/jobs/jobs.module.ts
+++ b/src/app/pages/jobs/jobs.module.ts
@@ -14,6 +14,7 @@ import { TableModule } from 'ngx-easy-table';
 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';
 
 @NgModule({
 	declarations: [JobsComponent, SpeedChartComponent, SummaryComponent, TransfersComponent],
@@ -26,6 +27,7 @@ import { TransfersComponent } from './transferring/transferring.component';
 		TableModule,
 		NbListModule,
 		NbIconModule,
+		ChartsModule,
 	],
 })
 export class JobsModule {}
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 5b3be06..31b85d3 100644
--- a/src/app/pages/jobs/speed-chart/speed-chart.component.ts
+++ b/src/app/pages/jobs/speed-chart/speed-chart.component.ts
@@ -1,16 +1,152 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { CoreStatsFlow } from 'src/app/@dataflow/rclone';
+import { ChartDataSets, ChartOptions } from 'chart.js';
+import { Color, BaseChartDirective } from 'ng2-charts';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'jobs-speed-chart',
-	template: ` <canvas baseChart width="200" height="100"></canvas> `,
-	styles: [],
+	template: `
+		<div class="chart-container">
+			<canvas
+				baseChart
+				[datasets]="lineChartData"
+				[options]="lineChartOptions"
+				[colors]="lineChartColors"
+				chartType="line"
+			></canvas>
+		</div>
+	`,
+	styles: [
+		`
+			.chart-container {
+				position: relative;
+				width: 100%;
+				height: 287px;
+			}
+			canvas {
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	],
 })
 export class SpeedChartComponent implements OnInit {
 	@Input()
 	stats$: CoreStatsFlow;
 
 	constructor() {}
+	public lineChartData: ChartDataSets[] = [
+		{
+			data: [
+				{ x: moment().add(11, 'second'), y: 380 },
+				{ x: moment().add(22, 'second'), y: 110 },
+				{ x: moment().add(33, 'second'), y: 400 },
+				{ x: moment().add(44, 'second'), y: 300 },
+				{ x: moment().add(55, 'second'), y: 800 },
+				{ x: moment().add(57, 'second'), y: 350 },
+				{ x: moment().add(1, 'minute'), y: 320 },
+			],
+			label: 'Speed',
+		},
+		{
+			data: [
+				{ x: moment().add(11, 'second'), y: 246 },
+				{ x: moment().add(22, 'second'), y: 104 },
+				{ x: moment().add(33, 'second'), y: 624 },
+				{ x: moment().add(44, 'second'), y: 428 },
+				{ x: moment().add(55, 'second'), y: 301 },
+				{ x: moment().add(57, 'second'), y: 134 },
+				{ x: moment().add(1, 'minute'), y: 642 },
+			],
+			label: 'Avg',
+		},
+	];
+	public lineChartOptions: ChartOptions = {
+		responsive: true,
+		maintainAspectRatio: false,
+		animation: {
+			duration: 0,
+		},
+		layout: {
+			padding: {
+				bottom: -20,
+			},
+		},
+		legend: {
+			display: false,
+		},
+		hover: {
+			intersect: false,
+		},
+		scales: {
+			// We use this empty structure as a placeholder for dynamic theming.
+			xAxes: [
+				{
+					type: 'time',
+					distribution: 'linear',
+					time: {
+						minUnit: 'second',
+						displayFormats: {
+							second: 'ss',
+						},
+					},
+					gridLines: {
+						display: false,
+						drawBorder: false,
+					},
+					ticks: {
+						display: false,
+						padding: 0,
+					},
+					scaleLabel: {
+						display: false,
+					},
+				},
+			],
+			yAxes: [
+				{
+					offset: true,
+					gridLines: {
+						color: 'rgb(0,0,0,0.3)',
+						drawBorder: false,
+					},
+					ticks: {
+						labelOffset: -10, // sit on gridline
+						padding: -40, // moving label into dataset
+						// min: 0,
+						beginAtZero: true,
+					},
+					scaleLabel: {
+						display: false,
+					},
+				},
+			],
+			unit: 'minute',
+		},
+	};
+	public lineChartColors: Color[] = [
+		{
+			// primary
+			backgroundColor: 'rgba(89,139,255,0.3)',
+			borderColor: 'rgb(89,139,255)',
+			pointBorderColor: 'rgba(0,0,0,0)',
+			pointBackgroundColor: 'rgba(0,0,0,0)',
+			pointHoverBackgroundColor: 'rgba(89,139,255,0.3)',
+			pointHoverBorderColor: 'rgb(89,139,255)',
+		},
+		{
+			// info
+			backgroundColor: 'rgba(0,149,255,0.3)',
+			borderColor: '#0095ff',
+			pointBorderColor: 'rgba(0,0,0,0)',
+			pointBackgroundColor: 'rgba(0,0,0,0)',
+			pointHoverBackgroundColor: 'rgba(0,149,255,0.3)',
+			pointHoverBorderColor: '#0095ff',
+		},
+	];
+
+	@ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
 
 	ngOnInit() {}
 }