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