kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

커스텀 카드 배치 설정

This commit is contained in:
dohyeons 2025-10-28 15:36:37 +09:00
parent 3f3779c25e
commit e1c40b23fb
1 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/components/dashboard/widgets/CustomMetricWidget.tsx
View File

@ -373,50 +373,53 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
); );
} }
// 위젯 높이에 따라 레이아웃 결정 (세로 1칸이면 가로, 2칸 이상이면 세로)
// 실제 측정된 1칸 높이: 119px
const isHorizontalLayout = element?.size?.height && element.size.height <= 130; // 1칸 여유 (119px + 약간의 마진)
return ( return (
<div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-1"> <div
{/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */} className={`flex h-full w-full overflow-hidden bg-white p-0.5 ${
<div className="grid h-full w-full gap-1" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(35px, 1fr))" }}> isHorizontalLayout ? "flex-row gap-0.5" : "flex-col gap-0.5"
{/* 그룹별 카드 (활성화 시) */} }`}
{isGroupByMode && >
groupedCards.map((card, index) => { {/* 그룹별 카드 (활성화 시) */}
// 색상 순환 (6가지 색상) {isGroupByMode &&
const colorKeys = Object.keys(colorMap) as Array<keyof typeof colorMap>; groupedCards.map((card, index) => {
const colorKey = colorKeys[index % colorKeys.length]; // 색상 순환 (6가지 색상)
const colors = colorMap[colorKey]; const colorKeys = Object.keys(colorMap) as Array<keyof typeof colorMap>;
const colorKey = colorKeys[index % colorKeys.length];
return ( const colors = colorMap[colorKey];
<div
key={`group-${index}`}
className={`flex flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
>
<div className="text-[8px] leading-tight text-gray-600">{card.label}</div>
<div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
{card.value.toLocaleString()}
</div>
</div>
);
})}
{/* 일반 지표 카드 (항상 표시) */}
{metrics.map((metric) => {
const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
return ( return (
<div <div
key={metric.id} key={`group-${index}`}
className={`flex flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`} className={`flex flex-1 flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
> >
<div className="text-[8px] leading-tight text-gray-600">{metric.label}</div> <div className="text-[8px] leading-tight text-gray-600">{card.label}</div>
<div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}> <div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
{formattedValue}
<span className="ml-0 text-[8px]">{metric.unit}</span>
</div>
</div> </div>
); );
})} })}
</div>
{/* 일반 지표 카드 (항상 표시) */}
{metrics.map((metric) => {
const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
return (
<div
key={metric.id}
className={`flex flex-1 flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
>
<div className="text-[8px] leading-tight text-gray-600">{metric.label}</div>
<div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
{formattedValue}
<span className="ml-0 text-[8px]">{metric.unit}</span>
</div>
</div>
);
})}
</div> </div>
); );
} }