<html>
<head>
<style>
#chart_div {
margin: 0;
height: 100%;
min-height: 710px;
overflow: hidden;
}
#chart_div .tab {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
#chart_div .tab li {
display: block;
float: left;
width: 50%;
text-align: center;
background-color: #aca6e4;
}
#chart_div .tab a {
color: white;
}
#chart_div .tab a.selected {
font-weight: bold;
cursor: text;
}
#chart_div .tab a.selected:hover {
text-decoration: none;
}
#chart_div table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 1rem 0;
}
#chart_div .time {
width: 3rem;
}
#chart_div .pageview {
width: 2.5rem;
}
#chart_div td.time {
text-align: right;
font-size: 0.8rem;
}
#chart_div td.pageview {
text-align: right;
font-size: 0.8rem;
}
#chart_div th,
#chart_div td {
border: 1px solid #DDD;
}
#chart_div th.selectable {
cursor: pointer;
}
#chart_div th.selected {
background-image: url("/resources/src/jquery.tablesorter/images/sort_down.png");
cursor: auto;
background-repeat: no-repeat;
background-position: center right .2rem;
}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var period='daily', orderBy='time';
prepareChart();
function prepareChart() {
var sheetName = period+' '+(orderBy=='time'?'longest time spent':'most viewed');
var url = 'https://docs.google.com/spreadsheets/d/1X3m2r7n6Gww8ZaCiKvYxgH1oPKSmbi2zArwEsZ1jCxQ/gviz/tq?sheet='+sheetName+'&headers=15';
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(url);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var rows = data.getNumberOfRows();
var html = [
'<ul class="tab">'+
'<li><a id="hourly" class="'+(period=='hourly'?'selected':'')+'" href="javascript: void(0);">실시간</a></li>'+
'<li><a id="daily" class="'+(period=='daily'?'selected':'')+'" href="javascript: void(0);">일간</a></li>'+
'</ul>'+
'<table><thead><tr>' +
'<th id="header-time" class="time selectable '+(orderBy=='time'?'selected':'')+'">시간</th>' +
'<th id="header-pageview" class="pageview selectable '+(orderBy=='pageview'?'selected':'')+'">조회</th>' +
'<th>문서</th>' +
'</tr></thead><tbody>'
];
for(var i = 0; i < rows; i++) {
try {
var title = data.getValue(i, 0).replace(' - 페미위키', '');
var time = Math.round(data.getValue(i, 1)/60)+'분';
var pageview = data.getValue(i, 2);
var url = '/w/' + encodeTitle(title);
var anchor = '<a href="' + url + '" target="_parent" title="' + title + '">' + title.substr(0, 15) + ( title.length > 15 ? '…' : '' ) + '</a>';
html.push(
'<tr>' +
'<td class="time">' + time + '</td>' +
'<td class="pageview">' + pageview + '</td>' +
'<td>' + anchor + '</td>' +
'</tr>'
);
} catch(e) {
console.log([i, e]);
}
}
html.push('</tbody></table>');
document.querySelector('#chart_div').innerHTML = html.join('\n');
document.getElementById('hourly').addEventListener('click', function() {
if ( period == 'hourly') return;
period = 'hourly';
prepareChart();
});
document.getElementById('daily').addEventListener('click', function() {
if ( period == 'daily') return;
period = 'daily';
prepareChart();
});
document.getElementById('header-time').addEventListener('click', function() {
if ( orderBy == 'time') return;
orderBy = 'time';
prepareChart();
});
document.getElementById('header-pageview').addEventListener('click', function() {
if ( orderBy == 'pageview') return;
orderBy = 'pageview';
prepareChart();
});
}
}
function encodeTitle(title) {
return title.split('/').map(function(path) {return encodeURIComponent(path);}).join('/')
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>