From d4364538b62c6bd5426c6d93082cfba3e41e1891 Mon Sep 17 00:00:00 2001
From: LbP22 <aakopyan@devforth.io>
Date: Wed, 8 Nov 2023 12:17:50 +0200
Subject: [PATCH] filtering by click on "Top 6 levels" item

---
 application/frontend/src/lib/Stats/Stats.scss   |  4 ++++
 application/frontend/src/lib/Stats/Stats.svelte | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/application/frontend/src/lib/Stats/Stats.scss b/application/frontend/src/lib/Stats/Stats.scss
index 1810f78..394be2f 100644
--- a/application/frontend/src/lib/Stats/Stats.scss
+++ b/application/frontend/src/lib/Stats/Stats.scss
@@ -2,6 +2,10 @@
   padding: 0;
   margin: 0 0 6px 0;
   font-size: $main-font-s;
+  cursor: pointer;
+  & :hover {
+    transform: scale(1.02);
+  }
 }
 
 .statsTittle {
diff --git a/application/frontend/src/lib/Stats/Stats.svelte b/application/frontend/src/lib/Stats/Stats.svelte
index bb11296..2c85f7f 100644
--- a/application/frontend/src/lib/Stats/Stats.svelte
+++ b/application/frontend/src/lib/Stats/Stats.svelte
@@ -3,6 +3,7 @@
     lastChosenHost,
     lastChosenService,
     lastStatsPeriod,
+    chosenStatus
   } from "../../Stores/stores.js";
   import fetchApi from "../../utils/fetch";
   import { navigate } from "svelte-routing";
@@ -90,7 +91,14 @@
         return 1;
       }
     }) as [key, name]}
-      <li class="flex spaceBetween statsItem">
+      <li class="flex spaceBetween statsItem"
+        on:click={async () => {
+            if ($chosenStatus !== key) {
+            chosenStatus.set(key);
+            } else {
+            chosenStatus.set("");
+            }
+        }}>
         <p class={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</p>
         <p>{name}</p>
       </li>