Merge pull request #5674 from mempool/mononaut/balance-widget-usd
show USD series by default in address balance widget
This commit is contained in:
commit
d50cfe135f
@ -44,6 +44,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
@Input() right: number | string = 10;
|
@Input() right: number | string = 10;
|
||||||
@Input() left: number | string = 70;
|
@Input() left: number | string = 70;
|
||||||
@Input() widget: boolean = false;
|
@Input() widget: boolean = false;
|
||||||
|
@Input() defaultFiat: boolean = false;
|
||||||
|
|
||||||
data: any[] = [];
|
data: any[] = [];
|
||||||
fiatData: any[] = [];
|
fiatData: any[] = [];
|
||||||
@ -84,6 +85,9 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
if (!this.addressSummary$ && (!this.address || !this.stats)) {
|
if (!this.addressSummary$ && (!this.address || !this.stats)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (changes.defaultFiat) {
|
||||||
|
this.selected['Fiat'] = !!this.defaultFiat;
|
||||||
|
}
|
||||||
if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
|
if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
|
||||||
if (this.subscription) {
|
if (this.subscription) {
|
||||||
this.subscription.unsubscribe();
|
this.subscription.unsubscribe();
|
||||||
@ -145,7 +149,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
if (!summary) {
|
if (!summary) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const total = this.stats ? (this.stats.funded_txo_sum - this.stats.spent_txo_sum) : summary.reduce((acc, tx) => acc + tx.value, 0);
|
const total = this.stats ? (this.stats.funded_txo_sum - this.stats.spent_txo_sum) : summary.reduce((acc, tx) => acc + tx.value, 0);
|
||||||
let runningTotal = total;
|
let runningTotal = total;
|
||||||
const processData = summary.map(d => {
|
const processData = summary.map(d => {
|
||||||
@ -159,7 +163,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
d
|
d
|
||||||
};
|
};
|
||||||
}).reverse();
|
}).reverse();
|
||||||
|
|
||||||
this.data = processData.filter(({ d }) => d.txid !== undefined).map(({ time, balance, d }) => [time, balance, d]);
|
this.data = processData.filter(({ d }) => d.txid !== undefined).map(({ time, balance, d }) => [time, balance, d]);
|
||||||
this.fiatData = processData.map(({ time, fiatBalance, balance, d }) => [time, fiatBalance, d, balance]);
|
this.fiatData = processData.map(({ time, fiatBalance, balance, d }) => [time, fiatBalance, d, balance]);
|
||||||
|
|
||||||
@ -177,6 +181,9 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] ?? d.value[1])), 0);
|
const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] ?? d.value[1])), 0);
|
||||||
const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] ?? d.value[1])), maxValue);
|
const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] ?? d.value[1])), maxValue);
|
||||||
|
|
||||||
|
this.right = this.selected['Fiat'] ? +this.initialRight + 40 : this.initialRight;
|
||||||
|
this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40;
|
||||||
|
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
color: [
|
color: [
|
||||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@ -244,7 +251,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
|
|
||||||
const hasTx = data[0].data[2].txid;
|
const hasTx = data[0].data[2].txid;
|
||||||
const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||||
|
|
||||||
tooltip += `<div>
|
tooltip += `<div>
|
||||||
<div style="text-align: right;">
|
<div style="text-align: right;">
|
||||||
<div><b>${date}</b></div>`;
|
<div><b>${date}</b></div>`;
|
||||||
@ -255,10 +262,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
: `${data.length} transactions`;
|
: `${data.length} transactions`;
|
||||||
tooltip += `<div><b>${header}</b></div>`;
|
tooltip += `<div><b>${header}</b></div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal);
|
const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal);
|
||||||
const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD');
|
const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD');
|
||||||
|
|
||||||
const btcVal = btcData.reduce((total, d) => total + d.data[2].value, 0);
|
const btcVal = btcData.reduce((total, d) => total + d.data[2].value, 0);
|
||||||
const fiatVal = fiatData.reduce((total, d) => total + d.data[2].value * d.data[2].price / 100_000_000, 0);
|
const fiatVal = fiatData.reduce((total, d) => total + d.data[2].value * d.data[2].price / 100_000_000, 0);
|
||||||
const btcColor = btcVal === 0 ? '' : (btcVal > 0 ? 'var(--green)' : 'var(--red)');
|
const btcColor = btcVal === 0 ? '' : (btcVal > 0 ? 'var(--green)' : 'var(--red)');
|
||||||
@ -442,7 +449,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
|
|||||||
right: this.right,
|
right: this.right,
|
||||||
}] : undefined
|
}] : undefined
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.chartInstance) {
|
if (this.chartInstance) {
|
||||||
this.chartInstance.setOption(this.chartOptions);
|
this.chartInstance.setOption(this.chartOptions);
|
||||||
}
|
}
|
||||||
|
@ -238,7 +238,7 @@
|
|||||||
<span> </span>
|
<span> </span>
|
||||||
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
|
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
<app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [height]="graphHeight"></app-address-graph>
|
<app-address-graph [address]="widget.props.address" [addressSummary$]="addressSummary$" [period]="widget.props.period || 'all'" [stats]="address ? address.chain_stats : null" [widget]="true" [defaultFiat]="true" [height]="graphHeight"></app-address-graph>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user