graphique done

app/Resources/views/logged/previsionnel.html.twig

@@ -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 %}

assets/js/parts/main.js

@@ -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();
     }]);