diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 79aa61c98..ec0647dff 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -19,6 +19,14 @@ const customStyles = {
} as CSSProperties,
};
+const fncNumberFormet = (value : string | number) => {
+ return String(value).includes('.')?
+ String(parseFloat(value.toString().replace(/,/g, ''))).split('.').map((part, index) =>
+ index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+ ).join('.')
+ : String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
type BarChartProps = {
chartConfig: ChartConfig | undefined;
chartData: any[] | undefined;
@@ -51,7 +59,7 @@ const CustomTooltip = ({
{/* 색상 박스 추가 (범례 색상과 동일) */}
-
{` ${item.name} : ${item.value}`}
+
{` ${item.name} : ${fncNumberFormet(item.value)}`}
))}
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index d81d6e2c8..9f9a4feec 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/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 데이터가 없습니다.
;
@@ -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();
+ 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 (
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -121,7 +142,10 @@ export default function LineBarchart({
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
-
+ {setXAxisYearTick?
+ value.slice(0,7)} fontSize="8px" fontWeight="bold"/> :
+
+ }
{/* 왼쪽 Y축: lineVal */}
{yFieldText && 데이터가 없습니다.
;
@@ -164,18 +166,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 +200,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..3a87e3978 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 (
@@ -73,7 +74,7 @@ function MainChart(props: MainChartProps) {
);
} else if (props.chartForm == CHART_FORM.LINEBAR){
return (
-
+
);
} else if (props.chartForm == CHART_FORM.LINEBAR2){
return (
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}`}
>