graphique done

This commit is contained in:
Baptiste Lemoine 2018-08-28 15:16:13 +02:00
parent 2c68445a4b
commit 3614a4bc1e
2 changed files with 62 additions and 5 deletions

View File

@ -178,7 +178,8 @@
<div class="col-sm-12 col-lg-5">
<h2>Simulation sur {{config.lines}} mois</h2>
<div id="simulation-prevision"></div>
<div class="" id="simulationPrevision" style="display: inline-block; height: 300px; width: 90%;">(graphique)</div>
<!--block to insert the graph-->
<div class="well" ng-if="config.monthsBeforeNoMoney < config.lines">
Ce sera la dèche dans {{config.monthsBeforeNoMoney}} mois
@ -201,7 +202,7 @@
</trclass>
</thead>
<tbody>
<tr ng-repeat="line in previsionTable()" >
<tr ng-repeat="line in previsionTable" >
<td>
<div ng-if="line.available > config.warningThershold"
class=" bgsuccess padded ">
@ -240,5 +241,25 @@
</div>
</div>
</div>
<!--<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>-->
<script>
var dataPoints = {{graphPointsPrevision}} ;
var chartContainerChiffreAffaire = new CanvasJS.Chart("simulationPrevision", {
title:{
text: "Euros disponibles dans le temps"
},
animationEnabled: true,
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "splineArea",
dataPoints: dataPoints
}
]
});
chartContainerChiffreAffaire.render();
</script>
{% endverbatim %}
{% endblock %}

View File

@ -1,4 +1,4 @@
// require('../../../node_modules/canvasjs/dist/canvasjs.3');
require('../../../node_modules/canvasjs/dist/canvasjs.3');
var $ = require('jquery');
// JS is equivalent to the normal "bootstrap" package
@ -266,8 +266,8 @@ angular
})
return sum;
};
$scope.previsionTable = () => {
$scope.previsionTable = [];
$scope.calculatePrevisionTable = () => {
let turns = $scope.config.lines;
let monthly = $scope.sumMonthlyExpenses();
let available = $scope.config.disponibility;
@ -286,10 +286,29 @@ angular
}
previsionTable.push(newLine);
}
$scope.previsionTable = previsionTable;
$scope.makeGraphPointsOfPrevisionTable(previsionTable);
return previsionTable;
};
$scope.graphPointsPrevision = [];
$scope.makeGraphPointsOfPrevisionTable = (previsionTable) => {
console.log("previsionTable", previsionTable);
$scope.graphPointsPrevision = [];
for (let i = 0; i < previsionTable.length; i++) {
$scope.graphPointsPrevision.push({
label: previsionTable[i].available + " euros restants dans " + i + " mois",
y: previsionTable[i].available,
x: i,
})
}
}
$scope.updateconf = (rep) => {
// update view calculs
$scope.calculatePrevisionTable();
$scope.updateCanevas()
// flags
$scope.config.loading = false;
$scope.config.initialLoadingDone = true;
$scope.config.disponibility = rep.data.disponibility;
@ -348,5 +367,22 @@ angular
$scope.config.loading = false;
}
$scope.updateCanevas = () => {
var dataPoints = $scope.graphPointsPrevision;
var chartContainer = new CanvasJS.Chart("simulationPrevision", {
title: {
text: "Euros disponibles dans le temps"
},
// animationEnabled: true,
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "splineArea",
dataPoints: dataPoints
}
]
});
chartContainer.render();
}
$scope.init();
}]);