diff --git a/frontend/src/app/components/address-graph/address-graph.component.html b/frontend/src/app/components/address-graph/address-graph.component.html index 32e16913a..c9dd072c8 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.html +++ b/frontend/src/app/components/address-graph/address-graph.component.html @@ -2,7 +2,7 @@
-
diff --git a/frontend/src/app/components/address-graph/address-graph.component.scss b/frontend/src/app/components/address-graph/address-graph.component.scss index 62393644b..1b5e0320d 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.scss +++ b/frontend/src/app/components/address-graph/address-graph.component.scss @@ -46,7 +46,6 @@ display: flex; flex: 1; width: 100%; - padding-bottom: 10px; padding-right: 10px; } .chart-widget { 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 2ba0cc0a6..e496af84b 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -50,6 +50,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { hoverData: any[] = []; showFiat = false; conversions: any; + allowZoom: boolean = false; subscription: Subscription; redraw$: BehaviorSubject = 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 }; }