Merge pull request #13212 from ethereum/fix-charts

Fix charts using chart.js

Author: nhsz

.storybook/i18next.ts

@@ -19,6 +19,7 @@ export const ns = [
   "page-learn",
   "page-upgrades",
   "page-developers-index",
+  "page-what-is-ethereum",
 ] as const
 const supportedLngs = Object.keys(baseLocales)
 

src/components/EnergyConsumptionChart/EnergyConsumptionChart.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import ChartComponent from "."
+
+const meta = {
+  title: "Charts / Energy Consumption Chart",
+  component: ChartComponent,
+} satisfies Meta<typeof ChartComponent>
+
+export default meta
+
+const data = {}
+
+export const Basic: StoryObj<typeof meta> = {
+  args: {
+    data,
+  },
+}

src/components/EnergyConsumptionChart.tsx renamed to src/components/EnergyConsumptionChart/index.tsx

@@ -4,6 +4,7 @@ import {
   CategoryScale,
   Chart as ChartJS,
   ChartData,
+  ChartOptions,
   Legend,
   LinearScale,
 } from "chart.js"
@@ -42,7 +43,7 @@ const EnergyConsumptionChart = () => {
   const isRtl = isLangRightToLeft(locale as Lang)
 
   // chart rawData, according to different breakpoints
-  const rawData = useBreakpointValue({
+  let rawData = useBreakpointValue({
     base: [
       {
         name: t("energy-consumption-chart-global-data-centers-label"),
@@ -156,33 +157,34 @@ const EnergyConsumptionChart = () => {
     ],
   })
 
-  const aspectRatioValue = useBreakpointValue({
-    base: 0.55,
-    sm: 0.75,
-    md: 1.1,
-  })
+  // reverse data if RTL
+  if (isRtl) {
+    rawData = rawData?.reverse()
+  }
 
   // chart options config
   const chartOptions = {
     // chart styles
-    barThickness: 38,
-    borderRadius: 4,
     responsive: true,
-    aspectRatio: aspectRatioValue,
-    maintainAspectRatio: true,
-    hover: { mode: null } as any, // casted to avoid TS issue
-    backgroundColor: rawData?.map((item) => item.color) as any, // casted to avoid TS issue
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 10,
+      },
+    },
+    hover: { mode: undefined },
     plugins: {
       // required plugin to display labels on top
       datalabels: {
         // https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#alignment-and-offset
-        anchor: "end" as any, // position of the labels (start, end, center), casted to avoid TS issue
-        align: "end" as any, // alignment of the labels (start, end, center), casted to avoid TS issue
-        offset: -0.5, // distance (in pixels) to pull the label away from the anchor point
+        anchor: "end", // position of the labels (start, end, center)
+        align: "end", // alignment of the labels (start, end, center)
+        offset: 0, // distance (in pixels) to pull the label away from the anchor point
         font: {
-          size: "14px",
-        } as any, // casted to avoid TS issue,
+          size: 14,
+        },
         color: useColorModeValue("#333333", "#F2F2F2"),
+        textAlign: "center",
       },
       // legend styles
       legend: {
@@ -216,18 +218,20 @@ const EnergyConsumptionChart = () => {
           autoSkip: false, // avoid long labels to be hidden
           padding: 0, // removes default padding betwen x-labels and chart
           maxRotation: 0, // turns off rotation
-          beginAtZero: true,
         },
       },
     },
-  }
+  } satisfies ChartOptions
 
   const chartData = {
     labels: rawData?.map((item) => wrapLabel(item.name)),
     datasets: [
       {
         label: undefined, // don't remove, needs some value provided to render properly
         data: rawData?.map((item) => item.amount) || [],
+        barThickness: 38,
+        borderRadius: 4,
+        backgroundColor: rawData?.map((item) => item.color),
       },
     ],
   } satisfies ChartData
@@ -240,9 +244,9 @@ const EnergyConsumptionChart = () => {
           maxW="500px"
           m="auto"
           w="80vw"
+          h={{ base: "300px", md: "400px" }}
           mb={{ base: 4, md: 0 }}
         >
-          {/* TODO: isRtl ? data?.reverse() : data */}
           {isClient && (
             <Bar options={chartOptions} data={chartData} updateMode="none" />
           )}

src/components/StatsBoxGrid/GridItem.tsx

@@ -7,11 +7,12 @@ import {
   PointElement,
   ScriptableContext,
 } from "chart.js"
+import ChartDataLabels from "chartjs-plugin-datalabels"
 import { Line } from "react-chartjs-2"
 import { MdInfoOutline } from "react-icons/md"
 import { Box, Flex, Icon, Text } from "@chakra-ui/react"
 
-import type { StatsBoxMetric } from "@/lib/types"
+import type { StatsBoxMetric, TimestampedData } from "@/lib/types"
 
 import { RANGES } from "@/lib/constants"
 
@@ -33,7 +34,16 @@ type GridItemProps = {
 }
 
 // ChartJS config
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler)
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  // to avoid a production error, we must include this plugin even if we do
+  // not use it (we are using it on the energy consumption chart)
+  ChartDataLabels
+)
 
 export const GridItem = ({ metric }: GridItemProps) => {
   const { title, description, state, buttonContainer, range } = metric
@@ -69,8 +79,7 @@ export const GridItem = ({ metric }: GridItemProps) => {
   )
 
   // Returns either 90 or 30-day data range depending on `range` selection
-  const filteredData = (data: Array<{ timestamp: number }>) => {
-    if (!data) return
+  const filteredData = (data: TimestampedData<number>[]) => {
     if (range === RANGES[1]) return [...data]
 
     return data.filter(({ timestamp }) => {
@@ -118,6 +127,12 @@ export const GridItem = ({ metric }: GridItemProps) => {
       title: {
         display: false, // hide titles
       },
+      // force disabling chart labels because when the user do an internal
+      // navigation, labels are displayed incorrectly (probably a bug in
+      // chart.js or the react wrapper)
+      datalabels: {
+        display: false,
+      },
     },
     // chart labels config
     scales: {
@@ -138,16 +153,13 @@ export const GridItem = ({ metric }: GridItemProps) => {
     },
   }
 
-  const filteredRange = hasData ? filteredData(state.data) : [] // timestamp values
-  const dataValues = hasData ? state.data.map((item) => item.value) : [] // data values
+  const filteredRange = filteredData(hasData ? state.data : [])
 
   const chartData = {
     labels: filteredRange,
     datasets: [
       {
-        data: hasData
-          ? dataValues.slice(dataValues.length - filteredRange!.length)
-          : [],
+        data: filteredRange.map((item) => item.value),
       },
     ],
   }
@@ -184,7 +196,7 @@ export const GridItem = ({ metric }: GridItemProps) => {
       </Box>
       {hasData && (
         <Box position="absolute" insetInline="0" bottom={7} height="60%">
-          <Line options={chartOptions} data={chartData} updateMode="none" />
+          <Line options={chartOptions} data={chartData} />
         </Box>
       )}
       <Flex