diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 98d759f09..82499306c 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -12,25 +12,31 @@ import {
} from "./lib/chart";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
-export default function Chart(props: { chartStyle: CSSProperties | undefined; chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
return (
-
-
-
-
-
-
+
+ {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+
+ {props.chartTitle}
+
): null}
+
+
+
+
+ value.slice(0, 3)}
- />
- }/>
-
-
-
-
+ />
+ }/>
+
+
+
+
+
)
}
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 8caa35e47..f88b35476 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -12,31 +12,35 @@ import {
ChartTooltipContent,
type ChartConfig
} from "./lib/chart";
-import type { CSSProperties } from "react";
// eslint-disable-next-line react-refresh/only-export-components
-export default (props: { chartConfig: ChartConfig; chartStyle: CSSProperties | undefined; chartData: never[] | undefined; }) =>{
+export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
return (
-
-
- }
- />
-
-
-
+ {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+
+ {props.chartTitle}
+
): null}
+
)
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
new file mode 100644
index 000000000..5f2ae4715
--- /dev/null
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -0,0 +1,108 @@
+"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";
+
+// 툴팁 커스텀 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,
+ legendContainer: {
+ display: "flex",
+ justifyContent: "center",
+ gap: "20px",
+ fontSize: "9px",
+ fontWeight : "bold",
+ marginTop: "10px",
+ } as CSSProperties,
+};
+
+// 커스텀 툴팁
+const CustomTooltip = ({ active, payload, label }) => {
+ if (active && payload && payload.length) {
+ return (
+
+
{label}
+ {payload.map((item, index) => (
+
+ {/* 색상 박스 추가 (범례 색상과 동일) */}
+
+
{`${item.name}: ${item.value}`}
+
+ ))}
+
+ {payload.map((entry, index) => (
+
+ ))}
+
+ {props.chartTitle}
+
): null}
+
+
+
+
+
+ {/* 왼쪽 Y축: lineVal (정상) */}
+
+ {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
+
+ } />
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 7cddf66d1..e68459bf0 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -10,41 +10,92 @@ import {
ChartTooltipContent,
type ChartConfig
} from "./lib/chart";
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
-export default function Linechart(props: { chartStyle: CSSProperties | undefined; chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+/** 차트 기본 스타일 */
+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,
+ legendContainer: {
+ display: "flex",
+ justifyContent: "center",
+ gap: "20px",
+ fontSize: "9px",
+ fontWeight : "bold",
+ marginTop: "10px",
+ } as CSSProperties,
+};
+
+// 커스텀 툴팁
+const CustomTooltip = ({ active, payload, label }) => {
+ if (active && payload && payload.length) {
+ return (
+
+
{label}
+ {payload.map((item, index) => (
+
+ {/* 색상 박스 추가 (범례 색상과 동일) */}
+
+
{`${item.name}: ${item.value}`}
+
+ ))}
+
+ {payload.map((entry, index) => (
+
+ ))}
+
+ {props.chartTitle}
+
): null}
+
+
+
+
+
+
+ } />
+
+
+
)
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index d57b6e1ec..fc5747f3a 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -1,17 +1,10 @@
-import React from 'react'
+import React from 'react';
import BarChart from './BarChart';
-import LineChart from './LineChart';
import DoughnutChart from './DoughnutChart';
-import {type ChartConfig } from './lib/chart';
-
-/** 차트 기본 스타일 */
-const styles = {
- divHeight : {
- height: '400px',
- width : '500px'
- } as React.CSSProperties
-}
+import { type ChartConfig } from './lib/chart';
+import LineChart from './LineChart';
+import LineBarchart from './LineBarChart';
/**차트 FORM */
const CHART_FORM = {
@@ -20,35 +13,36 @@ const CHART_FORM = {
/**라인 차트 형태*/
LINE:'line',
/**도넛 차트 형태*/
- DN :'daughnut'
+ DN :'daughnut',
+ /**LINE,BAR차트 */
+ LINEBAR : 'linebar'
};
-function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; }) {
+function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
if( props.chartForm == CHART_FORM.BAR ){
return (
-
-
-
-
+
+
);
} else if( props.chartForm == CHART_FORM.LINE ){
return (
-
-
-
-
+
+
);
} else if( props.chartForm == CHART_FORM.DN ){
return (
-
-
-
-
+
+
+ );
+ } else if (props.chartForm == CHART_FORM.LINEBAR){
+ return (
+
+
);
}
}
-export {MainChart};
+export { MainChart };
// eslint-disable-next-line react-refresh/only-export-components
-export {CHART_FORM};
-export type {ChartConfig};
\ No newline at end of file
+ export { CHART_FORM };
+ export type { ChartConfig };
diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx
index 37dbcb096..16aa2c075 100644
--- a/packages/common/business_components/src/ui/date_picker/index.tsx
+++ b/packages/common/business_components/src/ui/date_picker/index.tsx
@@ -10,26 +10,28 @@ import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@comm
import { cn } from "../../lib/utils";
import { FormControl } from "../form";
-type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } };
+type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } ,selectClass:string|undefined };
-export function DatePicker({ field }: DatePickerProps) {
+export function DatePicker({ field, selectClass }: DatePickerProps) {
return (