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

New opacity-based age Goggles

Browse Source
This commit is contained in:
Mononaut 2024-04-04 06:56:37 +00:00
parent dcf78fab06
commit 26227e2f3b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.constants.ts
View File

@ -39,8 +39,6 @@ export const mempoolFeeColors = [
'ae005b',
];
export const mempoolAgeColors = [ '28007d', '21017d', '1c027d', '14047d', '0d057d', '06067d', '081186', '09188c', '0b2395', '0c2a9b', '0e37a6', '0f3caa', '1045b2', '114fbb', '1254bf', '155cbf', '1965bf', '1e70be', '2076be', '2581bd', '2889bd', '2d94bc', '309dbc', '34a6bc', '39b1bb', '3cbabb', '37bbb3', '32baa9', '2bb99c', '25b993', '21b88c', '1db785', '19b67e', '14b475', '0eb36c', '08b162', '02b059', '00ae53'];
export const chartColors = [
"#D81B60",
"#8E24AA",

8
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@ -8,7 +8,7 @@ import { Color, Position } from './sprite-types';
import { Price } from '../../services/price.service';
import { StateService } from '../../services/state.service';
import { Subscription } from 'rxjs';
import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors } from './utils';
import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction } from './utils';
import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
import { detectWebGL } from '../../shared/graphs.utils';
@ -561,11 +561,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
return (tx: TxView) => {
if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
return defaultColorFunction(tx, defaultColors[gradient], defaultAuditColors, this.relativeTime || (Date.now() / 1000));
return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
} else {
return defaultColorFunction(
return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
tx,
defaultColors['unmatched' + gradient],
defaultColors.unmatchedfee,
unmatchedAuditColors,
this.relativeTime || (Date.now() / 1000)
);

25
frontend/src/app/components/block-overview-graph/utils.ts
View File

@ -1,4 +1,4 @@
import { feeLevels, mempoolAgeColors, mempoolFeeColors } from '../../app.constants';
import { feeLevels, mempoolFeeColors } from '../../app.constants';
import { Color } from './sprite-types';
import TxView from './tx-view';
@ -52,12 +52,6 @@ const defaultColors: { [key: string]: ColorPalette } = {
marginal: [],
baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
},
age: {
base: mempoolAgeColors.map(hexToColor),
audit: [],
marginal: [],
baseLevel: (tx: TxView, rate: number, relativeTime: number) => (!tx.time ? 0 : Math.max(0, Math.round(1.25 * Math.log2((Math.max(1, relativeTime - tx.time))))))
},
}
for (const key in defaultColors) {
const base = defaultColors[key].base;
@ -131,4 +125,21 @@ export function defaultColorFunction(
return levelColor;
}
}
}
export function ageColorFunction(
tx: TxView,
colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
auditColors: { [status: string]: Color } = defaultAuditColors,
relativeTime?: number,
): Color {
const color = defaultColorFunction(tx, colors, auditColors, relativeTime);
const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
return {
r: color.r,
g: color.g,
b: color.b,
a: color.a * (1 - ageLevel)
};
}