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}`}
>