adding monkeytype

frontend/storybook/stories/ChartJs.stories.tsx

@@ -0,0 +1,120 @@
+import preview from "#.storybook/preview";
+
+import { ChartJs } from "../../src/ts/components/common/ChartJs";
+
+const meta = preview.meta({
+  title: "Common/ChartJs",
+  component: ChartJs as any,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+});
+
+export const BarChart = meta.story({
+  args: {
+    type: "bar",
+    data: {
+      labels: ["10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
+      datasets: [
+        {
+          label: "Users",
+          data: [12, 45, 78, 120, 250, 180, 95, 42, 18, 5],
+          minBarLength: 2,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: true, title: { display: true, text: "WPM" } },
+        y: {
+          beginAtZero: true,
+          display: true,
+          title: { display: true, text: "Users" },
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "300px", width: "600px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+});
+
+export const LineChart = meta.story({
+  args: {
+    type: "line",
+    data: {
+      labels: Array.from({ length: 30 }, (_, i) => `${i + 1}`),
+      datasets: [
+        {
+          label: "WPM",
+          data: [
+            65, 68, 72, 70, 75, 78, 80, 82, 79, 85, 88, 90, 87, 92, 95, 93, 98,
+            100, 97, 102, 105, 103, 108, 110, 107, 112, 115, 113, 118, 120,
+          ],
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: true, title: { display: true, text: "Test #" } },
+        y: { display: true, title: { display: true, text: "WPM" } },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "300px", width: "600px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+});
+
+export const ScatterChart = meta.story({
+  args: {
+    type: "scatter",
+    data: {
+      datasets: [
+        {
+          label: "Results",
+          data: [
+            { x: 90, y: 95 },
+            { x: 85, y: 92 },
+            { x: 100, y: 98 },
+            { x: 75, y: 88 },
+            { x: 110, y: 97 },
+            { x: 95, y: 94 },
+            { x: 80, y: 90 },
+            { x: 105, y: 96 },
+            { x: 70, y: 85 },
+            { x: 115, y: 99 },
+          ],
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: true, title: { display: true, text: "WPM" } },
+        y: { display: true, title: { display: true, text: "Accuracy %" } },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "300px", width: "600px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+});