編集 感想・トーク 履歴

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

← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
1行目: 1行目:
<!DOCTYPE html>
<html lang="ja">
<html lang="ja">
<head>
<head>
  <!-- Required meta tags -->
  <meta charset="UTF-8">
  <title>chart</title>
  <style>
    #chart_div {
      margin: 0;
      height: 100%;
      min-height: 38em;
      overflow: hidden;
    }


     #chart_div .tab {
     <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
      margin: 0;
     <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="ja">
      padding: 0;
      display: block;
      overflow: hidden;
     }


     #chart_div .tab li {
     <style>
      display: block;
        #chart_div {
      float: left;
            margin: 0;
      width: 50%;
            height: 100%;
      text-align: center;
            min-height: 38em;
      background-color: #aca6e4;
            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 .tab a {
        #chart_div table {
      color: white;
            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;
        }


    #chart_div .tab a.selected {
        @media only screen and (max-width: 993px) {
      font-weight: bold;
            #chart_div > table > thead > tr {
      cursor: text;
                width: 80%;
    }
            }
        }


     #chart_div .tab a.selected:hover {
     </style>
      text-decoration: none;
    <!--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";


    #chart_div table {
            google.charts.load("current", { packages: ["corechart"] });
      width: 100%;
            google.charts.setOnLoadCallback(drawChart);
      border-collapse: collapse;
      border-spacing: 0;
      margin: 1rem 0;
    }


    #chart_div .time {
            function drawChart() {
      width: 3rem;
                var query = new google.visualization.Query(url);
    }
                query.send(handleQueryResponse);
            }


     #chart_div .pageview {
            function handleQueryResponse(response) {
      width: 2.5rem;
                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>`;


     #chart_div td.time {
                        html.push(`
      text-align: right;
<tr>
      font-size: 0.8rem;
     <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('');


    #chart_div td.pageview {
                document
      text-align: right;
                    .getElementById("hourly")
      font-size: 0.8rem;
                    .addEventListener("click", function() {
    }
                        if (period === "hourly") return;
 
                        period = "hourly";
    #chart_div td.page {
                        prepareChart();
      text-overflow: ellipsis;
                    });
      max-width: 0;
                document
      overflow: hidden;
                    .getElementById("daily")
      white-space: nowrap;
                    .addEventListener("click", function() {
    }
                        if (period === "daily") return;
 
                        period = "daily";
    #chart_div th,
                        prepareChart();
    #chart_div td {
                    });
      border: 1px solid #ddd;
                document
    }
                    .getElementById("header-time")
 
                    .addEventListener("click", function() {
    #chart_div th.selectable {
                        if (orderBy === "time") return;
      cursor: pointer;
                        orderBy = "time";
    }
                        prepareChart();
 
                    });
    #chart_div th.selected {
                document
      background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
                    .getElementById("header-pageview")
      cursor: auto;
                    .addEventListener("click", function() {
      background-repeat: no-repeat;
                        if (orderBy === "pageview") return;
      background-position: center right 0.2rem;
                        orderBy = "pageview";
    }
                        prepareChart();
                    });
            }
        }


    @media screen and (max-width: 768px) {
         function encodeTitle(title) {
      #chart_div {
            return title
        margin: 0;
                .split("/")
         width: 100%;
                .map(function(path) {
        height: 100%;
                    return encodeURIComponent(path);
        min-height: 38em;
                })
        overflow: hidden;
                .join("/");
      }
    }
  </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>");
     </script>
        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>
</head>
<body>
<body>
  <div id="chart_div"></div>
<div id="chart_div"></div>
</body>
</body>
</html>
</html>

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

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