jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add progress bar functionality to SplitPanelLayoutComponent and configuration options

Browse Source 
- Implemented a new progress bar rendering function in the SplitPanelLayoutComponent to visually represent the ratio of child to parent values.
- Enhanced the SortableColumnRow component to support progress column configuration, allowing users to set current and maximum values through a popover interface.
- Updated the AdditionalTabConfigPanel to include options for adding progress columns, improving user experience in managing data visualization.

These changes significantly enhance the functionality and usability of the split panel layout by providing visual progress indicators and configuration options for users.
This commit is contained in:
kjs
2026-03-09 18:05:00 +09:00
parent 4d6783e508
commit c98b2ccb43
3 changed files with 210 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@@ -929,6 +929,42 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
return result;
}, []);
// 프로그레스바 셀 렌더링 (부모 값 대비 자식 값 비율)
const renderProgressCell = useCallback(
(col: any, item: any, parentData: any) => {
const current = Number(item[col.numerator] || 0);
const max = Number(parentData?.[col.denominator] || item[col.denominator] || 0);
const percentage = max > 0 ? Math.round((current / max) * 100) : 0;
const barWidth = Math.min(percentage, 100);
const barColor =
percentage > 100
? "bg-red-600"
: percentage >= 90
? "bg-red-500"
: percentage >= 70
? "bg-amber-500"
: "bg-emerald-500";
return (
<div className="flex min-w-[120px] items-center gap-2">
<div className="flex-1">
<div className="bg-muted h-2 w-full rounded-full">
<div
className={`h-2 rounded-full transition-all ${barColor}`}
style={{ width: `${barWidth}%` }}
/>
</div>
<div className="text-muted-foreground mt-0.5 text-[10px]">
{current.toLocaleString()} / {max.toLocaleString()}
</div>
</div>
<span className="shrink-0 text-xs font-medium">{percentage}%</span>
</div>
);
},
[],
);
// 셀 값 포맷팅 함수 (카테고리 타입 처리 + 날짜/숫자 포맷)
const formatCellValue = useCallback(
(
@@ -3950,12 +3986,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
>
{tabSummaryColumns.map((col: any) => (
<td key={col.name} className="px-3 py-2 text-xs">
{formatCellValue(
col.name,
getEntityJoinValue(item, col.name),
rightCategoryMappings,
col.format,
)}
{col.type === "progress"
? renderProgressCell(col, item, selectedLeftItem)
: formatCellValue(
col.name,
getEntityJoinValue(item, col.name),
rightCategoryMappings,
col.format,
)}
</td>
))}
{hasTabActions && (
@@ -4064,12 +4102,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
>
{listSummaryColumns.map((col: any) => (
<td key={col.name} className="px-3 py-2 text-xs">
{formatCellValue(
col.name,
getEntityJoinValue(item, col.name),
rightCategoryMappings,
col.format,
)}
{col.type === "progress"
? renderProgressCell(col, item, selectedLeftItem)
: formatCellValue(
col.name,
getEntityJoinValue(item, col.name),
rightCategoryMappings,
col.format,
)}
</td>
))}
{hasTabActions && (
@@ -4486,12 +4526,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
className="px-3 py-2 text-xs whitespace-nowrap"
style={{ textAlign: col.align || "left" }}
>
{formatCellValue(
col.name,
getEntityJoinValue(item, col.name),
rightCategoryMappings,
col.format,
)}
{col.type === "progress"
? renderProgressCell(col, item, selectedLeftItem)
: formatCellValue(
col.name,
getEntityJoinValue(item, col.name),
rightCategoryMappings,
col.format,
)}
</td>
))}
{/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 셀 표시 */}