incomplete stats menu

package.json

@@ -13,6 +13,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.4.9",
     "astro-feather": "^1.0.0",
+    "chart.js": "^4.4.2",
     "tailwindcss": "^3.4.1"
   }
 }

src/components/PlayerStats.astro

@@ -0,0 +1,23 @@
+---
+
+---
+
+<canvas class="player-stats" width="500" height="300"></canvas>
+
+<script>
+    import { Chart } from 'chart.js/auto';
+
+    const data = await (await fetch(
+        'https://globed.dankmeme.dev/public/players?period=hour',
+        {
+            mode: 'no-cors'
+        }
+    )).json();
+    document.querySelectorAll('.player-stats').forEach(canvas => {
+        const chart = new Chart(canvas as HTMLCanvasElement, {
+            type: 'line',
+            data: data,
+        });
+    });
+
+</script>

src/pages/index.astro

@@ -14,6 +14,7 @@ import Title from '../components/Title.astro';
 import Subtitle from '../components/Subtitle.astro';
 import ButtonRow from '../components/ButtonRow.astro';
 import Content from '../components/Content.astro';
+import PlayerStats from '../components/PlayerStats.astro';
 
 const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file => file.default);
 ---
@@ -94,6 +95,8 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
         </div>
     </Content>
 
+    <!-- <PlayerStats/> -->
+
     <Donate />
 
 </Page>