OSDN Git Service

海戦報告書に大破艦の欄を追加する
[kancollesniffer/KancolleSniffer.git] / LogViewer / tags.html
index 20cf2f6..5ad2723 100644 (file)
@@ -41,7 +41,7 @@ this.on("mount", function() {
     });
 });
 
-this.enabled = false;
+this.enabled = true;
 var self = this;
 
 opts.observable.on("mainTabChanged", function(idx) {
@@ -62,7 +62,7 @@ opts.observable.on("mainTabChanged", function(idx) {
 <script>
 this.tables = [
 "<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>敵艦隊</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>", // 海戦
+"<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>大破艦</ht><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>", // 海戦
 "<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><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th>", // 開発
 "<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>", // 建造
@@ -116,7 +116,7 @@ this.init = function() {
             opts.columns = [{ data: 0 }, { data: 1 }, { data: 2 }, { data: 3 }, { data: 4 }, { data: 9 }, { data: 10 }];
         } else if (t === 1) {
             var entries = [];
-            for (var i = 0; i < 38; i++) {
+            for (var i = 0; i < 39; i++) {
                 if (i === 9 || i === 10)
                     continue;
                 entries.push({ data: i });
@@ -201,7 +201,7 @@ this.diffChartRanges = [
 "一か月(日)",
 "三か月(日)",
 "半年(週)",
-"すべて()",
+"すべて()",
 "期間指定"
 ];
 
@@ -223,7 +223,7 @@ this.rangeTabChange = function(e) {
 
 this.tooltipChange = function(e) {
     opts.chartSpec.tooltip = +e.target.checked;
-    sessionStorage.setItem('chartTooltip', this.tooltip);
+    sessionStorage.setItem('chartTooltip', +e.target.checked);
     opts.observable.trigger("chartSpecChanged");
 };
 
@@ -234,10 +234,16 @@ this.useDatePicker = function() {
 
 this.init = function() {
     $('#chart_from').datepicker({
-        onClose: function() { if (self.useDatePicker()) self.drawChart(); }
+        onClose: function() {
+            if (self.useDatePicker())
+                opts.observable.trigger("chartSpecChanged");
+        }
     });
     $('#chart_to').datepicker({
-        onClose: function() { if (self.useDatePicker()) self.drawChart(); }
+        onClose: function() {
+            if (self.useDatePicker())
+                opts.observable.trigger("chartSpecChanged");
+        }
     });
 };
 
@@ -283,7 +289,7 @@ this.drawChart = function(data) {
     if (!data) {
         $('#loading').show();
         $.ajax({
-            url: "./資材ログ.json",
+            url: "./資材ログ.json?number=true",
             success: function(d) { self.drawChart(d); },
             dataType: "json", cache: false
         });
@@ -337,7 +343,7 @@ this.drawSeqChart = function(picked) {
                 type: 'timeseries',
                 tick: {
                     rotate: 30,
-                    format: function(x) { return moment(x).format("MM-DD HH:mm"); },
+                    format: "%m-%d %H:%M",
                     values: picked.tick
                 }
             },
@@ -365,8 +371,8 @@ this.pickChartData = function(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 = data[0][0];
+    var last = data[data.length - 1][0];
     var interval, tickInterval, lastTick;
     switch (range) {
         case 0:
@@ -382,7 +388,6 @@ this.pickChartData = function(data, range) {
             first = moment(last).subtract(3, 'months').valueOf();
             break;
         case 4:
-            first = moment(data[0][0]).valueOf();
             break;
         case 5:
             var fromDate = $('#chart_from').datepicker("getDate");
@@ -412,14 +417,15 @@ this.pickChartData = function(data, range) {
         tickInterval = this.oneDay * 14;
         lastTick = this.to5am(moment(last).day(1).valueOf());
     } else {
-        interval = 3600 * 12000;
+        var years = Math.floor((last - first) / (this.oneDay * 365));
+        interval = 3600 * (years > 2 ? 24000 : 12000);
         tickInterval = this.oneDay * 28;
         lastTick = this.to5am(moment(last).day(1).valueOf());
     }
     var lastData;
     for (var i = data.length - 1; i >= 0; i--) {
         var row = data[i];
-        var date = this.parseDate(row[0]).valueOf();
+        var date = row[0];
         if (date > first) {
             if (date <= last) {
                 var v = date - date % interval;
@@ -469,7 +475,7 @@ this.drawChart = function(data) {
     if (!data) {
         $('#loading').show();
         $.ajax({
-            url: "./資材ログ.json",
+            url: "./資材ログ.json?number=true",
             success: function(d) { self.drawChart(d); },
             dataType: "json", cache: false
         });
@@ -494,7 +500,6 @@ this.drawDiffChart = function(picked) {
         },
         data: {
             x: '日付',
-            xFormat: '%Y-%m-%d %X',
             rows: picked.data,
             axes: {
                 燃料: 'y',
@@ -528,7 +533,7 @@ this.drawDiffChart = function(picked) {
                 type: 'timeseries',
                 tick: {
                     rotate: 30,
-                    format: function(x) { return moment(x).format("MM-DD HH:mm"); },
+                    format: picked.monthly ? "%Y-%m" : "%m-%d %H:%M",
                     values: picked.tick
                 }
             }
@@ -553,8 +558,8 @@ this.pickChartData = function(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 = data[0][0];
+    var last = data[data.length - 1][0];
     var interval, tickInterval, lastTick;
     switch (range) {
         case 0:
@@ -567,8 +572,7 @@ this.pickChartData = function(data, range) {
             first = moment(last).subtract(6, 'months').subtract(1, 'weeks').valueOf();
             break;
         case 3:
-            first = moment(data[0][0]).valueOf();
-            break;
+            return this.pickMonthlyChartData(data);
         case 4:
             var fromDate = $('#chart_from').datepicker("getDate");
             var toDate = $('#chart_to').datepicker("getDate");
@@ -605,20 +609,22 @@ this.pickChartData = function(data, range) {
     var prevRow;
     for (var i = data.length - 1; i >= 0; i--) {
         var row = data[i];
-        var date = this.parseDate(row[0]).valueOf();
-        if (date > first && date <= last) {
-            if (!prevRow) {
-                prevRow = row;
-                continue;
-            }
-            if (date <= lastDate) {
-                var newrow = [prevRow[0]];
-                for (var r = 1; r < 5; r++) {
-                    newrow.push(prevRow[r] - row[r]);
+        var date = row[0];
+        if (date > first) {
+            if (date <= last) {
+                if (!prevRow) {
+                    prevRow = row;
+                    continue;
+                }
+                if (date <= lastDate) {
+                    var newrow = [lastDate];
+                    for (var r = 1; r < 5; r++) {
+                        newrow.push(prevRow[r] - row[r]);
+                    }
+                    newdata.unshift(newrow);
+                    lastDate = lastDate - interval;
+                    prevRow = row;
                 }
-                newdata.unshift(newrow);
-                lastDate = lastDate - interval;
-                prevRow = row;
             }
         } else {
             break;
@@ -627,12 +633,51 @@ this.pickChartData = function(data, range) {
     if (tickInterval >= this.oneDay * 7)
         lastTick = moment(lastTick).day(1).hour(5).minute(0).valueOf();
     for (var tick = lastTick; tick > lastDate; tick -= tickInterval) {
-        var str = self.toDateString(moment(tick));
-        ticks.unshift(str);
-        grid.unshift({ value: str });
+        ticks.unshift(tick);
+        grid.unshift({ value: tick });
     }
     return { data: newdata, tick: ticks, grid: grid, width: barWidth };
 };
+
+this.pickMonthlyChartData = function(data) {
+    var newdata = [];
+    var ticks = [];
+    var grid = [];
+    var prevRow;
+    var prevMonth;
+    var row;
+    var date;
+    for (var i = data.length - 1; i >= 0; i--) {
+        row = data[i];
+        if (!prevRow) {
+            prevRow = row;
+            var eom = moment(row[0]).endOf('month');
+            prevRow[0] = eom.valueOf();
+            prevMonth = eom.month();
+            continue;
+        }
+        date = new Date(row[0]);
+        if (prevMonth !== date.getMonth()) {
+            var newrow = [prevRow[0]];
+            for (var r = 1; r < 5; r++)
+                newrow.push(prevRow[r] - row[r]);
+            newdata.unshift(newrow);
+            ticks.unshift(prevRow[0]);
+            grid.unshift({ value: prevRow[0] });
+            prevRow = row;
+            prevMonth = date.getMonth();
+        }
+    }
+    if (prevRow && date !== prevRow[0]) {
+        newrow = [prevRow[0]];
+        for (r = 1; r < 5; r++)
+            newrow.push(prevRow[r] - row[r]);
+        newdata.unshift(newrow);
+        ticks.unshift(prevRow[0]);
+        grid.unshift({ value: prevRow[0] });
+    }
+    return { monthly: true, data: newdata, tick: ticks, grid: grid, width: 0.5 };
+};
 </script>
 </differential-chart>
 
@@ -658,6 +703,8 @@ $(window).resize(function() {
     self.timer = setTimeout(function() {
         if (self.mainTabs[self.mainTab] === "資材グラフ")
             opts.observable.trigger("chartSizeChanged");
+        else if (self.mainTabs[self.mainTab] === "戦果")
+            opts.observable.trigger("achivementChartSizeChanged");
     }, 200);
 });
 </script>
@@ -673,6 +720,7 @@ $(window).resize(function() {
 <tr><th>日付</th><th>戦果</th><th>EO</th><th>月毎</th></tr>
 </thead>
 </table>
+<div id="achivementChart" style="margin: 1em;"></div>
 </div>
 
 <script>
@@ -751,21 +799,22 @@ this.calcResult = function(data) {
                     this.result[m] = [];
                 this.result[m].push([
                     d.format("YYYY-MM-DD"),
-                    new Number((lastExp - prevExp) / expPerAch).toFixed(1), dayEo,
-                    new Number((lastExp - monthExp) / expPerAch + monthEo + carryOverAch + carryOverEo).toFixed(1)
+                    ((lastExp - prevExp) / expPerAch).toFixed(1), dayEo,
+                    ((lastExp - monthExp) / expPerAch + monthEo + carryOverAch + carryOverEo).toFixed(1)
                 ]);
             }
             prevExp = lastExp === -1 ? exp : lastExp;
             if (isNewYear) {
                 endOfYear = date.clone().endOf('year').hour(22).startOf('hour');
                 if (endOfYear.isSameOrBefore(date))
-                    endOfYear.add(1, 'year').endOf('year');
+                    endOfYear.add(1, 'year');
                 yearExp = lastExp === -1 ? exp : lastExp;
             }
             if (isNewMonth) {
-                endOfMonth = date.clone().endOf('month').hour(22).startOf('hour');
-                if (endOfMonth.isSameOrBefore(date))
-                    endOfMonth.add(1, 'month').endOf('month');
+                endOfMonth = date.clone().endOf('month');
+                if (date.date() == endOfMonth.date())
+                    endOfMonth.add(1, 'months').endOf('month');
+                endOfMonth.hour(22).startOf('hour');
                 monthExp = lastExp === -1 ? exp : lastExp;
                 carryOverEo = monthEo * expPerAch / 50000;
                 carryOverAch = (monthExp - yearExp) / 50000;
@@ -793,6 +842,68 @@ this.calcResult = function(data) {
     }
 };
 
+this.calcChartData = function() {
+    this.chartData = {};
+    for (var month in this.result) {
+        var data = this.chartData[month] = [];
+        var result = this.result[month];
+        var eo = 0;
+        var d = 0;
+        data.push(["日付", "戦果", "EO", "月毎"]);
+        for (var i = 0; i < result.length; i++) {
+            var row = result[i];
+            if (row[0].match(/引継/)) {
+                eo = row[2] - 0;
+                data.push([0, row[1], row[2], row[3]]);
+                continue;
+            }
+            d = moment(row[0], "YYYY-MM-DD").date();
+            eo += row[2];
+            var ach = (row[3] - eo).toFixed(1);
+            data.push([d, ach, eo, row[3]]);
+        }
+        var endOfMonth = moment(month, "YYYY-MM").endOf("month").date();
+        while (d < endOfMonth) {
+            d++;
+            data.push([d, null, null, null]);
+        }
+    }
+};
+
+this.chartSize = function() {
+    var width = Math.max($(document).width() - 6 * this.pxPerEm, 800);
+    return {
+        height: width * 0.4,
+        width: width
+    };
+};
+
+opts.observable.on("achivementChartSizeChanged", function() {
+    if (!self.chart)
+        return;
+    $('#loading').show();
+    setTimeout(function() {
+        self.chart.resize(self.chartSize());
+    });
+});
+
+this.showChart = function(month) {
+    this.chart = c3.generate({
+        bindto: "#achivementChart",
+        size: this.chartSize(),
+        data: {
+            x: "日付",
+            rows: this.chartData[month],
+            types: {
+                戦果: "area",
+                EO: "area",
+                月毎: "area"
+            }
+        },
+        onrendered: function() { $('#loading').hide(); }
+    });
+};
+
 this.show = function(data) {
     if (!data) {
         $('#loading').show();
@@ -807,6 +918,7 @@ this.show = function(data) {
         return;
     }
     this.calcResult(data);
+    this.calcChartData();
     this.months = Object.keys(this.result).sort(function(a, b) {
         if (a === b)
             return 0;
@@ -818,6 +930,7 @@ this.show = function(data) {
     var dt = $('#achivement_table').DataTable();
     dt.clear();
     dt.rows.add(this.result[this.months[0]]).draw();
+    this.showChart(this.months[0]);
 };
 </script>
 </achivement-table>