feat: Improvements in stats page (#562)

Blobscan · Sep 16, 2024 · aa7be76 · aa7be76
1 parent 79b4f58
commit aa7be76
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 17 deletions.
diff --git a/apps/web/src/components/Charts/Blob/DailyBlobSizeChart.tsx b/apps/web/src/components/Charts/Blob/DailyBlobSizeChart.tsx
@@ -27,6 +27,9 @@ export const DailyBlobSizeChart: FC<Partial<DailyBlobsSizeProps>> = function ({
       },
       yUnit: "bytes",
     }),
+    grid: {
+      containLabel: true,
+    },
     series: [
       {
         name: "Blob Size",

diff --git a/apps/web/src/components/Charts/Blob/DailyBlobsChart.tsx b/apps/web/src/components/Charts/Blob/DailyBlobsChart.tsx
@@ -20,10 +20,12 @@ export const DailyBlobsChart: FC<Partial<DailyBlobsChartProps>> = function ({
     ...buildTimeSeriesOptions({
       dates: days,
       axisFormatters: {
-        yAxisTooltip: formatNumber,
+        yAxisTooltip: (value) => formatNumber(value, "compact"),
       },
     }),
-
+    grid: {
+      containLabel: true,
+    },
     series: [
       {
         name: "Total Blobs",

diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx
@@ -16,12 +16,12 @@ export const DailyAvgBlobFeeChart: FC<Partial<DailyAvgBlobFeeChartProps>> =
   function ({ days, avgBlobFees }) {
     const { scaledValues, unit } = useScaledWeiAmounts(avgBlobFees);
 
-    const options: EChartOption<EChartOption.SeriesBar> = {
+    const options: EChartOption<EChartOption.Series> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value)} ${unit}`,
-          yAxisLabel: (value) => `${formatNumber(value)} ${unit}`,
+          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
         },
         yUnit: "ethereum",
       }),
@@ -32,7 +32,7 @@ export const DailyAvgBlobFeeChart: FC<Partial<DailyAvgBlobFeeChartProps>> =
         {
           name: "Avg. Blob Fees",
           data: scaledValues,
-          type: "bar",
+          type: "line",
         },
       ],
       animationEasing: "cubicOut",

diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx
@@ -16,12 +16,12 @@ export const DailyAvgBlobGasPriceChart: FC<
 > = function ({ days, avgBlobGasPrices }) {
   const { scaledValues, unit } = useScaledWeiAmounts(avgBlobGasPrices);
 
-  const options: EChartOption<EChartOption.SeriesBar> = {
+  const options: EChartOption<EChartOption.Series> = {
     ...buildTimeSeriesOptions({
       dates: days,
       axisFormatters: {
-        yAxisTooltip: (value) => `${formatNumber(value)} ${unit}`,
-        yAxisLabel: (value) => `${formatNumber(value)} ${unit}`,
+        yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
+        yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
       },
       yUnit: "ethereum",
     }),
@@ -32,7 +32,7 @@ export const DailyAvgBlobGasPriceChart: FC<
       {
         name: "Avg. Blob Gas Prices",
         data: scaledValues,
-        type: "bar",
+        type: "line",
       },
     ],
     animationEasing: "cubicOut",

diff --git a/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx
@@ -22,8 +22,8 @@ export const DailyBlobFeeChart: FC<Partial<DailyBlobFeeChartProps>> =
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value)} ${unit}`,
-          yAxisLabel: (value) => `${formatNumber(value)} ${unit}`,
+          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
         },
         yUnit: "ethereum",
       }),

diff --git a/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx
@@ -4,6 +4,7 @@ import type { EChartOption } from "echarts";
 import { useTheme } from "next-themes";
 
 import { ChartCard } from "~/components/Cards/ChartCard";
+import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
 import { buildTimeSeriesOptions, formatNumber } from "~/utils";
 
@@ -17,17 +18,25 @@ export type DailyBlobGasComparisonChartProps = Partial<{
 export const DailyBlobGasComparisonChart: FC<DailyBlobGasComparisonChartProps> =
   function ({ blobAsCalldataGasUsed, blobGasUsed, days, opts = {} }) {
     const { resolvedTheme } = useTheme();
+    const { scaledValues, unit } = useScaledWeiAmounts(
+      blobGasUsed ? blobGasUsed.map((x) => Number(x)) : []
+    );
+
     const options: EChartOption<EChartOption.Series> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => formatNumber(value, "compact"),
+          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
         },
       }),
+      grid: {
+        containLabel: true,
+      },
       series: [
         {
           name: "Blob Gas Used",
-          data: blobGasUsed,
+          data: scaledValues,
           stack: "gas",
           type: "bar",
 

diff --git a/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx
@@ -2,6 +2,7 @@ import type { FC } from "react";
 import type { EChartOption } from "echarts";
 
 import { ChartCard } from "~/components/Cards/ChartCard";
+import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
 import { buildTimeSeriesOptions, formatNumber } from "~/utils";
 
@@ -12,17 +13,24 @@ export type DailyBlobGasUsedChartProps = Partial<{
 
 const BaseChart: FC<DailyBlobGasUsedChartProps & { title: string }> =
   function ({ days, blobGasUsed, title }) {
+    const { scaledValues, unit } = useScaledWeiAmounts(
+      blobGasUsed ? blobGasUsed.map((x) => Number(x)) : []
+    );
     const options: EChartOption<EChartOption.SeriesBar> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => formatNumber(value),
+          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
         },
       }),
+      grid: {
+        containLabel: true,
+      },
       series: [
         {
           name: "Blob Gas Used",
-          data: blobGasUsed,
+          data: scaledValues,
           stack: "gas",
           type: "bar",
         },

diff --git a/apps/web/src/components/Charts/Block/DailyBlocksChart.tsx b/apps/web/src/components/Charts/Block/DailyBlocksChart.tsx
@@ -18,9 +18,12 @@ export const DailyBlocksChart: FC<Partial<DailyBlocksChartProps>> = function ({
     ...buildTimeSeriesOptions({
       dates: days,
       axisFormatters: {
-        yAxisTooltip: (value) => formatNumber(value),
+        yAxisTooltip: (value) => formatNumber(value, "compact"),
       },
     }),
+    grid: {
+      containLabel: true,
+    },
     series: [
       {
         name: "Total Blocks",