Merge 818153b12b into 2b2ff0b883

apps/client/src/app/components/home-overview/home-overview.html

@@ -69,6 +69,8 @@
             unit="%"
             [class.pr-3]="deviceType() === 'mobile'"
             [colorScheme]="user()?.settings?.colorScheme"
+            [dataDecimation]="true"
+            [dataDecimationThreshold]="100"
             [hidden]="historicalDataItems()?.length === 0"
             [historicalDataItems]="historicalDataItems()"
             [isAnimated]="user()?.settings?.dateRange === '1d' ? false : true"

libs/ui/src/lib/line-chart/line-chart.component.stories.ts

@@ -19,6 +19,8 @@ type Story = StoryObj<GfLineChartComponent>;
 
 export const Simple: Story = {
   args: {
+    dataDecimation: true,
+    dataDecimationThreshold: 1,
     historicalDataItems: [
       {
         date: '2017-01-01',

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -26,11 +26,14 @@ import {
 import {
   type AnimationsSpec,
   Chart,
+  type ChartData,
+  Decimation,
   Filler,
   LinearScale,
   LineController,
   LineElement,
   PointElement,
+  type Point,
   TimeScale,
   Tooltip,
   type TooltipOptions
@@ -54,6 +57,8 @@ export class GfLineChartComponent
   @Input() benchmarkLabel = '';
   @Input() colorScheme: ColorScheme;
   @Input() currency: string;
+  @Input() dataDecimation = false;
+  @Input() dataDecimationThreshold: number;
   @Input() historicalDataItems: LineChartItem[];
   @Input() isAnimated = false;
   @Input() label: string;
@@ -71,13 +76,14 @@ export class GfLineChartComponent
 
   @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
 
-  public chart: Chart<'line'>;
+  public chart: Chart<'line', (number | Point | null)[], string>;
   public isLoading = true;
 
   private readonly ANIMATION_DURATION = 1200;
 
   public constructor(private changeDetectorRef: ChangeDetectorRef) {
     Chart.register(
+      Decimation,
       Filler,
       LineController,
       LineElement,
@@ -118,14 +124,27 @@ export class GfLineChartComponent
 
   private initialize() {
     this.isLoading = true;
-    const benchmarkPrices: number[] = [];
+    const benchmarkPrices: (number | Point | null)[] = [];
     const labels: string[] = [];
-    const marketPrices: number[] = [];
+    const marketPrices: (number | Point | null)[] = [];
 
     this.historicalDataItems?.forEach((historicalDataItem, index) => {
-      benchmarkPrices.push(this.benchmarkDataItems?.[index]?.value);
+      const label = historicalDataItem.date;
-      labels.push(historicalDataItem.date);
+      const timestamp = new Date(historicalDataItem.date).getTime();
-      marketPrices.push(historicalDataItem.value);
+      const benchmarkValue = this.benchmarkDataItems?.[index]?.value;
+      const marketValue = historicalDataItem.value;
+
+      benchmarkPrices.push(
+        this.dataDecimation
+          ? { x: timestamp, y: benchmarkValue ?? null }
+          : benchmarkValue
+      );
+      labels.push(label);
+      marketPrices.push(
+        this.dataDecimation
+          ? { x: timestamp, y: marketValue ?? null }
+          : marketValue
+      );
     });
 
     const gradient = this.chartCanvas?.nativeElement
@@ -148,7 +167,7 @@ export class GfLineChartComponent
       gradient.addColorStop(1, getBackgroundColor(this.colorScheme));
     }
 
-    const data = {
+    const data: ChartData<'line', (number | Point | null)[], string> = {
       labels,
       datasets: [
         {
@@ -181,6 +200,11 @@ export class GfLineChartComponent
       if (this.chart) {
         this.chart.data = data;
         this.chart.options.plugins ??= {};
+        this.chart.options.parsing = this.dataDecimation ? false : undefined;
+        this.chart.options.plugins.decimation = {
+          enabled: this.dataDecimation,
+          threshold: this.dataDecimationThreshold
+        };
         this.chart.options.plugins.tooltip =
           this.getTooltipPluginConfiguration();
         this.chart.options.animations = this.isAnimated
@@ -189,7 +213,9 @@ export class GfLineChartComponent
 
         this.chart.update();
       } else {
-        this.chart = new Chart(this.chartCanvas.nativeElement, {
+        this.chart = new Chart<'line', (number | Point | null)[], string>(
+          this.chartCanvas.nativeElement,
+          {
             data,
             options: {
               animations: this.isAnimated ? animations : undefined,
@@ -201,7 +227,12 @@ export class GfLineChartComponent
                 }
               },
               interaction: { intersect: false, mode: 'index' },
+              parsing: this.dataDecimation ? false : undefined,
               plugins: {
+                decimation: {
+                  enabled: this.dataDecimation,
+                  threshold: this.dataDecimationThreshold
+                },
                 legend: {
                   align: 'start',
                   display: this.showLegend,
@@ -288,7 +319,8 @@ export class GfLineChartComponent
               getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
             ],
             type: 'line'
-        });
+          }
+        );
       }
     }