<head>
<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.17/d3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/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>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.5.0/riot+compiler.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: 0 0 2em 1em; padding: 0;}
+.tab li {background: #eee; padding: 0.3em 1.5em; float: left; margin-right: 2px; cursor: pointer;}
.tab li.select {background: #ccc;}
-.contents {list-style-type: none; margin: 0em; padding: 0em;}
-.hide {display: none;}
+.tabsub li {padding: 0.3em 1em;}
+.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;
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -24px;
+ margin-left: -24px;
+ z-index: 100;
+}
</style>
-
</head>
<body>
-<script>
-function showLog()
-{
- var query = "?from=" + moment().subtract(1, 'months').valueOf();
- if ($('input[name=term]:eq(1)').prop('checked')) {
- from = $('#term_from').datepicker("getDate");
- to = $('#term_to').datepicker("getDate");
- if (from != null)
- query = "?from=" + from.valueOf();
- if (to != null)
- query += "&to=" + (to.valueOf() + 3600 * 24 * 1000);
- }
- var jsons = [
- "海戦・ドロップ報告書.json",
- "海戦・ドロップ報告書.json",
- "遠征報告書.json",
- "開発報告書.json",
- "建造報告書.json",
- "資材ログ.json"
- ];
- var url = jsons[selectedTable] + query;
- $('#log' + selectedTable).DataTable().ajax.url(url).load();
-}
+<div id="loading"><img src="https://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
-function initTables()
-{
- for (var t = 0; t < 6; t++) {
- var opts = {
- destroy: true,
- deferRender: true,
- stateSave: true,
- order: [[0, "desc"]],
- pageLength: 50,
- lengthMenu: [[50, 100, 200, -1],[50, 100, 200, "All"]]
+<script>
+/* global moment, riot */
+
+var timeFormat = "YYYY-MM-DD HH:mm:ss";
+var mixin = {
+ mainTabs: [
+ "ドロップ",
+ "海戦",
+ "遠征",
+ "開発",
+ "建造",
+ "改修",
+ "資材",
+ "資材グラフ",
+ "戦果",
+ "出撃統計"
+ ],
+ logTables: 7,
+ oneDay: 3600 * 24 * 1000,
+ parseDate: function(d) {
+ return moment(d, timeFormat);
+ },
+ toDateString: function(d) {
+ return d.format(timeFormat);
+ },
+ to5am: function(tick) {
+ return tick - tick % (3600 * 24000) - 3600 * 4000;
+ },
+ pxPerEm: Number(getComputedStyle(document.body, null).fontSize.replace(/[^\d]/g, '')),
+ chartSize: function() {
+ return {
+ height: Math.max($(document).height() - 15 * this.pxPerEm, 400),
+ width: Math.max($(document).width() - 6 * this.pxPerEm, 800)
};
- if (t == 0) {
- 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++) {
- if (i == 9 || i == 10)
- continue;
- entries.push({data: i})
- }
- opts.columns = entries;
- }
- $('#log' + t).dataTable(opts);
}
-}
-
-const timeFormat = "YYYY-MM-DD HH:mm:ss";
-function parseDate(d)
-{
- return moment(d, timeFormat);
-}
+};
-function toString(d)
-{
- return d.format(timeFormat);
-}
-
-function pickChartData(data, range)
-{
- var newdata = [];
- var ticks = [];
- var grid = [];
- var last = moment(data[data.length - 1][0]).valueOf();
- var first, interval, tickInterval;
- 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(data[0][0]).valueOf();
- last = moment(last).day(1).valueOf();
- interval = 3600 * 6000;
- tickInterval = oneDay * 7;
- last -= last % oneDay + 3600 * 4000;
- break;
- }
- for (var tick = last; tick > first; tick -= tickInterval)
- {
- var str = toString(moment(tick));
- ticks.unshift(str);
- grid.unshift({value: str});
- }
- 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;
- }
- } else {
- break;
- }
- }
- return { data: newdata, tick: ticks, grid: grid };
-}
-
-var selectedTable = 0;
-var selectedRange = 0;
+</script>
-function drawChart(data)
-{
- if (data == null) {
- $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
- return;
- }
- picked = pickChartData(data.data, selectedRange);
- var header = ["日付","燃料","弾薬","鋼材","ボーキ","高速建造材","高速修復材","開発資材","改修資材"];
- picked.data.unshift(header);
- var chart = c3.generate({
- bindto: '#chart',
- size: {
- height: 400,
- width: 800
- },
- data: {
- x: '日付',
- xFormat: '%Y-%m-%d %X',
- rows: picked.data,
- axes: {
- 燃料: 'y',
- 弾薬: 'y',
- 鋼材: 'y',
- ボーキ: 'y',
- 高速建造材: 'y2',
- 高速修復材: 'y2',
- 開発資材: 'y2',
- 改修資材: 'y2'
- }
- },
- point: {
- show: false
- },
- tooltip: {
- show: true
- },
- 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
- },
- height: 60
- },
- y2: {
- show: true
- }
- }
- });
-}
+<main-tab></main-tab>
-function selectTopTab(i)
-{
- if (i < 6) {
- selectedTable = i;
- showLog();
- } else if (i == 6) {
- drawChart();
- }
- if (i < 6)
- $('#term').show();
- else
- $('#term').hide();
- var tab = $('.tab0 li');
- tab.removeClass('select');
- tab.eq(i).addClass('select');
- $('.contents .hide').hide();
- $('.contents .hide').eq(i).show();
-}
+<log-term></log-term>
-$(function() {
- $.fn.dataTable.ext.errMode = 'throw';
- $('.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');
- var i = tab.index(this);
- selectedRange = i;
- drawChart();
- tab.removeClass('select');
- tab.eq(i).addClass('select');
- sessionStorage.setItem('prevRange', i);
- });
- $('table').addClass('display compact cell-border');
- initTables();
- var range = sessionStorage.getItem('prevRange');
- selectedRange = range == null ? 0 : +range;
- $('.tab1 li').eq(range).addClass('select');
- $('#term_from').datepicker({
- defaultDate: moment().subtract(1, 'months').toDate()
- });
- $('#term_to').datepicker();
- $('#term_apply').click(showLog);
- var prev = sessionStorage.getItem('prevTab');
- selectTopTab(prev == null ? 0 : +prev);
-});
-</script>
+<log-tables></log-tables>
-<ul class="tab tab0">
-<li>ドロップ</li>
-<li>海戦</li>
-<li>遠征</li>
-<li>開発</li>
-<li>建造</li>
-<li>資材</li>
-<li>資材グラフ</li>
-</ul>
+<chart-type></chart-type>
-<form id="term">
-<p>
-<label><input type="radio" name="term" value="0" checked="checked">直近一か月</label>
-<label><input type="radio" name="term" value="1">指定の期間: </label>
-<input type="text" id="term_from" style="width: 8em">～<input type="text" id="term_to" style="width: 8em">
-<input type="button" id="term_apply" value="適用">
-</p>
-</form>
+<chart-range></chart-range>
-<ul class="contents">
-<li class="hide">
-<table id="log0" cellspacing="0" width="100%">
-<thead>
-<tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘</th></tr>
-</thead>
-</table>
+<sequential-chart></sequential-chart>
-<li class="hide">
-<table id="log1" cellspacing="0" width="100%">
-<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>
-</thead>
-</table>
+<differential-chart></differential-chart>
-<li class="hide">
-<table id="log2" cellspacing="0" width="100%">
-<thead>
-<tr><th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>高速修復材</th><th>高速建造材</th></tr>
-</thead>
-</table>
+<material-chart></material-chart>
-<li class="hide">
-<table id="log3" cellspacing="0" width="100%">
-<thead>
-<tr><th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th></tr>
-</thead>
-</table>
+<achivement-table></achivement-table>
-<li class="hide">
-<table id="log4" cellspacing="0" width="100%">
-<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>司令部Lv</th></tr>
-</thead>
-</table>
+<sortie-stat></sortie-stat>
-<li class="hide">
-<table id="log5" cellspacing="0" width="100%">
-<thead>
-<tr><th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th></tr>
-</thead>
-</table>
+<script src="tags.html" type="riot/tag"></script>
-<li class="hide">
-<ul class="tab tab1" style="float: left">
-<li>一日</li>
-<li>一週間</li>
-<li>一か月</li>
-<li>すべて</li>
-</ul>
-<div id="chart" style="clear: both; width: 800px; margin: 1em;"></div>
-</ul>
+<script>
+var obs = riot.observable();
+var spec = new Object();
+riot.mixin(mixin);
+riot.mount("log-term", {observable: obs});
+riot.mount("log-tables", {observable: obs});
+riot.mount("chart-type", {observable: obs, chartSpec: spec});
+riot.mount("chart-range", {observable: obs, chartSpec: spec});
+riot.mount("sequential-chart", {observable: obs, chartSpec: spec});
+riot.mount("differential-chart", {observable: obs, chartSpec: spec});
+riot.mount("material-chart", {observable: obs, chartSpec: spec});
+riot.mount("achivement-table", {observable: obs});
+riot.mount("sortie-stat", {observable: obs});
+riot.mount("main-tab", {observable: obs});
+</script>
</body>
</html>
OSDN Git Service
