編集 感想・トーク 履歴

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

← 古い編集
編集の要約なし
Add table-layout:fixed for mobile fix
 
(4人の利用者による、間の87版が非表示)
1行目: 1行目:
<includeonly>
<html lang="ja">
<html lang="ja">
<head>
<head>
    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
    <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="ja">


     <style>
     <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 {
         #chart_div table {
            table-layout: fixed;
             width: 100%;
             width: 100%;
             border-collapse: collapse;
             border-collapse: collapse;
42行目: 11行目:
             margin: 1rem 0;
             margin: 1rem 0;
         }
         }
         #chart_div .time {
         #chart_div .time {
             width: 3rem;
             width: 3rem;
         }
         }
         #chart_div .pageview {
         #chart_div .pageview {
             width: 2.5rem;
             width: 2.5rem;
         }
         }
         #chart_div td.time {
         #chart_div td.time {
             text-align: right;
             text-align: right;
             font-size: 0.8rem;
             font-size: 0.8rem;
         }
         }
         #chart_div td.pageview {
         #chart_div td.pageview {
             text-align: right;
             text-align: center;
             font-size: 0.8rem;
             font-size: 0.8rem;
         }
         }
         #chart_div td.page {
         #chart_div td.page {
             text-overflow: ellipsis;
             text-overflow: ellipsis;
            max-width: 0;
             overflow: hidden;
             overflow: hidden;
             white-space: nowrap;
             white-space: nowrap;
         }
         }
         #chart_div th,
         #chart_div th,
         #chart_div td {
         #chart_div td {
             border: 1px solid #ddd;
             border: 1px solid #ddd;
         }
         }
       
        #chart_div th {
            text-align: center;
        }
         #chart_div th.selectable {
         #chart_div th.selectable {
             cursor: pointer;
             cursor: pointer;
         }
         }
         #chart_div th.selected {
         #chart_div th.selected {
            background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
             cursor: auto;
             cursor: auto;
             background-repeat: no-repeat;
             background-repeat: no-repeat;
76行目: 55行目:
         }
         }


         @media only screen and (max-width: 993px) {
         .page {
             #chart_div > table > thead > tr {
             overflow: hidden;
                width: 80%;
    text-overflow: ellipsis;
            }
    white-space: nowrap;
         }
         }


     </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",
             orderBy = "time";
             orderBy = "pageview";
         prepareChart();
         prepareChart();
         function prepareChart() {
         function prepareChart() {
             var sheetName =
             var sheetName =
                 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/1QrIPnTnAaJSoKRy-IcWCoDylC3K8pdbfINNVFs7XEnA/gviz/tq?sheet=" +
                 sheetName +
                 sheetName +
                 "&headers=15";
                 "&headers=15";


             google.charts.load("current", { packages: ["corechart"] });
             google.charts.load("current", {packages: ["corechart"]});
             google.charts.setOnLoadCallback(drawChart);
             google.charts.setOnLoadCallback(drawChart);


113行目: 90行目:
                 var data = response.getDataTable();
                 var data = response.getDataTable();
                 var rows = data.getNumberOfRows();
                 var rows = data.getNumberOfRows();
                 var html = [`
                 var html = [
<ul class="tab">
`<table>
    <li><a id="hourly" class="${period === "hourly" ? "selected" : ""}" href="javascript: void(0);">リアルタイム</a></li>
     <thead bgcolor = #507f50>
    <li><a id="daily" class="${period === "daily" ? "selected" : ""}" href="javascript: void(0);">一日</a></li>
</ul>
<table>
     <thead>
         <tr>
         <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 id="header-pageview" class="pageview selectable ${orderBy === "pageview" ? "selected" : ""}">PV</th>
             <th>ページ</th>
             <th>ページ</th>
         </tr>
         </tr>
     </thead>
     </thead>
<tbody>
    <tbody>
                 `];
                 `];
                 for (var i = 0; i < rows; i++) {
                 for (var i = 0; i < rows; i++) {
                     try {
                     try {
                         var title = data.getValue(i, 0).replace(" - 宇宙wiki", "");
                         var title = data.getValue(i, 1).replace(" - 宇宙wiki", "");
                        var time = Math.round(data.getValue(i, 1) / 60) + "分";
                         var pageview = data.getValue(i, 3);
                         var pageview = data.getValue(i, 2);
                         var url = "/w/" + encodeTitle(title);
                         var url = "/w/" + encodeTitle(title);
                         var anchor = `<a href="${url}" target="_parent" title="${title}">${title}</a>`;
                         var anchor = `<a href="${url}" target="_parent" title="${title}">${title}</a>`;
138行目: 109行目:
                         html.push(`
                         html.push(`
<tr>
<tr>
    <td class="time">${time}</td>
     <td class="pageview">${pageview}</td>
     <td class="pageview">${pageview}</td>
     <td class="page">${anchor}</td>
     <td class="page" >${anchor}</td>
</tr>
</tr>
`);
`);
148行目: 118行目:
                 }
                 }
                 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
                     .getElementById("hourly")
                     .getElementById("hourly")
                     .addEventListener("click", function() {
                     .addEventListener("click", function () {
                         if (period === "hourly") return;
                         if (period === "hourly") return;
                         period = "hourly";
                         period = "hourly";
159行目: 129行目:
                 document
                 document
                     .getElementById("daily")
                     .getElementById("daily")
                     .addEventListener("click", function() {
                     .addEventListener("click", function () {
                         if (period === "daily") return;
                         if (period === "daily") return;
                         period = "daily";
                         period = "daily";
                        prepareChart();
                    });
                document
                    .getElementById("header-time")
                    .addEventListener("click", function() {
                        if (orderBy === "time") return;
                        orderBy = "time";
                         prepareChart();
                         prepareChart();
                     });
                     });
                 document
                 document
                     .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();
184行目: 147行目:
             return title
             return title
                 .split("/")
                 .split("/")
                 .map(function(path) {
                 .map(function (path) {
                     return encodeURIComponent(path);
                     return encodeURIComponent(path);
                 })
                 })
195行目: 158行目:
</body>
</body>
</html>
</html>
</includeonly>
<noinclude>
{{DEFAULTSORT:}}
</noinclude>

2026年5月28日 (木) 15:08時点における最新版