Accidents Caused By Rain Widget

src/components/molecules/TableView.tsx

@@ -8,7 +8,7 @@ import { tableHeadColor, tableBackgroundColorMain, tableBackgroundColorOdd } fro
 interface IProps {
   data: IWidgetMostSevereAccidentsTableData;
 }
-const useStyles = makeStyles((theme: Theme) => ({
+export const UseTableStyles = makeStyles((theme: Theme) => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   table: {},
 }));
-const StyledTableCell = withStyles((theme: Theme) =>
+export const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
     root: {
       textAlign: 'center',
@@ -39,7 +39,7 @@ const StyledTableCell = withStyles((theme: Theme) =>
     },
   }),
 )(TableCell);
-const StyledTableRow = withStyles(() =>
+export const StyledTableRow = withStyles(() =>
   createStyles({
     root: {
       backgroundColor: tableBackgroundColorMain,
@@ -51,7 +51,7 @@ const StyledTableRow = withStyles(() =>
 )(TableRow);
 
 const TableView: FC<IProps> = ({ data }) => {
-  const classes = useStyles();
+  const classes = UseTableStyles();
   const { items, text } = data;
   return (
     <div className={classes.root}>

src/components/molecules/widgets/RainAccidentsBySeverity.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from 'react';
+import { Table, TableBody, TableHead } from '@material-ui/core';
+
+import { Text, TextType } from '../../atoms';
+import { UseTableStyles, StyledTableRow, StyledTableCell } from '../TableView';
+
+import { IWidgetRainAccidentsBySeverity } from '../../../models/WidgetData';
+
+const SEVERITY = 'severity';
+const SEVERITY_HEBREW = 'severity_hebrew';
+const AMOUNT = 'amount_of_accidents_caused_by_rain';
+const PERCENT = 'accidents_caused_by_rain_percentage';
+
+interface IProps {
+  data: IWidgetRainAccidentsBySeverity;
+}
+
+const RainAccidentsBySeverity: FC<IProps> = ({ data }) => {
+  const classes = UseTableStyles();
+  const { items, text } = data;
+  return (
+    <div className={classes.root}>
+      <div className={classes.title}>
+        <Text type={TextType.WIDGET_TABLE_TITLE}>{text.title}</Text>
+      </div>
+      <Table className={classes.table} size="small" aria-label="a dense table">
+        <TableHead>
+          <StyledTableRow>
+            <StyledTableCell>
+              <Text type={TextType.WIDGET_TABLE_HEADER}>חומרת התאונה</Text>
+            </StyledTableCell>
+            <StyledTableCell align="right">
+              <Text type={TextType.WIDGET_TABLE_HEADER}>כמות התאונות שנגרמו על ידי גשם</Text>
+            </StyledTableCell>
+            <StyledTableCell align="right">
+              <Text type={TextType.WIDGET_TABLE_HEADER}>אחוז התאונות שנגרמו על ידי גשם</Text>
+            </StyledTableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {items
+            .sort((previousItem, currentItem) => previousItem[SEVERITY] - currentItem[SEVERITY])
+            .map((item, index) => (
+              <StyledTableRow key={index}>
+                <StyledTableCell component="th" scope="row">
+                  <Text type={TextType.WIDGET_TABLE_CONTENT}>{item[SEVERITY_HEBREW]}</Text>
+                </StyledTableCell>
+                <StyledTableCell align="right">
+                  <Text type={TextType.WIDGET_TABLE_CONTENT}>{item[AMOUNT]}</Text>
+                </StyledTableCell>
+                <StyledTableCell align="right">
+                  <Text type={TextType.WIDGET_TABLE_CONTENT}>{item[PERCENT]}%</Text>
+                </StyledTableCell>
+              </StyledTableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+export default RainAccidentsBySeverity;

src/components/molecules/widgets/WidgetWrapper.tsx

@@ -16,6 +16,7 @@ import {
   IWidgetTopRoadSegmentsAccidentsPerKm,
   IWidgetAccidentCountByDriverType,
   IWidgetAccidentCountByCarType,
+  IWidgetRainAccidentsBySeverity,
 } from '../../../models/WidgetData';
 import AccidentsCountByHourBarWidget from './AccidentsCountByHourBarWidget';
 import InjuredCountPerAgeGroupPieWidget from './InjuredCountPerAgeGroupPieWidget';
@@ -33,6 +34,7 @@ import TopRoadSegmentsAccidentsPerKm from './TopRoadSegmentsAccidentsPerKm';
 import AccidentCountByRoadLight from './AccidentCountByRoadLight';
 import AccidentCountByDriverType from './AccidentCountByDriverType';
 import AccidentCountByCarTypeWidget from './AccidentCountByCarTypeWidget';
+import RainAccidentsBySeverity from './RainAccidentsBySeverity';
 import { IPoint } from '../../../models/Point';
 import { WidgetName } from '../../../models/WidgetName';
 
@@ -139,6 +141,10 @@ const WidgetWrapper: FC<IProps> = ({ widget, segmentText, options = {} }) => {
       );
       break;
     }
+    case WidgetName.rain_accidents_by_severity: {
+      widgetComponent = <RainAccidentsBySeverity data={data as IWidgetRainAccidentsBySeverity} />;
+      break;
+    }
     default: {
       widgetComponent = null; // do not create element for unrecognized widget
       console.warn(`widget name (${name}) was not recognize `, widget);

src/models/WidgetData.ts

@@ -44,7 +44,8 @@ export type IWidgetDataType =
   | IWidgetTopRoadSegmentsAccidentsPerKm
   | IWidgetAccidentCountByRoadLight
   | IWidgetAccidentCountByDriverType
-  | IWidgetAccidentCountByCarType;
+  | IWidgetAccidentCountByCarType
+  | IWidgetRainAccidentsBySeverity;
 
 export interface ILocationMeta {
   location_info: {
@@ -63,6 +64,17 @@ export interface IWidgetAccidentsByHourBarData {
     title: string;
   };
 }
+export interface IWidgetRainAccidentsBySeverity {
+  items: {
+    severity: number;
+    severity_hebrew: string;
+    amount_of_accidents_caused_by_rain: number;
+    accidents_caused_by_rain_percentage: number;
+  }[];
+  text: {
+    title: string;
+  };
+}
 export interface IWidgetInjuredCountPerAgeGroupPieData {
   items: {
     age_group: string;

src/models/WidgetName.ts

@@ -17,4 +17,5 @@ export enum WidgetName {
   accident_count_by_road_light = 'accident_count_by_road_light',
   accident_count_by_driver_type = 'accident_count_by_driver_type',
   accident_count_by_car_type = 'accident_count_by_car_type',
+  rain_accidents_by_severity = 'rain_accidents_by_severity',
 }