LogViewer/tags.html

   1 <main-tab>
   2 <ul class="tab">
   3     <li each={name, i in mainTabs} class={select: mainTab === i} onclick={parent.changeTab}>{name}</li>
   4 </ul>
   5
   6 <script>
   7 /* global moment, c3, opts */
   8
   9 this.mainTab = +sessionStorage.getItem('prevTab');
  10 opts.observable.trigger("mainTabChanged", this.mainTab);
  11
  12 this.changeTab = function(e) {
  13     this.mainTab = e.item.i;
  14     sessionStorage.setItem('prevTab', e.item.i);
  15     opts.observable.trigger("mainTabChanged", e.item.i);
  16 }.bind(this);
  17 </script>
  18 </main-tab>
  19
  20 <log-term>
  21 <form id="term" show={enabled}>
  22 <p>
  23 <label><input type="radio" name="term" value="0" checked="checked">直近一か月</label>
  24 <label><input type="radio" name="term" value="1">期間指定: </label>
  25 <input type="text" id="term_from" style="width: 7em">～<input type="text" id="term_to" style="width: 7em">
  26 <input type="button" id="term_apply" value="適用">
  27 </p>
  28 </form>
  29
  30 <script>
  31 this.on("mount", function() {
  32     $('#term_from').datepicker({
  33         defaultDate: moment().subtract(1, 'months').toDate(),
  34         onClose: function() { $('input[name=term]').val(['1']); }
  35     });
  36     $('#term_to').datepicker({
  37         onClose: function() { $('input[name=term]').val(['1']); }
  38     });
  39     $('#term_apply').click(function() {
  40         opts.observable.trigger("termApplied");
  41     });
  42 });
  43
  44 this.enabled = false;
  45 var self = this;
  46
  47 opts.observable.on("mainTabChanged", function(idx) {
  48     self.update({enabled: idx >= 0 && idx < self.logTables});
  49 });
  50 </script>
  51 </log-term>
  52
  53 <log-tables>
  54 <div each={header, i in tables} show={mainTab === i}>
  55 <table class="display compact cell-border" id={"log" + i}>
  56 <thead>
  57 <tr></tr>
  58 </thead>
  59 </table>
  60 </div>
  61
  62 <script>
  63 this.tables = [
  64 "<th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘", // ドロップ
  65 "<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>", // 海戦
  66 "<th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>高速修復材</th><th>高速建造材</th>", // 遠征
  67 "<th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th>", // 開発
  68 "<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>", // 建造
  69 "<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>", // 改修
  70 "<th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th>" // 戦果
  71 ];
  72
  73 this.jsons = [
  74     "海戦・ドロップ報告書.json",
  75     "海戦・ドロップ報告書.json",
  76     "遠征報告書.json",
  77     "開発報告書.json",
  78     "建造報告書.json",
  79     "改修報告書.json",
  80     "資材ログ.json"
  81 ];
  82
  83 this.on("mount", function() {
  84     var records = this.root.querySelectorAll("tr");
  85     for (var i = 0; i < records.length; i++)
  86         records[i].innerHTML = this.tables[i];
  87     this.init();
  88 });
  89
  90 this.mainTab = 0;
  91 var self = this;
  92
  93 opts.observable.on("mainTabChanged", function(idx) {
  94     self.update({mainTab: idx});
  95     self.show();
  96 });
  97
  98 opts.observable.on("termApplied", function() {
  99     self.show();
 100 });
 101
 102 this.init = function() {
 103     for (var t = 0; t < this.tables.length; t++) {
 104         var opts = {
 105             destroy: true,
 106             deferRender: true,
 107             stateSave: true,
 108             order: [[0, "desc"]],
 109             pageLength: 50,
 110             lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
 111             drawCallback: function() {
 112                 $('#loading').hide();
 113             }
 114         };
 115         if (t === 0) {
 116             opts.columns = [{ data: 0 }, { data: 1 }, { data: 2 }, { data: 3 }, { data: 4 }, { data: 9 }, { data: 10 }];
 117         } else if (t === 1) {
 118             var entries = [];
 119             for (var i = 0; i < 38; i++) {
 120                 if (i === 9 || i === 10)
 121                     continue;
 122                 entries.push({ data: i });
 123             }
 124             opts.columns = entries;
 125         }
 126         $('#log' + t).dataTable(opts);
 127     }
 128 };
 129
 130 this.show = function() {
 131     if (this.mainTab >= this.jsons.length)
 132         return;
 133     var query = "?from=" + moment().subtract(1, 'months').valueOf();
 134     if ($('input[name=term]:eq(1)').prop('checked')) {
 135         var from = $('#term_from').datepicker("getDate");
 136         var to = $('#term_to').datepicker("getDate");
 137         if (from !== null)
 138             query = "?from=" + from.valueOf();
 139         if (to !== null)
 140             query += "&to=" + (to.valueOf() + this.oneDay);
 141     }
 142     $('#loading').show();
 143     var url = this.jsons[this.mainTab] + query;
 144     $('#log' + this.mainTab).DataTable().ajax.url(url).load();
 145 };
 146 </script>
 147 </log-tables>
 148
 149 <chart-type>
 150 <form id="chart_type" show={mainTabs[mainTab] === "資材グラフ"}>
 151 <div style="margin: 0 0 0.5em 1em;">
 152 <label><input type="radio" name="chart_type" value="0" checked={opts.chartSpec.type === 0} onchange={chartTypeChange}>連続</label>
 153 <label><input type="radio" name="chart_type" value="1" checked={opts.chartSpec.type === 1} onchange={chartTypeChange}>差分</label>
 154 </div>
 155 </form>
 156
 157 <script>
 158 this.mainTab = 0;
 159 opts.chartSpec.type = +sessionStorage.getItem('chartType');
 160 var self = this;
 161
 162 this.chartTypeChange = function(e) {
 163     opts.chartSpec.type = +e.target.value;
 164     sessionStorage.setItem('chartType', opts.chartSpec.type);
 165     opts.observable.trigger("chartTypeChanged");
 166     opts.observable.trigger("chartSpecChanged");
 167 };
 168
 169 opts.observable.on("mainTabChanged", function(idx) {
 170     self.update({mainTab: idx});
 171 });
 172 </script>
 173 </chart-type>
 174
 175 <chart-range>
 176 <div show={mainTabs[mainTab] === "資材グラフ"}>
 177 <ul class="tab tabsub" style="float: left; margin-right: 0.2em" show={chartSpec.type === 0}>
 178     <li each={name, i in seqChartRanges} class={select: chartSpec.seqRange === i} onclick={parent.rangeTabChange}>{name}</li>
 179 </ul>
 180
 181 <ul class="tab tabsub" style="float: left; margin-right: 0.2em" show={chartSpec.type === 1}>
 182     <li each={name, i in diffChartRanges} class={select: chartSpec.diffRange === i} onclick={parent.rangeTabChange}>{name}</li>
 183 </ul>
 184 <div style="padding: 0.2em 0;">
 185 <input type="text" id="chart_from" style="width: 7em">～<input type="text" id="chart_to" style="width: 7em">
 186 <label><input type="checkbox" id="tooltip" value="" style="margin-left: 2em;" onchange={tooltipChange} checked={opts.chartSpec.tooltip === 1}>ツールチップ</label>
 187 </div>
 188 </div>
 189
 190 <script>
 191 this.seqChartRanges = [
 192 "一日",
 193 "一週間",
 194 "一か月",
 195 "三か月",
 196 "すべて",
 197 "期間指定"
 198 ];
 199
 200 this.diffChartRanges = [
 201 "一か月(日)",
 202 "三か月(日)",
 203 "半年(週)",
 204 "すべて(週)",
 205 "期間指定"
 206 ];
 207
 208 opts.chartSpec.seqRange = +sessionStorage.getItem('seqChartRange');
 209 opts.chartSpec.diffRange = +sessionStorage.getItem('diffChartRange');
 210 opts.chartSpec.tooltip = +sessionStorage.getItem('chartTooltip');
 211 this.chartSpec = opts.chartSpec;
 212
 213 this.rangeTabChange = function(e) {
 214     if (opts.chartSpec.type === 0) {
 215         opts.chartSpec.seqRange = e.item.i;
 216         sessionStorage.setItem('seqChartRange', e.item.i);
 217     } else {
 218         opts.chartSpec.diffRange = e.item.i;
 219         sessionStorage.setItem('diffChartRange', e.item.i);
 220     }
 221     opts.observable.trigger("chartSpecChanged");
 222 };
 223
 224 this.tooltipChange = function(e) {
 225     opts.chartSpec.tooltip = +e.target.checked;
 226     sessionStorage.setItem('chartTooltip', this.tooltip);
 227     opts.observable.trigger("chartSpecChanged");
 228 };
 229
 230 this.useDatePicker = function() {
 231     return opts.chartSpec.type === 0 && opts.chartSpec.seqRange === 5 ||
 232         opts.chartSpec.type === 1 && opts.chartSpec.diffRange === 4;
 233 };
 234
 235 this.init = function() {
 236     $('#chart_from').datepicker({
 237         onClose: function() { if (self.useDatePicker()) self.drawChart(); }
 238     });
 239     $('#chart_to').datepicker({
 240         onClose: function() { if (self.useDatePicker()) self.drawChart(); }
 241     });
 242 };
 243
 244 this.on("mount", this.init);
 245
 246 this.mainTab = 0;
 247 var self = this;
 248
 249 opts.observable.on("mainTabChanged", function(idx) {
 250     self.update({mainTab: idx});
 251 });
 252
 253 opts.observable.on("chartTypeChanged", function() {
 254     self.update();
 255 });
 256 </script>
 257 </chart-range>
 258
 259 <sequential-chart>
 260 <script>
 261 var self = this;
 262
 263 opts.observable.on("chartSpecChanged", function() {
 264     if (opts.chartSpec.type === 0)
 265         self.drawChart();
 266 });
 267
 268 opts.observable.on("chartSizeChanged", function() {
 269     if (opts.chartSpec.type === 0)
 270         self.resize();
 271 });
 272
 273 this.resize = function() {
 274     if (!self.chart)
 275         return;
 276     $('#loading').show();
 277     setTimeout(function() {
 278         self.chart.resize(self.chartSize());
 279     });
 280 };
 281
 282 this.drawChart = function(data) {
 283     if (!data) {
 284         $('#loading').show();
 285         $.ajax({
 286             url: "./資材ログ.json",
 287             success: function(d) { self.drawChart(d); },
 288             dataType: "json", cache: false
 289         });
 290         return;
 291     }
 292     var picked, header;
 293     picked = this.pickChartData(data.data, opts.chartSpec.seqRange);
 294     header = ["日付", "燃料", "弾薬", "鋼材", "ボーキ", "高速建造材", "高速修復材", "開発資材", "改修資材"];
 295     picked.data.unshift(header);
 296     this.drawSeqChart(picked);
 297 };
 298
 299 this.unselected = {};
 300
 301 this.drawSeqChart = function(picked) {
 302     var size = this.chartSize();
 303     this.chart = c3.generate({
 304         bindto: '#chart',
 305         size: {
 306             height: size.height,
 307             width: size.width
 308         },
 309         data: {
 310             x: '日付',
 311             xFormat: '%Y-%m-%d %X',
 312             rows: picked.data,
 313             axes: {
 314                 燃料: 'y',
 315                 弾薬: 'y',
 316                 鋼材: 'y',
 317                 ボーキ: 'y',
 318                 高速建造材: 'y2',
 319                 高速修復材: 'y2',
 320                 開発資材: 'y2',
 321                 改修資材: 'y2'
 322             }
 323         },
 324         point: {
 325             show: false
 326         },
 327         tooltip: {
 328             show: opts.chartSpec.tooltip
 329         },
 330         grid: {
 331             x: {
 332                 lines: picked.grid
 333             }
 334         },
 335         axis: {
 336             x: {
 337                 type: 'timeseries',
 338                 tick: {
 339                     rotate: 30,
 340                     format: function(x) { return moment(x).format("MM-DD HH:mm"); },
 341                     values: picked.tick
 342                 }
 343             },
 344             y2: {
 345                 show: true
 346             }
 347         },
 348         legend: {
 349             item: {
 350                 onclick: function(id) {
 351                     self.unselected[id] = !self.unselected[id];
 352                     self.chart.toggle(id);
 353                 }
 354             }
 355         },
 356         onrendered: function() { $('#loading').hide(); }
 357     });
 358     for (var id in self.unselected) {
 359         if (self.unselected.hasOwnProperty(id) && self.unselected[id])
 360             self.chart.toggle(id);
 361     }
 362 };
 363
 364 this.pickChartData = function(data, range) {
 365     var newdata = [];
 366     var ticks = [];
 367     var grid = [];
 368     var first = moment(data[0][0]).valueOf();
 369     var last = moment(data[data.length - 1][0]).valueOf();
 370     var interval, tickInterval, lastTick;
 371     switch (range) {
 372         case 0:
 373             first = moment(last).subtract(24, 'hours').valueOf();
 374             break;
 375         case 1:
 376             first = moment(last).subtract(7, 'days').valueOf();
 377             break;
 378         case 2:
 379             first = moment(last).subtract(1, 'months').valueOf();
 380             break;
 381         case 3:
 382             first = moment(last).subtract(3, 'months').valueOf();
 383             break;
 384         case 4:
 385             first = moment(data[0][0]).valueOf();
 386             break;
 387         case 5:
 388             var fromDate = $('#chart_from').datepicker("getDate");
 389             var toDate = $('#chart_to').datepicker("getDate");
 390             if (fromDate === null || toDate === null)
 391                 return { data: [], tick: [], grid: [] };
 392             var from = fromDate.valueOf() + 3600 * 5000;
 393             var to = toDate.valueOf() + this.oneDay + 3600 * 5000;
 394             first = Math.max(first, from);
 395             last = Math.min(last, to);
 396             break;
 397     }
 398     if (last <= first + this.oneDay) {
 399         interval = 1000;
 400         tickInterval = 3600 * 1000;
 401         lastTick = last - last % tickInterval;
 402     } else if (last <= first + this.oneDay * 21) {
 403         interval = 1000;
 404         tickInterval = this.oneDay;
 405         lastTick = this.to5am(last);
 406     } else if (last <= first + this.oneDay * 63) {
 407         interval = 3600 * 1000;
 408         tickInterval = this.oneDay * 7;
 409         lastTick = this.to5am(moment(last).day(1).valueOf());
 410     } else if (last <= first + this.oneDay * 126) {
 411         interval = 3600 * 6000;
 412         tickInterval = this.oneDay * 14;
 413         lastTick = this.to5am(moment(last).day(1).valueOf());
 414     } else {
 415         interval = 3600 * 12000;
 416         tickInterval = this.oneDay * 28;
 417         lastTick = this.to5am(moment(last).day(1).valueOf());
 418     }
 419     var lastData;
 420     for (var i = data.length - 1; i >= 0; i--) {
 421         var row = data[i];
 422         var date = this.parseDate(row[0]).valueOf();
 423         if (date > first) {
 424             if (date <= last) {
 425                 var v = date - date % interval;
 426                 if (lastData !== v) {
 427                     newdata.unshift(row);
 428                     lastData = v;
 429                 }
 430             }
 431         } else {
 432             break;
 433         }
 434     }
 435     for (var tick = lastTick; tick > lastData; tick -= tickInterval) {
 436         var str = self.toDateString(moment(tick));
 437         ticks.unshift(str);
 438         grid.unshift({ value: str });
 439     }
 440     return { data: newdata, tick: ticks, grid: grid };
 441 };
 442 </script>
 443 </sequential-chart>
 444
 445 <differential-chart>
 446 <script>
 447 var self = this;
 448
 449 opts.observable.on("chartSpecChanged", function() {
 450     if (opts.chartSpec.type === 1)
 451         self.drawChart();
 452 });
 453
 454 opts.observable.on("chartSizeChanged", function() {
 455     if (opts.chartSpec.type === 1)
 456         self.resize();
 457 });
 458
 459 this.resize = function() {
 460     if (!self.chart)
 461         return;
 462     $('#loading').show();
 463     setTimeout(function() {
 464         self.chart.resize(self.chartSize());
 465     });
 466 };
 467
 468 this.drawChart = function(data) {
 469     if (!data) {
 470         $('#loading').show();
 471         $.ajax({
 472             url: "./資材ログ.json",
 473             success: function(d) { self.drawChart(d); },
 474             dataType: "json", cache: false
 475         });
 476         return;
 477     }
 478     var picked, header;
 479     picked = this.pickChartData(data.data, opts.chartSpec.diffRange);
 480     header = ["日付", "燃料", "弾薬", "鋼材", "ボーキ"];
 481     picked.data.unshift(header);
 482     this.drawDiffChart(picked);
 483 };
 484
 485 this.unselected = {};
 486
 487 this.drawDiffChart = function(picked) {
 488     var size = this.chartSize();
 489     this.chart = c3.generate({
 490         bindto: '#chart',
 491         size: {
 492             height: size.height,
 493             width: size.width
 494         },
 495         data: {
 496             x: '日付',
 497             xFormat: '%Y-%m-%d %X',
 498             rows: picked.data,
 499             axes: {
 500                 燃料: 'y',
 501                 弾薬: 'y',
 502                 鋼材: 'y',
 503                 ボーキ: 'y'
 504             },
 505             type: 'bar',
 506             groups: [["燃料", "弾薬", "鋼材", "ボーキ"]]
 507         },
 508         bar: {
 509             width: {
 510                 ratio: picked.width
 511             }
 512         },
 513         tooltip: {
 514             show: opts.chartSpec.tooltip
 515         },
 516         grid: {
 517             x: {
 518                 lines: picked.grid
 519             },
 520             y: {
 521                 lines: [
 522                     { value: 0 }
 523                 ]
 524             }
 525         },
 526         axis: {
 527             x: {
 528                 type: 'timeseries',
 529                 tick: {
 530                     rotate: 30,
 531                     format: function(x) { return moment(x).format("MM-DD HH:mm"); },
 532                     values: picked.tick
 533                 }
 534             }
 535         },
 536         legend: {
 537             item: {
 538                 onclick: function(id) {
 539                     self.unselected[id] = !self.unselected[id];
 540                     self.chart.toggle(id);
 541                 }
 542             }
 543         },
 544         onrendered: function() { $('#loading').hide(); }
 545     });
 546     for (var id in self.unselected) {
 547         if (self.unselected.hasOwnProperty(id) && self.unselected[id])
 548             self.chart.toggle(id);
 549     }
 550 };
 551
 552 this.pickChartData = function(data, range) {
 553     var newdata = [];
 554     var ticks = [];
 555     var grid = [];
 556     var first = moment(data[0][0]).valueOf();
 557     var last = moment(data[data.length - 1][0]).valueOf();
 558     var interval, tickInterval, lastTick;
 559     switch (range) {
 560         case 0:
 561             first = moment(last).subtract(1, 'months').valueOf();
 562             break;
 563         case 1:
 564             first = moment(last).subtract(3, 'months').valueOf();
 565             break;
 566         case 2:
 567             first = moment(last).subtract(6, 'months').subtract(1, 'weeks').valueOf();
 568             break;
 569         case 3:
 570             first = moment(data[0][0]).valueOf();
 571             break;
 572         case 4:
 573             var fromDate = $('#chart_from').datepicker("getDate");
 574             var toDate = $('#chart_to').datepicker("getDate");
 575             if (fromDate === null || toDate === null)
 576                 return { data: [], tick: [], grid: [] };
 577             var from = fromDate.valueOf() + 3600 * 5000;
 578             var to = toDate.valueOf() + this.oneDay + 3600 * 5000;
 579             first = Math.max(first, from);
 580             last = Math.min(last, to);
 581             break;
 582     }
 583     var barWidth;
 584     if (last <= first + this.oneDay * 2 * 31) {
 585         interval = this.oneDay;
 586         tickInterval = this.oneDay * 2;
 587         lastTick = this.to5am(last);
 588         barWidth = 0.3;
 589     } else if (last <= first + this.oneDay * 3 * 31) {
 590         interval = this.oneDay;
 591         tickInterval = this.oneDay * 7;
 592         lastTick = this.to5am(last);
 593         barWidth = 0.1;
 594     } else {
 595         interval = this.oneDay * 7;
 596         tickInterval = this.oneDay * 28;
 597         lastTick = this.to5am(moment(last).day(1).valueOf());
 598         barWidth = 0.1;
 599         if (last <= first + this.oneDay * 6 * 38) {
 600             tickInterval = this.oneDay * 14;
 601             barWidth = 0.3;
 602         }
 603     }
 604     var lastDate = lastTick;
 605     var prevRow;
 606     for (var i = data.length - 1; i >= 0; i--) {
 607         var row = data[i];
 608         var date = this.parseDate(row[0]).valueOf();
 609         if (date > first && date <= last) {
 610             if (!prevRow) {
 611                 prevRow = row;
 612                 continue;
 613             }
 614             if (date <= lastDate) {
 615                 var newrow = [prevRow[0]];
 616                 for (var r = 1; r < 5; r++) {
 617                     newrow.push(prevRow[r] - row[r]);
 618                 }
 619                 newdata.unshift(newrow);
 620                 lastDate = lastDate - interval;
 621                 prevRow = row;
 622             }
 623         } else {
 624             break;
 625         }
 626     }
 627     if (tickInterval >= this.oneDay * 7)
 628         lastTick = moment(lastTick).day(1).hour(5).minute(0).valueOf();
 629     for (var tick = lastTick; tick > lastDate; tick -= tickInterval) {
 630         var str = self.toDateString(moment(tick));
 631         ticks.unshift(str);
 632         grid.unshift({ value: str });
 633     }
 634     return { data: newdata, tick: ticks, grid: grid, width: barWidth };
 635 };
 636 </script>
 637 </differential-chart>
 638
 639 <material-chart>
 640 <div show={mainTabs[mainTab] === "資材グラフ"}>
 641 <div id="chart" style="clear: both; margin: 1em;"></div>
 642 </div>
 643
 644 <script>
 645 this.mainTab = 0;
 646 var self = this;
 647
 648 opts.observable.on("mainTabChanged", function(idx) {
 649     self.update({mainTab: idx});
 650     if (self.mainTabs[idx] === "資材グラフ")
 651         opts.observable.trigger("chartSpecChanged");
 652 });
 653
 654 this.timer = null;
 655 $(window).resize(function() {
 656     if (self.timer)
 657         clearTimeout(self.timer);
 658     self.timer = setTimeout(function() {
 659         if (self.mainTabs[self.mainTab] === "資材グラフ")
 660             opts.observable.trigger("chartSizeChanged");
 661         else if (self.mainTabs[self.mainTab] === "戦果")
 662             opts.observable.trigger("achivementChartSizeChanged");
 663     }, 200);
 664 });
 665 </script>
 666 </material-chart>
 667
 668 <achivement-table>
 669 <div show={mainTabs[mainTab] === "戦果"}>
 670 <span style="margin-left: 1em;">期間:&nbsp;</span><select style="width: 7em; margin-bottom: 1em;" name="月" onchange={monthChange}>
 671 <option each={m, i in months} value={m}>{m}</option>
 672 </select>
 673 <table id="achivement_table" class="display compact cell-border">
 674 <thead>
 675 <tr><th>日付</th><th>戦果</th><th>EO</th><th>月毎</th></tr>
 676 </thead>
 677 </table>
 678 <div id="achivementChart" style="margin: 1em;"></div>
 679 </div>
 680
 681 <script>
 682 this.on("mount", function() {
 683     $("#achivement_table").dataTable({
 684         destroy: true,
 685         deferRener: true,
 686         stateSave: true,
 687         order: [[0, "desc"]],
 688         paging: false,
 689         searching: false,
 690         info: false,
 691         drawCallback: function() {
 692             $('#loading').hide();
 693         }
 694     });
 695 });
 696
 697 var self = this;
 698
 699 opts.observable.on("mainTabChanged", function(idx) {
 700     self.update({mainTab: idx});
 701     if (self.mainTabs[self.mainTab] === "戦果")
 702         self.show();
 703 });
 704
 705 this.months = [];
 706
 707 this.monthChange = function(event) {
 708     if (event.target.selectedIndex === 0) {
 709         self.show();
 710         return;
 711     }
 712     var dt = $('#achivement_table').DataTable();
 713     dt.clear();
 714     dt.rows.add(this.result[event.target.value]).draw();
 715     this.showChart(event.target.value);
 716 };
 717
 718 this.calcResult = function(data) {
 719     this.result = {};
 720     var expPerAch = 10000 / 7.0;
 721     var dayEo = 0;
 722     var endOfMonth = moment(0);
 723     var monthExp = 0;
 724     var monthEo = 0;
 725     var endOfYear = moment(0);
 726     var yearExp = 0;
 727     var carryOverAch = 0;
 728     var carryOverEo = 0;
 729     var prevExp = null;
 730     var lastDate = moment(0);
 731     var lastExp = -1;
 732     var nextDate = moment(0);
 733     for (var i = 0; i < data.length; i++) {
 734         var row = data[i];
 735         var date = this.parseDate(row[0]);
 736         var exp = row[1] - 0;
 737         var eo = row[2] - 0;
 738         var isNewYear = date.isSameOrAfter(endOfYear);
 739         var isNewMonth = date.isSameOrAfter(endOfMonth);
 740         var isNewDate = date.isSameOrAfter(nextDate);
 741         if (isNewDate || isNewMonth || isNewYear) {
 742             if (lastDate.add(1, 'hours').isSameOrBefore(date)) {
 743                 // 2時を過ぎて最初のexpを戦果の計算に使うと、2時をまたいだ出撃の戦果が前日に加算される。
 744                 // そこで2時前のexpを使って戦果を計算するが、2時前のexpが正しく出力されていない場合は
 745                 // 戦果を正しく計算できない。記録の間隔が1時間以上空いているときは、2時をまたいだ出撃が
 746                 // 行われていない可能性が高いので計算には今のexpを使うことにする。
 747                 // これは5時基準で出力された過去のデータで、妥当な戦果を計算するために必要な処理である。
 748                 lastExp = exp;
 749             }
 750             if (nextDate.valueOf() !== 0) {
 751                 var d = isNewDate ? nextDate.subtract(1, 'days') : endOfMonth;
 752                 var m = d.format("YYYY-MM");
 753                 if (!this.result[m])
 754                     this.result[m] = [];
 755                 this.result[m].push([
 756                     d.format("YYYY-MM-DD"),
 757                     new Number((lastExp - prevExp) / expPerAch).toFixed(1), dayEo,
 758                     new Number((lastExp - monthExp) / expPerAch + monthEo + carryOverAch + carryOverEo).toFixed(1)
 759                 ]);
 760             }
 761             prevExp = lastExp === -1 ? exp : lastExp;
 762             if (isNewYear) {
 763                 endOfYear = date.clone().endOf('year').hour(22).startOf('hour');
 764                 if (endOfYear.isSameOrBefore(date))
 765                     endOfYear.add(1, 'year').endOf('year');
 766                 yearExp = lastExp === -1 ? exp : lastExp;
 767             }
 768             if (isNewMonth) {
 769                 endOfMonth = date.clone().endOf('month').hour(22).startOf('hour');
 770                 if (endOfMonth.isSameOrBefore(date))
 771                     endOfMonth.add(1, 'month').endOf('month');
 772                 monthExp = lastExp === -1 ? exp : lastExp;
 773                 carryOverEo = monthEo * expPerAch / 50000;
 774                 carryOverAch = (monthExp - yearExp) / 50000;
 775                 monthEo = 0;
 776                 m = endOfMonth.format("YYYY-MM");
 777                 if (!this.result[m])
 778                     this.result[m] = [];
 779                 this.result[m].push([endOfMonth.format("YYYY-MM 引継"),
 780                     carryOverAch.toFixed(1), carryOverEo.toFixed(1), (carryOverAch + carryOverEo).toFixed(1)]);
 781             }
 782             dayEo = 0;
 783             nextDate = date.clone().hour(2).startOf('hour');
 784             if (date.hour() >= 2)
 785                 nextDate.add(1, 'days');
 786             if (nextDate.date() === 1)
 787                 nextDate.add(1, 'days');
 788         }
 789         if (date.isBefore(date.clone().endOf('month').hour(22).startOf('hour'))) {
 790             // 月末22時から翌0時までのEOのボーナス戦果は消える。
 791             dayEo += eo;
 792             monthEo += eo;
 793         }
 794         lastDate = date;
 795         lastExp = exp;
 796     }
 797 };
 798
 799 this.calcChartData = function() {
 800     this.chartData = {};
 801     for (var month in this.result) {
 802         var data = this.chartData[month] = [];
 803         var result = this.result[month];
 804         var eo = 0;
 805         var d;
 806         data.push(["日付", "戦果", "EO", "月毎"]);
 807         for (var i = 0; i < result.length; i++) {
 808             var row = result[i];
 809             if (row[0].match(/引継/))
 810                 continue;
 811             d = moment(row[0], "YYYY-MM-DD");
 812             eo += row[2];
 813             var ach = Number(row[3] - eo).toFixed(1);
 814             data.push([d.format("DD"), ach, eo, row[3]]);
 815         }
 816         var endOfMonth = moment(month, "YYYY-MM").endOf("month");
 817         while (d.isBefore(endOfMonth)) {
 818             d.add(1, "days");
 819             data.push([d.format("DD"), null, null]);
 820         }
 821     }
 822 };
 823
 824 this.chartSize = function() {
 825     var width = Math.max($(document).width() - 6 * this.pxPerEm, 800);
 826     return {
 827         height: width * 0.4,
 828         width: width
 829     };
 830 };
 831
 832 opts.observable.on("achivementChartSizeChanged", function() {
 833     if (!self.chart)
 834         return;
 835     $('#loading').show();
 836     setTimeout(function() {
 837         self.chart.resize(self.chartSize());
 838     });
 839 });
 840
 841 this.showChart = function(month) {
 842     this.chart = c3.generate({
 843         bindto: "#achivementChart",
 844         size: this.chartSize(),
 845         data: {
 846             x: "日付",
 847             rows: this.chartData[month],
 848             order: null,
 849             types: {
 850                 戦果: "area",
 851                 EO: "area",
 852                 月毎: "area"
 853             }
 854         },
 855         line: {
 856             connectNull: true
 857         },
 858         tooltip: {
 859             grouped: true
 860         },
 861         onrendered: function() { $('#loading').hide(); }
 862     });
 863 };
 864
 865 this.show = function(data) {
 866     if (!data) {
 867         $('#loading').show();
 868         $.ajax({
 869             url: "./戦果.json",
 870             success: function(data) {
 871                 self.show(data.data);
 872             },
 873             dataType: 'json',
 874             cache: false
 875         });
 876         return;
 877     }
 878     this.calcResult(data);
 879     this.calcChartData();
 880     this.months = Object.keys(this.result).sort(function(a, b) {
 881         if (a === b)
 882             return 0;
 883         if (a < b)
 884             return 1;
 885         return -1;
 886     });
 887     this.update();
 888     var dt = $('#achivement_table').DataTable();
 889     dt.clear();
 890     dt.rows.add(this.result[this.months[0]]).draw();
 891     this.showChart(this.months[0]);
 892 };
 893 </script>
 894 </achivement-table>
 895
 896 <sortie-stat>
 897 <div show={mainTabs[mainTab] === "出撃統計"}>
 898
 899 <ul class="tab tabsub" style="float: left; margin-right: 0.2em">
 900 <li each={tabs} class={select: parent.type === type} onclick={parent.changeTab}>{label}</li>
 901 </ul>
 902
 903 <div style="padding: 0.2em 0;">
 904 <input type="text" id="sortie_stat_from" style="width: 7em">～<input type="text" id="sortie_stat_to" style="width: 7em">
 905 </div>
 906
 907 <div style="clear: both;" show={type === "recent"}>
 908 <h3>今日</h3>
 909 <table id="sortie_stat_day">
 910 <thead>
 911 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 912 </thead>
 913 </table>
 914 <h3>今週</h3>
 915 <table id="sortie_stat_week">
 916 <thead>
 917 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 918 </table>
 919 <h3>今月</h3>
 920 <table id="sortie_stat_month">
 921 <thead>
 922 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th></tr>
 923 </table>
 924 </div>
 925
 926 <div id="sortie_stat_all_table" show={type === "range"}>
 927 <table id="sortie_stat_all">
 928 <thead>
 929 <tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
 930 </thead>
 931 </table>
 932 </div>
 933
 934 </div>
 935
 936 <script>
 937 this.tabs = [
 938     {
 939         type: "recent",
 940         label: "直近"
 941     },
 942     {
 943         type: "range",
 944         label: "期間指定"
 945     }
 946 ];
 947 this.type = "recent";
 948 this.changeTab = function(e) {
 949     this.type = e.item.type;
 950     this.show();
 951 }.bind(this);
 952
 953 this.mainTab = 0;
 954 var self = this;
 955
 956 this.on("mount", function() {
 957     $("[id^=sortie]").addClass('display compact cell-border');
 958     this.init();
 959 });
 960
 961 opts.observable.on("mainTabChanged", function(idx) {
 962     self.update({mainTab: idx});
 963     if (self.mainTabs[self.mainTab] === "出撃統計")
 964         self.show();
 965 });
 966
 967 this.init = function() {
 968     this.initTable();
 969     this.initDatePicker();
 970 };
 971
 972 this.initTable = function() {
 973     var terms = ['day', 'week', 'month', 'all'];
 974     for (var i = 0; i < terms.length; i++) {
 975         $("#sortie_stat_" + terms[i]).dataTable({
 976             paging: false,
 977             searching: false,
 978             ordering: false,
 979             columns: terms[i] !== 'month' ? [
 980                 { data: "map" },
 981                 { data: "start" },
 982                 { data: "S" },
 983                 { data: "A" },
 984                 { data: "B" },
 985                 { data: "C" },
 986                 { data: "D" },
 987                 { data: "R" }
 988             ] : [
 989                     { data: "map" },
 990                     { data: "start" },
 991                     { data: "S" },
 992                     { data: "A" },
 993                     { data: "B" },
 994                     { data: "C" },
 995                     { data: "D" }
 996                 ]
 997         });
 998     }
 999 };
1000
1001 this.initDatePicker = function() {
1002     $('#sortie_stat_from').datepicker({
1003         onClose: function() { if (self.type === "range") self.show(); }
1004     });
1005     $('#sortie_stat_to').datepicker({
1006         onClose: function() { if (self.type === "range") self.show(); }
1007     });
1008 };
1009
1010 var self = this;
1011
1012 this.loadData = function() {
1013     var from, to;
1014     if (this.type === "recent") {
1015         from = moment().subtract(1, 'months').subtract(1, 'day').valueOf();
1016         to = new Date().valueOf();
1017     } else {
1018         var fromDate = $('#sortie_stat_from').datepicker("getDate");
1019         var toDate = $('#sortie_stat_to').datepicker("getDate");
1020         if (fromDate === null || toDate === null) {
1021             this.show([]);
1022             return;
1023         }
1024         from = fromDate.valueOf();
1025         to = toDate.valueOf() + this.oneDay;
1026     }
1027     $.ajax({
1028         url: "./海戦・ドロップ報告書.json?from=" + from + "&to=" + to,
1029         success: function(data) { self.show(data.data); },
1030         dataType: "json", cache: false
1031     });
1032 };
1033
1034 this.initResult = function() {
1035     var now = moment();
1036     var r;
1037     if (this.type === "recent") {
1038         r = {
1039             day: { stat: {} },
1040             week: { stat: {} },
1041             month: { stat: {} }
1042         };
1043         r.day.begin = moment(now).hour(5).minute(0).second(0);
1044         if (now.hour() < 5) {
1045             r.day.begin.subtract(1, 'days');
1046         }
1047         r.week.begin = moment(now).day(1).hour(5).minute(0).second(0);
1048         if (now.day() === 0 || now.day() === 1 && now.hour() < 5) {
1049             r.week.begin.subtract(1, 'weeks');
1050         }
1051         if (moment(now).endOf('month').date() === now.date() &&
1052             now.hour() >= 22) { // 月末22時以降
1053             r.month.begin = moment(now).hour(22).minute(0).second(0);
1054         } else {
1055             r.month.begin =
1056                 moment(now).date(1).subtract(1, 'days').
1057                     hour(22).minute(0).second(0);
1058         }
1059     } else {
1060         r = { all: { stat: {} } };
1061         r.all.begin = moment(0);
1062     }
1063     return r;
1064 };
1065
1066 this.gatherData = function(data) {
1067     var initStat = function() {
1068         return { start: "-", S: 0, A: 0, B: 0, C: 0, D: 0, R: 0 };
1069     };
1070     var r = this.initResult();
1071     for (var i = 0; i < data.length; i++) {
1072         var row = data[i];
1073         var date = moment(row[0]);
1074         var map = row[1];
1075         var isBoss = row[3].indexOf("ボス") !== -1;
1076         var isStart = row[3].indexOf("出撃") !== -1;
1077         var resR = 0;
1078         for (var j = 23; j < row.length; j++) {
1079             if (/^輸送/.test(row[j]) && /^0\x2f/.test(row[j + 1]))
1080                 resR++;
1081         }
1082         var res = row[4];
1083         if (res === "E")
1084             res = "D";
1085         for (var term in r) {
1086             if (!r.hasOwnProperty(term))
1087                 continue;
1088             var to = r[term];
1089             if (to.begin.isAfter(date))
1090                 continue;
1091             for (var b = 0; b < 4; b++) {
1092                 var name = b < 2 ? "合計" : map;
1093                 if (b === 1 || b === 3) {
1094                     if (!isBoss)
1095                         continue;
1096                     name = name + " - ボス";
1097                 }
1098                 var mo = to.stat[name];
1099                 if (!mo) {
1100                     mo = to.stat[name] = initStat();
1101                     if (name === "合計")
1102                         to.stat["合計 - ボス"] = initStat();
1103                 }
1104                 mo["R"] += resR;
1105                 mo[res]++;
1106                 if ((b === 0 || b === 2) && isStart) {
1107                     if (mo.start === "-")
1108                         mo.start = 0;
1109                     mo.start++;
1110                 }
1111             }
1112         }
1113     }
1114     return r;
1115 };
1116
1117 this.arrangeTable = function(r) {
1118     for (var term in r) {
1119         if (!r.hasOwnProperty(term))
1120             continue;
1121         var table = [];
1122         var pushed = {};
1123         for (var map in r[term].stat) {
1124             if (!r[term].stat.hasOwnProperty(map))
1125                 continue;
1126             if (pushed[map])
1127                 continue;
1128             var e = r[term].stat[map];
1129             e.map = map;
1130             table.push(e);
1131             pushed[map] = 1;
1132             var boss = map + " - ボス";
1133             e = r[term].stat[boss];
1134             if (!e)
1135                 continue;
1136             e.map = boss;
1137             table.push(e);
1138             pushed[boss] = 1;
1139         }
1140         r[term].table = table;
1141     }
1142 };
1143
1144 this.show = function(data) {
1145     if (!data) {
1146         $('#loading').show();
1147         this.loadData();
1148         return;
1149     }
1150     var r = this.gatherData(data);
1151     this.arrangeTable(r);
1152     for (var term in r) {
1153         if (!r.hasOwnProperty(term))
1154             continue;
1155         var dt = $("#sortie_stat_" + term).DataTable();
1156         dt.clear();
1157         dt.rows.add(r[term].table).draw();
1158     }
1159     $('#loading').hide();
1160 };
1161 </script>
1162 </sortie-stat>