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