Separated options from the plot funcion for sparkline.

This commit is contained in:
Mokaddem 2016-08-11 17:57:23 +02:00
parent 98c4cacb98
commit c028ca80da
2 changed files with 140 additions and 37 deletions

View file

@ -15,7 +15,7 @@ from Helper import Process
from packages import Paste
# Config Var
max_set_cardinality = 7
max_set_cardinality = 8
def get_date_range(num_day):
curr_date = datetime.date.today()

View file

@ -33,7 +33,7 @@
.sparkLineStats ul li {
margin-bottom: 8px;
line-height: 60px;
line-height: 90px;
padding-top: 3px;
font-size: 12px;
}
@ -53,6 +53,7 @@
position: relative;
text-align: center;
top: -60px;
margin-bottom: -10px;
width: 100%;
}
</style>
@ -106,22 +107,20 @@
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStats1"></div><strong>Graph 1</strong></li>
<li><div class="sparkLineStats2"></div><strong>Graph 2</strong></li>
<li><div class="sparkLineStats3"></div><strong>Graph 3</strong></li>
<li><div class="sparkLineStats4"></div><strong>Graph 4</strong></li>
<li><div class="sparkLineStats5"></div><strong>Graph 5</strong></li>
<li><div class="sparkLineStatsToday1"></div><strong>Graph 1</strong></li>
<li><div class="sparkLineStatsToday2"></div><strong>Graph 2</strong></li>
<li><div class="sparkLineStatsToday3"></div><strong>Graph 3</strong></li>
<li><div class="sparkLineStatsToday4"></div><strong>Graph 4</strong></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStats1"></div><strong>Graph 1</strong></li>
<li><div class="sparkLineStats2"></div><strong>Graph 2</strong></li>
<li><div class="sparkLineStats3"></div><strong>Graph 3</strong></li>
<li><div class="sparkLineStats4"></div><strong>Graph 4</strong></li>
<li><div class="sparkLineStats5"></div><strong>Graph 5</strong></li>
<li><div class="sparkLineStatsToday6"></div><strong>Graph 1</strong></li>
<li><div class="sparkLineStatsToday7"></div><strong>Graph 2</strong></li>
<li><div class="sparkLineStatsToday8"></div><strong>Graph 3</strong></li>
<li><div class="sparkLineStatsToday9"></div><strong>Graph 4</strong></li>
</ul>
</div>
</div>
@ -146,8 +145,87 @@
</div>
</div>
<!-- Pannel LAST X DAYS -->
<!-- Pannel WEEK -->
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div id="panel-week" class="panel panel-default">
<div class="panel-heading">
<strong>Week's mood</strong>
</div>
<div class="panel-body">
<!-- left column -->
<div class="col-lg-9">
<!-- providers charts -->
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStatsWeek1"></div><strong>Graph 1</strong></li>
<li><div class="sparkLineStatsWeek2"></div><strong>Graph 2</strong></li>
<li><div class="sparkLineStatsWeek3"></div><strong>Graph 3</strong></li>
<li><div class="sparkLineStatsWeek4"></div><strong>Graph 4</strong></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStatsWeek6"></div><strong>Graph 1</strong></li>
<li><div class="sparkLineStatsWeek7"></div><strong>Graph 2</strong></li>
<li><div class="sparkLineStatsWeek8"></div><strong>Graph 3</strong></li>
<li><div class="sparkLineStatsWeek9"></div><strong>Graph 4</strong></li>
</ul>
</div>
</div>
</div>
<!-- right column -->
<div class="col-lg-3">
<div class="well text-center" style="padding: 0px;">
<div id="gauge_week"></div>
</div>
<div class="well text-center" style="padding: 0px;">
<table class="table table-striped table-bordered table-hover" id="myTable">
<thead>
<tr>
<th>Worst mood</th>
<th>Best mood</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pastebin</td>
<td>Ideone</td>
</tr>
<tr>
<td>Pastebin</td>
<td>Ideone</td>
</tr>
<tr>
<td>Pastebin</td>
<td>Ideone</td>
</tr>
<tr>
<td>Pastebin</td>
<td>Ideone</td>
</tr>
<tr>
<td>Pastebin</td>
<td>Ideone</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.panel-body -->
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.panel -->
</div>
</div>
@ -171,7 +249,7 @@
animateEasing: true,
elementWidth: 200,
elementHeight: 150,
elementHeight: 125,
arcFillStart: 10,
arcFillEnd: 12,
@ -187,39 +265,35 @@
};
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';
console.log(gaugeOptions);
var gauge_today_last_hour = new FlexGauge(gaugeOptions);
gaugeOptions2.appendTo = '#gauge_today_last_days';
gaugeOptions2.dialLabel = 'Today';
gaugeOptions2.elementId = 'gauge2';
console.log(gaugeOptions2);
var gauge_today_last_days = new FlexGauge(gaugeOptions2);
gaugeOptions3.appendTo = '#gauge_week';
gaugeOptions3.dialLabel = 'Week';
gaugeOptions3.elementId = 'gauge3';
var gauge_today_last_days = new FlexGauge(gaugeOptions3);
/* ---------- Sparkline Charts ---------- */
//generate random number for charts
randNum = function(){
//return Math.floor(Math.random()*101);
return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
}
var chartColours = ['#2FABE9', '#FA5833', '#b9e672', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
//sparklines (making loop with random data for all 7 sparkline)
i=1;
for (i=1; i<9; i++) {
var data = [[1, 3+randNum()], [2, 5+randNum()], [3, 8+randNum()], [4, 11+randNum()],[5, 14+randNum()],[6, 17+randNum()],[7, 20+randNum()], [8, 15+randNum()], [9, 18+randNum()], [10, 22+randNum()]];
placeholder = '.sparkLineStats' + i;
$(placeholder).sparkline(data, {
width: 200,//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: 60,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
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)
lineColor: '#2FABE9',//Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
fillColor: '#f2f7f9',//Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
spotColor: '#467e8c',//The CSS colour of the final value marker. Set to false or an empty string to hide it
@ -227,11 +301,40 @@
minSpotColor: '#FA5833',//The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
spotRadius: 2,//Radius of all spot markers, In pixels (default: 1.5) - Integer
lineWidth: 1//In pixels (default: 1) - Integer
});
}
};
//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 chartColours = ['#2FABE9', '#FA5833', '#b9e672', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];
//sparklines (making loop with random data for all 10 sparkline)
i=1;
for (i=1; i<10; i++) {
var data = [[1, 3+randNum()], [2, 5+randNum()], [3, 8+randNum()], [4, 11+randNum()],[5, 14+randNum()],[6, 17+randNum()],[7, 20+randNum()], [8, 15+randNum()], [9, 18+randNum()], [10, 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 = [[1, 3+randNum()], [2, 5+randNum()], [3, 8+randNum()], [4, 11+randNum()],[5, 14+randNum()],[6, 17+randNum()],[7, 20+randNum()], [8, 15+randNum()], [9, 18+randNum()], [10, 22+randNum()]];
placeholder = '.sparkLineStatsWeek' + i;
$(placeholder).sparkline(data, sparklineOptions);
}