編集 感想・トーク 履歴

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

← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
84行目: 84行目:
     </style>
     </style>
     <!--Load the AJAX API-->
     <!--Load the AJAX API-->
     <script
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            type="text/javascript"
            src="https://www.gstatic.com/charts/loader.js"
    ></script>
     <script type="text/javascript">
     <script type="text/javascript">
         var period = "daily",
         var period = "daily",
96行目: 93行目:
                 period +
                 period +
                 " " +
                 " " +
                 (orderBy == "time" ? "longest time spent" : "most viewed");
                 (orderBy === "time" ? "longest time spent" : "most viewed");
             var url =
             var url =
                 "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
                 "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
148行目: 145行目:
                 }
                 }
                 html.push("</tbody></table>");
                 html.push("</tbody></table>");
                 document.querySelector("#chart_div").innerHTML = html.join("\n");
                 document.querySelector("#chart_div").innerHTML = html.join('');


                 document
                 document
174行目: 171行目:
                     .getElementById("header-pageview")
                     .getElementById("header-pageview")
                     .addEventListener("click", function() {
                     .addEventListener("click", function() {
                         if (orderBy == "pageview") return;
                         if (orderBy === "pageview") return;
                         orderBy = "pageview";
                         orderBy = "pageview";
                         prepareChart();
                         prepareChart();

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

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

"); 

               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>