OSDN -- Développer et télécharger des logiciels Open Source
Traduction statut du Français translation status for fr
  • R/O
  • HTTP
  • SSH
  • HTTPS
Fork

Commit

Tags
Aucun tag

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

PythonからElixir Reportのレポートサーバーにアクセスするサンプルコード


Commit MetaInfo

Révision1179e9b37d42524c8f8d877943b0139635dd9aec (tree)
l'heure2014-12-03 01:19:55
AuteurHiromichi Matsushima <hylom@Hiro...>
CommiterHiromichi Matsushima

Message de Log

implement clientside codes and stylesheet

Change Summary

Modification

--- a/template/index.html
+++ b/template/index.html
@@ -3,14 +3,16 @@
33 <head>
44 <meta charset="utf-8">
55 <title>Statics for slashdot.jp</title>
6+ <!-- d3.js -->
67 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7- <link rel="stylesheet" type="text/css" href="/css/index.css">
88 <!-- jQuery -->
99 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1010 <!-- bootstrap -->
11- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
12- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
13- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
11+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
12+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
13+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
14+
15+ <link rel="stylesheet" type="text/css" href="/css/index.css">
1416
1517 </head>
1618
@@ -23,49 +25,57 @@
2325
2426 <!-- 年入力 -->
2527 <div class="input-group">
26- <input type="text" class="form-control">
28+ <input type="text" class="form-control" id="input-year">
2729 <div class="input-group-btn">
2830 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">年<span class="caret"></span></button>
2931 <ul class="dropdown-menu dropdown-menu-right" role="menu">
30- <li><a href="#">2014</a></li>
31- <li><a href="#">2013</a></li>
32- <li><a href="#">2012</a></li>
33- <li><a href="#">2011</a></li>
34- <li><a href="#">2010</a></li>
32+ <li><a href="#" class="menu-item-year">2014</a></li>
33+ <li><a href="#" class="menu-item-year">2013</a></li>
34+ <li><a href="#" class="menu-item-year">2012</a></li>
35+ <li><a href="#" class="menu-item-year">2011</a></li>
36+ <li><a href="#" class="menu-item-year">2010</a></li>
3537 </ul>
3638 </div><!-- /btn-group -->
3739 </div><!-- /input-group -->
3840
3941 <!-- 月入力 -->
4042 <div class="input-group">
41- <input type="text" class="form-control">
43+ <input type="text" class="form-control" id="input-month">
4244 <div class="input-group-btn">
4345 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">月<span class="caret"></span></button>
4446 <ul class="dropdown-menu dropdown-menu-right" role="menu">
45- <li><a href="#">01</a></li>
46- <li><a href="#">02</a></li>
47- <li><a href="#">03</a></li>
48- <li><a href="#">04</a></li>
49- <li><a href="#">05</a></li>
50- <li><a href="#">06</a></li>
51- <li><a href="#">07</a></li>
52- <li><a href="#">08</a></li>
53- <li><a href="#">09</a></li>
54- <li><a href="#">10</a></li>
55- <li><a href="#">11</a></li>
56- <li><a href="#">12</a></li>
47+ <li><a href="#" class="menu-item-month">01</a></li>
48+ <li><a href="#" class="menu-item-month">02</a></li>
49+ <li><a href="#" class="menu-item-month">03</a></li>
50+ <li><a href="#" class="menu-item-month">04</a></li>
51+ <li><a href="#" class="menu-item-month">05</a></li>
52+ <li><a href="#" class="menu-item-month">06</a></li>
53+ <li><a href="#" class="menu-item-month">07</a></li>
54+ <li><a href="#" class="menu-item-month">08</a></li>
55+ <li><a href="#" class="menu-item-month">09</a></li>
56+ <li><a href="#" class="menu-item-month">10</a></li>
57+ <li><a href="#" class="menu-item-month">11</a></li>
58+ <li><a href="#" class="menu-item-month">12</a></li>
5759 </ul>
5860 </div><!-- /btn-group -->
5961 </div><!-- /input-group -->
6062
61- <button type="submit" class="btn btn-default">Show</button>
62- <button type="submit" class="btn btn-default">PDF</button>
63+ <button class="btn btn-default" id="btn-show" >Show</button>
64+ <button class="btn btn-default" id="btn-pdf">PDF</button>
6365 </form>
6466 </div>
6567 </div>
6668 </nav>
6769
68- <div id="graph"></div>
70+ <div id="graph">
71+ <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
72+ </div>
73+ <div class="legends">
74+ <span class="legend pageview">pageviews</span> /
75+ <span class="legend sessions">sessions</span> /
76+ <span class="legend users">users</span> /
77+ <span class="legend first-visits">first visits</span>
78+ </div>
6979 <script src="/js/index.js" charset="utf-8"></script>
7080 </body>
7181 </html>
--- a/www_root/css/index.css
+++ b/www_root/css/index.css
@@ -8,24 +8,46 @@ body {
88 margin: 5px;
99 padding: 5px;
1010 background-color: white;
11+ min-height: 400px;
12+ text-align: center;
1113 }
1214
13-rect.bar.pv {
14- fill: blue;
15+#graph span.glyphicon {
16+ font-size: 48px;
17+ color: #999;
18+ padding: 150px;
1519 }
1620
17-rect.bar.user {
18- fill: green;
21+.glyphicon-refresh-animate {
22+ -animation: spin .7s infinite linear;
23+ -webkit-animation: spin2 .7s infinite linear;
1924 }
2025
21-rect.bar.first {
22- fill: red;
26+@-webkit-keyframes spin2 {
27+ from { -webkit-transform: rotate(0deg);}
28+ to { -webkit-transform: rotate(360deg);}
2329 }
2430
25-path.domain {
26- fill: #aaa;
31+@keyframes spin {
32+ from { transform: scale(1) rotate(0deg);}
33+ to { transform: scale(1) rotate(360deg);}
2734 }
2835
29-g.tick text {
30- fill: #444;
31-}
\ No newline at end of file
36+.legends {
37+ margin-left: auto;
38+ margin-right: auto;
39+ text-align: center;
40+}
41+
42+.legend.pageview { color: blue; }
43+.legend.sessions { color: cornflowerblue; }
44+.legend.users { color: green; }
45+.legend.first-visits { color: red; }
46+
47+rect.bar.pageviews { fill: blue; }
48+rect.bar.sessions { fill: cornflowerblue; }
49+rect.bar.users { fill: green; }
50+rect.bar.first-visits { fill: red; }
51+
52+path.domain { fill: #aaa; }
53+g.tick text { fill: #444; }
\ No newline at end of file
--- a/www_root/js/index.js
+++ b/www_root/js/index.js
@@ -1,13 +1,54 @@
11 /* index.js */
22
3+(function () {
4+
35 // XMLから読んだデータを格納する配列
46 var data = [];
57 var ns = "http://www.elixirtech.com/DataSource";
68
7-// load xml data source
8-d3.xml('/data/sample.xml', 'application/xml', xmlParser);
9+d3.selectAll('.menu-item-year').on('click', function (d) {
10+ var t = d3.select(this).text();
11+ d3.select('#input-year').attr("value", t);
12+});
13+
14+d3.selectAll('.menu-item-month').on('click', function (d) {
15+ var t = d3.select(this).text();
16+ d3.select('#input-month').attr("value", t);
17+});
18+
19+d3.select('#btn-show').on('click', function (d) {
20+ var year = d3.select('#input-year').attr("value");
21+ var month = d3.select('#input-month').attr("value");
22+ loadData(year, month);
23+});
24+
25+d3.select('#btn-pdf').on('click', function (d) {
26+ var year = d3.select('#input-year').attr("value");
27+ var month = d3.select('#input-month').attr("value");
28+ var pdfUrl = '/pdf/traffic?y=' + year + '&m=' + month;
29+ window.open(pdfUrl, '_blank');
30+});
31+
32+function loadData(year, month) {
33+ // グラフ領域をクリア
34+ d3.select('#graph').html('');
35+
36+ // ローディングアイコンを表示
37+ d3.select('#graph').append('span')
38+ .attr('class', 'glyphicon glyphicon-refresh glyphicon-refresh-animate');
39+
40+ // データをクリア
41+ data.length = 0;
42+
43+// XMLデータを読み込む
44+ var url = '/data/traffic?y=' + year + '&m=' + month;
45+ d3.xml(url, 'application/xml', xmlParser);
46+}
947
1048 function xmlParser(error, xmlRoot) {
49+ // グラフ領域をクリア
50+ d3.select('#graph').html('');
51+
1152 var records = xmlRoot.getElementsByTagNameNS(ns, "record");
1253 for (var i = 0; i < records.length; i++) {
1354 // 各行のデータをvalues配列に格納する
@@ -20,7 +61,7 @@ function xmlParser(error, xmlRoot) {
2061 }
2162
2263 // 1列目のデータをdate型に変換する
23- var p = /([0-9]{4})\/([0-9]{2})\/([0-9]{2})/.exec(values[0])
64+ var p = /([0-9]{4})-([0-9]{2})-([0-9]{2})/.exec(values[0])
2465 values[0] = new Date(Number(p[1]), Number(p[2]) - 1, Number(p[3]))
2566
2667 data.push(values);
@@ -50,14 +91,16 @@ function drawGraph() {
5091 .domain([dateBegin, dateEnd])
5192 .range([0, graph.w]);
5293
94+ var k = d3.transpose(data);
95+ var maxValue = d3.max(k[1]);
5396 var scaleY = d3.scale.linear()
54- .domain([200000, 0])
97+ .domain([maxValue, 0])
5598 .range([0, graph.h]);
5699
57100 // PVグラフを描画
58101 g.append('g').selectAll('.bar .pv')
59102 .data(data).enter().append('rect')
60- .attr('class', 'bar pv')
103+ .attr('class', 'bar pageviews')
61104 .attr('width', thickness)
62105 .attr('height',function (d) { return graph.h - scaleY(d[1]); })
63106 .attr('x', function(d) { return scaleX(d[0]); })
@@ -67,7 +110,7 @@ function drawGraph() {
67110 // USERグラフを描画
68111 g.append('g').selectAll('.bar .user')
69112 .data(data).enter().append('rect')
70- .attr('class', 'bar user')
113+ .attr('class', 'bar users')
71114 .attr('width', thickness)
72115 .attr('height',function (d) { return graph.h - scaleY(d[2]); })
73116 .attr('x', function(d) { return scaleX(d[0]); })
@@ -77,7 +120,7 @@ function drawGraph() {
77120 // 1ST_USERグラフを描画
78121 g.append('g').selectAll('.bar .first')
79122 .data(data).enter().append('rect')
80- .attr('class', 'bar first')
123+ .attr('class', 'bar first-visits')
81124 .attr('width', thickness)
82125 .attr('height',function (d) { return graph.h - scaleY(d[3]); })
83126 .attr('x', function(d) { return scaleX(d[0]); })
@@ -112,3 +155,4 @@ function drawGraph() {
112155
113156 }
114157
158+})();