차트 레이아웃 수정(크기 및 여백)

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

@@ -14,14 +14,15 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
   return (
-    <Card>
+    <Card className="h-full">
+      <CardContent className="h-full">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-        <CardContent>
-            <ChartContainer config={props.chartConfig}>
-                <BarChart accessibilityLayer data={props.chartData}>
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full">
+              <BarChart accessibilityLayer data={props.chartData} className="h-full">
                   <CartesianGrid vertical={false} />
                   <XAxis
                     dataKey="label"
@@ -34,6 +35,7 @@ export default function Chart(props: { chartConfig: ChartConfig; chartData: any[
                   <Bar dataKey="val" radius={10} />
               </BarChart>
           </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )

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

@@ -12,7 +12,6 @@ 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; chartData: never[] | undefined; chartTitle:string}) =>{

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

@@ -77,14 +77,15 @@ const CustomLegend = (props: any) => {
 
 export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
   return (
-    <Card>
-      <CardContent>
+    <Card className="h-full">
+      <CardContent className="h-full">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-        <ChartContainer config={props.chartConfig}>
-          <ComposedChart data={props.chartData}>
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full" >
+            <ComposedChart data={props.chartData} className="h-full ">
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="label" />
               {/* 왼쪽 Y축: lineVal (정상) */}
@@ -99,6 +100,7 @@ export default function LineBarchart(props: { chartConfig: ChartConfig; chartDat
               <Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
             </ComposedChart>
           </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )

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

@@ -14,21 +14,15 @@ import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
 export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
   return (
-    <Card>
+    <Card className="h-full">
+      <CardContent className="h-full">
       {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-      <CardContent>
-        <ChartContainer config={props.chartConfig}>
-          <LineChart
-            accessibilityLayer
-            data={props.chartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full">
+            <LineChart data={props.chartData} className="h-full">
               <CartesianGrid vertical={false} />
               <XAxis
                 dataKey="month"
@@ -49,6 +43,7 @@ export default function Linechart(props: { chartConfig: ChartConfig; chartData:
               />
             </LineChart>
           </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )

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

@@ -21,31 +21,23 @@ const CHART_FORM = {
 function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
   if( props.chartForm == CHART_FORM.BAR ){
     return (
-      <div>
       <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
       </BarChart>
-      </div>
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
-      <div>
       <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
       </LineChart>
-      </div>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (
-      <div>
       <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
       </DoughnutChart>
-      </div>
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
-      <div className='w-100'>
       <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
       </LineBarchart>
-      </div>
     );
   }
 }