refactor: Update chart tooltips to use best unit (#575)

* refactor: Update chart tooltips to use best unit * chore: Add changeset * Update .changeset/cool-dingos-visit.md Co-authored-by: elessar.eth <paulo.colombo@pm.me> --------- Co-authored-by: elessar.eth <paulo.colombo@pm.me>
Blobscan · Sep 20, 2024 · 53acaf1 · 53acaf1
1 parent 9b6847f
commit 53acaf1
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 36 deletions.
diff --git a/.changeset/cool-dingos-visit.md b/.changeset/cool-dingos-visit.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Fixed an issue where the chart tooltip displayed zero for very low values. It now shows the most appropriate unit for each value.
diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx
@@ -1,10 +1,11 @@
 import type { FC } from "react";
 import type { EChartOption } from "echarts";
 
+import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units";
+
 import { ChartCard } from "~/components/Cards/ChartCard";
 import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
-import { formatNumber } from "~/utils";
 import { buildTimeSeriesOptions } from "~/utils";
 
 export type DailyAvgBlobFeeChartProps = {
@@ -14,14 +15,14 @@ export type DailyAvgBlobFeeChartProps = {
 
 export const DailyAvgBlobFeeChart: FC<Partial<DailyAvgBlobFeeChartProps>> =
   function ({ days, avgBlobFees }) {
-    const { scaledValues, unit } = useScaledWeiAmounts(avgBlobFees);
+    const { unit } = useScaledWeiAmounts(avgBlobFees);
 
     const options: EChartOption<EChartOption.Series> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
-          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisTooltip: (value) => formatWei(value, findBestUnit(value)),
+          yAxisLabel: (value) => prettyFormatWei(value, unit),
         },
         yUnit: "ethereum",
       }),
@@ -31,7 +32,7 @@ export const DailyAvgBlobFeeChart: FC<Partial<DailyAvgBlobFeeChartProps>> =
       series: [
         {
           name: "Avg. Blob Fees",
-          data: scaledValues,
+          data: avgBlobFees,
           type: "line",
         },
       ],

diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx
@@ -1,10 +1,12 @@
 import type { FC } from "react";
 import type { EChartOption } from "echarts";
 
+import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units";
+
 import { ChartCard } from "~/components/Cards/ChartCard";
 import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
-import { buildTimeSeriesOptions, formatNumber } from "~/utils";
+import { buildTimeSeriesOptions } from "~/utils";
 
 export type DailyAvgBlobGasPriceChartProps = {
   days: DailyBlockStats["days"];
@@ -14,14 +16,14 @@ export type DailyAvgBlobGasPriceChartProps = {
 export const DailyAvgBlobGasPriceChart: FC<
   Partial<DailyAvgBlobGasPriceChartProps>
 > = function ({ days, avgBlobGasPrices }) {
-  const { scaledValues, unit } = useScaledWeiAmounts(avgBlobGasPrices);
+  const { unit } = useScaledWeiAmounts(avgBlobGasPrices);
 
   const options: EChartOption<EChartOption.Series> = {
     ...buildTimeSeriesOptions({
       dates: days,
       axisFormatters: {
-        yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
-        yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
+        yAxisTooltip: (value) => formatWei(value, findBestUnit(value)),
+        yAxisLabel: (value) => prettyFormatWei(value, unit),
       },
       yUnit: "ethereum",
     }),
@@ -31,7 +33,7 @@ export const DailyAvgBlobGasPriceChart: FC<
     series: [
       {
         name: "Avg. Blob Gas Prices",
-        data: scaledValues,
+        data: avgBlobGasPrices,
         type: "line",
       },
     ],

diff --git a/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx
@@ -1,10 +1,11 @@
 import type { FC } from "react";
 import type { EChartOption } from "echarts";
 
+import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units";
+
 import { ChartCard } from "~/components/Cards/ChartCard";
 import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
-import { formatNumber } from "~/utils";
 import { buildTimeSeriesOptions } from "~/utils";
 
 export type DailyBlobFeeChartProps = {
@@ -14,16 +15,15 @@ export type DailyBlobFeeChartProps = {
 
 export const DailyBlobFeeChart: FC<Partial<DailyBlobFeeChartProps>> =
   function ({ days, blobFees }) {
-    const { scaledValues, unit } = useScaledWeiAmounts(
-      blobFees?.map((x) => Number(x))
-    );
+    const data = blobFees?.map((x) => Number(x));
+    const { unit } = useScaledWeiAmounts(data);
 
     const options: EChartOption<EChartOption.SeriesBar> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
-          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisTooltip: (value) => formatWei(value, findBestUnit(value)),
+          yAxisLabel: (value) => prettyFormatWei(value, unit),
         },
         yUnit: "ethereum",
       }),
@@ -33,7 +33,7 @@ export const DailyBlobFeeChart: FC<Partial<DailyBlobFeeChartProps>> =
       series: [
         {
           name: "Blob Fees",
-          data: scaledValues,
+          data: data,
           type: "bar",
         },
       ],

diff --git a/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx
@@ -3,10 +3,12 @@ import * as echarts from "echarts";
 import type { EChartOption } from "echarts";
 import { useTheme } from "next-themes";
 
+import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units";
+
 import { ChartCard } from "~/components/Cards/ChartCard";
 import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
-import { buildTimeSeriesOptions, formatNumber } from "~/utils";
+import { buildTimeSeriesOptions } from "~/utils";
 
 export type DailyBlobGasComparisonChartProps = Partial<{
   days: DailyBlockStats["days"];
@@ -18,16 +20,15 @@ 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 data = blobGasUsed?.map((x) => Number(x));
+    const { unit } = useScaledWeiAmounts(data);
 
     const options: EChartOption<EChartOption.Series> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
-          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisTooltip: (value) => formatWei(value, findBestUnit(value)),
+          yAxisLabel: (value) => prettyFormatWei(value, unit),
         },
       }),
       grid: {
@@ -36,7 +37,7 @@ export const DailyBlobGasComparisonChart: FC<DailyBlobGasComparisonChartProps> =
       series: [
         {
           name: "Blob Gas Used",
-          data: scaledValues,
+          data: data,
           stack: "gas",
           type: "bar",
 

diff --git a/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx
@@ -1,10 +1,12 @@
 import type { FC } from "react";
 import type { EChartOption } from "echarts";
 
+import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units";
+
 import { ChartCard } from "~/components/Cards/ChartCard";
 import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyBlockStats } from "~/types";
-import { buildTimeSeriesOptions, formatNumber } from "~/utils";
+import { buildTimeSeriesOptions } from "~/utils";
 
 export type DailyBlobGasUsedChartProps = Partial<{
   days: DailyBlockStats["days"];
@@ -13,15 +15,14 @@ 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 data = blobGasUsed?.map((x) => Number(x));
+    const { unit } = useScaledWeiAmounts(data);
     const options: EChartOption<EChartOption.SeriesBar> = {
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`,
-          yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`,
+          yAxisTooltip: (value) => formatWei(value, findBestUnit(value)),
+          yAxisLabel: (value) => prettyFormatWei(value, unit),
         },
       }),
       grid: {
@@ -30,7 +31,7 @@ const BaseChart: FC<DailyBlobGasUsedChartProps & { title: string }> =
       series: [
         {
           name: "Blob Gas Used",
-          data: scaledValues,
+          data: data,
           stack: "gas",
           type: "bar",
         },

diff --git a/apps/web/src/components/Charts/Transaction/DailyAvgMaxBlobGasFeeChart.tsx b/apps/web/src/components/Charts/Transaction/DailyAvgMaxBlobGasFeeChart.tsx
@@ -1,10 +1,12 @@
 import type { FC } from "react";
 import type { EChartOption } from "echarts";
 
+import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units";
+
 import { ChartCard } from "~/components/Cards/ChartCard";
 import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts";
 import type { DailyTransactionStats } from "~/types";
-import { buildTimeSeriesOptions, formatNumber } from "~/utils";
+import { buildTimeSeriesOptions } from "~/utils";
 
 export type DailyAvgMaxBlobGasFeeChartProps = {
   days: DailyTransactionStats["days"];
@@ -15,16 +17,16 @@ export type DailyAvgMaxBlobGasFeeChartProps = {
 export const DailyAvgMaxBlobGasFeeChart: FC<
   Partial<DailyAvgMaxBlobGasFeeChartProps>
 > = function ({ days, avgMaxBlobGasFees, compact = false }) {
-  const { scaledValues, unit } = useScaledWeiAmounts(avgMaxBlobGasFees);
+  const { unit } = useScaledWeiAmounts(avgMaxBlobGasFees);
 
   const options: EChartOption<
     EChartOption.SeriesBar | EChartOption.SeriesLine
   > = {
     ...buildTimeSeriesOptions({
       dates: days,
       axisFormatters: {
-        yAxisTooltip: (value) => `${formatNumber(value)} ${unit}`,
-        yAxisLabel: (value) => `${formatNumber(value)} ${unit}`,
+        yAxisTooltip: (value) => formatWei(value, findBestUnit(value)),
+        yAxisLabel: (value) => prettyFormatWei(value, unit),
       },
     }),
     grid: {
@@ -33,7 +35,7 @@ export const DailyAvgMaxBlobGasFeeChart: FC<
     series: [
       {
         name: "Avg. Max Blob Gas Fees",
-        data: scaledValues,
+        data: avgMaxBlobGasFees,
         type: compact ? "line" : "bar",
         smooth: true,
       },

diff --git a/packages/eth-format/index.ts b/packages/eth-format/index.ts
@@ -92,6 +92,9 @@ export function countIntegerDigits(value: string | number | bigint): number {
 export function shiftDecimal(value: EthAmount, decimals: number): string {
   value = value.toString();
 
+  // Convert scientific notation to standard decimal notation
+  value = fullwideFormatter.format(value as Intl.StringNumericLiteral);
+
   const negative = value.startsWith("-");
 
   if (negative) {