<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 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 {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 {
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",
- "資材ログ.json"
- ];
- $('#loading').show();
- var url = jsons[selectedTable] + query;
- $('#log' + selectedTable).DataTable().ajax.url(url).load();
-}
-
-var tables = 7;
+<div id="loading"><img src="https://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
-function initTables()
-{
- for (var t = 0; t < tables; t++) {
- var opts = {
- destroy: true,
- deferRender: true,
- stateSave: true,
- order: [[0, "desc"]],
- pageLength: 50,
- lengthMenu: [[50, 100, 200, -1],[50, 100, 200, "All"]],
- drawCallback: function () {
- $('#loading').hide();
- }
+<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 < 38; 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 to5am(tick)
-{
- return tick - tick % (3600 * 24000) - 3600 * 4000;
-}
-
-var selectedTable = 0;
-var seqChartRange = 0;
-var diffChartRange = 0;
-var chartType = 0;
-
-function drawChart(data)
-{
- if (data == null) {
- $('#loading').show();
- $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
- return;
- }
- if (chartType == 0)
- drawSeqChart(data)
- else
- drawDiffChart(data)
-}
-
-function drawSeqChart(data)
-{
- picked = pickChartData(data.data, seqChartRange);
- 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: $('#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
- },
- height: 65
- },
- 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 interval, tickInterval, lastTick;
- const oneDay = 3600 * 24 * 1000;
- switch (range) {
- case 0:
- first = moment(last).subtract(24, 'hours').valueOf();
- break;
- case 1:
- first = moment(last).subtract(7, 'days').valueOf();
- break;
- case 2:
- first = moment(last).subtract(1, 'months').valueOf();
- break;
- case 3:
- first = moment(last).subtract(3, 'months').valueOf();
- break;
- case 4:
- first = moment(data[0][0]).valueOf();
- 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;
- }
- 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 {
- interval = 3600 * 12000;
- tickInterval = oneDay * 14;
- 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) {
- 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 };
-}
-
-function drawDiffChart(data)
-{
- picked = pickDiffChartData(data.data, diffChartRange);
- 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',
- },
- type: 'bar',
- groups: [["燃料", "弾薬", "鋼材", "ボーキ"]]
- },
- bar: {
- width: {
- ratio: picked.width
- }
- },
- tooltip: {
- show: $('#tooltip').prop('checked')
- },
- grid: {
- x: {
- lines: picked.grid
- },
- y: {
- lines: [
- {value: 0}
- ]
- }
- },
- axis: {
- x: {
- type: 'timeseries',
- tick: {
- rotate: 30,
- format: function (x) { return moment(x).format("MM-DD HH:mm"); },
- values: picked.tick
- },
- height: 65
- },
- },
- 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 * 14;
- lastTick = to5am(moment(last).day(1).valueOf());
- barWidth = 0.3;
- if (last <= first + oneDay * 8 * 31){
- tickInterval = oneDay * 7;
- barWidth = 0.6;
- }
- }
- 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();
- var from = moment().subtract(1, 'months').valueOf();
- $.get("./海戦・ドロップ報告書.json?time=" + Date.now() + "&from=" + from, function (data) { setSortieStat(data.data);}, "json");
- return;
- }
- var r = {
- day: {stat: {}},
- week: {stat: {}},
- month: {stat: {}}
- };
- 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) {
- r.day.begin.subtract(1, 'days');
- }
- r.week.begin = moment(now).day(1).hour(5).minute(0);
- if (now.day() == 0 || now.day() == 1 && now.hour() < 5) {
- r.week.begin.subtract(1, 'weeks');
- }
- r.month.begin = moment(now).date(1).hour(5).minute(0);
- if (now.date() == 1 && now.hours() < 5) {
- r.month.begin.subtract(1, 'months');
- }
- for (var i = 0; i < data.length; i++) {
- var row = data[i];
- var date = moment(row[0]);
- 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";
- for (var term in r) {
- to = r[term];
- if (to.begin.isAfter(date))
- continue;
- for (var b = 0; b < 4; b++) {
- var name = b < 2 ? "合計" : map;
- if (b == 1 || b == 3) {
- if (!isBoss)
- continue;
- name = name + " - ボス";
- }
- var mo = to.stat[name];
- if (!mo) {
- mo = to.stat[name] = initStat();
- if (name == "合計")
- to.stat["合計 - ボス"] = initStat();
- }
- mo["R"] += resR;
- mo[res]++;
- if ((b == 0 || b == 2) && isStart)
- {
- if (mo.start == "-")
- mo.start = 0;
- mo.start++
- }
- }
- }
- }
- for (term in r) {
- var table = [];
- for (map in r[term].stat)
- {
- var e = r[term].stat[map];
- e.map = map;
- table.push(e);
- }
- var dt = $("#sortie_stat_" + term).DataTable();
- dt.clear();
- dt.rows.add(table).draw();
- }
- $('#loading').hide();
-}
-
-function initSortieStat()
-{
- var terms = ['day', 'week', 'month'];
- for (var i = 0; i < terms.length; i++) {
- $("#sortie_stat_" + terms[i]).dataTable({
- paging: false,
- searching: false,
- ordering: false,
- 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" },
- ]
- });
- }
-}
-
-function selectTopTab(i)
-{
- var chart = tables;
- if (i < tables) {
- selectedTable = i;
- showLog();
- } else if (i == chart) {
- drawChart();
- } else if (i == chart + 1) {
- setSortieStat();
- }
- if (i < tables)
- $('#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();
-}
-
-function initAction()
-{
- $('.tab0 li').click(function() {
- var tab = $('.tab0 li');
- var i = tab.index(this)
- selectTopTab(i);
- sessionStorage.setItem('prevTab', i);
- });
- $('#range_seq li').click(function() {
- var tab = $('#range_seq li');
- var i = tab.index(this);
- seqChartRange = i;
- chartType = 0;
- drawChart();
- tab.removeClass('select');
- tab.eq(i).addClass('select');
- 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();
- });
-}
-
-function initTableDatePicker()
-{
- $('#term_from').datepicker({
- defaultDate: moment().subtract(1, 'months').toDate(),
- onClose: function() {$('input[name=term]').val(['1'])}
- });
- $('#term_to').datepicker({
- onClose: function() {$('input[name=term]').val(['1'])}
- });
- $('#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>
-
-<ul class="tab tab0">
-<li>ドロップ</li>
-<li>海戦</li>
-<li>遠征</li>
-<li>開発</li>
-<li>建造</li>
-<li>改修</li>
-<li>資材</li>
-<li>資材グラフ</li>
-<li>出撃統計</li>
-</ul>
+<main-tab></main-tab>
-<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: 7em">～<input type="text" id="term_to" style="width: 7em">
-<input type="button" id="term_apply" value="適用">
-</p>
-</form>
+<log-term></log-term>
-<ul class="contents">
-<li class="hide">
-<table id="log0">
-<thead>
-<tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘</th></tr>
-</thead>
-</table>
+<log-tables></log-tables>
-<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><th>味方制空値</th><th>敵制空値</th><th>制空状態</th></tr>
-</thead>
-</table>
+<chart-type></chart-type>
-<li class="hide">
-<table id="log2">
-<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>
+<chart-range></chart-range>
-<li class="hide">
-<table id="log3">
-<thead>
-<tr><th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th></tr>
-</thead>
-</table>
+<sequential-chart></sequential-chart>
-<li class="hide">
-<table id="log4">
-<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>
+<differential-chart></differential-chart>
-<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>
+<material-chart></material-chart>
-<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>
+<achivement-table></achivement-table>
-<li class="hide">
-<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>
-<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; width: 800px; margin: 1em;"></div>
+<sortie-stat></sortie-stat>
-<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><th>輸送船</th></tr>
-</thead>
-</table>
+<script src="tags.html" type="riot/tag"></script>
-<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><th>輸送船</th></tr>
-</table>
-
-<h3>今月</h3>
-<table id="sortie_stat_month">
-<thead>
-<tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th></tr>
-</table>
-</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
