Merge pull request #9 from qvest-digital/throughputChart

Throughput chart

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import {ManageDatasetsComponent} from "./components/manage-datasets/manage-datas
 import {CallbackComponent} from "./components/callback.component";
 import {CycleTimePage} from "./components/cycle-time-page/cycle-time.page";
 import {EditDatasetComponent} from "./components/edit-dataset/edit-dataset.component";
+import {ThroughputPageComponent} from "./components/throughput-page/throughput-page.component";
 
 export const CALLBACK_JIRA_CLOUD = 'callbackJiraCloud';
 export const CALLBACK_JIRA_DATA_CENTER = 'callbackJiraDataCenter';
@@ -15,15 +16,16 @@ export const WORK_ITEM_AGE = 'work-item-age';
 export const CYCLE_TIME = 'cycle-time';
 export const MANAGE_DATASETS = 'datasets';
 export const CREATE_DATASETS = MANAGE_DATASETS + '/create';
+export const THROUGHPUT = 'troughput';
 
 export const routes: Routes = [
   {path: '', redirectTo: `/${DASHBOARD}`, pathMatch: 'full'},
   { path: CALLBACK_JIRA_CLOUD, component: CallbackComponent },
   { path: CALLBACK_JIRA_DATA_CENTER, component: CallbackComponent },
   {path: DASHBOARD, component: DashboardComponent},
   {path: WORK_ITEM_AGE, component: WorkItemAgePage},
+  {path: THROUGHPUT, component: ThroughputPageComponent},
   {path: CYCLE_TIME, component: CycleTimePage},
-  {path: MANAGE_DATASETS, component: ManageDatasetsComponent},
   {path: MANAGE_DATASETS + '/:id', component: EditDatasetComponent},
   {path: CREATE_DATASETS, component: EditDatasetComponent},
 ];

src/app/components/layout/layout.component.html

@@ -8,7 +8,7 @@
       <a mat-list-item [routerLink]="DASHBOARD">Dashboard</a>
       <a mat-list-item [routerLink]="WORK_ITEM_AGE">Work Item Age</a>
       <a mat-list-item [routerLink]="CYCLE_TIME">Cycle Time</a>
-      <a mat-list-item disabled routerLink="/settings">Throughput</a>
+      <a mat-list-item [routerLink]="THROUGHPUT">Throughput</a>
       <a mat-list-item disabled routerLink="/settings">WIP</a>
       <a mat-list-item disabled routerLink="/settings">Monte Carlo Simulation</a>
     </mat-nav-list>

src/app/components/layout/layout.component.ts

@@ -15,7 +15,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import {StorageService} from "../../services/storage.service";
 import {Dataset, DataSetType} from "../../models/dataset";
 import {ToastrService} from "ngx-toastr";
-import {CYCLE_TIME, DASHBOARD, MANAGE_DATASETS, WORK_ITEM_AGE} from "../../app-routing.module";
+import {CYCLE_TIME, DASHBOARD, THROUGHPUT, WORK_ITEM_AGE} from "../../app-routing.module";
 import {JiraDataCenterService} from "../../services/jira-data-center.service";
 import {JiraCloudService} from "../../services/jira-cloud.service";
 import {WorkItemAgeChartComponent} from "../work-item-age-chart/work-item-age-chart.component";
@@ -138,9 +138,9 @@ export class LayoutComponent implements OnInit {
     }
   }
 
-  async clearDatabase() {
-    await this.storageService.clearAllData();
+  clearDatabase() {
+    this.storageService.clearAllData();
   }
 
-  protected readonly MANAGE_DATASETS = MANAGE_DATASETS;
+    protected readonly THROUGHPUT = THROUGHPUT;
 }

src/app/components/throughput-page/throughput-page.component.html

@@ -0,0 +1,8 @@
+<!-- src/app/components/throughput-page/throughput-page.component.html -->
+<div style="display: block;">
+  <canvas baseChart
+          [data]="lineChartData"
+          [options]="lineChartOptions"
+          [type]="lineChartType">
+  </canvas>
+</div>

src/app/components/throughput-page/throughput-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThroughputPageComponent } from './throughput-page.component';
+
+describe('ThroughputPageComponent', () => {
+  let component: ThroughputPageComponent;
+  let fixture: ComponentFixture<ThroughputPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ThroughputPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ThroughputPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/throughput-page/throughput-page.component.ts

@@ -0,0 +1,64 @@
+// src/app/components/throughput-page/throughput-page.component.ts
+import {Component, OnInit, ViewChild} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BaseChartDirective } from 'ng2-charts';
+import { ChartConfiguration, ChartType } from 'chart.js';
+import { StorageService } from '../../services/storage.service';
+import { Throughput } from '../../models/throughput';
+
+@Component({
+  selector: 'app-throughput-page',
+  standalone: true,
+  imports: [CommonModule, BaseChartDirective],
+  templateUrl: './throughput-page.component.html',
+  styleUrls: ['./throughput-page.component.scss']
+})
+export class ThroughputPageComponent implements OnInit {
+  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+
+  public lineChartData: ChartConfiguration['data'] = {
+    datasets: [
+      {
+        data: [],
+        label: 'Throughput',
+        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)',
+        fill: 'origin',
+      }
+    ],
+    labels: []
+  };
+
+  public lineChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+  };
+
+  public lineChartType: ChartType = 'line';
+
+  constructor(private storageService: StorageService) {}
+
+  //FIXME
+  async saveExampleThroughputData(): Promise<void> {
+    const exampleData: Throughput[] = [
+      { throughput: 5, date: new Date('2023-01-01'), issueId: 1, issueKey: 'KEY-1', title: 'Title 1' },
+      { throughput: 10, date: new Date('2023-01-02'), issueId: 2, issueKey: 'KEY-2', title: 'Title 2' },
+      { throughput: 15, date: new Date('2023-01-03'), issueId: 3, issueKey: 'KEY-3', title: 'Title 3' },
+      { throughput: 20, date: new Date('2023-01-04'), issueId: 4, issueKey: 'KEY-4', title: 'Title 4' },
+      { throughput: 25, date: new Date('2023-01-05'), issueId: 5, issueKey: 'KEY-5', title: 'Title 5' },
+    ];
+    await this.storageService.addThroughputData(exampleData);
+  }
+
+  async ngOnInit() {
+    await this.saveExampleThroughputData();
+
+    const throughputData: Throughput[] = await this.storageService.getThroughputData();
+    this.lineChartData.datasets[0].data = throughputData.map(entry => entry.throughput);
+    this.lineChartData.labels = throughputData.map(entry => entry.date.toDateString());
+    this.chart?.update();
+  }
+}

src/app/models/throughput.ts

@@ -0,0 +1,8 @@
+export interface Throughput {
+  issueId: number;
+  issueKey: string;
+  title: string;
+  throughput: number;
+  date: Date;
+  id?: number;
+}

src/app/services/storage.service.ts

@@ -8,6 +8,7 @@ import {AppSettings} from "../models/appSettings";
 import {IssueHistory} from "../models/issueHistory";
 import {CycletimeEntry} from "../models/cycletimeEntry";
 import {Status} from "../models/status";
+import {Throughput} from "../models/throughput";
 
 export class TableNames {
   static readonly DATASETS = 'datasets';
@@ -17,6 +18,7 @@ export class TableNames {
   static readonly ISSUE_HISTORY = 'issueHistory';
   static readonly CYCLE_TIME = 'cycleTime';
   static readonly STATUS = 'status';
+  static readonly THROUGHPUT = 'throughput';
 }
 
 export const dataSetDbConfig: DBConfig = {
@@ -75,6 +77,12 @@ export const dbConfigIssueData: DBConfig = {
         {name: 'issueId', keypath: 'issueId', options: {unique: false}},
       ]
     },
+    {
+      store: TableNames.THROUGHPUT,
+      storeConfig: {keyPath: 'id', autoIncrement: true}, storeSchema: [
+        {name: 'issueId', keypath: 'issueId', options: {unique: false}},
+      ]
+    },
   ]
 };
 
@@ -86,6 +94,7 @@ export function migrationFactory() {
       const workItems = transaction.objectStore(TableNames.WORK_ITEM_AGE);
       const issueHistory = transaction.objectStore(TableNames.ISSUE_HISTORY);
       const cycleTime = transaction.objectStore(TableNames.CYCLE_TIME);
+      const throughput = transaction.objectStore(TableNames.THROUGHPUT);
     },
   };
 }
@@ -220,6 +229,16 @@ export class StorageService {
     return firstValueFrom(this.dbService.bulkAdd<Status>(TableNames.STATUS, status));
   }
 
+  async getThroughputData(): Promise<Throughput[]> {
+    this.dbService.selectDb(dbConfigIssueData.name);
+    return firstValueFrom(this.dbService.getAll<Throughput>(TableNames.THROUGHPUT));
+  }
+
+  async addThroughputData(throughput: Throughput[]): Promise<number[]> {
+    this.dbService.selectDb(dbConfigIssueData.name);
+    return firstValueFrom(this.dbService.bulkAdd<Throughput>(TableNames.THROUGHPUT, throughput));
+  }
+
 
   getAllStatuses() {
     this.dbService.selectDb(dataSetDbConfig.name);