LogViewer/index.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3 <head>
   4 <meta charset="utf-8">
   5 <title>各種報告書 - KancolleSniffer</title>
   6 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   7 <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
   8 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css">
   9 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  10 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.js"></script>
  11 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.css">
  12 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  13 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  14 <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  15 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ja.min.js"></script>
  16 <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.6.1/riot+compiler.min.js"></script>
  17 <style>
  18 body {
  19     font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  20     line-height: 1.5;
  21     font-size: 14px;
  22 }
  23 .tab {overflow: hidden; list-style-type: none; margin: 0 0 2em 1em; padding: 0;}
  24 .tab li {background: #eee; padding: 0.3em 1.5em; float: left; margin-right: 2px; cursor: pointer;}
  25 .tab li.select {background: #ccc;}
  26 .tabsub li {padding: 0.3em 1em;}
  27 .c3 .tick {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 12px;}
  28 .c3-legend-item {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 14px;}
  29 #loading {
  30     width: 48px;
  31     height: 48px;
  32     display: none;
  33     position: fixed;
  34     top: 50%;
  35     left: 50%;
  36     margin-top: -24px;
  37     margin-left: -24px;
  38     z-index: 100;
  39 }
  40 </style>
  41 </head>
  42 <body>
  43 <div id="loading"><img src="https://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
  44
  45 <script>
  46 /* global moment, riot */
  47
  48 var timeFormat = "YYYY-MM-DD HH:mm:ss";
  49 var mixin = {
  50     mainTabs: [
  51         "ドロップ",
  52         "海戦",
  53         "遠征",
  54         "開発",
  55         "建造",
  56         "改修",
  57         "資材",
  58         "資材グラフ",
  59         "戦果",
  60         "出撃統計"
  61     ],
  62     logTables: 7,
  63     oneDay: 3600 * 24 * 1000,
  64     parseDate: function(d) {
  65         return moment(d, timeFormat);
  66     },
  67     toDateString: function(d) {
  68         return d.format(timeFormat);
  69     },
  70     to5am: function(tick) {
  71         return tick - tick % (3600 * 24000) - 3600 * 4000;
  72     },
  73     pxPerEm: Number(getComputedStyle(document.body, null).fontSize.replace(/[^\d]/g, '')),
  74     chartSize: function() {
  75         return {
  76             height: Math.max($(document).height() - 15 * this.pxPerEm, 400),
  77             width: Math.max($(document).width() - 6 * this.pxPerEm, 800)
  78         };
  79     }
  80 };
  81
  82 </script>
  83
  84 <main-tab></main-tab>
  85
  86 <log-term></log-term>
  87
  88 <log-tables></log-tables>
  89
  90 <chart-type></chart-type>
  91
  92 <chart-range></chart-range>
  93
  94 <sequential-chart></sequential-chart>
  95
  96 <differential-chart></differential-chart>
  97
  98 <material-chart></material-chart>
  99
 100 <achivement-table></achivement-table>
 101
 102 <sortie-stat></sortie-stat>
 103
 104 <script src="tags.html" type="riot/tag"></script>
 105
 106 <script>
 107 var obs = riot.observable();
 108 var spec = new Object();
 109 riot.mixin(mixin);
 110 riot.mount("log-term", {observable: obs});
 111 riot.mount("log-tables", {observable: obs});
 112 riot.mount("chart-type", {observable: obs, chartSpec: spec});
 113 riot.mount("chart-range", {observable: obs, chartSpec: spec});
 114 riot.mount("sequential-chart", {observable: obs, chartSpec: spec});
 115 riot.mount("differential-chart", {observable: obs, chartSpec: spec});
 116 riot.mount("material-chart", {observable: obs, chartSpec: spec});
 117 riot.mount("achivement-table", {observable: obs});
 118 riot.mount("sortie-stat", {observable: obs});
 119 riot.mount("main-tab", {observable: obs});
 120 </script>
 121 </body>
 122 </html>