Merge branch 'feature/yasgrafiekdivmeter' into develop

This commit is contained in:
Monique
2021-12-09 16:47:51 +01:00
3 changed files with 216 additions and 77 deletions
+2
View File
@@ -21,6 +21,8 @@
<link href="<?= base_url() ?>css_lib/jquery.contextMenu.css" rel="stylesheet" type="text/css"/>
<script src="<?= base_url() ?>js_lib/jquery.contextMenu.js" type="text/javascript"></script>
<script src="<?= base_url() ?>js_lib/Highcharts/code/highcharts.js"></script>
<script src="<?= base_url() ?>js_lib/Highcharts/code/highcharts-3d.js"></script>
<script src="<?= base_url() ?>js_lib/Highcharts/code/highcharts-more.js"></script>
<!-- Include Froala Editor style. -->
@@ -2,8 +2,8 @@
<div class="row" data-bind="visible: groepen().length <=0">
Er zijn (nog) geen groepsgegevens ingevoerd.
</div>
<div class="row" data-bind="visible: groepen().length > 0">
<h4>Diversiteitomvang
<div class="row" data-bind="visible: groepen().length > 0 && schooldiversiteit() > 0">
<h4>Diversiteitomvang
<button class="printer" style="margin-left: 30px" data-bind="click: fPrintDiversiteitMatrix"></button>
</h4>
<table>
@@ -136,16 +136,21 @@
<p> Groep 1-2: <span data-bind="text: normaantallen()[0]"></span></p>
<p> Groep 3-8: <span data-bind="text:normaantallen()[1]"></span></p>
<hr/>
<h4 style="margin-top :40px"> Diversiteitsquoti&#235;nt per groep
<button class="printer" style="margin-left: 30px" data-bind="click: fPrintDiversiteitBar"></button>
</h4>
<div style="position:relative; width: 590px; height: 290px;" id="diversiteitcanvasholder">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 col-md-6">
<button class="printer" style="float: right; margin-right: 20px;" data-bind="click: fPrintDiversiteitBar"></button>
</div>
</div>
<div class="col-sm-12 col-md-6">
<canvas data-bind="attr:{'id': 'cdiversiteit'}" height= "285" width="580" style="margin-top:5px; "> </canvas>
</div>
<p style="margin-left: 250px"> Groep</p>
<hr/>
<div id="dqpergroep" style="width: 100%"></div>
</div>
<div class="col-sm-12 col-md-6">
<div id="dqpergroep3d" style="width: 100%"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h4> Leerlingaantallen
@@ -195,8 +195,11 @@ ls.initDiversiteitModel = function(module){
// }
self.schooldiversiteit(self.schooldiversiteit() + parseFloat(p.som1) + (parseFloat(p.som2) *1.5) + (parseFloat(p.som3) * 2) + (parseFloat(p.som4) *4) + parseFloat(combiwaarde));
self.schooldiversiteit(self.schooldiversiteit() + parseFloat(p.som1) + (parseFloat(p.som2) *1.5) + (parseFloat(p.som3) * 2) + (parseFloat(p.som4) *4));
if(Number(self.schooldiversiteit() > 0 && combiwaarde > 0)) {
self.schooldiversiteit(self.schooldiversiteit + combiwaarde)}
self.schoolTijd (parseInt(self.schoolTijd()) + parseInt(p.tottijdInt()));
gewogensom = gewogensom + parseInt(p.factor);
if (p.tijden){
@@ -211,8 +214,15 @@ ls.initDiversiteitModel = function(module){
}; // if p.tijden
}); // each
if(Number(self.schooldiversiteit()=== 0)) {
apprise('geen ondersteuning gevonden');
return;
}
self.schoolDQ(Math.round((self.schooldiversiteit() / gewogensom) * 100 ) / 100);
var minuten = self.schoolTijd() % 60;
var uur = (self.schoolTijd() - minuten) / 60;
@@ -249,85 +259,207 @@ ls.initDiversiteitModel = function(module){
}; // if data
self.fFillGraph();
},'json');
}; // if data
},'json');
},'json'); // get aantallen
},
fFillGraph: function(){
fFillGraph(){
var self = ls.DiversiteitModel;
var scores =[];
var slabels =[];
var scores= [];
var labels = [];
var counter = 0;
// var aantalgroepen = self.groepen().length + 1;
// var bartussenruimte = (580 - (80 * aantalgroepen))/aantalgroepen ;
// if (bartussenruimte <=0 ) bartussenruimte = 4;
bartussenruimte = 5;
$.each(self.groepen(), function(i,p){
scores[i] = p.DQ;
slabels[i] = p.naam;
counter = counter + 1;
$.each(self.groepen(), function(i,p){
scores[i] = p.DQ === 0 ? null : Number(p.DQ );
labels[i] = p.naam;
counter = counter + 1;
});
labels[counter]='school';
scores[counter]= self.schoolDQ() === 0? null: Number(self.schoolDQ());
Highcharts.chart('dqpergroep', {
chart: {
type: 'column',
backgroundColor: '#ffffff',
},
title: {
text: 'Diversiteitsquotiënt per groep'
},
credits:{
enabled: false
},
xAxis: {
categories: labels,
},
yAxis: {
min: 0,
tickInterval: 0.2,
title: {
text: 'DQ'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">groep: {point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
legend: {
enabled: false,
},
series: [{
name: 'dq',
color: '#6F0B3D',
data: scores
}],
plotOptions: {
series: {
pointWidth: null,
pointPadding: 0,
}
},
});
slabels[counter]='school';
scores[counter]=self.schoolDQ();
if (self.BC6 ) {self.BC6.destroy(); }
$("#cdiversiteit").remove();
var canv = document.createElement('canvas');
canv.id = 'cdiversiteit';
canv.width = 580;
canv.height = 285;
document.getElementById('diversiteitcanvasholder').appendChild(canv);
var ctxDiversiteit=$("#cdiversiteit").get(0).getContext("2d");
var data6 = {labels :slabels,
datasets: [{fillColor: "rgba(147,15,80,0.9)",
strokeColor: "rgba(111,11,61,1)",
highlightStroke: "rgba(222,22,123,1)",
data: scores},
]}
Highcharts.chart('dqpergroep3d', {
chart: {
type: 'column',
backgroundColor: '#ffffff',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
Chart.types.Bar.extend({
name: "LineAlt",
initialize: function () {
},
title: {
text: 'Diversiteitsquotiënt per groep'
},
credits:{
enabled: false
},
xAxis: {
categories: labels,
Chart.types.Bar.prototype.initialize.apply(this, arguments);
},
draw: function () {
},
yAxis: {
min: 0,
tickInterval: 0.2,
title: {
text: 'DQ'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">groep: {point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
legend: {
enabled: false,
},
Chart.types.Bar.prototype.draw.apply(this, arguments);
// this.chart.ctx.beginPath();
// this.chart.ctx.moveTo(30,137);
// this.chart.ctx.lineTo(580, 137);
// this.chart.ctx.stroke();
// this.chart.ctx.closePath();
}
series: [{
name: 'dq',
color: '#6F0B3D',
data: scores
}],
plotOptions: {
series: {
pointWidth: null,
pointPadding: 0,
}
},
});
self.BC6 = new Chart(ctxDiversiteit).LineAlt(data6,{
animation:false,
scaleFontFamily: "'lato','Arial'",
scaleColor:"rgba(0,0,0,1)",
scaleShowGridLines:true,
scaleLineColor:"rgba(0,0,0,1)",
scaleOverride: true,
scaleBeginAtZero :true,
scaleSteps: 25,
scaleStepWidth: 0.2,
scaleStartValue: 0 ,
barValueSpacing: bartussenruimte,
barStrokeWidth:1,
barDatasetSpacing:2,
toottipFontFamily:"'lato','Arial'",
showTooltips : true,
tooltipTemplate: "<%= label %> : <%= value %>"
});
},
},
// fFillGraph: function(){
// var self = ls.DiversiteitModel;
// var scores =[];
// var slabels =[];
// var counter = 0;
// // var aantalgroepen = self.groepen().length + 1;
// // var bartussenruimte = (580 - (80 * aantalgroepen))/aantalgroepen ;
// // if (bartussenruimte <=0 ) bartussenruimte = 4;
// bartussenruimte = 5;
//
// $.each(self.groepen(), function(i,p){
// scores[i] = p.DQ;
// slabels[i] = p.naam;
// counter = counter + 1;
// });
// slabels[counter]='school';
// scores[counter]=self.schoolDQ();
// if (self.BC6 ) {self.BC6.destroy(); }
//
// $("#cdiversiteit").remove();
//
// var canv = document.createElement('canvas');
// canv.id = 'cdiversiteit';
// canv.width = 580;
// canv.height = 285;
// document.getElementById('diversiteitcanvasholder').appendChild(canv);
//
// var ctxDiversiteit=$("#cdiversiteit").get(0).getContext("2d");
//
// var data6 = {labels :slabels,
// datasets: [{fillColor: "rgba(147,15,80,0.9)",
// strokeColor: "rgba(111,11,61,1)",
// highlightStroke: "rgba(222,22,123,1)",
// data: scores},
// ]}
//
// Chart.types.Bar.extend({
// name: "LineAlt",
// initialize: function () {
//
// Chart.types.Bar.prototype.initialize.apply(this, arguments);
// },
// draw: function () {
//
// Chart.types.Bar.prototype.draw.apply(this, arguments);
// // this.chart.ctx.beginPath();
// // this.chart.ctx.moveTo(30,137);
// // this.chart.ctx.lineTo(580, 137);
// // this.chart.ctx.stroke();
// // this.chart.ctx.closePath();
// }
// });
//
// self.BC6 = new Chart(ctxDiversiteit).LineAlt(data6,{
// animation:false,
// scaleFontFamily: "'lato','Arial'",
// scaleColor:"rgba(0,0,0,1)",
// scaleShowGridLines:true,
// scaleLineColor:"rgba(0,0,0,1)",
// scaleOverride: true,
// scaleBeginAtZero :true,
// scaleSteps: 25,
// scaleStepWidth: 0.2,
// scaleStartValue: 0 ,
// barValueSpacing: bartussenruimte,
// barStrokeWidth:1,
// barDatasetSpacing:2,
// toottipFontFamily:"'lato','Arial'",
// showTooltips : true,
// tooltipTemplate: "<%= label %> : <%= value %>"
// });
//
// },
fPrintDiversiteitBar :function(){
var self = ls.DiversiteitModel;