saving progress, lots of charting decisions made

src/components/chart/chart.component.ts

@@ -2,13 +2,21 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  Input,
+  OnChanges,
   OnDestroy,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core';
-import { Chart, ChartOptions } from 'chart.js/auto';
+import { Chart } from 'chart.js/auto';
 import { PluginNodata } from './plugin-nodata';
 import { PluginMoreColors } from './plugin-more-colors';
-import { ChartType, IData } from './chart-type';
+import { ChartConfig } from './chart-config';
+import { ChartConfigService } from './services/chart-config.service';
+import { DatasetService } from './services/dataset.service';
+import { LabelService } from './services/label.service';
+import { OptionsService } from './services/options.service';
+import { ScaleService } from './services/scale.service';
 
 @Component({
   selector: 'fbi-chart',
@@ -16,50 +24,43 @@ import { ChartType, IData } from './chart-type';
   imports: [],
   templateUrl: './chart.component.html',
   styleUrl: './chart.component.scss',
+  providers: [
+    ChartConfigService,
+    DatasetService,
+    LabelService,
+    OptionsService,
+    ScaleService,
+  ],
 })
-export class ChartComponent implements AfterViewInit, OnDestroy {
+export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
   @ViewChild('chart') canvas!: ElementRef;
+  @Input() config!: ChartConfig;
+  @Input() data!: Record<string, any>[];
 
   private chart: any = undefined;
-  private data: IData = {
-    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() {}
+  constructor(private chartConfigService: ChartConfigService) {}
 
   ngAfterViewInit(): void {
     this.initChart();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    this.initChart();
+  }
+
   ngOnDestroy(): void {
     this.chart?.destroy?.();
   }
 
-  initChart() {
+  private initChart() {
+    if (!this.canvas?.nativeElement) return;
+
     this.chart?.destroy?.();
+    const config = this.chartConfigService.chart(this.config, this.data);
+    console.log(config);
 
-    const opts: ChartOptions = {};
-    opts.responsive = true;
-    opts.maintainAspectRatio = false;
-
-    this.chart = new Chart(this.canvas.nativeElement, {
-      type: ChartType.Bar,
-      data: this.data,
-      options: opts,
-      plugins: [PluginNodata.config(), PluginMoreColors.config()] as any[],
-    });
+    config.plugins = [PluginNodata.config(), PluginMoreColors.config()];
+    this.chart = new Chart(this.canvas.nativeElement, config);
   }
 }