Skip to content

Instantly share code, notes, and snippets.

@voidw0rd

voidw0rd/dashboard.html

Created January 23, 2012 09:50
Show Gist options
  • Save voidw0rd/1662136 to your computer and use it in GitHub Desktop.
Save voidw0rd/1662136 to your computer and use it in GitHub Desktop.
Download ZIP
javascript OO
Raw
dashboard.html
<html>
<head>
<title>mOSAIC Web UI</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://194.102.63.56:8888/js/highcharts.js"></script>
<script type="text/javascript" src="http://194.102.63.56:8888/js/modules/exporting.js"></script>
<!-- <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
var x = {
"title": "Test dashboard title",
"subtitle": "Test dashboard subtitle",
"description": "Test dashboard description",
"sections" : [
{
"title": "1st section title",
"subtitle": "1st section subtitle",
"description": "1st section description",
"uid": "aaa",
"charts": [
{
"title": "1st chart",
"subtitle": "1st subtitle",
"uid": "111",
"description": "1st chart description",
"definition": "http://host.com/charts/111/",
"width": 4.0,
"height": 1.0,
"cssClass": "chartCss",
},
{
"title": "2st chart",
"subtitle": "2st subtitle",
"uid": "222",
"description": "2st chart description",
"definition": "http://host.com/charts/222/",
"width": 4.0,
"height": 1.0,
"cssClass": "chartCss",
"type": "bar",
},
{
"title": "3st chart",
"subtitle": "3st subtitle",
"uid": "9999",
"description": "1st chart description",
"definition": "http://host.com/charts/111/",
"width": 4.0,
"height": 1.0,
"cssClass": "chartCss"
},
],
"links": [
{
"label": "home",
"description": "home page",
"url": "http://host.com/"
}
]
},
{
"title": "2st section title",
"subtitle": "2st section subtitle",
"description": "2st section description",
"charts": [
{
"title": "33st chart",
"subtitle": "33st subtitle",
"uid": "aayy",
"description": "3st chart description",
"definition": "http://host.com/charts/333/",
"width": 4.0,
"height": 1.0,
"cssClass": "chartCsss"
},{
"title": "33st chart",
"subtitle": "33st subtitle",
"uid": "aaxx",
"description": "3st chart description",
"definition": "http://host.com/charts/333/",
"width": 4.0,
"height": 1.0,
"cssClass": "chartCsss"
}
],
"links": [
{
"label": "home",
"description": "home page",
"url": "http://host.com/"
}
]
}
],
"links": [
{
"label": "home",
"description": "home page",
"url": "http://host.com/"
}
]
}
var dash = new Dashboard(x);
console.log(dash.sections);
dash.renderHtml($("#dash"));
function Dashboard(data){
this.title = data['title'];
this.subtitle = data['subtitle'];
this.description = data['description'];
this.links = data['links'];
this.sections = undefined;
this.addSection = function(obj) {
var container = [];
$.each(obj, function(index, value) {
//var section = new Section(value);
container.push(new Section(value));
});
this.sections = container;
};
this.renderHtml = function(element) {
$.each(this.sections, function(index, value){
element.append(value.html);
});
$.each(dash.sections, function(i, x){
$.each(x.charts, function(index, item){
item.chart();
});
});
};
// init zone ...
this.addSection(data['sections']);
};
function Section(data) {
var self = this;
this.title = data['title'];
this.subtitle = data['subtitle'];
this.description = data['description'];
this.uid = data['uid'];
this.charts = undefined;
this.addCharts = function(obj) {
var container = [];
$.each(obj, function(index, value) {
var chart = new Chart(value);
container.push(chart);
});
this.charts = container;
};
this.html = undefined;
this.to_html = function() {
var section = $("<div/>", {
"class": "section",
"id": this.uid,
click: function() {
$.each(self.charts, function(index, value){
value.hide();
});
$(this).animate({
height: 50
}, 1000, function(){
$(this).children("p").removeClass("hide");
});
}
});
var secTitle = $("<div/>", {
"class": "section_title",
});
var title = $("<p/>", {
"class": "section_title_text",
text: this.title
})
secTitle.append(title);
section.append(secTitle);
$.each(this.charts, function(index, value){
section.append($("<div/>", {
"class": "chart",
"id": value.uid
}));
});
section.append($("<div/>", {"class": "clr"}));
section.append($("<p/>", {
text: this.description,
"class": "hide desc",
}));
this.html = section;
};
this.startPooling = function() {
$.each(this.charts, function(index, value){
value.startPooling();
});
};
this.stopPooling = function() {
$.each(this.charts, function(index, value){
value.stopPooling();
});
};
// init zone ...
this.addCharts(data['charts']);
this.to_html();
};
function Chart(data) {
this.type = data['type'];
var self = this; // js trick ...
this.title = data['title'];
this.subtitle = data['subtitle'];
this.description = data['description'];
this.definition = data['definition'];
this.uid = data['uid'];
this.css = data['cssClass']
this.to_html = function() {
return $("<div/>", {
"class": "chart",
"id": this.uid
});
};
this.pooling = 1000; // default value of 5 sec...
this.setPooling = function(interval) {this.pooling = interval;};
this.timmer = undefined;
this.startPooling = function() {
if(this.timmer) {
clearInterval(this.timmer);
}
this.timmer = setInterval(function(){
console.log(self.title);
}, this.pooling);
};
this.stopPooling = function() {
clearInterval(this.timmer);
this.timmer = undefined;
}
this.hide = function() {
$("#" + this.uid).fadeOut();
};
this.chart = function() {
if (this.type) {
return BarChart(this);
}
return new LineChart(this);
};
}
//////////////////////////////////////////////////////
function gen() {
var n = Math.floor((6000-4000)*Math.random()) + 2200;
console.log(n);
return n;
}
function refresh(chart) {
var series = chart.series[0],
shift = series.data.length > 9,
s2 = chart.series[1],
sh2 = s2.data.length > 9,
s3 = chart.series[2],
sh3 = s3.data.length > 9,
s4 = chart.series[2],
sh4 = s3.data.length > 9;
//chart.series[0].xAxis.categories.push("a");
chart.series[0].addPoint(Math.floor(Math.random()*101), true, shift);
chart.series[1].addPoint(Math.floor(Math.random()*101), true, shift);
chart.series[2].addPoint(Math.floor(Math.random()*101), true, shift);
chart.series[3].addPoint(Math.floor(Math.random()*101), true, shift);
setTimeout(function(){
refresh(chart);
}, gen());
}
function refresh2(chart) {
var series = chart.series[0],
shift = series.data.length > 1,
s2 = chart.series[1],
sh2 = s2.data.length > 1;
//chart.series[0].xAxis.categories.push("a");
chart.series[0].addPoint(Math.floor(Math.random()*101), true, shift);
chart.series[1].addPoint(Math.floor(Math.random()*101), true, shift);
setTimeout(function(){
refresh2(chart);
}, gen());
}
//////////////////////////////////////////////////////
function LineChart(chart) {
var lineChart = new Highcharts.Chart({
chart: {
animation: false,
renderTo: chart.uid,
defaultSeriesType: 'line',
marginRight: 85,
marginBottom: 30,
backgroundColor: "#fff",
borderColor: "#999",
borderWidth: 0,
className: chart.css,
plotShadow: false, // default false
plotBackgroundColor: "#f1f1f1",
events: {
load: function() {
refresh(this);
},
}
},
title: {
text: chart.title,//'mOSAIC Web UI Test Interface',
x: -20 //center
},
subtitle: {
text: chart.subtitle,//'http://mosaic-cloud.eu/',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Test Metrics'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'%';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Dummy',
data: [1],
},{
name: 'aaa',
data: [10]
},{
name: 'bbb',
data: [20]
},{
name: 'ccc',
data: [30]
}]
});
}
function BarChart(chart) {
var barChart = new Highcharts.Chart({
chart: {
animation: false,
renderTo: chart.uid,
defaultSeriesType: 'column',
marginRight: 85,
marginBottom: 30,
backgroundColor: "#fff",
borderColor: "#999",
borderWidth: 0,
className: chart.css,
plotShadow: false, // default false
plotBackgroundColor: "#f1f1f1",
events: {
load: function() {
refresh2(this);
},
}
},
title: {
text: chart.title,//'mOSAIC Web UI Test Interface',
x: -20 //center
},
subtitle: {
text: chart.subtitle,//'http://mosaic-cloud.eu/',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
align: 'right',
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min: 0,
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'%';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Dummy',
data: [1],
},{
name: 'aaa',
data: [10]
}]
});
}
});
</script>
<style>
#btn { width: 100px; height: 26px; margin-left: 50px; margin-top: 4px;
background-color: #ccc; border: 1px solid #eee; color: #000;
border-radius: 4px;}
ul.dropdown { position: relative; }
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
color: #222; }
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background: #888; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: -157; }
ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000;
border-bottom: 1px solid #ccc; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
#menu { position: relative; top: -13px; float: right; width: 28.8%;}
body { background-color: #fefefe; margin: 0px; padding: 0px; }
a { text-decoration: none; }
ul { list-style: none; }
#top { background-color: #333; width: 100%; height: 35px; box-shadow: 0 0 15px #000; }
#dash { background-color: #f0f0f0; width: 900px; min-height: 500px;
border-radius: 10px; margin: auto; margin-top: 30px;
box-shadow: 0 0 10px #888; border: 1px solid #aaa;
padding-bottom: 20px; }
.section { background-color: #fff; width: 94%;
margin: auto; margin-top: 20px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border: 1px solid #ddd;
box-shadow: inner 0 0 50px #000;
-webkit-box-shadow: inset 0 0 15px #ddd;}
.section_title { background-color: #999; width: 848px; height: 25px;
border-top-left-radius: 5px; border-top-right-radius: 5px;
border: 1px solid #ccc; border-bottom: 0px;
margin-left: -2px; margin-top: -2px;}
.section_title_text { margin-left: 30px; margin-top: 4px; color: #fff;}
.chart { background-color: #f0f0f0; width: 820px; height: 400px;
margin-top: 10px; margin-bottom: 10px; border-radius: 7px;
float: right; margin-right: 15px; border-top-left-radius: 0px;
border-bottom-left-radius: 0px; }
.clr { clear: both; }
.hide { opacity: 0; }
.desc { margin: auto; margin-left: 50px; text-transform: uppercase; letter-spacing: 10px;
color: #aaa; margin-top: 3px;}
.chartCss { box-shadow: 0 0 5px #777; border-radius: 5px; border: solid 1px #999; }
.chartCsss { box-shadow: 0 0 5px blue; border-radius: 5px; border: solid 1px #999; }
</style>
</head>
<body>
<div id="top">
<button id="btn">- ADD -</button>
<div id="menu">
<ul class="dropdown">
<li><a href="#">menus: </a>
<ul class="sub_menu">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</li>
<ul/>
</div>
</div>
<div id="dash">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment