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