Merge pull request '피벗' (#363) from lhj into main
Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/363
This commit is contained in:
commit
0a89cc2fb0
|
|
@ -184,7 +184,7 @@ const DataCell: React.FC<DataCellProps> = ({
|
|||
onClick={onClick}
|
||||
onDoubleClick={onDoubleClick}
|
||||
>
|
||||
-
|
||||
0
|
||||
</td>
|
||||
);
|
||||
}
|
||||
|
|
@ -222,7 +222,7 @@ const DataCell: React.FC<DataCellProps> = ({
|
|||
)}
|
||||
<span className="relative z-10 flex items-center justify-end gap-1">
|
||||
{icon && <span>{icon}</span>}
|
||||
{values[0].formattedValue}
|
||||
{values[0].formattedValue || (values[0].value === 0 ? '0' : values[0].formattedValue)}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
|
|
@ -257,7 +257,7 @@ const DataCell: React.FC<DataCellProps> = ({
|
|||
)}
|
||||
<span className="relative z-10 flex items-center justify-end gap-1">
|
||||
{icon && <span>{icon}</span>}
|
||||
{val.formattedValue}
|
||||
{val.formattedValue || (val.value === 0 ? '0' : val.formattedValue)}
|
||||
</span>
|
||||
</td>
|
||||
))}
|
||||
|
|
@ -530,14 +530,22 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
|
||||
// 🆕 초기 로드 시 첫 레벨 자동 확장
|
||||
useEffect(() => {
|
||||
if (!isInitialExpanded && pivotResult && pivotResult.flatRows.length > 0) {
|
||||
// 첫 레벨 행들의 경로 수집 (level 0인 행들)
|
||||
const firstLevelPaths = pivotResult.flatRows
|
||||
.filter(row => row.level === 0 && row.hasChildren)
|
||||
.map(row => row.path);
|
||||
if (pivotResult && pivotResult.flatRows.length > 0) {
|
||||
console.log("🔶 피벗 결과 생성됨:", {
|
||||
flatRowsCount: pivotResult.flatRows.length,
|
||||
expandedRowPaths: pivotState.expandedRowPaths.length,
|
||||
isInitialExpanded,
|
||||
});
|
||||
|
||||
if (firstLevelPaths.length > 0) {
|
||||
console.log("🔶 초기 자동 확장:", firstLevelPaths);
|
||||
// 첫 레벨 행들의 경로 수집 (level 0인 행들)
|
||||
const firstLevelRows = pivotResult.flatRows.filter(row => row.level === 0 && row.hasChildren);
|
||||
|
||||
console.log("🔶 첫 레벨 행 (level 0, hasChildren):", firstLevelRows.map(r => ({ path: r.path, caption: r.caption })));
|
||||
|
||||
// 초기 확장이 안 되어 있고, 첫 레벨 행이 있으면 자동 확장
|
||||
if (!isInitialExpanded && firstLevelRows.length > 0) {
|
||||
const firstLevelPaths = firstLevelRows.map(row => row.path);
|
||||
console.log("🔶 초기 자동 확장 실행:", firstLevelPaths);
|
||||
setPivotState(prev => ({
|
||||
...prev,
|
||||
expandedRowPaths: firstLevelPaths,
|
||||
|
|
@ -545,7 +553,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
setIsInitialExpanded(true);
|
||||
}
|
||||
}
|
||||
}, [pivotResult, isInitialExpanded]);
|
||||
}, [pivotResult, isInitialExpanded, pivotState.expandedRowPaths.length]);
|
||||
|
||||
// 조건부 서식용 전체 값 수집
|
||||
const allCellValues = useMemo(() => {
|
||||
|
|
@ -1607,13 +1615,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
<table ref={tableRef} className="w-full border-collapse">
|
||||
<thead>
|
||||
{/* 열 헤더 */}
|
||||
<tr className="bg-muted/50">
|
||||
<tr className="bg-background">
|
||||
{/* 좌상단 코너 (행 필드 라벨 + 필터) */}
|
||||
<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"
|
||||
"px-2 py-1 text-left text-xs font-medium",
|
||||
"bg-background sticky left-0 top-0 z-20"
|
||||
)}
|
||||
rowSpan={columnFields.length > 0 ? 2 : 1}
|
||||
>
|
||||
|
|
@ -1657,8 +1665,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
key={idx}
|
||||
className={cn(
|
||||
"border-r border-b border-border relative group",
|
||||
"px-2 py-1.5 text-center text-xs font-medium",
|
||||
"bg-muted/70 sticky top-0 z-10",
|
||||
"px-2 py-1 text-center text-xs font-medium",
|
||||
"bg-background sticky top-0 z-10",
|
||||
dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
|
||||
)}
|
||||
colSpan={dataFields.length || 1}
|
||||
|
|
@ -1681,15 +1689,30 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
</th>
|
||||
))}
|
||||
|
||||
{/* 열 필드 필터 (헤더 왼쪽에 표시) */}
|
||||
{/* 행 총계 헤더 */}
|
||||
{totals?.showRowGrandTotals && (
|
||||
<th
|
||||
className={cn(
|
||||
"border-b border-border",
|
||||
"px-2 py-1 text-center text-xs font-medium",
|
||||
"bg-background sticky top-0 z-10"
|
||||
)}
|
||||
colSpan={dataFields.length || 1}
|
||||
rowSpan={dataFields.length > 1 ? 2 : 1}
|
||||
>
|
||||
총계
|
||||
</th>
|
||||
)}
|
||||
|
||||
{/* 열 필드 필터 (헤더 오른쪽 끝에 표시) */}
|
||||
{columnFields.length > 0 && (
|
||||
<th
|
||||
className={cn(
|
||||
"border-b border-border",
|
||||
"px-1 py-1.5 text-center text-xs",
|
||||
"bg-muted/50 sticky top-0 z-10"
|
||||
"px-1 py-1 text-center text-xs",
|
||||
"bg-background sticky top-0 z-10"
|
||||
)}
|
||||
rowSpan={columnFields.length > 0 ? 2 : 1}
|
||||
rowSpan={dataFields.length > 1 ? 2 : 1}
|
||||
>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{columnFields.map((f) => (
|
||||
|
|
@ -1721,25 +1744,11 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
</div>
|
||||
</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">
|
||||
<tr className="bg-background">
|
||||
{flatColumns.map((col, colIdx) => (
|
||||
<React.Fragment key={colIdx}>
|
||||
{dataFields.map((df, dfIdx) => (
|
||||
|
|
@ -1747,7 +1756,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
key={`${colIdx}-${dfIdx}`}
|
||||
className={cn(
|
||||
"border-r border-b border-border",
|
||||
"px-2 py-1 text-center text-xs font-normal",
|
||||
"px-2 py-0.5 text-center text-xs font-normal",
|
||||
"text-muted-foreground cursor-pointer hover:bg-accent/50"
|
||||
)}
|
||||
onClick={() => handleSort(df.field)}
|
||||
|
|
@ -1760,19 +1769,6 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|||
))}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ const PivotGridWrapper: React.FC<any> = (props) => {
|
|||
fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
|
||||
chart={componentConfig.chart || props.chart}
|
||||
allowExpandAll={componentConfig.allowExpandAll !== false}
|
||||
height={componentConfig.height || props.height || "400px"}
|
||||
height="100%"
|
||||
maxHeight={componentConfig.maxHeight || props.maxHeight}
|
||||
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
|
||||
onCellClick={props.onCellClick}
|
||||
|
|
@ -339,7 +339,7 @@ export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
|
|||
fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
|
||||
chart={componentConfig.chart || props.chart}
|
||||
allowExpandAll={componentConfig.allowExpandAll !== false}
|
||||
height={componentConfig.height || props.height || "400px"}
|
||||
height="100%"
|
||||
maxHeight={componentConfig.maxHeight || props.maxHeight}
|
||||
exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
|
||||
onCellClick={props.onCellClick}
|
||||
|
|
|
|||
Loading…
Reference in New Issue