diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx index 99395267a..3dd14e5b7 100644 --- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx +++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx @@ -6,22 +6,13 @@ import { Card, CardContent } from "./lib/card"; -import { ChartContainer, ChartTooltip } from "./lib/chart"; +import { ChartContainer, ChartTooltip, type ChartConfig } from "./lib/chart"; type ChartDataItem = { label: string; val: number; }; -type ChartConfigItem = { - label: string; - fill: string; -}; - -type ChartConfig = { - [key: string]: ChartConfigItem; -}; - type TooltipPayloadItem = { name: string; value: number; @@ -47,20 +38,6 @@ type LegendProps = { payload?: LegendEntry[]; }; -/** 차트 기본 스타일 */ -/* -const customStyles = { - legendContainer: { - display: "flex", - justifyContent: "center", - gap: "20px", - fontSize: "9px", - fontWeight: "bold", - marginTop: "10px", - } as CSSProperties, -}; -*/ - /** 차트 기본 스타일 (라인차트와 동일하게) */ const customStyles = { legendContainer: { @@ -99,25 +76,6 @@ const CustomTooltip = ({ active, payload, label }: { return null; }; -// 커스텀 범례 -/* -const CustomLegend = (props: LegendProps) => { - const { payload } = props; - if (!payload) return null; - - return ( -
- {payload.map((entry: LegendEntry, index: number) => ( -
-
- {entry.value} -
- ))} -
- ); -}; -*/ - const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; @@ -154,14 +112,20 @@ const CustomLegend = (props: LegendProps) => { }; export default function DoughnutChart(props: { - chartConfig: any; + chartConfig: ChartConfig; chartData: ChartDataItem[] | undefined; chartTitle: string }) { const legendData = props.chartData?.map(item => ({ value: item.label, - fill: props.chartConfig?.[item.label]?.fill || 'blue', + fill: props.chartConfig?.[item.label]?.color || 'blue', + payload: { + label: item.label, + val: item.val, + fill: props.chartConfig?.[item.label]?.color || 'blue' + } })) ?? []; + return ( @@ -183,7 +147,7 @@ export default function DoughnutChart(props: { ({ ...item, - fill: props.chartConfig[item.label]?.fill || 'blue' + fill: props.chartConfig[item.label]?.color || 'blue' }))} dataKey="val" nameKey="label" diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx index 8c7202104..64a7d5bce 100644 --- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx @@ -128,7 +128,7 @@ export default function LineBarchart({ tickCount={6} orientation="left" domain={[0, Math.ceil(lineMaxValue * 1)]} - label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} + label={{ value: yFieldText, angle: -90, position: 'insideLeft', offset: -8 }} />} {/* 오른쪽 Y축: barVal */} {yFieldText2 && , 'dir'> { defaultValue?: string; tabList: TabItem[]; - children: React.ReactNode; + children?: React.ReactNode; onValueChange?: (value: string) => void; }