From d59baf303262d2dfd6843039dfb3ee455a50afe6 Mon Sep 17 00:00:00 2001
From: Stanislav Popov <popstas@gmail.com>
Date: Tue, 25 Aug 2020 02:19:24 +0500
Subject: [PATCH] fix: pretty stats table: filters and alerts by grid

---
 components/Stats.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/Stats.vue b/components/Stats.vue
index ca33fc0..92748da 100644
--- a/components/Stats.vue
+++ b/components/Stats.vue
@@ -13,7 +13,7 @@
           <div v-for="subval of fStat.subvalues" :key="subval.value"
             :class="{'item-details__subvalue': true, [subval.validateClass]: true}"
           >
-            {{ subval.value }}: {{ subval.count }}
+            <span class="item-details__subvalue-text">{{ subval.value }}: {{ subval.count }}</span>
 
             <FilterPresetButton class="field-preset" :preset="{ q: fStat.name + '=' + subval.value }" toggle no-count>
               <icon name="filter" scale="0.6"></icon>
@@ -57,6 +57,10 @@
   }
 
   .item-details__subvalue {
+    &:hover {
+      background: #eee;
+    }
+
     &.warning {
       &::after {
         content: "⚠";
@@ -71,6 +75,11 @@
         float: right;
       }
     }
+
+    &-text {
+      display: inline-block;
+      min-width: 100px;
+    }
   }
 }
 </style>
@@ -205,7 +214,7 @@ export default {
             name: field.name,
             title: field.comment || field.name,
             class: validateClass,
-            value: valueText || val,
+            value: '<span class="item-details__subvalue-text">' + (valueText || val) + '</span>',
             subvalues: subvalues,
           });
         }