Update AccidentCountByRoadLight (#1174)

* update AccidentCountByRoadLight as piechart

src/components/molecules/widgets/AccidentCountByRoadLight.tsx

@@ -1,12 +1,24 @@
 import React, { FC } from 'react';
 import { IWidgetAccidentCountByRoadLight } from 'models/WidgetData';
+import PieChartView from 'components/molecules/PieChartView';
 
+const ROAD_LIGHT = 'road_light';
+const COUNT = 'count';
+const INNER_RADIUS = '40%';
+const OUTER_RADIUS = '70%';
 interface IProps {
   data: IWidgetAccidentCountByRoadLight;
-  segmentText: string;
 }
 
-const AccidentCountByRoadLight: FC<IProps> = () => {
-  return <div> {} </div>;
+const AccidentCountByRoadLight: FC<IProps> = ({ data }) => {
+  return (
+    <PieChartView
+      data={data.items}
+      xLabel={ROAD_LIGHT}
+      yLabel={COUNT}
+      outerRadius={OUTER_RADIUS}
+      innerRadius={INNER_RADIUS}
+    />
+  );
 };
-export default AccidentCountByRoadLight;
+export default AccidentCountByRoadLight;

src/components/molecules/widgets/WidgetWrapper.tsx

@@ -198,9 +198,7 @@ const WidgetWrapper: FC<IProps> = ({ widget, locationText, sizeOptions, editorBa
       break;
     }
     case WidgetName.accident_count_by_road_light: {
-      widgetComponent = (
-        <AccidentCountByRoadLight data={data as IWidgetAccidentCountByRoadLight} segmentText={locationText} />
-      );
+      widgetComponent = <AccidentCountByRoadLight data={data as IWidgetAccidentCountByRoadLight} />;
       break;
     }
     case WidgetName.accident_count_by_driver_type: {

src/models/WidgetData.ts

@@ -157,7 +157,10 @@ export interface IWidgetTopRoadSegmentsAccidentsPerKm extends IWidgetDataBase {
   items: {}[];
 }
 export interface IWidgetAccidentCountByRoadLight extends IWidgetDataBase {
-  items: {}[];
+  items: {
+    count: number;
+    road_light: string;
+  }[];
 }
 export interface IWidgetAccidentCountByDriverType extends IWidgetDataBase {
   items: {