위젯:인기있는 문서

This page was last edited on 3 November 2019, at 11:18.
<html> <head> <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; } </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 + "</a>"; html.push( "<tr>" + '<td class="time">' + time + "</td>" + '<td class="pageview">' + pageview + "</td>" + '<td class="page">' + 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>