hmw1001
998 lines
32 KiB
PHP
998 lines
32 KiB
PHP
<?php
|
|
$sub_menu = '710304';
|
|
include_once('./_common.php');
|
|
|
|
auth_check_menu($auth, $sub_menu, "r");
|
|
|
|
$sv_id = isset($_GET['sv_id']) ? (int) $_GET['sv_id'] : 0;
|
|
|
|
if (!$sv_id) {
|
|
alert('설문을 선택해주세요.', 'survey_list.php');
|
|
}
|
|
|
|
$survey = get_survey($sv_id);
|
|
if (!$survey) {
|
|
alert('존재하지 않는 설문입니다.', 'survey_list.php');
|
|
}
|
|
|
|
$questions = get_survey_questions($sv_id);
|
|
$total_responses = get_survey_response_count($sv_id, 'completed');
|
|
|
|
// 통계 업데이트
|
|
update_survey_statistics($sv_id);
|
|
|
|
$g5['title'] = '설문 통계 - ' . $survey['sv_title'];
|
|
include_once(G5_ADMIN_PATH . '/admin.head.php');
|
|
|
|
// 응답 현황 통계
|
|
$response_stats = sql_fetch("
|
|
SELECT
|
|
COUNT(CASE WHEN sr_status = 'completed' THEN 1 END) as completed,
|
|
COUNT(CASE WHEN sr_status = 'started' THEN 1 END) as started,
|
|
COUNT(CASE WHEN sr_status = 'abandoned' THEN 1 END) as abandoned,
|
|
COUNT(*) as total
|
|
FROM survey_responses
|
|
WHERE sv_id = '$sv_id'
|
|
");
|
|
|
|
// 일별 응답 통계 (최근 30일)
|
|
$daily_stats = array();
|
|
$daily_sql = "
|
|
SELECT
|
|
DATE(sr_completed_at) as date,
|
|
COUNT(*) as count
|
|
FROM survey_responses
|
|
WHERE sv_id = '$sv_id'
|
|
AND sr_status = 'completed'
|
|
AND sr_completed_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)
|
|
GROUP BY DATE(sr_completed_at)
|
|
ORDER BY date ASC
|
|
";
|
|
$daily_result = sql_query($daily_sql);
|
|
while ($row = sql_fetch_array($daily_result)) {
|
|
$daily_stats[$row['date']] = $row['count'];
|
|
}
|
|
|
|
// 시간대별 응답 통계
|
|
$hourly_stats = array();
|
|
$hourly_sql = "
|
|
SELECT
|
|
HOUR(sr_completed_at) as hour,
|
|
COUNT(*) as count
|
|
FROM survey_responses
|
|
WHERE sv_id = '$sv_id'
|
|
AND sr_status = 'completed'
|
|
GROUP BY HOUR(sr_completed_at)
|
|
ORDER BY hour ASC
|
|
";
|
|
$hourly_result = sql_query($hourly_sql);
|
|
while ($row = sql_fetch_array($hourly_result)) {
|
|
$hourly_stats[$row['hour']] = $row['count'];
|
|
}
|
|
|
|
// 완료율 계산
|
|
$completion_rate = $response_stats['total'] > 0 ?
|
|
round(($response_stats['completed'] / $response_stats['total']) * 100, 1) : 0;
|
|
|
|
// 평균 응답 시간 계산
|
|
$avg_time_sql = "
|
|
SELECT AVG(TIMESTAMPDIFF(MINUTE, sr_started_at, sr_completed_at)) as avg_minutes
|
|
FROM survey_responses
|
|
WHERE sv_id = '$sv_id'
|
|
AND sr_status = 'completed'
|
|
AND sr_completed_at IS NOT NULL
|
|
";
|
|
$avg_time_result = sql_fetch($avg_time_sql);
|
|
$avg_response_time = round($avg_time_result['avg_minutes'] ?? 0, 1);
|
|
?>
|
|
|
|
<style>
|
|
.statistics-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.stats-header {
|
|
background: linear-gradient(135deg, #AA20FF 0%, #8A1ACC 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-header h1 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
.stats-header p {
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stats-overview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
border-left: 4px solid #AA20FF;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
color: #AA20FF;
|
|
margin-bottom: 8px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 0.8em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.stat-change.positive {
|
|
color: #28a745;
|
|
}
|
|
|
|
.stat-change.negative {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.chart-section {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.chart-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chart-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 0.8em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.chart-btn.active,
|
|
.chart-btn:hover {
|
|
background: #AA20FF;
|
|
color: white;
|
|
border-color: #AA20FF;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 400px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.questions-stats {
|
|
display: grid;
|
|
gap: 30px;
|
|
}
|
|
|
|
.question-stat {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.question-header {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.question-number {
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #AA20FF;
|
|
color: white;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.question-title {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
color: #333;
|
|
display: inline;
|
|
}
|
|
|
|
.question-type {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
background: #e9ecef;
|
|
color: #666;
|
|
border-radius: 12px;
|
|
font-size: 0.7em;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.question-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
gap: 30px;
|
|
align-items: start;
|
|
}
|
|
|
|
.answer-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.answer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.answer-item:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.answer-bar {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.answer-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #AA20FF 0%, #8A1ACC 100%);
|
|
border-radius: 4px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.answer-label {
|
|
min-width: 150px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.answer-count {
|
|
min-width: 80px;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
color: #666;
|
|
}
|
|
|
|
.answer-percentage {
|
|
min-width: 50px;
|
|
text-align: right;
|
|
font-size: 0.9em;
|
|
color: #AA20FF;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.question-chart {
|
|
height: 250px;
|
|
}
|
|
|
|
.text-responses {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.text-response {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.text-response:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.text-response-meta {
|
|
font-size: 0.8em;
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.text-response-content {
|
|
color: #333;
|
|
}
|
|
|
|
.export-section {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.export-buttons {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.export-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
background: #AA20FF;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: #8A1ACC;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(170, 32, 255, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.export-btn.secondary {
|
|
background: #6c757d;
|
|
}
|
|
|
|
.export-btn.secondary:hover {
|
|
background: #545b62;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 768px) {
|
|
.statistics-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.stats-overview {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.question-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.chart-header {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.export-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.export-btn {
|
|
width: 100%;
|
|
max-width: 250px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.answer-item {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
}
|
|
|
|
.answer-label,
|
|
.answer-count,
|
|
.answer-percentage {
|
|
min-width: auto;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* 애니메이션 */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.stat-card,
|
|
.chart-section,
|
|
.question-stat {
|
|
animation: fadeInUp 0.6s ease forwards;
|
|
}
|
|
|
|
.stat-card:nth-child(even) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.question-stat:nth-child(even) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
</style>
|
|
|
|
<div class="statistics-container">
|
|
<!-- 통계 헤더 -->
|
|
<div class="stats-header">
|
|
<h1><i class="fa fa-chart-bar"></i> 설문 통계</h1>
|
|
<p><?php echo htmlspecialchars($survey['sv_title']); ?></p>
|
|
</div>
|
|
|
|
<!-- 통계 개요 -->
|
|
<div class="stats-overview">
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?php echo number_format($total_responses); ?></div>
|
|
<div class="stat-label">완료된 응답</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?php echo $completion_rate; ?>%</div>
|
|
<div class="stat-label">완료율</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?php echo $avg_response_time; ?>분</div>
|
|
<div class="stat-label">평균 응답시간</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?php echo number_format($response_stats['started']); ?></div>
|
|
<div class="stat-label">진행중인 응답</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 응답 현황 차트 -->
|
|
<div class="chart-section">
|
|
<div class="chart-header">
|
|
<h3 class="chart-title">응답 현황</h3>
|
|
<div class="chart-controls">
|
|
<button class="chart-btn active" data-chart="daily">일별</button>
|
|
<button class="chart-btn" data-chart="hourly">시간대별</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="responseChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 질문별 통계 -->
|
|
<div class="questions-stats">
|
|
<?php foreach ($questions as $index => $question): ?>
|
|
<div class="question-stat">
|
|
<div class="question-header">
|
|
<span class="question-number"><?php echo $index + 1; ?></span>
|
|
<h4 class="question-title"><?php echo htmlspecialchars($question['sq_title']); ?></h4>
|
|
<span class="question-type"><?php echo $question['sq_type']; ?></span>
|
|
</div>
|
|
|
|
<?php
|
|
// 질문별 통계 데이터 가져오기
|
|
$question_stats_sql = "
|
|
SELECT ss_option_value, ss_count, ss_percentage
|
|
FROM survey_statistics
|
|
WHERE sv_id = '$sv_id' AND sq_id = '{$question['sq_id']}'
|
|
ORDER BY ss_count DESC
|
|
";
|
|
$question_stats_result = sql_query($question_stats_sql);
|
|
$has_stats = sql_num_rows($question_stats_result) > 0;
|
|
?>
|
|
|
|
<?php if ($has_stats): ?>
|
|
<div class="question-stats-grid">
|
|
<div class="answer-stats">
|
|
<?php while ($stat = sql_fetch_array($question_stats_result)): ?>
|
|
<div class="answer-item">
|
|
<div class="answer-label"><?php echo htmlspecialchars($stat['ss_option_value']); ?></div>
|
|
<div class="answer-bar">
|
|
<div class="answer-fill" style="width: <?php echo $stat['ss_percentage']; ?>%"></div>
|
|
</div>
|
|
<div class="answer-count"><?php echo number_format($stat['ss_count']); ?>명</div>
|
|
<div class="answer-percentage"><?php echo $stat['ss_percentage']; ?>%</div>
|
|
</div>
|
|
<?php endwhile; ?>
|
|
</div>
|
|
|
|
<div class="question-chart">
|
|
<canvas id="questionChart<?php echo $question['sq_id']; ?>"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<?php elseif (in_array($question['sq_type'], ['text', 'textarea'])): ?>
|
|
<!-- 텍스트 응답 표시 -->
|
|
<div class="text-responses">
|
|
<?php
|
|
$text_responses_sql = "
|
|
SELECT sa.sa_value, sr.sr_completed_at, sr.sr_mb_id
|
|
FROM survey_answers sa
|
|
JOIN survey_responses sr ON sa.sr_id = sr.sr_id
|
|
WHERE sa.sq_id = '{$question['sq_id']}'
|
|
AND sr.sr_status = 'completed'
|
|
AND sa.sa_value != ''
|
|
ORDER BY sr.sr_completed_at DESC
|
|
LIMIT 20
|
|
";
|
|
$text_responses_result = sql_query($text_responses_sql);
|
|
|
|
if (sql_num_rows($text_responses_result) > 0):
|
|
while ($text_response = sql_fetch_array($text_responses_result)):
|
|
?>
|
|
<div class="text-response">
|
|
<div class="text-response-meta">
|
|
<?php echo $text_response['sr_mb_id'] ?: '익명'; ?> •
|
|
<?php echo date('Y-m-d H:i', strtotime($text_response['sr_completed_at'])); ?>
|
|
</div>
|
|
<div class="text-response-content">
|
|
<?php echo nl2br(htmlspecialchars($text_response['sa_value'])); ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
endwhile;
|
|
else:
|
|
?>
|
|
<div class="text-response">
|
|
<div class="text-response-content" style="text-align: center; color: #666;">
|
|
아직 응답이 없습니다.
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php else: ?>
|
|
<div style="text-align: center; padding: 40px; color: #666;">
|
|
<i class="fa fa-chart-bar"
|
|
style="font-size: 3em; margin-bottom: 15px; display: block; opacity: 0.3;"></i>
|
|
<p>아직 응답 데이터가 없습니다.</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- 내보내기 섹션 -->
|
|
<div class="export-section">
|
|
<h3><i class="fa fa-download"></i> 데이터 내보내기</h3>
|
|
<p>설문 결과를 다양한 형식으로 내보낼 수 있습니다.</p>
|
|
|
|
<div class="export-buttons">
|
|
<a href="export.php?sv_id=<?php echo $sv_id; ?>&format=excel" class="export-btn">
|
|
<i class="fa fa-file-excel"></i> 엑셀 다운로드
|
|
</a>
|
|
<a href="export.php?sv_id=<?php echo $sv_id; ?>&format=csv" class="export-btn secondary">
|
|
<i class="fa fa-file-csv"></i> CSV 다운로드
|
|
</a>
|
|
<button onclick="printStatistics()" class="export-btn secondary">
|
|
<i class="fa fa-print"></i> 인쇄하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart.js 라이브러리 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
// 통계 데이터를 JavaScript로 전달
|
|
window.statisticsData = {
|
|
survey: {
|
|
title: '<?php echo addslashes(htmlspecialchars($survey['sv_title'])); ?>',
|
|
id: <?php echo $sv_id; ?>
|
|
},
|
|
stats: {
|
|
totalResponses: '<?php echo number_format($total_responses); ?>',
|
|
completionRate: '<?php echo $completion_rate; ?>',
|
|
avgResponseTime: '<?php echo $avg_response_time; ?>',
|
|
startedResponses: '<?php echo number_format($response_stats['started']); ?>'
|
|
},
|
|
chartData: {
|
|
daily: <?php echo json_encode($daily_stats); ?>,
|
|
hourly: <?php echo json_encode($hourly_stats); ?>
|
|
},
|
|
questions: <?php echo json_encode($questions); ?>
|
|
};
|
|
|
|
// 응답 현황 차트
|
|
let responseChart;
|
|
|
|
function initResponseChart() {
|
|
const ctx = document.getElementById('responseChart').getContext('2d');
|
|
|
|
// 일별 데이터 준비 (최근 30일)
|
|
const dailyLabels = [];
|
|
const dailyValues = [];
|
|
|
|
for (let i = 29; i >= 0; i--) {
|
|
const date = new Date();
|
|
date.setDate(date.getDate() - i);
|
|
const dateStr = date.toISOString().split('T')[0];
|
|
const label = date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
|
|
|
|
dailyLabels.push(label);
|
|
dailyValues.push(dailyData[dateStr] || 0);
|
|
}
|
|
|
|
responseChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: dailyLabels,
|
|
datasets: [{
|
|
label: '일별 응답 수',
|
|
data: dailyValues,
|
|
borderColor: '#AA20FF',
|
|
backgroundColor: 'rgba(170, 32, 255, 0.1)',
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
stepSize: 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateResponseChart(type) {
|
|
if (!responseChart) return;
|
|
|
|
if (type === 'hourly') {
|
|
// 시간대별 데이터 준비
|
|
const hourlyLabels = [];
|
|
const hourlyValues = [];
|
|
|
|
for (let i = 0; i < 24; i++) {
|
|
hourlyLabels.push(i + '시');
|
|
hourlyValues.push(hourlyData[i] || 0);
|
|
}
|
|
|
|
responseChart.data.labels = hourlyLabels;
|
|
responseChart.data.datasets[0].data = hourlyValues;
|
|
responseChart.data.datasets[0].label = '시간대별 응답 수';
|
|
responseChart.options.scales.x.title = { display: true, text: '시간' };
|
|
} else {
|
|
// 일별 데이터로 복원
|
|
const dailyLabels = [];
|
|
const dailyValues = [];
|
|
|
|
for (let i = 29; i >= 0; i--) {
|
|
const date = new Date();
|
|
date.setDate(date.getDate() - i);
|
|
const dateStr = date.toISOString().split('T')[0];
|
|
const label = date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
|
|
|
|
dailyLabels.push(label);
|
|
dailyValues.push(dailyData[dateStr] || 0);
|
|
}
|
|
|
|
responseChart.data.labels = dailyLabels;
|
|
responseChart.data.datasets[0].data = dailyValues;
|
|
responseChart.data.datasets[0].label = '일별 응답 수';
|
|
responseChart.options.scales.x.title = { display: true, text: '날짜' };
|
|
}
|
|
|
|
responseChart.update();
|
|
}
|
|
|
|
// 질문별 차트 초기화
|
|
function initQuestionCharts() {
|
|
<?php foreach ($questions as $question): ?>
|
|
<?php if (in_array($question['sq_type'], ['radio', 'checkbox', 'select', 'rating'])): ?>
|
|
{
|
|
const ctx<?php echo $question['sq_id']; ?> = document.getElementById('questionChart<?php echo $question['sq_id']; ?>');
|
|
if (ctx<?php echo $question['sq_id']; ?>) {
|
|
<?php
|
|
// 질문별 차트 데이터 준비
|
|
$chart_data = array();
|
|
$chart_labels = array();
|
|
$chart_colors = array();
|
|
|
|
$chart_sql = "
|
|
SELECT ss_option_value, ss_count
|
|
FROM survey_statistics
|
|
WHERE sv_id = '$sv_id' AND sq_id = '{$question['sq_id']}'
|
|
ORDER BY ss_count DESC
|
|
";
|
|
$chart_result = sql_query($chart_sql);
|
|
|
|
$color_palette = ['#AA20FF', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'];
|
|
$color_index = 0;
|
|
|
|
while ($chart_row = sql_fetch_array($chart_result)) {
|
|
$chart_labels[] = $chart_row['ss_option_value'];
|
|
$chart_data[] = $chart_row['ss_count'];
|
|
$chart_colors[] = $color_palette[$color_index % count($color_palette)];
|
|
$color_index++;
|
|
}
|
|
?>
|
|
|
|
new Chart(ctx<?php echo $question['sq_id']; ?>, {
|
|
type: '<?php echo $question['sq_type'] === 'rating' ? 'bar' : 'doughnut'; ?>',
|
|
data: {
|
|
labels: <?php echo json_encode($chart_labels); ?>,
|
|
datasets: [{
|
|
data: <?php echo json_encode($chart_data); ?>,
|
|
backgroundColor: <?php echo json_encode($chart_colors); ?>,
|
|
borderWidth: 2,
|
|
borderColor: '#fff'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
padding: 15,
|
|
usePointStyle: true
|
|
}
|
|
}
|
|
}
|
|
<?php if ($question['sq_type'] === 'rating'): ?>
|
|
, scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
stepSize: 1
|
|
}
|
|
}
|
|
}
|
|
<?php endif; ?>
|
|
}
|
|
});
|
|
}
|
|
}
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
}
|
|
|
|
// 차트 타입 변경 이벤트
|
|
document.querySelectorAll('.chart-btn').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
document.querySelectorAll('.chart-btn').forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const chartType = this.dataset.chart;
|
|
updateResponseChart(chartType);
|
|
});
|
|
});
|
|
|
|
// 인쇄 기능
|
|
function printStatistics() {
|
|
const printWindow = window.open('', '_blank');
|
|
|
|
// PHP 데이터를 JavaScript 변수로 전달
|
|
const surveyTitle = '<?php echo addslashes(htmlspecialchars($survey['sv_title'])); ?>';
|
|
const totalResponses = '<?php echo number_format($total_responses); ?>';
|
|
const completionRate = '<?php echo $completion_rate; ?>';
|
|
const avgResponseTime = '<?php echo $avg_response_time; ?>';
|
|
const startedResponses = '<?php echo number_format($response_stats['started']); ?>';
|
|
|
|
const printContent = `
|
|
<html>
|
|
<head>
|
|
<title>설문 통계 - ${surveyTitle}</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.header { text-align: center; margin-bottom: 30px; }
|
|
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
|
|
.stat-item { text-align: center; padding: 15px; border: 1px solid #ddd; }
|
|
.stat-number { font-size: 2em; font-weight: bold; color: #AA20FF; }
|
|
.question { margin-bottom: 30px; page-break-inside: avoid; }
|
|
.question-title { font-size: 1.2em; font-weight: bold; margin-bottom: 15px; }
|
|
.answer-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
|
|
.question-stat { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; }
|
|
.question-header { margin-bottom: 15px; }
|
|
.answer-stats { margin-top: 15px; }
|
|
@media print { .no-print { display: none; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>설문 통계</h1>
|
|
<h2>${surveyTitle}</h2>
|
|
<p>생성일: ${new Date().toLocaleDateString('ko-KR')}</p>
|
|
</div>
|
|
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-number">${totalResponses}</div>
|
|
<div>완료된 응답</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">${completionRate}%</div>
|
|
<div>완료율</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">${avgResponseTime}분</div>
|
|
<div>평균 응답시간</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">${startedResponses}</div>
|
|
<div>진행중인 응답</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="questions-section">
|
|
${getQuestionsForPrint()}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
printWindow.document.write(printContent);
|
|
printWindow.document.close();
|
|
printWindow.print();
|
|
}
|
|
|
|
// 질문 통계를 인쇄용으로 변환하는 함수
|
|
function getQuestionsForPrint() {
|
|
const questionsStats = document.querySelector('.questions-stats');
|
|
if (!questionsStats) return '';
|
|
|
|
let printHtml = '';
|
|
const questionItems = questionsStats.querySelectorAll('.question-stat');
|
|
|
|
questionItems.forEach((question, index) => {
|
|
const questionTitle = question.querySelector('.question-title');
|
|
const questionType = question.querySelector('.question-type');
|
|
const answerItems = question.querySelectorAll('.answer-item');
|
|
const textResponses = question.querySelectorAll('.text-response');
|
|
|
|
if (questionTitle) {
|
|
printHtml += `
|
|
<div class="question-stat">
|
|
<div class="question-header">
|
|
<h3>${index + 1}. ${questionTitle.textContent}</h3>
|
|
${questionType ? `<span style="color: #666; font-size: 0.9em;">[${questionType.textContent}]</span>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
if (answerItems.length > 0) {
|
|
printHtml += '<div class="answer-stats">';
|
|
answerItems.forEach(item => {
|
|
const label = item.querySelector('.answer-label');
|
|
const count = item.querySelector('.answer-count');
|
|
const percentage = item.querySelector('.answer-percentage');
|
|
|
|
if (label && count && percentage) {
|
|
printHtml += `
|
|
<div class="answer-item">
|
|
<span>${label.textContent}</span>
|
|
<span>${count.textContent} (${percentage.textContent})</span>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
printHtml += '</div>';
|
|
}
|
|
|
|
if (textResponses.length > 0) {
|
|
printHtml += '<div class="text-responses" style="margin-top: 15px;">';
|
|
printHtml += '<h4>주요 응답:</h4>';
|
|
textResponses.forEach((response, idx) => {
|
|
if (idx < 5) { // 최대 5개만 인쇄
|
|
const content = response.querySelector('.text-response-content');
|
|
if (content) {
|
|
printHtml += `<p style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-left: 3px solid #AA20FF;">${content.textContent}</p>`;
|
|
}
|
|
}
|
|
});
|
|
printHtml += '</div>';
|
|
}
|
|
|
|
printHtml += '</div>';
|
|
}
|
|
});
|
|
|
|
return printHtml;
|
|
}
|
|
|
|
// 페이지 로드 시 차트 초기화
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
initResponseChart();
|
|
initQuestionCharts();
|
|
|
|
// 애니메이션 효과
|
|
const animateNumbers = () => {
|
|
document.querySelectorAll('.stat-number').forEach(element => {
|
|
const target = parseInt(element.textContent.replace(/,/g, ''));
|
|
let current = 0;
|
|
const increment = target / 50;
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= target) {
|
|
current = target;
|
|
clearInterval(timer);
|
|
}
|
|
element.textContent = Math.floor(current).toLocaleString('ko-KR');
|
|
}, 20);
|
|
});
|
|
};
|
|
|
|
</script>
|
|
|
|
<?php
|
|
include_once(G5_ADMIN_PATH . '/admin.tail.php');
|
|
?>
|