diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx index a7319cb01..eee09fb65 100644 --- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx @@ -109,6 +109,35 @@ export default function LineBarchart({ const lineMaxValue = getMaxValue(chartData, 'lineVal'); const barMaxValue = getMaxValue(chartData, 'barVal'); + /** + * 최대값과 구간 수에 따른 범례 만들기 + * maxValue : 최대값, segments : 구간 수 (구간수가 5면 눈금은 6) + */ + const makeNiceScale = (maxValue: number, segments = 5) => { + // 최대값이 이상할 경우 0, 0으로 반환 + if (!isFinite(maxValue) || maxValue <= 0) { + return { max: 0, ticks: [0] }; + } + + const exponent = Math.floor(Math.log10(maxValue)); + const base = Math.pow(10, exponent); + const fraction = maxValue / base; + + let niceFraction: number; + if (fraction <= 1) niceFraction = 1; + else if (fraction <= 2) niceFraction = 3; + else if (fraction <= 5) niceFraction = 5; + else niceFraction = 10; + + const niceMax = niceFraction * base; // round up to 1/2/5 * 10^k + const step = niceMax / segments; + const ticks = Array.from({ length: segments + 1 }, (_, i) => Number((i * step).toFixed(10))); + return { max: niceMax, ticks }; + }; + + const leftScale = makeNiceScale(lineMaxValue, 5); + const rightScale = makeNiceScale(barMaxValue, 5); + const getTicks = (data : any []) => { const monthSet = new Set(); const rtnData : string[] = []; @@ -182,23 +211,26 @@ export default function LineBarchart({ {yFieldText && typeof value === "number" ? value.toLocaleString() : value } + domain={[0, leftScale.max]} + ticks={leftScale.ticks} orientation="left" label={(props) => } + />} {/* 오른쪽 Y축: barVal */} {yFieldText2 && typeof value === "number" ? value.toLocaleString() : value } - label={(props) => } + domain={[0, rightScale.max]} + ticks={rightScale.ticks} + label={(props) => } reversed={true} />} } />