dsyoon
3ab42d58ce
- Express에 /mgmt-perf → public/mgmt-perf 정적 마운트(기존 뷰 경로와 일치) - jsdelivr 대신 chart.umd.min.js 동봉으로 CDN 차단·오프라인 대응 - decodeMultipartFilename: Latin-1→UTF-8 복원 시 한글 검사 제거(ASCII·깨진 문자열 모두) - 페이로드/Chart 실패 시 사용자에게 빨간 안내, 차트 resize 이중 rAF Made-with: Cursor
981 lines
46 KiB
JavaScript
981 lines
46 KiB
JavaScript
(function () {
|
|
function showMgmtPerfEmbedError(msg) {
|
|
var root = document.querySelector(".mgmt-perf-embed");
|
|
if (!root) return;
|
|
var prev = document.getElementById("mgmt-perf-embed-error");
|
|
if (prev) prev.remove();
|
|
var el = document.createElement("div");
|
|
el.id = "mgmt-perf-embed-error";
|
|
el.setAttribute("role", "alert");
|
|
el.style.cssText =
|
|
"background:#ffebee;color:#b71c1c;padding:12px;margin:8px;border-radius:8px;font-size:13px;";
|
|
el.textContent = msg;
|
|
root.insertBefore(el, root.firstChild);
|
|
}
|
|
|
|
const payloadEl = document.getElementById("mgmt-perf-payload-json");
|
|
if (!payloadEl || !payloadEl.textContent.trim()) {
|
|
console.error("mgmt-perf: missing payload");
|
|
showMgmtPerfEmbedError("대시보드 데이터(JSON)가 없습니다. 서버 배포·페이지 소스를 확인하세요.");
|
|
return;
|
|
}
|
|
let P;
|
|
try {
|
|
P = JSON.parse(payloadEl.textContent);
|
|
} catch (err) {
|
|
console.error("mgmt-perf: invalid JSON", err);
|
|
showMgmtPerfEmbedError("대시보드 데이터 JSON 파싱에 실패했습니다.");
|
|
return;
|
|
}
|
|
if (typeof Chart === "undefined") {
|
|
console.error("mgmt-perf: Chart.js not loaded");
|
|
showMgmtPerfEmbedError(
|
|
"Chart.js를 불러오지 못했습니다. /mgmt-perf/chart.umd.min.js 경로·방화벽을 확인하세요."
|
|
);
|
|
return;
|
|
}
|
|
const UM = P.UM;
|
|
if (!UM || typeof UM !== "object") {
|
|
console.error("mgmt-perf: payload missing UM");
|
|
showMgmtPerfEmbedError("페이로드에 UM(매출 집계)이 없습니다. 스냅샷·기본 JSON을 확인하세요.");
|
|
return;
|
|
}
|
|
const ORDER_CAT = P.ORDER_CAT;
|
|
const CUSTS = P.CUSTS;
|
|
const RISK_ROWS = P.RISK_ROWS;
|
|
const ORDER_DATA = P.ORDER_DATA;
|
|
const MODELS = P.MODELS;
|
|
const FORECAST = P.FORECAST;
|
|
/** HTML id / data-section — 한글 id는 브라우저·정규화 이슈로 getElementById가 실패할 수 있어 ASCII만 사용 */
|
|
const SECTION = {
|
|
SALES: "mgmt-sec-sales",
|
|
ORDER: "mgmt-sec-order",
|
|
FORECAST: "mgmt-sec-forecast",
|
|
};
|
|
let state = {
|
|
currentDivision: 'all',
|
|
currentMonth: 'all',
|
|
currentSection: SECTION.SALES,
|
|
charts: {}
|
|
};
|
|
|
|
// Utility Functions
|
|
function formatCurrency(value) {
|
|
return '₩' + (value / 100000000).toFixed(1) + '억';
|
|
}
|
|
|
|
function formatNum(value) {
|
|
return (value / 100000000).toFixed(2);
|
|
}
|
|
|
|
function getDaysInMonth(month) {
|
|
const days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
|
return days[month - 1];
|
|
}
|
|
|
|
function isSectionActive(sectionId) {
|
|
return state.currentSection === sectionId;
|
|
}
|
|
|
|
// Initialize (iframe에서도 DOMContentLoaded가 이미 지난 경우 대비)
|
|
function bootMgmtPerfDashboard() {
|
|
try {
|
|
setupEventListeners();
|
|
// 숨겨진 탭(display:none)에 Chart를 그리면 캔버스 크기 0 → 매출현황만 먼저 그림. 수주/예상은 해당 탭이 보일 때만 렌더.
|
|
renderDivisionView();
|
|
} catch (err) {
|
|
console.error("mgmt-perf dashboard boot:", err);
|
|
var banner = document.createElement("div");
|
|
banner.setAttribute("role", "alert");
|
|
banner.style.cssText = "background:#ffebee;color:#b71c1c;padding:12px;margin:8px;border-radius:8px;font-size:13px;";
|
|
banner.textContent = "대시보드 스크립트 오류: " + (err && err.message ? err.message : String(err));
|
|
var root = document.querySelector(".mgmt-perf-embed") || document.body;
|
|
root.insertBefore(banner, root.firstChild);
|
|
}
|
|
}
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", bootMgmtPerfDashboard);
|
|
} else {
|
|
bootMgmtPerfDashboard();
|
|
}
|
|
|
|
function setupEventListeners() {
|
|
// Division slicer
|
|
document.querySelectorAll('#divisionSlicer .slicer-tab').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
document.querySelectorAll('#divisionSlicer .slicer-tab').forEach(b => b.classList.remove('active'));
|
|
e.target.classList.add('active');
|
|
state.currentDivision = e.target.dataset.division;
|
|
renderDivisionView();
|
|
});
|
|
});
|
|
|
|
// Month slicer
|
|
document.querySelectorAll('#monthSlicer .slicer-tab').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
document.querySelectorAll('#monthSlicer .slicer-tab').forEach(b => b.classList.remove('active'));
|
|
e.target.classList.add('active');
|
|
state.currentMonth = e.target.dataset.month;
|
|
renderDivisionView();
|
|
});
|
|
});
|
|
|
|
// Section tabs
|
|
document.querySelectorAll('.section-tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
document.querySelectorAll('.section-tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
|
e.target.classList.add('active');
|
|
const sectionName = e.target.dataset.section;
|
|
state.currentSection = sectionName;
|
|
document.getElementById(sectionName).classList.add('active');
|
|
// 탭 전환 후 레이아웃이 잡힌 뒤 차트 재생성 (숨겨진 패널 문제 방지)
|
|
requestAnimationFrame(function () {
|
|
renderDivisionView();
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function destroyChart(chartId) {
|
|
if (state.charts[chartId]) {
|
|
state.charts[chartId].destroy();
|
|
delete state.charts[chartId];
|
|
}
|
|
}
|
|
|
|
/** 숨김 탭·레이아웃 직후 캔버스 크기 0인 경우 대비 */
|
|
function scheduleChartReflow() {
|
|
requestAnimationFrame(function () {
|
|
requestAnimationFrame(function () {
|
|
Object.keys(state.charts).forEach(function (id) {
|
|
var ch = state.charts[id];
|
|
if (ch && typeof ch.resize === "function") ch.resize();
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Division-to-order-key mapping
|
|
const DIV_TO_ORDER = {
|
|
fscan: ['fscan'],
|
|
fscanovs: ['ovsFscan'],
|
|
xscan: ['xscan'],
|
|
xscanovs: ['ovsXscan'],
|
|
battery: ['battery'],
|
|
newbiz: ['newbiz']
|
|
};
|
|
|
|
function renderDivisionView() {
|
|
const isOverviewMode = state.currentDivision === 'all';
|
|
const showModels = !["battery", "newbiz"].includes(state.currentDivision);
|
|
const modelDisplay = showModels ? "grid" : "none";
|
|
const mon = state.currentMonth;
|
|
const monthIdx = mon === "all" ? [0, 1, 2] : [parseInt(mon, 10) - 1];
|
|
|
|
// 매출현황 탭이 보일 때만 KPI·매출 차트 렌더 (숨겨진 영역에 그리면 Chart.js 높이 0)
|
|
if (isSectionActive(SECTION.SALES)) {
|
|
document.getElementById("overviewMode").style.display = isOverviewMode ? "block" : "none";
|
|
document.getElementById("divisionDetailMode").style.display = isOverviewMode ? "none" : "block";
|
|
if (isOverviewMode) {
|
|
renderOverviewMode();
|
|
} else {
|
|
renderDivisionDetailMode();
|
|
}
|
|
const smr = document.getElementById("salesModelRow");
|
|
if (smr) smr.style.display = modelDisplay;
|
|
if (showModels) {
|
|
renderSalesModelCharts(monthIdx);
|
|
}
|
|
renderSalesCategoryCharts(monthIdx);
|
|
scheduleChartReflow();
|
|
}
|
|
|
|
const omr = document.getElementById("orderModelRow");
|
|
if (omr && isSectionActive(SECTION.ORDER)) {
|
|
omr.style.display = modelDisplay;
|
|
}
|
|
|
|
if (isSectionActive(SECTION.ORDER)) {
|
|
renderOrderSection();
|
|
scheduleChartReflow();
|
|
}
|
|
if (isSectionActive(SECTION.FORECAST)) {
|
|
renderForecastSection();
|
|
scheduleChartReflow();
|
|
}
|
|
}
|
|
|
|
// Helper: get total sales for a division for given month indices
|
|
function getDivSales(d, monthIdx) {
|
|
return monthIdx.reduce((s, i) => s + (d.mp[i]||0) + (d.mc[i]||0) + (d.mg[i]||0), 0);
|
|
}
|
|
|
|
function renderOverviewMode() {
|
|
const divisionKeys = ['fscan', 'fscanovs', 'xscan', 'xscanovs', 'battery', 'newbiz'];
|
|
const divisions = divisionKeys.map(k => UM[k]);
|
|
const mon = state.currentMonth;
|
|
const monthIdx = mon === 'all' ? [0,1,2] : [parseInt(mon)-1];
|
|
const monLabel = mon === 'all' ? 'Q1' : mon + '월';
|
|
|
|
// Calculate totals based on selected month
|
|
const totalSales = divisions.reduce((s, d) => s + getDivSales(d, monthIdx), 0);
|
|
const totalTgt = mon === 'all'
|
|
? divisions.reduce((s, d) => s + d.tgt, 0)
|
|
: divisions.reduce((s, d) => s + d.tgt / 3, 0); // monthly avg target
|
|
const achRate = totalTgt > 0 ? (totalSales / totalTgt * 100).toFixed(1) : '0.0';
|
|
|
|
// KPI Cards
|
|
const kpiHtml = `
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">${monLabel} 매출</div>
|
|
<div class="kpi-value large">${formatNum(totalSales)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">${monLabel} 목표</div>
|
|
<div class="kpi-value">${formatNum(totalTgt)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">목표달성률</div>
|
|
<div class="kpi-value">${achRate}%</div>
|
|
<div class="kpi-subtext">${parseFloat(achRate) >= 100 ? '초과달성' : '진행중'}</div>
|
|
</div>
|
|
<div class="kpi-card warning">
|
|
<div class="kpi-label">미발행 잔액</div>
|
|
<div class="kpi-value" style="color: #ff9800;">${formatNum(UM.all.ub)}</div>
|
|
<div class="kpi-subtext">리스크관리 필요</div>
|
|
</div>
|
|
`;
|
|
document.getElementById('overviewKpis').innerHTML = kpiHtml;
|
|
|
|
// Monthly Trend - highlight selected month
|
|
destroyChart('monthlyTrendChart');
|
|
const monthlyCtx = document.getElementById('monthlyTrendChart').getContext('2d');
|
|
state.charts['monthlyTrendChart'] = new Chart(monthlyCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1월', '2월', '3월'],
|
|
datasets: divisionKeys.map(k => {
|
|
const d = UM[k];
|
|
const pRadius = [0,1,2].map(i => {
|
|
if (mon === 'all') return 6;
|
|
return parseInt(mon)-1 === i ? 10 : 4;
|
|
});
|
|
return {
|
|
label: d.nm.replace(/ (영업|사업)본부/,''),
|
|
data: d.mp.map(v => v/1e8),
|
|
borderColor: d.c,
|
|
backgroundColor: d.c + '15',
|
|
borderWidth: 3, pointRadius: pRadius, pointBackgroundColor: d.c,
|
|
tension: 0.3, fill: false
|
|
};
|
|
})
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: true, position: 'top' } },
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
});
|
|
|
|
// Division Sales - filtered by month
|
|
destroyChart('divisionSalesChart');
|
|
const divSalesCtx = document.getElementById('divisionSalesChart').getContext('2d');
|
|
const divSalesData = divisions.map(d => getDivSales(d, monthIdx) / 1e8);
|
|
state.charts['divisionSalesChart'] = new Chart(divSalesCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: divisions.map(d => d.nm),
|
|
datasets: [{
|
|
label: monLabel + ' 매출',
|
|
data: divSalesData,
|
|
backgroundColor: divisions.map(d => d.c),
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: { x: { beginAtZero: true } }
|
|
}
|
|
});
|
|
|
|
// Target vs Actual - filtered by month
|
|
destroyChart('targetVsActualChart');
|
|
const tgtCtx = document.getElementById('targetVsActualChart').getContext('2d');
|
|
state.charts['targetVsActualChart'] = new Chart(tgtCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: divisions.map(d => d.nm),
|
|
datasets: [
|
|
{ label: '목표', data: divisions.map(d => (mon==='all' ? d.tgt : d.tgt/3) / 1e8), backgroundColor: '#ddd', borderRadius: 4 },
|
|
{ label: '실적', data: divisions.map(d => getDivSales(d, monthIdx) / 1e8), backgroundColor: divisions.map(d => d.c), borderRadius: 4 }
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
});
|
|
|
|
// Achievement Rate - Horizontal Bar (month-aware)
|
|
destroyChart('achievementRateChart');
|
|
const achCtx = document.getElementById('achievementRateChart').getContext('2d');
|
|
const achRates = divisions.map(d => {
|
|
const tgt = mon === 'all' ? d.tgt : d.tgt / 3;
|
|
const sales = getDivSales(d, monthIdx);
|
|
return tgt > 0 ? (sales / tgt * 100) : 0;
|
|
});
|
|
state.charts['achievementRateChart'] = new Chart(achCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: divisions.map(d => d.nm),
|
|
datasets: [{
|
|
label: '달성률 (%)',
|
|
data: achRates,
|
|
backgroundColor: divisions.map((d, i) => achRates[i] >= 100 ? '#cc0000' : '#999'),
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { callbacks: { label: ctx => ctx.raw.toFixed(1) + '%' } }
|
|
},
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true,
|
|
ticks: { callback: v => v + '%' },
|
|
grid: { display: true }
|
|
},
|
|
y: { grid: { display: false } }
|
|
}
|
|
},
|
|
plugins: [{
|
|
afterDatasetsDraw: function(chart) {
|
|
const ctx2 = chart.ctx;
|
|
chart.data.datasets[0].data.forEach((val, i) => {
|
|
const meta = chart.getDatasetMeta(0).data[i];
|
|
if (meta) {
|
|
ctx2.fillStyle = '#333';
|
|
ctx2.font = 'bold 12px sans-serif';
|
|
ctx2.textAlign = 'left';
|
|
ctx2.textBaseline = 'middle';
|
|
ctx2.fillText(val.toFixed(1) + '%', meta.x + 6, meta.y);
|
|
}
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
|
|
function renderSalesCategoryCharts(monthIdx) {
|
|
const div = state.currentDivision;
|
|
const divKeys = div === 'all' ? ['fscan','fscanovs','xscan','xscanovs','battery','newbiz'] : [div];
|
|
|
|
let prodTotal = 0, csTotal = 0, goodsTotal = 0;
|
|
divKeys.forEach(k => {
|
|
const d = UM[k];
|
|
prodTotal += monthIdx.reduce((s,i) => s + (d.mp[i]||0), 0);
|
|
csTotal += monthIdx.reduce((s,i) => s + (d.mc[i]||0), 0);
|
|
goodsTotal += monthIdx.reduce((s,i) => s + (d.mg[i]||0), 0);
|
|
});
|
|
const total = prodTotal + csTotal + goodsTotal;
|
|
|
|
const titleSuffix = div === 'all' ? '' : ' (' + UM[div].nm + ')';
|
|
document.getElementById('salesCatTitle').textContent = '매출유형별 비중' + titleSuffix;
|
|
document.getElementById('salesCatBarTitle').textContent = '매출유형별 금액 (단위: 억원)' + titleSuffix;
|
|
|
|
// Doughnut chart
|
|
destroyChart('salesCatChart');
|
|
const catData = [prodTotal, csTotal, goodsTotal].map(v => v / 1e8);
|
|
const catColors = ['#cc0000', '#1565C0', '#F57C00'];
|
|
const catLabels = ['제품매출', 'CS매출', '상품매출'];
|
|
// Filter out zero values
|
|
const filtered = catLabels.map((l, i) => ({label: l, value: catData[i], color: catColors[i]})).filter(x => x.value > 0);
|
|
|
|
state.charts['salesCatChart'] = new Chart(document.getElementById('salesCatChart').getContext('2d'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: filtered.map(x => x.label),
|
|
datasets: [{
|
|
data: filtered.map(x => x.value),
|
|
backgroundColor: filtered.map(x => x.color),
|
|
borderWidth: 2, borderColor: '#fff'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { padding: 15, font: { size: 12 } } },
|
|
tooltip: { callbacks: { label: ctx => {
|
|
const pct = total > 0 ? (ctx.raw * 1e8 / total * 100).toFixed(1) : '0';
|
|
return ctx.label + ': ' + ctx.raw.toFixed(1) + '억 (' + pct + '%)';
|
|
}}}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Bar chart
|
|
destroyChart('salesCatBarChart');
|
|
state.charts['salesCatBarChart'] = new Chart(document.getElementById('salesCatBarChart').getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: filtered.map(x => x.label),
|
|
datasets: [{
|
|
data: filtered.map(x => x.value),
|
|
backgroundColor: filtered.map(x => x.color),
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: { legend: { display: false },
|
|
tooltip: { callbacks: { label: ctx => ctx.raw.toFixed(1) + '억원' } }
|
|
},
|
|
scales: { y: { beginAtZero: true, ticks: { callback: v => v + '억' } }, x: { grid: { display: false } } }
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderOrderCategoryCharts(monthIdx) {
|
|
const div = state.currentDivision;
|
|
const divKeys = div === 'all' ? ['fscan','fscanovs','xscan','xscanovs','battery','newbiz'] : [div];
|
|
|
|
let prodTotal = 0, goodsTotal = 0;
|
|
divKeys.forEach(k => {
|
|
const d = ORDER_CAT[k];
|
|
if (d) {
|
|
prodTotal += monthIdx.reduce((s,i) => s + (d.op[i]||0), 0);
|
|
goodsTotal += monthIdx.reduce((s,i) => s + (d.og[i]||0), 0);
|
|
}
|
|
});
|
|
const total = prodTotal + goodsTotal;
|
|
|
|
const titleSuffix = div === 'all' ? '' : ' (' + UM[div].nm + ')';
|
|
document.getElementById('orderCatTitle').textContent = '수주유형별 비중' + titleSuffix;
|
|
document.getElementById('orderCatBarTitle').textContent = '수주유형별 금액 (단위: 억원)' + titleSuffix;
|
|
|
|
// Doughnut
|
|
destroyChart('orderCatChart');
|
|
const catData = [prodTotal, goodsTotal].map(v => v / 1e8);
|
|
const catColors = ['#cc0000', '#F57C00'];
|
|
const catLabels = ['제품수주', '상품수주'];
|
|
const filtered = catLabels.map((l, i) => ({label: l, value: catData[i], color: catColors[i]})).filter(x => x.value > 0);
|
|
|
|
if (filtered.length > 0) {
|
|
state.charts['orderCatChart'] = new Chart(document.getElementById('orderCatChart').getContext('2d'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: filtered.map(x => x.label),
|
|
datasets: [{
|
|
data: filtered.map(x => x.value),
|
|
backgroundColor: filtered.map(x => x.color),
|
|
borderWidth: 2, borderColor: '#fff'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { padding: 15, font: { size: 12 } } },
|
|
tooltip: { callbacks: { label: ctx => {
|
|
const pct = total > 0 ? (ctx.raw * 1e8 / total * 100).toFixed(1) : '0';
|
|
return ctx.label + ': ' + ctx.raw.toFixed(1) + '억 (' + pct + '%)';
|
|
}}}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Bar
|
|
destroyChart('orderCatBarChart');
|
|
if (filtered.length > 0) {
|
|
state.charts['orderCatBarChart'] = new Chart(document.getElementById('orderCatBarChart').getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: filtered.map(x => x.label),
|
|
datasets: [{
|
|
data: filtered.map(x => x.value),
|
|
backgroundColor: filtered.map(x => x.color),
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: { legend: { display: false },
|
|
tooltip: { callbacks: { label: ctx => ctx.raw.toFixed(1) + '억원' } }
|
|
},
|
|
scales: { y: { beginAtZero: true, ticks: { callback: v => v + '억' } }, x: { grid: { display: false } } }
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderModelChart(canvasId, models, monthIdx, color) {
|
|
destroyChart(canvasId);
|
|
const ctx = document.getElementById(canvasId).getContext('2d');
|
|
const top6 = models.slice(0, 6);
|
|
const data = top6.map(m => monthIdx.reduce((s, i) => s + (m.m[i]||0), 0) / 1e8);
|
|
state.charts[canvasId] = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: top6.map(m => m.model),
|
|
datasets: [{
|
|
label: '매출 (억원)',
|
|
data: data,
|
|
backgroundColor: top6.map((_, i) => {
|
|
const opacity = 1 - (i * 0.12);
|
|
return color + Math.round(opacity * 255).toString(16).padStart(2, '0');
|
|
}),
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: { x: { beginAtZero: true }, y: { grid: { display: false } } }
|
|
}
|
|
});
|
|
}
|
|
|
|
// Combine two model arrays, re-sort by amt and take top 5
|
|
function combineModels(a, b) {
|
|
return [...(a||[]), ...(b||[])].sort((x,y) => y.amt - x.amt).slice(0, 5);
|
|
}
|
|
|
|
function getModelDataForDiv(section, brand) {
|
|
const div = state.currentDivision;
|
|
const src = section === 'sales' ? MODELS.sales : MODELS.orders;
|
|
if (brand === 'fscan') {
|
|
if (div === 'fscan') return src.fscan || [];
|
|
if (div === 'fscanovs') return src.fscanovs || [];
|
|
return combineModels(src.fscan, src.fscanovs); // all or xscan divisions
|
|
} else {
|
|
if (div === 'xscan') return src.xscan || [];
|
|
if (div === 'xscanovs') return src.xscanovs || [];
|
|
return combineModels(src.xscan, src.xscanovs); // all or fscan divisions
|
|
}
|
|
}
|
|
|
|
function getModelTitle(brand, section, div) {
|
|
const sectionLabel = section === 'sales' ? '매출' : '수주';
|
|
if (brand === 'fscan') {
|
|
if (div === 'fscan') return 'FSCAN 국내 주요 모델별 ' + sectionLabel + ' Top 5';
|
|
if (div === 'fscanovs') return 'FSCAN 해외 주요 모델별 ' + sectionLabel + ' Top 5';
|
|
return 'FSCAN 주요 모델별 ' + sectionLabel + ' Top 5';
|
|
} else {
|
|
if (div === 'xscan') return 'XSCAN 국내 주요 모델별 ' + sectionLabel + ' Top 5';
|
|
if (div === 'xscanovs') return 'XSCAN 해외 주요 모델별 ' + sectionLabel + ' Top 5';
|
|
return 'XSCAN 주요 모델별 ' + sectionLabel + ' Top 5';
|
|
}
|
|
}
|
|
|
|
function renderSalesModelCharts(monthIdx) {
|
|
const div = state.currentDivision;
|
|
document.getElementById('fscanSalesModelTitle').textContent = getModelTitle('fscan', 'sales', div);
|
|
document.getElementById('xscanSalesModelTitle').textContent = getModelTitle('xscan', 'sales', div);
|
|
renderModelChart('fscanModelChart', getModelDataForDiv('sales', 'fscan'), monthIdx, '#cc0000');
|
|
renderModelChart('xscanModelChart', getModelDataForDiv('sales', 'xscan'), monthIdx, '#2E7D32');
|
|
}
|
|
|
|
function renderOrderModelCharts(monthIdx) {
|
|
const div = state.currentDivision;
|
|
document.getElementById('fscanOrderModelTitle').textContent = getModelTitle('fscan', 'orders', div);
|
|
document.getElementById('xscanOrderModelTitle').textContent = getModelTitle('xscan', 'orders', div);
|
|
renderModelChart('fscanOrderModelChart', getModelDataForDiv('orders', 'fscan'), monthIdx, '#cc0000');
|
|
renderModelChart('xscanOrderModelChart', getModelDataForDiv('orders', 'xscan'), monthIdx, '#2E7D32');
|
|
}
|
|
|
|
function renderDivisionDetailMode() {
|
|
const div = UM[state.currentDivision];
|
|
if (!div) return;
|
|
const mon = state.currentMonth;
|
|
const monthIdx = mon === 'all' ? [0,1,2] : [parseInt(mon)-1];
|
|
const monLabel = mon === 'all' ? 'Q1' : mon + '월';
|
|
|
|
const customers = CUSTS[state.currentDivision] || [];
|
|
const totalCust = customers.reduce((s, c) => s + c.amt, 0);
|
|
|
|
// Detail KPIs - month aware
|
|
const divSales = getDivSales(div, monthIdx);
|
|
const divTgt = mon === 'all' ? div.tgt : div.tgt / 3;
|
|
const achieveRate = divTgt > 0 ? (divSales / divTgt * 100).toFixed(1) : '0.0';
|
|
const domPct = div.q1 > 0 ? ((div.dom / div.q1) * 100).toFixed(1) : '0.0';
|
|
const ovsPct = div.q1 > 0 ? ((div.ovs / div.q1) * 100).toFixed(1) : '0.0';
|
|
const prevMonthGrowth = div.mp[2] > 0 && div.mp[1] > 0 ? ((div.mp[2] / div.mp[1] - 1) * 100).toFixed(1) : 'N/A';
|
|
|
|
const detailKpis = `
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">${monLabel} 매출</div>
|
|
<div class="kpi-value">${formatNum(divSales)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">목표달성률</div>
|
|
<div class="kpi-value">${achieveRate}%</div>
|
|
<div class="kpi-subtext">${parseFloat(achieveRate) >= 100 ? '초과' : '진행중'}</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">국내/해외 비중</div>
|
|
<div class="kpi-value">${domPct}% / ${ovsPct}%</div>
|
|
<div class="kpi-subtext">국내 / 해외</div>
|
|
</div>
|
|
<div class="kpi-card warning">
|
|
<div class="kpi-label">미발행 잔액</div>
|
|
<div class="kpi-value" style="color: #ff9800;">${formatNum(div.ub)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">전월비 성장률</div>
|
|
<div class="kpi-value">${prevMonthGrowth}%</div>
|
|
<div class="kpi-subtext">3월 vs 2월</div>
|
|
</div>
|
|
`;
|
|
document.getElementById('divisionDetailKpis').innerHTML = detailKpis;
|
|
|
|
// Monthly Trend for Division
|
|
destroyChart('divisionMonthlyChart');
|
|
const monthCtx = document.getElementById('divisionMonthlyChart').getContext('2d');
|
|
state.charts['divisionMonthlyChart'] = new Chart(monthCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['1월', '2월', '3월'],
|
|
datasets: [{
|
|
label: div.nm,
|
|
data: [div.mp[0]/100000000, div.mp[1]/100000000, div.mp[2]/100000000],
|
|
backgroundColor: div.c
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
});
|
|
|
|
// Customer Share
|
|
destroyChart('customerShareChart');
|
|
const custCtx = document.getElementById('customerShareChart').getContext('2d');
|
|
const topCustomers = customers.slice(0, 5);
|
|
state.charts['customerShareChart'] = new Chart(custCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: topCustomers.map(c => c.nm),
|
|
datasets: [{
|
|
data: topCustomers.map(c => (c.amt / totalCust * 100).toFixed(1)),
|
|
backgroundColor: ['#cc0000', '#1565C0', '#2E7D32', '#F57C00', '#7B1FA2']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: true, position: 'bottom' } }
|
|
}
|
|
});
|
|
|
|
// Customer Table
|
|
const custTable = document.getElementById('customerTable').querySelector('tbody');
|
|
custTable.innerHTML = customers.map((c, i) => `
|
|
<tr>
|
|
<td><span class="rank-badge">${i+1}</span></td>
|
|
<td>${c.nm}</td>
|
|
<td>${c.gbn}</td>
|
|
<td>${c.acc}</td>
|
|
<td class="num-cell">${formatCurrency(c.amt)}</td>
|
|
<td class="percent-cell">${(c.amt / totalCust * 100).toFixed(1)}%</td>
|
|
<td class="num-cell">${formatCurrency(c.ub)}</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
// Risk Section
|
|
const riskTotal = customers.reduce((s, c) => s + c.ub, 0);
|
|
document.getElementById('divisionRiskTotal').textContent = formatCurrency(riskTotal);
|
|
|
|
// Risk by Customer
|
|
const riskCustomers = customers.filter(c => c.ub > 0).sort((a, b) => b.ub - a.ub);
|
|
destroyChart('riskByCustomerChart');
|
|
const riskCtx = document.getElementById('riskByCustomerChart').getContext('2d');
|
|
state.charts['riskByCustomerChart'] = new Chart(riskCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: riskCustomers.map(c => c.nm.substring(0, 15)),
|
|
datasets: [{
|
|
label: '미발행금액',
|
|
data: riskCustomers.map(c => c.ub / 100000000),
|
|
backgroundColor: '#ff9800'
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: { x: { beginAtZero: true } }
|
|
}
|
|
});
|
|
|
|
// Risk Detail Table
|
|
const riskTable = document.getElementById('riskDetailTable').querySelector('tbody');
|
|
const filteredRisk = RISK_ROWS.filter(r => {
|
|
const divMap = {'FSCAN국내': 'fscan', 'FSCAN해외': 'fscanovs', 'XSCAN': 'xscan', 'XSCAN해외': 'xscanovs', '배터리': 'battery', '신사업': 'newbiz'};
|
|
return divMap[r.본] === state.currentDivision;
|
|
});
|
|
riskTable.innerHTML = filteredRisk.map(r => `
|
|
<tr>
|
|
<td>${r.월}월</td>
|
|
<td>${r.본}</td>
|
|
<td>${r.고}</td>
|
|
<td>${r.품}</td>
|
|
<td class="num-cell">${formatCurrency(r.amt)}</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function renderOrderSection() {
|
|
const div = state.currentDivision;
|
|
const mon = state.currentMonth;
|
|
const divData = ORDER_DATA.divisions;
|
|
const monthIdx = mon === 'all' ? [0,1,2] : [parseInt(mon)-1];
|
|
const monthLabels = mon === 'all' ? ['1월','2월','3월'] : [mon + '월'];
|
|
|
|
// Filter divisions by slicer
|
|
let filteredDivKeys;
|
|
if (div === 'all') {
|
|
filteredDivKeys = Object.keys(divData);
|
|
} else {
|
|
filteredDivKeys = DIV_TO_ORDER[div] || [];
|
|
}
|
|
|
|
// Calculate aggregated actual/plan for filtered divisions & months
|
|
let totalActual = 0, totalPlan = 0;
|
|
filteredDivKeys.forEach(k => {
|
|
const d = divData[k];
|
|
if (d) monthIdx.forEach(i => { totalActual += d.actual[i]; totalPlan += d.plan[i]; });
|
|
});
|
|
|
|
// Monthly aggregates for chart
|
|
const monthlyActual = [0,1,2].map(i => {
|
|
let s = 0; filteredDivKeys.forEach(k => { if(divData[k]) s += divData[k].actual[i]; }); return s;
|
|
});
|
|
const monthlyPlan = [0,1,2].map(i => {
|
|
let s = 0; filteredDivKeys.forEach(k => { if(divData[k]) s += divData[k].plan[i]; }); return s;
|
|
});
|
|
|
|
const divLabel = div === 'all' ? '전체' : UM[div].nm;
|
|
const monLabel = mon === 'all' ? 'Q1' : mon + '월';
|
|
|
|
// KPIs
|
|
const achRate = totalPlan > 0 ? (totalActual / totalPlan * 100).toFixed(1) : '0.0';
|
|
const kpis = `
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">${monLabel} 수주 실적</div>
|
|
<div class="kpi-value">${totalActual.toFixed(2)}</div>
|
|
<div class="kpi-subtext">억원 ${div !== 'all' ? '| ' + divLabel : ''}</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">${monLabel} 계획</div>
|
|
<div class="kpi-value">${totalPlan.toFixed(2)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">달성률</div>
|
|
<div class="kpi-value">${achRate}%</div>
|
|
<div class="kpi-subtext">계획 대비</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">GAP</div>
|
|
<div class="kpi-value" style="color:${totalActual >= totalPlan ? '#2E7D32' : '#cc0000'}">${(totalActual - totalPlan).toFixed(2)}</div>
|
|
<div class="kpi-subtext">억원 ${totalActual >= totalPlan ? '초과' : '부족'}</div>
|
|
</div>
|
|
`;
|
|
document.getElementById('orderKpis').innerHTML = kpis;
|
|
|
|
// Monthly Order Chart (always show all 3 months, highlight selected)
|
|
destroyChart('orderMonthlyChart');
|
|
const monthCtx = document.getElementById('orderMonthlyChart').getContext('2d');
|
|
const barBgActual = ['1월','2월','3월'].map((m,i) => {
|
|
if (mon === 'all' || parseInt(mon)-1 === i) return '#cc0000';
|
|
return 'rgba(204,0,0,0.25)';
|
|
});
|
|
const barBgPlan = ['1월','2월','3월'].map((m,i) => {
|
|
if (mon === 'all' || parseInt(mon)-1 === i) return '#ccc';
|
|
return 'rgba(204,204,204,0.25)';
|
|
});
|
|
state.charts['orderMonthlyChart'] = new Chart(monthCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['1월','2월','3월'],
|
|
datasets: [
|
|
{ label: '실적', data: monthlyActual, backgroundColor: barBgActual, borderRadius: 4 },
|
|
{ label: '계획', data: monthlyPlan, backgroundColor: barBgPlan, borderRadius: 4 }
|
|
]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
|
|
});
|
|
|
|
// Division Order Chart
|
|
destroyChart('orderByDivisionChart');
|
|
const divCtx = document.getElementById('orderByDivisionChart').getContext('2d');
|
|
const divColors = {fscan:'#cc0000', xscan:'#2E7D32', ovsFscan:'#1565C0', ovsXscan:'#0D47A1', battery:'#F57C00', newbiz:'#7B1FA2'};
|
|
const showDivKeys = div === 'all' ? Object.keys(divData) : filteredDivKeys;
|
|
state.charts['orderByDivisionChart'] = new Chart(divCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: showDivKeys.map(k => divData[k].nm),
|
|
datasets: [{
|
|
label: monLabel + ' 실적',
|
|
data: showDivKeys.map(k => {
|
|
let s = 0; monthIdx.forEach(i => { s += divData[k].actual[i]; }); return s;
|
|
}),
|
|
backgroundColor: showDivKeys.map(k => divColors[k] || '#cc0000'),
|
|
borderRadius: 4
|
|
},{
|
|
label: monLabel + ' 계획',
|
|
data: showDivKeys.map(k => {
|
|
let s = 0; monthIdx.forEach(i => { s += divData[k].plan[i]; }); return s;
|
|
}),
|
|
backgroundColor: showDivKeys.map(() => '#ddd'),
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { beginAtZero: true } } }
|
|
});
|
|
|
|
// Detail Table
|
|
const detailTable = document.getElementById('orderDetailTable').querySelector('tbody');
|
|
detailTable.innerHTML = showDivKeys.map(key => {
|
|
const d = divData[key];
|
|
const q1 = d.actual[0] + d.actual[1] + d.actual[2];
|
|
const planQ1 = d.plan[0] + d.plan[1] + d.plan[2];
|
|
const rate = planQ1 > 0 ? (q1 / planQ1 * 100).toFixed(1) : '-';
|
|
const isSel = mon !== 'all';
|
|
return `
|
|
<tr${isSel ? '' : ''}>
|
|
<td>${d.nm}</td>
|
|
<td class="num-cell" style="${mon==='1'?'font-weight:700;color:#cc0000':''}">${d.actual[0].toFixed(2)}</td>
|
|
<td class="num-cell" style="${mon==='2'?'font-weight:700;color:#cc0000':''}">${d.actual[1].toFixed(2)}</td>
|
|
<td class="num-cell" style="${mon==='3'?'font-weight:700;color:#cc0000':''}">${d.actual[2].toFixed(2)}</td>
|
|
<td class="num-cell" style="font-weight:700;">${q1.toFixed(2)}</td>
|
|
<td class="num-cell">${planQ1.toFixed(2)}</td>
|
|
<td class="percent-cell">${rate}%</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
|
|
// Order Model Charts — division-aware
|
|
renderOrderModelCharts(monthIdx);
|
|
|
|
// Order Category Charts (제품수주/상품수주)
|
|
renderOrderCategoryCharts(monthIdx);
|
|
}
|
|
|
|
function renderForecastSection() {
|
|
const div = state.currentDivision;
|
|
const divData = ORDER_DATA.divisions;
|
|
|
|
// If a specific division is selected, compute division-level forecast
|
|
let planData, actualData, bepVal, annPlan, annBep;
|
|
if (div === 'all') {
|
|
planData = FORECAST.plan;
|
|
actualData = FORECAST.actual;
|
|
bepVal = FORECAST.bep;
|
|
annPlan = FORECAST.annualPlanTotal;
|
|
annBep = FORECAST.annualBepTotal;
|
|
} else {
|
|
const keys = DIV_TO_ORDER[div] || [];
|
|
// Build monthly plan/actual from division order data (6 months available)
|
|
planData = Array(12).fill(0);
|
|
actualData = Array(12).fill(0);
|
|
keys.forEach(k => {
|
|
const d = divData[k];
|
|
if (d) {
|
|
for (let i = 0; i < 6; i++) { planData[i] += d.plan[i]; actualData[i] += d.actual[i]; }
|
|
}
|
|
});
|
|
annPlan = planData.reduce((s,v) => s+v, 0);
|
|
annBep = annPlan * (FORECAST.annualBepTotal / FORECAST.annualPlanTotal);
|
|
bepVal = annBep / 12;
|
|
}
|
|
|
|
const divLabel = div === 'all' ? '전체' : UM[div].nm;
|
|
const annualActual = actualData.reduce((s, v) => s + v, 0);
|
|
const achRate = annPlan > 0 ? (annualActual / annPlan * 100).toFixed(1) : '0.0';
|
|
|
|
const kpis = `
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">연간 계획 ${div !== 'all' ? '| ' + divLabel : ''}</div>
|
|
<div class="kpi-value">${annPlan.toFixed(2)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">손익분기점</div>
|
|
<div class="kpi-value">${annBep.toFixed(2)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">누적 실적 (Q1)</div>
|
|
<div class="kpi-value">${annualActual.toFixed(2)}</div>
|
|
<div class="kpi-subtext">억원</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">연간 달성률</div>
|
|
<div class="kpi-value">${achRate}%</div>
|
|
<div class="kpi-subtext">계획 대비</div>
|
|
</div>
|
|
`;
|
|
document.getElementById('forecastKpis').innerHTML = kpis;
|
|
|
|
// Annual Forecast Chart
|
|
destroyChart('annualForecastChart');
|
|
const fcCtx = document.getElementById('annualForecastChart').getContext('2d');
|
|
const months = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'];
|
|
|
|
// Highlight selected month if any
|
|
const mon = state.currentMonth;
|
|
const pointRadius = months.map((m,i) => {
|
|
if (mon === 'all') return 3;
|
|
return parseInt(mon)-1 === i ? 8 : 3;
|
|
});
|
|
|
|
state.charts['annualForecastChart'] = new Chart(fcCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: months,
|
|
datasets: [
|
|
{ label: '계획', data: planData, borderColor: '#999', backgroundColor: 'rgba(153,153,153,0.1)', fill: true, tension: 0.4, pointRadius: 3 },
|
|
{ label: '손익분기점', data: Array(12).fill(bepVal), borderColor: '#ff9800', fill: false, borderDash: [5, 5], tension: 0, pointRadius: 0 },
|
|
{ label: '실적', data: actualData, borderColor: '#cc0000', backgroundColor: 'rgba(204,0,0,0.1)', fill: true, tension: 0.4, pointRadius: pointRadius, borderWidth: 3 }
|
|
]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
|
|
});
|
|
|
|
// Forecast Table
|
|
const fcTable = document.getElementById('forecastTable').querySelector('tbody');
|
|
fcTable.innerHTML = months.map((m, i) => {
|
|
const achieved = actualData[i] > 0 && planData[i] > 0 ? (actualData[i] / planData[i] * 100).toFixed(1) : '-';
|
|
const isSelected = mon !== 'all' && parseInt(mon)-1 === i;
|
|
return `
|
|
<tr style="${isSelected ? 'background:#fff3e0;font-weight:700;' : ''}">
|
|
<td>${m}</td>
|
|
<td class="num-cell">${planData[i].toFixed(2)}</td>
|
|
<td class="num-cell">${bepVal.toFixed(2)}</td>
|
|
<td class="num-cell">${actualData[i].toFixed(2)}</td>
|
|
<td class="percent-cell">${achieved}${achieved !== '-' ? '%' : ''}</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
})(); |