From 072d12e35ffcaff9438efaef59facb462b4eace9 Mon Sep 17 00:00:00 2001
From: zivglik <zivglik@gmail.com>
Date: Thu, 12 Feb 2026 16:26:44 +0200
Subject: [PATCH 1/4] fix: adjust rowPieData calculation for improved pie chart
 layout

---
 src/Routes/SidebarRight/BarChartMonitors.react.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Routes/SidebarRight/BarChartMonitors.react.jsx b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
index 6550def08..42fb6eefe 100644
--- a/src/Routes/SidebarRight/BarChartMonitors.react.jsx
+++ b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
@@ -260,7 +260,7 @@ const BarChartMonitors = ({ metric }) => {
     () => buildPieDataFromTotals(data, legend, Theme.GRAPH_PALETTE),
     [data, legend]
   );
-  const rowPieData = useMemo(() => (pieData.length / 5) * 60 + 60, [pieData]);
+  const rowPieData = useMemo(() => (pieData.length / 5) * 50 + 70, [pieData]);
 
   const handleLegendMouseEnter = useCallback(legendItem => {
     // const idToHighlight = legendItem;

From d762ef8554cf3013085048ce39965eb37159feae Mon Sep 17 00:00:00 2001
From: zivglik <zivglik@gmail.com>
Date: Thu, 12 Feb 2026 16:54:32 +0200
Subject: [PATCH 2/4] fix: clear tooltip data on mouse leave events in
 BarChartMonitors

---
 src/Routes/SidebarRight/BarChartMonitors.react.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Routes/SidebarRight/BarChartMonitors.react.jsx b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
index 42fb6eefe..766b7fac6 100644
--- a/src/Routes/SidebarRight/BarChartMonitors.react.jsx
+++ b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
@@ -208,9 +208,15 @@ const BarChartLayer = React.memo(
                 });
               }}
               onMouseLeave={() => {
+                setTooltipData(null);
                 handleLegendMouseLeave();
+ 
+              }}
+              onMouseOut={() => {
                 setTooltipData(null);
-              }}>
+                handleLegendMouseLeave();
+              }}
+              >
               <rect
                 x="0"
                 y="5"
@@ -270,12 +276,13 @@ const BarChartMonitors = ({ metric }) => {
 
   const handleLegendMouseLeave = useCallback(() => {
     setHighlightedBars('');
+    setTooltipData(null);
   }, []);
 
   return (
     <>
       <Header>{typeName[metric]}</Header>
-      <Container $height={rowPieData}>
+      <Container $height={rowPieData} onMouseLeave={() => setTooltipData(null)}>
         <ResponsiveBarStyle
           data={data}
           keys={legend}

From f5cdd909ec191dd66e8a33339444c8510f21f01f Mon Sep 17 00:00:00 2001
From: zivglik <zivglik@gmail.com>
Date: Thu, 12 Feb 2026 17:11:38 +0200
Subject: [PATCH 3/4] fix: enhance tooltip functionality in BarChartMonitors
 with additional mouse event handlers

---
 .../SidebarRight/BarChartMonitors.react.jsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Routes/SidebarRight/BarChartMonitors.react.jsx b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
index 766b7fac6..9919b5345 100644
--- a/src/Routes/SidebarRight/BarChartMonitors.react.jsx
+++ b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
@@ -282,7 +282,13 @@ const BarChartMonitors = ({ metric }) => {
   return (
     <>
       <Header>{typeName[metric]}</Header>
-      <Container $height={rowPieData} onMouseLeave={() => setTooltipData(null)}>
+      <Container $height={rowPieData} 
+      onMouseLeave={() => setTooltipData(null)} 
+      onMouseOut={handleLegendMouseLeave} 
+      onPointerLeave={handleLegendMouseLeave}
+      onPointerOut={handleLegendMouseLeave}
+    
+      >
         <ResponsiveBarStyle
           data={data}
           keys={legend}
@@ -335,11 +341,16 @@ const BarChartMonitors = ({ metric }) => {
             ),
           ]}
         />
+       
+       
+       
+       
+       {tooltipData && <Tooltip dataTip={tooltipData} />}
 
-        {tooltipData && <Tooltip dataTip={tooltipData} />}
 
-        
-      </Container>
+
+
+     </Container>
     <Collapsible title="Total Resource Pie Chart">
       <PieContainer>
          <BarChartTotalsPie pieData={pieData} defs={designBar} fill={fillBar} />

From 9fd90d01b6c66f65466b5f5183b3683685b919fe Mon Sep 17 00:00:00 2001
From: zivglik <zivglik@gmail.com>
Date: Thu, 12 Feb 2026 19:49:17 +0200
Subject: [PATCH 4/4] fix: improve tooltip handling and clean up styles in
 BarChartMonitors and CpuBarChartMonitors

---
 src/Routes/SidebarRight/BarChartMonitors.react.jsx | 10 ++++------
 src/Routes/SidebarRight/CpuBarChartMonitors.jsx    |  3 ++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Routes/SidebarRight/BarChartMonitors.react.jsx b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
index 9919b5345..a07bd0106 100644
--- a/src/Routes/SidebarRight/BarChartMonitors.react.jsx
+++ b/src/Routes/SidebarRight/BarChartMonitors.react.jsx
@@ -12,14 +12,11 @@ import { Form } from 'components/common';
 const { Collapsible } = Form;
 
 const Container = styled.div`
-  display: flex;
+
   margin-top: 50px;
 
   height: ${({ $height }) => ($height ? `${($height)+300}px` : '70vh')};
 
-  svg + div {
-    color: #000000;
-  }
 `;
 const PieContainer = styled.div`
   width: 100%;
@@ -29,6 +26,7 @@ const PieContainer = styled.div`
 
 const ResponsiveBarStyle = styled(ResponsiveBar)`
   width: 85%;
+
 `;
 
 const typeName = {
@@ -281,7 +279,7 @@ const BarChartMonitors = ({ metric }) => {
 
   return (
     <>
-      <Header>{typeName[metric]}</Header>
+      <Header  onMouseEnter={() => setTooltipData(null)} >{typeName[metric]}</Header>
       <Container $height={rowPieData} 
       onMouseLeave={() => setTooltipData(null)} 
       onMouseOut={handleLegendMouseLeave} 
@@ -351,7 +349,7 @@ const BarChartMonitors = ({ metric }) => {
 
 
      </Container>
-    <Collapsible title="Total Resource Pie Chart">
+    <Collapsible title="Total Resource Pie Chart" onMouseEnter={() => setTooltipData(null)} >
       <PieContainer>
          <BarChartTotalsPie pieData={pieData} defs={designBar} fill={fillBar} />
       </PieContainer>
diff --git a/src/Routes/SidebarRight/CpuBarChartMonitors.jsx b/src/Routes/SidebarRight/CpuBarChartMonitors.jsx
index 94a655c55..58afeb2e8 100644
--- a/src/Routes/SidebarRight/CpuBarChartMonitors.jsx
+++ b/src/Routes/SidebarRight/CpuBarChartMonitors.jsx
@@ -6,7 +6,8 @@ import BarChartMonitors from './BarChartMonitors.react';
 
 const ContainerCPU = styled.div`
  height: 100vh;
- position: relative;
+
+
 `;
 
 const CpuBarChartMonitors = ({metric}) => (