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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   8 <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
   9 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css">
  10 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  11 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
  12 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
  13 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  14 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  15 <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  16 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ja.min.js"></script>
  17 <style>
  18 body {
  19     font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  20     line-height: 1.5;
  21     font-size: 14px;
  22 }
  23 .tab {overflow: hidden; list-style-type: none; margin: 0 0 2em 1em; padding: 0;}
  24 .tab li {background: #eee; padding: 0.3em 1.5em; float: left; margin-right: 2px;}
  25 .tab1 li {padding: 0.3em 1em;}
  26 .tab li.select {background: #ccc;}
  27 .contents {list-style-type: none; margin: 0; padding: 0;}
  28 .hide {display: none;}
  29 .c3 .tick {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 12px;}
  30 .c3-legend-item {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 14px;}
  31 #loading {
  32     width: 48px;
  33     height: 48px;
  34     display: none;
  35     position: fixed;
  36     top: 50%;
  37     left: 50%;
  38     margin-top: -24px;
  39     margin-left: -24px;
  40     z-index: 100;
  41 }
  42 </style>
  43 </head>
  44 <body>
  45 <script>
  46 /* global moment, c3 */
  47
  48 var oneDay = 3600 * 24 * 1000;
  49
  50 function showLog() {
  51     var query = "?from=" + moment().subtract(1, 'months').valueOf();
  52     if ($('input[name=term]:eq(1)').prop('checked')) {
  53         var from = $('#term_from').datepicker("getDate");
  54         var to = $('#term_to').datepicker("getDate");
  55         if (from != null)
  56             query = "?from=" + from.valueOf();
  57         if (to != null)
  58             query += "&to=" + (to.valueOf() + oneDay);
  59     }
  60     var jsons = [
  61         "海戦・ドロップ報告書.json",
  62         "海戦・ドロップ報告書.json",
  63         "遠征報告書.json",
  64         "開発報告書.json",
  65         "建造報告書.json",
  66         "改修報告書.json",
  67         "資材ログ.json"
  68     ];
  69     $('#loading').show();
  70     var url = jsons[selectedTable] + query;
  71     $('#log' + selectedTable).DataTable().ajax.url(url).load();
  72 }
  73
  74 var tables = 7;
  75
  76 function initTables() {
  77     for (var t = 0; t < tables; t++) {
  78         var opts = {
  79             destroy: true,
  80             deferRender: true,
  81             stateSave: true,
  82             order: [[0, "desc"]],
  83             pageLength: 50,
  84             lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
  85             drawCallback: function () {
  86                 $('#loading').hide();
  87             }
  88         };
  89         if (t === 0) {
  90             opts.columns = [{ data: 0 }, { data: 1 }, { data: 2 }, { data: 3 }, { data: 4 }, { data: 9 }, { data: 10 }];
  91         } else if (t === 1) {
  92             var entries = [];
  93             for (var i = 0; i < 38; i++) {
  94                 if (i === 9 || i === 10)
  95                     continue;
  96                 entries.push({ data: i });
  97             }
  98             opts.columns = entries;
  99         }
 100         $('#log' + t).dataTable(opts);
 101     }
 102 }
 103
 104 var timeFormat = "YYYY-MM-DD HH:mm:ss";
 105 function parseDate(d) {
 106     return moment(d, timeFormat);
 107 }
 108
 109 function toString(d) {
 110     return d.format(timeFormat);
 111 }
 112
 113 function to5am(tick) {
 114     return tick - tick % (3600 * 24000) - 3600 * 4000;
 115 }
 116
 117 var selectedTable = 0;
 118 var seqChartRange = 0;
 119 var diffChartRange = 0;
 120 var chartType = 0;
 121 var showChart = false;
 122 var currentPickedData;
 123
 124 function drawChart(data) {
 125     if (data == null) {
 126         $('#loading').show();
 127         $.get("./資材ログ.json?time=" + Date.now(), function (d) { drawChart(d); }, "json");
 128         return;
 129     }
 130     var picked, header;
 131     if (chartType === 0) {
 132         picked = pickChartData(data.data, seqChartRange);
 133         header = ["日付", "燃料", "弾薬", "鋼材", "ボーキ", "高速建造材", "高速修復材", "開発資材", "改修資材"];
 134         picked.data.unshift(header);
 135         drawSeqChart(picked);
 136         currentPickedData = picked;
 137     } else {
 138         picked = pickDiffChartData(data.data, diffChartRange);
 139         header = ["日付", "燃料", "弾薬", "鋼材", "ボーキ"];
 140         picked.data.unshift(header);
 141         drawDiffChart(picked);
 142         currentPickedData = picked;
 143     }
 144 }
 145
 146 function redrawChart() {
 147     if (!currentPickedData)
 148         return;
 149     $('#loading').show();
 150     setTimeout(function () {
 151         if (chartType === 0)
 152             drawSeqChart(currentPickedData);
 153         else
 154             drawDiffChart(currentPickedData);
 155     });
 156 }
 157
 158 var timer;
 159 $(window).resize(function () {
 160     if (timer)
 161         clearTimeout(timer);
 162     timer = setTimeout(function () {
 163         if (showChart)
 164             redrawChart();
 165     }, 200);
 166 });
 167
 168 function chartSize() {
 169     var pxPerEm = Number($('#chart').css('fontSize').match(/(\d*(\.\d*)?)px/)[1]);
 170     return {
 171         height: Math.max($(document).height() - 15 * pxPerEm, 400),
 172         width: Math.max($(document).width() - 6 * pxPerEm, 800)
 173     };
 174 }
 175
 176 function drawSeqChart(picked) {
 177     var size = chartSize();
 178     c3.generate({
 179         bindto: '#chart',
 180         size: {
 181             height: size.height,
 182             width: size.width
 183         },
 184         data: {
 185             x: '日付',
 186             xFormat: '%Y-%m-%d %X',
 187             rows: picked.data,
 188             axes: {
 189                 燃料: 'y',
 190                 弾薬: 'y',
 191                 鋼材: 'y',
 192                 ボーキ: 'y',
 193                 高速建造材: 'y2',
 194                 高速修復材: 'y2',
 195                 開発資材: 'y2',
 196                 改修資材: 'y2'
 197             }
 198         },
 199         point: {
 200             show: false
 201         },
 202         tooltip: {
 203             show: $('#tooltip').prop('checked')
 204         },
 205         grid: {
 206             x: {
 207                 lines: picked.grid
 208             }
 209         },
 210         axis: {
 211             x: {
 212                 type: 'timeseries',
 213                 tick: {
 214                     rotate: 30,
 215                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
 216                     values: picked.tick
 217                 }
 218             },
 219             y2: {
 220                 show: true
 221             }
 222         },
 223         onrendered: function () { $('#loading').hide(); }
 224     });
 225 }
 226
 227 function pickChartData(data, range) {
 228     var newdata = [];
 229     var ticks = [];
 230     var grid = [];
 231     var first = moment(data[0][0]).valueOf();
 232     var last = moment(data[data.length - 1][0]).valueOf();
 233     var interval, tickInterval, lastTick;
 234     switch (range) {
 235         case 0:
 236             first = moment(last).subtract(24, 'hours').valueOf();
 237             break;
 238         case 1:
 239             first = moment(last).subtract(7, 'days').valueOf();
 240             break;
 241         case 2:
 242             first = moment(last).subtract(1, 'months').valueOf();
 243             break;
 244         case 3:
 245             first = moment(last).subtract(3, 'months').valueOf();
 246             break;
 247         case 4:
 248             first = moment(data[0][0]).valueOf();
 249             break;
 250         case 5:
 251             var fromDate = $('#chart_from').datepicker("getDate");
 252             var toDate = $('#chart_to').datepicker("getDate");
 253             if (fromDate == null || toDate == null)
 254                 return { data: [], tick: [], grid: [] };
 255             var from = fromDate.valueOf() + 3600 * 5000;
 256             var to = toDate.valueOf() + oneDay + 3600 * 5000;
 257             first = Math.max(first, from);
 258             last = Math.min(last, to);
 259             break;
 260     }
 261     if (last <= first + oneDay) {
 262         interval = 1000;
 263         tickInterval = 3600 * 1000;
 264         lastTick = last - last % tickInterval;
 265     } else if (last <= first + oneDay * 21) {
 266         interval = 1000;
 267         tickInterval = oneDay;
 268         lastTick = to5am(last);
 269     } else if (last <= first + oneDay * 63) {
 270         interval = 3600 * 1000;
 271         tickInterval = oneDay * 7;
 272         lastTick = to5am(moment(last).day(1).valueOf());
 273     } else if (last <= first + oneDay * 126) {
 274         interval = 3600 * 6000;
 275         tickInterval = oneDay * 14;
 276         lastTick = to5am(moment(last).day(1).valueOf());
 277     } else {
 278         interval = 3600 * 12000;
 279         tickInterval = oneDay * 28;
 280         lastTick = to5am(moment(last).day(1).valueOf());
 281     }
 282     var lastData;
 283     for (var i = data.length - 1; i >= 0; i--) {
 284         var row = data[i];
 285         var date = parseDate(row[0]).valueOf();
 286         if (date > first) {
 287             if (date <= last) {
 288                 var v = date - date % interval;
 289                 if (lastData !== v) {
 290                     newdata.unshift(row);
 291                     lastData = v;
 292                 }
 293             }
 294         } else {
 295             break;
 296         }
 297     }
 298     for (var tick = lastTick; tick > lastData; tick -= tickInterval) {
 299         var str = toString(moment(tick));
 300         ticks.unshift(str);
 301         grid.unshift({ value: str });
 302     }
 303     return { data: newdata, tick: ticks, grid: grid };
 304 }
 305
 306 function drawDiffChart(picked) {
 307     var size = chartSize();
 308     c3.generate({
 309         bindto: '#chart',
 310         size: {
 311             height: size.height,
 312             width: size.width
 313         },
 314         data: {
 315             x: '日付',
 316             xFormat: '%Y-%m-%d %X',
 317             rows: picked.data,
 318             axes: {
 319                 燃料: 'y',
 320                 弾薬: 'y',
 321                 鋼材: 'y',
 322                 ボーキ: 'y'
 323             },
 324             type: 'bar',
 325             groups: [["燃料", "弾薬", "鋼材", "ボーキ"]]
 326         },
 327         bar: {
 328             width: {
 329                 ratio: picked.width
 330             }
 331         },
 332         tooltip: {
 333             show: $('#tooltip').prop('checked')
 334         },
 335         grid: {
 336             x: {
 337                 lines: picked.grid
 338             },
 339             y: {
 340                 lines: [
 341                     { value: 0 }
 342                 ]
 343             }
 344         },
 345         axis: {
 346             x: {
 347                 type: 'timeseries',
 348                 tick: {
 349                     rotate: 30,
 350                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
 351                     values: picked.tick
 352                 }
 353             }
 354         },
 355         onrendered: function () { $('#loading').hide(); }
 356     });
 357 }
 358
 359 function pickDiffChartData(data, range) {
 360     var newdata = [];
 361     var ticks = [];
 362     var grid = [];
 363     var first = moment(data[0][0]).valueOf();
 364     var last = moment(data[data.length - 1][0]).valueOf();
 365     var interval, tickInterval, lastTick;
 366     var oneDay = 3600 * 24 * 1000;
 367     switch (range) {
 368         case 0:
 369             first = moment(last).subtract(1, 'months').valueOf();
 370             break;
 371         case 1:
 372             first = moment(last).subtract(3, 'months').valueOf();
 373             break;
 374         case 2:
 375             first = moment(last).subtract(6, 'months').subtract(1, 'weeks').valueOf();
 376             break;
 377         case 3:
 378             first = moment(data[0][0]).valueOf();
 379             break;
 380         case 4:
 381             var fromDate = $('#chart_from').datepicker("getDate");
 382             var toDate = $('#chart_to').datepicker("getDate");
 383             if (fromDate == null || toDate == null)
 384                 return { data: [], tick: [], grid: [] };
 385             var from = fromDate.valueOf() + 3600 * 5000;
 386             var to = toDate.valueOf() + oneDay + 3600 * 5000;
 387             first = Math.max(first, from);
 388             last = Math.min(last, to);
 389             break;
 390     }
 391     var barWidth;
 392     if (last <= first + oneDay * 2 * 31) {
 393         interval = oneDay;
 394         tickInterval = oneDay * 2;
 395         lastTick = to5am(last);
 396         barWidth = 0.3;
 397     } else if (last <= first + oneDay * 3 * 31) {
 398         interval = oneDay;
 399         tickInterval = oneDay * 7;
 400         lastTick = to5am(last);
 401         barWidth = 0.1;
 402     } else {
 403         interval = oneDay * 7;
 404         tickInterval = oneDay * 28;
 405         lastTick = to5am(moment(last).day(1).valueOf());
 406         barWidth = 0.1;
 407         if (last <= first + oneDay * 6 * 38) {
 408             tickInterval = oneDay * 14;
 409             barWidth = 0.3;
 410         }
 411     }
 412     var lastDate = lastTick;
 413     var prevRow;
 414     for (var i = data.length - 1; i >= 0; i--) {
 415         var row = data[i];
 416         var date = parseDate(row[0]).valueOf();
 417         if (date > first && date <= last) {
 418             if (!prevRow) {
 419                 prevRow = row;
 420                 continue;
 421             }
 422             if (date <= lastDate) {
 423                 var newrow = [prevRow[0]];
 424                 for (var r = 1; r < 5; r++) {
 425                     newrow.push(prevRow[r] - row[r]);
 426                 }
 427                 newdata.unshift(newrow);
 428                 lastDate = lastDate - interval;
 429                 prevRow = row;
 430             }
 431         } else {
 432             break;
 433         }
 434     }
 435     if (tickInterval >= oneDay * 7)
 436         lastTick = moment(lastTick).day(1).hour(5).minute(0).valueOf();
 437     for (var tick = lastTick; tick > lastDate; tick -= tickInterval) {
 438         var str = toString(moment(tick));
 439         ticks.unshift(str);
 440         grid.unshift({ value: str });
 441     }
 442     return { data: newdata, tick: ticks, grid: grid, width: barWidth };
 443 }
 444
 445 var sortieStatRange = 0;
 446
 447 function loadSortieData() {
 448     var from, to;
 449     if (sortieStatRange === 0) {
 450         from = moment().subtract(1, 'months').subtract(1, 'day').valueOf();
 451         to = new Date().valueOf();
 452     } else {
 453         var fromDate = $('#sortie_stat_from').datepicker("getDate");
 454         var toDate = $('#sortie_stat_to').datepicker("getDate");
 455         if (fromDate == null || toDate == null) {
 456             setSortieStat([]);
 457             return;
 458         }
 459         from = fromDate.valueOf();
 460         to = toDate.valueOf() + oneDay;
 461     }
 462     $.ajax({
 463         url: "./海戦・ドロップ報告書.json?from=" + from + "&to=" + to,
 464         success: function (data) { setSortieStat(data.data); },
 465         dataType: "json", cache: false
 466     });
 467 }
 468
 469 function initSortieStatResult() {
 470     var now = moment();
 471     var r;
 472     if (sortieStatRange === 0) {
 473         r = {
 474             day: { stat: {} },
 475             week: { stat: {} },
 476             month: { stat: {} }
 477         };
 478         r.day.begin = moment(now).hour(5).minute(0).second(0);
 479         if (now.hour() < 5) {
 480             r.day.begin.subtract(1, 'days');
 481         }
 482         r.week.begin = moment(now).day(1).hour(5).minute(0).second(0);
 483         if (now.day() === 0 || now.day() === 1 && now.hour() < 5) {
 484             r.week.begin.subtract(1, 'weeks');
 485         }
 486         if (moment(now).endOf('month').date() === now.date() &&
 487             now.hour() >= 22) { // 月末22時以降
 488             r.month.begin = moment(now).hour(22).minute(0).second(0);
 489         } else {
 490             r.month.begin =
 491                 moment(now).date(1).subtract(1, 'days').
 492                     hour(22).minute(0).second(0);
 493         }
 494     } else {
 495         r = { all: { stat: {} } };
 496         r.all.begin = moment(0);
 497     }
 498     return r;
 499 }
 500
 501 function gatherSortieStat(data) {
 502     var initStat = function () {
 503         return { start: "-", S: 0, A: 0, B: 0, C: 0, D: 0, R: 0 }
 504     };
 505     var r = initSortieStatResult();
 506     for (var i = 0; i < data.length; i++) {
 507         var row = data[i];
 508         var date = moment(row[0]);
 509         var map = row[1];
 510         var isBoss = row[3].indexOf("ボス") !== -1;
 511         var isStart = row[3].indexOf("出撃") !== -1;
 512         var resR = 0;
 513         for (var j = 23; j < row.length; j++) {
 514             if (/^輸送/.test(row[j]) && /^0\//.test(row[j + 1]))
 515                 resR++;
 516         }
 517         var res = row[4];
 518         if (res === "E")
 519             res = "D";
 520         for (var term in r) {
 521             if (!r.hasOwnProperty(term))
 522                 continue;
 523             var to = r[term];
 524             if (to.begin.isAfter(date))
 525                 continue;
 526             for (var b = 0; b < 4; b++) {
 527                 var name = b < 2 ? "合計" : map;
 528                 if (b === 1 || b === 3) {
 529                     if (!isBoss)
 530                         continue;
 531                     name = name + " - ボス";
 532                 }
 533                 var mo = to.stat[name];
 534                 if (!mo) {
 535                     mo = to.stat[name] = initStat();
 536                     if (name === "合計")
 537                         to.stat["合計 - ボス"] = initStat();
 538                 }
 539                 mo["R"] += resR;
 540                 mo[res]++;
 541                 if ((b === 0 || b === 2) && isStart) {
 542                     if (mo.start === "-")
 543                         mo.start = 0;
 544                     mo.start++;
 545                 }
 546             }
 547         }
 548     }
 549     return r;
 550 }
 551
 552 function arrangeSortieStatTable(r) {
 553     for (var term in r) {
 554         if (!r.hasOwnProperty(term))
 555             continue;
 556         var table = [];
 557         var pushed = {};
 558         for (var map in r[term].stat) {
 559             if (!r[term].stat.hasOwnProperty(map))
 560                 continue;
 561             if (pushed[map])
 562                 continue;
 563             var e = r[term].stat[map];
 564             e.map = map;
 565             table.push(e);
 566             pushed[map] = 1;
 567             var boss = map + " - ボス";
 568             e = r[term].stat[boss];
 569             if (!e)
 570                 continue;
 571             e.map = boss;
 572             table.push(e);
 573             pushed[boss] = 1;
 574         }
 575         r[term].table = table;
 576     }
 577 }
 578
 579 function setSortieStat(data) {
 580     if (!data) {
 581         $('#loading').show();
 582         loadSortieData();
 583         return;
 584     }
 585     var r = gatherSortieStat(data);
 586     arrangeSortieStatTable(r);
 587     for (var term in r) {
 588         if (!r.hasOwnProperty(term))
 589             continue;
 590         var dt = $("#sortie_stat_" + term).DataTable();
 591         dt.clear();
 592         dt.rows.add(r[term].table).draw();
 593     }
 594     $('#loading').hide();
 595 }
 596
 597 function initSortieStatTables() {
 598     var terms = ['day', 'week', 'month', 'all'];
 599     for (var i = 0; i < terms.length; i++) {
 600         $("#sortie_stat_" + terms[i]).dataTable({
 601             paging: false,
 602             searching: false,
 603             ordering: false,
 604             columns: terms[i] !== 'month' ? [
 605                 { data: "map" },
 606                 { data: "start" },
 607                 { data: "S" },
 608                 { data: "A" },
 609                 { data: "B" },
 610                 { data: "C" },
 611                 { data: "D" },
 612                 { data: "R" }
 613             ] : [
 614                     { data: "map" },
 615                     { data: "start" },
 616                     { data: "S" },
 617                     { data: "A" },
 618                     { data: "B" },
 619                     { data: "C" },
 620                     { data: "D" }
 621                 ]
 622         });
 623     }
 624 }
 625
 626 function showAchivementTable(data) {
 627     var expPerAch = 1428.0;
 628     if (!data) {
 629         $('#loading').show();
 630         $.ajax({
 631             url: "./戦果.json",
 632             success: function (data) {
 633                 showAchivementTable(data.data);
 634             },
 635             dataType: 'json',
 636             cache: false
 637         });
 638         return;
 639     }
 640     var result = [];
 641     var dayEo = 0;
 642     var endOfMonth = null;
 643     var monthExp = 0;
 644     var monthEo = 0;
 645     var prevExp = null;
 646     var lastExp = -1;
 647     var nextDate = null;
 648     for (var i = 0; i < data.length; i++) {
 649         var row = data[i];
 650         var date = parseDate(row[0]);
 651         var exp = row[1] - 0;
 652         var eo = row[2] - 0;
 653         var isNewMonth = endOfMonth == null || date.isSameOrAfter(endOfMonth);
 654         var isNewDate = nextDate == null || date.isSameOrAfter(nextDate);
 655         if (isNewDate || isNewMonth) {
 656             if (nextDate != null) {
 657                 result.push([
 658                     (isNewDate ? nextDate.subtract(1, 'days') : endOfMonth).format("YYYY-MM-DD"),
 659                     new Number((lastExp - prevExp) / expPerAch).toFixed(1), dayEo,
 660                     new Number((lastExp - monthExp) / expPerAch + monthEo).toFixed(1)
 661                 ]);
 662             }
 663             prevExp = lastExp === -1 ? exp : lastExp;
 664             if (isNewMonth) {
 665                 endOfMonth = date.clone().endOf('month').hour(22).startOf('hour');
 666                 if (endOfMonth.isSameOrBefore(date))
 667                     endOfMonth.add(1, 'month').endOf('month');
 668                 monthExp = lastExp === -1 ? exp : lastExp;
 669                 monthEo = 0;
 670             }
 671             dayEo = 0;
 672             nextDate = date.clone().hour(5).startOf('hour');
 673             if (date.hour() >= 5)
 674                 nextDate.add(1, 'days');
 675             if (nextDate.date() === 1)
 676                 nextDate.add(1, 'days');
 677         }
 678         dayEo += eo;
 679         monthEo += eo;
 680         lastExp = exp;
 681     }
 682     var dt = $('#achivement_table').DataTable();
 683     dt.clear();
 684     dt.rows.add(result).draw();
 685     $('#loading').hide();
 686 }
 687
 688 function initAchievementTable() {
 689     $("#achivement_table").dataTable({
 690         destroy: true,
 691         deferRener: true,
 692         stateSave: true,
 693         order: [[0, "desc"]],
 694         pageLength: 50,
 695         lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
 696         drawCallback: function () {
 697             $('#loading').hide();
 698         }
 699     });
 700 }
 701
 702 function selectTopTab(i) {
 703     var chart = tables;
 704     showChart = false;
 705     if (i < tables) {
 706         selectedTable = i;
 707         showLog();
 708     } else if (i === chart) {
 709         showChart = true;
 710         drawChart();
 711     } else if (i === chart + 1) {
 712         showAchivementTable();
 713     } else if (i === chart + 2) {
 714         setSortieStat();
 715     }
 716     if (i < tables)
 717         $('#term').show();
 718     else
 719         $('#term').hide();
 720     var tab = $('.tab0 li');
 721     tab.removeClass('select');
 722     tab.eq(i).addClass('select');
 723     $('#main_contents .hide').hide();
 724     $('#main_contents .hide').eq(i).show();
 725 }
 726
 727 function initAction() {
 728     $('.tab0 li').click(function () {
 729         var tab = $('.tab0 li');
 730         var i = tab.index(this);
 731         selectTopTab(i);
 732         sessionStorage.setItem('prevTab', i);
 733     });
 734     $('#range_seq li').click(function () {
 735         var tab = $('#range_seq li');
 736         var i = tab.index(this);
 737         seqChartRange = i;
 738         chartType = 0;
 739         drawChart();
 740         tab.removeClass('select');
 741         tab.eq(i).addClass('select');
 742         sessionStorage.setItem('prevSeqRange', i);
 743     });
 744     $('#range_diff li').click(function () {
 745         var tab = $('#range_diff li');
 746         var i = tab.index(this);
 747         diffChartRange = i;
 748         chartType = 1;
 749         drawChart();
 750         tab.removeClass('select');
 751         tab.eq(i).addClass('select');
 752         sessionStorage.setItem('prevDiffRange', i);
 753     });
 754     $('input[name="chart_type"]:radio').change(function () {
 755         if ($(this).val() === 0) {
 756             $("#range_seq").show();
 757             $("#range_diff").hide();
 758             chartType = 0;
 759         } else {
 760             $("#range_seq").hide();
 761             $("#range_diff").show();
 762             chartType = 1;
 763         }
 764         drawChart();
 765         sessionStorage.setItem('chartType', $(this).val());
 766     });
 767     $('#tooltip').change(function () {
 768         drawChart();
 769         sessionStorage.setItem('chartTooltip', $(this).prop("checked"));
 770     });
 771     $('#range_sortie_stat li').click(function () {
 772         var tab = $('#range_sortie_stat li');
 773         var i = tab.index(this);
 774         sortieStatRange = i;
 775         tab.removeClass('select');
 776         tab.eq(i).addClass('select');
 777         if (sortieStatRange === 0) {
 778             $('#sortie_stat_recent_tables').show();
 779             $('#sortie_stat_all_table').hide();
 780         } else {
 781             $('#sortie_stat_recent_tables').hide();
 782             $('#sortie_stat_all_table').show();
 783         }
 784         setSortieStat();
 785     });
 786 }
 787
 788 function initTableDatePicker() {
 789     $('#term_from').datepicker({
 790         defaultDate: moment().subtract(1, 'months').toDate(),
 791         onClose: function () { $('input[name=term]').val(['1']) }
 792     });
 793     $('#term_to').datepicker({
 794         onClose: function () { $('input[name=term]').val(['1']) }
 795     });
 796     $('#term_apply').click(showLog);
 797 }
 798
 799 function initChartDatePicker() {
 800     $('#chart_from').datepicker({
 801         onClose: function () { if (useChartDatePicker()) drawChart(); }
 802     });
 803     $('#chart_to').datepicker({
 804         onClose: function () { if (useChartDatePicker()) drawChart(); }
 805     });
 806 }
 807
 808 function useChartDatePicker() {
 809     return (chartType === 0 && seqChartRange === 5) ||
 810         (chartType === 1 && diffChartRange === 4);
 811 }
 812
 813 function initSortieStatDatePicker() {
 814     $('#sortie_stat_from').datepicker({
 815         onClose: function () { if (sortieStatRange === 1) setSortieStat(); }
 816     });
 817     $('#sortie_stat_to').datepicker({
 818         onClose: function () { if (sortieStatRange === 1) setSortieStat(); }
 819     });
 820 }
 821
 822 function restoreChartSettings() {
 823     var type = sessionStorage.getItem('chartType');
 824     chartType = type == null ? 0 : +type;
 825     var tooltip = sessionStorage.getItem('chartTooltip');
 826     $('#tooltip').prop('checked', tooltip === "true");
 827     var range = sessionStorage.getItem('prevSeqRange');
 828     seqChartRange = range == null ? 0 : +range;
 829     range = sessionStorage.getItem('prevDiffRange');
 830     diffChartRange = range == null ? 0 : +range;
 831     $('input[name="chart_type"]:radio').eq(chartType).prop('checked', true);
 832     if (chartType === 0) {
 833         $('#range_seq').show();
 834         $('#range_diff').hide();
 835     } else {
 836         $('#range_seq').hide();
 837         $('#range_diff').show();
 838     }
 839     $('#range_diff li').removeClass('select');
 840     $('#range_diff li').eq(diffChartRange).addClass('select');
 841     $('#range_seq li').removeClass('select');
 842     $('#range_seq li').eq(seqChartRange).addClass('select');
 843 }
 844
 845 $(function () {
 846     $.fn.dataTable.ext.errMode = 'throw';
 847     initAction();
 848     initTableDatePicker();
 849     initChartDatePicker();
 850     initSortieStatDatePicker();
 851     $('table').addClass('display compact cell-border');
 852     initTables();
 853     initAchievementTable();
 854     initSortieStatTables();
 855     $('#range_sortie_stat li').removeClass('select');
 856     $('#range_sortie_stat li').eq(sortieStatRange).addClass('select');
 857     restoreChartSettings();
 858     var prev = sessionStorage.getItem('prevTab');
 859     selectTopTab(prev == null ? 0 : +prev);
 860 });
 861 </script>
 862
 863 <div id="loading"><img src="https://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
 864
 865 <ul class="tab tab0">
 866 <li>ドロップ</li>
 867 <li>海戦</li>
 868 <li>遠征</li>
 869 <li>開発</li>
 870 <li>建造</li>
 871 <li>改修</li>
 872 <li>資材</li>
 873 <li>資材グラフ</li>
 874 <li>戦果</li>
 875 <li>出撃統計</li>
 876 </ul>
 877
 878 <form id="term">
 879 <p>
 880 <label><input type="radio" name="term" value="0" checked="checked">直近一か月</label>
 881 <label><input type="radio" name="term" value="1">期間指定: </label>
 882 <input type="text" id="term_from" style="width: 7em">～<input type="text" id="term_to" style="width: 7em">
 883 <input type="button" id="term_apply" value="適用">
 884 </p>
 885 </form>
 886
 887 <ul class="contents" id="main_contents">
 888 <li class="hide">
 889 <table id="log0">
 890 <thead>
 891 <tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘</th></tr>
 892 </thead>
 893 </table>
 894
 895 <li class="hide">
 896 <table id="log1">
 897 <thead>
 898 <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><th>味方制空値</th><th>敵制空値</th><th>制空状態</th></tr>
 899 </thead>
 900 </table>
 901
 902 <li class="hide">
 903 <table id="log2">
 904 <thead>
 905 <tr><th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>高速修復材</th><th>高速建造材</th></tr>
 906 </thead>
 907 </table>
 908
 909 <li class="hide">
 910 <table id="log3">
 911 <thead>
 912 <tr><th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th></tr>
 913 </thead>
 914 </table>
 915
 916 <li class="hide">
 917 <table id="log4">
 918 <thead>
 919 <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>
 920 </thead>
 921 </table>
 922
 923 <li class="hide">
 924 <table id="log5">
 925 <thead>
 926 <tr><th>日付</th><th>改修装備</th><th>レベル</th><th>成功</th><th>確実化</th><th>消費装備</th><th>消費数</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>改修資材</th><th>秘書艦</th><th>二番艦</th></tr>
 927 </thead>
 928 </table>
 929
 930 <li class="hide">
 931 <table id="log6">
 932 <thead>
 933 <tr><th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th></tr>
 934 </thead>
 935 </table>
 936
 937 <li class="hide">
 938 <form id="chart_type">
 939 <div style="margin: 0 0 0.5em 1em;">
 940 <label><input type="radio" name="chart_type" value="0" checked="checked">連続</label>
 941 <label><input type="radio" name="chart_type" value="1">差分</label>
 942 </div>
 943 </form>
 944 <ul class="tab tab1" id="range_seq" style="float: left; margin-right: 0.2em">
 945 <li>一日</li>
 946 <li>一週間</li>
 947 <li>一か月</li>
 948 <li>三か月</li>
 949 <li>すべて</li>
 950 <li>期間指定</li>
 951 </ul>
 952 <ul class="tab tab1" id="range_diff" style="float: left; margin-right: 0.2em">
 953 <li>一か月(日)</li>
 954 <li>三か月(日)</li>
 955 <li>半年(週)</li>
 956 <li>すべて(週)</li>
 957 <li>期間指定</li>
 958 </ul>
 959 <div style="padding: 0.2em 0;">
 960 <input type="text" id="chart_from" style="width: 7em">～<input type="text" id="chart_to" style="width: 7em">
 961 <label><input type="checkbox" id="tooltip" value="" style="margin-left: 2em;">ツールチップ</label>
 962 </div>
 963 <div id="chart" style="clear: both; margin: 1em;"></div>
 964
 965 <li class="hide">
 966 <table id="achivement_table">
 967 <thead>
 968 <tr><th>日付</th><th>戦果</th><th>EO</th><th>月毎</th></tr>
 969 </thead>
 970 </table>
 971
 972 <li class="hide">
 973 <ul class="tab tab1" id="range_sortie_stat" style="float: left; margin-right: 0.2em">
 974 <li>直近</li>
 975 <li>期間指定</li>
 976 </ul>
 977 <div style="padding: 0.2em 0;">
 978 <input type="text" id="sortie_stat_from" style="width: 7em">～<input type="text" id="sortie_stat_to" style="width: 7em">
 979 </div>
 980
 981 <div id="sortie_stat_recent_tables" style="clear: both;">
 982
 983 <h3>今日</h3>
 984 <table id="sortie_stat_day">
 985 <thead>
 986 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 987 </thead>
 988 </table>
 989
 990 <h3>今週</h3>
 991 <table id="sortie_stat_week">
 992 <thead>
 993 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 994 </table>
 995
 996 <h3>今月</h3>
 997 <table id="sortie_stat_month">
 998 <thead>
 999 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th></tr>
1000 </table>
1001 </div>
1002
1003 <div id="sortie_stat_all_table" style="display: none;">
1004 <table id="sortie_stat_all">
1005 <thead>
1006 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
1007 </thead>
1008 </table>
1009 </div>
1010
1011 </ul>
1012 </body>
1013 </html>