diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx index 23570912d..63851cbea 100644 --- a/packages/common/business_components/src/ui/chart/LineChart.tsx +++ b/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
데이터가 없습니다.
; @@ -164,18 +167,24 @@ export default function Linechart({ return acc; }, []); - // 데이터의 최대값 계산 - const getMaxValue = (data: ChartDataType): number => { - return Math.max(...Object.values(data).flatMap(dataset => - dataset.map(entry => { - const val = parseFloat(entry.val); - return isNaN(val) ? 0 : val; - }) - )); - }; - - const lineMaxValue = getMaxValue(chartData); - + const getTicks = (data : any []) => { + const monthSet = new Set(); + 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(mergedData); + } + return (
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? ( @@ -192,8 +201,27 @@ export default function Linechart({ margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > - - value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} /> + + {setXAxisYearTick ? + value.slice(0,7)} + /> : + + } + + } /> {showLegend && } {Object.keys(chartData).map((key) => { diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx index ee308e378..a6e1ff245 100644 --- a/packages/common/business_components/src/ui/chart/index.tsx +++ b/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 ( - + ); } else if( props.chartForm == CHART_FORM.DN ){ return (