編集の要約なし |
編集の要約なし |
||
| 75行目: | 75行目: | ||
background-position: center right 0.2rem; | background-position: center right 0.2rem; | ||
} | } | ||
@media only screen and (max-width: 993px) { | |||
#chart_div > table > thead > tr { | |||
width: 80%; | |||
} | |||
} | |||
</style> | </style> | ||
<!--Load the AJAX API--> | <!--Load the AJAX API--> | ||
| 107行目: | 114行目: | ||
var rows = data.getNumberOfRows(); | var rows = data.getNumberOfRows(); | ||
var html = [ | 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" : ""), | |||
'">PV</th>', | |||
"<th>ページ</th>", | |||
"</tr></thead><tbody>" | |||
]; | ]; | ||
for (var i = 0; i < rows; i++) { | for (var i = 0; i < rows; i++) { | ||
| 156行目: | 163行目: | ||
} | } | ||
} | } | ||
html.push("</tbody></table>"); | html.push("</tbody></table>");console.log(html); | ||
document.querySelector("#chart_div").innerHTML = html.join("\n"); | document.querySelector("#chart_div").innerHTML = html.join("\n"); | ||
document | document | ||
.getElementById("hourly") | .getElementById("hourly") | ||
2020年9月7日 (月) 00:21時点における版
<html lang="ja">
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8"> <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="ja">
<style>
#chart_div {
margin: 0;
height: 100%;
min-height: 38em;
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 td.page {
text-overflow: ellipsis;
max-width: 0;
overflow: hidden;
white-space: nowrap;
}
#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.styles/images/sort_down.png");
cursor: auto;
background-repeat: no-repeat;
background-position: center right 0.2rem;
}
@media only screen and (max-width: 993px) {
#chart_div > table > thead > tr {
width: 80%;
}
}
</style>
<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/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/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 = [
'
- ',
'
- <a id="hourly" class="', (period == "hourly" ? "selected" : ""), '" href="javascript: void(0);">リアルタイム</a> ', '
- <a id="daily" class="', (period == "daily" ? "selected" : ""), '" href="javascript: void(0);">一日</a> ', "
", "
<thead>", '', '', "", "</thead><tbody>" ]; for (var i = 0; i < rows; i++) { try { var title = data.getValue(i, 0).replace(" - 宇宙wiki", ""); 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 + "</a>"; html.push( "" + '" + '" + '" + "" ); } catch (e) { console.log([i, e]); } } html.push("</tbody>| 時間 | PV | ページ |
|---|---|---|
' +
time +" | ' +
pageview +" | ' +
anchor +" |
");console.log(html);
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>
</body>
</html>