Add operatorId filter to ArrivalByTime widget (hasadna#204)

knightcube · Nov 16, 2023 · ca03c59 · ca03c59
1 parent 7af2ba6
commit ca03c59
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/pages/components/OperatorSelector.tsx b/src/pages/components/OperatorSelector.tsx
@@ -34,7 +34,7 @@ const OperatorSelector = ({
       disablePortal
       style={{ width: '100%' }}
       value={value}
-      onChange={(e, value) => setOperatorId(value ? value.id : '0')}
+      onChange={(e, value) => setOperatorId(value ? value.id : '')}
       id="operator-select"
       options={operators}
       renderInput={(params) => <TextField {...params} label={TEXTS.choose_operator} />}

diff --git a/src/pages/dashboard/ArrivalByTimeChart/ArrivalByTimeChart.tsx b/src/pages/dashboard/ArrivalByTimeChart/ArrivalByTimeChart.tsx
@@ -10,6 +10,7 @@ import {
 } from 'recharts'
 
 import './ArrivalByTimeChats.scss'
+import { useMemo } from 'react'
 
 const arrayGroup = function <T>(array: T[], f: (item: T) => string) {
   const groups: Record<string, T[]> = {}
@@ -25,6 +26,7 @@ const arrayGroup = function <T>(array: T[], f: (item: T) => string) {
 
 export default function ArrivalByTimeChart({
   data,
+  operatorId,
 }: {
   data: {
     id: string
@@ -35,7 +37,12 @@ export default function ArrivalByTimeChart({
     gtfs_route_date: string
     gtfs_route_hour: string
   }[]
+  operatorId: string
 }) {
+  data = useMemo(
+    () => data.filter((item) => !operatorId || item.id === operatorId),
+    [data, operatorId],
+  )
   return (
     <div className="chart">
       {arrayGroup(data, (item) => item.id)

diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -162,7 +162,10 @@ const DashboardPage = () => {
             {loadingGrap ? (
               <Skeleton active />
             ) : (
-              <ArrivalByTimeChart data={convertToGraphCompatibleStruct(graphData)} />
+              <ArrivalByTimeChart
+                data={convertToGraphCompatibleStruct(graphData)}
+                operatorId={operatorId}
+              />
             )}
           </div>
         </Grid>