From 5b3656456a2dc3b937efccdeea9172f5ccd30a65 Mon Sep 17 00:00:00 2001
From: Simon Brugman <sfbbrugman@gmail.com>
Date: Tue, 14 Jun 2022 10:50:51 +0200
Subject: [PATCH] perf: reduce file size reports

---
 .../templates/aggregated-overview.html        |  4 ++--
 .../templates/assets/css/custom-style.css     | 20 +++++--------------
 popmon/visualization/templates/table.html     |  6 +++---
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/popmon/visualization/templates/aggregated-overview.html b/popmon/visualization/templates/aggregated-overview.html
index 64133aac..9ffc73f6 100644
--- a/popmon/visualization/templates/aggregated-overview.html
+++ b/popmon/visualization/templates/aggregated-overview.html
@@ -6,11 +6,11 @@
           <div class="tl-container">
           {% for i in [2, 1, 0] %}
               {% if vals[i] > 0 %}
-                  <div style="width: calc({{ vals[i] }} / {{ vals['total'] }} * 100%)" class="tl-bar {% if i == 2%}red{%elif i == 1%}yellow{%else%}green{%endif%}">
+                  <div style="width: calc({{ vals[i] }} / {{ vals['total'] }} * 100%)" class="tl-bar {% if i == 2%}r{%elif i == 1%}y{%else%}g{%endif%}">
                       {{ vals[i] }} ({{ "%d" % (vals[i] / (vals["total"] * 0.01))}}%)
                   </div>
               {% else %}
-                  <div style="width: 0%" class="white">&nbsp;</div>
+                  <div style="width: 0%">&nbsp;</div>
               {% endif %}
           {% endfor %}
           </div>
diff --git a/popmon/visualization/templates/assets/css/custom-style.css b/popmon/visualization/templates/assets/css/custom-style.css
index 80f56276..6505755d 100644
--- a/popmon/visualization/templates/assets/css/custom-style.css
+++ b/popmon/visualization/templates/assets/css/custom-style.css
@@ -64,17 +64,17 @@ table.overview tbody td.metric{
     min-width: max-content;
     width: 200px;
 }
-table.overview tbody td.cell{
-   border: 1px solid #333333;
+table.overview tbody td:not(.metric){
+   border: 1px solid #333;
    text-align: center;
 }
-table.overview td.cell-green{
+.g{
     background: green;
 }
-table.overview td.cell-yellow{
+.y{
     background: rgba(255, 200, 0, 1.0);
 }
-table.overview td.cell-red{
+.r{
     background: rgba(255, 0, 0, 1.0);
 }
 table.overview tfoot td {
@@ -93,16 +93,6 @@ table.overview tfoot td span{
 }
 
 /* overview progress bars */
-.tl-bar.green{
-    background-color: green;
-}
-.tl-bar.yellow{
-    background-color: rgba(255, 200, 0, 1.0);
-}
-.tl-bar.red{
-    background-color: rgba(255, 0, 0, 1.0);
-}
-
 .tl-bar{
     padding-top:10px;
     padding-bottom:10px;
diff --git a/popmon/visualization/templates/table.html b/popmon/visualization/templates/table.html
index 6e3066d1..e3c94cef 100644
--- a/popmon/visualization/templates/table.html
+++ b/popmon/visualization/templates/table.html
@@ -14,15 +14,15 @@
     {% for label in labels %}
         {% if data[metric][label] | length  == 1 %}
             {% with class = data[metric][label][0] %}
-            <td class="cell cell-{{ class }}">&nbsp;</td>
+            <td class="{{ class }}">&nbsp;</td>
             {% endwith %}
         {% elif data[metric][label] | length == 2 %}
             {% with rgba, value = data[metric][label] %}
-            <td class="cell" style="background-color: rgba({{ ', '.join(rgba) }})">{{ value }}</td>
+            <td style="background-color: rgba({{ ', '.join(rgba) }})">{{ value }}</td>
             {% endwith %}
         {% elif data[metric][label] | length == 3 %}
             {% with text_color, rgba, value = data[metric][label] %}
-            <td class="cell" style="color: {{ text_color }}; background-color: rgba({{ ', '.join(rgba) }})">{{ value }}</td>
+            <td style="color: {{ text_color }}; background-color: rgba({{ ', '.join(rgba) }})">{{ value }}</td>
             {% endwith %}
         {% endif %}
     {% endfor %}