Widget:人気ページのソースを表示

<html lang="ja">
<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;
        }

        @media only screen and (max-width: 993px) {
            #chart_div > table > thead > tr {
                width: 80%;
            }
        }

    </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/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 = [`
<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++) {
                    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(`
<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('');

                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>