137 lines
4.8 KiB
JavaScript
137 lines
4.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialize Lucide Icons
|
|
lucide.createIcons();
|
|
|
|
// 1. Visitor Chart (Line)
|
|
const ctxVisitor = document.getElementById('visitorChart').getContext('2d');
|
|
new Chart(ctxVisitor, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['3/21', '3/22', '3/23', '3/24', '3/25', '3/26', '3/27'],
|
|
datasets: [{
|
|
label: '방문자 수',
|
|
data: [850, 920, 1100, 1240, 1350, 1120, 1480],
|
|
borderColor: '#2563eb',
|
|
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
|
fill: true,
|
|
tension: 0.4,
|
|
borderWidth: 3,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#2563eb'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: false, grid: { color: '#e2e8f0' } },
|
|
x: { grid: { display: false } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. Inflow Chart (Doughnut)
|
|
const ctxInflow = document.getElementById('inflowChart').getContext('2d');
|
|
new Chart(ctxInflow, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['네이버 검색', 'SNS 광고', '직접 유입'],
|
|
datasets: [{
|
|
data: [45, 32, 23],
|
|
backgroundColor: ['#2563eb', '#60a5fa', '#cbd5e1'],
|
|
borderWidth: 0,
|
|
hoverOffset: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '70%',
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15 } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// 3. Mini Calendar Render
|
|
const miniCalendar = document.getElementById('miniCalendar');
|
|
const daysInMonth = 31;
|
|
const startDay = 0; // Sun=0, 2026-03-01 is Sunday
|
|
|
|
// Add empty slots for days before the 1st
|
|
for (let i = 0; i < startDay; i++) {
|
|
const div = document.createElement('div');
|
|
div.className = 'cal-day';
|
|
miniCalendar.appendChild(div);
|
|
}
|
|
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
const div = document.createElement('div');
|
|
div.className = 'cal-day';
|
|
div.innerText = d;
|
|
if (d === 15 || d === 27) div.classList.add('active'); // Highlight deposit dates
|
|
miniCalendar.appendChild(div);
|
|
}
|
|
|
|
// 4. Set Generated Images
|
|
document.getElementById('placeholder-a').style.backgroundImage = 'url("exposure_a.png")';
|
|
document.getElementById('placeholder-b').style.backgroundImage = 'url("exposure_b.png")';
|
|
|
|
// 5. Backend Integration (Load data)
|
|
const companyId = 'WEHAGO_001';
|
|
const textarea = document.querySelector('.styled-textarea');
|
|
|
|
fetch(`http://localhost:5000/api/report/${companyId}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.content) textarea.value = data.content;
|
|
})
|
|
.catch(err => console.log('Error loading data:', err));
|
|
|
|
// 6. Interactions
|
|
// Save functionality
|
|
document.querySelector('.btn-outline').addEventListener('click', () => {
|
|
const content = textarea.value;
|
|
fetch('http://localhost:5000/api/report', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ companyId, content })
|
|
})
|
|
.then(res => res.json())
|
|
.then(() => alert('저장되었습니다.'))
|
|
.catch(err => alert('저장 실패: ' + err.message));
|
|
});
|
|
|
|
document.querySelector('.btn-primary').addEventListener('click', () => {
|
|
window.print();
|
|
});
|
|
|
|
// PDF Export with html2pdf
|
|
document.querySelector('.btn-pdf').addEventListener('click', () => {
|
|
const element = document.querySelector('.main-content');
|
|
const opt = {
|
|
margin: [10, 10],
|
|
filename: 'Business_Report.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2, useCORS: true },
|
|
jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
|
|
};
|
|
|
|
// Temporarily hide actions for cleaner PDF
|
|
document.querySelector('.sidebar').style.display = 'none';
|
|
document.body.style.backgroundColor = 'white';
|
|
|
|
html2pdf().set(opt).from(element).save().then(() => {
|
|
document.querySelector('.sidebar').style.display = 'flex';
|
|
document.body.style.backgroundColor = '';
|
|
});
|
|
});
|
|
|
|
document.querySelector('.btn-excel').addEventListener('click', () => {
|
|
alert('입금 내역이 엑셀 파일(XLSX)로 다운로드되었습니다.');
|
|
});
|
|
});
|