Merge pull request #483 from dimagi/dashboard-polish

Dashboard polish
dimagi · Jan 29, 2025 · 25758e6 · 25758e6
2 parents e23b885 + 2d18bda
commit 25758e6
Showing 1 changed file with 27 additions and 16 deletions.
diff --git a/commcare_connect/templates/reports/dashboard.html b/commcare_connect/templates/reports/dashboard.html
@@ -17,10 +17,10 @@ <h2 class="my-4">Program Dashboard</h2>
     </div>
   </div>
   <div class="row">
-    <div class="col-6">
+    <div class="col-12 col-md-6">
       <h4>Front-Line Worker Earnings</h4>
       <div class="row">
-        <div class="col-6 mb-3">
+        <div class="col-12 col-sm-6 mb-3">
           <div class="card">
             <div class="card-body">
               <div class="small text-muted mt-1">Amount Earned by FLWs (USD)</div>
@@ -34,7 +34,7 @@ <h4>Front-Line Worker Earnings</h4>
             </div>
           </div>
         </div>
-        <div class="col-6 mb-3">
+        <div class="col-12 col-sm-6 mb-3">
           <div class="card">
             <div class="card-body">
               <div class="small text-muted mt-1">Amount Paid to FLWs (USD)</div>
@@ -50,10 +50,10 @@ <h4>Front-Line Worker Earnings</h4>
         </div>
       </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6">
       <h4>Organization Earnings</h4>
       <div class="row">
-        <div class="col-6 mb-3">
+        <div class="col-12 col-sm-6 mb-3">
           <div class="card">
             <div class="card-body">
               <div class="small text-muted mt-1">Amount Earned by Organizations (USD)</div>
@@ -67,7 +67,7 @@ <h4>Organization Earnings</h4>
             </div>
           </div>
         </div>
-        <div class="col-6 mb-3">
+        <div class="col-12 col-sm-6 mb-3">
           <div class="card">
             <div class="card-body">
               <div class="small text-muted mt-1">Amount Paid to Organizations (USD)</div>
@@ -146,7 +146,7 @@ <h4>Program Metrics</h4>
 </div>
 <div class="container">
   <div class="row">
-    <div class="col-12 col-md-6">
+    <div class="col-12">
       <h4 class="my-2">Service Delivery Map</h3>
       <div class="position-relative">
         <div id="map" class="mt-3 mb-2 rounded border" style="height: 500px;"></div>
@@ -158,24 +158,26 @@ <h4 class="my-2">Service Delivery Map</h3>
         </div>
       </div>
     </div>
-    <div class="col-12 col-md-6">
+  </div>
+  <div class="row">
+    <div class="col-12">
       <h4 class="my-2">Visit Breakdown</h3>
       <div class="row mb-4">
         <div class="col-12 col-md-6">
           <h5 class="my-2">By Program</h3>
-          <div style="position: relative; height: 200px; width: 100%;">
+          <div style="position: relative; height: 300px; width: 100%;">
             <canvas id="visits-by-program"></canvas>
           </div>
         </div>
         <div class="col-12 col-md-6">
           <h5 class="my-2">By Status</h3>
-          <div style="position: relative; height: 200px; width: 100%;">
+          <div style="position: relative; height: 300px; width: 100%;">
             <canvas id="visits-by-status"></canvas>
           </div>
         </div>
       </div>
       <h5>Over time</h5>
-      <div style="position: relative; height: 200px; width: 100%;">
+      <div style="position: relative; height: 300px; width: 100%;">
         <canvas id="visits-over-time"></canvas>
       </div>
 
@@ -266,7 +268,8 @@ <h5>Over time</h5>
       center: [20, 0], // Centered on Africa (roughly central coordinates)
       zoom: 2,
     });
-
+    // add a fullscreen control
+    map.addControl(new mapboxgl.FullscreenControl());
     // This loads a map with two layers, one is a cluster with donut
     // charts based on the visit data, inspired heavily by this mapbox example:
     // https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
@@ -371,13 +374,21 @@ <h5>Over time</h5>
     const statusPieCtx = document.getElementById('visits-by-status');
 
     let timeSeriesChart, programPieChart, statusPieChart;
+    let previousQueryString = '';
 
     async function updateCharts() {
-      try {
-        const formElement = document.querySelector('#filterForm form');
-        const formData = new FormData(formElement);
-        const queryString = new URLSearchParams(formData).toString();
+      const formElement = document.querySelector('#filterForm form');
+      const formData = new FormData(formElement);
+      const queryString = new URLSearchParams(formData).toString();
 
+      // Only update if the query string has changed
+      if (queryString === previousQueryString) {
+        return;
+      }
+
+      previousQueryString = queryString;
+
+      try {
         const response = await fetch(`{% url 'reports:dashboard_charts_api' %}?${queryString}`);
         const data = await response.json();