도넛차트 custom label 추가

packages/common/business_components/src/ui/chart/DoughnutChart.tsx

@@ -53,12 +53,37 @@ const customStyles = {
     minHeight: "32px",             // 범례 영역 높이 통일
   } as CSSProperties,
 };
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  outerRadius,
+  payload,
+}: any) => {
+  const RADIAN = Math.PI / 180;
+  const radius = outerRadius + 25;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="#333"
+      fontSize={11}
+      textAnchor={x > cx ? "start" : "end"}
+      dominantBaseline="central"
+    >
+      {`${payload.label}: ${payload.val.toLocaleString()}`}
+    </text>
+  );
+};
 
 // 커스텀 툴팁
-const CustomTooltip = ({ active, payload, label }: { 
-  active?: boolean; 
-  payload?: TooltipPayloadItem[]; 
-  label?: string 
+const CustomTooltip = ({ active, payload, label }: {
+  active?: boolean;
+  payload?: TooltipPayloadItem[];
+  label?: string
 }) => {
   if (active && payload && payload.length) {
     return (
@@ -79,7 +104,6 @@ const CustomTooltip = ({ active, payload, label }: {
 const CustomLegend = (props: LegendProps) => {
   const { payload } = props;
   if (!payload) return null;
-
   return (
     <div style={customStyles.legendContainer}>
       {payload.map((entry: LegendEntry, index: number) => (
@@ -111,9 +135,9 @@ const CustomLegend = (props: LegendProps) => {
   );
 };
 
-export default function DoughnutChart(props: { 
-  chartConfig: ChartConfig; 
-  chartData: ChartDataItem[] | undefined; 
+export default function DoughnutChart(props: {
+  chartConfig: ChartConfig;
+  chartData: ChartDataItem[] | undefined;
   chartTitle: string
 }) {
   const legendData = props.chartData?.map(item => ({
@@ -125,19 +149,20 @@ export default function DoughnutChart(props: {
       fill: props.chartConfig?.[item.label]?.color || 'blue'
     }
   })) ?? [];
-  
+
   return (
     <Card className="flex flex-col">
       <CardContent className="flex-1 pb-0">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
-          <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+          <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop: "13px", marginBottom: "10px" }}>
             {props.chartTitle}
           </div>
         ) : null}
         <div className="h-[calc(100%-42px)] justify-center">
           <ChartContainer
             config={props.chartConfig}
-            className="mx-auto aspect-square max-h-[300px]"
+            // className="mx-auto aspect-square max-h-[300px]"
+            className="min-h-[300px] w-full"
           >
             <PieChart>
               <ChartTooltip
@@ -152,10 +177,14 @@ export default function DoughnutChart(props: {
                 dataKey="val"
                 nameKey="label"
                 innerRadius={60}
-              />
+                label={(props) => {
+                  return renderCustomizedLabel(props);
+                }}
+              >
+              </Pie>
             </PieChart>
           </ChartContainer>
-            <CustomLegend payload={legendData} />
+          <CustomLegend payload={legendData} />
         </div>
       </CardContent>
     </Card>