Gas used/target chart; chart ui improvements

src/special/london/Blocks.tsx

@@ -19,7 +19,12 @@ import {
 import BlockRow from "./BlockRow";
 import { ExtendedBlock, readBlock } from "../../useErigonHooks";
 import { RuntimeContext } from "../../useRuntime";
-import { options, toChartData } from "./chart";
+import {
+  burntFeesChartOptions,
+  burntFeesChartData,
+  gasChartOptions,
+  gasChartData,
+} from "./chart";
 
 const MAX_BLOCK_HISTORY = 20;
 
@@ -34,6 +39,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
   const { provider } = useContext(RuntimeContext);
   const [blocks, setBlocks] = useState<ExtendedBlock[]>([]);
   const [now, setNow] = useState<number>(Date.now());
+  const [toggleChart, setToggleChart] = useState<boolean>(false);
 
   const addBlock = useCallback(
     async (blockNumber: number) => {
@@ -71,7 +77,11 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
     addBlock(latestBlock.number);
   }, [addBlock, latestBlock]);
 
-  const data = useMemo(() => toChartData(blocks), [blocks]);
+  const data = useMemo(
+    () => (toggleChart ? gasChartData(blocks) : burntFeesChartData(blocks)),
+    [toggleChart, blocks]
+  );
+  const chartOptions = toggleChart ? gasChartOptions : burntFeesChartOptions;
 
   // On page reload, pre-populate the last N blocks
   useEffect(
@@ -85,6 +95,8 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
           await addBlock(i);
         }
       };
+
+      setBlocks([]);
       addPreviousBlocks();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,7 +116,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
           </span>
         </div>
         <div>
-          <Line data={data} height={100} options={options} />
+          <Line data={data} height={100} options={chartOptions} />
         </div>
         <div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
           <div className="flex space-x-1 items-baseline">

src/special/london/chart.ts

@@ -2,7 +2,7 @@ import { ethers } from "ethers";
 import { ChartData, ChartOptions } from "chart.js";
 import { ExtendedBlock } from "../../useErigonHooks";
 
-export const options: ChartOptions = {
+export const burntFeesChartOptions: ChartOptions = {
   animation: false,
   plugins: {
     legend: {
@@ -35,14 +35,17 @@ export const options: ChartOptions = {
         display: true,
         text: "Base fee",
       },
+      ticks: {
+        callback: (v) => `${v} wei`,
+      },
       grid: {
-        drawOnChartArea: false
-      }
+        drawOnChartArea: false,
+      },
     },
   },
 };
 
-export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
+export const burntFeesChartData = (blocks: ExtendedBlock[]): ChartData => ({
   labels: blocks.map((b) => b.number.toString()).reverse(),
   datasets: [
     {
@@ -56,11 +59,106 @@ export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
       tension: 0.2,
     },
     {
-      label: "Base fee (Gwei)",
-      data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(),
+      label: "Base fee (wei)",
+      data: blocks.map((b) => b.baseFeePerGas!.toNumber()).reverse(),
       yAxisID: "yBaseFee",
       borderColor: "#38BDF8",
-      tension: 0.2
-    }
+      tension: 0.2,
+    },
+  ],
+});
+
+export const gasChartOptions: ChartOptions = {
+  animation: false,
+  interaction: {
+    mode: "index",
+    intersect: 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: "Gas",
+      },
+      ticks: {
+        callback: (v) => `${v} Gwei`,
+      },
+    },
+    yBaseFee: {
+      position: "right",
+      beginAtZero: true,
+      title: {
+        display: true,
+        text: "Base fee",
+      },
+      ticks: {
+        callback: (v) => `${v} wei`,
+      },
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+  },
+};
+
+export const gasChartData = (blocks: ExtendedBlock[]): ChartData => ({
+  labels: blocks.map((b) => b.number.toString()).reverse(),
+  datasets: [
+    {
+      label: "Gas used",
+      data: blocks.map((b) => b.gasUsed.toNumber()).reverse(),
+      fill: true,
+      segment: {
+        backgroundColor: (ctx, x) =>
+          ctx.p1.parsed.y >
+          Math.round(blocks[ctx.p1DataIndex].gasLimit.toNumber() / 2)
+            ? "#22C55E70"
+            : "#EF444470",
+        borderColor: (ctx) =>
+          ctx.p1.parsed.y >
+          Math.round(blocks[ctx.p1DataIndex].gasLimit.toNumber() / 2)
+            ? "#22C55E"
+            : "#EF4444",
+      },
+      tension: 0.2,
+    },
+    {
+      label: "Gas target",
+      data: blocks.map((b) => Math.round(b.gasLimit.toNumber() / 2)).reverse(),
+      borderColor: "#FCA5A5",
+      borderDash: [5, 5],
+      borderWidth: 2,
+      tension: 0.2,
+      pointStyle: "dash",
+    },
+    {
+      label: "Gas limit",
+      data: blocks.map((b) => b.gasLimit.toNumber()).reverse(),
+      borderColor: "#B91C1C",
+      tension: 0.2,
+      pointStyle: "crossRot",
+      radius: 5,
+    },
+    {
+      label: "Base fee (wei)",
+      data: blocks.map((b) => b.baseFeePerGas!.toNumber()).reverse(),
+      yAxisID: "yBaseFee",
+      borderColor: "#38BDF8",
+      tension: 0.2,
+    },
   ],
 });