GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add custom image to balance graph widget

Browse source
This commit is contained in:
natsoni 2025-10-04 17:48:47 +02:00
parent 711e616211
commit a4a44dee2d
No known key found for this signature in database
GPG key ID: C65917583181743B
2 changed files with 42 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

62
frontend/src/app/components/address-graph/address-graph.component.ts
View file

@ -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;
}
}

2
frontend/src/app/components/custom-dashboard/custom-dashboard.component.html
View file

@ -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>