Merge pull request #2322 from mempool/nymkappa/bugfix/indexing-message
Fix "indexing in progress" message in ln dashboard
This commit is contained in:
commit
daa5ebbcff
@ -10,6 +10,7 @@ import { download } from 'src/app/shared/graphs.utils';
|
|||||||
import { SeoService } from 'src/app/services/seo.service';
|
import { SeoService } from 'src/app/services/seo.service';
|
||||||
import { LightningApiService } from '../lightning-api.service';
|
import { LightningApiService } from '../lightning-api.service';
|
||||||
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
|
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
|
||||||
|
import { isMobile } from 'src/app/shared/common.utils';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-nodes-networks-chart',
|
selector: 'app-nodes-networks-chart',
|
||||||
@ -108,19 +109,19 @@ export class NodesNetworksChartComponent implements OnInit {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
prepareChartOptions(data, maxYAxis) {
|
prepareChartOptions(data, maxYAxis): void {
|
||||||
let title: object;
|
let title: object;
|
||||||
if (data.tor_nodes.length === 0) {
|
if (!this.widget && data.tor_nodes.length === 0) {
|
||||||
title = {
|
title = {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'grey',
|
color: 'grey',
|
||||||
fontSize: 15
|
fontSize: 15
|
||||||
},
|
},
|
||||||
text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`,
|
text: $localize`Indexing in progess`,
|
||||||
left: 'center',
|
left: 'center',
|
||||||
top: 'top',
|
top: 'center',
|
||||||
};
|
};
|
||||||
} else if (this.widget) {
|
} else if (data.tor_nodes.length > 0) {
|
||||||
title = {
|
title = {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'grey',
|
color: 'grey',
|
||||||
@ -140,11 +141,11 @@ export class NodesNetworksChartComponent implements OnInit {
|
|||||||
height: this.widget ? 100 : undefined,
|
height: this.widget ? 100 : undefined,
|
||||||
top: this.widget ? 10 : 40,
|
top: this.widget ? 10 : 40,
|
||||||
bottom: this.widget ? 0 : 70,
|
bottom: this.widget ? 0 : 70,
|
||||||
right: (this.isMobile() && this.widget) ? 35 : this.right,
|
right: (isMobile() && this.widget) ? 35 : this.right,
|
||||||
left: (this.isMobile() && this.widget) ? 40 :this.left,
|
left: (isMobile() && this.widget) ? 40 :this.left,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: !this.isMobile() || !this.widget,
|
show: !isMobile() || !this.widget,
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line'
|
type: 'line'
|
||||||
@ -157,7 +158,7 @@ export class NodesNetworksChartComponent implements OnInit {
|
|||||||
align: 'left',
|
align: 'left',
|
||||||
},
|
},
|
||||||
borderColor: '#000',
|
borderColor: '#000',
|
||||||
formatter: (ticks) => {
|
formatter: (ticks): string => {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||||
let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;
|
let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;
|
||||||
@ -180,7 +181,7 @@ export class NodesNetworksChartComponent implements OnInit {
|
|||||||
},
|
},
|
||||||
xAxis: data.tor_nodes.length === 0 ? undefined : {
|
xAxis: data.tor_nodes.length === 0 ? undefined : {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
|
splitNumber: (isMobile() || this.widget) ? 5 : 10,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
hideOverlap: true,
|
hideOverlap: true,
|
||||||
}
|
}
|
||||||
@ -372,7 +373,7 @@ export class NodesNetworksChartComponent implements OnInit {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
onChartInit(ec) {
|
onChartInit(ec): void {
|
||||||
if (this.chartInstance !== undefined) {
|
if (this.chartInstance !== undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -384,11 +385,7 @@ export class NodesNetworksChartComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
isMobile() {
|
onSaveChart(): void {
|
||||||
return (window.innerWidth <= 767.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
onSaveChart() {
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const prevBottom = this.chartOptions.grid.bottom;
|
const prevBottom = this.chartOptions.grid.bottom;
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
|
@ -48,4 +48,10 @@
|
|||||||
<div class="spinner-border text-light"></div>
|
<div class="spinner-border text-light"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="widget && (capacityObservable$ | async) as stats">
|
||||||
|
<div *ngIf="stats.days === 0" class="indexing-message d-flex" i18n="lightning.indexing-in-progress">
|
||||||
|
Indexing in progress
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
@ -131,4 +131,13 @@
|
|||||||
display: block;
|
display: block;
|
||||||
max-width: 80px;
|
max-width: 80px;
|
||||||
margin: 15px auto 3px;
|
margin: 15px auto 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexing-message {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 15px;
|
||||||
|
color: grey;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: calc(50% - 85px);
|
||||||
|
margin-top: -10px;
|
||||||
}
|
}
|
@ -1,7 +1,7 @@
|
|||||||
import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
|
import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
|
||||||
import { EChartsOption, graphic } from 'echarts';
|
import { EChartsOption, graphic } from 'echarts';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { map, startWith, switchMap, tap } from 'rxjs/operators';
|
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
|
||||||
import { SeoService } from 'src/app/services/seo.service';
|
import { SeoService } from 'src/app/services/seo.service';
|
||||||
import { formatNumber } from '@angular/common';
|
import { formatNumber } from '@angular/common';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
@ -10,6 +10,7 @@ import { MiningService } from 'src/app/services/mining.service';
|
|||||||
import { download } from 'src/app/shared/graphs.utils';
|
import { download } from 'src/app/shared/graphs.utils';
|
||||||
import { LightningApiService } from '../lightning-api.service';
|
import { LightningApiService } from '../lightning-api.service';
|
||||||
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
|
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
|
||||||
|
import { isMobile } from 'src/app/shared/common.utils';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-lightning-statistics-chart',
|
selector: 'app-lightning-statistics-chart',
|
||||||
@ -96,12 +97,13 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}),
|
}),
|
||||||
)
|
share(),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
prepareChartOptions(data) {
|
prepareChartOptions(data): void {
|
||||||
let title: object;
|
let title: object;
|
||||||
if (data.channel_count.length === 0) {
|
if (!this.widget && data.channel_count.length === 0) {
|
||||||
title = {
|
title = {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'grey',
|
color: 'grey',
|
||||||
@ -111,7 +113,7 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
left: 'center',
|
left: 'center',
|
||||||
top: 'center'
|
top: 'center'
|
||||||
};
|
};
|
||||||
} else if (this.widget) {
|
} else if (data.channel_count.length > 0) {
|
||||||
title = {
|
title = {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'grey',
|
color: 'grey',
|
||||||
@ -138,11 +140,11 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
height: this.widget ? 100 : undefined,
|
height: this.widget ? 100 : undefined,
|
||||||
top: this.widget ? 10 : 40,
|
top: this.widget ? 10 : 40,
|
||||||
bottom: this.widget ? 0 : 70,
|
bottom: this.widget ? 0 : 70,
|
||||||
right: (this.isMobile() && this.widget) ? 35 : this.right,
|
right: (isMobile() && this.widget) ? 35 : this.right,
|
||||||
left: (this.isMobile() && this.widget) ? 40 :this.left,
|
left: (isMobile() && this.widget) ? 40 :this.left,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: !this.isMobile(),
|
show: !isMobile(),
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line'
|
type: 'line'
|
||||||
@ -155,7 +157,7 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
align: 'left',
|
align: 'left',
|
||||||
},
|
},
|
||||||
borderColor: '#000',
|
borderColor: '#000',
|
||||||
formatter: (ticks) => {
|
formatter: (ticks): string => {
|
||||||
let sizeString = '';
|
let sizeString = '';
|
||||||
let weightString = '';
|
let weightString = '';
|
||||||
|
|
||||||
@ -169,16 +171,18 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
|
|
||||||
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||||
|
|
||||||
let tooltip = `<b style="color: white; margin-left: 18px">${date}</b><br>
|
const tooltip = `
|
||||||
|
<b style="color: white; margin-left: 18px">${date}</b><br>
|
||||||
<span>${sizeString}</span><br>
|
<span>${sizeString}</span><br>
|
||||||
<span>${weightString}</span>`;
|
<span>${weightString}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
return tooltip;
|
return tooltip;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
xAxis: data.channel_count.length === 0 ? undefined : {
|
xAxis: data.channel_count.length === 0 ? undefined : {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
|
splitNumber: (isMobile() || this.widget) ? 5 : 10,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
hideOverlap: true,
|
hideOverlap: true,
|
||||||
}
|
}
|
||||||
@ -315,7 +319,7 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
onChartInit(ec) {
|
onChartInit(ec): void {
|
||||||
if (this.chartInstance !== undefined) {
|
if (this.chartInstance !== undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -327,11 +331,7 @@ export class LightningStatisticsChartComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
isMobile() {
|
onSaveChart(): void {
|
||||||
return (window.innerWidth <= 767.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
onSaveChart() {
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const prevBottom = this.chartOptions.grid.bottom;
|
const prevBottom = this.chartOptions.grid.bottom;
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user