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 <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  15 <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  16 <script src="//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: 0em 0em 2em 1em; padding: 0em;}
  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: 0em; padding: 0em;}
  28 .hide {display: none;}
  29 #loading {
  30     width: 48px;
  31     height: 48px;
  32     display: none;
  33     position: fixed;
  34     top: 50%;
  35     left: 50%;
  36     margin-top: -24px;
  37     margin-left: -24px;
  38     z-index: 100;
  39 }
  40 </style>
  41
  42 </head>
  43 <body>
  44 <script>
  45 function showLog()
  46 {
  47     var query = "?from=" + moment().subtract(1, 'months').valueOf();
  48     if ($('input[name=term]:eq(1)').prop('checked')) {
  49         from = $('#term_from').datepicker("getDate");
  50         to = $('#term_to').datepicker("getDate");
  51         if (from != null)
  52             query = "?from=" + from.valueOf();
  53         if (to != null)
  54             query += "&to=" + (to.valueOf() + 3600 * 24 * 1000);
  55     }
  56     var jsons = [
  57         "海戦・ドロップ報告書.json",
  58         "海戦・ドロップ報告書.json",
  59         "遠征報告書.json",
  60         "開発報告書.json",
  61         "建造報告書.json",
  62         "改修報告書.json",
  63         "資材ログ.json"
  64     ];
  65     $('#loading').show();
  66     var url = jsons[selectedTable] + query;
  67     $('#log' + selectedTable).DataTable().ajax.url(url).load();
  68 }
  69
  70 var tables = 7;
  71
  72 function initTables()
  73 {
  74     for (var t = 0; t < tables; t++) {
  75         var opts = {
  76             destroy: true,
  77             deferRender: true,
  78             stateSave: true,
  79             order: [[0, "desc"]],
  80             pageLength: 50,
  81             lengthMenu: [[50, 100, 200, -1],[50, 100, 200, "All"]],
  82             drawCallback: function () {
  83                 $('#loading').hide();
  84             }
  85         };
  86         if (t == 0) {
  87             opts.columns = [{data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4}, {data: 9}, {data: 10}];
  88         } else if (t == 1) {
  89             var entries = [];
  90             for (i = 0; i < 35; i++) {
  91                 if (i == 9 || i == 10)
  92                     continue;
  93                 entries.push({data: i})
  94             }
  95             opts.columns = entries;
  96         }
  97         $('#log' + t).dataTable(opts);
  98     }
  99 }
 100
 101 const timeFormat = "YYYY-MM-DD HH:mm:ss";
 102 function parseDate(d)
 103 {
 104     return moment(d, timeFormat);
 105 }
 106
 107 function toString(d)
 108 {
 109     return d.format(timeFormat);
 110 }
 111
 112 function to5am(tick)
 113 {
 114     return tick - tick % (3600 * 24000) - 3600 * 4000;
 115 }
 116
 117 var selectedTable = 0;
 118 var selectedRange = 0;
 119 var chartType = 0;
 120
 121 function drawChart(data)
 122 {
 123     if (data == null) {
 124         $('#loading').show();
 125         $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
 126         return;
 127     }
 128     if (chartType == 0)
 129         drawSeqChart(data)
 130     else
 131         drawDiffChart(data)
 132 }
 133
 134 function drawSeqChart(data)
 135 {
 136     picked = pickChartData(data.data, selectedRange);
 137     var header = ["日付","燃料","弾薬","鋼材","ボーキ","高速建造材","高速修復材","開発資材","改修資材"];
 138     picked.data.unshift(header);
 139     var chart = c3.generate({
 140         bindto: '#chart',
 141         size: {
 142             height: 400,
 143             width: 800
 144         },
 145         data: {
 146             x: '日付',
 147             xFormat: '%Y-%m-%d %X',
 148             rows: picked.data,
 149             axes: {
 150                 燃料: 'y',
 151                 弾薬: 'y',
 152                 鋼材: 'y',
 153                 ボーキ: 'y',
 154                 高速建造材: 'y2',
 155                 高速修復材: 'y2',
 156                 開発資材: 'y2',
 157                 改修資材: 'y2'
 158             }
 159         },
 160         point: {
 161             show: false
 162         },
 163         tooltip: {
 164             show: $('#tooltip').prop('checked')
 165         },
 166         grid: {
 167             x: {
 168                 lines: picked.grid
 169             }
 170         },
 171         axis: {
 172             x: {
 173                 type: 'timeseries',
 174                 tick: {
 175                     rotate: 30,
 176                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
 177                     values: picked.tick
 178                 },
 179                 height: 60
 180             },
 181             y2: {
 182                 show: true
 183             }
 184         },
 185         onrendered: function () { $('#loading').hide(); }
 186     });
 187 }
 188
 189 function pickChartData(data, range)
 190 {
 191     var newdata = [];
 192     var ticks = [];
 193     var grid = [];
 194     var first = moment(data[0][0]).valueOf();
 195     var last = moment(data[data.length - 1][0]).valueOf();
 196     var interval, tickInterval, lastTick;
 197     const oneDay = 3600 * 24 * 1000;
 198     switch (range) {
 199     case 0:
 200         first = moment(last).subtract(24, 'hours').valueOf();
 201         break;
 202     case 1:
 203         first = moment(last).subtract(7, 'days').valueOf();
 204         break;
 205     case 2:
 206         first = moment(last).subtract(1, 'months').valueOf();
 207         break;
 208     case 3:
 209         first = moment(last).subtract(3, 'months').valueOf();
 210         break;
 211     case 4:
 212         first = moment(data[0][0]).valueOf();
 213         break;
 214     case 5:
 215         fromDate = $('#chart_from').datepicker("getDate");
 216         toDate = $('#chart_to').datepicker("getDate");
 217         if (fromDate == null || toDate == null)
 218             return { data: [], tick: [], grid: [] };
 219         from = fromDate.valueOf() + 3600 * 5000;
 220         to = toDate.valueOf() + oneDay + 3600 * 5000;
 221         first = Math.max(first, from);
 222         last = Math.min(last, to);
 223         break;
 224     }
 225     if (last <= first + oneDay) {
 226         interval = 1000;
 227         tickInterval = 3600 * 1000;
 228         lastTick = last - last % tickInterval;
 229     } else if (last <= first + oneDay * 21) {
 230         interval = 1000;
 231         tickInterval = oneDay;
 232         lastTick = to5am(last);
 233     } else if (last <= first + oneDay * 63) {
 234         interval = 3600 * 2000;
 235         tickInterval = oneDay * 7;
 236         lastTick = to5am(moment(last).day(1).valueOf());
 237     } else {
 238         interval = 3600 * 12000;
 239         tickInterval = oneDay * 14;
 240         lastTick = to5am(moment(last).day(1).valueOf());
 241     }
 242     var last_data;
 243     for (var i = data.length - 1; i >= 0; i--) {
 244         var row = data[i];
 245         var date = parseDate(row[0]).valueOf();
 246         if (date > first) {
 247             if (date <= last) {
 248                 var v = date - date % interval;
 249                 if (last_data != v) {
 250                     newdata.unshift(row);
 251                     last_data = v;
 252                 }
 253             }
 254         } else {
 255             break;
 256         }
 257     }
 258     for (var tick = lastTick; tick > last_data; tick -= tickInterval)
 259     {
 260         var str = toString(moment(tick));
 261         ticks.unshift(str);
 262         grid.unshift({value: str});
 263     }
 264     return { data: newdata, tick: ticks, grid: grid };
 265 }
 266
 267 function drawDiffChart(data)
 268 {
 269     picked = pickDiffChartData(data.data, selectedRange);
 270     var header = ["日付","燃料","弾薬","鋼材","ボーキ"];
 271     picked.data.unshift(header);
 272     var chart = c3.generate({
 273         bindto: '#chart',
 274         size: {
 275             height: 400,
 276             width: 800
 277         },
 278         data: {
 279             x: '日付',
 280             xFormat: '%Y-%m-%d %X',
 281             rows: picked.data,
 282             axes: {
 283                 燃料: 'y',
 284                 弾薬: 'y',
 285                 鋼材: 'y',
 286                 ボーキ: 'y',
 287             },
 288             type: 'bar',
 289             groups: [["燃料", "弾薬", "鋼材", "ボーキ"]]
 290         },
 291         bar: {
 292                 width: {
 293                     ratio: picked.width
 294               }
 295         },
 296         tooltip: {
 297             show: $('#tooltip').prop('checked')
 298         },
 299         grid: {
 300             x: {
 301                 lines: picked.grid
 302             },
 303             y: {
 304                 lines: [
 305                     {value: 0}
 306                 ]
 307             }
 308         },
 309         axis: {
 310             x: {
 311                 type: 'timeseries',
 312                 tick: {
 313                     rotate: 30,
 314                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
 315                     values: picked.tick
 316                 },
 317                 height: 60
 318             },
 319         },
 320         onrendered: function () { $('#loading').hide(); }
 321     });
 322 }
 323
 324 function pickDiffChartData(data, range)
 325 {
 326     var newdata = [];
 327     var ticks = [];
 328     var grid = [];
 329     var first = moment(data[0][0]).valueOf();
 330     var last = moment(data[data.length - 1][0]).valueOf();
 331     var interval, tickInterval, lastTick;
 332     const oneDay = 3600 * 24 * 1000;
 333     switch (range) {
 334     case 0:
 335         first = moment(last).subtract(1, 'months').valueOf();
 336         break;
 337     case 1:
 338         first = moment(last).subtract(3, 'months').valueOf();
 339         break;
 340     case 2:
 341         first = moment(last).subtract(6, 'months').subtract(1, 'weeks').valueOf();
 342         break;
 343     case 3:
 344         first = moment(data[0][0]).valueOf();
 345         break;
 346     case 4:
 347         fromDate = $('#chart_from').datepicker("getDate");
 348         toDate = $('#chart_to').datepicker("getDate");
 349         if (fromDate == null || toDate == null)
 350             return { data: [], tick: [], grid: [] };
 351         from = fromDate.valueOf() + 3600 * 5000;
 352         to = toDate.valueOf() + oneDay + 3600 * 5000;
 353         first = Math.max(first, from);
 354         last = Math.min(last, to);
 355         break;
 356     }
 357     if (last <= first + oneDay * 2 * 31) {
 358         interval = oneDay;
 359         tickInterval = oneDay * 2;
 360         lastTick = to5am(last);
 361         barWidth = 0.3;
 362     } else if (last <= first + oneDay * 3 * 31) {
 363         interval = oneDay;
 364         tickInterval = oneDay * 7;
 365         lastTick = to5am(last);
 366         barWidth = 0.1;
 367     } else {
 368         interval = oneDay * 7;
 369         tickInterval = oneDay * 14;
 370         lastTick = to5am(moment(last).day(1).valueOf());
 371         barWidth = 0.3;
 372         if (last <= first + oneDay * 8 * 31){
 373             tickInterval = oneDay * 7;
 374             barWidth = 0.6;
 375         }
 376     }
 377     var last_date = lastTick;
 378     var prev_row;
 379     for (var i = data.length - 1; i >= 0; i--) {
 380         var row = data[i];
 381         var date = parseDate(row[0]).valueOf();
 382         if (date > first && date <= last) {
 383             if (!prev_row) {
 384                 prev_row = row;
 385                 continue;
 386             }
 387             if (date <= last_date) {
 388                 var newrow = [prev_row[0]];
 389                 for (var r = 1; r < 5; r++) {
 390                     newrow.push(prev_row[r] - row[r] )
 391                 }
 392                 newdata.unshift(newrow);
 393                 last_date = last_date - interval;
 394                 prev_row = row;
 395             }
 396         } else {
 397             break;
 398         }
 399     }
 400     if (tickInterval >= oneDay * 7)
 401         lastTick = moment(lastTick).day(1).hour(5).minute(0).valueOf();
 402     for (var tick = lastTick; tick > last_date; tick -= tickInterval)
 403     {
 404         var str = toString(moment(tick));
 405         ticks.unshift(str);
 406         grid.unshift({value: str});
 407     }
 408     return { data: newdata, tick: ticks, grid: grid, width: barWidth };
 409 }
 410
 411 function setSortieStat(data) {
 412     if (!data) {
 413         $('#loading').show();
 414         var from = moment().subtract(1, 'months').valueOf();
 415         $.get("./海戦・ドロップ報告書.json?time=" + Date.now() + "&from=" + from, function (data) { setSortieStat(data.data);}, "json");
 416         return;
 417     }
 418     var r = {
 419         day: {stat: {}},
 420         week: {stat: {}},
 421         month: {stat: {}}
 422     };
 423     var initStat = function () { return {start:"-", S:0, A:0, B:0, C:0, D:0, R:0} };
 424     now = moment();
 425     r.day.begin = moment(now).hour(5).minute(0);
 426     if (now.hour() < 5) {
 427         r.day.begin.subtract(1, 'days');
 428     }
 429     r.week.begin = moment(now).day(1).hour(5).minute(0);
 430     if (now.day() == 0 || now.day() == 1 && now.hour() < 5) {
 431         r.week.begin.subtract(1, 'weeks');
 432     }
 433     r.month.begin = moment(now).date(1).hour(5).minute(0);
 434     if (now.date() == 1 && now.hours() < 5) {
 435         r.month.begin.subtract(1, 'months');
 436     }
 437     for (var i = 0; i < data.length; i++) {
 438         var row = data[i];
 439         var date = moment(row[0]);
 440         var map = row[1];
 441         var isBoss = row[3].indexOf("ボス") != -1;
 442         var isStart = row[3].indexOf("出撃") != -1;
 443         var resR = 0;
 444         for (var j = 23; j < row.length; j++) {
 445             if (/^輸送/.test(row[j]) && /^0\//.test(row[j + 1]))
 446                 resR++;
 447         }
 448         var res = row[4];
 449         if (res == "E")
 450             res = "D";
 451         for (var term in r) {
 452             to = r[term];
 453             if (to.begin.isAfter(date))
 454                 continue;
 455             for (var b = 0; b < 4; b++) {
 456                 var name = b < 2 ? "合計" : map;
 457                 if (b == 1 || b == 3) {
 458                     if (!isBoss)
 459                         continue;
 460                     name = name + " - ボス";
 461                 }
 462                 var mo = to.stat[name];
 463                 if (!mo) {
 464                     mo = to.stat[name] = initStat();
 465                     if (name == "合計")
 466                         to.stat["合計 - ボス"] = initStat();
 467                 }
 468                 mo["R"] += resR;
 469                 mo[res]++;
 470                 if ((b == 0 || b == 2) && isStart)
 471                 {
 472                     if (mo.start == "-")
 473                         mo.start = 0;
 474                     mo.start++
 475                 }
 476             }
 477         }
 478     }
 479     for (term in r) {
 480         var table = [];
 481         for (map in r[term].stat)
 482         {
 483             var e = r[term].stat[map];
 484             e.map = map;
 485             table.push(e);
 486         }
 487         var dt = $("#sortie_stat_" + term).DataTable();
 488         dt.clear();
 489         dt.rows.add(table).draw();
 490     }
 491     $('#loading').hide();
 492 }
 493
 494 function initSortieStat()
 495 {
 496     var terms = ['day', 'week', 'month'];
 497     for (var i = 0; i < terms.length; i++) {
 498         $("#sortie_stat_" + terms[i]).dataTable({
 499             paging: false,
 500             searching: false,
 501             ordering: false,
 502             columns: terms[i] != 'month' ? [
 503                 { data: "map" },
 504                 { data: "start" },
 505                 { data: "S" },
 506                 { data: "A" },
 507                 { data: "B" },
 508                 { data: "C" },
 509                 { data: "D" },
 510                 { data: "R" }
 511             ] : [
 512                 { data: "map" },
 513                 { data: "start" },
 514                 { data: "S" },
 515                 { data: "A" },
 516                 { data: "B" },
 517                 { data: "C" },
 518                 { data: "D" },
 519             ]
 520         });
 521     }
 522 }
 523
 524 function selectTopTab(i)
 525 {
 526     var chart = tables;
 527     if (i < tables) {
 528         selectedTable = i;
 529         showLog();
 530     } else if (i == chart) {
 531         drawChart();
 532     } else if (i == chart + 1) {
 533         setSortieStat();
 534     }
 535     if (i < tables)
 536         $('#term').show();
 537     else
 538         $('#term').hide();
 539     var tab = $('.tab0 li');
 540     tab.removeClass('select');
 541     tab.eq(i).addClass('select');
 542     $('.contents .hide').hide();
 543     $('.contents .hide').eq(i).show();
 544 }
 545
 546 function initAction()
 547 {
 548     $('.tab0 li').click(function() {
 549         var tab = $('.tab0 li');
 550         var i = tab.index(this)
 551         selectTopTab(i);
 552         sessionStorage.setItem('prevTab', i);
 553     });
 554     $('#range_seq li').click(function() {
 555         var tab = $('#range_seq li');
 556         var i = tab.index(this);
 557         selectedRange = i;
 558         chartType = 0;
 559         drawChart();
 560         tab.removeClass('select');
 561         tab.eq(i).addClass('select');
 562         sessionStorage.setItem('prevRange', i);
 563     });
 564     $('#range_diff li').click(function() {
 565         var tab = $('#range_diff li');
 566         var i = tab.index(this);
 567         selectedRange = i;
 568         chartType = 1;
 569         drawChart();
 570         tab.removeClass('select');
 571         tab.eq(i).addClass('select');
 572         sessionStorage.setItem('prevRange', i);
 573     });
 574     $('input[name="chart_type"]:radio').change(function() {
 575         if ($(this).val() == 0) {
 576             $("#range_seq").show();
 577             $("#range_diff").hide();
 578             $("#range_seq li").removeClass('select');
 579             chartType = 0;
 580         } else {
 581             $("#range_seq").hide();
 582             $("#range_diff").show();
 583             $("#range_diff li").removeClass('select');
 584             chartType = 1;
 585         }
 586         sessionStorage.setItem('chartType', $(this).val());
 587     });
 588     $('#tooltip').change(function() {
 589         drawChart();
 590     });
 591 }
 592
 593 function initTableDatePicker()
 594 {
 595     $('#term_from').datepicker({
 596         defaultDate: moment().subtract(1, 'months').toDate(),
 597         onClose: function() {$('input[name=term]').val(['1'])}
 598     });
 599     $('#term_to').datepicker({
 600         onClose: function() {$('input[name=term]').val(['1'])}
 601     });
 602     $('#term_apply').click(showLog);
 603 }
 604
 605 function initChartDatePicker()
 606 {
 607     $('#chart_from').datepicker({
 608         onClose: function() {if (useChartDatePicker()) drawChart();}
 609     })
 610     $('#chart_to').datepicker({
 611         onClose: function() {if (useChartDatePicker()) drawChart();}
 612     });
 613 }
 614
 615 function useChartDatePicker()
 616 {
 617     return (chartType == 0 && selectedRange == 5) ||
 618         (chartType == 1 && selectedRange == 4);
 619 }
 620
 621 $(function() {
 622     $.fn.dataTable.ext.errMode = 'throw';
 623     initAction();
 624     initTableDatePicker();
 625     initChartDatePicker();
 626     $('table').addClass('display compact cell-border');
 627     initTables();
 628     initSortieStat();
 629     var type = sessionStorage.getItem('chartType');
 630     chartType = type == null ? 0 : +type;
 631     var range = sessionStorage.getItem('prevRange');
 632     selectedRange = range == null ? 0 : +range;
 633     $('input[name="chart_type"]:radio').eq(chartType).prop("checked", true);
 634     if (chartType == 0) {
 635         $('#range_seq').show()
 636         $('#range_diff').hide()
 637     } else {
 638         $('#range_seq').hide()
 639         $('#range_diff').show()
 640     }
 641     $('#range_diff li').removeClass('select');
 642     $('#range_diff li').eq(range).addClass('select');
 643     $('#range_seq li').removeClass('select');
 644     $('#range_seq li').eq(range).addClass('select');
 645     var prev = sessionStorage.getItem('prevTab');
 646     selectTopTab(prev == null ? 0 : +prev);
 647 });
 648 </script>
 649
 650 <div id="loading"><img src="http://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
 651
 652 <ul class="tab tab0">
 653 <li>ドロップ</li>
 654 <li>海戦</li>
 655 <li>遠征</li>
 656 <li>開発</li>
 657 <li>建造</li>
 658 <li>改修</li>
 659 <li>資材</li>
 660 <li>資材グラフ</li>
 661 <li>出撃統計</li>
 662 </ul>
 663
 664 <form id="term">
 665 <p>
 666 <label><input type="radio" name="term" value="0" checked="checked">直近一か月</label>
 667 <label><input type="radio" name="term" value="1">期間指定: </label>
 668 <input type="text" id="term_from" style="width: 7em">～<input type="text" id="term_to" style="width: 7em">
 669 <input type="button" id="term_apply" value="適用">
 670 </p>
 671 </form>
 672
 673 <ul class="contents">
 674 <li class="hide">
 675 <table id="log0">
 676 <thead>
 677 <tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘</th></tr>
 678 </thead>
 679 </table>
 680
 681 <li class="hide">
 682 <table id="log1">
 683 <thead>
 684 <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>
 685 </thead>
 686 </table>
 687
 688 <li class="hide">
 689 <table id="log2">
 690 <thead>
 691 <tr><th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>高速修復材</th><th>高速建造材</th></tr>
 692 </thead>
 693 </table>
 694
 695 <li class="hide">
 696 <table id="log3">
 697 <thead>
 698 <tr><th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th></tr>
 699 </thead>
 700 </table>
 701
 702 <li class="hide">
 703 <table id="log4">
 704 <thead>
 705 <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>
 706 </thead>
 707 </table>
 708
 709 <li class="hide">
 710 <table id="log5">
 711 <thead>
 712 <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>
 713 </thead>
 714 </table>
 715
 716 <li class="hide">
 717 <table id="log6">
 718 <thead>
 719 <tr><th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th></tr>
 720 </thead>
 721 </table>
 722
 723 <li class="hide">
 724 <form id="chart_type">
 725 <div style="margin: 0px 0px 0.5em 1em;">
 726 <label><input type="radio" name="chart_type" value="0" checked="checked">連続</label>
 727 <label><input type="radio" name="chart_type" value="1">差分</label>
 728 </div>
 729 </form>
 730 <ul class="tab tab1" id="range_seq" style="float: left; margin-right: 0.2em">
 731 <li>一日</li>
 732 <li>一週間</li>
 733 <li>一か月</li>
 734 <li>三か月</li>
 735 <li>すべて</li>
 736 <li>期間指定</li>
 737 </ul>
 738 <ul class="tab tab1" id="range_diff" style="float: left; margin-right: 0.2em">
 739 <li>一か月(日)</li>
 740 <li>三か月(日)</li>
 741 <li>半年(週)</li>
 742 <li>すべて(週)</li>
 743 <li>期間指定</li>
 744 </ul>
 745 <div style="padding: 0.2em 0em;">
 746 <input type="text" id="chart_from" style="width: 7em">～<input type="text" id="chart_to" style="width: 7em">
 747 <label><input type="checkbox" id="tooltip" value="" style="margin-left: 2em;">ツールチップ</label>
 748 </div>
 749 <div id="chart" style="clear: both; width: 800px; margin: 1em;"></div>
 750
 751 <li class="hide">
 752 <h3>今日</h3>
 753 <table id="sortie_stat_day">
 754 <thead>
 755 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 756 </thead>
 757 </table>
 758
 759 <h3>今週</h3>
 760 <table id="sortie_stat_week">
 761 <thead>
 762 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 763 </table>
 764
 765 <h3>今月</h3>
 766 <table id="sortie_stat_month">
 767 <thead>
 768 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th></tr>
 769 </table>
 770 </ul>
 771 </body>
 772 </html>