templates/landing_page/landing_page_charts.html.twig line 1

Open in your IDE?
  2. <div class="container mt-4 mb-4 d-flex flex-row loan-stats">
  4.   <div class="container m-0 p-0 individual-stat" data-aos="fade-up" >
  5.     <div class="card stat-card">
  6.       <div class="icon">
  7.         <img src="{{asset('images/depts.png')}}" alt=" ">
  8.       </div>
  9.       <div class="text">
  10.         <p class="title">Total Departments</p>
  11.         <p class="count">10</p>
  12.       </div>
  13.     </div>
  14.   </div>
  15.     
  16.   <div class="container m-0 p-0 individual-stat" data-aos="fade-up" >
  17.     <div class="card stat-card">
  18.       <div class="icon">
  19.         <img src="{{asset('images/employee.svg')}}" alt=" ">
  20.       </div>
  21.       <div class="text">
  22.         <p class="title">Total Employees</p>
  23.         <p class="count">{{ data.totEmployees }}</p>
  24.       </div>
  25.     </div>
  26.   </div>
  27.   
  28.   <div class="container m-0 p-0 individual-stat" data-aos="fade-up" >
  29.     <div class="card stat-card">
  30.       <div class="icon">
  31.         <img src="{{asset('images/admission.svg')}}" alt=" ">
  32.       </div>
  33.       <div class="text">
  34.         <p class="title">Admissions Taken</p>
  35.         <p class="count">{{ data.totAdmissions }}</p>
  36.       </div>
  37.     </div>
  38.   </div>
  39.   
  40.   <div class="container m-0 p-0 individual-stat" data-aos="fade-up" >
  41.     <div class="card stat-card">
  42.       <div class="icon">
  43.         <img src="{{asset('images/clousre.svg')}}" alt=" ">
  44.       </div>
  45.       <div class="text">
  46.         <p class="title">Closure Submitted</p>
  47.         <p class="count">{{ data.totClosures }}</p>
  48.       </div>
  49.     </div>
  50.   </div>
  51. </div>
  53. <div class="container pt-3 pb-3 d-flex flex-row justify-content-between chart-container">
  55.   
  56.     <div class="container d-flex flex-column justify-content-center align-items-center gap-4 loan-pie-chart" data-aos="fade-up" >
  57.       <!-- Pie chart content goes here -->
  58.       <div style="width: 200px; height: 200px;">
  59.         <input type ="hidden" id="ta_pie" value="{{data.ta|raw}}">
  60.         <input type ="hidden" id="nra_pie" value="{{data.nra|raw}}">
  61.         <input type ="hidden" id="ta_nra_pie" value="{{data.ta_nra|raw}}">
  62.         <canvas id="gainpfPieChart"></canvas>
  63.     </div>
  64.       <div class="container d-flex flex-row justify-content-evenly gap-3">
  65.         <div class="container m-0 p-0 d-flex flex-row align-items-center pie-label">
  66.           <div class="circle-dot nra-label-color"></div>NRA
  67.         </div>
  68.         <div class="container m-0 p-0 d-flex flex-row align-items-center pie-label">
  69.           <div class="circle-dot ta-label-color"></div>TA
  70.         </div>
  71.         <div class="container m-0 p-0 d-flex flex-row align-items-center pie-label">
  72.           <div class="circle-dot tatonra-label-color"></div>TA to NRA
  73.         </div>
  74.       </div>
  75.       </div>
  76.     <div class="loan-line-chart align-content-center" data-aos="fade-up" >
  77.       <h6 class="text-center mt-3 mb-4 line-chart-title" style="color: #EDF6F9;">Loan Application Statistics</h6>
  78.       <!-- Line chart content goes here -->
  79.       {% set total = data.nra|raw + data.ta|raw + data.ta_nra|raw %}
  80.       <div class="container pl-5 pr-5 d-flex flex-column gap-2">
  81.         <div class="stats-row pt-3">
  82.           <div class="stats-label">01</div>
  83.           <div class="stats-name">NRA</div>
  84.           <div class="progress-bar-container">
  85.             <div class="progress-bar" style="width: {{(data.ta|raw * 100) / total}}%"></div>
  86.           </div>
  87.           <div class="stats-value">{{ data.ta|raw }}</div>
  88.         </div>
  89.         <div class="stats-row pt-3">
  90.           <div class="stats-label">02</div>
  91.           <div class="stats-name">TA</div>
  92.           <div class="progress-bar-container">
  93.             <div class="progress-bar" style="width: {{(data.nra|raw * 100) / total}}%"></div>
  94.           </div>
  95.           <div class="stats-value">{{ data.nra|raw }}</div>
  96.         </div>
  97.         <div class="stats-row pt-3">
  98.           <div class="stats-label">03</div>
  99.           <div class="stats-name">TA to NRA</div>
  100.           <div class="progress-bar-container">
  101.             <div class="progress-bar" style="width: {{(data.ta_nra|raw * 100) / total}}%"></div>
  102.           </div>
  103.           <div class="stats-value">{{ data.ta_nra|raw }}</div>
  104.         </div>
  105.         <div class="stats-row pt-3">
  106.         </div>
  107.       </div>
  108.     </div>
  109.   </div>
  110.  
  111.