diff --git a/frontend/src/components/RegionStats/index.tsx b/frontend/src/components/RegionStats/index.tsx new file mode 100644 index 0000000..5dac6b8 --- /dev/null +++ b/frontend/src/components/RegionStats/index.tsx @@ -0,0 +1,83 @@ +import React, { useState, useCallback } from "react"; +import { pickBy } from "lodash"; +import { + Loader, + Statistic, + Pagination, + Segment, + Header, + Menu, + Table, + Icon, +} from "semantic-ui-react"; +import { useObservable } from "rxjs-hooks"; +import { of, from, concat, combineLatest } from "rxjs"; +import { map, switchMap, distinctUntilChanged } from "rxjs/operators"; +import { Duration, DateTime } from "luxon"; + +import api from "api"; + +function formatDuration(seconds) { + return ( + Duration.fromMillis((seconds ?? 0) * 1000) + .as("hours") + .toFixed(1) + " h" + ); +} + +export default function Stats() { + const [page, setPage] = useState(1); + const PER_PAGE = 10; + const stats = useObservable( + () => + of(null).pipe( + switchMap(() => concat(of(null), from(api.get("/stats/regions")))) + ), + null + ); + + const pageCount = stats ? Math.ceil(stats.length / PER_PAGE) : 1; + + return ( + <> +
Top Regions
+ +
+ + + + + + Region name + Event count + + + + + {stats + ?.slice((page - 1) * PER_PAGE, page * PER_PAGE) + ?.map((area) => ( + + {area.name} + {area.overtaking_event_count} + + ))} + + + {pageCount > 1 && + + + setPage(data.activePage as number)} + /> + + + } +
+
+ + ); +} diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index b8aede0..bc0ff84 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -6,7 +6,7 @@ import {map, switchMap} from 'rxjs/operators' import {useTranslation} from 'react-i18next' import api from 'api' -import {Stats, Page} from 'components' +import {RegionStats, Stats, Page} from 'components' import type {Track} from 'types' import {TrackListItem, NoPublicTracksMessage} from './TracksPage' @@ -46,9 +46,10 @@ export default function HomePage() { + - +