mirror of https://github.com/CIRCL/AIL-framework
Modified webpage display and added js.
Mokaddem
parent
9c3b573af2
commit
0431ecf434
|
|
@ -0,0 +1,140 @@
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------- Gauge ---------------- */
|
||||||
|
var gaugeOptions = {
|
||||||
|
animateEasing: true,
|
||||||
|
|
||||||
|
elementWidth: 200,
|
||||||
|
elementHeight: 125,
|
||||||
|
|
||||||
|
arcFillStart: 10,
|
||||||
|
arcFillEnd: 12,
|
||||||
|
arcFillTotal: 20,
|
||||||
|
incTot: 1.0,
|
||||||
|
|
||||||
|
arcBgColorLight: 200,
|
||||||
|
arcBgColorSat: 0,
|
||||||
|
arcStrokeFg: 20,
|
||||||
|
arcStrokeBg: 30,
|
||||||
|
|
||||||
|
colorArcFg: '#FF3300',
|
||||||
|
animateSpeed: 1,
|
||||||
|
|
||||||
|
};
|
||||||
|
// Clone object
|
||||||
|
var gaugeOptions2 = jQuery.extend(true, {}, gaugeOptions);
|
||||||
|
var gaugeOptions3 = jQuery.extend(true, {}, gaugeOptions);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
gaugeOptions.appendTo = '#gauge_today_last_hour';
|
||||||
|
gaugeOptions.dialLabel = 'Last hour';
|
||||||
|
gaugeOptions.elementId = 'gauge1';
|
||||||
|
gaugeOptions.inc = -0.7;
|
||||||
|
var gauge_today_last_hour = new FlexGauge(gaugeOptions);
|
||||||
|
|
||||||
|
gaugeOptions2.appendTo = '#gauge_today_last_days';
|
||||||
|
gaugeOptions2.dialLabel = 'Today';
|
||||||
|
gaugeOptions2.elementId = 'gauge2';
|
||||||
|
gaugeOptions2.inc = 0.4;
|
||||||
|
var gauge_today_last_days = new FlexGauge(gaugeOptions2);
|
||||||
|
|
||||||
|
gaugeOptions3.appendTo = '#gauge_week';
|
||||||
|
gaugeOptions3.dialLabel = 'Week';
|
||||||
|
gaugeOptions3.elementId = 'gauge3';
|
||||||
|
gaugeOptions3.inc = -0.3;
|
||||||
|
var gauge_today_last_days = new FlexGauge(gaugeOptions3);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------- Sparkline Charts ---------- */
|
||||||
|
//generate random number for charts
|
||||||
|
randNum = function(){
|
||||||
|
var num = Math.random();
|
||||||
|
if(num > 0.5)
|
||||||
|
num = -1+num;
|
||||||
|
console.log(Math.floor(num*101));
|
||||||
|
return Math.floor(num*101);
|
||||||
|
//return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var sparklineOptions = {
|
||||||
|
width: 250,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
|
||||||
|
height: 80,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
|
||||||
|
type: 'bar',
|
||||||
|
barSpacing: 0,
|
||||||
|
barWidth: 10,
|
||||||
|
barColor: '#00bf5f',
|
||||||
|
negBarColor: '#f22929',
|
||||||
|
zeroColor: '#ffff00'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
//sparklines (making loop with random data for all 10 sparkline)
|
||||||
|
i=1;
|
||||||
|
for (i=1; i<10; i++) {
|
||||||
|
var data = [3+randNum(), 5+randNum(), 8+randNum(), 11+randNum(),14+randNum(),17+randNum(),20+randNum(),15+randNum(),18+randNum(),22+randNum()];
|
||||||
|
placeholder = '.sparkLineStatsToday' + i;
|
||||||
|
|
||||||
|
$(placeholder).sparkline(data, sparklineOptions);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//sparklines (making loop with random data for all 10 sparkline)
|
||||||
|
i=1;
|
||||||
|
for (i=1; i<10; i++) {
|
||||||
|
var data = [3+randNum(), 5+randNum(), 8+randNum(), 11+randNum(),14+randNum(),17+randNum(),20+randNum(),15+randNum(),18+randNum(),22+randNum()];
|
||||||
|
placeholder = '.sparkLineStatsWeek' + i;
|
||||||
|
|
||||||
|
$(placeholder).sparkline(data, sparklineOptions);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------- CanvasJS ------------ */
|
||||||
|
var options_canvasJS = {
|
||||||
|
|
||||||
|
animationEnabled: true,
|
||||||
|
axisY: {
|
||||||
|
tickThickness: 0,
|
||||||
|
lineThickness: 0,
|
||||||
|
valueFormatString: " ",
|
||||||
|
gridThickness: 0
|
||||||
|
},
|
||||||
|
axisX: {
|
||||||
|
tickThickness: 0,
|
||||||
|
lineThickness: 0,
|
||||||
|
labelFontSize: 0.1,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
color: "green",
|
||||||
|
dataPoints: [
|
||||||
|
{y: 25}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
color: "red",
|
||||||
|
dataPoints: [
|
||||||
|
{y: -13}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
var chart_canvas1 = new CanvasJS.Chart("bar_today_last_hour", options_canvasJS);
|
||||||
|
var chart_canvas2 = new CanvasJS.Chart("bar_today_last_days", options_canvasJS);
|
||||||
|
|
||||||
|
chart_canvas1.render();
|
||||||
|
chart_canvas2.render();
|
||||||
|
|
||||||
|
|
@ -13,8 +13,9 @@
|
||||||
<link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
|
<link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
|
||||||
<script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
|
<script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/jquery.sparkline.min.js') }}"></script>
|
|
||||||
<script src="{{ url_for('static', filename='js/FlexGauge.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/FlexGauge.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/jquery.sparkline.min.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/jquery.canvasjs.min.js') }}"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
strong {
|
strong {
|
||||||
|
|
@ -34,7 +35,6 @@
|
||||||
.sparkLineStats ul li {
|
.sparkLineStats ul li {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
padding-top: 3px;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -46,6 +46,11 @@
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wellInside {
|
||||||
|
background-color: #dedede;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.fg-dial-label {
|
.fg-dial-label {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -102,25 +107,25 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<!-- left column -->
|
<!-- left column -->
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9 well">
|
||||||
<!-- providers charts -->
|
<!-- providers charts -->
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<div class="sparkLineStats">
|
<div class="sparkLineStats">
|
||||||
<ul>
|
<ul>
|
||||||
<li><div class="sparkLineStatsToday1"></div><div id="line_today_graph1"></div><strong id="provider-today1">Graph 1</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday1"></div><div id="line_today_graph1"></div><strong id="providerToday1">Graph 1</strong></li>
|
||||||
<li><div class="sparkLineStatsToday2"></div><div id="line_today_graph2"></div><strong id="provider-today2">Graph 2</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday2"></div><div id="line_today_graph2"></div><strong id="providerToday2">Graph 2</strong></li>
|
||||||
<li><div class="sparkLineStatsToday3"></div><div id="line_today_graph3"></div><strong id="provider-today3">Graph 3</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday3"></div><div id="line_today_graph3"></div><strong id="providerToday3">Graph 3</strong></li>
|
||||||
<li><div class="sparkLineStatsToday4"></div><div id="line_today_graph4"></div><strong id="provider-today4">Graph 4</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday4"></div><div id="line_today_graph4"></div><strong id="providerToday4">Graph 4</strong></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<div class="sparkLineStats">
|
<div class="sparkLineStats">
|
||||||
<ul>
|
<ul>
|
||||||
<li><div class="sparkLineStatsToday6"></div><div id="line_today_graph5"></div><strong id="provider-today5">Graph 5</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday6"></div><div id="line_today_graph5"></div><strong id="providerToday5">Graph 5</strong></li>
|
||||||
<li><div class="sparkLineStatsToday7"></div><div id="line_today_graph6"></div><strong id="provider-today6">Graph 6</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday7"></div><div id="line_today_graph6"></div><strong id="providerToday6">Graph 6</strong></li>
|
||||||
<li><div class="sparkLineStatsToday8"></div><div id="line_today_graph7"></div><strong id="provider-today7">Graph 7</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday8"></div><div id="line_today_graph7"></div><strong id="providerToday7">Graph 7</strong></li>
|
||||||
<li><div class="sparkLineStatsToday9"></div><div id="line_today_graph8"></div><strong id="provider-today8">Graph 8</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsToday9"></div><div id="line_today_graph8"></div><strong id="providerToday8">Graph 8</strong></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -128,12 +133,16 @@
|
||||||
<!-- right column -->
|
<!-- right column -->
|
||||||
<div class="col-lg-3">
|
<div class="col-lg-3">
|
||||||
<div class="well text-center" style="padding: 0px;">
|
<div class="well text-center" style="padding: 0px;">
|
||||||
|
<strong>Mood value</strong>
|
||||||
<div id="gauge_today_last_hour"></div>
|
<div id="gauge_today_last_hour"></div>
|
||||||
<div id="bar_today_last_hour"></div>
|
<strong>Compound by mood</strong>
|
||||||
|
<div id="bar_today_last_hour" style="height: 70px; width: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="well text-center" style="padding: 0px;">
|
<div class="well text-center" style="padding: 0px;">
|
||||||
|
<strong>Mood value</strong>
|
||||||
<div id="gauge_today_last_days"></div>
|
<div id="gauge_today_last_days"></div>
|
||||||
<div id="bar_today_last_hour"></div>
|
<strong>Compound by mood</strong>
|
||||||
|
<div id="bar_today_last_days" style="height: 70px; width: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.row -->
|
<!-- /.row -->
|
||||||
|
|
@ -158,25 +167,25 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<!-- left column -->
|
<!-- left column -->
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9 well">
|
||||||
<!-- providers charts -->
|
<!-- providers charts -->
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<div class="sparkLineStats">
|
<div class="sparkLineStats">
|
||||||
<ul>
|
<ul>
|
||||||
<li><div class="sparkLineStatsWeek1"></div><div id="line_week_graph1"></div><strong id="provider-today1">Graph 1</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek1"></div><div id="line_week_graph1"></div><strong id="providerWeek1">Graph 1</strong></li>
|
||||||
<li><div class="sparkLineStatsWeek2"></div><div id="line_week_graph2"></div><strong id="provider-today2">Graph 2</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek2"></div><div id="line_week_graph2"></div><strong id="providerWeek2">Graph 2</strong></li>
|
||||||
<li><div class="sparkLineStatsWeek3"></div><div id="line_week_graph3"></div><strong id="provider-today3">Graph 3</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek3"></div><div id="line_week_graph3"></div><strong id="providerWeek3">Graph 3</strong></li>
|
||||||
<li><div class="sparkLineStatsWeek4"></div><div id="line_week_graph4"></div><strong id="provider-today4">Graph 4</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek4"></div><div id="line_week_graph4"></div><strong id="providerWeek4">Graph 4</strong></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<div class="sparkLineStats">
|
<div class="sparkLineStats">
|
||||||
<ul>
|
<ul>
|
||||||
<li><div class="sparkLineStatsWeek6"></div><div id="line_week_graph5"></div><strong id="provider-today5">Graph 5</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek5"></div><div id="line_week_graph5"></div><strong id="providerWeek5">Graph 5</strong></li>
|
||||||
<li><div class="sparkLineStatsWeek7"></div><div id="line_week_graph6"></div><strong id="provider-today6">Graph 6</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek6"></div><div id="line_week_graph6"></div><strong id="providerWeek6">Graph 6</strong></li>
|
||||||
<li><div class="sparkLineStatsWeek8"></div><div id="line_week_graph7"></div><strong id="provider-today7">Graph 7</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek7"></div><div id="line_week_graph7"></div><strong id="providerWeek7">Graph 7</strong></li>
|
||||||
<li><div class="sparkLineStatsWeek9"></div><div id="line_week_graph8"></div><strong id="provider-today8">Graph 8</strong></li>
|
<li class="well wellInside"><div class="sparkLineStatsWeek8"></div><div id="line_week_graph8"></div><strong id="providerWeek8">Graph 8</strong></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -184,6 +193,7 @@
|
||||||
<!-- right column -->
|
<!-- right column -->
|
||||||
<div class="col-lg-3">
|
<div class="col-lg-3">
|
||||||
<div class="well text-center" style="padding: 0px;">
|
<div class="well text-center" style="padding: 0px;">
|
||||||
|
<strong>Mood value</strong>
|
||||||
<div id="gauge_week"></div>
|
<div id="gauge_week"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="well text-center" style="padding: 0px;">
|
<div class="well text-center" style="padding: 0px;">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue