From afd896da40911a86757cdeaf38c26a2ae79746d3 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Wed, 14 Feb 2018 15:53:58 +0000
Subject: [PATCH] mgr/dashboard_v2: add sparkline component

This also adds a template in the table component.

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../shared/components/components.module.ts    |  9 ++-
 .../sparkline/sparkline.component.html        | 10 +++
 .../sparkline/sparkline.component.scss        |  4 +
 .../sparkline/sparkline.component.spec.ts     | 27 +++++++
 .../sparkline/sparkline.component.ts          | 76 +++++++++++++++++++
 .../table-key-value.component.spec.ts         |  3 +-
 .../datatable/table/table.component.html      |  8 +-
 .../datatable/table/table.component.spec.ts   |  3 +-
 .../shared/datatable/table/table.component.ts |  2 +
 .../src/app/shared/enum/cell-template.enum.ts |  3 +-
 10 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
index fea298f6d5062..fe65bea599bb1 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { AlertModule } from 'ngx-bootstrap';
 
+import { SparklineComponent } from './sparkline/sparkline.component';
 import { ViewCacheComponent } from './view-cache/view-cache.component';
 
 @NgModule({
@@ -12,10 +13,14 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     AlertModule.forRoot(),
     ChartsModule
   ],
-  declarations: [ViewCacheComponent],
+  declarations: [
+    ViewCacheComponent,
+    SparklineComponent
+  ],
   providers: [],
   exports: [
-    ViewCacheComponent
+    ViewCacheComponent,
+    SparklineComponent
   ]
 })
 export class ComponentsModule { }
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html
new file mode 100644
index 0000000000000..91f0d73e0f240
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html
@@ -0,0 +1,10 @@
+<div class="chart-container"
+     [ngStyle]="style">
+  <canvas baseChart
+          [labels]="labels"
+          [datasets]="datasets"
+          [options]="options"
+          [colors]="colors"
+          [chartType]="'line'">
+  </canvas>
+</div>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss
new file mode 100644
index 0000000000000..ba8a8ebb7d88a
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss
@@ -0,0 +1,4 @@
+.chart-container {
+  position: relative;
+  margin: auto;
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
new file mode 100644
index 0000000000000..4a879c3fcbd12
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppModule } from '../../../app.module';
+import { SparklineComponent } from './sparkline.component';
+
+describe('SparklineComponent', () => {
+  let component: SparklineComponent;
+  let fixture: ComponentFixture<SparklineComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        imports: [AppModule]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SparklineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts
new file mode 100644
index 0000000000000..35b3d91c8d135
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts
@@ -0,0 +1,76 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-sparkline',
+  templateUrl: './sparkline.component.html',
+  styleUrls: ['./sparkline.component.scss']
+})
+export class SparklineComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input()
+  style = {
+    height: '30px',
+    width: '100px'
+  };
+
+  public colors: Array<any> = [
+    {
+      backgroundColor: 'rgba(40,140,234,0.2)',
+      borderColor: 'rgba(40,140,234,1)',
+      pointBackgroundColor: 'rgba(40,140,234,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(40,140,234,0.8)'
+    }
+  ];
+
+  options = {
+    animation: {
+      duration: 0
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    legend: {
+      display: false
+    },
+    elements: {
+      line: {
+        borderWidth: 1
+      }
+    },
+    tooltips: {
+      enabled: true
+    },
+    scales: {
+      yAxes: [
+        {
+          display: false
+        }
+      ],
+      xAxes: [
+        {
+          display: false
+        }
+      ]
+    }
+  };
+
+  public datasets: Array<any> = [
+    {
+      data: []
+    }
+  ];
+
+  public labels: Array<any> = [];
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.datasets[0].data = changes['data'].currentValue;
+    this.datasets = [...this.datasets];
+    this.labels = [...Array(changes['data'].currentValue.length)];
+  }
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index a11686601288e..12f3893b6144e 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
+import { ComponentsModule } from '../../components/components.module';
 import { TableComponent } from '../table/table.component';
 import { TableKeyValueComponent } from './table-key-value.component';
 
@@ -13,7 +14,7 @@ describe('TableKeyValueComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ TableComponent, TableKeyValueComponent ],
-      imports: [ FormsModule, NgxDatatableModule ]
+      imports: [ FormsModule, NgxDatatableModule, ComponentsModule ]
     })
     .compileComponents();
   }));
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
index f51aa6f33af67..8779c937baf94 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
@@ -3,7 +3,7 @@
        *ngIf="toolHeader">
     <!-- actions -->
     <div class="oadatatableactions">
-        <ng-content select="table-actions"></ng-content>
+      <ng-content select="table-actions"></ng-content>
     </div>
     <!-- end actions -->
 
@@ -68,9 +68,15 @@
   </ngx-datatable>
 </div>
 <ng-template cdTableDetails></ng-template>
+
 <!-- cell templates that can be accessed from outside -->
 <ng-template #tableCellBoldTpl
              let-row="row"
              let-value="value">
   <strong>{{ value }}</strong>
 </ng-template>
+
+<ng-template #sparklineTpl
+             let-value="value">
+  <cd-sparkline [data]="value"></cd-sparkline>
+</ng-template>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts
index 07a1825d86aea..37b204ddf658a 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { NgxDatatableModule, TableColumn } from '@swimlane/ngx-datatable';
 
+import { ComponentsModule } from '../../components/components.module';
 import { TableComponent } from './table.component';
 
 describe('TableComponent', () => {
@@ -25,7 +26,7 @@ describe('TableComponent', () => {
     async(() => {
       TestBed.configureTestingModule({
         declarations: [TableComponent],
-        imports: [NgxDatatableModule, FormsModule]
+        imports: [NgxDatatableModule, FormsModule, ComponentsModule]
       }).compileComponents();
     })
   );
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
index ddbe24f4e90ab..2cb66623ad93d 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
@@ -27,6 +27,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
   @ViewChild(DatatableComponent) table: DatatableComponent;
   @ViewChild(TableDetailsDirective) detailTemplate: TableDetailsDirective;
   @ViewChild('tableCellBoldTpl') tableCellBoldTpl: TemplateRef<any>;
+  @ViewChild('sparklineTpl') sparklineTpl: TemplateRef<any>;
 
   // This is the array with the items to be shown.
   @Input() data: any[];
@@ -100,6 +101,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
 
   _addTemplates () {
     this.cellTemplates.bold = this.tableCellBoldTpl;
+    this.cellTemplates.sparkline = this.sparklineTpl;
   }
 
   ngOnChanges(changes) {
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
index 19f37c5858aaa..88959e0bad814 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
@@ -1,3 +1,4 @@
 export enum CellTemplate {
-  bold = 'bold'
+  bold = 'bold',
+  sparkline = 'sparkline'
 }
-- 
2.39.5