templates/admin/mini_statistic.html.twig line 1

Open in your IDE?
  1. <div class="container">    
  2.     <div class="row">
  4.         <div class="col-md-4">
  5.             <div class="assie-card-dash-green">
  6.                 <div class="assie-card-body">
  7.                     <h4 class="text-center">{{ 'admin.statistiques.recette' | trans }}</h4>
  8.                     <hr/>
  9.                     <h4 class="text-center">{{ 'admin.statistiques.vendu' | trans }}: {{ chiffreDAffaireDUnePeriode | number_format(0, '', ' ') }} </h4>
  10.                     <h4 class="text-center">{{ 'admin.statistiques.paye' | trans }}: {{ paiementDUnePeriode | number_format(0, '', ' ') }} </h4>
  11.             
  12.                 </div>
  13.             </div>
  14.         </div>
  16.         <div class="col-md-4">
  17.             <div class="assie-card-dash-orange">
  18.                 <div class="assie-card-body">
  19.                     <h3 class="text-center">{{ 'admin.depenses' | trans }}</h3>
  20.                     <hr/>
  21.                     <h3 class="text-center">{{ totalDepenseParDate | number_format(0, '', ' ') }}</h3>
  22.                     <br/>
  23.                 </div>
  24.             </div>
  25.         </div>
  27.         <div class="col-md-4">
  28.             <div class="assie-card-dash-blue">
  29.                 <div class="assie-card-body">
  30.                     <h4 class="text-center">{{ 'admin.solde_timbre_fne' | trans }}</h4>
  31.                     <hr/>
  32.                     <h3 class="text-center">{{ soldeTimbreFNE | number_format(0, '', ' ') }}</h3>
  33.                     <br/>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <br>
  39.     <div class="row">
  40.         <div class="col-md-4">
  41.             <div class="assie-card-dash-black">
  42.                 <div class="assie-card-body">
  43.                     <h4 class="text-center">{{  'admin.third.label' | trans }}</h4>
  44.                     <hr/>
  45.                     <h3 class="text-center">
  46.                         {% for nb in nombreTiers %}
  47.                                 {{ nb.nombreTotal | number_format(0, '', ' ') }}
  48.                             {% endfor %}
  49.                     </h3>
  50.                 </div>
  51.             </div>
  52.         </div>
  54.         <div class="col-md-4">
  55.             <div class="assie-card-dash-yellow">
  56.                 <div class="assie-card-body">
  57.                     <h4 class="text-center">{{  'admin.products' | trans }}</h4>
  58.                     <hr/>
  59.                     <h3 class="text-center">
  60.                         {% for nb in nombreProduit %}
  61.                                 {{ nb.nombreTotal| number_format(0, '', ' ') }}
  62.                         {% endfor %}
  63.                     </h3>
  64.                 </div>
  65.             </div>
  66.         </div>
  68.         <div class="col-md-4">
  69.             <div class="assie-card-dash-green">
  70.                 <div class="assie-card-body">
  71.                     <h4 class="text-center">{{  'admin.proposals' | trans }}</h4>
  72.                     <hr/>
  73.                     <h3 class="text-center">
  74.                         {% for nb in nombreProduit %}
  75.                                 {{ devisPeriodique | number_format(0, '', ' ') }}
  76.                         {% endfor %}
  77.                     </h3>
  78.                 </div>
  79.             </div>
  80.         </div>
  84.     
  85.     </div>
  86. </div>
  88. <br/>
  89. <br/>
  91.      <div class="wrapper-accueil" id="contenu-propre-espace-de-travail">
  92.         <div class="container-fluid">
  93.             <div class="row">  
  94.              
  95.             </div>
  96.             <div class="row">
  97.                 <div class="col-lg-12 grid-margin stretch-card">
  98.                     <div class="card">
  99.                       <div class="card-body">
  100.                         <h4 class="card-title">{{ 'admin.order_per_month' | trans  }}</h4>
  101.                             {% for cm in commandParMois %}
  102.                                 <span hidden class="commande-par-mois">{{ cm.totalTTC }}</span>
  103.                                 <span hidden class="commande-par-mois-mois">{{ cm.mois }}</span>
  104.                                 <span hidden class="commande-par-mois-paye">{{ cm.montantPaye }}</span>
  105.                             {% endfor %}
  106.                         <canvas id="commandeParMois" style="height:230px"></canvas>
  107.                       </div>
  108.                     </div>
  109.                 </div>
  110.                 <div class="col-lg-12 grid-margin stretch-card">
  111.                     <div class="card">
  112.                       <div class="card-body">
  113.                         <h4 class="card-title">{{ 'admin.order_over_several_years' | trans }}</h4>
  114.                             {% for ca in chiffreDAffaireSurPlsAnnees %}
  115.                                 <span  hidden class="chiffre-affaire">{{ ca.totalTTC }}</span>
  116.                                 <span hidden class="chiffre-affaire-annee">{{ ca.annee }}</span>
  117.                                 <span hidden class="chiffre-affaire-paye">{{ ca.montantPaye }}</span>
  118.                             {% endfor %}
  119.                         <canvas id="commandeSurPlusieursAnnee" style="height:250px"></canvas>
  120.                       </div>
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.         </div>
  125.     </div>
  126.     
  127.     {#<script type="text/javascript" src="{{ asset('assets/js/ab.min.js') }}"></script>#}
  128.   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js" integrity="sha512-SuxO9djzjML6b9w9/I07IWnLnQhgyYVSpHZx0JV97kGBfTIsUYlWflyuW4ypnvhBrslz1yJ3R+S14fdCWmSmSA==" crossorigin="anonymous"></script>
  129.     <script>
  130.             var commandeParMois = document.querySelectorAll('.commande-par-mois');
  131.             
  132.             var commandeParMoisMois = document.querySelectorAll('.commande-par-mois-mois');
  133.             var commandeParMoisPaye  = document.querySelectorAll('.commande-par-mois-paye');
  134.             var commandeSurPlusieursAnnee = document.querySelectorAll('.chiffre-affaire');
  135.             var commandeSurPlusieursAnneeAnnee = document.querySelectorAll('.chiffre-affaire-annee');
  136.             var commandeSurPlusieursPaye = document.querySelectorAll('.chiffre-affaire-paye');
  137.             
  138.             var commandeParMoisData = [], commandeParMoisDataLabel = [], commandeParMoisPayeData = [];
  139.             for (var i = 0; i < commandeParMois.length; i++){
  140.                 commandeParMoisData[i] = commandeParMois[i].innerHTML ;
  141.                 
  142.             }
  143.             
  144.             for (var i = 0; i < commandeParMoisMois.length; i++){
  145.                 const rangMois = commandeParMoisMois[i].innerHTML.substring(0, 2) - 1;
  146.                 const laDate = new Date(commandeParMoisMois[i].innerHTML.substring(2), rangMois, 1);
  147.                 const leMois = laDate.toLocaleString('default', { month: 'long' });
  148.     
  149.                 commandeParMoisDataLabel[i] = leMois ;
  151.             }
  153.             
  154.             for(var i = 0; i < commandeParMoisPaye.length; i++){
  155.                 commandeParMoisPayeData[i]  = commandeParMoisPaye[i].innerHTML ;
  156.             }
  157.             
  158.             
  159.             /*
  160.             'rgba(255, 99, 132, 0.2)',
  161.                             'rgba(54, 162, 235, 0.2)',
  162.                             'rgba(255, 206, 86, 0.2)',
  163.                             'rgba(75, 192, 192, 0.2)',
  164.                             'rgba(153, 102, 255, 0.2)',
  165.                             'rgba(255, 159, 64, 0.2)'*/
  166.             var ctx = document.getElementById('commandeParMois').getContext('2d');
  167.             var commandeParMoisChart = new Chart(ctx, {
  168.                 type: 'bar',
  169.                 data: {
  170.                     labels: commandeParMoisDataLabel,
  171.                     datasets: [
  172.                         
  173.                         {
  174.                         label: 'Ventes:',
  175.                         //data: [12, 19, 3, 5, 2, 3],
  176.                         data: commandeParMoisData,
  177.                         backgroundColor: [
  178.                             
  179.                             'rgb(58, 124, 165)',
  180.                             'rgb(58, 124, 165)',
  181.                             'rgb(58, 124, 165)',
  182.                             'rgb(58, 124, 165)',
  183.                             'rgb(58, 124, 165)',
  184.                             'rgb(58, 124, 165)',
  185.                             'rgb(58, 124, 165)',
  186.                             'rgb(58, 124, 165)',
  187.                             'rgb(58, 124, 165)',
  188.                             'rgb(58, 124, 165)',
  189.                             'rgb(58, 124, 165)',
  190.                             'rgb(58, 124, 165)',
  191.                         ],
  192.                         borderColor: [
  193.                             'rgba(58, 124, 165, 1)',
  194.                         ],
  195.                         borderWidth: 2
  196.                     },
  197.                     {
  198.                         label: 'Montant payé',
  199.                         data: commandeParMoisPayeData,
  200.                         backgroundColor: [
  201.                             
  202.                             'rgb(102, 187, 106)',
  203.                             'rgb(102, 187, 106)',
  204.                             'rgb(102, 187, 106)',
  205.                             'rgb(102, 187, 106)',
  206.                             'rgb(102, 187, 106)',
  207.                             'rgb(102, 187, 106)',
  208.                             'rgb(102, 187, 106)',
  209.                             'rgb(102, 187, 106)',
  210.                             'rgb(102, 187, 106)',
  211.                             'rgb(102, 187, 106)',
  212.                             'rgb(102, 187, 106)',
  213.                             'rgb(102, 187, 106)',
  214.                         ],
  215.                         borderColor: [
  216.                             'rgba(102, 187, 106, 1)',
  217.                         ],
  218.                         borderWidth: 2
  219.                     }
  220.                     ]
  221.                 },
  222.                 options: {
  223.                     scales: {
  224.                         yAxes: [{
  225.                             ticks: {
  226.                                 beginAtZero: true
  227.                             }
  228.                         }]
  229.                     }
  230.                 }
  231.             });
  232.             
  233.             var commandeSurPlusieursAnneeData = [], commandeSurPlusieursAnneeDataLabel = [], commandeSurPlusieursPayeData = [];
  234.             for (var i = 0; i < commandeSurPlusieursAnnee.length; i++){
  235.                 commandeSurPlusieursAnneeData[i] = commandeSurPlusieursAnnee[i].innerHTML ;
  236.             }
  237.             
  238.             for (var i = 0; i < commandeSurPlusieursAnneeAnnee.length; i++){    
  239.                 
  240.                 const laDate = new Date(commandeSurPlusieursAnneeAnnee[i].innerHTML.substring(2));
  241.                 const leMois = laDate.toLocaleString('default', { year: 'long' });
  242.     
  243.                 commandeSurPlusieursAnneeDataLabel[i] = commandeSurPlusieursAnneeAnnee[i].innerHTML ;
  244.             }
  246.             for(var i = 0; i < commandeSurPlusieursPaye.length; i++){
  247.                 commandeSurPlusieursPayeData[i] = commandeSurPlusieursPaye[i].innerHTML;
  248.             }
  249.             
  250.             var ctxa = document.getElementById('commandeSurPlusieursAnnee').getContext('2d');
  251.             var commandeSurPlusieursAnneeChart = new Chart(ctxa, {
  252.                 type: 'bar',
  253.                 data: {
  254.                     labels: commandeSurPlusieursAnneeDataLabel,
  255.                     datasets: [
  256.                         {
  257.                         label: 'Ventes:',
  258.                         //data: [12, 19, 3, 5, 2, 3],
  259.                         data: commandeSurPlusieursAnneeData,
  260.                         backgroundColor: [
  261.                                 'rgb(58, 124, 165)',
  262.                         ],
  263.                         borderColor: [
  264.                             'rgba(255, 99, 132, 1)',
  265.                         ],
  266.                         borderWidth: 1
  267.                     },
  269.                     {
  270.                         label: 'Montant payé:',
  271.                         //data: [12, 19, 3, 5, 2, 3],
  272.                         data: commandeSurPlusieursPayeData,
  273.                         backgroundColor: [
  274.                             'rgb(102, 187, 106)',
  275.                         ],
  276.                         borderColor: [
  277.                             'rgba(255, 99, 132, 1)',
  278.                             'rgba(54, 162, 235, 1)',
  279.                             'rgba(255, 206, 86, 1)',
  280.                             'rgba(75, 192, 192, 1)',
  281.                             'rgba(153, 102, 255, 1)',
  282.                             'rgba(255, 159, 64, 1)'
  283.                         ],
  284.                         borderWidth: 1
  285.                     }
  286.                     
  287.                     
  288.                     ]
  289.                 },
  290.                 options: {
  291.                     scales: {
  292.                         yAxes: [{
  293.                             ticks: {
  294.                                 beginAtZero: true
  295.                             }
  296.                         }]
  297.                     }
  298.                 }
  299.             });
  300.             
  301.     </script>