Merge pull request #1205 from data-for-change/feature-1204-alternate-map-labels

alternate labels perpendicular to labels regression line

Author: atalyaalon

src/components/molecules/LocationMap.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
-import { IPoint, IPointAccident } from 'models/Point';
+import { IPoint, IPointAccidentWithPosition } from 'models/Point';
 import { MostSevereAccidentsMarker } from 'components/atoms';
-import { ClockPosition } from 'models/ClockPosition';
 import Map from './map/Map';
 import { CSSProperties } from '@material-ui/core/styles/withStyles';
 
@@ -11,9 +10,9 @@ interface IProps {
 }
 
 const LocationMap: FC<IProps> = ({ items }) => {
-  const markers = items.map((x: IPointAccident, i: number) => {
+  const markers = items.map((x: IPointAccidentWithPosition, i: number) => {
     if (x.latitude !== null && x.longitude !== null) {
-      const tooltipOffset = i % 2 === 0 ? ClockPosition.RIGHT : ClockPosition.LEFT;
+      const tooltipOffset = x.labelClockPosition;
       return (
         <div key={i}>
           <MostSevereAccidentsMarker data={x} tooltipOffset={tooltipOffset} />

src/components/molecules/widgets/MostSevereAccidentsMapWidget.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import LocationMap from 'components/molecules/LocationMap';
 import { IWidgetMostSevereAccidentsData } from 'models/WidgetData';
 import { Box } from '@material-ui/core';
@@ -8,11 +8,59 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
 import { aggregatePoints } from 'utils/map.utils';
 import { IAggregatePointAccident } from 'models/Point';
+import { ClockPosition } from 'models/ClockPosition';
+
+
+function linearRegression(points: { longitude: number; latitude: number }[]) {
+  const n = points.length;
+  if (n < 2) return null;
+  const sumX = points.reduce((sum, p) => sum + p.longitude, 0);
+  const sumY = points.reduce((sum, p) => sum + p.latitude, 0);
+  const sumXY = points.reduce((sum, p) => sum + p.longitude * p.latitude, 0);
+  const sumXX = points.reduce((sum, p) => sum + p.longitude * p.longitude, 0);
+  const denominator = n * sumXX - sumX * sumX;
+  if (denominator === 0) {
+    // All points have the same longitude (vertical line)
+    return null;
+  }
+  const slope = (n * sumXY - sumX * sumY) / denominator;
+  const intercept = (sumY - slope * sumX) / n;
+  return { slope, intercept };
+}
+
+
+function getLabelClockPosition(
+  slope: number | null,
+  mod: number
+): ClockPosition {
+  let degrees: number;
+  if (slope === null || !isFinite(slope)) {
+    degrees = mod === 0 ? 0 : 180;
+  } else {
+    const baseAngle = Math.atan(slope);
+    const perpAngle = baseAngle + (mod === 0 ? Math.PI / 2 : -Math.PI / 2);
+    degrees = ((perpAngle * 180) / Math.PI + 360) % 360; // convert to [0, 360)
+  }
+  const snappedAngle = Math.round(degrees / 45) * 45 % 360;
+  const angleToClockPosition: { [angle: number]: ClockPosition } = {
+    0: ClockPosition.RIGHT,
+    45: ClockPosition.TOPRIGHT,
+    90: ClockPosition.TOP,
+    135: ClockPosition.TOPLEFT,
+    180: ClockPosition.LEFT,
+    225: ClockPosition.BOTTOMLEFT,
+    270: ClockPosition.BOTTOM,
+    315: ClockPosition.BOTTOMRIGHT,
+  };
+  return angleToClockPosition[snappedAngle];
+}
 
 interface IProps {
   data: IWidgetMostSevereAccidentsData;
   sizeOptions: number;
 }
+
+
 const useStyles = makeStyles({
   carLogo: {
     height: '20px',
@@ -40,16 +88,49 @@ const useStyles = makeStyles({
   },
 });
 
+
+function getSortedItemsAlongLine(
+  items: IAggregatePointAccident[],
+  slope: number | null
+): IAggregatePointAccident[] {
+  if (slope === null || !isFinite(slope)) {
+    return [...items].sort((a, b) => a.latitude - b.latitude);
+  }
+  const dx = 1;
+  const dy = slope;
+
+  return [...items].sort((a, b) => {
+    const projA = a.longitude * dx + a.latitude * dy;
+    const projB = b.longitude * dx + b.latitude * dy;
+    return projA - projB;
+  });
+}
+
+
 const MostSevereAccidentsMapWidget: FC<IProps> = ({ data }) => {
   const classes = useStyles();
   const { items } = data;
   const { t } = useTranslation();
-  const aggregatedItems : IAggregatePointAccident[] = aggregatePoints(items);
+  const aggregatedItems: IAggregatePointAccident[] = useMemo(
+    () => aggregatePoints(items),
+    [items]
+  );
+ const itemsWithLabelPosition = useMemo(() => {
+  const regression = linearRegression(aggregatedItems);
+  const slope = regression ? regression.slope : null;
+  const sortedItems = getSortedItemsAlongLine(aggregatedItems, slope);
+  return sortedItems.map((item, idx) => ({
+    ...item,
+    labelClockPosition: getLabelClockPosition(slope, idx % 2),
+  }));
+}, [aggregatedItems]);
 
   return (
     <Box height={'100%'}>
       <Box className={classes.mapBox}>
-        <LocationMap items={aggregatedItems} />
+        {itemsWithLabelPosition.length > 0 && (
+          <LocationMap key={itemsWithLabelPosition.map(i => i.accident_timestamp).join(',')} items={itemsWithLabelPosition} />
+        )}
       </Box>
       <Box className={classes.iconsContainer}>
         <Box className={classes.singleIcon}>

src/models/Point.ts

@@ -9,6 +9,12 @@ export interface IPointAccident extends IPoint {
   accident_timestamp: string;
 }
 
+export interface IPointAccidentWithPosition extends IPoint {
+  accident_severity: SeverityTypes;
+  accident_timestamp: string;
+  labelClockPosition: number;
+}
+
 export interface IAggregatePointAccident extends IPoint{
   accident_severity: SeverityTypes;
   accident_timestamp: string[];