Merge pull request #12952 from ethereum/performance-chartjs

performance: replace recharts charting lib with Chart.js

Author: wackerow

.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)
 

package.json

@@ -34,6 +34,8 @@
     "@emotion/styled": "^11.11.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@socialgouv/matomo-next": "^1.8.0",
+    "chart.js": "^4.4.2",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",
@@ -50,14 +52,14 @@
     "prism-react-renderer": "1.1.0",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-emoji-render": "^2.0.1",
     "react-i18next": "^13.3.1",
     "react-icons": "^4.10.1",
     "react-lite-youtube-embed": "^2.4.0",
     "react-select": "5.8.0",
     "reading-time": "^1.5.0",
-    "recharts": "^2.7.3",
     "remark-gfm": "^3.0.1",
     "yaml-loader": "^0.8.0"
   },

src/components/EnergyConsumptionChart.tsx

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