templates/reutilisation.html.twig line 1

Open in your IDE?
  1. {% extends 'baseCuveo.html.twig' %}
  3. {# {% block stylesheets %}
  4. <meta charset="utf-8">
  5. {% endblock %} #}
  7. {% block body %}
  9.   <script>
  10.       
  11.       
  12.     // Code JavaScript pour afficher/masquer le texte
  13.     function toggleContent(button, content) {
  14.       button.addEventListener("click", function() {
  15.         if (content.style.display === "none" || content.style.display === "") {
  16.           content.style.display = "block";
  17.           button.textContent = "▲"; // Flèche vers le haut
  18.         } else {
  19.           content.style.display = "none";
  20.           button.textContent = "▼"; // Flèche vers le bas
  21.         }
  22.       });
  23.     }
  24.   </script>
  26.     <br>
  27.     Calcul du taux de réutilisation d'eaux pluviales :
  28.     <br>
  30.     {{ form_start(form) }}
  31.     {{ form_errors(form) }}
  32.             {{ form_label(form.nomDuProjet, 'Nom du projet') }}
  33.             {{ form_widget(form.nomDuProjet, {'attr': {'value': fichePluvio.nomDuProjet}}) }}
  34.     <div class="form-row">
  35.         <div class="form-group col-md-4">
  36.             {{ form_label(form.climat, 'Climat') }}
  37.             {{ form_widget(form.climat, {'attr': {'value': fichePluvio.climat}}) }}</div>
  38.         <div class="form-group col-md-3">
  39.             {{ form_label(form.stationmeteo, 'Station météo') }}
  40.             {{ form_widget(form.stationmeteo, {'attr': {'value': fichePluvio.stationMeteo}}) }}</div>
  41.     </div>
  42.     <div class="form-row">
  43.                 <div class="form-group col-md-4">            
  44.             {{ form_label(form.nomSurface, 'Nom de la surface 1') }}
  45.             {{ form_widget(form.nomSurface, {'attr': {'value': fichePluvio.nomSurface}}) }}</div>
  46.         <div class="form-group col-md-3">            
  47.             {{ form_label(form.surfaceRecuperee, 'Surface de toiture récupérée en m²') }}
  48.             {{ form_widget(form.surfaceRecuperee, {'attr': {'value': fichePluvio.surfaceRecuperee}}) }}</div>
  49.         <div class="form-group col-md-3">
  50.             {{ form_label(form.rendementToiture, 'Type de toiture') }}
  51.             {{ form_widget(form.rendementToiture, {'attr': {'value': fichePluvio.rendementToiture}}) }}</div>
  52.                     <div class="form-group col-md-1">
  53.                     <img src="{{ asset('img/information.png') }}" height="18" title="Kt est le coefficient de rendement de la toiture (La gestion durable de l'eau - CSTB 2009)">
  54.                     </a></div>
  55.     </div>
  56.             
  57.         <div>
  58.         <button type="button" id="toggleButton1" style="font-size: 12px;">▼</button>
  59.         <label for="toggleButton1">Ajouter d'autres toitures:</label>
  60.         </div>
  62.     <div id="texte1" style="display: none;">
  63.     <div class="form-row">
  64.                         <div class="form-group col-md-4">            
  65.             {{ form_label(form.nomSurface2, 'Nom de la surface 2') }}
  66.             {{ form_widget(form.nomSurface2, {'attr': {'value': fichePluvio.nomSurface2}}) }}</div>
  67.         <div class="form-group col-md-3">            
  68.             {{ form_label(form.surfaceRecuperee2, 'Surface n°2 de toiture récupérée') }}
  69.             {{ form_widget(form.surfaceRecuperee2, {'attr': {'value': fichePluvio.surfaceRecuperee2}}) }}</div>
  70.         <div class="form-group col-md-3">
  71.             {{ form_label(form.rendementToiture2, 'Type de toiture n°2') }}
  72.             {{ form_widget(form.rendementToiture2, {'attr': {'value': fichePluvio.rendementToiture2}}) }}</div>
  73.     </div>
  74.     <div class="form-row">
  75.                         <div class="form-group col-md-4">            
  76.             {{ form_label(form.nomSurface3, 'Nom de la surface 3') }}
  77.             {{ form_widget(form.nomSurface3, {'attr': {'value': fichePluvio.nomSurface3}}) }}</div>
  78.         <div class="form-group col-md-3">            
  79.             {{ form_label(form.surfaceRecuperee3, 'Surface n°3 de toiture récupérée') }}
  80.             {{ form_widget(form.surfaceRecuperee3, {'attr': {'value': fichePluvio.surfaceRecuperee3}}) }}</div>
  81.         <div class="form-group col-md-3">
  82.             {{ form_label(form.rendementToiture3, 'Type de toiture n°3') }}
  83.             {{ form_widget(form.rendementToiture3, {'attr': {'value': fichePluvio.rendementToiture3}}) }}</div>
  84.     </div>
  85.     </div>
  86.     <div>
  87.       <button type="button" id="toggleButton2" style="font-size: 12px;">▼</button>
  88.       <label for="toggleButton2">Usage pour les WC :</label>
  89.     </div>
  91.     <div id="texte2" style="display: none;">   
  92.         <div class="form-row">
  93.             <div class="form-group col-md-3">
  94.                 {{ form_label(form.nbreUtilisateur, 'Nombre d\'utilisateur moyen journalier') }}
  95.                 {{ form_widget(form.nbreUtilisateur, {'attr': {'value': fichePluvio.nbreUtilisateur}}) }}</div>
  96.             <div class="form-group col-md-3">
  97.                  {{ form_label(form.volumeParUtilisation, 'Volume par jour par utilisateur (L/jr)') }}
  98.                 {{ form_widget(form.volumeParUtilisation, {'attr': {'value': fichePluvio.volumeParUtilisation}}) }}</div>
  99.             <div class="form-group col-md-2">
  100.                 {{ form_label(form.scenarioUtilisation, 'Scénario d\'utilisation') }}
  101.                 {{ form_widget(form.scenarioUtilisation, {'attr': {'value': fichePluvio.scenarioUtilisation}}) }}</div>
  102.             <div class="form-group col-md-3">
  103.                 {{ form_label(form.tauxRaccordement, 'Taux de WC raccordés en %') }}
  104.                 {{ form_widget(form.tauxRaccordement, {'attr': {'value': fichePluvio.tauxRaccordement}}) }}</div>
  105.         </div>
  106.     </div>
  107.         
  108.     <div>
  109.       <button type="button" id="toggleButton3" style="font-size: 12px;">▼</button>
  110.       <label for="toggleButton3">Usage pour l'arrosage :</label>
  111.     </div>
  112.     <div id="texte3" style="display: none;">
  113.         <div class="form-row">
  114.             <div class="form-group col-md-3">
  115.                 {{ form_label(form.ru, 'Type de sol') }}
  116.                 {{ form_widget(form.ru, {'attr': {'value': fichePluvio.ru}}) }}</div>
  117.             <div class="form-group col-md-3">
  118.                 {{ form_label(form.typePlante, 'Type de plantes') }}
  119.                 {{ form_widget(form.typePlante) }}
  120.                 {#            {{ form_widget(form.typePlante, {'attr': {'value': fichePluvio.typePlante}}) }}
  121.                 #}        </div>
  122.             <div class="form-group col-md-3">
  123.                 {{ form_label(form.profondeurTerre, 'Profondeur de la terre') }}
  124.                 {{ form_widget(form.profondeurTerre, {'attr': {'value': fichePluvio.profondeurTerre}}) }}</div>
  125.             <div class="form-group col-md-3">
  126.                 {{ form_label(form.sArrosage, 'Surface arrosée en m²') }}
  127.                 {{ form_widget(form.sArrosage, {'attr': {'value': fichePluvio.sArrosage}}) }}
  128.             </div>
  129.         </div>
  130.     </div>
  131.     
  132.     <div>
  133.       <button type="button" id="toggleButton4" style="font-size: 12px;">▼</button>
  134.       <label for="toggleButton4">Autres besoins :</label>
  135.     </div>
  136.     <div id="texte4" style="display: none;">
  137.     <div class="form-row">
  138.         <div class="form-group col-md-3">
  139.             {{ form_label(form.besoinEau, 'Autre besoin en eau en litres par jour :') }}
  140.             {{ form_widget(form.besoinEau, {'attr': {'value': fichePluvio.besoinEau}}) }}</div> 
  141.         <div class="form-group col-md-1">
  142.             <img src="{{ asset('img/information.png') }}" height="18" title="Lavage du sol, remplissage de camionnettes autolaveuses... Si le besoin varie suivant les jours, séparez les données par un point-virgule. Les données seront répétées. Exemple : une suite de 7 chiffres '4;0;9;0;0;0;0' pour une suite hebdomadaire">
  143.             </a>
  144.         </div>
  145.     </div>
  146.     </div>        
  148.             
  149.             <div>
  150.       <button type="button" id="toggleButton5" style="font-size: 12px;">▼</button>
  151.       <label for="toggleButton5">Analyse économique :</label>
  152.             </div>
  154.             <div id="texte5" style="display: none;">
  155.                 <div class="form-row" style="background:#f8f9fa">
  156.                 </div>
  157.                 <div class="form-row" style="background:#f8f9fa">
  158.                     <div class="form-group col-md-3">
  160.                         {{ form_label(form.coutEau, 'Coût de l\'eau épargnée en €/m3') }}
  161.                         {{ form_widget(form.coutEau, {'attr': {'value': fichePluvio.coutEau}}) }}
  162.                     </div>
  165.                     <div class="form-group col-md-6">
  167.                         {{ form_label(form.coutPompe, 'Forfait pour le coût de la pompe et du double réseau en €') }}
  168.                         {{ form_widget(form.coutPompe, {'attr': {'value': fichePluvio.coutPompe}}) }}
  170.                     </div>
  171.                 </div>
  172.                 <div class="form-row" style="background:#f8f9fa">
  173.                     <div class="form-group col-md-2">
  174.                         Volumes et coûts de cuve à interpoler :
  176.                     </div>
  177.                     <div class="form-group col-md-2">
  178.                         {{ form_label(form.choixVolume, 'Volume n°1 en litres') }}
  179.                         {{ form_widget(form.choixVolume, {'attr': {'value': fichePluvio.choixVolume}}) }}
  181.                     </div>
  182.                     <div class="form-group col-md-2">
  183.                         {{ form_label(form.coutVolume, 'Coût du volume n°1') }}
  184.                         {{ form_widget(form.coutVolume, {'attr': {'value': fichePluvio.coutVolume}}) }}
  186.                     </div>
  187.                     <div class="form-group col-md-2">
  188.                         {{ form_label(form.choixVolume2, 'Volume n°2 en litres') }}
  189.                         {{ form_widget(form.choixVolume2, {'attr': {'value': fichePluvio.choixVolume2}}) }}
  191.                     </div>
  192.                     <div class="form-group col-md-2">
  193.                         {{ form_label(form.coutVolume2, 'Coût du volume n°2') }}
  194.                         {{ form_widget(form.coutVolume2, {'attr': {'value': fichePluvio.coutVolume2}}) }}
  196.                     </div>
  197.                 </div>
  198.             </div>
  199.           <div class="form-group col-md-4">
  200.             {{ form_label(form.certivea, 'L\'operation est-elle certifiée HQE par Certivéa \?') }}
  201.             {{ form_widget(form.certivea, {'attr': {'value': fichePluvio.certivea}}) }}
  202.         </div>          
  203. <script>
  204. if ({{ fichePluvio.nbreUtilisateur }}0 > 0) {
  205.     document.getElementById("texte2").style.display = "block";
  206.     document.getElementById("toggleButton2").textContent = "▲";
  207. } else {
  208.     document.getElementById("texte2").style.display = "none";
  209.     document.getElementById("toggleButton2").textContent = "▼";
  210. }
  212. if ({{ fichePluvio.surfaceRecuperee2 }}0 > 0) {
  213.     document.getElementById("texte1").style.display = "block";
  214.     document.getElementById("toggleButton1").textContent = "▲";
  215. } else {
  216.     document.getElementById("texte1").style.display = "none";
  217.     document.getElementById("toggleButton1").textContent = "▼";
  218. }
  220. if ({{ fichePluvio.sArrosage }}0 > 0) {
  221.     document.getElementById("texte3").style.display = "block";
  222.     document.getElementById("toggleButton3").textContent = "▲";
  223. } else {
  224.     document.getElementById("texte3").style.display = "none";
  225.     document.getElementById("toggleButton3").textContent = "▼";
  226. }
  228. let besoinEau = parseFloat('{{ fichePluvio.besoinEau|split(";")|first|default(0) }}');
  230. if (besoinEau > 0) {
  231.     document.getElementById("texte4").style.display = "block";
  232.     document.getElementById("toggleButton4").textContent = "▲";
  233. } else {
  234.     document.getElementById("texte4").style.display = "none";
  235.     document.getElementById("toggleButton4").textContent = "▼";
  236. }
  239. // Code JavaScript for afficher le texte lorsque la case est cochée
  240. toggleContent(document.getElementById("toggleButton1"), document.getElementById("texte1"));
  241. toggleContent(document.getElementById("toggleButton2"), document.getElementById("texte2"));
  242. toggleContent(document.getElementById("toggleButton3"), document.getElementById("texte3"));
  243. toggleContent(document.getElementById("toggleButton4"), document.getElementById("texte4"));
  244. toggleContent(document.getElementById("toggleButton5"), document.getElementById("texte5"));
  246. </script>
  247.            {% if  graphParametrique %}     
  248. <BR>
  249. <BR>
  250.      Résultats de l'étude :       
  251. <BR>
  252. <BR>           
  253.             
  255.         <div id="chartParamatrique" style="height: 370px; width: 100%;"></div>
  256.     {% endif %}
  258.      {% if  graphParametrique %}
  259.     <br><br> 
  260.     <table class='table table-striped table-hover table-sm text-center'>
  261.         <thead>
  262.         <tr>
  263.         <th>Volume de la cuve en Litres</th>
  264.         <th >Taux d'autonomie en %</th>
  265.         <th >Quantitée réutilisée moyenne en m3/an</th>
  266.         <th >Complément annuel moyen m3/an</th>
  267.         <th >Trop plein moyen en m3/an</th>
  268.         <th >Gain financier moyen annuel en €/an</th>
  269.         <th >Coût de la cuve + réseau estimée en €HT</th>
  270.         <th >Temps de retour brut en années</th>
  271.         </tr>
  272.     </thead>  
  273.     <tbody>
  274.         {% for Volume in tableauParametrique %}
  275.             <tr>
  276.                 {% for data in Volume %}
  277.                     <td>
  278.                         {{ data }}
  279.                     </td>
  280.                 {% endfor %}
  281.             </tr>
  282.         {% endfor %}
  283.     </tbody>
  284. </table>
  285.             <br><br> 
  286.         <table class='table table-striped table-hover table-sm text-center'>
  287.             <thead>
  288.             <tr>
  289.             <th>Pluviométrie moyenne en mm/an</th>
  290.             <th >Besoin total en eau en m3/an</th>
  291.             <th >Arrosage en mm/an</th>
  292.             </tr>
  293.         </thead>  
  294.         <tbody>
  295.             <tr>
  296.                 <td>
  297.                     {{ tableauSynthese.pluviometrieMoyenne }}
  298.                 </td>
  299.                 <td>
  300.                     {{ tableauSynthese.besoinAnnuel }}
  301.                 </td>
  302.                 <td>
  303.                     {{ tableauSynthese.besoinArrosage }}
  304.                 </td>
  305.             </tr>
  306.         </tbody>
  307.     </table>
  308.                 
  309.     <BR>
  310.     <BR>   
  311.     Obtenez les graphiques jour par jour en choisisssant le volume de la cuve. Un optimum de volume peut être au fléchissement de la courbe du taux de couverture.
  312.     <BR>
  313.     <div class="form-row mt-4" {% if not show_complement %}style="display:none"{% endif %}>
  314.         <div class="form-group col-md-4" >
  315.             {{ form_row(form.volumeCuve, {'label': 'Volume de la cuve choisi en Litres (optionnel) :'}) }}</div>
  316.         <div class="form-group col-md-1 align-self-center d-flex justify-content-center"> OU </div>
  317.         <div class="form-group col-md-4">{{ form_row(form.tauxObjectif, {'label': 'Taux couverture souhaité en %'}) }}</div>
  318.     </div>
  320.     <div class="form-row mt-4">
  321.         <div class="form-group col-md-2">
  322.         {%if show_complement %}
  323.             {{ form_row(form.analyser, {'label': 'Compléter et/ou actualiser l\'analyse'}) }}
  324. {#            <a class="btn btn-primary" href="{{ path('CopieCalcul') }}" role="button">Faire une copie du calcul</a>
  325.             <a class="btn btn-primary" href="{{ path('NouveauCalcul') }}" role="button">Nouveau calcul</a>#}
  326.             {% else %}
  327.             {{ form_row(form.analyser ) }}
  328.             {% endif %}
  329.         </div>
  330.     </div>
  331.     {% else %}
  332.         <div class="form-row mt-4" {% if not show_complement %}style="display:none"{% endif %}>
  333.             <div class="form-group col-md-4">
  334.                 {{ form_row(form.volumeCuve, {'label': 'Volume de la cuve choisi en Litres (optionnel) :'}) }}</div>
  335.             <div class="form-group col-md-1 align-self-center d-flex justify-content-center"> OU</div>
  336.             <div class="form-group col-md-4">{{ form_row(form.tauxObjectif, {'label': 'Taux couverture souhaité en %'}) }}</div>
  337.         </div>
  339.         <div class="form-row mt-4">
  340.             <div class="form-group col-md-2">
  341.                 {% if show_complement %}oo
  342.                     {{ form_row(form.analyser, {'label': 'Compléter et/ou actualiser l\'analyse'}) }}
  343.                 {% else %}
  344.                     {{ form_row(form.analyser ) }}
  345.                 {% endif %}
  346.             </div>
  347.         </div>
  348.     {% endif %}
  349.     
  350. {{ form_rest(form) }}
  351. {{ form_end(form) }}
  353.     <br><br> 
  355.     <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>   
  356.     {% if  volumeCuveUser %}
  357.         
  358.         Détails pour le volume choisi : {{ volumeCuveUser }} Litres:
  359.         <BR>
  360.         <BR>
  361.         <div id="chartPie" style="height: 370px; width: 100%;"></div>
  362.         <div id="chartPluviometrie" style="height: 100px; width: 100%;"></div><br><br>
  363.         <div id="chartContainer" style="height: 370px; width: 100%;"></div><br><br>
  364.         <div id="chartBarres" style="height: 370px; width: 100%;"></div><br><br>
  366.         
  369.     {% endif %}
  372.    
  375. {% if allowPDF %}
  376. <a class="btn btn-success btnPDF" >Télécharger le bilan en PDF</a>
  377. {% endif %}
  382. <br><br>
  383. {#
  384. {% if  graphParametrique %} Tableau de vérification
  385. <br><br> 
  386. <table class='table table-striped table-hover table-sm'>
  387.     <thead>
  388.     <th>jour</th>
  389.     <th >pluieDuJour</th>
  390.     <th >RFUJournalier</th>
  391.     <th >ETP</th>
  392.     <th >ConsoPlanteJournalier</th>
  393.     <th >besoinArrosageJournalier</th>
  394.     <th >besoinEauJournalier</th>
  395.     <th >volumeEauToiture</th>
  396.     <th >volumeEau</th>
  397.     <th >bilanEau</th>
  398.     <th >manqueEau)</th>
  399. </thead>  
  400. <tbody>
  401.     {% for jour in tableau %}
  402.         <tr>
  403.             {% for data in jour %}
  404.                 <td>
  405.                     {{ data }}
  406.                 </td>
  407.             {% endfor %}
  408.         </tr>
  409.     {% endfor %}
  410. </tbody>
  411. </table>
  413. {% endif %}#}
  415. <script>
  416.     //let myForm = document.getElementById('form');
  417.         document.querySelectorAll('form select').forEach(elem => {
  418.         elem.addEventListener('submit', function(e){ e.preventDefault(); });
  419.     });
  422.     function showFile(blob){
  423.         // It is necessary to create a new blob object with mime-type explicitly set
  424.         // otherwise only Chrome works like it should
  425.         var newBlob = new Blob([blob], {type: "application/pdf"})
  427.         // IE doesn't allow using a blob object directly as link href
  428.         // instead it is necessary to use msSaveOrOpenBlob
  429.         if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  430.             window.navigator.msSaveOrOpenBlob(newBlob);
  431.             return;
  432.         }
  434.         // For other browsers:
  435.         // Create a link pointing to the ObjectURL containing the blob.
  436.         const data = window.URL.createObjectURL(newBlob);
  437.         var link = document.createElement('a');
  438.         link.href = data;
  439.         link.download="bilan.pdf";
  440.         link.click();
  441.         setTimeout(function(){
  442.             // For Firefox it is necessary to delay revoking the ObjectURL
  443.             window.URL.revokeObjectURL(data);
  444.         }, 100);
  445.     }
  447.     const pdfLink="{{ path('RetutilisationBilanPdf',{'idFiche' : idPluvio}) }}";
  448.     const btnPDF = document.querySelector('.btnPDF');
  449.     if (btnPDF) {
  451. // On click convert charts to png and download pdf
  452.         btnPDF.addEventListener('click', () => {
  454.             // create new FormData object
  455.             const formData = new FormData();
  456.             // append form data to formData object
  457.         formData.append('idFiche', {{ idPluvio }});
  458.             // Convert charts to png
  459.         const charts = document.querySelectorAll('.canvasjs-chart-container');
  460.         var index=0;
  462.         charts.forEach(container => {
  463.             chart = container.querySelector('canvas');
  464.             console.log(chart);
  465.                 const img = chart.toDataURL("image/png");
  466.                 // add Img from chart to formData
  467.             formData.append('img['+(index++)+']', img);
  469.             });
  470.             // Send multipart formData to server
  471.             fetch(pdfLink, {
  472.                 method: 'POST',
  473.             body: formData
  474.         }).then(r => r.blob())
  475.             .then(showFile)
  477.         });
  480.     }
  484.     function generatePDF() {
  485.         var doc = new jsPDF();
  486.         doc.fromHTML(document.getElementById('content'), 15, 15, {
  487.             'width': 170
  488.         });
  489.         doc.save('sample-file.pdf');
  490.     }
  492. </script>
  494. <script>
  495.     var renderedImages = [];
  496.     window.onload = function () {
  498.         {% if graphParametrique %}
  499.     var chart = new CanvasJS.Chart("chartParamatrique", {
  500.     animationEnabled: true,
  501.             zoomEnabled: true,
  502.             theme: "light2",
  503.             title: {
  504.             text: "Etude paramétrique de la taille de la cuve"
  505.             },
  506.             axisX: {
  507.             title: "Nombre de litres",
  508.                     titleFontColor: "#4F81BC",
  509.                     includeZero: true,
  510.                     valueFormatString: "# ###L",
  511.             },
  512.             axisY: {
  513.             title: "Taux de couverture des besoins",
  514.                     titleFontColor: "#4F81BC",
  515.                     includeZero: true,
  516.                     suffix: "%"
  517.             },
  518.             axisY2: {
  519.             title: "Temps de retour",
  520.                     titleFontColor: "#4F81BC",
  521.                     includeZero: true,
  522.                     suffix: " ans"
  523.             },
  524.             toolTip: {
  525.             shared: true
  526.             },
  527.             data: [{
  528.             indexLabelFontColor: "darkSlateGray",
  529.                     name: "Taux de couverture",
  530.                     type: "line",
  531.                     markerSize: 0,
  532.                     showInLegend: true,
  533.                     xValueFormatString: "Volume cuve : # ###L",
  534.                     yValueFormatString: "# '%'",
  535.                     dataPoints: [
  536.     {{ graphParametrique }}
  537.                         ]
  538.                 },
  539.                 {
  540.                 indexLabelFontColor: "red",
  541.                         name: "Selection utilisateur",
  542.                         type: "line",
  543.                         markerSize: 12,
  544.                         showInLegend: true,
  545.                         yValueFormatString: "Couverture à #'%'",
  546.                         dataPoints: [
  547.     {{ graphParametriqueUserJson }}
  548.                         ]},
  549.                 {
  550.                 type: "line",
  551.                         name: "Temps de retour",
  552.                         axisYType: "secondary",
  553.                         markerSize: 0,
  554.                         showInLegend: true,
  555.                         yValueFormatString: "0.0 ans",
  556.                         dataPoints:[
  557.     {{ graphTempsDeRetour }}
  558.                         ]
  559.                 }
  561.                 ]
  562.         });
  563.         chart.render();
  564.         renderedImages.push(chart.exportChart({format: "png",toDataURL: true}));
  565.         {% endif %}
  567.         {% if graphJourParJour %}
  568.         {% endif %}
  569.         {% if  volumeCuveUser %}
  570.         var chart1 = new CanvasJS.Chart("chartContainer", {
  571.         animationEnabled: true,
  572.                 zoomEnabled: true,
  573.                 theme: "light2",
  574.                 title: {
  575.                 text: "Niveau de la cuve de la première année"
  576.                 },
  577.                 axisX: {
  578.                 title: "Jour dans l'année",
  579.                         titleFontColor: "#4F81BC",
  580.                         includeZero: true,
  581.                         suffix: ""
  582.                 },
  583.                 axisY: {
  584.                 title: "Nombre de litres",
  585.                         titleFontColor: "#4F81BC",
  586.                         includeZero: true,
  587.                         scaleBreaks: {
  588.                         autoCalculate: true
  589.                         },
  590.                         suffix: " L",
  591.                         maximum:{{graphJourParJour.maximum}}
  592.                 },
  593.                 data: [
  594.                 {
  595.                 indexLabelFontColor: "red",
  596.                         name: "Trop plein de la cuve",
  597.                         type: "area",
  598.                         showInLegend: true,
  599.                         color: "#DF7970",
  600.                         yValueFormatString: "# ##0 L",
  601.                         xValueFormatString: "J#",
  602.                         dataPoints: [
  603.     {{ graphJourParJour.tropPlein }}
  604.                         ]
  605.                 },
  606.                 {
  607.                 indexLabelFontColor: "green",
  608.                         name: "Complément eau de ville",
  609.                         type: "area",
  610.                         showInLegend: true,
  611.                         color:"#51CDA0",
  612.                         yValueFormatString: "# ##0 L",
  613.                         xValueFormatString: "J#",
  614.                         dataPoints: [
  615.     {{ graphJourParJour.manqueEau }}
  616.                         ]
  617.                 },
  618.                 {indexLabelFontColor: "darkSlateGray",
  619.                         name: "Volume d'eau dans la cuve",
  620.                         type: "area",
  621.                         showInLegend: true,
  622.                         color: "#6D78AD",
  623.                         yValueFormatString: "# ##0 L",
  624.                         xValueFormatString: "J#",
  625.                         dataPoints: [
  626.     {{ graphJourParJour.volumeEau }}
  627.                         ]
  628.                 }
  631.                 ]
  632.         });
  633.         chart1.render();
  634.         renderedImages.push(chart1.exportChart({format: "png",toDataURL: true}));
  635.         {% endif %}
  636.         {% if  volumeCuveUser %}
  637.         var chart3 = new CanvasJS.Chart("chartBarres", {
  638.         animationEnabled: true,
  639.                 zoomEnabled: true,
  640.                 theme: "light2",
  641.                 title: {
  642.                 text: "Répartition des besoins jour par jour sur la première année"
  643.                 },
  644.                 axisX: {
  645.                 title: "Jour dans l'année",
  646.                         titleFontColor: "#4F81BC",
  647.                         includeZero: true,
  648.                         suffix: ""
  649.                 },
  650.                 axisY: {
  651.                 title: "Nombre de litres",
  652.                         titleFontColor: "#4F81BC",
  653.                         includeZero: true,
  654.                         suffix: " L"
  655.                 },
  656.                 data: [{
  657.                 indexLabelFontColor: "green",
  658.                         name: "Eau de pluie réutilisée",
  659.                         type: "stackedColumn",
  660.                         yValueFormatString: "# ##0 L",
  661.                         xValueFormatString: "J#",
  662.                         showInLegend: true,
  663.                         dataPoints: [
  664.     {{ graphJourParJour.apportCuve }}
  665.                         ]
  666.                 },
  667.                 {
  668.                 indexLabelFontColor: "darkSlateGray",
  669.                         name: "Complément eau de ville",
  670.                         showInLegend: true,
  671.                         type: "stackedColumn",
  672.                         yValueFormatString: "# ##0 L",
  673.                         xValueFormatString: "J#",
  674.                         dataPoints: [
  675.     {{ graphJourParJour.manqueEauPositif }}
  676.                         ]
  677.                 }
  679.                 ]
  680.         });
  681.         chart3.render();
  682.         renderedImages.push(chart3.exportChart({format: "png",toDataURL: true}));
  683.         {% endif %}
  684.         {% if  volumeCuveUser %}
  685.         var chart2 = new CanvasJS.Chart("chartPluviometrie", {
  686.         animationEnabled: true,
  687.                 theme: "light2",
  688.                 title: {
  689.                 text: "Pluviometrie"
  690.                 },
  691.                 axisX: {
  692.     {#        minimum: new Date(2015, 01, 25),
  693.                     maximum: new Date(2017, 02, 15),
  694.                     valueFormatString: "MMM YY"#}
  695.                                 },
  696.                                 axisY: {
  697.                                 title: "mm par jour",
  698.                                         titleFontColor: "#4F81BC",
  699.                                         includeZero: true,
  700.                                         suffix: ""
  701.                                 },
  702.                                 data: [{
  703.                                 indexLabelFontColor: "darkSlateGray",
  704.                                         name: "views",
  705.                                         type: "area",
  706.                                         yValueFormatString: "0.0",
  707.                                         dataPoints: [
  708.     {{ graphJourParJour.pluviometrie }}
  709.                         ]
  710.                 }]
  711.         });
  712.         chart2.render();
  713.         renderedImages.push(chart2.exportChart({format: "png",toDataURL: true}));
  714.         {% endif %}
  715.         {% if  volumeCuveUser %}
  716.         var chartpie = new CanvasJS.Chart("chartPie", {
  717.         animationEnabled: true,
  718.                 theme: "light2",
  719.                 title: {
  720.                 text: "Répartition des besoins"
  721.                 },
  722.                 data: [{
  723.                 type: "pie",
  724.                         startAngle: 240,
  725.                         yValueFormatString: "0.0%",
  726.                         indexLabel: "{label} {y}",
  727.                         dataPoints: [
  728.                         {y:{{graphTarte.tauxArrosage}}, label: "Arrosage ({{graphTarte.Arrosage}} m3/an) :"},
  729.                         {y:{{graphTarte.tauxWc}}, label: "WC ({{graphTarte.Wc}} m3/an) :"},
  730.                         {y:{{graphTarte.tauxAutres}}, label: "Autres ({{graphTarte.Autres}} m3/an) :"},
  731.                         ]
  732.                 }]
  733.         });
  734.         chartpie.render();
  735.         renderedImages.push(chartpie.exportChart({format: "png",toDataURL: true}));
  736.         {% endif %}
  738.         }
  739. </script>
  742. {% endblock %}