67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import {
|
|
AfterViewInit,
|
|
Component,
|
|
ElementRef,
|
|
Input,
|
|
OnChanges,
|
|
OnDestroy,
|
|
SimpleChanges,
|
|
ViewChild,
|
|
} from '@angular/core';
|
|
import { Chart } from 'chart.js/auto';
|
|
import { PluginNodata } from './plugin-nodata';
|
|
import { PluginMoreColors } from './plugin-more-colors';
|
|
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',
|
|
standalone: true,
|
|
imports: [],
|
|
templateUrl: './chart.component.html',
|
|
styleUrl: './chart.component.scss',
|
|
providers: [
|
|
ChartConfigService,
|
|
DatasetService,
|
|
LabelService,
|
|
OptionsService,
|
|
ScaleService,
|
|
],
|
|
})
|
|
export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
|
|
@ViewChild('chart') canvas!: ElementRef;
|
|
@Input() config!: ChartConfig;
|
|
@Input() data!: Record<string, any>[];
|
|
|
|
private chart: any = undefined;
|
|
|
|
constructor(private chartConfigService: ChartConfigService) {}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.initChart();
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
this.initChart();
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.chart?.destroy?.();
|
|
}
|
|
|
|
private initChart() {
|
|
if (!this.canvas?.nativeElement) return;
|
|
|
|
this.chart?.destroy?.();
|
|
const config = this.chartConfigService.chart(this.config, this.data);
|
|
console.log(config);
|
|
|
|
config.plugins = [PluginNodata.config(), PluginMoreColors.config()];
|
|
this.chart = new Chart(this.canvas.nativeElement, config);
|
|
}
|
|
}
|