93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import BarChart from './BarChart';
|
|
import DoubleBarChart from './DoubleBar';
|
|
import DoughnutChart from './DoughnutChart';
|
|
import LineBarchart from './LineBarChart';
|
|
import LineBarchart2 from './LineBarChart2';
|
|
import LineChart from './LineChart';
|
|
|
|
/**차트 FORM */
|
|
const CHART_FORM = {
|
|
/**바 차트 형태*/
|
|
BAR : 'bar',
|
|
/**라인 차트 형태*/
|
|
LINE:'line',
|
|
/**도넛 차트 형태*/
|
|
DN :'daughnut',
|
|
/**LINE,BAR차트 */
|
|
LINEBAR : 'linebar',
|
|
/**LINE,BAR차트 */
|
|
LINEBAR2 : 'linebar2',
|
|
/**더블바 차트 형태*/
|
|
DOUBLEBAR : 'doublebar'
|
|
};
|
|
|
|
/**
|
|
* 차트 컴포넌트
|
|
* @param chartForm 차트 형태
|
|
* @param chartConfig 차트 설정
|
|
* @param chartData 차트 데이터
|
|
* @param chartTitle 차트 제목
|
|
* @param chartClassName 차트 클래스명
|
|
* @param graphSize 차트 크기
|
|
* @param yFieldText 차트 Y축 텍스트
|
|
* @param yFieldText2 차트 Y축 텍스트2(라인바 차트때 사용)
|
|
* @param showLegend 차트 범례 표시 여부
|
|
* @returns
|
|
*/
|
|
|
|
// 각 차트에서 사용하는 ChartConfig 타입 정의
|
|
type ChartConfigItem = {
|
|
label: string;
|
|
fill?: string;
|
|
color?: string;
|
|
};
|
|
|
|
type ChartConfig = {
|
|
[key: string]: ChartConfigItem;
|
|
};
|
|
|
|
type MainChartProps = {
|
|
chartForm: string;
|
|
chartConfig: ChartConfig;
|
|
chartData: any;
|
|
chartTitle: string;
|
|
chartClassName?: string;
|
|
graphSize?: number;
|
|
yFieldText? : string | undefined;
|
|
yFieldText2? : string | undefined;
|
|
showLegend? : boolean;
|
|
}
|
|
|
|
function MainChart(props: MainChartProps) {
|
|
if( props.chartForm == CHART_FORM.BAR ){
|
|
return (
|
|
<BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}/>
|
|
);
|
|
} else if( props.chartForm == CHART_FORM.LINE ){
|
|
return (
|
|
<LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}/>
|
|
);
|
|
} else if( props.chartForm == CHART_FORM.DN ){
|
|
return (
|
|
<DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}/>
|
|
);
|
|
} else if (props.chartForm == CHART_FORM.LINEBAR){
|
|
return (
|
|
<LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} yFieldText2={props.yFieldText2} showLegend={props.showLegend}/>
|
|
);
|
|
} else if (props.chartForm == CHART_FORM.LINEBAR2){
|
|
return (
|
|
<LineBarchart2 chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} yFieldText2={props.yFieldText2} showLegend={props.showLegend}/>
|
|
);
|
|
} else if (props.chartForm == CHART_FORM.DOUBLEBAR){
|
|
return (
|
|
<DoubleBarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export { MainChart };
|
|
export type { ChartConfig };
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
export { CHART_FORM };
|