Merge pull request #1120 from data-for-change/feat-1117-concatenate-d…

…ates

aggregate dates on tooltip

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<IProps> = ({ data, tooltipOffset = ClockPosition.LEFT }) => {
+const  MostSevereAccidentsMarker: FC<IProps> = ({ data, tooltipOffset = ClockPosition.LEFT }) => {
   const classes = useStyles();
   const { t } = useTranslation();
   const [offset, setOffset] = useState(tooltipOffset);

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 = (
     <div className={classes.root}>
-      <div className={classes.content}>{iconText}</div>
+      <div className={classes.content}>{iconText.map(date => {
+        return <p>{date}</p>
+      })}</div>
       <div className={classes.arrow}></div>
     </div>
   );

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<IProps> = ({ 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 (

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<IProps> = ({ data, sizeOptions }) => {
+const MostSevereAccidentsMapWidget: FC<IProps> = ({ data }) => {
   const classes = useStyles();
   const { items } = data;
   const { t } = useTranslation();
+  const aggregatedItems : IAggregatePointAccident[] = aggregatePoints(items);
 
   return (
     <Box height={'100%'}>
       <Box className={classes.mapBox}>
-        <LocationMap items={items} />
+        <LocationMap items={aggregatedItems} />
       </Box>
       <Box className={classes.iconsContainer}>
         <Box className={classes.singleIcon}>

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[];
+}

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<IPoint>();
@@ -13,4 +13,26 @@ export function uniquePoints(points: IPoint[]) {
   });
 
   return uniquePoints;
-};
+}
+
+export function  aggregatePoints(points: IPointAccident[]) : IAggregatePointAccident[] {
+  const sameLocationPointMap : Map<string,string[]> = 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"};
+   })
+}