웹페이지 형식으로 데이터를 추출할 수 있는 기능

2025-07-21 17:37:35 +09:00
parent 1e0ddf6280
commit f22e5922a2
4 changed files with 481 additions and 0 deletions
--- a/app/templates/monthly_view.html
+++ b/app/templates/monthly_view.html
@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8" />
+<title>월별 입장객 현황</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<style>
+  .diff-positive { color: blue; }
+  .diff-negative { color: red; }
+  .diff-zero { color: gray; }
+  table th, table td { vertical-align: middle; }
+  table th { text-align: center; }
+  table td { text-align: right; } /* 숫자 우측 정렬 */
+  #visitorChart {
+    width: 90% ;
+    max-width: 1200px;
+    min-height: 600px;
+    margin: 30px auto;
+  }
+</style>
+</head>
+<body class="p-4">
+  <h2>월별 입장객 현황 (2017년 ~ 현재)</h2>
+
+  <table class="table table-bordered table-sm">
+    <thead class="table-secondary">
+      <tr>
+        <th>연도</th>
+        <th>1월</th><th>2월</th><th>3월</th><th>4월</th><th>5월</th><th>6월</th>
+        <th>7월</th><th>8월</th><th>9월</th><th>10월</th><th>11월</th><th>12월</th>
+        <th>합계</th>
+      </tr>
+    </thead>
+    <tbody id="dataBody">
+      <!-- 데이터가 여기에 삽입됩니다 -->
+    </tbody>
+  </table>
+
+  <canvas id="visitorChart"></canvas>
+
+<script>
+const visitorData = JSON.parse('{{ visitor_data | safe }}');
+
+function formatNumber(num) {
+  return num.toLocaleString('ko-KR');
+}
+
+function formatDiff(diff) {
+  if (diff > 0) return `<span class="diff-positive">(+${formatNumber(diff)})</span>`;
+  else if (diff < 0) return `<span class="diff-negative">(${formatNumber(diff)})</span>`;
+  else return `<span class="diff-zero">(0)</span>`;
+}
+
+function renderTable(data) {
+  const years = Object.keys(data).sort();
+  const tbody = document.getElementById('dataBody');
+  tbody.innerHTML = '';
+
+  years.forEach((year, idx) => {
+    const currYearData = data[year];
+    const prevYearData = idx > 0 ? data[years[idx-1]] : null;
+
+    let row = `<tr><th style="text-align:center">${year}</th>`;
+
+    let annualSum = 0;
+    for(let m=0; m<12; m++) {
+      const curr = currYearData[m] || 0;
+      annualSum += curr;
+      let diff = prevYearData ? (curr - (prevYearData[m] || 0)) : 0;
+      row += `<td>${formatNumber(curr)}<br>${formatDiff(diff)}</td>`;
+    }
+    row += `<th style="text-align:right">${formatNumber(annualSum)}</th></tr>`;
+
+    tbody.insertAdjacentHTML('beforeend', row);
+  });
+}
+
+function renderChart(data) {
+  const ctx = document.getElementById('visitorChart').getContext('2d');
+
+  const labels = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'];
+
+  // 연도를 숫자형으로 정렬
+  const years = Object.keys(data).map(Number).sort((a, b) => a - b);
+
+  // 각 연도별 데이터셋 생성
+  const datasets = years.map((year, i) => ({
+    label: year.toString(),
+    data: data[year],
+    backgroundColor: `hsla(${(i * 40) % 360}, 70%, 50%, 0.7)`,
+    borderColor: `hsla(${(i * 40) % 360}, 70%, 50%, 1)`,
+    borderWidth: 1
+  }));
+
+  const chartData = {
+    labels: labels,
+    datasets: datasets
+  };
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: chartData,
+    options: {
+      responsive: true,
+      maintainAspectRatio: true,
+      scales: {
+        y: {
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: '입장객 수'
+          },
+          ticks: {
+            callback: value => value.toLocaleString('ko-KR')
+          }
+        }
+      },
+      plugins: {
+        legend: {
+          position: 'top'
+        },
+        title: {
+          display: true,
+          text: '월별 입장객 수 (연도별)'
+        },
+        tooltip: {
+          callbacks: {
+            label: context => `입장객 수: ${context.parsed.y.toLocaleString('ko-KR')}`
+          }
+        }
+      }
+    }
+  });
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  renderTable(visitorData);
+  renderChart(visitorData);
+});
+</script>
+</body>
+</html>