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

Merge pull request #2208 from mempool/nymkappa/feature/ln-dashboard-map-click

Browse Source 
Update mouse UX on LN map in dashboard
This commit is contained in:
wiz 2022-07-28 23:16:24 +00:00 committed by GitHub
commit 61e8e2fb2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
View File

@ -36,6 +36,7 @@
.widget > .chart {
-webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
min-height: 250px;
}
.chart {
@ -43,23 +44,18 @@
width: 100%;
height: 100%;
padding-right: 10px;
@media (max-width: 992px) {
padding-bottom: 25px;
}
@media (max-width: 829px) {
padding-bottom: 50px;
}
@media (max-width: 767px) {
padding-bottom: 25px;
}
@media (max-width: 629px) {
padding-bottom: 55px;
}
@media (max-width: 567px) {
padding-bottom: 55px;
}

27
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, HostListener, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { SeoService } from 'src/app/services/seo.service';
import { ApiService } from 'src/app/services/api.service';
import { Observable, switchMap, tap, zip } from 'rxjs';
@ -98,6 +98,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
}
this.chartOptions = {
silent: true,
title: title ?? undefined,
geo3D: {
map: 'world',
@ -110,9 +111,10 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
}
},
viewControl: {
center: this.style === 'widget' ? [0, 0, -1] : undefined,
minDistance: 0.1,
distance: this.style === 'widget' ? 45 : 60,
center: this.style === 'widget' ? [0, 0, -10] : undefined,
minDistance: this.style === 'widget' ? 22 : 0.1,
maxDistance: this.style === 'widget' ? 22 : 60,
distance: this.style === 'widget' ? 22 : 60,
alpha: 90,
panMouseButton: 'left',
rotateMouseButton: undefined,
@ -167,6 +169,14 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
};
}
@HostListener('window:wheel', ['$event'])
onWindowScroll(e): void {
// Not very smooth when using the mouse
if (this.style === 'widget' && e.target.tagName === 'CANVAS') {
window.scrollBy({left: 0, top: e.deltaY, behavior: 'auto'});
}
}
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
@ -174,6 +184,15 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
this.chartInstance = ec;
if (this.style === 'widget') {
this.chartInstance.getZr().on('click', (e) => {
this.zone.run(() => {
const url = new RelativeUrlPipe(this.stateService).transform(`/graphs/lightning/nodes-channels-map`);
this.router.navigate([url]);
});
});
}
this.chartInstance.on('click', (e) => {
if (e.data && e.data.publicKey) {
this.zone.run(() => {