[st] feat: IMR 검증 이력 이상치 데이터 차트 수정

This commit is contained in:
2026-03-20 17:29:36 +09:00
parent ca7002f3bb
commit c3b5c5d0cd
3 changed files with 26 additions and 32 deletions
@@ -99,7 +99,7 @@ const ImrVerificationHistory = () => {
// Area A Pagination
const [historyPagination, setHistoryPagination] = useState({
pageIndex: 0,
pageSize: 10,
pageSize: 5,
});
// Codes for Filter
@@ -178,20 +178,21 @@ const ImrVerificationHistory = () => {
...item,
statsNm: selectedHistory?.vrfcTrgtNm ?? "-",
}));
setGridRowData(mapped as unknown as Record<string, string | number>[]);
setGridRowData(mapped as Record<string, string | number>[]);
}, [detailData, selectedHistory]);
// Area C Data Fetching
const { data: chartData, isLoading: isChartLoading } = useQuery({
queryKey: [
"imr-log",
ENDPOINT.STATVERIFY_SERVICE.IMR,
selectedHistory?.anlsSn,
selectedDetail?.vrfcTrgtSn,
selectedDetail?.admdstCd,
],
queryFn: () =>
imrApi.getOutliersLog({
anlsSn: selectedHistory!.anlsSn,
jobUuid: selectedHistory!.jobUuid,
anlsSn: selectedDetail!.anlsSn,
vrfcTrgtSn: selectedDetail!.vrfcTrgtSn,
admdstCd: selectedDetail!.admdstCd,
}),
@@ -244,9 +245,7 @@ const ImrVerificationHistory = () => {
},
title: {
display: true,
text: selectedDetail
? `${selectedDetail.fcltNm} - I-MR 분석 차트`
: "I-MR 분석 차트",
text: "I-MR 잔차 관리도",
font: {
size: 16,
weight: "bold",
@@ -435,7 +434,7 @@ const ImrVerificationHistory = () => {
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
{/* 영역 B: 상세 데이터 그리드 */}
<div className="card card-border bg-white p-6">
<div className="card card-border bg-white p-4">
<div className="flex items-center justify-between">
<h2 className="pl-2 text-[1.6rem] font-bold text-title">
이상치 데이터
@@ -457,7 +456,7 @@ const ImrVerificationHistory = () => {
다운로드
</Button>
</div>
<div className="mt-2 h-[45rem]">
<div className="mt-2">
{isDetailLoading ? (
<div className="flex h-full w-full items-center justify-center">
<div className="relative size-[5rem]">
@@ -480,11 +479,11 @@ const ImrVerificationHistory = () => {
isExcelImport={false}
highlightedRowId={selectedDetail?.rsltSn}
onRowClick={(e) => {
if (!e.rowId) return;
if (!e.anlsSn) return;
const row = detailData?.content?.find(
(item) =>
String(item.rsltSn) ===
String(e.rowId),
String(e.rsltSn),
);
if (row) setSelectedDetail(row);
}}
@@ -494,23 +493,18 @@ const ImrVerificationHistory = () => {
</div>
{/* 영역 C: Line Chart */}
<div className="card card-border bg-white p-6">
<h2 className="mb-4 text-[1.6rem] font-bold text-title">
검증 결과 차트
</h2>
<div className="flex h-[45rem] items-center justify-center rounded-lg border bg-slate-50 p-4">
{isChartLoading ? (
<div className="relative size-[5rem]">
<LoadingWithAnimation color="primary" />
</div>
) : lineChartData ? (
<Line options={chartOptions} data={lineChartData} />
) : (
<div className="text-[1.4rem] text-muted-foreground">
상세 데이터를 선택하면 차트가 표시됩니다.
</div>
)}
</div>
<div className="m-2 flex h-[45rem] items-center justify-center rounded-sm border bg-white p-4">
{isChartLoading ? (
<div className="relative size-[5rem]">
<LoadingWithAnimation color="primary" />
</div>
) : lineChartData ? (
<Line options={chartOptions} data={lineChartData} />
) : (
<div className="text-[1.4rem]">
이상치 데이터를 선택하면 차트가 표시됩니다.
</div>
)}
</div>
</div>
</div>
@@ -54,8 +54,8 @@ export const imrDetailGridColumnInfo: ColumnInfo = {
width: 80,
},
{
name: "statsNm",
fieldName: "statsNm",
name: "vrfcTrgtNm",
fieldName: "vrfcTrgtNm",
header: { text: "항목명" },
width: 150,
},
@@ -78,7 +78,7 @@ export const imrDetailGridColumnInfo: ColumnInfo = {
"addr",
"pipeSeCd",
"vrfcTrgtSn",
"statsNm",
"vrfcTrgtNm",
"cryrVl",
],
};
@@ -6,8 +6,8 @@ export interface StAnlsRsltResponse {
rsltSn: number; // 결과 일련번호
anlsSn: number; // 분석 일련번호
vrfcTrgtSn: number; // 검증 대상 일련번호
vrfcTrgtNm: string; // 검증 대상명(항목명)
admdstCd: string; // 행정구역 코드
admdstNm: string; // 행정구역 명칭
sido: string; // 시도
gugun: string; // 시군구
adstDong: string; // 행정동