machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor address graph rendering controls

Browse Source
This commit is contained in:
Mononaut 2024-12-10 00:27:00 +00:00
parent 522b4d914f
commit 1d2a5e9c94
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/app/components/address-graph/address-graph.component.ts
View File

@ -45,14 +45,17 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
@Input() left: number | string = 70; @Input() left: number | string = 70;
@Input() widget: boolean = false; @Input() widget: boolean = false;
@Input() defaultFiat: boolean = false; @Input() defaultFiat: boolean = false;
@Input() showLegend: boolean = true;
@Input() showYAxis: boolean = true;
adjustedLeft: number;
adjustedRight: number;
data: any[] = []; data: any[] = [];
fiatData: any[] = []; fiatData: any[] = [];
hoverData: any[] = []; hoverData: any[] = [];
conversions: any; conversions: any;
allowZoom: boolean = false; allowZoom: boolean = false;
initialRight = this.right;
initialLeft = this.left;
selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false }; selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false };
subscription: Subscription; subscription: Subscription;
@ -181,8 +184,8 @@ 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.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40; this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
this.chartOptions = { this.chartOptions = {
color: [ color: [
@ -199,10 +202,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
grid: { grid: {
top: 20, top: 20,
bottom: this.allowZoom ? 65 : 20, bottom: this.allowZoom ? 65 : 20,
right: this.right, right: this.adjustedRight,
left: this.left, left: this.adjustedLeft,
}, },
legend: !this.stateService.isAnyTestnet() ? { legend: (this.showLegend && !this.stateService.isAnyTestnet()) ? {
data: [ data: [
{ {
name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`, name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
@ -313,6 +316,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
type: 'value', type: 'value',
position: 'left', position: 'left',
axisLabel: { axisLabel: {
show: this.showYAxis,
color: 'rgb(110, 112, 121)', color: 'rgb(110, 112, 121)',
formatter: (val): string => { formatter: (val): string => {
let valSpan = maxValue - (this.period === 'all' ? 0 : minValue); let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
@ -343,6 +347,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
{ {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
show: this.showYAxis,
color: 'rgb(110, 112, 121)', color: 'rgb(110, 112, 121)',
formatter: function(val) { formatter: function(val) {
return `$${this.amountShortenerPipe.transform(val, 0, undefined, true)}`; return `$${this.amountShortenerPipe.transform(val, 0, undefined, true)}`;
@ -399,8 +404,8 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
type: 'slider', type: 'slider',
brushSelect: false, brushSelect: false,
realtime: true, realtime: true,
left: this.left, left: this.adjustedLeft,
right: this.right, right: this.adjustedRight,
selectedDataBackground: { selectedDataBackground: {
lineStyle: { lineStyle: {
color: '#fff', color: '#fff',
@ -430,23 +435,23 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
onLegendSelectChanged(e) { onLegendSelectChanged(e) {
this.selected = e.selected; this.selected = e.selected;
this.right = this.selected['Fiat'] ? +this.initialRight + 40 : this.initialRight; this.adjustedRight = this.selected['Fiat'] ? +this.right + 40 : +this.right;
this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40; this.adjustedLeft = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? +this.left : +this.left - 40;
this.chartOptions = { this.chartOptions = {
grid: { grid: {
right: this.right, right: this.adjustedRight,
left: this.left, left: this.adjustedLeft,
}, },
legend: { legend: {
selected: this.selected, selected: this.selected,
}, },
dataZoom: this.allowZoom ? [{ dataZoom: this.allowZoom ? [{
left: this.left, left: this.adjustedLeft,
right: this.right, right: this.adjustedRight,
}, { }, {
left: this.left, left: this.adjustedLeft,
right: this.right, right: this.adjustedRight,
}] : undefined }] : undefined
}; };