「Widget:人気ページ」の版間の差分

2020年9月7日 (月) 07:19時点における版

   <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}

");

               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>

</body> </html>

その他のツール

「Widget:人気ページ」の版間の差分

2020年9月7日 (月) 07:19時点における版