Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 1 | function controller_status(data_source){ |
| 2 | /* var data = [{name:'onos9vpc', onos: 1, cassandra: 1}, |
| 3 | {name:'onos10vpc', onos: 0, cassandra: 1}, |
| 4 | {name:'onos11vpc', onos: 1, cassandra: 1}, |
| 5 | {name:'onos12vpc', onos: 0, cassandra: 1}] */ |
| 6 | |
| 7 | var barWidth = 100; |
Masayoshi Kobayashi | 5149675 | 2013-03-25 22:44:23 +0000 | [diff] [blame] | 8 | var width = (barWidth + 10) * 8 |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 9 | var height = 50; |
| 10 | |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 11 | var Servers = d3.select("#servers"). |
| 12 | append("svg:svg"). |
Masayoshi Kobayashi | 5149675 | 2013-03-25 22:44:23 +0000 | [diff] [blame] | 13 | attr("width", 1280). |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 14 | attr("height", 30); |
| 15 | |
| 16 | var ContStatus = d3.select("#onos-status"). |
| 17 | append("svg:svg"). |
Masayoshi Kobayashi | 5149675 | 2013-03-25 22:44:23 +0000 | [diff] [blame] | 18 | attr("width", 1280). |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 19 | attr("height", 50); |
| 20 | |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 21 | d3.json(data_source, draw); |
Ubuntu | 765deff | 2013-02-28 18:39:13 +0000 | [diff] [blame] | 22 | setInterval(function() { |
| 23 | $.ajax({ |
| 24 | url: data_source, |
| 25 | success: function(json) { |
| 26 | draw(json) |
| 27 | }, |
| 28 | dataType: "json" |
| 29 | }); |
Tim Lindberg | 86a85f6 | 2013-03-26 11:34:01 -0700 | [diff] [blame] | 30 | }, 3000); |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 31 | |
| 32 | function draw(json){ |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 33 | var data = json; |
| 34 | var server = Servers.selectAll("text").data(data); |
| 35 | var controller_rect = ContStatus.selectAll("rect").data(data); |
| 36 | var controller_text = ContStatus.selectAll("text").data(data); |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 37 | |
| 38 | var x = d3.scale.linear().domain([0, data.length]).range([0, width]); |
| 39 | var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.onos; })]).rangeRound([0, height]); |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 40 | |
| 41 | console.log(data) |
| 42 | server. |
| 43 | enter(). |
| 44 | append("svg:text"). |
| 45 | attr("x", function(datum, index) { return x(index); }). |
| 46 | attr("y", function(datum) { return 20; }). |
Ubuntu | c016ba1 | 2013-02-27 21:53:41 +0000 | [diff] [blame] | 47 | attr("fill", function(datum, index) { |
| 48 | if (index == 0){ |
| 49 | return "red" |
| 50 | }else if (index == 1){ |
| 51 | return "blue" |
| 52 | }else if (index == 2){ |
| 53 | return "green" |
| 54 | }else if (index == 3){ |
| 55 | return "orange" |
Masayoshi Kobayashi | 5149675 | 2013-03-25 22:44:23 +0000 | [diff] [blame] | 56 | }else if (index == 4){ |
| 57 | return "cyan" |
| 58 | }else if (index == 5){ |
| 59 | return "magenta" |
| 60 | }else if (index == 6){ |
| 61 | return "yellow" |
| 62 | }else if (index == 7){ |
| 63 | return "purple" |
Ubuntu | c016ba1 | 2013-02-27 21:53:41 +0000 | [diff] [blame] | 64 | }else{ |
| 65 | return "black" |
| 66 | } |
| 67 | }). |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 68 | text(function(datum) { return datum.name; }); |
| 69 | |
| 70 | controller_rect. |
| 71 | enter(). |
| 72 | append("svg:rect"). |
| 73 | attr("x", function(datum, index) { return x(index); }). |
| 74 | attr("y", function(datum) { return height - y(datum.onos); }). |
| 75 | attr("height", function(datum) { return y(datum.onos); }). |
| 76 | attr("width", barWidth). |
Ubuntu | c016ba1 | 2013-02-27 21:53:41 +0000 | [diff] [blame] | 77 | attr("fill", function(datum, index) { |
| 78 | if (index == 0){ |
| 79 | return "red" |
| 80 | }else if (index == 1){ |
| 81 | return "blue" |
| 82 | }else if (index == 2){ |
| 83 | return "green" |
| 84 | }else if (index == 3){ |
| 85 | return "orange" |
Masayoshi Kobayashi | 5149675 | 2013-03-25 22:44:23 +0000 | [diff] [blame] | 86 | }else if (index == 4){ |
| 87 | return "cyan" |
| 88 | }else if (index == 5){ |
| 89 | return "magenta" |
| 90 | }else if (index == 6){ |
| 91 | return "yellow" |
| 92 | }else if (index == 7){ |
| 93 | return "purple" |
Ubuntu | c016ba1 | 2013-02-27 21:53:41 +0000 | [diff] [blame] | 94 | }else{ |
| 95 | return "black" |
| 96 | } |
| 97 | }); |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 98 | |
| 99 | controller_text. |
| 100 | enter(). |
| 101 | append("svg:text"). |
| 102 | text(function(){return "ONOS"}). |
| 103 | attr("x", function(datum, index) { return x(index)+10; }). |
| 104 | attr("y", function(datum) { return 30 ; }). |
| 105 | attr("height", function(datum) { return y(datum.onos); }). |
| 106 | attr("width", barWidth). |
| 107 | attr('fill', 'white'); |
| 108 | |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 109 | controller_rect. |
| 110 | attr("x", function(datum, index) { return x(index); }). |
| 111 | attr("y", function(datum) { return height - y(datum.onos); }). |
| 112 | attr("height", function(datum) { return y(datum.onos); }). |
| 113 | attr("width", barWidth). |
Ubuntu | c016ba1 | 2013-02-27 21:53:41 +0000 | [diff] [blame] | 114 | attr("fill", function(datum, index) { |
| 115 | if (index == 0){ |
| 116 | return "red" |
| 117 | }else if (index == 1){ |
| 118 | return "blue" |
| 119 | }else if (index == 2){ |
| 120 | return "green" |
| 121 | }else if (index == 3){ |
| 122 | return "orange" |
Masayoshi Kobayashi | 5149675 | 2013-03-25 22:44:23 +0000 | [diff] [blame] | 123 | }else if (index == 4){ |
| 124 | return "cyan" |
| 125 | }else if (index == 5){ |
| 126 | return "magenta" |
| 127 | }else if (index == 6){ |
| 128 | return "yellow" |
| 129 | }else if (index == 7){ |
| 130 | return "purple" |
Ubuntu | c016ba1 | 2013-02-27 21:53:41 +0000 | [diff] [blame] | 131 | }else{ |
| 132 | return "black" |
| 133 | } |
| 134 | }); |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 135 | |
| 136 | controller_text. |
| 137 | text(function(){return "ONOS"}). |
| 138 | attr("x", function(datum, index) { return x(index)+10; }). |
| 139 | attr("y", function(datum) { return 30 ; }). |
| 140 | attr("height", function(datum) { return y(datum.onos); }). |
| 141 | attr("width", barWidth). |
| 142 | attr('fill', 'white'); |
| 143 | |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 144 | server.exit().remove(); |
| 145 | controller_rect.exit().remove(); |
| 146 | controller_text.exit().remove(); |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 147 | } |
Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 148 | } |
| 149 | |