Pie Chart Sample

2025-03-06 13:07:21 +09:00
parent e692c5f5d3
commit d30c02f8c8
1 changed files with 134 additions and 0 deletions
@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Chart as ChartJS,
+  ArcElement, 
+  Tooltip, 
+  Legend,
+  type ChartOptions,
+} from "chart.js";
+import { Pie } from "react-chartjs-2";
+import { fakerKO as faker } from "@faker-js/faker";
+import { getCssVariableValue } from "../../lib/utils";
+
+const meta: Meta<typeof Pie> = {
+  title: "Chart/Pie",
+  component: Pie,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+- [Docs](https://react-chartjs-2.js.org/)
+        `,
+      },
+      source: {
+        code: `
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip, 
+  Legend,
+} from 'chart.js';
+import { Pie } from 'react-chartjs-2';
+import { fakerKO as faker } from "@faker-js/faker";
+
+ChartJS.register(
+  ArcElement,
+  Tooltip, 
+  Legend
+);
+
+const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
+
+
+const data = {
+  labels,
+  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)',
+        'rgba(255, 159, 64, 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)',
+        'rgba(255, 159, 64, 1)',
+      ],
+      borderWidth: 1,
+    },
+  ],
+};
+
+return (
+  <div className="flex h-[20vw] w-[50vw] justify-center">
+    <Pie data={data} />
+  </div>
+);
+        `,
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Pie>;
+
+export const Default: Story = {
+  render: () => {
+    ChartJS.register(
+      ArcElement,
+      Tooltip, 
+      Legend,
+    );
+
+    const labels = [
+      'Red', 
+      'Blue', 
+      'Yellow', 
+      'Green', 
+      'Purple', 
+      'Orange'
+    ];
+
+    const data = {
+      labels,
+      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)',
+            'rgba(255, 159, 64, 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)',
+            'rgba(255, 159, 64, 1)',
+          ],
+          borderWidth: 1,
+        },
+      ],
+    };
+
+    return (
+      <div className="flex h-[20vw] w-[50vw] justify-center">
+        <Pie data={data} />
+      </div>
+    );
+  },
+};