diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx index 9f9a4feec..2a2ba2b1c 100644 --- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx @@ -7,6 +7,7 @@ import { } from "./lib/chart"; import type { ContentType } from "recharts/types/component/DefaultLegendContent"; import type { set } from "date-fns"; +import React from "react"; // 툴크 커스텀 css /** 차트 기본 스타일 */ @@ -126,6 +127,37 @@ export default function LineBarchart({ monthTicks = getTicks(chartData); } + const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:string }> = ({ viewBox, fieldText, position }) => { + const { x, y, width, height } = viewBox; // 축 영역 + const padding = 5; // 차트 바깥으로 띄우기 + + if('left' == position) { + return ( + + {fieldText} + + ); + }else{ + return ( + + {fieldText} + + ); + } + } + return (
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? ( @@ -151,18 +183,22 @@ export default function LineBarchart({ yAxisId="left" className="text-[12px] font-bold" tickCount={6} - orientation="left" - domain={[0, Math.ceil(lineMaxValue * 1)]} - label={{ value: yFieldText, angle: -90, position: 'insideLeft', offset: -8 }} + tickFormatter={(value) => + typeof value === "number" ? value.toLocaleString() : value + } + orientation="left" + label={(props) => } />} {/* 오른쪽 Y축: barVal */} {yFieldText2 && + typeof value === "number" ? value.toLocaleString() : value + } + label={(props) => } reversed={true} />} } /> diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx index a76807bae..314a0b240 100644 --- a/packages/common/business_components/src/ui/chart/LineChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineChart.tsx @@ -129,6 +129,37 @@ const CustomLegend = (props: LegendProps) => { ); }; +const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:string }> = ({ viewBox, fieldText, position }) => { + const { x, y, width, height } = viewBox; // 축 영역 + const padding = 5; // 차트 바깥으로 띄우기 + + if('left' == position) { + return ( + + {fieldText} + + ); + }else{ + return ( + + {fieldText} + + ); + } +} + type DataType = {label: string; val: string}; type ChartDataType = { @@ -220,7 +251,10 @@ export default function Linechart({ yAxisId="left" className="text-[12px] font-bold" orientation="left" - label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} /> + tickFormatter={(value) => + typeof value === "number" ? value.toLocaleString() : value + } + label={(props) => }/> } /> {showLegend && } {Object.keys(chartData).map((key) => { diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index dcf7f4aa4..9ffea89bf 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -137,7 +137,7 @@ export function UiTable({ : cellClick ? "cursor-pointer" : "" - } sticky top-20 z-40 bg-secondary !font-bold`} + } sticky top-20 z-40 bg-secondary !font-bold whitespace-pre-line`} style={{ top: `${headerHeight + index * 32 - 4}px` }} onClick={() => handleCellClick(index, head.id)} key={`cell-${head.id}-${index}`} @@ -168,7 +168,7 @@ export function UiTable({ : cellClick ? "cursor-pointer" : "" - } mt-[${boldArray.length * 40}px]`} + } mt-[${boldArray.length * 40}px] whitespace-pre-line`} onClick={() => handleCellClick(index, head.id)} key={`cell-${head.id}-${index}`} >