diff --git a/src/components/atoms/MostSevereAccidentsMarker.tsx b/src/components/atoms/MostSevereAccidentsMarker.tsx index df54defe..e3f2a79f 100644 --- a/src/components/atoms/MostSevereAccidentsMarker.tsx +++ b/src/components/atoms/MostSevereAccidentsMarker.tsx @@ -9,9 +9,10 @@ import { ClockPosition } from 'models/ClockPosition'; import { useTranslation } from 'react-i18next'; import { defaultBorderRadius, silverSmokeColor } from 'style'; import { useLocale } from 'hooks/date.hooks' +import { IPointAccident } from 'models/Point'; interface IProps { - data: any; + data: IPointAccident; tooltipOffset: ClockPosition; } @@ -49,7 +50,7 @@ const useStyles = makeStyles({ margin: '0 10px', }, }); -const MostSevereAccidentsMarker: FC = ({ data, tooltipOffset = ClockPosition.LEFT }) => { +const MostSevereAccidentsMarker: FC = ({ data, tooltipOffset = ClockPosition.LEFT }) => { const classes = useStyles(); const { t } = useTranslation(); const [offset, setOffset] = useState(tooltipOffset); diff --git a/src/components/atoms/TooltipMarker.tsx b/src/components/atoms/TooltipMarker.tsx index 18402862..f262b003 100644 --- a/src/components/atoms/TooltipMarker.tsx +++ b/src/components/atoms/TooltipMarker.tsx @@ -25,7 +25,7 @@ const getLabelXPosition = (offset: ClockPosition): string => { case ClockPosition.TOPRIGHT: return '120%'; case ClockPosition.RIGHT: - return '135%'; + return '140%'; case ClockPosition.TOPLEFT: case ClockPosition.BOTTOMLEFT: return '8px'; @@ -46,7 +46,7 @@ const getLabelYPosition = (offset: ClockPosition): string => { case ClockPosition.BOTTOMRIGHT: return '32px'; default: - return '0'; + return '44%'; } }; const getLabelFlexFlow = (offset: ClockPosition): string => { @@ -121,11 +121,13 @@ const TooltipMarker = ({ data, position, offset }: any) => { const { i18n } = useTranslation(); const order = i18n.language === LANG.EN; const classes = useStyles({ offset, order }); - const locale = useLocale(); - const iconText = `${dateFormat(data.accident_timestamp, locale)}`; + const locale = useLocale(); + const iconText : string[] = data.accident_timestamp.map((date : string) => `${dateFormat(date, locale)}`); const TooltipTemplate = (
-
{iconText}
+
{iconText.map(date => { + return

{date}

+ })}
); diff --git a/src/components/molecules/LocationMap.tsx b/src/components/molecules/LocationMap.tsx index 70569504..83c6fe37 100644 --- a/src/components/molecules/LocationMap.tsx +++ b/src/components/molecules/LocationMap.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { IPoint } from 'models/Point'; +import { IPoint, IPointAccident } from 'models/Point'; import { MostSevereAccidentsMarker } from 'components/atoms'; import { ClockPosition } from 'models/ClockPosition'; import Map from './map/Map'; @@ -11,7 +11,7 @@ interface IProps { } const LocationMap: FC = ({ items }) => { - const markers = items.map((x: IPoint, i: number) => { + const markers = items.map((x: IPointAccident, i: number) => { if (x.latitude !== null && x.longitude !== null) { const tooltipOffset = i % 2 === 0 ? ClockPosition.RIGHT : ClockPosition.LEFT; return ( diff --git a/src/components/molecules/widgets/MostSevereAccidentsMapWidget.tsx b/src/components/molecules/widgets/MostSevereAccidentsMapWidget.tsx index e07797e0..6e56c97f 100644 --- a/src/components/molecules/widgets/MostSevereAccidentsMapWidget.tsx +++ b/src/components/molecules/widgets/MostSevereAccidentsMapWidget.tsx @@ -6,6 +6,8 @@ import carOrangeIcon from 'assets/map/car-orange-marker.png'; import carRedIcon from 'assets/map/car-red-marker.png'; import { makeStyles } from '@material-ui/core/styles'; import { useTranslation } from 'react-i18next'; +import { aggregatePoints } from 'utils/map.utils'; +import { IAggregatePointAccident } from 'models/Point'; interface IProps { data: IWidgetMostSevereAccidentsData; @@ -38,15 +40,16 @@ const useStyles = makeStyles({ }, }); -const MostSevereAccidentsMapWidget: FC = ({ data, sizeOptions }) => { +const MostSevereAccidentsMapWidget: FC = ({ data }) => { const classes = useStyles(); const { items } = data; const { t } = useTranslation(); + const aggregatedItems : IAggregatePointAccident[] = aggregatePoints(items); return ( - + diff --git a/src/models/Point.ts b/src/models/Point.ts index f47ea18e..0e2062d1 100644 --- a/src/models/Point.ts +++ b/src/models/Point.ts @@ -1,8 +1,15 @@ +import { SeverityTypes } from './Map'; + export interface IPoint { longitude: number; latitude: number; } export interface IPointAccident extends IPoint { - accident_severity: string; + accident_severity: SeverityTypes; accident_timestamp: string; } + +export interface IAggregatePointAccident extends IPoint{ + accident_severity: SeverityTypes; + accident_timestamp: string[]; +} diff --git a/src/utils/map.utils.ts b/src/utils/map.utils.ts index 0f532908..ae5792ed 100644 --- a/src/utils/map.utils.ts +++ b/src/utils/map.utils.ts @@ -1,4 +1,4 @@ -import { IPoint } from '../models/Point'; +import { IAggregatePointAccident, IPoint, IPointAccident } from '../models/Point'; export function uniquePoints(points: IPoint[]) { const uniquePoints = new Array(); @@ -13,4 +13,26 @@ export function uniquePoints(points: IPoint[]) { }); return uniquePoints; -}; +} + +export function aggregatePoints(points: IPointAccident[]) : IAggregatePointAccident[] { + const sameLocationPointMap : Map = new Map(); + // fill only unique points (not yet included in uniqueSet) + points.reduce(( map, currentPoint) => { + const key = JSON.stringify({latitude : currentPoint.latitude ,longitude : currentPoint.longitude }); + const label = map.get(key); + + if(map.get(key)){ + label?.push(currentPoint.accident_timestamp); + //map.set(key, `${label},${currentPoint.accident_timestamp}`) + } + else{ + map.set(key, [currentPoint.accident_timestamp]); + } + return map; + },sameLocationPointMap); + return Array.from(sameLocationPointMap.entries()).map(([key, value]) => { + const point = JSON.parse(key) as IPoint; + return {latitude: point.latitude, longitude: point.longitude, accident_timestamp: value, accident_severity: "severe"}; + }) +}