Merge branch 'feature/chart-improvements' into develop
This commit is contained in:
commit
031d09c32d
|
@ -7,7 +7,6 @@ import React, {
|
|||
} from "react";
|
||||
import { ethers } from "ethers";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import { ChartData, ChartOptions } from "chart.js";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
|
@ -20,40 +19,12 @@ import {
|
|||
import BlockRow from "./BlockRow";
|
||||
import { ExtendedBlock, readBlock } from "../../useErigonHooks";
|
||||
import { RuntimeContext } from "../../useRuntime";
|
||||
import { options, toChartData } from "./chart";
|
||||
|
||||
const MAX_BLOCK_HISTORY = 20;
|
||||
|
||||
const PREV_BLOCK_COUNT = 15;
|
||||
|
||||
const options: ChartOptions = {
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
callback: function (v) {
|
||||
// @ts-ignore
|
||||
return ethers.utils.commify(this.getLabelForValue(v));
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "Burnt fees",
|
||||
},
|
||||
ticks: {
|
||||
callback: (v) => `${v} Gwei`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
type BlocksProps = {
|
||||
latestBlock: ethers.providers.Block;
|
||||
targetBlockNumber: number;
|
||||
|
@ -100,23 +71,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
|
|||
addBlock(latestBlock.number);
|
||||
}, [addBlock, latestBlock]);
|
||||
|
||||
const data: ChartData = useMemo(() => {
|
||||
return {
|
||||
labels: blocks.map((b) => b.number.toString()).reverse(),
|
||||
datasets: [
|
||||
{
|
||||
label: "Burnt fees (Gwei)",
|
||||
data: blocks
|
||||
.map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
|
||||
.reverse(),
|
||||
fill: true,
|
||||
backgroundColor: "#FDBA74",
|
||||
borderColor: "#F97316",
|
||||
tension: 0.2,
|
||||
},
|
||||
],
|
||||
};
|
||||
}, [blocks]);
|
||||
const data = useMemo(() => toChartData(blocks), [blocks]);
|
||||
|
||||
// On page reload, pre-populate the last N blocks
|
||||
useEffect(
|
||||
|
|
|
@ -0,0 +1,66 @@
|
|||
import { ethers } from "ethers";
|
||||
import { ChartData, ChartOptions } from "chart.js";
|
||||
import { ExtendedBlock } from "../../useErigonHooks";
|
||||
|
||||
export const options: ChartOptions = {
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
callback: function (v) {
|
||||
// @ts-ignore
|
||||
return ethers.utils.commify(this.getLabelForValue(v));
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "Burnt fees",
|
||||
},
|
||||
ticks: {
|
||||
callback: (v) => `${v} Gwei`,
|
||||
},
|
||||
},
|
||||
yBaseFee: {
|
||||
position: "right",
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "Base fee",
|
||||
},
|
||||
grid: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
|
||||
labels: blocks.map((b) => b.number.toString()).reverse(),
|
||||
datasets: [
|
||||
{
|
||||
label: "Burnt fees (Gwei)",
|
||||
data: blocks
|
||||
.map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
|
||||
.reverse(),
|
||||
fill: true,
|
||||
backgroundColor: "#FDBA74",
|
||||
borderColor: "#F97316",
|
||||
tension: 0.2,
|
||||
},
|
||||
{
|
||||
label: "Base fee (Gwei)",
|
||||
data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(),
|
||||
yAxisID: "yBaseFee",
|
||||
borderColor: "#FCA5A5",
|
||||
tension: 0.2
|
||||
}
|
||||
],
|
||||
});
|
Loading…
Reference in New Issue