diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 6db4c3b0a..17deacd73 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -7,7 +7,7 @@ import {
} from "./lib/chart";
import type { ContentType } from "recharts/types/component/DefaultLegendContent";
-// 툴팁 커스텀 css
+// 툴크 커스텀 css
/** 차트 기본 스타일 */
const customStyles = {
legendContainer: {
@@ -52,7 +52,7 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?:
{/* 색상 박스 추가 (범례 색상과 동일) */}
-
{` ${item.name} : ${item.value}`}
+
{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}
))}
@@ -95,6 +95,18 @@ export default function LineBarchart({
const barConfig = chartConfig?.barVal;
const lineConfig = chartConfig?.lineVal;
+ // 데이터의 최대값 계산
+ const getMaxValue = (data: any[], keyPrefix: string) => {
+ return Math.max(...data.map(item =>
+ Object.keys(item)
+ .filter(key => key.includes(keyPrefix))
+ .map(key => item[key])
+ ).flat());
+ };
+
+ const lineMaxValue = getMaxValue(chartData, 'lineVal');
+ const barMaxValue = getMaxValue(chartData, 'barVal');
+
return (
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -113,29 +125,62 @@ export default function LineBarchart({
{/* 왼쪽 Y축: lineVal */}
- {yFieldText && }
+ {yFieldText && }
{/* 오른쪽 Y축: barVal */}
- {yFieldText2 && }
+ {yFieldText2 && }
} />
{showLegend && }
{/* 바 차트 (오른쪽 Y축 사용) */}
-
+ {Object.keys(chartData[0]).map((key, index) => {
+ const config = chartConfig?.[key];
+ if(key.includes("barVal")) {
+ return (
+
+ );
+ }
+ return null;
+ })}
{/* 라인 차트 (왼쪽 Y축 사용) */}
-
+ {Object.keys(chartData[0]).map((key, index) => {
+ const config = chartConfig?.[key];
+ if(key.includes("lineVal")) {
+ return (
+
+ );
+ }
+ return null;
+ })}
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index b2a147ee0..a689af8ca 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -91,10 +91,16 @@ export default function Linechart({
yFieldText,
showLegend = true
}: LineChartProps) {
- if(!chartData || Object.keys(chartData).length === 0){
- return 데이터가 없습니다.
+ if (!chartData || Object.keys(chartData).length === 0) {
+ return 데이터가 없습니다.
;
}
+ // 모든 데이터셋이 비어있는지 확인
+ const hasNoData = Object.values(chartData).every(dataset => !dataset || dataset.length === 0);
+ if (hasNoData) {
+ return 데이터가 없습니다.
;
+ }
+
// 데이터 병합 및 변환
const mergedData = Object.entries(chartData).reduce>((acc, [key, dataset]) => {
dataset.forEach((entry, index) => {
@@ -106,6 +112,17 @@ export default function Linechart({
return acc;
}, []);
+ // 데이터의 최대값 계산
+ const getMaxValue = (data: ChartDataType, keyPrefix: string) => {
+ return Math.max(...Object.values(data).map(item =>
+ Object.keys(item)
+ .filter(key => key.includes(keyPrefix))
+ .map(key => item[key] as unknown as number)
+ ).flat());
+ };
+
+ const lineMaxValue = getMaxValue(chartData, 'lineVal');
+
return (
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -122,8 +139,8 @@ export default function Linechart({
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
-
-
+
+
} />
{showLegend && }
{Object.keys(chartData).map((key) => {