Make all mining charts tooltips uniform
This commit is contained in:
nymkappa
parent
2492bc69ff
commit
da3272df76
@ -169,17 +169,16 @@ export class BlockFeeRatesGraphComponent implements OnInit {
|
||||
if (data.length <= 0) {
|
||||
return '';
|
||||
}
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">
|
||||
${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
|
||||
|
||||
for (const pool of data.reverse()) {
|
||||
tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte<br>`;
|
||||
}
|
||||
|
||||
if (['24h', '3d'].includes(this.timespan)) {
|
||||
tooltip += `<small>At block: ${data[0].data[2]}</small>`;
|
||||
tooltip += `<small>` + $localize`At block: ${data[0].data[2]}` + `</small>`;
|
||||
} else {
|
||||
tooltip += `<small>Around block ${data[0].data[2]}</small>`;
|
||||
tooltip += `<small>` + $localize`Around block: ${data[0].data[2]}` + `</small>`;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
|
||||
@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { formatNumber } from '@angular/common';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { download, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
|
||||
import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
|
||||
import { StorageService } from 'src/app/services/storage.service';
|
||||
import { MiningService } from 'src/app/services/mining.service';
|
||||
|
||||
@ -71,7 +71,7 @@ export class BlockFeesGraphComponent implements OnInit {
|
||||
.pipe(
|
||||
tap((response) => {
|
||||
this.prepareChartOptions({
|
||||
blockFees: response.body.map(val => [val.timestamp * 1000, val.avgFees / 100000000]),
|
||||
blockFees: response.body.map(val => [val.timestamp * 1000, val.avgFees / 100000000, val.avgHeight]),
|
||||
});
|
||||
this.isLoading = false;
|
||||
}),
|
||||
@ -119,12 +119,17 @@ export class BlockFeesGraphComponent implements OnInit {
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: (ticks) => {
|
||||
const tick = ticks[0];
|
||||
const feesString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.3-3')} BTC`;
|
||||
return `
|
||||
<b style="color: white; margin-left: 18px">${tick.axisValueLabel}</b><br>
|
||||
<span>${feesString}</span>
|
||||
`;
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
|
||||
tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.3-3')} BTC`;
|
||||
tooltip += `<br>`;
|
||||
|
||||
if (['24h', '3d'].includes(this.timespan)) {
|
||||
tooltip += `<small>` + $localize`At block: ${ticks[0].data[2]}` + `</small>`;
|
||||
} else {
|
||||
tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
|
||||
@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { formatNumber } from '@angular/common';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { download, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
|
||||
import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
|
||||
import { MiningService } from 'src/app/services/mining.service';
|
||||
import { StorageService } from 'src/app/services/storage.service';
|
||||
|
||||
@ -69,7 +69,7 @@ export class BlockRewardsGraphComponent implements OnInit {
|
||||
.pipe(
|
||||
tap((response) => {
|
||||
this.prepareChartOptions({
|
||||
blockRewards: response.body.map(val => [val.timestamp * 1000, val.avgRewards / 100000000]),
|
||||
blockRewards: response.body.map(val => [val.timestamp * 1000, val.avgRewards / 100000000, val.avgHeight]),
|
||||
});
|
||||
this.isLoading = false;
|
||||
}),
|
||||
@ -117,12 +117,17 @@ export class BlockRewardsGraphComponent implements OnInit {
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: (ticks) => {
|
||||
const tick = ticks[0];
|
||||
const rewardsString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.3-3')} BTC`;
|
||||
return `
|
||||
<b style="color: white; margin-left: 18px">${tick.axisValueLabel}</b><br>
|
||||
<span>${rewardsString}</span>
|
||||
`;
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
|
||||
tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.3-3')} BTC`;
|
||||
tooltip += `<br>`;
|
||||
|
||||
if (['24h', '3d'].includes(this.timespan)) {
|
||||
tooltip += `<small>` + $localize`At block: ${ticks[0].data[2]}` + `</small>`;
|
||||
} else {
|
||||
tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
|
||||
@ -10,7 +10,7 @@ import { StorageService } from 'src/app/services/storage.service';
|
||||
import { MiningService } from 'src/app/services/mining.service';
|
||||
import { StateService } from 'src/app/services/state.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { download } from 'src/app/shared/graphs.utils';
|
||||
import { download, formatterXAxis } from 'src/app/shared/graphs.utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-block-sizes-weights-graph',
|
||||
@ -141,27 +141,21 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: (ticks) => {
|
||||
let sizeString = '';
|
||||
let weightString = '';
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
|
||||
|
||||
for (const tick of ticks) {
|
||||
if (tick.seriesIndex === 0) { // Size
|
||||
sizeString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} MB`;
|
||||
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} MB`;
|
||||
} else if (tick.seriesIndex === 1) { // Weight
|
||||
weightString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} MWU`;
|
||||
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} MWU`;
|
||||
}
|
||||
tooltip += `<br>`;
|
||||
}
|
||||
|
||||
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>
|
||||
<span>${sizeString}</span><br>
|
||||
<span>${weightString}</span>`;
|
||||
|
||||
if (['24h', '3d'].includes(this.timespan)) {
|
||||
tooltip += `<br><small>At block: ${ticks[0].data[2]}</small>`;
|
||||
tooltip += `<small>` + $localize`At block: ${ticks[0].data[2]}` + `</small>`;
|
||||
} else {
|
||||
tooltip += `<br><small>Around block ${ticks[0].data[2]}</small>`;
|
||||
tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
|
||||
@ -207,7 +207,7 @@ export class HashrateChartComponent implements OnInit {
|
||||
const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
|
||||
return `
|
||||
<b style="color: white; margin-left: 18px">${date}</b><br>
|
||||
<b style="color: white; margin-left: 2px">${date}</b><br>
|
||||
<span>${hashrateString}</span><br>
|
||||
<span>${difficultyString}</span>
|
||||
`;
|
||||
|
||||
@ -186,7 +186,7 @@ export class HashrateChartPoolsComponent implements OnInit {
|
||||
borderColor: '#000',
|
||||
formatter: function (data) {
|
||||
const date = new Date(data[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
let tooltip = `<b style="color: white; margin-left: 18px">${date}</b><br>`;
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">${date}</b><br>`;
|
||||
data.sort((a, b) => b.data[1] - a.data[1]);
|
||||
for (const pool of data) {
|
||||
if (pool.data[1] > 0) {
|
||||
|
||||
@ -13,18 +13,16 @@ export const formatterXAxis = (
|
||||
return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
|
||||
case '24h':
|
||||
case '3d':
|
||||
return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
|
||||
case '1w':
|
||||
case '1m':
|
||||
case '3m':
|
||||
case '6m':
|
||||
case '1y':
|
||||
return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
|
||||
return date.toLocaleTimeString(locale, { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' });
|
||||
case '2y':
|
||||
case '3y':
|
||||
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
case 'all':
|
||||
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short' });
|
||||
return date.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user