Fix UI in lesson statistics

1 files changed, 58 insertions, 52 deletions

diff --git a/stats/templates/view_lesson_tracking.html b/stats/templates/view_lesson_tracking.html
index 75573c0..b59fa7a 100644
--- a/stats/templates/view_lesson_tracking.html
+++ b/stats/templates/view_lesson_tracking.html
@@ -31,59 +31,65 @@
         <i class="fa fa-arrow-left"></i>&nbsp;Back
     </a>
     <br><br>
-    {% include "yaksh/paginator.html" %}
-    <br>
-        <div class="row">
-        <div class="col" id='barDiv1'></div>
-        <div class="col" id="barDiv2"></div>
-        <div class="col" id="barDiv3"></div>
+    <div class="row">
+        <div class="card" style="margin: 1%">
+            <div class="col" id='barDiv1'></div>
+        </div>
+        <div class="card" style="margin: 1%">
+            <div class="col" id="barDiv2"></div>
         </div>
-        <script type="text/javascript">
-            var config = {responsive: true, displayModeBar: false}
-            var data = [
-                {
-                    x: ["Completed", "Not Completed"],
-                    y: ["{{completion.0}}", "{{completion.1}}"],
-                    type: 'bar'
-                }
-            ];
-            var layout = {
-                title: "Number of completions (Out of {{visits.2}})",
-                xaxis: {title: 'Completion status'},
-                yaxis: {title: 'Count'},
-                width: 400,
-                height: 400,
-            };
-            Plotly.newPlot('barDiv1', data, layout, config);
-            var data = [
-                {
-                    x: ["Visited", "Not Visited"],
-                    y: ["{{visits.0}}", "{{visits.1}}"],
-                    type: 'bar'
-                }
-            ];
-            var layout = {
-                title: "Number of visits (Out of {{visits.2}})",
-                xaxis: {title: 'Visit status'},
-                yaxis: {title: 'Count'},
-                width: 400,
-                height: 400,
-            };
-            Plotly.newPlot('barDiv2', data, layout, config);
-            var x_data = ["0-25", "25-50", "50-75", "75-100"], y_data = [];
-            {% for i, j in percentage_data.items %}
-                y_data.push("{{j}}")
-            {% endfor %}
-            var data = [{x: x_data, y: y_data, type: 'bar'}];
-            var layout = {
-                title: "Range wise completion (Out of {{total}})",
-                xaxis: {title: 'Percentage Range'},
-                yaxis: {title: 'Count'},
-                width: 400,
-                height: 400,
-            };
-            Plotly.newPlot('barDiv3', data, layout, config);
-        </script>
+        <div class="card" style="margin: 1%">
+            <div class="col" id="barDiv3"></div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        var config = {responsive: true, displayModeBar: false}
+        var data = [
+            {
+                x: ["Completed", "Not Completed"],
+                y: ["{{completion.0}}", "{{completion.1}}"],
+                type: 'bar'
+            }
+        ];
+        var layout = {
+            title: "Number of completions (Out of {{visits.2}})",
+            xaxis: {title: 'Completion status'},
+            yaxis: {title: 'Count'},
+            width: 400,
+            height: 400,
+        };
+        Plotly.newPlot('barDiv1', data, layout, config);
+        var data = [
+            {
+                x: ["Visited", "Not Visited"],
+                y: ["{{visits.0}}", "{{visits.1}}"],
+                type: 'bar'
+            }
+        ];
+        var layout = {
+            title: "Number of visits (Out of {{visits.2}})",
+            xaxis: {title: 'Visit status'},
+            yaxis: {title: 'Count'},
+            width: 400,
+            height: 400,
+        };
+        Plotly.newPlot('barDiv2', data, layout, config);
+        var x_data = ["0-25", "25-50", "50-75", "75-100"], y_data = [];
+        {% for i, j in percentage_data.items %}
+            y_data.push("{{j}}")
+        {% endfor %}
+        var data = [{x: x_data, y: y_data, type: 'bar'}];
+        var layout = {
+            title: "Range wise completion (Out of {{total}})",
+            xaxis: {title: 'Percentage Range'},
+            yaxis: {title: 'Count'},
+            width: 400,
+            height: 400,
+        };
+        Plotly.newPlot('barDiv3', data, layout, config);
+    </script>
+    <br>
+    {% include "yaksh/paginator.html" %}
     <br>
     <div class="table-responsive">
     <table class="table table-dark table-responsive-sm" id="stats-table">