LogViewer/index.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3 <head>
   4 <meta charset="utf-8">
   5 <title>各種報告書 - KancolleSniffer</title>
   6
   7 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   8 <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
   9 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css">
  10 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  11 <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
  12 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
  13 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
  14
  15 <style>
  16 body {
  17     font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  18     line-height: 1.5;
  19     font-size: 14px;
  20 }
  21 .tab {overflow: hidden; list-style-type: none; margin: 0em 2em 2em 1em; padding: 0em;}
  22 .tab li {background: #eee; padding: 0.3em 2.0em; float: left; margin-right: 2px;}
  23 .tab li.select {background: #ccc;}
  24 .contents {list-style-type: none; margin: 0em; padding: 0em;}
  25 .hide {display: none;}
  26 </style>
  27
  28 </head>
  29 <body>
  30 <script>
  31 function selectlog(i)
  32 {
  33     if ($.fn.dataTable.isDataTable('#log' + i)) {
  34         $('#log' + i).DataTable().ajax.reload();
  35         return;
  36     }
  37     switch (i) {
  38     case 0:
  39         $('#log0').dataTable({
  40             ajax: "./海戦・ドロップ報告書.json",
  41             columns: [{data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4}, {data: 9}, {data: 10}]
  42         });
  43         break;
  44     case 1:
  45         var entries = [];
  46         for (i = 0; i < 35; i++) {
  47             if (i == 9 || i == 10)
  48                 continue;
  49             entries.push({data: i})
  50         }
  51         $('#log1').dataTable({
  52             ajax: "./海戦・ドロップ報告書.json",
  53             iDisplayLength: 50,
  54             columns: entries
  55         });
  56         break;
  57     case 2:
  58         $('#log2').dataTable({
  59             ajax: "./遠征報告書.json"
  60         });
  61         break;
  62     case 3:
  63         $('#log3').dataTable({
  64             "ajax": "./開発報告書.json"
  65         });
  66         break;
  67     case 4:
  68         $('#log4').dataTable({
  69             ajax: "./建造報告書.json"
  70         });
  71         break;
  72     case 5:
  73         $('#log5').dataTable({
  74             ajax: "./資材ログ.json"
  75         });
  76         break;
  77     }
  78 }
  79
  80 const timeFormat = "YYYY-MM-DD HH:mm:ss";
  81 function parseDate(d)
  82 {
  83     return moment(d, timeFormat);
  84 }
  85
  86 function toString(d)
  87 {
  88     return d.format(timeFormat);
  89 }
  90
  91 function pickChartData(data, range)
  92 {
  93     var newdata = [];
  94     var ticks = [];
  95     var grid = [];
  96     var last = moment(data[data.length - 1][0]).valueOf();
  97     var first, interval, tickInterval;
  98     const oneDay = 3600 * 24 * 1000;
  99     switch (range) {
 100     case 0:
 101         first = moment(last).subtract(24, 'hours').valueOf();
 102         interval = 1000;
 103         tickInterval = 3600 * 1000;
 104         last -= last % tickInterval;
 105         break;
 106     case 1:
 107         first = moment(last).subtract(7, 'days').valueOf();
 108         interval = 1000;
 109         tickInterval = oneDay;
 110         last -= last % tickInterval + 3600 * 4000;
 111         break;
 112     case 2:
 113         first = moment(last).subtract(1, 'months').valueOf();
 114         last = moment(last).day(1).valueOf();
 115         interval = 3600 * 2000;
 116         tickInterval = oneDay * 7;
 117         last -= last % oneDay + 3600 * 4000;
 118         break;
 119     case 3:
 120         first = moment(data[0][0]).valueOf();
 121         last = moment(last).day(1).valueOf();
 122         interval = 3600 * 6000;
 123         tickInterval = oneDay * 7;
 124         last -= last % oneDay + 3600 * 4000;
 125         break;
 126     }
 127     for (var tick = last; tick > first; tick -= tickInterval)
 128     {
 129         var str = toString(moment(tick));
 130         ticks.unshift(str);
 131         grid.unshift({value: str});
 132     }
 133     var last_data;
 134     for (var i = data.length - 1; i >= 0; i--) {
 135         var row = data[i];
 136         var date = parseDate(row[0]).valueOf();
 137         if (date > first) {
 138             var v = date - date % interval;
 139             if (last_data != v) {
 140                 newdata.unshift(row);
 141                 last_data = v;
 142             }
 143         } else {
 144             break;
 145         }
 146     }
 147     return { data: newdata, tick: ticks, grid: grid };
 148 }
 149
 150 var selectedRange = -1;
 151
 152 function drawChart(data)
 153 {
 154     if (data == null) {
 155         $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
 156         return;
 157     }
 158     picked = pickChartData(data.data, selectedRange);
 159     var header = ["日付","燃料","弾薬","鋼材","ボーキ","高速建造材","高速修復材","開発資材","改修資材"];
 160     picked.data.unshift(header);
 161     var chart = c3.generate({
 162         bindto: '#chart',
 163         size: {
 164             height: 400,
 165             width: 800
 166         },
 167         data: {
 168             x: '日付',
 169             xFormat: '%Y-%m-%d %X',
 170             rows: picked.data,
 171             axes: {
 172                 燃料: 'y',
 173                 弾薬: 'y',
 174                 鋼材: 'y',
 175                 ボーキ: 'y',
 176                 高速建造材: 'y2',
 177                 高速修復材: 'y2',
 178                 開発資材: 'y2',
 179                 改修資材: 'y2'
 180             }
 181         },
 182         point: {
 183             show: false
 184         },
 185         tooltip: {
 186             show: true
 187         },
 188         grid: {
 189             x: {
 190                 lines: picked.grid
 191             }
 192         },
 193         axis: {
 194             x: {
 195                 type: 'timeseries',
 196                 tick: {
 197                     rotate: 30,
 198                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
 199                     values: picked.tick
 200                 },
 201                 height: 60
 202             },
 203             y2: {
 204                 show: true
 205             }
 206         }
 207     });
 208 }
 209
 210 $(function() {
 211     $.fn.dataTable.ext.errMode = 'throw';
 212     $.extend($.fn.dataTable.defaults, {
 213         stateSave: true,
 214         order: [[0, "desc"]],
 215         iDisplayLength: 50,
 216         aLengthMenu: [[50, 100, 200, -1],[50, 100, 200, "All"]]
 217     });
 218     $('.tab0 li').click(function() {
 219         var tab = $('.tab0 li');
 220         var i = tab.index(this)
 221         if (i < 6)
 222             selectlog(i);
 223         tab.removeClass('select');
 224         tab.eq(i).addClass('select');
 225         $('.contents .hide').css('display', 'none');
 226         $('.contents .hide').eq(i).css('display', 'block');
 227         sessionStorage.setItem('prevTab', i);
 228     });
 229     $('.tab1 li').click(function() {
 230         var tab = $('.tab1 li');
 231         var i = tab.index(this);
 232         selectedRange = i;
 233         drawChart();
 234         tab.removeClass('select');
 235         tab.eq(i).addClass('select');
 236         sessionStorage.setItem('prevRange', i);
 237     });
 238     $('table').addClass('display compact cell-border');
 239     var prev = sessionStorage.getItem('prevTab');
 240     if (prev == null)
 241         prev = 0;
 242     if (prev < 6)
 243         selectlog(+prev);
 244     $('.tab0 li').eq(prev).addClass('select');
 245     $('.contents .hide').eq(prev).css('display', 'block');
 246
 247     var range = sessionStorage.getItem('prevRange');
 248     if (range != null) {
 249         selectedRange = +range;
 250         $('.tab1 li').eq(range).addClass('select');
 251         if (prev == 6)
 252             drawChart()
 253     }
 254 });
 255 </script>
 256
 257 <ul class="tab tab0">
 258 <li>ドロップ</li>
 259 <li>海戦</li>
 260 <li>遠征</li>
 261 <li>開発</li>
 262 <li>建造</li>
 263 <li>資材</li>
 264 <li>資材グラフ</li>
 265 </ul>
 266
 267 <ul class="contents">
 268 <li class="hide">
 269 <table id="log0" cellspacing="0" width="100%">
 270 <thead>
 271 <tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘</th></tr>
 272 </thead>
 273 </table>
 274
 275 <li class="hide">
 276 <table id="log1" cellspacing="0" width="100%">
 277 <thead>
 278 <tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>艦隊行動</th><th>味方陣形</th><th>敵陣形</th><th>敵艦隊</th><th>味方艦1</th><th>味方艦1HP</th><th>味方艦2</th><th>味方艦2HP</th><th>味方艦3</th><th>味方艦3HP</th><th>味方艦4</th><th>味方艦4HP</th><th>味方艦5</th><th>味方艦5HP</th><th>味方艦6</th><th>味方艦6HP</th><th>敵艦1</th><th>敵艦1HP</th><th>敵艦2</th><th>敵艦2HP</th><th>敵艦3</th><th>敵艦3HP</th><th>敵艦4</th><th>敵艦4HP</th><th>敵艦5</th><th>敵艦5HP</th><th>敵艦6</th><th>敵艦6HP</th></tr>
 279 </thead>
 280 </table>
 281
 282 <li class="hide">
 283 <table id="log2" cellspacing="0" width="100%">
 284 <thead>
 285 <tr><th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>高速修復材</th><th>高速建造材</th></tr>
 286 </thead>
 287 </table>
 288
 289 <li class="hide">
 290 <table id="log3" cellspacing="0" width="100%">
 291 <thead>
 292 <tr><th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th></tr>
 293 </thead>
 294 </table>
 295
 296 <li class="hide">
 297 <table id="log4" cellspacing="0" width="100%">
 298 <thead>
 299 <tr><th>日付</th><th>種類</th><th>名前</th><th>艦種</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>空きドック</th><th>秘書艦</th><th>司令部Lv</th></tr>
 300 </thead>
 301 </table>
 302
 303 <li class="hide">
 304 <table id="log5" cellspacing="0" width="100%">
 305 <thead>
 306 <tr><th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th></tr>
 307 </thead>
 308 </table>
 309
 310 <li class="hide">
 311 <ul class="tab tab1" style="float: left">
 312 <li>一日</li>
 313 <li>一週間</li>
 314 <li>一か月</li>
 315 <li>すべて</li>
 316 </ul>
 317 <div id="chart" style="clear: both; width: 800px; margin: 1em;"></div>
 318
 319 </ul>
 320 </body>
 321 </html>