diff --git a/CHANGELOG.md b/CHANGELOG.md index fe31b7a9b8..16ab79b02e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -555,6 +555,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added the platform logo to the platform selector in the create or update account dialog - Added the platform logo to the account selector in the create or update activity dialog - Extended the value component by an `isLoading` attribute to distinguish the loading state from redacted values +- Added the option to enable data decimation in the line chart component ### Changed diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts index 5dbb6cc31c..26d0447a77 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.ts +++ b/libs/ui/src/lib/line-chart/line-chart.component.ts @@ -27,6 +27,7 @@ import { import { type AnimationsSpec, Chart, + Decimation, Filler, LinearScale, LineController, @@ -58,6 +59,7 @@ export class GfLineChartComponent @Input() benchmarkLabel = ''; @Input() colorScheme: ColorScheme = DEFAULT_COLOR_SCHEME; @Input() currency: string; + @Input() dataDecimation = false; @Input() historicalDataItems: LineChartItem[]; @Input() isAnimated = false; @Input() label: string; @@ -82,6 +84,7 @@ export class GfLineChartComponent public constructor(private changeDetectorRef: ChangeDetectorRef) { Chart.register( + Decimation, Filler, LineController, LineElement, @@ -187,6 +190,9 @@ export class GfLineChartComponent this.chart.options.plugins ??= {}; this.chart.options.plugins.tooltip = this.getTooltipPluginConfiguration(); + this.chart.options.plugins.decimation = this.dataDecimation + ? { algorithm: 'lttb', enabled: true } + : undefined; this.chart.options.animations = this.isAnimated ? animations : undefined; @@ -206,6 +212,9 @@ export class GfLineChartComponent }, interaction: { intersect: false, mode: 'index' }, plugins: { + decimation: this.dataDecimation + ? { algorithm: 'lttb', enabled: true } + : undefined, legend: { align: 'start', display: this.showLegend,