-
-
-
- value.slice(0, 3)}
- />
- }/>
-
-
-
+
+ {payload.map((entry, index: number) => (
+
-
-
+ ))}
+
+ );
+};
+
+export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) {
+ const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
+
+ return (
+ <>
+ {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
+
+ {chartTitle}
+
): null}
+
+
+
+
+
+
+ }/>
+ {chartData && chartData.length > 0 && (
+ Object.keys(chartData[0])
+ .filter(key => key !== "label")
+ .map((key, idx) => (
+
+ ))
+ )}
+ {showLegend &&
+
+
+
)
}
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 5f2ae4715..6db4c3b0a 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -1,37 +1,15 @@
"use client"
import type { CSSProperties } from "react";
import { Bar, CartesianGrid, ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from "recharts";
-import {
- Card,
- CardContent
-} from "./lib/card";
import {
ChartContainer,
type ChartConfig
} from "./lib/chart";
-import React from "react";
+import type { ContentType } from "recharts/types/component/DefaultLegendContent";
// 툴팁 커스텀 css
/** 차트 기본 스타일 */
-const styles = {
- tooltipDiv: {
- borderRadius: "5px",
- backgroundColor: "white",
- padding: "10px",
- boxShadow: "0px 2px 10px rgba(0,0,0,0.2)",
- width: "180px", // 적절한 크기로 설정
- } as React.CSSProperties,
- tooltipLabel: {
- fontWeight: "bold",
- fontSize: "12px",
- marginBottom: "5px",
- borderBottom: "1px solid #ddd",
- paddingBottom: "3px",
- } as React.CSSProperties,
- tooltipText: {
- fontSize: "11px",
- fontWeight:"bold",
- } as React.CSSProperties,
+const customStyles = {
legendContainer: {
display: "flex",
justifyContent: "center",
@@ -42,17 +20,39 @@ const styles = {
} as CSSProperties,
};
+type LineBarChartProps = {
+ chartConfig: ChartConfig | undefined;
+ chartData: any[] | undefined;
+ chartTitle: string;
+ chartClassName?: string;
+ graphSize?: number;
+ yFieldText?: string | undefined;
+ yFieldText2?: string | undefined;
+ showLegend?: boolean;
+}
+
+type LegendEntry = {
+ value: string;
+ color: string;
+ type?: string;
+ payload?: unknown;
+};
+
+type LegendProps = {
+ payload?: LegendEntry[];
+};
+
// 커스텀 툴팁
-const CustomTooltip = ({ active, payload, label }) => {
+const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; label?: string }) => {
if (active && payload && payload.length) {
return (
-
-
{label}
+
+
{label}
{payload.map((item, index) => (
{/* 색상 박스 추가 (범례 색상과 동일) */}
-
{`${item.name}: ${item.value}`}
+
{` ${item.name} : ${item.value}`}
))}
@@ -62,47 +62,83 @@ const CustomTooltip = ({ active, payload, label }) => {
};
// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
-const CustomLegend = (props: any) => {
+const CustomLegend = (props: LegendProps) => {
const { payload } = props;
+ if (!payload) return null;
+
return (
-
- {payload.map((entry, index) => (
-
-
-
{entry.value}
+
+ {payload.map((entry: LegendEntry, index: number) => (
+
))}
);
};
-export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
+export default function LineBarchart({
+ chartConfig,
+ chartData,
+ chartTitle,
+ chartClassName = 'w-full h-full',
+ graphSize = 40,
+ yFieldText,
+ yFieldText2,
+ showLegend = true
+}: LineBarChartProps) {
+ if (!chartData || chartData.length === 0) {
+ return
데이터가 없습니다.
;
+ }
+
+ const barConfig = chartConfig?.barVal;
+ const lineConfig = chartConfig?.lineVal;
+
return (
-
-
- {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+
+ {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
- {props.chartTitle}
-
): null}
-
-
-
-
-
- {/* 왼쪽 Y축: lineVal (정상) */}
-
- {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
-
- } />
-
-
+ {chartTitle}
-
-
- )
+ ) : null}
+
+
+
+
+
+ {/* 왼쪽 Y축: lineVal */}
+ {yFieldText && }
+ {/* 오른쪽 Y축: barVal */}
+ {yFieldText2 && }
+ } />
+ {showLegend && }
+ {/* 바 차트 (오른쪽 Y축 사용) */}
+
+ {/* 라인 차트 (왼쪽 Y축 사용) */}
+
+
+
+
+
-
{label}
+
+
{label}
{payload.map((item, index) => (
{/* 색상 박스 추가 (범례 색상과 동일) */}
-
{`${item.name}: ${item.value}`}
+
{` ${item.name} : ${item.value}`}
))}
@@ -62,60 +60,90 @@ const CustomTooltip = ({ active, payload, label }) => {
};
// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
-const CustomLegend = (props: any) => {
+const CustomLegend = (props: LegendProps) => {
const { payload } = props;
+ if (!payload) return null;
+
return (
-
- {payload.map((entry, index) => (
-
-
-
{entry.value}
+
+ {payload.map((entry: LegendEntry, index: number) => (
+
))}
);
};
-type DataType = {label : string; val:number};
+type DataType = {label: string; val: string};
+
type ChartDataType = {
- chartData1: DataType[];
- chartData2: DataType[];
+ [key: string]: DataType[];
};
-export default function Linechart(props: { chartConfig: ChartConfig; chartData: ChartDataType; chartTitle:string}) {
- const mergedData = Object.values(props.chartData).reduce((acc, dataset) => {
+export default function Linechart({
+ chartConfig,
+ chartData,
+ chartTitle,
+ chartClassName = 'w-full h-full',
+ graphSize = 40,
+ yFieldText,
+ showLegend = true
+}: LineChartProps) {
+ if(!chartData || Object.keys(chartData).length === 0){
+ return
데이터가 없습니다.
+ }
+
+ // 데이터 병합 및 변환
+ const mergedData = Object.entries(chartData).reduce
>((acc, [key, dataset]) => {
dataset.forEach((entry, index) => {
if (!acc[index]) {
- acc[index] = { label: entry.label }; // label 추가
+ acc[index] = { label: entry.label };
}
- const key = Object.keys(props.chartData).find(k => props.chartData[k] === dataset);
- if (key) acc[index][key] = entry.val;
+ acc[index][key] = parseFloat(entry.val);
});
return acc;
- }, [] as any[]);
+ }, []);
return (
-
-
- {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+
+ {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
- {props.chartTitle}
-
): null}
-
-
-
-
-
-
- } />
-
-
+ {chartTitle}
-
-
- )
+ ) : null}
+
+
+
+
+
+
+ } />
+ {showLegend && }
+ {Object.keys(chartData).map((key) => {
+ const config = chartConfig?.[key];
+ return (
+
+ );
+ })}
+
+
+
+