From e0171a5a28f06e2e19d3b80908d16ca67ac343a8 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Wed, 16 Jul 2025 13:30:25 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=B0=94=EC=B0=A8=ED=8A=B8=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EA=B5=AC=EC=84=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/chart/BarChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx index ddd0ac272..218ebac34 100644 --- a/packages/common/business_components/src/ui/chart/BarChart.tsx +++ b/packages/common/business_components/src/ui/chart/BarChart.tsx @@ -87,7 +87,7 @@ const getGlobalMax = (data: Record[]) => { }; export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) { - const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FED16A", "#FFEEAD", "#D4A5A5"]; + const colors = ["#FF6B6B", "#4ECDC4", "#44ad57", "#FED16A", "#FFEEAD", "#D4A5A5"]; const globalMax = getGlobalMax(chartData); const tickCount = 5; // interval을 globalMax / tickCount로 계산 From 8b1e8ae2ebadf69e013cde087e4eba08a36d830a Mon Sep 17 00:00:00 2001 From: jyha00 Date: Wed, 16 Jul 2025 15:33:57 +0900 Subject: [PATCH 2/3] =?UTF-8?q?datepicker=20=EB=82=A0=EC=A7=9C=EA=B0=80=20?= =?UTF-8?q?=ED=95=98=EB=A3=A8=20=EC=A0=84=20=EB=82=A0=EB=A1=9C=20=EB=93=A4?= =?UTF-8?q?=EC=96=B4=EA=B0=80=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/date_picker/index.tsx | 47 +++++++++++++------ 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx index 722b82a3c..2652eabd7 100644 --- a/packages/common/business_components/src/ui/date_picker/index.tsx +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -32,10 +32,27 @@ export function DatePicker({ }: DatePickerProps) { const [open, setOpen] = useState(false); + // const handleSelect = (date: Date | undefined) => { + // console.log("날짜", date) + // if (!readOnly) { + // // readOnly가 아닐 때만 변경 허용 + // field.onChange(date); // React Hook Form 업데이트 + // setOpen(false); + // } + // }; + + //저장시 9시간 전으로 돌아가는 문제 const handleSelect = (date: Date | undefined) => { if (!readOnly) { - // readOnly가 아닐 때만 변경 허용 - field.onChange(date); // React Hook Form 업데이트 + if (date) { + const utcMidnight = new Date( + //utc 삽입 + Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) + ); + field.onChange(utcMidnight); + } else { + field.onChange(undefined); + } setOpen(false); } }; @@ -53,17 +70,17 @@ export function DatePicker({ className={ !selectClass ? cn( - "w-[240px] pl-3 text-left font-normal", - !field?.value && "text-muted-foreground", + "w-[240px] pl-3 text-left font-normal", + !field?.value && "text-muted-foreground", - //감리 지적사항으로 삭제 예정 리드온리는 리드온리 로만 보일수 있도록 수정 - // disabled={readOnly} // readOnly일 때 버튼 비활성화 - //readOnly && "opacity-60 cursor-not-allowed" 감리 지적사항으로 - ) + //감리 지적사항으로 삭제 예정 리드온리는 리드온리 로만 보일수 있도록 수정 + // disabled={readOnly} // readOnly일 때 버튼 비활성화 + //readOnly && "opacity-60 cursor-not-allowed" 감리 지적사항으로 + ) : cn( - selectClass, - // , readOnly && "opacity-60 cursor-not-allowed" - ) + selectClass, + // , readOnly && "opacity-60 cursor-not-allowed" + ) } > {field?.value ? ( @@ -87,10 +104,10 @@ export function DatePicker({ className="w-full" //-- 데이트 피커가 드롭박스 형태로 년월을 선택할수 있도록 하는 Props 로 활성화 되면 드롭박스로 선택 - - // captionLayout="dropdown-buttons" - // fromYear={2000} - // toYear={new Date().getFullYear()} + + // captionLayout="dropdown-buttons" + // fromYear={2000} + // toYear={new Date().getFullYear()} toDate={new Date()} // 금일까지만 표시됨 (금일 이후는 안보임) showOutsideDays={false} // 금월 까지만 표출되도록 mode="single" From 18ec5c937fa39ac83ba25f0bc5a30f58352a4417 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Thu, 17 Jul 2025 13:08:14 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EB=8F=84=EB=84=9B=EC=B0=A8=ED=8A=B8=20cust?= =?UTF-8?q?om=20label=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/chart/DoughnutChart.tsx | 55 ++++++++++++++----- 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx index 3dd14e5b7..6f113bee3 100644 --- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx +++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx @@ -53,12 +53,37 @@ const customStyles = { minHeight: "32px", // 범례 영역 높이 통일 } as CSSProperties, }; +const renderCustomizedLabel = ({ + cx, + cy, + midAngle, + outerRadius, + payload, +}: any) => { + const RADIAN = Math.PI / 180; + const radius = outerRadius + 25; + const x = cx + radius * Math.cos(-midAngle * RADIAN); + const y = cy + radius * Math.sin(-midAngle * RADIAN); + + return ( + cx ? "start" : "end"} + dominantBaseline="central" + > + {`${payload.label}: ${payload.val.toLocaleString()}`} + + ); +}; // 커스텀 툴팁 -const CustomTooltip = ({ active, payload, label }: { - active?: boolean; - payload?: TooltipPayloadItem[]; - label?: string +const CustomTooltip = ({ active, payload, label }: { + active?: boolean; + payload?: TooltipPayloadItem[]; + label?: string }) => { if (active && payload && payload.length) { return ( @@ -79,7 +104,6 @@ const CustomTooltip = ({ active, payload, label }: { const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; - return (
{payload.map((entry: LegendEntry, index: number) => ( @@ -111,9 +135,9 @@ const CustomLegend = (props: LegendProps) => { ); }; -export default function DoughnutChart(props: { - chartConfig: ChartConfig; - chartData: ChartDataItem[] | undefined; +export default function DoughnutChart(props: { + chartConfig: ChartConfig; + chartData: ChartDataItem[] | undefined; chartTitle: string }) { const legendData = props.chartData?.map(item => ({ @@ -125,19 +149,20 @@ export default function DoughnutChart(props: { fill: props.chartConfig?.[item.label]?.color || 'blue' } })) ?? []; - + return ( {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? ( -
+
{props.chartTitle}
) : null}
+ label={(props) => { + return renderCustomizedLabel(props); + }} + > + - +