Merge branch 'iipbs/common/main' into iipbs/fo/dev

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

@@ -6,6 +6,7 @@ import {
   type ChartConfig
 } from "./lib/chart";
 import type { ContentType } from "recharts/types/component/DefaultLegendContent";
+import type { set } from "date-fns";
 
 // 툴크 커스텀 css
 /** 차트 기본 스타일 */
@@ -29,6 +30,7 @@ type LineBarChartProps = {
   yFieldText?: string | undefined;
   yFieldText2?: string | undefined;
   showLegend?: boolean;
+  setXAxisYearTick?: boolean;
 }
 
 type LegendEntry = {
@@ -86,7 +88,8 @@ export default function LineBarchart({
   graphSize = 40,
   yFieldText,
   yFieldText2,
-  showLegend = true
+  showLegend = true,
+  setXAxisYearTick = false
 }: LineBarChartProps) {
   if (!chartData || chartData.length === 0) {
     return <div>데이터가 없습니다.</div>;
@@ -105,6 +108,24 @@ export default function LineBarchart({
   const lineMaxValue = getMaxValue(chartData, 'lineVal');
   const barMaxValue = getMaxValue(chartData, 'barVal');
 
+  const getTicks = (data : any []) => {
+    const monthSet = new Set<string>();
+    const rtnData : string[] = [];
+    for(const item of data){
+      const month = String(item.label).slice(0,7);
+      if(!monthSet.has(month)){
+        monthSet.add(month);
+        rtnData.push(item.label);
+      }
+    }
+    return rtnData;
+  }
+  
+  let monthTicks : string[] = [];
+  if(setXAxisYearTick){
+    monthTicks = getTicks(chartData);
+  }
+
   return (
     <div className={chartClassName}>
       {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -121,7 +142,10 @@ export default function LineBarchart({
             margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
           >
             <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
+            {setXAxisYearTick?
+              <XAxis dataKey="label" ticks={monthTicks} tickFormatter={(value) => value.slice(0,7)} fontSize="8px" fontWeight="bold"/> :
+              <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
+            }
             {/* 왼쪽 Y축: lineVal */}
             {yFieldText && <YAxis 
               yAxisId="left" 

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

@@ -74,7 +74,7 @@ function MainChart(props: MainChartProps) {
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
-      <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} yFieldText2={props.yFieldText2} showLegend={props.showLegend}/>
+      <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} yFieldText2={props.yFieldText2} showLegend={props.showLegend} setXAxisYearTick={props.setXAxisYearTick}/>
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR2){
     return (