diff --git a/src/api/groupByService.ts b/src/api/groupByService.ts index c3900ae..b7b819d 100644 --- a/src/api/groupByService.ts +++ b/src/api/groupByService.ts @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react' import { BASE_PATH } from './apiConfig' import agencyList from 'open-bus-stride-client/agencies/agencyList' +import { Moment } from 'moment' type groupByField = 'gtfs_route_date' | 'operator_ref' | 'day_of_week' type groupByFields = @@ -42,8 +43,8 @@ async function groupbyAsync({ dateFrom, groupBy, }: { - dateTo: Date - dateFrom: Date + dateTo: Moment + dateFrom: Moment groupBy: groupByFields }): Promise { // example: https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2023-01-27&date_to=2023-01-29&group_by=operator_ref @@ -61,8 +62,8 @@ export function useGroupBy({ dateFrom, groupBy, }: { - dateTo: Date - dateFrom: Date + dateTo: Moment + dateFrom: Moment groupBy: groupByFields }) { const [data, setData] = useState< diff --git a/src/pages/dashboard/DashboardPage.scss b/src/pages/dashboard/DashboardPage.scss index f45ca42..e33ba61 100644 --- a/src/pages/dashboard/DashboardPage.scss +++ b/src/pages/dashboard/DashboardPage.scss @@ -4,3 +4,12 @@ line-height: 35px; color: #3E3D67; } + +.date-picker-container { + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + margin-top: 20px; + gap: 10px; +} \ No newline at end of file diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx index c11e648..07b38ca 100644 --- a/src/pages/dashboard/DashboardPage.tsx +++ b/src/pages/dashboard/DashboardPage.tsx @@ -1,17 +1,32 @@ -import React from 'react' +import React, { useCallback } from 'react' import { useGroupBy } from 'src/api/groupByService' import { PageContainer } from '../components/PageContainer' import OperatorHbarChart from './OperatorHbarChart/OperatorHbarChart' import './DashboardPage.scss' import { TEXTS } from 'src/resources/texts' import ArrivalByTimeChart from './ArrivalByTimeChart/ArrivalByTimeChart' +import { DatePicker } from 'antd' +import moment, { Moment } from 'moment' -const now = new Date() +const now = moment() + +function useDate(initialValue: Moment) { + const [date, setDate] = React.useState(initialValue) + const onChange = useCallback((date: Moment | null) => { + if (date) { + setDate(date) + } + }, []) + return [date, onChange] as const +} const DashboardPage = () => { + const [startDate, setStartDate] = useDate(now.clone().subtract(7, 'days')) + const [endDate, setEndDate] = useDate(now.clone()) + const hbarData = useGroupBy({ - dateTo: now, - dateFrom: new Date(Number(now) - 1000 * 60 * 60 * 24 * 7), // 7 days ago + dateTo: endDate, + dateFrom: startDate, groupBy: 'operator_ref', }).map((item) => ({ id: item.operator_ref?.agency_id || 'Unknown', @@ -21,8 +36,8 @@ const DashboardPage = () => { })) const graphData = useGroupBy({ - dateTo: now, - dateFrom: new Date(Number(now) - 1000 * 60 * 60 * 24 * 20), // 20 days ago + dateTo: endDate, + dateFrom: startDate, groupBy: 'gtfs_route_date,operator_ref', }).map((item) => ({ id: item.operator_ref?.agency_id || 'Unknown', @@ -34,6 +49,19 @@ const DashboardPage = () => { return (

{TEXTS.dashboard_page_title}

+
+ setStartDate(data)} + format="DD/MM/YYYY" + /> + - + setEndDate(data)} + format="DD/MM/YYYY" + /> +

{TEXTS.dashboard_page_negative_title}

diff --git a/src/resources/texts.ts b/src/resources/texts.ts index a8de38e..5060481 100644 --- a/src/resources/texts.ts +++ b/src/resources/texts.ts @@ -30,7 +30,7 @@ export const TEXTS = { ride_extra: 'נסיעה שלא תוכננה 🧐', ride_duped: 'נסיעה כפולה ❇️', checkbox_only_gaps: 'רק פערים', - dashboard_page_title: 'מפעילי תח"צ לפי קיום נסיעות מתוכננות', + dashboard_page_title: 'מפעילי תח"צ לפי קיום נסיעות מתוכננות', dashboard_page_negative_title: 'מפעילי תח"צ לפי אחוזי אי יציאה מסך הנסיעות ', rides_planned: 'נסיעות שתוכננו', rides_actual: 'נסיעות שיצאו',