From a29473b7ac933b31368ca163c758e8eadb4c411e Mon Sep 17 00:00:00 2001
From: adityacp
Date: Tue, 22 Dec 2020 12:48:23 +0530
Subject: Fix UI in lesson statistics

---
 stats/templates/view_lesson_tracking.html         | 110 ++++++++++++----------
 yaksh/models.py                                   |   2 +-
 yaksh/templates/yaksh/show_lesson_statistics.html |  71 ++++++++------
 3 files changed, 103 insertions(+), 80 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">
diff --git a/yaksh/models.py b/yaksh/models.py
index 2978f43..a29e910 100644
--- a/yaksh/models.py
+++ b/yaksh/models.py
@@ -2830,7 +2830,7 @@ class TOCManager(models.Manager):
         if answers.exists():
             answers = answers.values(
                 "student__first_name", "student__last_name", "student__email",
-                "student_id", "toc_id"
+                "student_id", "student__profile__roll_number", "toc_id"
                 )
             df = pd.DataFrame(answers)
             answers = df.drop_duplicates().to_dict(orient='records')
diff --git a/yaksh/templates/yaksh/show_lesson_statistics.html b/yaksh/templates/yaksh/show_lesson_statistics.html
index dfce52c..0da20ee 100644
--- a/yaksh/templates/yaksh/show_lesson_statistics.html
+++ b/yaksh/templates/yaksh/show_lesson_statistics.html
@@ -81,8 +81,8 @@
             {% else %}
                 <div class="card">
                     <div class="card-header">
-                        {{question.summary}}
-                        <div>
+                        <b>{{question.summary}}</b>
+                        <div style="font-size: 20px">
                         {% if question.language == "other" %}
                           <small class="text text-muted"><strong>Topic:</strong> <span class="badge badge-primary">{{question.topic}}</small></span>
                         {% else %}
@@ -132,15 +132,21 @@
                             {{tc.options}}
                             {% if per_tc_ans %}
                                 {% get_tc_percent tc.id per_tc_ans as percent %}
-                                <div class="progress" style="width: 30%">
-                                {% if percent %}
-                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
-                                      aria-valuemin="0" aria-valuemax="100" style="width:{{percent|floatformat}}%">
-                                        <b style="color: white;">{{percent|floatformat}}%</b>
+                                <div class="progress-wrapper col-md-4">
+                                    <div class="progress-info">
+                                        <div class="progress-percentage">
+                                          <span>
+                                            {% if percent %} {{percent|floatformat}} {% else %} 0 {% endif %}%
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress">
+                                        {% if percent %}
+                                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                              aria-valuemin="0" aria-valuemax="100" style="width:{{percent|floatformat}}%">
+                                            </div>
+                                        {% endif %}
                                     </div>
-                                {% else %}
-                                    <b style="color: black;">0%</b>
-                                {% endif %}
                                 </div>
                             {% endif %}
                             {% elif question.type == "integer" %}
@@ -180,25 +186,36 @@
                     <br><br>
                 {% endif %}
                 {% include "yaksh/paginator.html" %}
-                <table class="table table-responsive" id="stats-table">
-                    <thead>
-                    <tr>
-                        <th>Sr No.</th>
-                        <th>Student Name&nbsp;<i class="fa fa-sort"></i></th>
-                        <th>Email&nbsp;<i class="fa fa-sort"></i></th>
-                        <th>Latest Submission&nbsp;<i class="fa fa-sort"></i></th>
-                    </tr>
-                    </thead>
-                    {% for data in objects.object_list %}
+                {% if objects.object_list|length > 10 %}
+                <div class="table-responsive" style="height: 700px">
+                {% else %}
+                <div class="table-responsive">
+                {% endif %}
+                    <table class="table table-dark table-responsive" id="stats-table">
+                        <thead class="thead-dark">
                         <tr>
-                            <td>{{ forloop.counter }}</td>
-                            <td>{{data.student__first_name}} {{data.student__last_name}}</td>
-                            <td>{{data.student__email}}</td>
-                            {% get_answers data.toc_id data.student_id as user_answer %}
-                            <td>{{ user_answer.0 }}</td>
+                            <th>Sr No.</th>
+                            <th>Student Name&nbsp;<i class="fa fa-sort"></i></th>
+                            <th>Roll No&nbsp;<i class="fa fa-sort"></i></th>
+                            <th>Email&nbsp;<i class="fa fa-sort"></i></th>
+                            <th>Latest Submission&nbsp;<i class="fa fa-sort"></i></th>
                         </tr>
-                    {% endfor %}
-                </table>
+                        </thead>
+                        <tbody class="list">
+                        {% for data in objects.object_list %}
+                            <tr>
+                                <td>{{ forloop.counter }}</td>
+                                <td>{{data.student__first_name}} {{data.student__last_name}}</td>
+                                <td>{{data.student__profile__roll_number}}</td>
+                                <td>{{data.student__email}}</td>
+                                {% get_answers data.toc_id data.student_id as user_answer %}
+                                <td>{{ user_answer.0 }}</td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                <br>
                 {% include "yaksh/paginator.html" %}
             {% endif %}
         </div>
-- 
cgit