From a4a44dee2d4cfd967d2882b93ac3f112a85d64a3 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sat, 4 Oct 2025 17:48:47 +0200
Subject: [PATCH] Add custom image to balance graph widget

---
 .../address-graph/address-graph.component.ts  | 62 ++++++++++++-------
 .../custom-dashboard.component.html           |  2 +-
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/address-graph/address-graph.component.ts b/frontend/src/app/components/address-graph/address-graph.component.ts
index 005c64e9f..1affc92c9 100644
--- a/frontend/src/app/components/address-graph/address-graph.component.ts
+++ b/frontend/src/app/components/address-graph/address-graph.component.ts
@@ -45,6 +45,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   @Input() left: number | string = 70;
   @Input() widget: boolean = false;
   @Input() label: string = '';
+  @Input() image: string = '';
   @Input() defaultFiat: boolean = false;
   @Input() showLegend: boolean = true;
   @Input() showYAxis: boolean = true;
@@ -56,7 +57,6 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
   hoverData: any[] = [];
   conversions: any;
   allowZoom: boolean = false;
-  labelGraphic: any;
 
   selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false };
 
@@ -87,18 +87,6 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
-    this.labelGraphic = this.label ? {
-      type: 'text',
-      right: '36px',
-      bottom: '36px',
-      z: 100,
-      silent: true,
-      style: {
-        fill: '#fff',
-        text: this.label,
-        font: '24px sans-serif'
-      }
-    } : undefined;
     if (!this.addressSummary$ && (!this.address || !this.stats)) {
       return;
     }
@@ -200,6 +188,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
 
     this.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
     this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
+    const graphicElements = this.graphicElements();
 
     this.chartOptions = {
       color: [
@@ -219,10 +208,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
         right: this.adjustedRight,
         left: this.adjustedLeft,
       },
-      graphic: this.labelGraphic ? [{
-        ...this.labelGraphic,
-        right: this.adjustedRight + 22 + 'px',
-      }] : undefined,
+      graphic: graphicElements.length > 0 ? graphicElements : undefined,
       legend: (this.showLegend && !this.stateService.isAnyTestnet()) ? {
         data: [
           {
@@ -455,16 +441,14 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
     this.selected = e.selected;
     this.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
     this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
+    const graphicElements = this.graphicElements();
 
     this.chartOptions = {
       grid: {
         right: this.adjustedRight,
         left: this.adjustedLeft,
       },
-      graphic: this.labelGraphic ? [{
-        ...this.labelGraphic,
-        right: this.adjustedRight + 22 + 'px',
-      }] : undefined,
+      graphic: graphicElements.length > 0 ? graphicElements : undefined,
       legend: {
         selected: this.selected,
       },
@@ -526,4 +510,40 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
 
     return extendedSummary;
   }
+
+  graphicElements() {
+    const graphicElements = [];
+
+    if (this.label) {
+      graphicElements.push({
+        type: 'text',
+        right: this.adjustedRight + 22 + 'px',
+        bottom: '36px',
+        z: 100,
+        silent: true,
+        style: {
+          fill: '#fff',
+          text: this.label,
+          font: '24px sans-serif'
+        }
+      });
+    }
+
+    if (this.image) {
+      graphicElements.push({
+        type: 'image',
+        style: {
+          image: this.image,
+          width: 120,
+          height: 80,
+        },
+        right: this.adjustedRight + 22,
+        bottom: this.label ? 66 : 36,
+        z: 100,
+        silent: true,
+      });
+    }
+
+    return graphicElements;
+  }
 }
diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
index 02c860cae..8c3dc0f79 100644
--- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
+++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
@@ -272,7 +272,7 @@
                   <span>&nbsp;</span>
                   <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
                 </a>
-                <app-address-graph [addressSummary$]="walletSummary$" [period]="widget.props.period || 'all'" [widget]="true" [height]="graphHeight" [label]="widget.props.label"></app-address-graph>
+                <app-address-graph [addressSummary$]="walletSummary$" [period]="widget.props.period || 'all'" [widget]="true" [height]="graphHeight" [label]="widget.props.label" [image]="widget.props.image"></app-address-graph>
               </div>
             </div>
           </div>