編集 感想・トーク 履歴

「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 {
      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;
    }


     <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
     #chart_div td.time {
     <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="ja">
      text-align: right;
      font-size: 0.8rem;
     }


     <style>
     #chart_div td.pageview {
        #chart_div {
      text-align: right;
            margin: 0;
      font-size: 0.8rem;
            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 {
    #chart_div td.page {
            width: 100%;
      text-overflow: ellipsis;
            border-collapse: collapse;
      max-width: 0;
            border-spacing: 0;
      overflow: hidden;
            margin: 1rem 0;
      white-space: nowrap;
        }
    }
        #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 th,
            #chart_div > table > thead > tr {
    #chart_div td {
                width: 80%;
      border: 1px solid #ddd;
            }
    }
        }


     </style>
     #chart_div th.selectable {
    <!--Load the AJAX API-->
      cursor: pointer;
    <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"] });
    #chart_div th.selected {
            google.charts.setOnLoadCallback(drawChart);
      background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
      cursor: auto;
      background-repeat: no-repeat;
      background-position: center right 0.2rem;
    }


            function drawChart() {
    @media screen and (max-width: 768px) {
                var query = new google.visualization.Query(url);
      #chart_div {
                query.send(handleQueryResponse);
        margin: 0;
            }
        width: 100%;
        height: 100%;
        min-height: 38em;
        overflow: hidden;
      }
    }
  </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";


            function handleQueryResponse(response) {
      google.charts.load("current", { packages: ["corechart"] });
                var data = response.getDataTable();
      google.charts.setOnLoadCallback(drawChart);
                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(`
      function drawChart() {
<tr>
        var query = new google.visualization.Query(url);
    <td class="time">${time}</td>
        query.send(handleQueryResponse);
    <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
      function handleQueryResponse(response) {
                    .getElementById("hourly")
        var data = response.getDataTable();
                    .addEventListener("click", function() {
        var rows = data.getNumberOfRows();
                        if (period === "hourly") return;
        var html = [
                        period = "hourly";
          '<ul class="tab">' +
                        prepareChart();
          '<li><a id="hourly" class="' +
                    });
          (period == "hourly" ? "selected" : "") +
                document
          '" href="javascript: void(0);">リアルタイム</a></li>' +
                    .getElementById("daily")
          '<li><a id="daily" class="' +
                    .addEventListener("click", function() {
          (period == "daily" ? "selected" : "") +
                        if (period === "daily") return;
          '" href="javascript: void(0);">一日</a></li>' +
                        period = "daily";
          "</ul>" +
                        prepareChart();
          "<table><thead><tr>" +
                    });
          '<th id="header-time" class="time selectable ' +
                document
          (orderBy == "time" ? "selected" : "") +
                    .getElementById("header-time")
          '">時間</th>' +
                    .addEventListener("click", function() {
          '<th id="header-pageview" class="pageview selectable ' +
                        if (orderBy === "time") return;
          (orderBy == "pageview" ? "selected" : "") +
                        orderBy = "time";
          '">PV</th>' +
                        prepareChart();
          "<th>ページ</th>" +
                    });
          "</tr></thead><tbody>"
                document
        ];
                    .getElementById("header-pageview")
        for (var i = 0; i < rows; i++) {
                    .addEventListener("click", function() {
          try {
                        if (orderBy === "pageview") return;
            var title = data.getValue(i, 0).replace(" - 宇宙wiki", "");
                        orderBy = "pageview";
            var time = Math.round(data.getValue(i, 1) / 60) + "分";
                        prepareChart();
            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("\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) {
    function encodeTitle(title) {
            return title
      return title
                .split("/")
        .split("/")
                .map(function(path) {
        .map(function (path) {
                    return encodeURIComponent(path);
          return encodeURIComponent(path);
                })
        })
                .join("/");
        .join("/");
        }
    }
    </script>
  </script>
</head>
</head>
<body>
<body>
<div id="chart_div"></div>
  <div id="chart_div"></div>
</body>
</body>
</html>
</html>

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

<!DOCTYPE html> <html lang="ja">

<head> 

 <meta charset="UTF-8">
 <title>chart</title>
 <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 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 = [

'

    ' + '
  • <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("\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>

<body>

</body>

</html>