Merge remote-tracking branch 'origin/dev' into style/tag-theme-close-button-hover

Author: TylerAPfledderer

.all-contributorsrc

@@ -12204,6 +12204,15 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "Khemmie-Ray",
+      "name": "Atoyebi Oluwakemi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/89976006?v=4",
+      "profile": "https://github.com/Khemmie-Ray",
+      "contributions": [
+        "maintenance"
+      ]
     }
   ],
   "contributorsPerLine": 7,

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

README.md

@@ -1867,6 +1867,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/cd-sigma"><img src="https://avatars.githubusercontent.com/u/119534349?v=4?s=100" width="100px;" alt="ciphernova"/><br /><sub><b>ciphernova</b></sub></a><br /><a href="#content-cd-sigma" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/CodeMongerrr"><img src="https://avatars.githubusercontent.com/u/99281767?v=4?s=100" width="100px;" alt="Aditya Joshi"/><br /><sub><b>Aditya Joshi</b></sub></a><br /><a href="#ideas-CodeMongerrr" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Khemmie-Ray"><img src="https://avatars.githubusercontent.com/u/89976006?v=4?s=100" width="100px;" alt="Atoyebi Oluwakemi"/><br /><sub><b>Atoyebi Oluwakemi</b></sub></a><br /><a href="#maintenance-Khemmie-Ray" title="Maintenance">🚧</a></td>
+    </tr>
   </tbody>
 </table>
 

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,
+  },
+}