編集 感想・トーク 履歴

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

← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
1行目: 1行目:
<pre><html lang="ja">
<html lang="ja">
<head>
<head>


126行目: 126行目:
                 var data = response.getDataTable();
                 var data = response.getDataTable();
                 var rows = data.getNumberOfRows();
                 var rows = data.getNumberOfRows();
                 var html = [`
                 var html = [`<pre>
<ul class="tab">
<ul class="tab">
     <li><a id="hourly" class="${period === "hourly" ? "selected" : ""}" href="javascript: void(0);">リアルタイム</a></li>
     <li><a id="hourly" class="${period === "hourly" ? "selected" : ""}" href="javascript: void(0);">リアルタイム</a></li>
140行目: 140行目:
     </thead>
     </thead>
     <tbody>
     <tbody>
                 `];
                 </pre>`];
                 for (var i = 0; i < rows; i++) {
                 for (var i = 0; i < rows; i++) {
                     try {
                     try {
208行目: 208行目:
</body>
</body>
</html>
</html>
</pre>

2020年9月8日 (火) 04:45時点における版

<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: #1ac779;
       }

       #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;
           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 {
           cursor: auto;
           background-repeat: no-repeat;
           background-position: center right 0.2rem;
       }



     @media screen and (max-width: 768px) {
     #chart_div {
       margin: 0;
       width: 100%;
       height: 100%;
       min-height: 38em;
       overflow: hidden;
     }
   }



   </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 = [`

<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(`

${time} ${pageview} ${anchor} `); } catch (e) { console.log([i, e]); } } html.push("</tbody>"); 

               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>