From e692c5f5d31d445377347cbbaf3059ab1ed58d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EC=A7=80=EC=B2=A0?= <jcchoi@onasys.co.kr>
Date: Thu, 6 Mar 2025 13:07:07 +0900
Subject: [PATCH] Line Chart Sample

---
 .../src/ui/line-chart/chart.stories.tsx       | 160 ++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 packages/common/components/src/ui/line-chart/chart.stories.tsx

diff --git a/packages/common/components/src/ui/line-chart/chart.stories.tsx b/packages/common/components/src/ui/line-chart/chart.stories.tsx
new file mode 100644
index 000000000..e704b35e7
--- /dev/null
+++ b/packages/common/components/src/ui/line-chart/chart.stories.tsx
@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+import { fakerKO as faker } from "@faker-js/faker";
+import { getCssVariableValue } from "../../lib/utils";
+
+const meta: Meta<typeof Line> = {
+  title: "Chart/Line",
+  component: Line,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+- [Docs](https://react-chartjs-2.js.org/)
+        `,
+      },
+      source: {
+        code: `
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { fakerKO as faker } from "@faker-js/faker";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+
+const options: ChartOptions<"bar"> = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Line Chart',
+    },
+  },
+};
+
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+
+const data = {
+  labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, 0.5)',
+    },
+    {
+      label: 'Dataset 2',
+      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
+      borderColor: 'rgb(53, 162, 235)',
+      backgroundColor: 'rgba(53, 162, 235, 0.5)',
+    },
+  ],
+};
+
+return (
+  <div className="flex h-[20vw] w-[50vw] justify-center">
+    <Line options={options} data={data} />
+  </div>
+);
+        `,
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Line>;
+
+export const Default: Story = {
+  render: () => {
+    ChartJS.register(
+      CategoryScale,
+      LinearScale,
+      PointElement,
+      LineElement,
+      Title,
+      Tooltip,
+      Legend
+    );
+
+    const options: ChartOptions<"line"> = {
+      responsive: true,
+      plugins: {
+        legend: {
+          display: false,
+        },
+        title: {
+          display: true,
+          text: "Chart.js Line Chart",
+        },
+      },
+    };
+
+    const labels = [
+      'January', 
+      'February', 
+      'March', 
+      'April', 
+      'May', 
+      'June', 
+      'July'
+    ];
+
+    const data = {
+      labels,
+      datasets: [
+        {
+          label: 'Dataset 1',
+          data: labels.map(() => faker.number.int({ min: -1000, max: 1000 })),
+          borderColor: 'rgb(255, 99, 132)',
+          backgroundColor: 'rgba(255, 99, 132, 0.5)',
+        },
+        {
+          label: 'Dataset 2',
+          data: labels.map(() => faker.number.int({ min: -1000, max: 1000 })),
+          borderColor: 'rgb(53, 162, 235)',
+          backgroundColor: 'rgba(53, 162, 235, 0.5)',
+        },
+      ],
+    };
+
+    return (
+      <div className="flex h-[20vw] w-[50vw] justify-center">
+        <Line options={options} data={data} />
+      </div>
+    );
+  },
+};