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