mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-25 15:10:12 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5222 from mempool/mononaut/partition-pool-pie

Browse source 
Show more detail in acceleration pools pie chart
This commit is contained in:
softsimon 2024-06-27 16:37:28 +09:00 • committed by GitHub
commit f1572f0038
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 50 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
View file

@ -55,3 +55,10 @@
padding-left: 0;
}
}
::ng-deep .chart {
overflow: visible;
& > div, & > div > svg {
overflow: visible !important;
}
}

82
frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
View file

@ -4,6 +4,17 @@ import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.inte
import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
import { MiningStats } from '../../../services/mining.service';
function lighten(color, p): { r, g, b } {
return {
r: color.r + ((255 - color.r) * p),
g: color.g + ((255 - color.g) * p),
b: color.b + ((255 - color.b) * p),
};
}
function toRGB({r,g,b}): string {
return `rgb(${r},${g},${b})`;
}
@Component({
selector: 'app-active-acceleration-box',
@ -43,57 +54,33 @@ export class ActiveAccelerationBox implements OnChanges {
pools[pool.poolUniqueId] = pool;
}
const getDataItem = (value, color, tooltip) => ({
const getDataItem = (value, color, tooltip, emphasis) => ({
value,
name: tooltip,
itemStyle: {
color,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
},
avoidLabelOverlap: false,
label: {
show: false,
},
labelLine: {
show: false
},
emphasis: {
disabled: true,
},
tooltip: {
show: true,
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: 'var(--tooltip-grey)',
},
borderColor: '#000',
formatter: () => {
return tooltip;
}
}
});
let totalAcceleratedHashrate = 0;
for (const poolId of poolList || []) {
const acceleratingPools = (poolList || []).filter(id => pools[id]).sort((a,b) => pools[a].lastEstimatedHashrate - pools[b].lastEstimatedHashrate);
const totalAcceleratedHashrate = acceleratingPools.reduce((total, pool) => total + pools[pool].lastEstimatedHashrate, 0);
acceleratingPools.forEach((poolId, index) => {
const pool = pools[poolId];
if (!pool) {
continue;
}
totalAcceleratedHashrate += pool.lastEstimatedHashrate;
}
const poolShare = ((pool.lastEstimatedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1);
data.push(getDataItem(
pool.lastEstimatedHashrate,
toRGB(lighten({ r: 147, g: 57, b: 244 }, index * .08)),
`<b style="color: white">${pool.name} (${poolShare}%)</b>`,
true,
) as PieSeriesOption);
})
this.acceleratedByPercentage = ((totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1) + '%';
data.push(getDataItem(
totalAcceleratedHashrate,
'var(--mainnet-alt)',
`${this.acceleratedByPercentage} accelerating`,
) as PieSeriesOption);
const notAcceleratedByPercentage = ((1 - (totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate)) * 100).toFixed(1) + '%';
data.push(getDataItem(
(this.miningStats.lastEstimatedHashrate - totalAcceleratedHashrate),
'rgba(127, 127, 127, 0.3)',
`${notAcceleratedByPercentage} not accelerating`,
`not accelerating (${notAcceleratedByPercentage})`,
false,
) as PieSeriesOption);
return data;
@ -111,11 +98,28 @@ export class ActiveAccelerationBox implements OnChanges {
tooltip: {
show: true,
trigger: 'item',
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: 'var(--tooltip-grey)',
},
borderColor: '#000',
formatter: (item) => {
return item.name;
}
},
series: [
{
type: 'pie',
radius: '100%',
label: {
show: false
},
labelLine: {
show: false
},
animationDuration: 0,
data: this.getChartData(pools),
}
]