mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4396 from mempool/mononaut/graph-tooltip-fixes

Browse source 
Fix mempool graph tooltip width & vb precision
This commit is contained in:
softsimon 2023-11-22 12:21:03 +09:00 • committed by GitHub
commit 505532f812
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View file

@ -230,7 +230,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 100; positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 100;
return positions; return positions;
}, },
extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'}; extraCssText: `width: ${(this.template === 'advanced') ? '300px' : '200px'};
background: transparent; background: transparent;
border: none; border: none;
box-shadow: none;`, box-shadow: none;`,
@ -254,7 +254,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue); const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
const { totalValue, totalValueArray } = this.getTotalValues(params); const { totalValue, totalValueArray } = this.getTotalValues(params);
const itemFormatted = []; const itemFormatted = [];
let totalParcial = 0; let sum = 0;
let progressPercentageText = ''; let progressPercentageText = '';
let countItem; let countItem;
let items = this.inverted ? [...params].reverse() : params; let items = this.inverted ? [...params].reverse() : params;
@ -262,7 +262,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
countItem = items.pop(); countItem = items.pop();
} }
items.map((item: any, index: number) => { items.map((item: any, index: number) => {
totalParcial += item.value[1]; sum += item.value[1];
const progressPercentage = (item.value[1] / totalValue) * 100; const progressPercentage = (item.value[1] / totalValue) * 100;
const progressPercentageSum = (totalValueArray[index] / totalValue) * 100; const progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
let activeItemClass = ''; let activeItemClass = '';
@ -279,7 +279,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
<span class="symbol">%</span> <span class="symbol">%</span>
</span> </span>
<span class="total-parcial-vbytes"> <span class="total-parcial-vbytes">
${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)} ${this.vbytesPipe.transform(sum, 2, 'vB', 'MvB', false)}
</span> </span>
<div class="total-percentage-bar"> <div class="total-percentage-bar">
<span class="total-percentage-bar-background"> <span class="total-percentage-bar-background">
@ -303,12 +303,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
</td> </td>
<td class="total-progress-sum"> <td class="total-progress-sum">
<span> <span>
${this.vbytesPipe.transform(item.value[1], 2, 'vB', 'MvB', false)} ${(item.value[1] / 1_000_000).toFixed(2)} <span class="symbol">MvB</span>
</span> </span>
</td> </td>
<td class="total-progress-sum"> <td class="total-progress-sum">
<span> <span>
${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)} ${(totalValueArray[index] / 1_000_000).toFixed(2)} <span class="symbol">MvB</span>
</span> </span>
</td> </td>
<td class="total-progress-sum-bar"> <td class="total-progress-sum-bar">

2
frontend/src/styles.scss
View file

@ -519,7 +519,7 @@ html:lang(ru) .card-title {
.fees-wrapper-tooltip-chart-advanced, .fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-advanced { .tx-wrapper-tooltip-chart-advanced {
background: rgba(#1d1f31, 0.98); background: rgba(#1d1f31, 0.98);
width: 275px; width: 300px;
thead { thead {
th { th {