5:23 p.m.
From: Yu Xin Huo <huoyuxin(a)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
5:23 p.m.
New subject: [v2 1/2] UI: Line Chart Widget
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
5:23 p.m.
New subject: [v2 2/2] UI: Line Chart Sample
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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
3712
days inactive
3716
days old
4 comments
3 participants
participants (3)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com -
Yu Xin Huo