diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 39dee3d9e..99395267a 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -48,6 +48,7 @@ type LegendProps = {
};
/** 차트 기본 스타일 */
+/*
const customStyles = {
legendContainer: {
display: "flex",
@@ -58,6 +59,23 @@ const customStyles = {
marginTop: "10px",
} as CSSProperties,
};
+*/
+
+/** 차트 기본 스타일 (라인차트와 동일하게) */
+const customStyles = {
+ legendContainer: {
+ display: "flex",
+ flexWrap: "wrap", // 여러 줄로 자동 줄바꿈
+ justifyContent: "center",
+ alignItems: "center",
+ gap: "12px", // 아이템 간 간격
+ fontSize: "13px",
+ fontWeight: "normal",
+ marginTop: "16px",
+ marginBottom: "8px",
+ minHeight: "32px", // 범례 영역 높이 통일
+ } as CSSProperties,
+};
// 커스텀 툴팁
const CustomTooltip = ({ active, payload, label }: {
@@ -82,6 +100,7 @@ const CustomTooltip = ({ active, payload, label }: {
};
// 커스텀 범례
+/*
const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
@@ -97,12 +116,52 @@ const CustomLegend = (props: LegendProps) => {
);
};
+*/
+
+const CustomLegend = (props: LegendProps) => {
+ const { payload } = props;
+ if (!payload) return null;
+
+ return (
+
+ {payload.map((entry: LegendEntry, index: number) => (
+
+
+
+ {entry.payload?.label || entry.value}
+
+
+ ))}
+
+ );
+};
export default function DoughnutChart(props: {
chartConfig: any;
chartData: ChartDataItem[] | undefined;
chartTitle: string
}) {
+ const legendData = props.chartData?.map(item => ({
+ value: item.label,
+ fill: props.chartConfig?.[item.label]?.fill || 'blue',
+ })) ?? [];
return (
@@ -130,9 +189,9 @@ export default function DoughnutChart(props: {
nameKey="label"
innerRadius={60}
/>
-
+
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 74d17f784..23570912d 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -18,6 +18,7 @@ type LineChartProps = {
}
/** 차트 기본 스타일 */
+/*
const customStyles = {
legendContainer: {
display: "flex",
@@ -28,6 +29,23 @@ const customStyles = {
marginTop: "10px",
} as CSSProperties,
};
+*/
+
+/** 차트 기본 스타일 */
+const customStyles = {
+ legendContainer: {
+ display: "flex",
+ flexWrap: "wrap",
+ justifyContent: "center",
+ alignItems: "center",
+ gap: "12px",
+ fontSize: "13px",
+ fontWeight: "normal",
+ marginTop: "16px",
+ marginBottom: "8px",
+ minHeight: "32px",
+ } as CSSProperties,
+};
type LegendEntry = {
value: string;
@@ -60,7 +78,7 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?:
};
// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
-const CustomLegend = (props: LegendProps) => {
+/*const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
@@ -74,6 +92,40 @@ const CustomLegend = (props: LegendProps) => {
))}
);
+};*/
+
+// 커스텀 범례 (도넛차트와 동일하게)
+const CustomLegend = (props: LegendProps) => {
+ const { payload } = props;
+ if (!payload) return null;
+
+ return (
+
+ {payload.map((entry: LegendEntry, index: number) => (
+
+ ))}
+
+ );
};
type DataType = {label: string; val: string};
@@ -141,7 +193,7 @@ export default function Linechart({
>
-
+ value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
} />
{showLegend && }
{Object.keys(chartData).map((key) => {