[v2 0/2] UI: Line Chart(With Sample)
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Yu Xin Huo (2): UI: Line Chart Widget UI: Line Chart Sample ui/css/theme-default/line.css | 34 ++++++++ ui/js/widgets/line.js | 72 +++++++++++++++++ ui/js/widgets/samples/line.html | 168 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 274 insertions(+), 0 deletions(-) create mode 100644 ui/css/theme-default/line.css create mode 100644 ui/js/widgets/line.js create mode 100644 ui/js/widgets/samples/line.html
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/line.css | 34 +++++++++++++++++++ ui/js/widgets/line.js | 72 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 0 deletions(-) create mode 100644 ui/css/theme-default/line.css create mode 100644 ui/js/widgets/line.js diff --git a/ui/css/theme-default/line.css b/ui/css/theme-default/line.css new file mode 100644 index 0000000..7dde827 --- /dev/null +++ b/ui/css/theme-default/line.css @@ -0,0 +1,34 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2015 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.line line, polyline { + stroke: #000000; + stroke-width: 2; +} + +.line .min { + stroke: #444444; +} + +.line .max { + stroke: #999999; +} + +.line polyline { + fill: none; +} diff --git a/ui/js/widgets/line.js b/ui/js/widgets/line.js new file mode 100644 index 0000000..4c63917 --- /dev/null +++ b/ui/js/widgets/line.js @@ -0,0 +1,72 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2015 + * + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$(function(){ +$.widget("kimchi.line", { + options: { + xShift: true, + minVal: 0, + maxVal: 100, + datasets: [] + }, + _create: function() { + this._build(); + }, + _build: function() { + this.element.empty(); + var maxX = this.element.width(); + var maxY = this.element.height(); + var svg = "<svg class='line' width='"+maxX+"' height='"+maxY+"'>"; + svg += "<line x1='0' y1='0' x2='"+maxX+"' y2='0' class='max'/>"; + svg += "<line x1='0' y1='"+maxY+"' x2='"+maxX+"' y2='"+maxY+"' class='min'/>"; + for(var i=0;i<this.options.datasets.length;i++){ + var data = this.options.datasets[i].data; + var points = ""; + for(var j=0;j<data.length;j++){ + if(data[j]){ + var xVal = maxX/(data.length-1)*j; + var yVal = (this.options.maxVal-data[j])*maxY/this.options.maxVal; + points += xVal+","+yVal+" "; + } + } + svg += "<polyline points='"+points+"' style='stroke:"+this.options.datasets[i].color+";'/>"; + } + svg += "</svg>"; + this.element.append(svg); + }, + addData: function(values){ + if(values.length<this.options.datasets.length) return; + for(var i=0;i<this.options.datasets.length;i++){ + this.options.datasets[i].data.push(values[i]); + if(this.options.xShift) this.options.datasets[i].data.splice(0,1); + } + this._build(); + }, + removeData: function(){ + for(var i=0;i<this.options.datasets.length;i++){ + var data = this.options.datasets[i].data; + data.splice(0,1); + if(this.options.xShift) data.push(null); + } + this._build(); + }, + _destroy: function() { + this.element.empty(); + } +}); +}); -- 1.7.1
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/js/widgets/samples/line.html | 168 +++++++++++++++++++++++++++++++++++++++ 1 files changed, 168 insertions(+), 0 deletions(-) create mode 100644 ui/js/widgets/samples/line.html diff --git a/ui/js/widgets/samples/line.html b/ui/js/widgets/samples/line.html new file mode 100644 index 0000000..794cb7f --- /dev/null +++ b/ui/js/widgets/samples/line.html @@ -0,0 +1,168 @@ +<!-- + * + * Project Kimchi + * + * Copyright IBM, Corp. 2015 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * +--> + +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>Kimchi</title> +<meta http-equiv="X-UA-Compatible" content="IE=edge"/> +<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + +<link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> +<link rel="stylesheet" href="../../../fontello/css/fontello.css"> +<link rel="stylesheet" href="../../../fontello/css/animation.css"> +<link rel="stylesheet" href="../../../css/theme-default.min.css"> + +<script src="../../../libs/jquery-1.10.0.min.js"></script> +<script src="../../../libs/jquery-ui.min.js"></script> +<script src="../../../libs/jquery-ui-i18n.min.js"></script> +<script src="../../../js/kimchi.min.js"></script> + +<style type="text/css"> +body { + background: none; +} +.cell { + display: inline-block; + width: 49%; +} +.monitor { + width: 391px; + margin: 15px auto; +} +.chart { + width: 390px; + height: 200px; + margin-top: 20px; +} +.legend { + height: 25px; + line-height: 25px; + padding-left: 8px; + margin: 5px 30px 5px 0; + border-left: 3px solid; + display: inline-block; +} +</style> +<script> +function init(){ +$('#chart1').line({ + minVal: 0, + maxVal: 500, + datasets: [{ + data: new Array(50), + color: "#d9182d" + }] +}); +$('#chart2').line({ + minVal: 0, + maxVal: 500, + datasets: [{ + data: new Array(50), + color: "#008abf" + }] +}); +$('#chart3').line({ + minVal: 0, + maxVal: 500, + datasets: [{ + data: new Array(50), + color: "#fdb813" + }, { + data: new Array(50), + color: "#00a6a0" + }] +}); +$('#chart4').line({ + minVal: 0, + maxVal: 500, + datasets: [{ + data: new Array(50), + color: "#561289" + }, { + data: new Array(50), + color: "#238901" + }] +}); +setInterval(function(){ + $('#chart1').line('addData', [Math.round(Math.random()*500)]); +}, 1000); +setInterval(function(){ + $('#chart2').line('addData', [Math.round(Math.random()*500)]); +}, 1000); +setInterval(function(){ + $('#chart3').line('addData', [Math.round(Math.random()*500),Math.round(Math.random()*500)]); +}, 1000); +setInterval(function(){ + $('#chart4').line('addData', [Math.round(Math.random()*500),Math.round(Math.random()*500)]); +}, 1000); +} +</script> +</head> +<body onload="init()"> +<div> +<span class='cell'> + <div class="monitor"> + <div class="h1 grey">Processor</div> + <div class="c1 dark-grey bold"> + <span class="legend" style="border-color: #d9182d;">Used: 41%</span> + </div> + <div class="c1 light-grey">Maximum: 100%</div> + <div id="chart1" class='chart'></div> + </div> +</span> +<span class='cell'> + <div class="monitor"> + <div class="h1 grey">Memory</div> + <div class="c1 dark-grey bold"> + <span class="legend" style="border-color: #008abf;">Available: 49%</span> + </div> + <div class="c1 light-grey">Maximum: 280GB</div> + <div id="chart2" class='chart'></div> + </div> +</span> +</div> +<div> +<span class='cell'> + <div class="monitor"> + <div class="h1 grey">Storage IO</div> + <div class="c1 dark-grey bold"> + <span class="legend" style="border-color: #fdb813">Write: 6KB/S</span> + <span class="legend" style="border-color: #00a6a0">Read: 123KB/S</span> + </div> + <div class="c1 light-grey">Maximum: 79.04KB/S</div> + <div id="chart3" class='chart'></div> + </div> +</span> +<span class='cell'> + <div class="monitor"> + <div class="h1 grey">Network IO</div> + <div class="c1 dark-grey bold"> + <span class="legend" style="border-color: #561289">Received: 2KB/S</span> + <span class="legend" style="border-color: #238901">Sent: 1KB/S</span> + </div> + <div class="c1 light-grey">Maximum: 33.35KB/S</div> + <div id="chart4" class='chart'></div> + </div> +</span> +</div> +</body> +</html> -- 1.7.1
participants (3)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com -
Yu Xin Huo