From 7a01b6c7d82d15cce8e7d335bf49dd7dcad7180c Mon Sep 17 00:00:00 2001
From: Atalya Alon <20992625+atalyaalon@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:04:10 +0200
Subject: [PATCH] Update AccidentCountByRoadLight (#1174)

* update AccidentCountByRoadLight as piechart
---
 .../widgets/AccidentCountByRoadLight.tsx      | 20 +++++++++++++++----
 .../molecules/widgets/WidgetWrapper.tsx       |  4 +---
 src/models/WidgetData.ts                      |  5 ++++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/widgets/AccidentCountByRoadLight.tsx b/src/components/molecules/widgets/AccidentCountByRoadLight.tsx
index c85dcf29..2cb99bc6 100644
--- a/src/components/molecules/widgets/AccidentCountByRoadLight.tsx
+++ b/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;
\ No newline at end of file
diff --git a/src/components/molecules/widgets/WidgetWrapper.tsx b/src/components/molecules/widgets/WidgetWrapper.tsx
index c17abd6a..15a6ecb9 100644
--- a/src/components/molecules/widgets/WidgetWrapper.tsx
+++ b/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: {
diff --git a/src/models/WidgetData.ts b/src/models/WidgetData.ts
index a2b1ea99..9a14117a 100644
--- a/src/models/WidgetData.ts
+++ b/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: {