645 lines
17 KiB
TypeScript
645 lines
17 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* PivotGrid 메인 컴포넌트
|
|
* 다차원 데이터 분석을 위한 피벗 테이블
|
|
*/
|
|
|
|
import React, { useState, useMemo, useCallback } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
PivotGridProps,
|
|
PivotResult,
|
|
PivotFieldConfig,
|
|
PivotCellData,
|
|
PivotFlatRow,
|
|
PivotCellValue,
|
|
PivotGridState,
|
|
} from "./types";
|
|
import { processPivotData, pathToKey } from "./utils/pivotEngine";
|
|
import {
|
|
ChevronRight,
|
|
ChevronDown,
|
|
Download,
|
|
Settings,
|
|
RefreshCw,
|
|
Maximize2,
|
|
Minimize2,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
// ==================== 서브 컴포넌트 ====================
|
|
|
|
// 행 헤더 셀
|
|
interface RowHeaderCellProps {
|
|
row: PivotFlatRow;
|
|
rowFields: PivotFieldConfig[];
|
|
onToggleExpand: (path: string[]) => void;
|
|
}
|
|
|
|
const RowHeaderCell: React.FC<RowHeaderCellProps> = ({
|
|
row,
|
|
rowFields,
|
|
onToggleExpand,
|
|
}) => {
|
|
const indentSize = row.level * 20;
|
|
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border bg-muted/50",
|
|
"px-2 py-1.5 text-left text-sm",
|
|
"whitespace-nowrap font-medium",
|
|
row.isExpanded && "bg-muted/70"
|
|
)}
|
|
style={{ paddingLeft: `${8 + indentSize}px` }}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
{row.hasChildren && (
|
|
<button
|
|
onClick={() => onToggleExpand(row.path)}
|
|
className="p-0.5 hover:bg-accent rounded"
|
|
>
|
|
{row.isExpanded ? (
|
|
<ChevronDown className="h-3.5 w-3.5" />
|
|
) : (
|
|
<ChevronRight className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
)}
|
|
{!row.hasChildren && <span className="w-4" />}
|
|
<span>{row.caption}</span>
|
|
</div>
|
|
</td>
|
|
);
|
|
};
|
|
|
|
// 데이터 셀
|
|
interface DataCellProps {
|
|
values: PivotCellValue[];
|
|
isTotal?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const DataCell: React.FC<DataCellProps> = ({
|
|
values,
|
|
isTotal = false,
|
|
onClick,
|
|
}) => {
|
|
if (!values || values.length === 0) {
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-right text-sm",
|
|
isTotal && "bg-primary/5 font-medium"
|
|
)}
|
|
>
|
|
-
|
|
</td>
|
|
);
|
|
}
|
|
|
|
// 단일 데이터 필드인 경우
|
|
if (values.length === 1) {
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-right text-sm tabular-nums",
|
|
isTotal && "bg-primary/5 font-medium",
|
|
onClick && "cursor-pointer hover:bg-accent/50"
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{values[0].formattedValue}
|
|
</td>
|
|
);
|
|
}
|
|
|
|
// 다중 데이터 필드인 경우
|
|
return (
|
|
<>
|
|
{values.map((val, idx) => (
|
|
<td
|
|
key={idx}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-right text-sm tabular-nums",
|
|
isTotal && "bg-primary/5 font-medium",
|
|
onClick && "cursor-pointer hover:bg-accent/50"
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{val.formattedValue}
|
|
</td>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
// ==================== 메인 컴포넌트 ====================
|
|
|
|
export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|
title,
|
|
fields = [],
|
|
totals = {
|
|
showRowGrandTotals: true,
|
|
showColumnGrandTotals: true,
|
|
showRowTotals: true,
|
|
showColumnTotals: true,
|
|
},
|
|
style = {
|
|
theme: "default",
|
|
headerStyle: "default",
|
|
cellPadding: "normal",
|
|
borderStyle: "light",
|
|
alternateRowColors: true,
|
|
highlightTotals: true,
|
|
},
|
|
allowExpandAll = true,
|
|
height = "auto",
|
|
maxHeight,
|
|
exportConfig,
|
|
data: externalData,
|
|
onCellClick,
|
|
onExpandChange,
|
|
}) => {
|
|
// ==================== 상태 ====================
|
|
|
|
const [pivotState, setPivotState] = useState<PivotGridState>({
|
|
expandedRowPaths: [],
|
|
expandedColumnPaths: [],
|
|
sortConfig: null,
|
|
filterConfig: {},
|
|
});
|
|
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
|
|
// 데이터
|
|
const data = externalData || [];
|
|
|
|
// ==================== 필드 분류 ====================
|
|
|
|
const rowFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "row" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
const columnFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "column" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
const dataFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "data" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
// ==================== 피벗 처리 ====================
|
|
|
|
const pivotResult = useMemo<PivotResult | null>(() => {
|
|
if (!data || data.length === 0 || fields.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return processPivotData(
|
|
data,
|
|
fields,
|
|
pivotState.expandedRowPaths,
|
|
pivotState.expandedColumnPaths
|
|
);
|
|
}, [data, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
|
|
|
|
// ==================== 이벤트 핸들러 ====================
|
|
|
|
// 행 확장/축소
|
|
const handleToggleRowExpand = useCallback(
|
|
(path: string[]) => {
|
|
setPivotState((prev) => {
|
|
const pathKey = pathToKey(path);
|
|
const existingIndex = prev.expandedRowPaths.findIndex(
|
|
(p) => pathToKey(p) === pathKey
|
|
);
|
|
|
|
let newPaths: string[][];
|
|
if (existingIndex >= 0) {
|
|
newPaths = prev.expandedRowPaths.filter(
|
|
(_, i) => i !== existingIndex
|
|
);
|
|
} else {
|
|
newPaths = [...prev.expandedRowPaths, path];
|
|
}
|
|
|
|
onExpandChange?.(newPaths);
|
|
|
|
return {
|
|
...prev,
|
|
expandedRowPaths: newPaths,
|
|
};
|
|
});
|
|
},
|
|
[onExpandChange]
|
|
);
|
|
|
|
// 전체 확장
|
|
const handleExpandAll = useCallback(() => {
|
|
if (!pivotResult) return;
|
|
|
|
const allRowPaths: string[][] = [];
|
|
|
|
pivotResult.flatRows.forEach((row) => {
|
|
if (row.hasChildren) {
|
|
allRowPaths.push(row.path);
|
|
}
|
|
});
|
|
|
|
setPivotState((prev) => ({
|
|
...prev,
|
|
expandedRowPaths: allRowPaths,
|
|
expandedColumnPaths: [],
|
|
}));
|
|
}, [pivotResult]);
|
|
|
|
// 전체 축소
|
|
const handleCollapseAll = useCallback(() => {
|
|
setPivotState((prev) => ({
|
|
...prev,
|
|
expandedRowPaths: [],
|
|
expandedColumnPaths: [],
|
|
}));
|
|
}, []);
|
|
|
|
// 셀 클릭
|
|
const handleCellClick = useCallback(
|
|
(rowPath: string[], colPath: string[], values: PivotCellValue[]) => {
|
|
if (!onCellClick) return;
|
|
|
|
const cellData: PivotCellData = {
|
|
value: values[0]?.value,
|
|
rowPath,
|
|
columnPath: colPath,
|
|
field: values[0]?.field,
|
|
};
|
|
|
|
onCellClick(cellData);
|
|
},
|
|
[onCellClick]
|
|
);
|
|
|
|
// CSV 내보내기
|
|
const handleExportCSV = useCallback(() => {
|
|
if (!pivotResult) return;
|
|
|
|
const { flatRows, flatColumns, dataMatrix, grandTotals } = pivotResult;
|
|
|
|
let csv = "";
|
|
|
|
// 헤더 행
|
|
const headerRow = [""].concat(
|
|
flatColumns.map((col) => col.caption || "총계")
|
|
);
|
|
if (totals?.showRowGrandTotals) {
|
|
headerRow.push("총계");
|
|
}
|
|
csv += headerRow.join(",") + "\n";
|
|
|
|
// 데이터 행
|
|
flatRows.forEach((row) => {
|
|
const rowData = [row.caption];
|
|
|
|
flatColumns.forEach((col) => {
|
|
const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
|
|
const values = dataMatrix.get(cellKey);
|
|
rowData.push(values?.[0]?.value?.toString() || "");
|
|
});
|
|
|
|
if (totals?.showRowGrandTotals) {
|
|
const rowTotal = grandTotals.row.get(pathToKey(row.path));
|
|
rowData.push(rowTotal?.[0]?.value?.toString() || "");
|
|
}
|
|
|
|
csv += rowData.join(",") + "\n";
|
|
});
|
|
|
|
// 열 총계 행
|
|
if (totals?.showColumnGrandTotals) {
|
|
const totalRow = ["총계"];
|
|
flatColumns.forEach((col) => {
|
|
const colTotal = grandTotals.column.get(pathToKey(col.path));
|
|
totalRow.push(colTotal?.[0]?.value?.toString() || "");
|
|
});
|
|
if (totals?.showRowGrandTotals) {
|
|
totalRow.push(grandTotals.grand[0]?.value?.toString() || "");
|
|
}
|
|
csv += totalRow.join(",") + "\n";
|
|
}
|
|
|
|
// 다운로드
|
|
const blob = new Blob(["\uFEFF" + csv], {
|
|
type: "text/csv;charset=utf-8;",
|
|
});
|
|
const link = document.createElement("a");
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = `${title || "pivot"}_export.csv`;
|
|
link.click();
|
|
}, [pivotResult, totals, title]);
|
|
|
|
// ==================== 렌더링 ====================
|
|
|
|
// 빈 상태
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center justify-center",
|
|
"p-8 text-center text-muted-foreground",
|
|
"border border-dashed border-border rounded-lg"
|
|
)}
|
|
>
|
|
<RefreshCw className="h-8 w-8 mb-2 opacity-50" />
|
|
<p className="text-sm">데이터가 없습니다</p>
|
|
<p className="text-xs mt-1">데이터를 로드하거나 필드를 설정해주세요</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 필드 미설정
|
|
if (fields.length === 0) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center justify-center",
|
|
"p-8 text-center text-muted-foreground",
|
|
"border border-dashed border-border rounded-lg"
|
|
)}
|
|
>
|
|
<Settings className="h-8 w-8 mb-2 opacity-50" />
|
|
<p className="text-sm">필드가 설정되지 않았습니다</p>
|
|
<p className="text-xs mt-1">
|
|
행, 열, 데이터 영역에 필드를 배치해주세요
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 피벗 결과 없음
|
|
if (!pivotResult) {
|
|
return (
|
|
<div className="flex items-center justify-center p-8">
|
|
<RefreshCw className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const { flatRows, flatColumns, dataMatrix, grandTotals } = pivotResult;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col",
|
|
"border border-border rounded-lg overflow-hidden",
|
|
"bg-background",
|
|
isFullscreen && "fixed inset-4 z-50 shadow-2xl"
|
|
)}
|
|
style={{
|
|
height: isFullscreen ? "auto" : height,
|
|
maxHeight: isFullscreen ? "none" : maxHeight,
|
|
}}
|
|
>
|
|
{/* 헤더 툴바 */}
|
|
<div className="flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30">
|
|
<div className="flex items-center gap-2">
|
|
{title && <h3 className="text-sm font-medium">{title}</h3>}
|
|
<span className="text-xs text-muted-foreground">
|
|
({data.length}건)
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
{allowExpandAll && (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleExpandAll}
|
|
title="전체 확장"
|
|
>
|
|
<ChevronDown className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleCollapseAll}
|
|
title="전체 축소"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{exportConfig?.excel && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleExportCSV}
|
|
title="CSV 내보내기"
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={() => setIsFullscreen(!isFullscreen)}
|
|
title={isFullscreen ? "원래 크기" : "전체 화면"}
|
|
>
|
|
{isFullscreen ? (
|
|
<Minimize2 className="h-4 w-4" />
|
|
) : (
|
|
<Maximize2 className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 피벗 테이블 */}
|
|
<div className="flex-1 overflow-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
{/* 열 헤더 */}
|
|
<tr className="bg-muted/50">
|
|
{/* 좌상단 코너 (행 필드 라벨) */}
|
|
<th
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-2 text-left text-xs font-medium",
|
|
"bg-muted sticky left-0 top-0 z-20"
|
|
)}
|
|
rowSpan={columnFields.length > 0 ? 2 : 1}
|
|
>
|
|
{rowFields.map((f) => f.caption).join(" / ") || "항목"}
|
|
</th>
|
|
|
|
{/* 열 헤더 셀 */}
|
|
{flatColumns.map((col, idx) => (
|
|
<th
|
|
key={idx}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-center text-xs font-medium",
|
|
"bg-muted/70 sticky top-0 z-10"
|
|
)}
|
|
colSpan={dataFields.length || 1}
|
|
>
|
|
{col.caption || "(전체)"}
|
|
</th>
|
|
))}
|
|
|
|
{/* 행 총계 헤더 */}
|
|
{totals?.showRowGrandTotals && (
|
|
<th
|
|
className={cn(
|
|
"border-b border-border",
|
|
"px-2 py-1.5 text-center text-xs font-medium",
|
|
"bg-primary/10 sticky top-0 z-10"
|
|
)}
|
|
colSpan={dataFields.length || 1}
|
|
>
|
|
총계
|
|
</th>
|
|
)}
|
|
</tr>
|
|
|
|
{/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
|
|
{dataFields.length > 1 && (
|
|
<tr className="bg-muted/30">
|
|
{flatColumns.map((col, colIdx) => (
|
|
<React.Fragment key={colIdx}>
|
|
{dataFields.map((df, dfIdx) => (
|
|
<th
|
|
key={`${colIdx}-${dfIdx}`}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1 text-center text-xs font-normal",
|
|
"text-muted-foreground"
|
|
)}
|
|
>
|
|
{df.caption}
|
|
</th>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
{totals?.showRowGrandTotals &&
|
|
dataFields.map((df, dfIdx) => (
|
|
<th
|
|
key={`total-${dfIdx}`}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1 text-center text-xs font-normal",
|
|
"bg-primary/5 text-muted-foreground"
|
|
)}
|
|
>
|
|
{df.caption}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
)}
|
|
</thead>
|
|
|
|
<tbody>
|
|
{flatRows.map((row, rowIdx) => (
|
|
<tr
|
|
key={rowIdx}
|
|
className={cn(
|
|
style?.alternateRowColors &&
|
|
rowIdx % 2 === 1 &&
|
|
"bg-muted/20"
|
|
)}
|
|
>
|
|
{/* 행 헤더 */}
|
|
<RowHeaderCell
|
|
row={row}
|
|
rowFields={rowFields}
|
|
onToggleExpand={handleToggleRowExpand}
|
|
/>
|
|
|
|
{/* 데이터 셀 */}
|
|
{flatColumns.map((col, colIdx) => {
|
|
const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
|
|
const values = dataMatrix.get(cellKey) || [];
|
|
|
|
return (
|
|
<DataCell
|
|
key={colIdx}
|
|
values={values}
|
|
onClick={
|
|
onCellClick
|
|
? () => handleCellClick(row.path, col.path, values)
|
|
: undefined
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{/* 행 총계 */}
|
|
{totals?.showRowGrandTotals && (
|
|
<DataCell
|
|
values={grandTotals.row.get(pathToKey(row.path)) || []}
|
|
isTotal
|
|
/>
|
|
)}
|
|
</tr>
|
|
))}
|
|
|
|
{/* 열 총계 행 */}
|
|
{totals?.showColumnGrandTotals && (
|
|
<tr className="bg-primary/5 font-medium">
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-left text-sm",
|
|
"bg-primary/10 sticky left-0"
|
|
)}
|
|
>
|
|
총계
|
|
</td>
|
|
|
|
{flatColumns.map((col, colIdx) => (
|
|
<DataCell
|
|
key={colIdx}
|
|
values={grandTotals.column.get(pathToKey(col.path)) || []}
|
|
isTotal
|
|
/>
|
|
))}
|
|
|
|
{/* 대총합 */}
|
|
{totals?.showRowGrandTotals && (
|
|
<DataCell values={grandTotals.grand} isTotal />
|
|
)}
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PivotGridComponent;
|