legends

fezcode · fezcode · commit 37d1200d52c6 · 2025-10-16T01:29:41.000+03:00
diff --git a/src/components/ColorLegends.js b/src/components/ColorLegends.js
@@ -27,17 +27,27 @@ const categoryStyles = {
   },
 };
 
-const ColorLegends = () => {
+const ColorLegends = ({ onLegendClick, hiddenLegends }) => {
   return (
     <div className="flex justify-center mt-8">
       <div className="flex items-center flex-wrap justify-center space-x-4">
         {Object.keys(categoryStyles).map((category) => (
           <div key={category} className="flex items-center mb-2">
             <div
-              className="w-4 h-4 rounded-full mr-2"
+              className={`w-4 h-4 rounded-full mr-2 cursor-pointer ${
+                hiddenLegends.includes(category) ? "opacity-50" : "opacity-100"
+              }`}
               style={{ backgroundColor: categoryStyles[category].backgroundColor, border: `1px solid ${categoryStyles[category].borderColor}` }}
+              onClick={() => onLegendClick(category)}
             ></div>
-            <span>{category}</span>
+            <span
+              className={`cursor-pointer ${
+                hiddenLegends.includes(category) ? "opacity-50 line-through" : "opacity-100"
+              }`}
+              onClick={() => onLegendClick(category)}
+            >
+              {category}
+            </span>
           </div>
         ))}
       </div>
diff --git a/src/components/Label.js b/src/components/Label.js
@@ -1,8 +1,9 @@
 import React from 'react';
 
-const Label = ({ children }) => {
+
+const Label = ({ children, onClick }) => {
   return (
-    <span className="inline-block bg-gray-700 text-gray-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded-full">
+    <span className="inline-block bg-gray-700 text-gray-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded-full" onClick={onClick}>
       {children}
     </span>
   );
diff --git a/src/pages/LogsPage.js b/src/pages/LogsPage.js
@@ -10,6 +10,25 @@ const LogsPage = () => {
   const [logs, setLogs] = useState([]);
   const [showLegends, setShowLegends] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [hiddenLegends, setHiddenLegends] = useState([]);
+
+  const handleLegendClick = (legend) => {
+    setHiddenLegends((prevHiddenLegends) => {
+      if (prevHiddenLegends.includes(legend)) {
+        return prevHiddenLegends.filter((item) => item !== legend);
+      } else {
+        return [...prevHiddenLegends, legend];
+      }
+    });
+  };
+
+  const [filteredLogs, setFilteredLogs] = useState([]);
+
+  useEffect(() => {
+    setFilteredLogs(
+      logs.filter((log) => !hiddenLegends.includes(log.category))
+    );
+  }, [logs, hiddenLegends]);
 
   useEffect(() => {
     const fetchLogs = async () => {
@@ -74,12 +93,15 @@ const LogsPage = () => {
         </div>
         {showLegends && (
           <div className="mx-auto p-6 border border-gray-700 shadow-lg text-center bg-gray-900 mt-[-16px] mb-8">
-            <h2 className="text-2xl font-semibold tracking-tight text-white">Legends</h2>
-            <ColorLegends />
+            <h2 className="mb-[-16px] text-2xl font-semibold tracking-tight text-white">Legends</h2>
+            <ColorLegends
+              onLegendClick={handleLegendClick}
+              hiddenLegends={hiddenLegends}
+            />
           </div>
         )}
         <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 ${!showLegends ? 'mt-8' : ''}`}>
-          {logs.map((log, index) => (
+          {filteredLogs.map((log, index) => (
             <LogCard key={index} log={log} index={index} totalLogs={logs.length} />
           ))}
         </div>
