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">
|
||||
<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/jquery.sparkline.min.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>
|
||||
strong {
|
||||
|
|
@ -34,7 +35,6 @@
|
|||
.sparkLineStats ul li {
|
||||
margin-bottom: 8px;
|
||||
line-height: 90px;
|
||||
padding-top: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -45,6 +45,11 @@
|
|||
.sparkLineStats ul li div:first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wellInside {
|
||||
background-color: #dedede;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.fg-dial-label {
|
||||
font-size: 100%;
|
||||
|
|
@ -102,25 +107,25 @@
|
|||
</div>
|
||||
<div class="panel-body">
|
||||
<!-- left column -->
|
||||
<div class="col-lg-9">
|
||||
<div class="col-lg-9 well">
|
||||
<!-- providers charts -->
|
||||
<div class="col-lg-6">
|
||||
<div class="sparkLineStats">
|
||||
<ul>
|
||||
<li><div class="sparkLineStatsToday1"></div><div id="line_today_graph1"></div><strong id="provider-today1">Graph 1</strong></li>
|
||||
<li><div class="sparkLineStatsToday2"></div><div id="line_today_graph2"></div><strong id="provider-today2">Graph 2</strong></li>
|
||||
<li><div class="sparkLineStatsToday3"></div><div id="line_today_graph3"></div><strong id="provider-today3">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="sparkLineStatsToday1"></div><div id="line_today_graph1"></div><strong id="providerToday1">Graph 1</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsToday2"></div><div id="line_today_graph2"></div><strong id="providerToday2">Graph 2</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsToday3"></div><div id="line_today_graph3"></div><strong id="providerToday3">Graph 3</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsToday4"></div><div id="line_today_graph4"></div><strong id="providerToday4">Graph 4</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="sparkLineStats">
|
||||
<ul>
|
||||
<li><div class="sparkLineStatsToday6"></div><div id="line_today_graph5"></div><strong id="provider-today5">Graph 5</strong></li>
|
||||
<li><div class="sparkLineStatsToday7"></div><div id="line_today_graph6"></div><strong id="provider-today6">Graph 6</strong></li>
|
||||
<li><div class="sparkLineStatsToday8"></div><div id="line_today_graph7"></div><strong id="provider-today7">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="sparkLineStatsToday6"></div><div id="line_today_graph5"></div><strong id="providerToday5">Graph 5</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsToday7"></div><div id="line_today_graph6"></div><strong id="providerToday6">Graph 6</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsToday8"></div><div id="line_today_graph7"></div><strong id="providerToday7">Graph 7</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsToday9"></div><div id="line_today_graph8"></div><strong id="providerToday8">Graph 8</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,12 +133,16 @@
|
|||
<!-- right column -->
|
||||
<div class="col-lg-3">
|
||||
<div class="well text-center" style="padding: 0px;">
|
||||
<strong>Mood value</strong>
|
||||
<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 class="well text-center" style="padding: 0px;">
|
||||
<strong>Mood value</strong>
|
||||
<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>
|
||||
<!-- /.row -->
|
||||
|
|
@ -158,25 +167,25 @@
|
|||
</div>
|
||||
<div class="panel-body">
|
||||
<!-- left column -->
|
||||
<div class="col-lg-9">
|
||||
<div class="col-lg-9 well">
|
||||
<!-- providers charts -->
|
||||
<div class="col-lg-6">
|
||||
<div class="sparkLineStats">
|
||||
<ul>
|
||||
<li><div class="sparkLineStatsWeek1"></div><div id="line_week_graph1"></div><strong id="provider-today1">Graph 1</strong></li>
|
||||
<li><div class="sparkLineStatsWeek2"></div><div id="line_week_graph2"></div><strong id="provider-today2">Graph 2</strong></li>
|
||||
<li><div class="sparkLineStatsWeek3"></div><div id="line_week_graph3"></div><strong id="provider-today3">Graph 3</strong></li>
|
||||
<li><div class="sparkLineStatsWeek4"></div><div id="line_week_graph4"></div><strong id="provider-today4">Graph 4</strong></li>
|
||||
</ul>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek1"></div><div id="line_week_graph1"></div><strong id="providerWeek1">Graph 1</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek2"></div><div id="line_week_graph2"></div><strong id="providerWeek2">Graph 2</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek3"></div><div id="line_week_graph3"></div><strong id="providerWeek3">Graph 3</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek4"></div><div id="line_week_graph4"></div><strong id="providerWeek4">Graph 4</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="sparkLineStats">
|
||||
<ul>
|
||||
<li><div class="sparkLineStatsWeek6"></div><div id="line_week_graph5"></div><strong id="provider-today5">Graph 5</strong></li>
|
||||
<li><div class="sparkLineStatsWeek7"></div><div id="line_week_graph6"></div><strong id="provider-today6">Graph 6</strong></li>
|
||||
<li><div class="sparkLineStatsWeek8"></div><div id="line_week_graph7"></div><strong id="provider-today7">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="sparkLineStatsWeek5"></div><div id="line_week_graph5"></div><strong id="providerWeek5">Graph 5</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek6"></div><div id="line_week_graph6"></div><strong id="providerWeek6">Graph 6</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek7"></div><div id="line_week_graph7"></div><strong id="providerWeek7">Graph 7</strong></li>
|
||||
<li class="well wellInside"><div class="sparkLineStatsWeek8"></div><div id="line_week_graph8"></div><strong id="providerWeek8">Graph 8</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -184,6 +193,7 @@
|
|||
<!-- right column -->
|
||||
<div class="col-lg-3">
|
||||
<div class="well text-center" style="padding: 0px;">
|
||||
<strong>Mood value</strong>
|
||||
<div id="gauge_week"></div>
|
||||
</div>
|
||||
<div class="well text-center" style="padding: 0px;">
|
||||
|
|
|
|||
Loading…
Reference in New Issue