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로 계산 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); + }} + > + - +
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"