Experiment/barchart widget

package.json

@@ -51,6 +51,7 @@
     "@spotlightjs/spotlight": "^1.2.16",
     "@stefanprobst/rehype-extract-toc": "^2.2.0",
     "@t3-oss/env-nextjs": "^0.9.2",
+    "chart.js": "^4.4.2",
     "gray-matter": "^4.0.3",
     "langchain": "^0.1.31",
     "next": "^14.1.4",
@@ -59,8 +60,10 @@
     "pino": "^8.19.0",
     "pino-pretty": "^11.0.0",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
+    "react-jsx-parser": "^1.29.0",
     "rehype-slug": "^6.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",

src/_components/Widgets/BarChart.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+export function BarChart({ data, options }) {
+  return <Bar data={data} options={options} />;
+}
+
+export default BarChart;

src/_components/Widgets/BarChart.stories.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { BarChart } from './BarChart';
+
+export default {
+  title: 'Widgets/BarChart',
+  component: BarChart,
+};
+
+const defaultData = {
+  labels: ['January', 'February', 'March', 'April', 'May'],
+  datasets: [
+    {
+      label: '# of Votes',
+      data: [12, 19, 3, 5, 2, 3],
+      backgroundColor: [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(255, 206, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+      ],
+      borderColor: [
+        'rgba(255, 99, 132, 1)',
+        'rgba(54, 162, 235, 1)',
+        'rgba(255, 206, 86, 1)',
+        'rgba(75, 192, 192, 1)',
+        'rgba(153, 102, 255, 1)',
+      ],
+      borderWidth: 1,
+    },
+  ],
+};
+
+const defaultOptions = {
+  scales: {
+    y: {
+      beginAtZero: true,
+    },
+  },
+  plugins: {
+    legend: {
+      position: 'top',
+    },
+    title: {
+      display: true,
+      text: 'Monthly Votes',
+    },
+  },
+};
+
+const Template = (args) => <BarChart {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  data: defaultData,
+  options: defaultOptions,
+};
+
+export const CustomData = Template.bind({});
+CustomData.args = {
+  data: {
+    ...defaultData,
+    datasets: [
+      {
+        ...defaultData.datasets[0],
+        data: [20, 15, 60, 20, 30], // Custom data points
+        backgroundColor: 'rgba(100, 99, 255, 0.2)', // Custom color
+      },
+    ],
+  },
+  options: defaultOptions,
+};

src/_components/Widgets/DoughnutChart.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Doughnut } from 'react-chartjs-2';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+export function DoughnutChart({ data, options }) {
+  return <Doughnut data={data} options={options} />;
+}
+
+export default DoughnutChart;

src/_components/Widgets/DoughnutChart.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { DoughnutChart } from './DoughnutChart';
+
+export default {
+  title: 'Widgets/DoughnutChart',
+  component: DoughnutChart,
+};
+
+const defaultData = {
+  labels: ['Red', 'Blue', 'Yellow'],
+  datasets: [
+    {
+      label: 'My First Dataset',
+      data: [300, 50, 100],
+      backgroundColor: [
+        'rgb(255, 99, 132)',
+        'rgb(54, 162, 235)',
+        'rgb(255, 205, 86)',
+      ],
+      hoverOffset: 4,
+    },
+  ],
+};
+
+const defaultOptions = {
+  radius: '75%',
+};
+
+const Template = (args) => <DoughnutChart {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  data: defaultData,
+  options: defaultOptions,
+};
+
+export const CustomData = Template.bind({});
+CustomData.args = {
+  data: {
+    ...defaultData,
+    datasets: [
+      {
+        ...defaultData.datasets[0],
+        data: [300, 50, 100],
+        backgroundColor: [
+          'rgb(255, 99, 132)',
+          'rgb(54, 162, 235)',
+          'rgb(255, 205, 86)',
+        ],
+      },
+    ],
+  },
+  options: defaultOptions,
+};