863 lines
45 KiB
TypeScript
863 lines
45 KiB
TypeScript
import { state } from '../../core/state';
|
|
import { openHwModal } from '../../components/Modal/HWModal';
|
|
import { calculatePcScoreDeductive, getPcGrade, calculateAssetAge, isWindows11Incompatible } from '../../core/utils';
|
|
import { ASSET_SCHEMA } from '../../core/schema';
|
|
import { createIcons, Laptop, Cpu, Shield, Zap, Monitor, AlertTriangle, ChevronRight, HelpCircle } from 'lucide';
|
|
|
|
declare var Chart: any;
|
|
|
|
let jobChartInstance: any = null;
|
|
let donutChartInstance: any = null;
|
|
|
|
export function renderHwDashboard(container: HTMLElement) {
|
|
// 1. 개인용 PC 데이터 추출 (유형이 '개인PC'이거나 상태가 '재고' 또는 '대기' 상태인 PC 집계)
|
|
const pcs = (state.masterData.pc || []).filter((a: any) =>
|
|
a.asset_type === '개인PC' ||
|
|
((a.hw_status === '재고' || a.hw_status === '대기') && a.category === 'PC')
|
|
);
|
|
|
|
// 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
|
|
container.innerHTML = `
|
|
<div class="view-container" style="overflow: hidden; padding: 1.5rem 2rem; background-color: #F8FAFC; height: calc(100vh - var(--header-height) - 28px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.25rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
|
|
|
|
<!-- 대시보드 타이틀 및 사용조직 필터 -->
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; padding-bottom: 0.75rem;">
|
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px;">
|
|
<h2 style="font-size: 1.65rem; font-weight: 850; color: #1E5149; margin: 0; letter-spacing: -0.5px; display: flex; align-items: center; gap: 0.6rem;">
|
|
개인 PC 자산 대시보드
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
|
|
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
|
<span style="font-size: 0.9rem; font-weight: 700; color: #475569; white-space: nowrap;">조직 필터:</span>
|
|
<div id="dashboard-dept-buttons" style="display: flex; gap: 0.3rem; background: #EEF2F6; padding: 4px; border-radius: 8px; border: 1px solid #E2E8F0;">
|
|
<button class="dept-filter-btn active" data-dept="" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: #1E5149; color: white; cursor: pointer; transition: all 0.2s;">전체</button>
|
|
<button class="dept-filter-btn" data-dept="한맥" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한맥</button>
|
|
<button class="dept-filter-btn" data-dept="삼안" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">삼안</button>
|
|
<button class="dept-filter-btn" data-dept="장헌" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">장헌</button>
|
|
<button class="dept-filter-btn" data-dept="한라" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한라</button>
|
|
<button class="dept-filter-btn" data-dept="기술개발센터" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">기술개발센터</button>
|
|
<button class="dept-filter-btn" data-dept="총괄기획실" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">총괄기획실</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메인 2단 컬럼 레이아웃 (5:5 비율) -->
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; flex: 1; min-height: 0; margin-bottom: 0.25rem;">
|
|
|
|
<!-- 좌측 컬럼 (Left Column) -->
|
|
<div style="display: flex; flex-direction: column; gap: 1.25rem; min-height: 0;">
|
|
|
|
<!-- 상단 핵심 지표 그룹 카드 (1개 카드로 통합, 4개 지표 가로 배치) -->
|
|
<div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.85rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 0;">
|
|
|
|
<!-- 1. 보유 자산 수량 -->
|
|
<div style="flex: 1; border-right: 1px solid #EEF2F6; padding-right: 0.85rem;">
|
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
|
<span style="font-size: 1.03rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
|
<div>
|
|
<div id="metric-total-pcs" style="font-size: 1.96rem; font-weight: 900; color: #1E5149; line-height: 1; margin-bottom: 0.2rem;">0대</div>
|
|
<span style="font-size: 0.93rem; color: #64748B; font-weight: 700; white-space: nowrap;">전사 보유 개인용 PC</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 사양 부족 검토 -->
|
|
<div id="card-under-spec" style="flex: 1; border-right: 1px solid #EEF2F6; padding-left: 0.85rem; padding-right: 0.85rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
|
<span style="font-size: 1.03rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족 검토</span>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
|
<div>
|
|
<div id="metric-under-spec" style="font-size: 1.96rem; font-weight: 900; color: #EF4444; line-height: 1; margin-bottom: 0.2rem;">0명</div>
|
|
<span style="font-size: 0.93rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 교체 권고 자산</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 오버스펙 검토 -->
|
|
<div id="card-over-spec" style="flex: 1; border-right: 1px solid #EEF2F6; padding-left: 0.85rem; padding-right: 0.85rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
|
<span style="font-size: 1.03rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버스펙 검토</span>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
|
<div>
|
|
<div id="metric-over-spec" style="font-size: 1.96rem; font-weight: 900; color: #F59E0B; line-height: 1; margin-bottom: 0.2rem;">0명</div>
|
|
<span style="font-size: 0.93rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 회수 권고 자산</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 윈도우 11 불가 PC -->
|
|
<div id="card-win11-incompatible" style="flex: 1; padding-left: 0.85rem; padding-right: 0.25rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
|
<span style="font-size: 1.03rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
|
<div>
|
|
<div id="metric-win11-incompatible" style="font-size: 1.96rem; font-weight: 900; color: #3B82F6; line-height: 1; margin-bottom: 0.2rem;">0대</div>
|
|
<span style="font-size: 0.93rem; color: #64748B; font-weight: 700; white-space: nowrap;">업데이트 미지원 하드웨어</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- PC 등급별 보유 현황 (등급별 게이지 + 우측 사양 적정성 도넛차트) -->
|
|
<div style="background: transparent; border-radius: 0; padding: 1.25rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; flex: 1.1; min-height: 0;">
|
|
|
|
<!-- 1열: 등급별 보유 현황 리스트 영역 -->
|
|
<div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: center; padding-left: 0.5rem;">
|
|
<!-- 메인 제목 -->
|
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; height: 1.5rem;">
|
|
<span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">등급별 보유 현황</span>
|
|
</div>
|
|
|
|
<!-- 등급 리스트 (바 그래프 제거 및 폰트 확대, 간격 조정) -->
|
|
<div style="display: flex; flex-direction: column; gap: 0.65rem; padding: 4px 0;">
|
|
<!-- 최상급 -->
|
|
<div id="grade-premium" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
|
|
<div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
|
|
<span style="color: #11302B; white-space: nowrap; width: 260px; display: inline-block;">최상급 PC (85점 이상)</span>
|
|
<span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
|
|
</div>
|
|
</div>
|
|
<!-- 상급 -->
|
|
<div id="grade-high" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
|
|
<div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
|
|
<span style="color: #1E8E7C; white-space: nowrap; width: 260px; display: inline-block;">상급 PC (70점 ~ 85점)</span>
|
|
<span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
|
|
</div>
|
|
</div>
|
|
<!-- 중급 -->
|
|
<div id="grade-normal" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
|
|
<div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
|
|
<span style="color: #10B981; white-space: nowrap; width: 260px; display: inline-block;">중급 PC (40점 ~ 70점)</span>
|
|
<span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
|
|
</div>
|
|
</div>
|
|
<!-- 보급 -->
|
|
<div id="grade-entry" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
|
|
<div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
|
|
<span style="color: #64748B; white-space: nowrap; width: 260px; display: inline-block;">보급 PC (40점 미만)</span>
|
|
<span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2열: 등급별 보유 비율 도넛 영역 -->
|
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;">
|
|
<!-- 서브 제목 (메인 제목과 수평 정렬을 맞추고, 중간정렬을 위해 text-align: center) -->
|
|
<div style="margin-bottom: 0.35rem; display: flex; align-items: center; justify-content: center; line-height: 1; height: 1.5rem;">
|
|
<span style="font-size: 1.06rem; font-weight: 800; color: #475569; text-transform: uppercase;">등급별 보유 비율</span>
|
|
</div>
|
|
|
|
<!-- 도넛 그래프 (크기 확대 및 범례 추가, 제목 상단 이관) -->
|
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; padding-right: 0.25rem; width: 100%;">
|
|
<div style="width: 170px; height: 170px; position: relative;">
|
|
<canvas id="chart-overall-donut"></canvas>
|
|
</div>
|
|
<!-- 커스텀 범례 -->
|
|
<div style="display: flex; gap: 0.65rem; justify-content: center; align-items: center; margin-top: 4px; font-size: 1.01rem; font-weight: 700; color: #475569;">
|
|
<div style="display: flex; align-items: center; gap: 4px;">
|
|
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #11302B;"></span>
|
|
<span>최상급</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 4px;">
|
|
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1E8E7C;"></span>
|
|
<span>상급</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 4px;">
|
|
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10B981;"></span>
|
|
<span>중급</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 4px;">
|
|
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94A3B8;"></span>
|
|
<span>보급</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 유효 재고 현황 -->
|
|
<div style="background: transparent; border-radius: 0; padding: 1.25rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; gap: 0.8rem; flex: 0.9; min-height: 0;">
|
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1;">
|
|
<span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">유효 재고 현황</span>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0.5rem; flex: 1; align-items: center;">
|
|
<!-- 좌측 열 (최상급 재고, 중급 재고) -->
|
|
<div style="display: flex; flex-direction: column; gap: 1rem; width: 100%;">
|
|
<div id="stock-premium-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div class="summary-grade-stock-premium" style="font-size: 2.01rem; font-weight: 900; color: #11302B; line-height: 1; margin-bottom: 0.25rem;">0대</div>
|
|
<span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">최상급 재고</span>
|
|
</div>
|
|
<div id="stock-normal-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div class="summary-grade-stock-normal" style="font-size: 2.01rem; font-weight: 900; color: #10B981; line-height: 1; margin-bottom: 0.25rem;">0대</div>
|
|
<span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">중급 재고</span>
|
|
</div>
|
|
</div>
|
|
<!-- 중앙 세로선 -->
|
|
<div style="width: 1px; height: 80%; background-color: #EEF2F6; align-self: center;"></div>
|
|
<!-- 우측 열 (상급 재고, 보급 재고) -->
|
|
<div style="display: flex; flex-direction: column; gap: 1rem; width: 100%;">
|
|
<div id="stock-high-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div class="summary-grade-stock-high" style="font-size: 2.01rem; font-weight: 900; color: #1E8E7C; line-height: 1; margin-bottom: 0.25rem;">0대</div>
|
|
<span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">상급 재고</span>
|
|
</div>
|
|
<div id="stock-entry-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
|
<div class="summary-grade-stock-entry" style="font-size: 2.01rem; font-weight: 900; color: #94A3B8; line-height: 1; margin-bottom: 0.25rem;">0대</div>
|
|
<span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">보급 재고</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 우측 컬럼 (Right Column) -->
|
|
<div style="display: flex; flex-direction: column; gap: 1.25rem; min-height: 0;">
|
|
|
|
<!-- 직무별 사양 적정성 분석 차트 카드 -->
|
|
<div style="background: transparent; border-radius: 0; padding: 1.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.1; min-height: 0;">
|
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.9rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
|
|
<span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">직무별 사양 적정성 분석</span>
|
|
</div>
|
|
<div style="flex: 1; min-height: 0; width: 100%; position: relative;">
|
|
<canvas id="chart-job-scores" style="width: 100%; height: 100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 연도별 PC 노후도 및 교체 주기 예측 카드 -->
|
|
<div style="background: transparent; border-radius: 0; padding: 1.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 0.9; min-height: 0;">
|
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.9rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
|
|
<span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">연도별 PC 노후도 및 교체 주기 예측</span>
|
|
</div>
|
|
<div style="flex: 1; overflow: hidden; min-height: 0;">
|
|
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.11rem;">
|
|
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
|
|
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 800;">
|
|
<th style="padding: 10px 4px; width: 50%;">구분 (사용 연한)</th>
|
|
<th style="padding: 10px 4px; width: 25%; text-align: center;">보유 대수</th>
|
|
<th style="padding: 10px 4px; width: 25%; text-align: center;">권장 조치</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="pc-aging-tbody">
|
|
<!-- Dynamic Aging Contents -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 3. Lucide 아이콘 초기화
|
|
createIcons({
|
|
icons: { Laptop, Cpu, Shield, Zap, Monitor, AlertTriangle, ChevronRight, HelpCircle }
|
|
});
|
|
|
|
// 4. 사용조직 버튼 그룹 필터 이벤트 연동
|
|
const btnGroup = container.querySelector('#dashboard-dept-buttons') as HTMLElement;
|
|
btnGroup.addEventListener('click', (e) => {
|
|
const btn = (e.target as HTMLElement).closest('.dept-filter-btn') as HTMLButtonElement;
|
|
if (!btn) return;
|
|
|
|
btnGroup.querySelectorAll('.dept-filter-btn').forEach(b => {
|
|
const button = b as HTMLButtonElement;
|
|
button.classList.remove('active');
|
|
button.style.background = 'transparent';
|
|
button.style.color = '#475569';
|
|
});
|
|
|
|
btn.classList.add('active');
|
|
btn.style.background = '#1E5149';
|
|
btn.style.color = 'white';
|
|
|
|
const selectedDept = btn.getAttribute('data-dept') || '';
|
|
updateDashboardData(pcs, selectedDept);
|
|
});
|
|
|
|
// 5. 첫 로딩 시 전체 부서 대상 통계 로드
|
|
updateDashboardData(pcs, '');
|
|
}
|
|
|
|
/**
|
|
* 대시보드 데이터 수치 및 차트, 테이블 실시간 갱신
|
|
*/
|
|
function updateDashboardData(pcs: any[], selectedDept: string) {
|
|
// 1. 선택 부서 필터 적용
|
|
const filtered = selectedDept
|
|
? pcs.filter((p: any) => String(p[ASSET_SCHEMA.CURRENT_DEPT.key] || '').trim().includes(selectedDept))
|
|
: pcs;
|
|
|
|
// 2. 개별 PC의 성능 감점식 점수 실시간 재연산
|
|
filtered.forEach((p: any) => {
|
|
p._pc_score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
|
|
});
|
|
|
|
// 3. 전사 직무군별 평균 점수 산출
|
|
const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
|
|
pcs.forEach((p: any) => {
|
|
const score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
|
|
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
|
if (!jobScores[job]) jobScores[job] = { totalScore: 0, count: 0, avg: 0 };
|
|
jobScores[job].totalScore += score;
|
|
jobScores[job].count += 1;
|
|
});
|
|
Object.keys(jobScores).forEach(job => {
|
|
jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
|
|
});
|
|
|
|
// 4. 등급 집계 (보유량 vs 유효 재고량)
|
|
const isStock = (p: any) => {
|
|
return p.hw_status === '재고' ||
|
|
p.hw_status === '대기' ||
|
|
!(p.user_current || '').trim();
|
|
};
|
|
|
|
const gradeCounts = {
|
|
premium: { total: 0, stock: 0 },
|
|
high: { total: 0, stock: 0 },
|
|
normal: { total: 0, stock: 0 },
|
|
entry: { total: 0, stock: 0 }
|
|
};
|
|
|
|
let scoreSum = 0;
|
|
let underSpecCount = 0;
|
|
let overSpecCount = 0;
|
|
let win11IncompatibleCount = 0;
|
|
const criticalList: any[] = [];
|
|
|
|
filtered.forEach((p: any) => {
|
|
const score = p._pc_score;
|
|
scoreSum += score;
|
|
const stockYn = isStock(p);
|
|
|
|
if (score >= 85) {
|
|
gradeCounts.premium.total++;
|
|
if (stockYn) gradeCounts.premium.stock++;
|
|
} else if (score >= 70) {
|
|
gradeCounts.high.total++;
|
|
if (stockYn) gradeCounts.high.stock++;
|
|
} else if (score >= 40) {
|
|
gradeCounts.normal.total++;
|
|
if (stockYn) gradeCounts.normal.stock++;
|
|
} else {
|
|
gradeCounts.entry.total++;
|
|
if (stockYn) gradeCounts.entry.stock++;
|
|
}
|
|
|
|
// 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
|
|
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
|
const avg = jobScores[job]?.avg || 0;
|
|
|
|
if (avg > 0 && job !== '재고PC' && !stockYn) {
|
|
if (score < avg * 0.6) {
|
|
p._spec_status = '사양 부족';
|
|
criticalList.push(p);
|
|
underSpecCount++;
|
|
} else if (score > avg * 1.5) {
|
|
p._spec_status = '오버스펙';
|
|
criticalList.push(p);
|
|
overSpecCount++;
|
|
} else {
|
|
p._spec_status = '적정';
|
|
}
|
|
}
|
|
|
|
// Windows 11 업그레이드 지원 불가 검사
|
|
if (isWindows11Incompatible(p.cpu, p.ram)) {
|
|
win11IncompatibleCount++;
|
|
}
|
|
});
|
|
|
|
// 5. 핵심 텍스트형 지표 갱신
|
|
document.getElementById('metric-total-pcs')!.textContent = `${filtered.length}대`;
|
|
document.getElementById('metric-under-spec')!.textContent = `${underSpecCount}명`;
|
|
document.getElementById('metric-over-spec')!.textContent = `${overSpecCount}명`;
|
|
document.getElementById('metric-win11-incompatible')!.textContent = `${win11IncompatibleCount}대`;
|
|
|
|
|
|
// 6. 등급별 리스트 데이터 바 업데이트
|
|
const total = filtered.length || 1;
|
|
|
|
const updateCard = (id: string, counts: { total: number; stock: number }) => {
|
|
const card = document.getElementById(id)!;
|
|
const rate = Math.round((counts.total / total) * 100);
|
|
|
|
card.querySelector('.grade-count')!.textContent = `${counts.total}대`;
|
|
card.querySelector('.grade-rate')!.textContent = `(${rate}%)`;
|
|
};
|
|
|
|
updateCard('grade-premium', gradeCounts.premium);
|
|
updateCard('grade-high', gradeCounts.high);
|
|
updateCard('grade-normal', gradeCounts.normal);
|
|
updateCard('grade-entry', gradeCounts.entry);
|
|
|
|
// 6.2 Inventory Summary 수치 업데이트 (골드/민트 텍스트 영역)
|
|
const container = document.getElementById('view-body')?.parentElement || document.body;
|
|
const setStockVal = (cls: string, val: number) => {
|
|
const el = container.querySelector(`.${cls}`);
|
|
if (el) el.textContent = `${val}대`;
|
|
};
|
|
setStockVal('summary-grade-stock-premium', gradeCounts.premium.stock);
|
|
setStockVal('summary-grade-stock-high', gradeCounts.high.stock);
|
|
setStockVal('summary-grade-stock-normal', gradeCounts.normal.stock);
|
|
setStockVal('summary-grade-stock-entry', gradeCounts.entry.stock);
|
|
|
|
// 7. 연도별 PC 노후도 집계 및 렌더링
|
|
const agingCounts = {
|
|
immediate: [] as any[], // 7년 이상
|
|
review: [] as any[], // 3년 이상 7년 미만
|
|
normal: [] as any[], // 1년 이상 3년 미만
|
|
fresh: [] as any[] // 1년 미만
|
|
};
|
|
|
|
filtered.forEach((p: any) => {
|
|
const age = calculateAssetAge(p.purchase_date);
|
|
if (age >= 7.0) {
|
|
agingCounts.immediate.push(p);
|
|
} else if (age >= 3.0) {
|
|
agingCounts.review.push(p);
|
|
} else if (age >= 1.0) {
|
|
agingCounts.normal.push(p);
|
|
} else {
|
|
agingCounts.fresh.push(p);
|
|
}
|
|
});
|
|
|
|
const agingTbody = document.getElementById('pc-aging-tbody')!;
|
|
|
|
const renderAgingRow = (label: string, list: any[], badgeText: string, badgeStyle: string, ageGroupKey: string) => {
|
|
return `
|
|
<tr style="border-bottom:1px solid #F1F5F9; cursor:pointer; transition: background 0.2s;" class="aging-row" data-group="${ageGroupKey}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
|
|
<td style="padding:14px 4px; font-weight:700; color:#334155;">${label}</td>
|
|
<td style="padding:14px 4px; text-align:center; font-weight:700; color:#334155;">${list.length}대</td>
|
|
<td style="padding:14px 4px; text-align:center;">
|
|
<span style="padding:2px 8px; border-radius:4px; font-size:14px; font-weight:800; ${badgeStyle}">${badgeText}</span>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
};
|
|
|
|
agingTbody.innerHTML = `
|
|
${renderAgingRow('즉시 교체 (7년 이상)', agingCounts.immediate, '즉시 교체', 'background:#FFF1F2; color:#EF4444; border:1px solid #FCA5A5;', 'immediate')}
|
|
${renderAgingRow('교체 검토 (3년 ~ 7년)', agingCounts.review, '교체 검토', 'background:#FFF7ED; color:#D97706; border:1px solid #FCD34D;', 'review')}
|
|
${renderAgingRow('정상 운용 (1년 ~ 3년)', agingCounts.normal, '정상 운용', 'background:#ECFDF5; color:#059669; border:1px solid #A7F3D0;', 'normal')}
|
|
${renderAgingRow('최신 도입 (1년 미만)', agingCounts.fresh, '최신 도입', 'background:#F0FDF4; color:#16A34A; border:1px solid #BBF7D0;', 'fresh')}
|
|
`;
|
|
|
|
agingTbody.querySelectorAll('.aging-row').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
const groupKey = row.getAttribute('data-group') as any;
|
|
const groupList = agingCounts[groupKey as keyof typeof agingCounts];
|
|
const groupLabels = {
|
|
immediate: '즉시 교체 대상 (7년 이상)',
|
|
review: '교체 검토 대상 (3년 ~ 7년)',
|
|
normal: '정상 운용 장비 (1년 ~ 3년)',
|
|
fresh: '최신 도입 장비 (1년 미만)'
|
|
};
|
|
showMiniListModal(groupLabels[groupKey as keyof typeof groupLabels], groupList);
|
|
});
|
|
});
|
|
|
|
// 8. 각 등급 행 클릭 리스너 설정
|
|
const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean) => {
|
|
const card = document.getElementById(id)!;
|
|
if (!card) return;
|
|
card.style.cursor = 'pointer';
|
|
card.style.transition = 'opacity 0.2s';
|
|
|
|
card.onmouseover = () => { card.style.opacity = '0.7'; };
|
|
card.onmouseout = () => { card.style.opacity = '1'; };
|
|
|
|
card.onclick = () => {
|
|
const pcsInGrade = filtered.filter(filterFn);
|
|
showMiniListModal(gradeTitle, pcsInGrade);
|
|
};
|
|
};
|
|
|
|
bindCardClick('grade-premium', '최상급 PC', p => p._pc_score >= 85);
|
|
bindCardClick('grade-high', '상급 PC', p => p._pc_score >= 70 && p._pc_score < 85);
|
|
bindCardClick('grade-normal', '중급 PC', p => p._pc_score >= 40 && p._pc_score < 70);
|
|
bindCardClick('grade-entry', '보급 PC', p => p._pc_score < 40);
|
|
|
|
// 사양 부족 / 오버스펙 / 윈도우 11 불가 클릭 리스너 설정
|
|
bindCardClick('card-under-spec', '사양 부족 검토 대상', p => p._spec_status === '사양 부족');
|
|
bindCardClick('card-over-spec', '오버스펙 검토 대상', p => p._spec_status === '오버스펙');
|
|
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
|
|
|
|
|
|
// 8.2 유효 재고 현황 클릭 리스너 설정
|
|
bindCardClick('stock-premium-card', '최상급 유효 재고', p => p._pc_score >= 85 && isStock(p));
|
|
bindCardClick('stock-high-card', '상급 유효 재고', p => p._pc_score >= 70 && p._pc_score < 85 && isStock(p));
|
|
bindCardClick('stock-normal-card', '중급 유효 재고', p => p._pc_score >= 40 && p._pc_score < 70 && isStock(p));
|
|
bindCardClick('stock-entry-card', '보급 유효 재고', p => p._pc_score < 40 && isStock(p));
|
|
|
|
// 9. 직무별 사양 적정성 대수 연산 및 차트 데이터 셋 구성 (누적 막대 그래프화)
|
|
const activeJobs = Array.from(
|
|
new Set(filtered.map((p: any) => p[ASSET_SCHEMA.USER_POSITION.key] || '미분류').filter(j => j !== '재고PC'))
|
|
).sort();
|
|
|
|
const underData: number[] = [];
|
|
const normalData: number[] = [];
|
|
const overData: number[] = [];
|
|
|
|
activeJobs.forEach(job => {
|
|
const jobPcs = filtered.filter((p: any) => (p[ASSET_SCHEMA.USER_POSITION.key] || '미분류') === job);
|
|
const totalCount = jobPcs.length;
|
|
if (totalCount === 0) {
|
|
underData.push(0);
|
|
normalData.push(0);
|
|
overData.push(0);
|
|
return;
|
|
}
|
|
let under = 0;
|
|
let normal = 0;
|
|
let over = 0;
|
|
|
|
jobPcs.forEach(p => {
|
|
const stockYn = isStock(p);
|
|
if (!stockYn) {
|
|
if (p._spec_status === '사양 부족') { under++; }
|
|
else if (p._spec_status === '오버스펙') { over++; }
|
|
else { normal++; }
|
|
} else {
|
|
normal++; // 예외 폴백
|
|
}
|
|
});
|
|
|
|
underData.push(under);
|
|
normalData.push(normal);
|
|
overData.push(over);
|
|
});
|
|
|
|
// 10. 차트들 렌더링 호출
|
|
renderChart(activeJobs, underData, normalData, overData, filtered);
|
|
renderDonutChart(gradeCounts.premium.total, gradeCounts.high.total, gradeCounts.normal.total, gradeCounts.entry.total);
|
|
|
|
// 전역 상태 등록
|
|
state.activeCharts = [jobChartInstance, donutChartInstance];
|
|
}
|
|
|
|
/**
|
|
* 등급 클릭 시 열리는 심플 미니 리스트 모달 (라이트 글래스 헤더 적용)
|
|
*/
|
|
function showMiniListModal(title: string, list: any[]) {
|
|
const oldModal = document.getElementById('dashboard-mini-modal');
|
|
if (oldModal) oldModal.remove();
|
|
|
|
const modal = document.createElement('div');
|
|
modal.id = 'dashboard-mini-modal';
|
|
modal.style.cssText = `
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(15, 23, 42, 0.4);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Pretendard', sans-serif;
|
|
color: #1E293B;
|
|
`;
|
|
|
|
modal.innerHTML = `
|
|
<div style="background: white; border-radius: 12px; width: 680px; max-width: 90%; max-height: 80%; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); overflow: hidden; border: 1px solid #E2E8F0; animation: modalFadeIn 0.2s ease-out; color: #1E293B;">
|
|
<div style="padding: 1.25rem 1.75rem; border-bottom: 1px solid #F1F5F9; display: flex; justify-content: space-between; align-items: center; background: #F8FAFC;">
|
|
<h3 style="margin: 0; font-size: 1.26rem; font-weight: 850; color: #1E5149; display: flex; align-items: center; gap: 0.5rem;">
|
|
<span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#1E5149;"></span>
|
|
${title} 자산 목록
|
|
<span style="font-size: 0.96rem; font-weight: 700; color: white; background: #1E5149; padding: 2px 8px; border-radius: 9999px; margin-left: 0.25rem;">${list.length}대</span>
|
|
</h3>
|
|
<button id="btn-close-mini-modal" style="background: none; border: none; font-size: 1.25rem; color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; transition: background 0.2s;" onmouseover="this.style.background='#EEF2F6'; this.style.color='#1E5149';" onmouseout="this.style.background='none'; this.style.color='#94A3B8';">
|
|
×
|
|
</button>
|
|
</div>
|
|
<div style="padding: 0 1.75rem 1rem 1.75rem; overflow-y: auto; flex: 1;">
|
|
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.01rem; table-layout: fixed;">
|
|
<thead style="position: sticky; top: 0; background: white; z-index: 10;">
|
|
<tr style="border-bottom: 2px solid #E2E8F0; color: #64748B; font-weight: 800; background: white;">
|
|
<th style="padding: 10px 4px; width: 18%; background: white;">사용자</th>
|
|
<th style="padding: 10px 4px; width: 35%; background: white;">조직 (직무)</th>
|
|
<th style="padding: 10px 4px; width: 30%; background: white;">주요 사양</th>
|
|
<th style="padding: 10px 4px; text-align: center; background: white;">자산코드</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${list.length === 0
|
|
? `<tr><td colspan="4" style="text-align:center; padding:3rem; color:#94A3B8; font-weight:500;">해당 등급의 자산이 없습니다.</td></tr>`
|
|
: list.map(pc => {
|
|
const spec = `${pc.cpu || ''} / ${pc.ram || ''} / ${pc.gpu || '-'}`;
|
|
const user = pc.user_current || '(재고)';
|
|
return `
|
|
<tr style="border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.2s;" class="mini-modal-row" data-id="${pc.id}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
|
|
<td style="padding: 12px 4px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
|
|
<td style="padding: 12px 4px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc.user_position || '-'})">${pc.current_dept || '-'} (${pc.user_position || '-'})</td>
|
|
<td style="padding: 12px 4px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</td>
|
|
<td style="padding: 12px 4px; font-family: monospace; color: #475569; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
|
|
</tr>
|
|
`;
|
|
}).join('')
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="padding: 1rem 1.75rem; border-top: 1px solid #F1F5F9; display: flex; justify-content: flex-end; background: #F8FAFC;">
|
|
<button id="btn-confirm-mini-modal" style="padding: 6px 20px; font-size: 1.01rem; font-weight: 700; background: #1E5149; color: white; border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
@keyframes modalFadeIn {
|
|
from { transform: scale(0.96); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
`;
|
|
modal.appendChild(style);
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
const closeModal = () => { modal.remove(); };
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) closeModal();
|
|
});
|
|
|
|
document.getElementById('btn-close-mini-modal')?.addEventListener('click', closeModal);
|
|
document.getElementById('btn-confirm-mini-modal')?.addEventListener('click', closeModal);
|
|
|
|
modal.querySelectorAll('.mini-modal-row').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
const id = row.getAttribute('data-id');
|
|
const asset = list.find(p => String(p.id) === String(id));
|
|
if (asset) {
|
|
closeModal();
|
|
openHwModal(asset, 'view');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Chart.js 가로형 100% 스택 막대 차트 (라이트 테마 튜닝)
|
|
*/
|
|
function renderChart(labels: string[], underData: number[], normalData: number[], overData: number[], currentFiltered: any[]) {
|
|
const ctx = document.getElementById('chart-job-scores') as HTMLCanvasElement;
|
|
if (!ctx || typeof Chart === 'undefined') return;
|
|
|
|
if (jobChartInstance) {
|
|
jobChartInstance.destroy();
|
|
jobChartInstance = null;
|
|
}
|
|
|
|
jobChartInstance = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: '사양 부족',
|
|
data: underData,
|
|
backgroundColor: 'rgba(239, 68, 68, 0.85)', // Rose Red
|
|
borderColor: 'rgb(239, 68, 68)',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
barPercentage: 0.45,
|
|
categoryPercentage: 0.8
|
|
},
|
|
{
|
|
label: '적정 사양',
|
|
data: normalData,
|
|
backgroundColor: 'rgba(30, 81, 73, 0.85)', // Hanmac Green
|
|
borderColor: 'rgb(30, 81, 73)',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
barPercentage: 0.45,
|
|
categoryPercentage: 0.8
|
|
},
|
|
{
|
|
label: '오버스펙',
|
|
data: overData,
|
|
backgroundColor: 'rgba(217, 119, 6, 0.85)', // Amber Orange
|
|
borderColor: 'rgb(217, 119, 6)',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
barPercentage: 0.45,
|
|
categoryPercentage: 0.8
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
onHover: (event: any, activeElements: any[]) => {
|
|
event.chart.canvas.style.cursor = activeElements.length ? 'pointer' : 'default';
|
|
},
|
|
onClick: (event: any, activeElements: any[]) => {
|
|
if (activeElements && activeElements.length > 0) {
|
|
const activeElement = activeElements[0];
|
|
const datasetIndex = activeElement.datasetIndex; // 0: 사양 부족, 1: 적정 사양, 2: 오버스펙
|
|
const index = activeElement.index; // 직무군 인덱스
|
|
|
|
const clickedJob = labels[index];
|
|
const statusLabels = ['사양 부족', '적정', '오버스펙'];
|
|
const clickedStatus = statusLabels[datasetIndex] || '적정';
|
|
|
|
// 해당 직무군과 사양 상태가 매칭되는 자산 목록 필터링
|
|
const matchedPcs = currentFiltered.filter((p: any) => {
|
|
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
|
if (job !== clickedJob) return false;
|
|
|
|
const stockYn = p.hw_status === '재고' ||
|
|
p.hw_status === '대기' ||
|
|
!(p.user_current || '').trim();
|
|
|
|
let specStatus = '적정';
|
|
if (!stockYn) {
|
|
specStatus = p._spec_status || '적정';
|
|
}
|
|
return specStatus === clickedStatus;
|
|
});
|
|
|
|
showMiniListModal(`${clickedJob} - ${clickedStatus === '적정' ? '적정 사양' : clickedStatus} 자산`, matchedPcs);
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
align: 'end',
|
|
labels: {
|
|
font: { family: 'Pretendard', size: 11, weight: '700' },
|
|
color: '#475569',
|
|
boxWidth: 8,
|
|
boxHeight: 8,
|
|
usePointStyle: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
titleFont: { family: 'Pretendard', size: 12, weight: '700' },
|
|
bodyFont: { family: 'Pretendard', size: 12 },
|
|
callbacks: {
|
|
label: function (context: any) {
|
|
const datasetLabel = context.dataset.label;
|
|
const value = context.raw; // 실제 대수
|
|
const total = context.chart.data.datasets.reduce((sum: number, dataset: any) => sum + dataset.data[context.dataIndex], 0);
|
|
const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
|
|
return `${datasetLabel}: ${value}대 (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
stacked: true,
|
|
ticks: {
|
|
callback: (val: any) => `${val}대`,
|
|
font: { family: 'Pretendard', size: 10, weight: '600' },
|
|
color: '#64748B'
|
|
},
|
|
grid: { color: '#EEF2F6' }
|
|
},
|
|
y: {
|
|
stacked: true,
|
|
ticks: {
|
|
font: { family: 'Pretendard', size: 11, weight: '700' },
|
|
color: '#475569'
|
|
},
|
|
grid: { display: false }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)
|
|
*/
|
|
function renderDonutChart(premium: number, high: number, normal: number, entry: number) {
|
|
const ctx = document.getElementById('chart-overall-donut') as HTMLCanvasElement;
|
|
if (!ctx || typeof Chart === 'undefined') return;
|
|
|
|
if (donutChartInstance) {
|
|
donutChartInstance.destroy();
|
|
donutChartInstance = null;
|
|
}
|
|
|
|
const total = premium + high + normal + entry;
|
|
|
|
donutChartInstance = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['최상급', '상급', '중급', '보급'],
|
|
datasets: [{
|
|
data: [premium, high, normal, entry],
|
|
backgroundColor: [
|
|
'#11302B', // premium (Hanmac Dark Green)
|
|
'#1E8E7C', // high (Hanmac Teal)
|
|
'#10B981', // normal (Hanmac Mint)
|
|
'#94A3B8' // entry (Slate Gray)
|
|
],
|
|
borderColor: '#ffffff',
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '70%',
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
titleFont: { family: 'Pretendard', size: 12 },
|
|
bodyFont: { family: 'Pretendard', size: 12 },
|
|
callbacks: {
|
|
label: (context: any) => `${context.label}: ${context.raw}대`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 도넛 차트 중앙에 총 자산 대수 텍스트 오버레이 배치
|
|
const parent = ctx.parentElement!;
|
|
let textOverlay = parent.querySelector('.donut-text-overlay') as HTMLElement;
|
|
if (!textOverlay) {
|
|
textOverlay = document.createElement('div');
|
|
textOverlay.className = 'donut-text-overlay';
|
|
textOverlay.style.cssText = `
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -46%);
|
|
font-size: 1.56rem;
|
|
font-weight: 900;
|
|
color: #1E5149;
|
|
font-family: 'Pretendard', sans-serif;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
`;
|
|
parent.appendChild(textOverlay);
|
|
}
|
|
textOverlay.textContent = `총 ${total}대`;
|
|
}
|