3:23 a.m.
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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