diff --git a/packages/common/business_components/chart.md b/packages/common/business_components/chart.md new file mode 100644 index 000000000..ceacc3a69 --- /dev/null +++ b/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) satisfies ChartConfig; +``` +      (5) Chart 객체 생성 +```html +return ( +
+ +
+ ); +``` +  + +  2. 차트 모듈 구조 + + + + + + +