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

Add support for zooming in address balance graph

Browse Source
This commit is contained in:
natsoni 2024-06-12 12:57:13 +02:00
parent 7bef8653b1
commit 2b44055fc7
No known key found for this signature in database
GPG Key ID: C65917583181743B
3 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/address-graph/address-graph.component.html
View File

@ -2,7 +2,7 @@
<div [class.full-container]="!widget">
<ng-container *ngIf="!error">
<div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
<div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null, paddingBottom: !widget && !allowZoom ? '10px' : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
(chartInit)="onChartInit($event)">
</div>
<div class="text-center loadingGraphs" *ngIf="isLoading">

1
frontend/src/app/components/address-graph/address-graph.component.scss
View File

@ -46,7 +46,6 @@
display: flex;
flex: 1;
width: 100%;
padding-bottom: 10px;
padding-right: 10px;
}
.chart-widget {

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

@ -50,6 +50,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
hoverData: any[] = [];
showFiat = false;
conversions: any;
allowZoom: boolean = false;
subscription: Subscription;
redraw$: BehaviorSubject<boolean> = new BehaviorSubject(false);
@ -100,6 +101,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
if (addressSummary) {
this.error = null;
this.conversions = conversions;
this.allowZoom = addressSummary.length > 100 && !this.widget;
this.prepareChartOptions(addressSummary);
}
this.isLoading = false;
@ -169,7 +171,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
animation: false,
grid: {
top: 20,
bottom: 20,
bottom: this.allowZoom ? 65 : 20,
right: this.right,
left: this.left,
},
@ -337,6 +339,28 @@ export class AddressGraphComponent implements OnChanges, OnDestroy {
step: 'end'
}
],
dataZoom: this.allowZoom ? [{
type: 'inside',
realtime: true,
zoomLock: true,
maxSpan: 100,
minSpan: 5,
moveOnMouseMove: false,
}, {
showDetail: false,
show: true,
type: 'slider',
brushSelect: false,
realtime: true,
left: this.left,
right: this.right,
selectedDataBackground: {
lineStyle: {
color: '#fff',
opacity: 0.45,
},
},
}] : undefined
};
}