차트property 추가 (setXAxisYearTick - 날짜 x축일경우 (년도-월)별로 만들어주는 속성)

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

@@ -6,6 +6,7 @@ import {
   ChartContainer,
   type ChartConfig
 } from "./lib/chart";
+import { get } from "http";
 
 type LineChartProps = {
   chartConfig: ChartConfig | undefined;
@@ -15,6 +16,7 @@ type LineChartProps = {
   graphSize?: number;
   yFieldText?: string;
   showLegend?: boolean;
+  setXAxisYearTick?: boolean;
 }
 
 /** 차트 기본 스타일 */
@@ -141,7 +143,8 @@ export default function Linechart({
   chartClassName = 'w-full h-full',
   graphSize = 40,
   yFieldText,
-  showLegend = true
+  showLegend = true,
+  setXAxisYearTick = false,
 }: LineChartProps) {
   if (!chartData || Object.keys(chartData).length === 0) {
     return <div>데이터가 없습니다.</div>;
@@ -164,18 +167,24 @@ export default function Linechart({
     return acc;
   }, []);
 
-  // 데이터의 최대값 계산
+  const getTicks = (data : any []) => {
-  const getMaxValue = (data: ChartDataType): number => {
+    const monthSet = new Set<string>();
-    return Math.max(...Object.values(data).flatMap(dataset => 
+    const rtnData : string[] = [];
-      dataset.map(entry => {
+    for(const item of data){
-        const val = parseFloat(entry.val);
+      const month = String(item.label).slice(0,7);
-        return isNaN(val) ? 0 : val;
+      if(!monthSet.has(month)){
-      })
+        monthSet.add(month);
-    ));
+        rtnData.push(item.label);
-  };
+      }
-
+    }
-  const lineMaxValue = getMaxValue(chartData);
+    return rtnData;
-
+  }
+  
+  let monthTicks : string[] = [];
+  if(setXAxisYearTick){
+    monthTicks = getTicks(mergedData);
+  }
+  
   return (
     <div className={chartClassName}>
       {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -192,8 +201,27 @@ export default function Linechart({
             margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
           >
             <CartesianGrid vertical={false} />
-            <XAxis dataKey="label" fontSize="8px" fontWeight="bold" />
+            
-            <YAxis yAxisId="left" className="text-[12px] font-bold" tickFormatter={(value) => value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
+            {setXAxisYearTick ?
+              <XAxis 
+                dataKey="label"
+                fontSize="8px"
+                fontWeight="bold"
+                ticks={monthTicks}
+                tickFormatter={(value) => value.slice(0,7)}
+              /> : 
+              <XAxis 
+                dataKey="label"
+                fontSize="8px"
+                fontWeight="bold"
+              />
+            }
+
+            <YAxis 
+              yAxisId="left" 
+              className="text-[12px] font-bold"
+              orientation="left"
+              label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
             <Tooltip content={<CustomTooltip />} />
             {showLegend && <Legend content={CustomLegend as ContentType}/>}
             {Object.keys(chartData).map((key) => {

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

@@ -56,6 +56,7 @@ type MainChartProps = {
   yFieldText? : string | undefined;
   yFieldText2? : string | undefined;
   showLegend? : boolean;
+  setXAxisYearTick ?: boolean;
 }
 
 function MainChart(props: MainChartProps) {
@@ -65,7 +66,7 @@ function MainChart(props: MainChartProps) {
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
-      <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}/>
+      <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend} setXAxisYearTick={props.setXAxisYearTick}/>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (