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