OSDN Git Service

タイマーで発生した例外を捕捉する
[kancollesniffer/KancolleSniffer.git] / LogViewer / index.html
index 7e8ea28..f618258 100644 (file)
@@ -4,27 +4,30 @@
 <meta charset="utf-8">
 <title>各種報告書 - KancolleSniffer</title>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
-<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
-<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
-<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
-<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ja.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ja.min.js"></script>
 <style>
 body {
     font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
     line-height: 1.5;
     font-size: 14px;
 }
-.tab {overflow: hidden; list-style-type: none; margin: 0em 2em 2em 1em; padding: 0em;}
-.tab li {background: #eee; padding: 0.3em 2.0em; float: left; margin-right: 2px;}
+.tab {overflow: hidden; list-style-type: none; margin: 0em 0em 2em 1em; padding: 0em;}
+.tab li {background: #eee; padding: 0.3em 1.5em; float: left; margin-right: 2px;}
+.tab1 li {padding: 0.3em 1em;}
 .tab li.select {background: #ccc;}
 .contents {list-style-type: none; margin: 0em; padding: 0em;}
 .hide {display: none;}
+.c3 .tick {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 12px;}
+.c3-legend-item {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 14px;}
 #loading {
     width: 48px;
     height: 48px;
@@ -58,6 +61,7 @@ function showLog()
         "遠征報告書.json",
         "開発報告書.json",
         "建造報告書.json",
+        "改修報告書.json",
         "資材ログ.json"
     ];
     $('#loading').show();
@@ -65,9 +69,11 @@ function showLog()
     $('#log' + selectedTable).DataTable().ajax.url(url).load();
 }
 
+var tables = 7;
+
 function initTables()
 {
-    for (var t = 0; t < 6; t++) {
+    for (var t = 0; t < tables; t++) {
         var opts = {
             destroy: true,
             deferRender: true,
@@ -83,7 +89,7 @@ function initTables()
             opts.columns = [{data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4}, {data: 9}, {data: 10}];
         } else if (t == 1) {
             var entries = [];
-            for (i = 0; i < 35; i++) {
+            for (i = 0; i < 38; i++) {
                 if (i == 9 || i == 10)
                     continue;
                 entries.push({data: i})
@@ -105,83 +111,214 @@ function toString(d)
     return d.format(timeFormat);
 }
 
+function to5am(tick)
+{
+    return tick - tick % (3600 * 24000) - 3600 * 4000;
+}
+
+var selectedTable = 0;
+var seqChartRange = 0;
+var diffChartRange = 0;
+var chartType = 0;
+var showChart = false;
+var currentPickedData;
+
+function drawChart(data)
+{
+    if (data == null) {
+        $('#loading').show();
+        $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
+        return;
+    }
+    if (chartType == 0) {
+        var picked = pickChartData(data.data, seqChartRange);
+        var header = ["日付","燃料","弾薬","鋼材","ボーキ","高速建造材","高速修復材","開発資材","改修資材"];
+        picked.data.unshift(header);
+        drawSeqChart(picked);
+        currentPickedData = picked;
+    } else {
+        var picked = pickDiffChartData(data.data, diffChartRange);
+        var header = ["日付","燃料","弾薬","鋼材","ボーキ"];
+        picked.data.unshift(header);
+        drawDiffChart(picked)
+        currentPickedData = picked;
+    }
+}
+
+function redrawChart()
+{
+    if (!currentPickedData)
+        return;
+    $('#loading').show();
+    setTimeout(function() {
+        if (chartType == 0)
+            drawSeqChart(currentPickedData);
+        else
+            drawDiffChart(currentPickedData);
+    });
+}
+
+var timer;
+$(window).resize(function() {
+    if (timer)
+        clearTimeout(timer);
+    timer = setTimeout(function() {
+        if (showChart)
+            redrawChart();
+    }, 200);
+});
+
+function chartSize()
+{
+    var pxPerEm = Number($('#chart').css('fontSize').match(/(\d*(\.\d*)?)px/)[1]);
+    return {
+        height: Math.max($(document).height() - 15 * pxPerEm, 400),
+        width: Math.max($(document).width() - 6 * pxPerEm, 800)
+    };
+}
+
+function drawSeqChart(picked)
+{
+    size = chartSize();
+    var chart = c3.generate({
+        bindto: '#chart',
+        size: {
+            height: size.height,
+            width: size.width
+        },
+        data: {
+            x: '日付',
+            xFormat: '%Y-%m-%d %X',
+            rows: picked.data,
+            axes: {
+                燃料: 'y',
+                弾薬: 'y',
+                鋼材: 'y',
+                ボーキ: 'y',
+                高速建造材: 'y2',
+                高速修復材: 'y2',
+                開発資材: 'y2',
+                改修資材: 'y2'
+            }
+        },
+        point: {
+            show: false
+        },
+        tooltip: {
+            show: $('#tooltip').prop('checked')
+        },
+        grid: {
+            x: {
+                lines: picked.grid
+            }
+        },
+        axis: {
+            x: {
+                type: 'timeseries',
+                tick: {
+                    rotate: 30,
+                    format: function (x) { return moment(x).format("MM-DD HH:mm"); },
+                    values: picked.tick
+                },
+            },
+            y2: {
+                show: true
+            }
+        },
+        onrendered: function () { $('#loading').hide(); }
+    });
+}
+
 function pickChartData(data, range)
 {
     var newdata = [];
     var ticks = [];
     var grid = [];
+    var first = moment(data[0][0]).valueOf();
     var last = moment(data[data.length - 1][0]).valueOf();
-    var first, interval, tickInterval;
+    var interval, tickInterval, lastTick;
     const oneDay = 3600 * 24 * 1000;
     switch (range) {
     case 0:
         first = moment(last).subtract(24, 'hours').valueOf();
-        interval = 1000;
-        tickInterval = 3600 * 1000;
-        last -= last % tickInterval;
         break;
     case 1:
         first = moment(last).subtract(7, 'days').valueOf();
-        interval = 1000;
-        tickInterval = oneDay;
-        last -= last % tickInterval + 3600 * 4000;
         break;
     case 2:
         first = moment(last).subtract(1, 'months').valueOf();
-        last = moment(last).day(1).valueOf();
-        interval = 3600 * 2000;
-        tickInterval = oneDay * 7;
-        last -= last % oneDay + 3600 * 4000;
         break;
     case 3:
+        first = moment(last).subtract(3, 'months').valueOf();
+        break;
+    case 4:
         first = moment(data[0][0]).valueOf();
-        last = moment(last).day(1).valueOf();
-        interval = 3600 * 6000;
-        tickInterval = oneDay * 7;
-        last -= last % oneDay + 3600 * 4000;
+        break;
+    case 5:
+        fromDate = $('#chart_from').datepicker("getDate");
+        toDate = $('#chart_to').datepicker("getDate");
+        if (fromDate == null || toDate == null)
+            return { data: [], tick: [], grid: [] };
+        from = fromDate.valueOf() + 3600 * 5000;
+        to = toDate.valueOf() + oneDay + 3600 * 5000;
+        first = Math.max(first, from);
+        last = Math.min(last, to);
         break;
     }
-    for (var tick = last; tick > first; tick -= tickInterval)
-    {
-        var str = toString(moment(tick));
-        ticks.unshift(str);
-        grid.unshift({value: str});
+    if (last <= first + oneDay) {
+        interval = 1000;
+        tickInterval = 3600 * 1000;
+        lastTick = last - last % tickInterval;
+    } else if (last <= first + oneDay * 21) {
+        interval = 1000;
+        tickInterval = oneDay;
+        lastTick = to5am(last);
+    } else if (last <= first + oneDay * 63) {
+        interval = 3600 * 2000;
+        tickInterval = oneDay * 7;
+        lastTick = to5am(moment(last).day(1).valueOf());
+    } else if (last <= first + oneDay * 126) {
+        interval = 3600 * 12000;
+        tickInterval = oneDay * 14;
+        lastTick = to5am(moment(last).day(1).valueOf());
+    } else {
+        interval = 3600 * 24000;
+        tickInterval = oneDay * 28;
+        lastTick = to5am(moment(last).day(1).valueOf());
     }
     var last_data;
     for (var i = data.length - 1; i >= 0; i--) {
         var row = data[i];
         var date = parseDate(row[0]).valueOf();
         if (date > first) {
-            var v = date - date % interval;
-            if (last_data != v) {
-                newdata.unshift(row);
-                last_data = v;
+            if (date <= last) {
+                var v = date - date % interval;
+                if (last_data != v) {
+                    newdata.unshift(row);
+                    last_data = v;
+                }
             }
         } else {
             break;
         }
     }
+    for (var tick = lastTick; tick > last_data; tick -= tickInterval)
+    {
+        var str = toString(moment(tick));
+        ticks.unshift(str);
+        grid.unshift({value: str});
+    }
     return { data: newdata, tick: ticks, grid: grid };
 }
 
-var selectedTable = 0;
-var selectedRange = 0;
-
-function drawChart(data)
+function drawDiffChart(picked)
 {
-    if (data == null) {
-        $('#loading').show();
-        $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
-        return;
-    }
-    picked = pickChartData(data.data, selectedRange);
-    var header = ["日付","燃料","弾薬","鋼材","ボーキ","高速建造材","高速修復材","開発資材","改修資材"];
-    picked.data.unshift(header);
+    size = chartSize();
     var chart = c3.generate({
         bindto: '#chart',
         size: {
-            height: 400,
-            width: 800
+            height: size.height,
+            width: size.width
         },
         data: {
             x: '日付',
@@ -192,14 +329,14 @@ function drawChart(data)
                 弾薬: 'y',
                 鋼材: 'y',
                 ボーキ: 'y',
-                高速建造材: 'y2',
-                高速修復材: 'y2',
-                開発資材: 'y2',
-                改修資材: 'y2'
-            }
+            },
+            type: 'bar',
+            groups: [["燃料", "弾薬", "鋼材", "ボーキ"]]
         },
-        point: {
-            show: false
+        bar: {
+                width: {
+                    ratio: picked.width
+              }
         },
         tooltip: {
             show: $('#tooltip').prop('checked')
@@ -207,6 +344,11 @@ function drawChart(data)
         grid: {
             x: {
                 lines: picked.grid
+            },
+            y: {
+                lines: [
+                    {value: 0}
+                ]
             }
         },
         axis: {
@@ -217,16 +359,99 @@ function drawChart(data)
                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
                     values: picked.tick
                 },
-                height: 60
             },
-            y2: {
-                show: true
-            }
         },
         onrendered: function () { $('#loading').hide(); }
     });
 }
 
+function pickDiffChartData(data, range)
+{
+    var newdata = [];
+    var ticks = [];
+    var grid = [];
+    var first = moment(data[0][0]).valueOf();
+    var last = moment(data[data.length - 1][0]).valueOf();
+    var interval, tickInterval, lastTick;
+    const oneDay = 3600 * 24 * 1000;
+    switch (range) {
+    case 0:
+        first = moment(last).subtract(1, 'months').valueOf();
+        break;
+    case 1:
+        first = moment(last).subtract(3, 'months').valueOf();
+        break;
+    case 2:
+        first = moment(last).subtract(6, 'months').subtract(1, 'weeks').valueOf();
+        break;
+    case 3:
+        first = moment(data[0][0]).valueOf();
+        break;
+    case 4:
+        fromDate = $('#chart_from').datepicker("getDate");
+        toDate = $('#chart_to').datepicker("getDate");
+        if (fromDate == null || toDate == null)
+            return { data: [], tick: [], grid: [] };
+        from = fromDate.valueOf() + 3600 * 5000;
+        to = toDate.valueOf() + oneDay + 3600 * 5000;
+        first = Math.max(first, from);
+        last = Math.min(last, to);
+        break;
+    }
+    if (last <= first + oneDay * 2 * 31) {
+        interval = oneDay;
+        tickInterval = oneDay * 2;
+        lastTick = to5am(last);
+        barWidth = 0.3;
+    } else if (last <= first + oneDay * 3 * 31) {
+        interval = oneDay;
+        tickInterval = oneDay * 7;
+        lastTick = to5am(last);
+        barWidth = 0.1;
+    } else {
+        interval = oneDay * 7;
+        tickInterval = oneDay * 28;
+        lastTick = to5am(moment(last).day(1).valueOf());
+        barWidth = 0.1;
+        if (last <= first + oneDay * 6 * 38){
+            tickInterval = oneDay * 14;
+            barWidth = 0.3;
+        }
+    }
+    var last_date = lastTick;
+    var prev_row;
+    for (var i = data.length - 1; i >= 0; i--) {
+        var row = data[i];
+        var date = parseDate(row[0]).valueOf();
+        if (date > first && date <= last) {
+            if (!prev_row) {
+                prev_row = row;
+                continue;
+            }
+            if (date <= last_date) {
+                var newrow = [prev_row[0]];
+                for (var r = 1; r < 5; r++) {
+                    newrow.push(prev_row[r] - row[r] )
+                }
+                newdata.unshift(newrow);
+                last_date = last_date - interval;
+                prev_row = row;
+            }
+        } else {
+            break;
+        }
+    }
+    if (tickInterval >= oneDay * 7)
+        lastTick = moment(lastTick).day(1).hour(5).minute(0).valueOf();
+    for (var tick = lastTick; tick > last_date; tick -= tickInterval)
+    {
+        var str = toString(moment(tick));
+        ticks.unshift(str);
+        grid.unshift({value: str});
+    }
+    return { data: newdata, tick: ticks, grid: grid, width: barWidth };
+}
+
 function setSortieStat(data) {
     if (!data) {
         $('#loading').show();
@@ -239,7 +464,7 @@ function setSortieStat(data) {
         week: {stat: {}},
         month: {stat: {}}
     };
-    var initStat = function () { return {start:"-", S:0, A:0, B:0, C:0, D:0} };
+    var initStat = function () { return {start:"-", S:0, A:0, B:0, C:0, D:0, R:0} };
     now = moment();
     r.day.begin = moment(now).hour(5).minute(0);
     if (now.hour() < 5) {
@@ -259,6 +484,11 @@ function setSortieStat(data) {
         var map = row[1];
         var isBoss = row[3].indexOf("ボス") != -1;
         var isStart = row[3].indexOf("出撃") != -1;
+        var resR = 0;
+        for (var j = 23; j < row.length; j++) {
+            if (/^輸送/.test(row[j]) && /^0\//.test(row[j + 1]))
+                resR++;
+        }
         var res = row[4];
         if (res == "E")
             res = "D";
@@ -279,6 +509,7 @@ function setSortieStat(data) {
                     if (name == "合計")
                         to.stat["合計 - ボス"] = initStat();
                 }
+                mo["R"] += resR;
                 mo[res]++;
                 if ((b == 0 || b == 2) && isStart)
                 {
@@ -291,11 +522,22 @@ function setSortieStat(data) {
     }
     for (term in r) {
         var table = [];
+        var pushed = {};
         for (map in r[term].stat)
         {
+            if (pushed[map])
+                continue;
             var e = r[term].stat[map];
             e.map = map;
             table.push(e);
+            pushed[map] = 1;
+            boss = map + " - ボス";
+            e = r[term].stat[boss];
+            if (!e)
+                continue;
+            e.map = boss;
+            table.push(e);
+            pushed[boss] = 1;
         }
         var dt = $("#sortie_stat_" + term).DataTable();
         dt.clear();
@@ -312,14 +554,23 @@ function initSortieStat()
             paging: false,
             searching: false,
             ordering: false,
-            columns: [
+            columns: terms[i] != 'month' ? [
+                { data: "map" },
+                { data: "start" },
+                { data: "S" },
+                { data: "A" },
+                { data: "B" },
+                { data: "C" },
+                { data: "D" },
+                { data: "R" }
+            ] : [
                 { data: "map" },
                 { data: "start" },
                 { data: "S" },
                 { data: "A" },
                 { data: "B" },
                 { data: "C" },
-                { data: "D" }
+                { data: "D" },
             ]
         });
     }
@@ -327,15 +578,18 @@ function initSortieStat()
 
 function selectTopTab(i)
 {
-    if (i < 6) {
+    var chart = tables;
+    showChart = false;
+    if (i < tables) {
         selectedTable = i;
         showLog();
-    } else if (i == 6) {
+    } else if (i == chart) {
+        showChart = true;
         drawChart();
-    } else if (i == 7) {
+    } else if (i == chart + 1) {
         setSortieStat();
     }
-    if (i < 6)
+    if (i < tables)
         $('#term').show();
     else
         $('#term').hide();
@@ -346,43 +600,112 @@ function selectTopTab(i)
     $('.contents .hide').eq(i).show();
 }
 
-$(function() {
-    $.fn.dataTable.ext.errMode = 'throw';
+function initAction()
+{
     $('.tab0 li').click(function() {
         var tab = $('.tab0 li');
         var i = tab.index(this)
         selectTopTab(i);
         sessionStorage.setItem('prevTab', i);
     });
-    $('.tab1 li').click(function() {
-        var tab = $('.tab1 li');
+    $('#range_seq li').click(function() {
+        var tab = $('#range_seq li');
         var i = tab.index(this);
-        selectedRange = i;
+        seqChartRange = i;
+        chartType = 0;
         drawChart();
         tab.removeClass('select');
         tab.eq(i).addClass('select');
-        sessionStorage.setItem('prevRange', i);
+        sessionStorage.setItem('prevSeqRange', i);
+    });
+    $('#range_diff li').click(function() {
+        var tab = $('#range_diff li');
+        var i = tab.index(this);
+        diffChartRange = i;
+        chartType = 1;
+        drawChart();
+        tab.removeClass('select');
+        tab.eq(i).addClass('select');
+        sessionStorage.setItem('prevDiffRange', i);
+    });
+    $('input[name="chart_type"]:radio').change(function() {
+        if ($(this).val() == 0) {
+            $("#range_seq").show();
+            $("#range_diff").hide();
+            chartType = 0;
+        } else {
+            $("#range_seq").hide();
+            $("#range_diff").show();
+            chartType = 1;
+        }
+        drawChart();
+        sessionStorage.setItem('chartType', $(this).val());
     });
     $('#tooltip').change(function() {
         drawChart();
     });
-    $('table').addClass('display compact cell-border');
-    initTables();
-    initSortieStat();
-    var range = sessionStorage.getItem('prevRange');
-    selectedRange = range == null ? 0 : +range;
-    $('.tab1 li').eq(range).addClass('select');
+}
+
+function initTableDatePicker()
+{
     $('#term_from').datepicker({
-        defaultDate: moment().subtract(1, 'months').toDate()
+        defaultDate: moment().subtract(1, 'months').toDate(),
+        onClose: function() {$('input[name=term]').val(['1'])}
+    });
+    $('#term_to').datepicker({
+        onClose: function() {$('input[name=term]').val(['1'])}
     });
-    $('#term_to').datepicker();
     $('#term_apply').click(showLog);
+}
+
+function initChartDatePicker()
+{
+    $('#chart_from').datepicker({
+        onClose: function() {if (useChartDatePicker()) drawChart();}
+    })
+    $('#chart_to').datepicker({
+        onClose: function() {if (useChartDatePicker()) drawChart();}
+    });
+}
+
+function useChartDatePicker()
+{
+    return (chartType == 0 && seqChartRange == 5) ||
+        (chartType == 1 && diffChartRange == 4);
+}
+
+$(function() {
+    $.fn.dataTable.ext.errMode = 'throw';
+    initAction();
+    initTableDatePicker();
+    initChartDatePicker();
+    $('table').addClass('display compact cell-border');
+    initTables();
+    initSortieStat();
+    var type = sessionStorage.getItem('chartType');
+    chartType = type == null ? 0 : +type;
+    var range = sessionStorage.getItem('prevSeqRange');
+    seqChartRange = range == null ? 0 : +range;
+    range = sessionStorage.getItem('prevDiffRange');
+    seqDiffRange = range == null ? 0 : +range;
+    $('input[name="chart_type"]:radio').eq(chartType).prop("checked", true);
+    if (chartType == 0) {
+        $('#range_seq').show()
+        $('#range_diff').hide()
+    } else {
+        $('#range_seq').hide()
+        $('#range_diff').show()
+    }
+    $('#range_diff li').removeClass('select');
+    $('#range_diff li').eq(diffChartRange).addClass('select');
+    $('#range_seq li').removeClass('select');
+    $('#range_seq li').eq(seqChartRange).addClass('select');
     var prev = sessionStorage.getItem('prevTab');
     selectTopTab(prev == null ? 0 : +prev);
 });
 </script>
 
-<div id="loading"><img src="http://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
+<div id="loading"><img src="https://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
 
 <ul class="tab tab0">
 <li>ドロップ</li>
@@ -390,6 +713,7 @@ $(function() {
 <li>遠征</li>
 <li>開発</li>
 <li>建造</li>
+<li>改修</li>
 <li>資材</li>
 <li>資材グラフ</li>
 <li>出撃統計</li>
@@ -398,8 +722,8 @@ $(function() {
 <form id="term">
 <p>
 <label><input type="radio" name="term" value="0" checked="checked">直近一か月</label>
-<label><input type="radio" name="term" value="1">æ\8c\87å®\9aã\81®æ\9c\9fé\96\93: </label>
-<input type="text" id="term_from" style="width: 8em">~<input type="text" id="term_to" style="width: 8em">
+<label><input type="radio" name="term" value="1">æ\9c\9fé\96\93æ\8c\87å®\9a: </label>
+<input type="text" id="term_from" style="width: 7em">~<input type="text" id="term_to" style="width: 7em">
 <input type="button" id="term_apply" value="適用">
 </p>
 </form>
@@ -415,7 +739,7 @@ $(function() {
 <li class="hide">
 <table id="log1">
 <thead>
-<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>
+<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>
 </thead>
 </table>
 
@@ -443,32 +767,57 @@ $(function() {
 <li class="hide">
 <table id="log5">
 <thead>
+<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>
+</thead>
+</table>
+
+<li class="hide">
+<table id="log6">
+<thead>
 <tr><th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th></tr>
 </thead>
 </table>
 
 <li class="hide">
-<ul class="tab tab1" style="float: left">
+<form id="chart_type">
+<div style="margin: 0px 0px 0.5em 1em;">
+<label><input type="radio" name="chart_type" value="0" checked="checked">連続</label>
+<label><input type="radio" name="chart_type" value="1">差分</label>
+</div>
+</form>
+<ul class="tab tab1" id="range_seq" style="float: left; margin-right: 0.2em">
 <li>一日</li>
 <li>一週間</li>
 <li>一か月</li>
+<li>三か月</li>
 <li>すべて</li>
+<li>期間指定</li>
 </ul>
-<label><input type="checkbox" id="tooltip" value="">ツールチップ</label>
-<div id="chart" style="clear: both; width: 800px; margin: 1em;"></div>
+<ul class="tab tab1" id="range_diff" style="float: left; margin-right: 0.2em">
+<li>一か月(日)</li>
+<li>三か月(日)</li>
+<li>半年(週)</li>
+<li>すべて(週)</li>
+<li>期間指定</li>
+</ul>
+<div style="padding: 0.2em 0em;">
+<input type="text" id="chart_from" style="width: 7em">~<input type="text" id="chart_to" style="width: 7em">
+<label><input type="checkbox" id="tooltip" value="" style="margin-left: 2em;">ツールチップ</label>
+</div>
+<div id="chart" style="clear: both; margin: 1em;"></div>
 
 <li class="hide">
 <h3>今日</h3>
 <table id="sortie_stat_day">
 <thead>
-<tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th></tr>
+<tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 </thead>
 </table>
 
 <h3>今週</h3>
 <table id="sortie_stat_week">
 <thead>
-<tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th></tr>
+<tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 </table>
 
 <h3>今月</h3>