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) => (
-
- ))}
-
- );
-};
-*/
-
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;
}