Moved stuff around, changed the way I'm storing milestones data

src/components/chart/chart-type.ts

@@ -12,6 +12,7 @@ export enum ChartType {
 export interface IDataset {
   type?: ChartType;
   borderColor?: string;
+  label?: string;
   data: string[];
   backgroundColor?: string | string[];
   pointBackgroundColor?: string;
@@ -20,6 +21,6 @@ export interface IDataset {
 
 export interface IData {
   labels?: string[];
-  labelsSource: string[];
+  labelsSource?: string[];
   datasets: IDataset[];
 }

src/components/chart/chart.component.ts

@@ -5,7 +5,7 @@ import {
   OnDestroy,
   ViewChild,
 } from '@angular/core';
-import { Chart, ChartOptions } from 'chart.js';
+import { Chart, ChartOptions } from 'chart.js/auto';
 import { PluginNodata } from './plugin-nodata';
 import { PluginMoreColors } from './plugin-more-colors';
 import { ChartType, IData } from './chart-type';
@@ -22,9 +22,20 @@ export class ChartComponent implements AfterViewInit, OnDestroy {
 
   private chart: any = undefined;
   private data: IData = {
-    labels: [],
-    labelsSource: [],
-    datasets: [],
+    labels: Array.from(
+      { length: 10 },
+      () => `${Math.floor(Math.random() * 100)}`
+    ),
+    // labelsSource: [],
+    datasets: [
+      {
+        label: 'test',
+        data: Array.from(
+          { length: 10 },
+          () => `${Math.floor(Math.random() * 100)}`
+        ),
+      },
+    ],
   };
 
   constructor() {}

src/components/select/select.component.html

@@ -1,4 +1,7 @@
-<label for="select">{{ label }}</label>
-<select name="select">
-  <option *ngFor="let item of data" [value]="item">{{ item }}</option>
+<select name="select" (change)="onChange($event)">
+  <option selected disabled hidden value="">{{ label }}</option>
+  <option *ngFor="let kv of data | async" [value]="kv.key">
+    {{ kv.value }}
+  </option>
 </select>
+<!-- <label for="select">{{ label }}</label> -->

src/components/select/select.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  width: 200px;
+}
+
+// label {
+//   padding-right: 10px;
+//   float: right;
+// }
+
+select {
+  width: 200px;
+  float: right;
+}

src/components/select/select.component.ts

@@ -1,6 +1,8 @@
 import { Component, Input, inject } from '@angular/core';
-import { DataService } from '../../services/data.service';
 import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { KeyValue } from '../../models/key-value';
+import { FilterService } from '../../services/filters.service';
 
 @Component({
   selector: 'fbi-select',
@@ -11,7 +13,12 @@ import { CommonModule } from '@angular/common';
 })
 export class SelectComponent {
   @Input() label!: string;
-  @Input() data!: (string | number)[];
+  @Input() key!: string;
+  @Input() data!: Observable<KeyValue[]>;
 
-  private dataService = inject(DataService);
+  private filterService = inject(FilterService);
+
+  onChange(event: any): void {
+    this.filterService.set(this.key, event?.target?.value);
+  }
 }

src/components/table/header.ts

@@ -0,0 +1,9 @@
+export class Header {
+  label: string;
+  source: string;
+
+  constructor(data: Partial<Header>) {
+    this.label = data?.label ?? '';
+    this.source = data?.source ?? '';
+  }
+}

src/components/table/table.component.html

@@ -0,0 +1,12 @@
+<table>
+  <tr>
+    <th *ngFor="let h of header">
+      {{ h.label }}
+    </th>
+  </tr>
+  <tr *ngFor="let row of rows; let index">
+    <td *ngFor="let h of header">
+      {{ row[h.source] }}
+    </td>
+  </tr>
+</table>

src/components/table/table.component.spec.ts

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

src/components/table/table.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { Header } from './header';
+
+@Component({
+  selector: 'fbi-table',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.scss',
+})
+export class TableComponent {
+  @Input() header!: Header[];
+  @Input() rows!: Record<string, any>[];
+}