From ac886b0e9aa03736ff0760bb57b5f90ff57777f3 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 2 Aug 2023 11:29:50 -0700
Subject: [PATCH] feat: adds bar charts back to dashboard table (#2331)

---
 assets/components/BarChart.vue       | 9 ++++++++-
 assets/components/ContainerTable.vue | 8 ++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/assets/components/BarChart.vue b/assets/components/BarChart.vue
index a8e74da3..5e4f151f 100644
--- a/assets/components/BarChart.vue
+++ b/assets/components/BarChart.vue
@@ -15,10 +15,17 @@ const minValue = computed(() => Math.min(value, 1));
 
 <style scoped>
 .bar {
-  height: 100%;
+  height: 1.5em;
   background-color: var(--primary-color);
   transform-origin: left;
   transform: scaleX(v-bind(minValue));
   transition: transform 0.2s ease-out;
+  border-top-right-radius: 0.2em;
+  border-bottom-right-radius: 0.2em;
+}
+
+.is-overlay {
+  font-size: 0.9em;
+  padding: 0 0.5em;
 }
 </style>
diff --git a/assets/components/ContainerTable.vue b/assets/components/ContainerTable.vue
index 766c490d..9151b3d0 100644
--- a/assets/components/ContainerTable.vue
+++ b/assets/components/ContainerTable.vue
@@ -33,10 +33,14 @@
           <distance-time :date="container.created" strict :suffix="false"></distance-time>
         </td>
         <td v-if="isVisible('cpu')">
-          {{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
+          <bar-chart :value="container.movingAverage.cpu / 100">
+            {{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
+          </bar-chart>
         </td>
         <td v-if="isVisible('mem')">
-          {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
+          <bar-chart :value="container.movingAverage.memory / 100">
+            {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
+          </bar-chart>
         </td>
       </tr>
     </tbody>