feat: add widget component (#283)

* New Widget Component --------- Co-authored-by: yadenmezi <[email protected]>
hasadna · Dec 10, 2023 · 1d6d636 · 1d6d636
1 parent 0023217
commit 1d6d636
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 12 deletions.
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -21,6 +21,7 @@ import RouteSelector from './components/RouteSelector'
 //API
 // import { /*getGtfsRidesList,*/ getRidesAsync } from 'src/api/profileService'
 import { getRoutesAsync } from '../api/gtfsService'
+import Widget from 'src/shared/Widget'
 
 // time inputs
 // import { DateSelector } from './components/DateSelector'
@@ -92,7 +93,7 @@ const LineProfileComponent = ({ search }: { search: PageSearchState }) => {
 
   return (
     <Grid xs={12} lg={6}>
-      <div className="widget">
+      <Widget>
         <h2 className="title">{t('profile_page')}</h2>
         <label> מפעיל: {search.operatorId} </label>
         <br></br>
@@ -143,7 +144,7 @@ const LineProfileComponent = ({ search }: { search: PageSearchState }) => {
           <Label text="הערות ועדכונים על הקו:" />
           <div></div>
         </div>
-      </div>
+      </Widget>
     </Grid>
   )
 }

diff --git a/src/pages/components/Widget.stories.tsx b/src/pages/components/Widget.stories.tsx
@@ -1,15 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { BusToolTip } from './MapLayers/BusToolTip'
 import '../../shared/shared.css'
+import Widget from 'src/shared/Widget'
 const meta = {
   title: 'Components/Widget',
   component: () => (
     <div style={{ background: '#f0f2f5', width: '400px', padding: '20px' }}>
-      <div className="widget">
+      <Widget>
         שלום חברים!
         <br />
         ככה נראה widget util
-      </div>
+      </Widget>
     </div>
   ),
   parameters: {

diff --git a/src/pages/dashboard/AllLineschart/AllLinesChart.tsx b/src/pages/dashboard/AllLineschart/AllLinesChart.tsx
@@ -6,6 +6,7 @@ import OperatorHbarChart from './OperatorHbarChart/OperatorHbarChart'
 import { GroupByRes, useGroupBy } from 'src/api/groupByService'
 import { FC } from 'react'
 import { Moment } from 'moment/moment'
+import Widget from 'src/shared/Widget'
 
 const convertToChartCompatibleStruct = (arr: GroupByRes[]) => {
   return arr.map((item: GroupByRes) => ({
@@ -29,7 +30,7 @@ export const AllLinesChart: FC<AllChartComponentProps> = ({ startDate, endDate }
   })
 
   return (
-    <div className="widget">
+    <Widget>
       <h2 className="title">
         {TEXTS.dashboard_page_title}
         <Tooltip
@@ -44,7 +45,7 @@ export const AllLinesChart: FC<AllChartComponentProps> = ({ startDate, endDate }
       ) : (
         <OperatorHbarChart operators={convertToChartCompatibleStruct(groupByOperatorData)} />
       )}
-    </div>
+    </Widget>
   )
 }
 

diff --git a/src/pages/dashboard/ArrivalByTimeChart/DayTimeChart.tsx b/src/pages/dashboard/ArrivalByTimeChart/DayTimeChart.tsx
@@ -4,6 +4,7 @@ import { Skeleton, Radio, RadioChangeEvent } from 'antd'
 import ArrivalByTimeChart from './ArrivalByTimeChart'
 import { GroupByRes, useGroupBy } from 'src/api/groupByService'
 import { Moment } from 'moment/moment'
+import Widget from 'src/shared/Widget'
 
 const convertToGraphCompatibleStruct = (arr: GroupByRes[]) => {
   return arr.map((item: GroupByRes) => ({
@@ -33,7 +34,7 @@ const DayTimeChart: FC<DayTimeChartProps> = ({ startDate, endDate, operatorId })
   })
 
   return (
-    <div className="widget">
+    <Widget>
       <h2 className="title">
         {groupByHour ? TEXTS.dashboard_page_graph_title_hour : TEXTS.dashboard_page_graph_title_day}
       </h2>
@@ -52,7 +53,7 @@ const DayTimeChart: FC<DayTimeChartProps> = ({ startDate, endDate, operatorId })
           operatorId={operatorId}
         />
       )}
-    </div>
+    </Widget>
   )
 }
 

diff --git a/src/pages/dashboard/WorstLinesChart/WorstLinesChart.tsx b/src/pages/dashboard/WorstLinesChart/WorstLinesChart.tsx
@@ -4,6 +4,7 @@ import LinesHbarChart from './LineHbarChart/LinesHbarChart'
 import { TEXTS } from 'src/resources/texts'
 import { FC } from 'react'
 import { Moment } from 'moment/moment'
+import Widget from 'src/shared/Widget'
 
 interface WorstLinesChartProps {
   startDate: Moment
@@ -35,7 +36,7 @@ export const WorstLinesChart: FC<WorstLinesChartProps> = ({ startDate, endDate,
   }
 
   return (
-    <div className="widget">
+    <Widget>
       <h2 className="title">{TEXTS.worst_lines_page_title}</h2>
       {lineDataLoading ? (
         <Skeleton active />
@@ -45,7 +46,7 @@ export const WorstLinesChart: FC<WorstLinesChartProps> = ({ startDate, endDate,
           operators_whitelist={['אלקטרה אפיקים', 'דן', 'מטרופולין', 'קווים', 'אגד']}
         />
       )}
-    </div>
+    </Widget>
   )
 }
 

diff --git a/src/pages/gapsPatterns/GapsPatternsPage.tsx b/src/pages/gapsPatterns/GapsPatternsPage.tsx
@@ -34,6 +34,7 @@ import { DateSelector } from '../components/DateSelector'
 import { INPUT_SIZE } from 'src/resources/sizes'
 const { Title } = Typography
 import { useTranslation } from 'react-i18next'
+import Widget from 'src/shared/Widget'
 // Define prop types for the component
 interface BusLineStatisticsProps {
   lineRef: number
@@ -71,7 +72,7 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
 
   return (
     lineRef > 0 && (
-      <div className="widget">
+      <Widget>
         <Title level={3}>{t('dashboard_page_graph_title')}</Title>
 
         {isLoading && lineRef ? (
@@ -137,7 +138,7 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
             </ResponsiveContainer>
           </>
         )}
-      </div>
+      </Widget>
     )
   )
 }

diff --git a/src/shared/Widget.tsx b/src/shared/Widget.tsx
@@ -0,0 +1,5 @@
+const Widget = (props: { children: React.ReactNode }) => {
+  return <div className="widget">{props.children}</div>
+}
+
+export default Widget