From 856e8e46580e8adf908c67a3f69f56524b50ba5e Mon Sep 17 00:00:00 2001
From: Sicnecher <efraty665@gmail.com>
Date: Tue, 4 Jun 2024 23:24:56 +0300
Subject: [PATCH 1/5] sicnecher-first

---
 src/layout/header/Header.tsx                  |   2 -
 src/locale/en.json                            |   3 +-
 src/locale/he.json                            |   3 +-
 .../LineHbarChart/HbarChart/HbarChart.tsx     |  10 +-
 src/pages/gapsPatterns/GapsPatternsPage.tsx   |  26 ++--
 src/pages/homepage/HomePage.scss              | 141 +++++++++++++++++-
 src/pages/homepage/HomePage.tsx               |  92 +++++++++++-
 7 files changed, 251 insertions(+), 26 deletions(-)

diff --git a/src/layout/header/Header.tsx b/src/layout/header/Header.tsx
index d65cc98e..8781bc41 100644
--- a/src/layout/header/Header.tsx
+++ b/src/layout/header/Header.tsx
@@ -6,7 +6,6 @@ import { MenuOutlined } from '@ant-design/icons'
 import './Header.css'
 import cn from 'classnames'
 import ToggleThemeButton from './ToggleThemeButton'
-import { DonationButton } from './DonationButton'
 import HeaderLinks from './HeaderLinks/HeaderLinks'
 import { LanguageToggle } from './LanguageToggle'
 
@@ -22,7 +21,6 @@ const MainHeader = () => {
       <HeaderLinks>
         <LanguageToggle />
         <ToggleThemeButton toggleTheme={toggleTheme} isDarkTheme={isDarkTheme} />
-        <DonationButton />
       </HeaderLinks>
     </Header>
   )
diff --git a/src/locale/en.json b/src/locale/en.json
index 8daae722..8a757509 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -4,7 +4,8 @@
     "databus_definition": "The open platform for real data on the quality of public transportation lines in Israel",
     "website_goal": "The purpose of the site is to improve the quality of public transportation in Israel by providing reliable information to journalists, citizens, transportation companies, and government officials in Israel.",
     "show_button": "Show",
-    "copyright": "© The Public Knowledge Workshop"
+    "copyright": "© The Public Knowledge Workshop",
+    "open_menu": "Start Exploring"
   },
   "homepage_title": "Home",
   "dashboard_page_title": "Public transport operators according to planned trips",
diff --git a/src/locale/he.json b/src/locale/he.json
index a752b01d..d87752fc 100644
--- a/src/locale/he.json
+++ b/src/locale/he.json
@@ -4,7 +4,8 @@
     "databus_definition": "הפלטפורמה הפתוחה לנתוני אמת על איכות קווי התחבורה הציבורית בישראל",
     "website_goal": "מטרת האתר היא לשפר את איכות התחבורה הציבורית בארץ ע\"י מתן מידע אמין לעיתונאים, אזרחים, חברות התחבורה, וגורמי ממשל בישראל.",
     "show_button": "הצג",
-    "copyright": "© הסדנא לידע ציבורי (ע\"ר)"
+    "copyright": "© הסדנא לידע ציבורי (ע\"ר)",
+    "open_menu": "תתחיל לחקור"
   },
   "homepage_title": "ראשי",
   "dashboard_page_title": "קיום נסיעות",
diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
index 47f5e85c..df9c9bc0 100644
--- a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
@@ -17,7 +17,6 @@ export function HbarChart({
   const percents = entries
     .map((o) => (o.actual / o.total) * 100)
     .map((p) => (complement ? Math.max(100 - p, 0) : p))
-
   const rows = entries.map((entry, idx) => ({
     percent: percents[idx],
     ...entry,
@@ -49,16 +48,13 @@ export function HbarChart({
               <div className="entryName" style={{ borderBottomColor: entry.color }}>
                 {entry.name.split('|').slice(0, 2).join(' | ')}
               </div>
-
               <div className="entryBar">
                 {wrapWithTooltip(
                   <div
                     className="barDisplay"
-                    style={{ width: `${entry.percent}%`, backgroundColor: entry.color }}></div>,
-                  entry,
-                )}
-                {wrapWithTooltip(
-                  <div className="entryBarTotal">{entry.percent.toFixed(2)}%</div>,
+                    style={{ width: `${entry.percent}%`, backgroundColor: entry.color }}>
+                    {entry.percent.toFixed(2)}%
+                  </div>,
                   entry,
                 )}
               </div>
diff --git a/src/pages/gapsPatterns/GapsPatternsPage.tsx b/src/pages/gapsPatterns/GapsPatternsPage.tsx
index f4c56af7..1dee3ea4 100644
--- a/src/pages/gapsPatterns/GapsPatternsPage.tsx
+++ b/src/pages/gapsPatterns/GapsPatternsPage.tsx
@@ -35,6 +35,7 @@ const { Title } = Typography
 import { useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
 import InfoYoutubeModal from '../components/YoutubeModal'
+
 // Define prop types for the component
 interface BusLineStatisticsProps {
   lineRef: number
@@ -61,7 +62,10 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
 }
 
 function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatisticsProps) {
-  const [sortingMode, setSortingMode] = useState<'hour' | 'severity'>('hour')
+  const sorting_mode = sessionStorage.getItem('sorting_mode') as 'hour' | 'severity'
+  const [sortingMode, setSortingMode] = useState<'hour' | 'severity'>(
+    sorting_mode ? sorting_mode : 'hour',
+  )
   const hourlyData = useGapsList(fromDate, toDate, operatorRef, lineRef, sortingMode)
   const isLoading = !hourlyData.length
   const { t } = useTranslation()
@@ -70,6 +74,11 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
     ...hourlyData.map((entry) => entry.actual_rides),
   )
 
+  function changeSorting(e: RadioChangeEvent) {
+    setSortingMode(e.target.value as 'hour' | 'severity')
+    sessionStorage.setItem('sorting_mode', e.target.value as 'hour' | 'severity')
+  }
+
   return (
     lineRef > 0 && (
       <Widget>
@@ -79,12 +88,10 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
           <>
             <Radio.Group
               style={{ marginBottom: '10px' }}
-              onChange={(e: RadioChangeEvent) =>
-                setSortingMode(e.target.value as 'hour' | 'severity')
-              }
+              onChange={changeSorting}
               value={sortingMode}>
               <Radio.Button value="hour">{t('order_by_hour')}</Radio.Button>
-              <Radio.Button value="severity">{t('order_by_severity')} </Radio.Button>
+              <Radio.Button value="severity">{t('order_by_severity')}</Radio.Button>
             </Radio.Group>
             <ResponsiveContainer width="100%" height={hourlyData.length * 50}>
               <ComposedChart
@@ -236,13 +243,13 @@ const GapsPatternsPage = () => {
           />
         </Grid>
         <Grid xs={12}>
-          {routesIsLoading && (
+          {routesIsLoading ? (
             <Row>
               <Label text={t('loading_routes')} />
               <Spin />
             </Row>
-          )}
-          {!routesIsLoading &&
+          ) : (
+            !routesIsLoading &&
             routes &&
             (routes.length === 0 ? (
               <NotFound>{t('line_not_found')}</NotFound>
@@ -254,7 +261,8 @@ const GapsPatternsPage = () => {
                   setRouteKey={(key) => setSearch((current) => ({ ...current, routeKey: key }))}
                 />
               </>
-            ))}
+            ))
+          )}
         </Grid>
       </Grid>
       <Grid xs={12}>
diff --git a/src/pages/homepage/HomePage.scss b/src/pages/homepage/HomePage.scss
index dac67f17..6a7e210c 100644
--- a/src/pages/homepage/HomePage.scss
+++ b/src/pages/homepage/HomePage.scss
@@ -1,3 +1,104 @@
+// .ant-layout {
+//   position: relative;
+// }
+
+// .container {
+//   width: 100%;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   text-align: center;
+//   overflow: hidden;
+
+//   :hover{
+//     cursor: default;
+//   }
+
+//   img {
+//     height: 15rem;
+//   }
+
+//   h1 {
+//     margin: 0;
+//   }
+
+//   p {
+//     margin-bottom: 3rem;
+//     font-size: large;
+//   }
+// }
+
+// footer {
+//   background-color: #b0d0a4;
+//   width: 100%;
+//   font-weight: 500;
+//   position: absolute;
+//   bottom: 0;
+//   padding: 0.5rem 0;
+// }
+
+// .links {
+//   display: none;
+//   grid-template-columns: repeat(4, 1fr);
+//   gap: 1rem;
+
+//   @media (width <= 600px) {
+//     margin-bottom: 3rem;
+//   }
+
+//   margin-bottom: 10vh;
+// }
+
+// .menuLink{
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   font-size: medium;
+//   font-weight: 600;
+//   justify-content: space-between;
+//   margin-bottom: 10vh;
+
+//   span {
+//     margin-bottom: 0.5rem;
+//   }
+// }
+
+// .page-link {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   font-size: medium;
+//   font-weight: 600;
+//   justify-content: space-between;
+
+//   span {
+//     margin-bottom: 0.5rem;
+//   }
+
+//   a {
+//     background-color: #b74c42;
+//     color: white;
+//     padding: 0 1.5rem;
+//     border-radius: 0.5rem;
+//     transition: 0.2s ease-in-out 0s;
+
+//     &:hover {
+//       transform: scale(1.25);
+//       cursor: pointer;
+//     }
+//   }
+// }
+
+// @media (min-width = 600px) {
+//   .links{
+//     display:grid
+//   }
+
+//   .menuLink{
+//     display: none
+//   }
+// }
+
 .ant-layout {
   position: relative;
 }
@@ -33,14 +134,23 @@
   }
 }
 
+.menu-link{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: medium;
+  font-weight: 600;
+  justify-content: space-between;
+
+  span {
+    margin-bottom: 0.5rem;
+  }
+}
+
 .links {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
-
-  @media (width <= 600px) {
-    margin-bottom: 3rem;
-  }
 }
 
 .page-link {
@@ -67,3 +177,26 @@
     }
   }
 }
+
+@media screen and (width > 600px) {
+  .links{
+    display:grid;
+    margin-bottom: 3rem;
+  }
+
+  .menu-link{
+    display: none
+  }
+}
+
+
+@media screen and (width < 601px) {
+  .links{
+    display:none
+  }
+
+  .menu-link{
+    display: flex;
+    margin-bottom: 3rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/homepage/HomePage.tsx b/src/pages/homepage/HomePage.tsx
index 241cd3d1..1550f365 100644
--- a/src/pages/homepage/HomePage.tsx
+++ b/src/pages/homepage/HomePage.tsx
@@ -1,3 +1,76 @@
+// import { NavLink, To } from 'react-router-dom'
+// import busImage from '../../img/busImg.png'
+// import './HomePage.scss'
+// import { useTranslation } from 'react-i18next'
+// import {
+//   DirectionsBusOutlined,
+//   HistoryOutlined,
+//   MapOutlined,
+//   MenuOutlined,
+//   ViewKanbanOutlined,
+// } from '@mui/icons-material'
+// import { SvgIconProps } from '@mui/material'
+// import React, { useContext } from 'react'
+// import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
+
+// export const HomePage = () => {
+//   const { t } = useTranslation()
+//   const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+
+//   return (
+//     <div className="container">
+//       <img src={busImage} alt="Public Transportaion Bus Illustration" />
+//       <h1>{t('homepage.welcome')}</h1>
+//       <h2>{t('homepage.databus_definition')}</h2>
+//       <p>{t('homepage.website_goal')}</p>
+//       <section className="menLink">
+//         <PageLink
+//           icon={<MenuOutlined />}
+//           label={t('homepage.open_menu')}
+//           to={() => setDrawerOpen(true)}
+//         />
+//       </section>
+//       <section className="links">
+//         <PageLink icon={<HistoryOutlined />} label={t('timeline_page_title')} to="/timeline" />
+//         <PageLink icon={<DirectionsBusOutlined />} label={t('gaps_page_title')} to="/gaps" />
+//         <PageLink
+//           icon={<ViewKanbanOutlined />}
+//           label={t('gaps_patterns_page_title')}
+//           to="/gaps_patterns"
+//         />
+//         <PageLink icon={<MapOutlined />} label={t('time_based_map_page_title')} to="/map" />
+//       </section>
+//       <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
+//     </div>
+//   )
+// }
+
+// const PageLink = ({
+//   icon,
+//   label,
+//   to,
+// }: {
+//   icon: React.ReactElement<SvgIconProps>
+//   label: string
+//   to: To | (() => void)
+// }) => {
+//   const { t } = useTranslation()
+
+//   return (
+//     <div className="page-link">
+//       {icon}
+//       <span>{label}</span>
+//       {typeof to == 'function' ? (
+//         <a onClick={to}>{t('homepage.show_button')}</a>
+//       ) : (
+//         <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+//       )}
+//     </div>
+//   )
+// }
+
+// export default HomePage
+
 import { NavLink, To } from 'react-router-dom'
 import busImage from '../../img/busImg.png'
 import './HomePage.scss'
@@ -6,12 +79,16 @@ import {
   DirectionsBusOutlined,
   HistoryOutlined,
   MapOutlined,
+  MenuOutlined,
   ViewKanbanOutlined,
 } from '@mui/icons-material'
 import { SvgIconProps } from '@mui/material'
+import { useContext } from 'react'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 
 export const HomePage = () => {
   const { t } = useTranslation()
+  const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
 
   return (
     <div className="container">
@@ -19,6 +96,13 @@ export const HomePage = () => {
       <h1>{t('homepage.welcome')}</h1>
       <h2>{t('homepage.databus_definition')}</h2>
       <p>{t('homepage.website_goal')}</p>
+      <section className="menu-link">
+        <PageLink
+          icon={<MenuOutlined />}
+          label={t('homepage.open_menu')}
+          to={() => setDrawerOpen(true)}
+        />
+      </section>
       <section className="links">
         <PageLink icon={<HistoryOutlined />} label={t('timeline_page_title')} to="/timeline" />
         <PageLink icon={<DirectionsBusOutlined />} label={t('gaps_page_title')} to="/gaps" />
@@ -41,7 +125,7 @@ const PageLink = ({
 }: {
   icon: React.ReactElement<SvgIconProps>
   label: string
-  to: To
+  to: To | (() => void)
 }) => {
   const { t } = useTranslation()
 
@@ -49,7 +133,11 @@ const PageLink = ({
     <div className="page-link">
       {icon}
       <span>{label}</span>
-      <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      {typeof to == 'function' ? (
+        <a onClick={to}>{t('homepage.show_button')}</a>
+      ) : (
+        <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      )}
     </div>
   )
 }

From e6e543aa0338521f3e178310dea4f8ae5717a29c Mon Sep 17 00:00:00 2001
From: Sicnecher <efraty665@gmail.com>
Date: Tue, 4 Jun 2024 23:28:37 +0300
Subject: [PATCH 2/5] sicnecher commit

---
 src/pages/homepage/HomePage.scss | 101 -------------------------------
 src/pages/homepage/HomePage.tsx  |  73 ----------------------
 2 files changed, 174 deletions(-)

diff --git a/src/pages/homepage/HomePage.scss b/src/pages/homepage/HomePage.scss
index 6a7e210c..753a3eae 100644
--- a/src/pages/homepage/HomePage.scss
+++ b/src/pages/homepage/HomePage.scss
@@ -1,104 +1,3 @@
-// .ant-layout {
-//   position: relative;
-// }
-
-// .container {
-//   width: 100%;
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   text-align: center;
-//   overflow: hidden;
-
-//   :hover{
-//     cursor: default;
-//   }
-
-//   img {
-//     height: 15rem;
-//   }
-
-//   h1 {
-//     margin: 0;
-//   }
-
-//   p {
-//     margin-bottom: 3rem;
-//     font-size: large;
-//   }
-// }
-
-// footer {
-//   background-color: #b0d0a4;
-//   width: 100%;
-//   font-weight: 500;
-//   position: absolute;
-//   bottom: 0;
-//   padding: 0.5rem 0;
-// }
-
-// .links {
-//   display: none;
-//   grid-template-columns: repeat(4, 1fr);
-//   gap: 1rem;
-
-//   @media (width <= 600px) {
-//     margin-bottom: 3rem;
-//   }
-
-//   margin-bottom: 10vh;
-// }
-
-// .menuLink{
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   font-size: medium;
-//   font-weight: 600;
-//   justify-content: space-between;
-//   margin-bottom: 10vh;
-
-//   span {
-//     margin-bottom: 0.5rem;
-//   }
-// }
-
-// .page-link {
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   font-size: medium;
-//   font-weight: 600;
-//   justify-content: space-between;
-
-//   span {
-//     margin-bottom: 0.5rem;
-//   }
-
-//   a {
-//     background-color: #b74c42;
-//     color: white;
-//     padding: 0 1.5rem;
-//     border-radius: 0.5rem;
-//     transition: 0.2s ease-in-out 0s;
-
-//     &:hover {
-//       transform: scale(1.25);
-//       cursor: pointer;
-//     }
-//   }
-// }
-
-// @media (min-width = 600px) {
-//   .links{
-//     display:grid
-//   }
-
-//   .menuLink{
-//     display: none
-//   }
-// }
-
 .ant-layout {
   position: relative;
 }
diff --git a/src/pages/homepage/HomePage.tsx b/src/pages/homepage/HomePage.tsx
index 1550f365..c8e435df 100644
--- a/src/pages/homepage/HomePage.tsx
+++ b/src/pages/homepage/HomePage.tsx
@@ -1,76 +1,3 @@
-// import { NavLink, To } from 'react-router-dom'
-// import busImage from '../../img/busImg.png'
-// import './HomePage.scss'
-// import { useTranslation } from 'react-i18next'
-// import {
-//   DirectionsBusOutlined,
-//   HistoryOutlined,
-//   MapOutlined,
-//   MenuOutlined,
-//   ViewKanbanOutlined,
-// } from '@mui/icons-material'
-// import { SvgIconProps } from '@mui/material'
-// import React, { useContext } from 'react'
-// import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
-
-// export const HomePage = () => {
-//   const { t } = useTranslation()
-//   const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
-
-//   return (
-//     <div className="container">
-//       <img src={busImage} alt="Public Transportaion Bus Illustration" />
-//       <h1>{t('homepage.welcome')}</h1>
-//       <h2>{t('homepage.databus_definition')}</h2>
-//       <p>{t('homepage.website_goal')}</p>
-//       <section className="menLink">
-//         <PageLink
-//           icon={<MenuOutlined />}
-//           label={t('homepage.open_menu')}
-//           to={() => setDrawerOpen(true)}
-//         />
-//       </section>
-//       <section className="links">
-//         <PageLink icon={<HistoryOutlined />} label={t('timeline_page_title')} to="/timeline" />
-//         <PageLink icon={<DirectionsBusOutlined />} label={t('gaps_page_title')} to="/gaps" />
-//         <PageLink
-//           icon={<ViewKanbanOutlined />}
-//           label={t('gaps_patterns_page_title')}
-//           to="/gaps_patterns"
-//         />
-//         <PageLink icon={<MapOutlined />} label={t('time_based_map_page_title')} to="/map" />
-//       </section>
-//       <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
-//     </div>
-//   )
-// }
-
-// const PageLink = ({
-//   icon,
-//   label,
-//   to,
-// }: {
-//   icon: React.ReactElement<SvgIconProps>
-//   label: string
-//   to: To | (() => void)
-// }) => {
-//   const { t } = useTranslation()
-
-//   return (
-//     <div className="page-link">
-//       {icon}
-//       <span>{label}</span>
-//       {typeof to == 'function' ? (
-//         <a onClick={to}>{t('homepage.show_button')}</a>
-//       ) : (
-//         <NavLink to={to}>{t('homepage.show_button')}</NavLink>
-//       )}
-//     </div>
-//   )
-// }
-
-// export default HomePage
-
 import { NavLink, To } from 'react-router-dom'
 import busImage from '../../img/busImg.png'
 import './HomePage.scss'

From 8256741909cff05f8352b80b1552f9c62241b555 Mon Sep 17 00:00:00 2001
From: Sicnecher <efraty665@gmail.com>
Date: Wed, 5 Jun 2024 00:01:03 +0300
Subject: [PATCH 3/5] sicnecher

---
 .../LineHbarChart/HbarChart/HbarChart.scss               | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
index 118dd01f..58622868 100644
--- a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
@@ -15,9 +15,12 @@
             align-items: center;
 
             .barDisplay {
-                height: 7px;
+                display: inline-block;
                 border-radius: 10px;
                 margin-left: 10px;
+                text-align: center;
+                font-weight: bold;
+                color: rgb(255, 255, 255);
             }
 
             .entryBarTotal {
@@ -27,4 +30,8 @@
             }
          }
     }
+}
+
+.HbarChart:hover {
+    cursor: default;
 }
\ No newline at end of file

From 2967088976f84f4c0020ea94892c5671a4d25edf Mon Sep 17 00:00:00 2001
From: Sicnecher <efraty665@gmail.com>
Date: Wed, 5 Jun 2024 18:23:42 +0300
Subject: [PATCH 4/5] final

---
 .../WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
index 58622868..b2b282d2 100644
--- a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
@@ -20,7 +20,7 @@
                 margin-left: 10px;
                 text-align: center;
                 font-weight: bold;
-                color: rgb(255, 255, 255);
+                color: white;
             }
 
             .entryBarTotal {

From 87bd858a69db5918b97ba59c413f996827829c33 Mon Sep 17 00:00:00 2001
From: Sicnecher <efraty665@gmail.com>
Date: Fri, 7 Jun 2024 17:27:59 +0300
Subject: [PATCH 5/5] HBar-redesigned

---
 .../LineHbarChart/HbarChart/HbarChart.scss    | 14 +++++++--
 .../LineHbarChart/HbarChart/HbarChart.tsx     | 29 ++++++++++---------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
index b2b282d2..9c1bcce3 100644
--- a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.scss
@@ -1,8 +1,13 @@
 .HbarChart {
     .entry {
         position: relative;
+        margin-bottom: 2%;
+        padding: 3px;
+        border-radius: 8px;
 
-        .entryName {
+        .entryData {
+            display: flex;
+            justify-content: space-between;
             margin-left: 10px;
             font-size: 16px;
             font-weight: 500;
@@ -15,8 +20,9 @@
             align-items: center;
 
             .barDisplay {
+                height: 5px;
                 display: inline-block;
-                border-radius: 10px;
+                border-radius: 4px;
                 margin-left: 10px;
                 text-align: center;
                 font-weight: bold;
@@ -34,4 +40,8 @@
 
 .HbarChart:hover {
     cursor: default;
+}
+
+.entry:hover{
+    background-color: gray
 }
\ No newline at end of file
diff --git a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
index df9c9bc0..d6a0227b 100644
--- a/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
+++ b/src/pages/dashboard/WorstLinesChart/LineHbarChart/HbarChart/HbarChart.tsx
@@ -44,20 +44,21 @@ export function HbarChart({
       {rows.map((entry) => {
         return (
           !!entry.percent && (
-            <div className="entry" key={entry.name}>
-              <div className="entryName" style={{ borderBottomColor: entry.color }}>
-                {entry.name.split('|').slice(0, 2).join(' | ')}
-              </div>
-              <div className="entryBar">
-                {wrapWithTooltip(
-                  <div
-                    className="barDisplay"
-                    style={{ width: `${entry.percent}%`, backgroundColor: entry.color }}>
-                    {entry.percent.toFixed(2)}%
-                  </div>,
-                  entry,
-                )}
-              </div>
+            <div>
+              {wrapWithTooltip(
+                <div className="entry" key={entry.name} style={{ width: `${entry.percent}%` }}>
+                  <div className="entryData">
+                    <span>{entry.name.split('|').slice(0, 2).join(' | ')}</span>
+                    <span>{entry.percent.toFixed(2)}%</span>
+                  </div>
+                  <div className="entryBar">
+                    <div
+                      className="barDisplay"
+                      style={{ width: `100%`, backgroundColor: entry.color }}></div>
+                  </div>
+                </div>,
+                entry,
+              )}
             </div>
           )
         )