feat(eda): create_report UI improvement

change stats table layout
sfu-db · Apr 7, 2021 · c849b01 · c849b01
1 parent f694b10
commit c849b01
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/dataprep/eda/create_report/templates/overview.html b/dataprep/eda/create_report/templates/overview.html
@@ -2,26 +2,23 @@
     <div class="ov-stats-container">
         <div class="tb-container">
             <h3 class="tb-title">Dataset Statistics</h3>
-            <table class="rp-table">
+            <table class="rp-table-overview">
                 {% for h, d in context.components.overview[0].items() %}
                 <tr>
                     <th>{{ h }}</th>
                     <td>{{ d }}</td>
                 </tr>
                 {% endfor %}
-            </table>
-        </div>
-        <div class="tb-container">
-            <h3 class="tb-title">Variable Types</h3>
-            <table class="rp-table">
-                {% for h, d in context.components.overview[1].items() %}
-                {% if d > 0 %}
                 <tr>
-                    <th>{{ h }}</th>
-                    <td>{{ d }}</td>
+                    <th style="vertical-align: top;">Variable Types</th>
+                    <td>
+                        <ul>
+                            {% for tp, num in context.components.overview[1].items() %}
+                            <li>{{ tp }}: {{ num }}</li>
+                            {% endfor %}
+                        </ul>
+                    </td>
                 </tr>
-                {% endif %}
-                {% endfor %}
             </table>
         </div>
     </div>

diff --git a/dataprep/eda/create_report/templates/styles.html b/dataprep/eda/create_report/templates/styles.html
@@ -30,7 +30,25 @@
         text-align: left;
         padding: 0.5em 0.5em;
     }
+    .rp-table-overview {
+        border-collapse: collapse;
+        font-size: 13px;
+        table-layout: auto;
+        width: 100%;
+        color: #212f3c;
+    }
 
+    .rp-table-overview th {
+        border-bottom: 1px solid #cccccc;
+        text-align: left;
+        padding: 0.5em 0.5em !important;
+    }
+
+    .rp-table-overview td {
+        border-bottom: 1px solid #cccccc;
+        text-align: left;
+        padding: 0.5em 0.5em;
+    }
     .id-anchor {
         position: relative;
         bottom: 70px;