PythonからElixir Reportのレポートサーバーにアクセスするサンプルコード
Revision | 1179e9b37d42524c8f8d877943b0139635dd9aec (tree) |
---|---|
Time | 2014-12-03 01:19:55 |
Author | Hiromichi Matsushima <hylom@Hiro...> |
Commiter | Hiromichi Matsushima |
implement clientside codes and stylesheet
@@ -3,14 +3,16 @@ | ||
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <title>Statics for slashdot.jp</title> |
6 | + <!-- d3.js --> | |
6 | 7 | <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
7 | - <link rel="stylesheet" type="text/css" href="/css/index.css"> | |
8 | 8 | <!-- jQuery --> |
9 | 9 | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
10 | 10 | <!-- 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"> | |
14 | 16 | |
15 | 17 | </head> |
16 | 18 |
@@ -23,49 +25,57 @@ | ||
23 | 25 | |
24 | 26 | <!-- 年入力 --> |
25 | 27 | <div class="input-group"> |
26 | - <input type="text" class="form-control"> | |
28 | + <input type="text" class="form-control" id="input-year"> | |
27 | 29 | <div class="input-group-btn"> |
28 | 30 | <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">年<span class="caret"></span></button> |
29 | 31 | <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> | |
35 | 37 | </ul> |
36 | 38 | </div><!-- /btn-group --> |
37 | 39 | </div><!-- /input-group --> |
38 | 40 | |
39 | 41 | <!-- 月入力 --> |
40 | 42 | <div class="input-group"> |
41 | - <input type="text" class="form-control"> | |
43 | + <input type="text" class="form-control" id="input-month"> | |
42 | 44 | <div class="input-group-btn"> |
43 | 45 | <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">月<span class="caret"></span></button> |
44 | 46 | <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> | |
57 | 59 | </ul> |
58 | 60 | </div><!-- /btn-group --> |
59 | 61 | </div><!-- /input-group --> |
60 | 62 | |
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> | |
63 | 65 | </form> |
64 | 66 | </div> |
65 | 67 | </div> |
66 | 68 | </nav> |
67 | 69 | |
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> | |
69 | 79 | <script src="/js/index.js" charset="utf-8"></script> |
70 | 80 | </body> |
71 | 81 | </html> |
@@ -8,24 +8,46 @@ body { | ||
8 | 8 | margin: 5px; |
9 | 9 | padding: 5px; |
10 | 10 | background-color: white; |
11 | + min-height: 400px; | |
12 | + text-align: center; | |
11 | 13 | } |
12 | 14 | |
13 | -rect.bar.pv { | |
14 | - fill: blue; | |
15 | +#graph span.glyphicon { | |
16 | + font-size: 48px; | |
17 | + color: #999; | |
18 | + padding: 150px; | |
15 | 19 | } |
16 | 20 | |
17 | -rect.bar.user { | |
18 | - fill: green; | |
21 | +.glyphicon-refresh-animate { | |
22 | + -animation: spin .7s infinite linear; | |
23 | + -webkit-animation: spin2 .7s infinite linear; | |
19 | 24 | } |
20 | 25 | |
21 | -rect.bar.first { | |
22 | - fill: red; | |
26 | +@-webkit-keyframes spin2 { | |
27 | + from { -webkit-transform: rotate(0deg);} | |
28 | + to { -webkit-transform: rotate(360deg);} | |
23 | 29 | } |
24 | 30 | |
25 | -path.domain { | |
26 | - fill: #aaa; | |
31 | +@keyframes spin { | |
32 | + from { transform: scale(1) rotate(0deg);} | |
33 | + to { transform: scale(1) rotate(360deg);} | |
27 | 34 | } |
28 | 35 | |
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 |
@@ -1,13 +1,54 @@ | ||
1 | 1 | /* index.js */ |
2 | 2 | |
3 | +(function () { | |
4 | + | |
3 | 5 | // XMLから読んだデータを格納する配列 |
4 | 6 | var data = []; |
5 | 7 | var ns = "http://www.elixirtech.com/DataSource"; |
6 | 8 | |
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 | +} | |
9 | 47 | |
10 | 48 | function xmlParser(error, xmlRoot) { |
49 | + // グラフ領域をクリア | |
50 | + d3.select('#graph').html(''); | |
51 | + | |
11 | 52 | var records = xmlRoot.getElementsByTagNameNS(ns, "record"); |
12 | 53 | for (var i = 0; i < records.length; i++) { |
13 | 54 | // 各行のデータをvalues配列に格納する |
@@ -20,7 +61,7 @@ function xmlParser(error, xmlRoot) { | ||
20 | 61 | } |
21 | 62 | |
22 | 63 | // 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]) | |
24 | 65 | values[0] = new Date(Number(p[1]), Number(p[2]) - 1, Number(p[3])) |
25 | 66 | |
26 | 67 | data.push(values); |
@@ -50,14 +91,16 @@ function drawGraph() { | ||
50 | 91 | .domain([dateBegin, dateEnd]) |
51 | 92 | .range([0, graph.w]); |
52 | 93 | |
94 | + var k = d3.transpose(data); | |
95 | + var maxValue = d3.max(k[1]); | |
53 | 96 | var scaleY = d3.scale.linear() |
54 | - .domain([200000, 0]) | |
97 | + .domain([maxValue, 0]) | |
55 | 98 | .range([0, graph.h]); |
56 | 99 | |
57 | 100 | // PVグラフを描画 |
58 | 101 | g.append('g').selectAll('.bar .pv') |
59 | 102 | .data(data).enter().append('rect') |
60 | - .attr('class', 'bar pv') | |
103 | + .attr('class', 'bar pageviews') | |
61 | 104 | .attr('width', thickness) |
62 | 105 | .attr('height',function (d) { return graph.h - scaleY(d[1]); }) |
63 | 106 | .attr('x', function(d) { return scaleX(d[0]); }) |
@@ -67,7 +110,7 @@ function drawGraph() { | ||
67 | 110 | // USERグラフを描画 |
68 | 111 | g.append('g').selectAll('.bar .user') |
69 | 112 | .data(data).enter().append('rect') |
70 | - .attr('class', 'bar user') | |
113 | + .attr('class', 'bar users') | |
71 | 114 | .attr('width', thickness) |
72 | 115 | .attr('height',function (d) { return graph.h - scaleY(d[2]); }) |
73 | 116 | .attr('x', function(d) { return scaleX(d[0]); }) |
@@ -77,7 +120,7 @@ function drawGraph() { | ||
77 | 120 | // 1ST_USERグラフを描画 |
78 | 121 | g.append('g').selectAll('.bar .first') |
79 | 122 | .data(data).enter().append('rect') |
80 | - .attr('class', 'bar first') | |
123 | + .attr('class', 'bar first-visits') | |
81 | 124 | .attr('width', thickness) |
82 | 125 | .attr('height',function (d) { return graph.h - scaleY(d[3]); }) |
83 | 126 | .attr('x', function(d) { return scaleX(d[0]); }) |
@@ -112,3 +155,4 @@ function drawGraph() { | ||
112 | 155 | |
113 | 156 | } |
114 | 157 | |
158 | +})(); |