chart.md 파일 업로드드

packages/common/business_components/chart.md

@@ -0,0 +1,87 @@
+## Chart 모듈
+### 공통 모듈 중 Chart를 다양한 테마로 적용시킬 수 있도록 해주는 모듈
+  1. 차트 모듈 사용법
+
+    1-1) 설정
+
+      (1) tsconfig.json 'path'에 '@common/business_components' 변수를 추가
+```json
+"paths": {
+  "@/*": ["./*"],
+  "@common/components/*": ["../../packages/common/components/src/*"],
+  "@common/components": ["../../packages/common/components/src/index"],
+  // 작성구문문
+  "@common/business_components/*": ["../../packages/common/business_components/src/*"],
+  "@common/business_components": ["../../packages/common/business_components/src/index"]
+}
+```
+      (2) package.json 'dependencies'에 '@common/business_components' 추가
+```json
+"dependencies": {
+  "@common/business_components": "workspace:*",
+  "next": "15.1.7"
+},
+```
+
+    1-2) 호출방법
+
+      (1) 파일에 차트생성에 필요한 form, MainChart, MainConfig 임폴트
+```js
+import type { ChartConfig } from "@common/business_components";
+import {MainChart} from "@common/business_components";
+import {CHART_FORM} from "@common/business_components";
+```
+      (2) ChartForm 지정
+```js
+/**
+ * CHART_FORM.BAR : Bar차트 
+ * CHART_FORM.LINE : Line차트
+ * DN : Daughnut차트
+**/
+const chartForm = CHART_FORM.BAR;
+```
+      (3) chartData 정의
+``` js
+/**
+ * label : 차트항목 / val : 데이터값
+**/
+const chartData = [
+  { label: "January", val: 186},
+  { label: "March", val: 237},
+  { label: "February", val: 305},
+  { label: "April", val: 73},
+  { label: "May", val: 209},
+  { label: "June", val: 214},
+]
+```
+      (4) Chart생성에 필요한 chartConfig 정의
+``` js
+/**
+ * 차트 Config
+ */
+const chartConfig = chartData.reduce((config,>>element) => {
+      label: element.label,
+    config[element.label] = {
+      color : "hsl(var(--chart-1))"
+    };
+    return config;
+  }, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
+```
+&emsp; &emsp; &emsp; (5) Chart 객체 생성
+```html
+return (
+    <div>
+      <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData}></MainChart>
+    </div>
+  );
+```
+&emsp; 
+
+&emsp; 2. 차트 모듈 구조
+
+
+
+
+
+
+