= {};
+
+ data.event.feedback.forEach((feedback: FeedbackType) => {
+ if (feedback.rating in count) count[feedback.rating]++;
+ else count[feedback.rating] = 1;
+ });
+
+ const chartData = [];
+ for (let rating = 0; rating <= 10; rating++) {
+ if (rating in count)
+ chartData.push({
+ id: rating,
+ value: count[rating],
+ label: `${rating} (${count[rating]})`,
+ color: ratingColors[10 - rating],
+ });
+ }
+
+ return (
+ <>
+
+
+
+ Feedback Analysis
+
+
+ {data.event.feedback.length} people have filled feedback for this
+ event.
+
+ {data.event.feedback.length ? (
+ `${item.id} (${item.value})`,
+ innerRadius: 30,
+ outerRadius: 120,
+ paddingAngle: 2,
+ cornerRadius: 5,
+ startAngle: 0,
+ highlightScope: { faded: 'global', highlighted: 'item' },
+ faded: { innerRadius: 30, additionalRadius: -30 },
+ },
+ ]}
+ sx={{
+ [`& .${pieArcClasses.faded}`]: {
+ fill: 'gray',
+ },
+ [`& .${pieArcLabelClasses.root}`]: {
+ fill: 'black',
+ fontSize: '15px',
+ },
+ [`& .${pieArcLabelClasses.faded}`]: {
+ display: 'none',
+ },
+ }}
+ width={380}
+ height={380}
+ />
+ ) : (
+ <>Please ask attendees to submit feedback for insights!
+ )}
+
+
+
+ );
+};
diff --git a/src/components/EventStats/Statistics/Review.test.tsx b/src/components/EventStats/Statistics/Review.test.tsx
new file mode 100644
index 0000000000..ee9f79c54c
--- /dev/null
+++ b/src/components/EventStats/Statistics/Review.test.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { ReviewStats } from './Review';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+
+const nonEmptyReviewProps = {
+ data: {
+ event: {
+ _id: '123',
+ feedback: [
+ {
+ _id: 'feedback1',
+ review: 'review1',
+ rating: 5,
+ },
+ {
+ _id: 'feedback2',
+ review: 'review2',
+ rating: 5,
+ },
+ {
+ _id: 'feedback3',
+ review: null,
+ rating: 5,
+ },
+ ],
+ averageFeedbackScore: 5,
+ },
+ },
+};
+
+const emptyReviewProps = {
+ data: {
+ event: {
+ _id: '123',
+ feedback: [
+ {
+ _id: 'feedback3',
+ review: null,
+ rating: 5,
+ },
+ ],
+ averageFeedbackScore: 5,
+ },
+ },
+};
+
+describe('Testing Review Statistics Card', () => {
+ test('The component should be rendered and the reviews should be shown if present', async () => {
+ const { queryByText } = render(
+
+
+
+
+
+
+
+
+ );
+
+ await waitFor(() => expect(queryByText('Reviews')).toBeInTheDocument());
+
+ await waitFor(() =>
+ expect(queryByText('Filled by 2 people.')).toBeInTheDocument()
+ );
+
+ await waitFor(() => expect(queryByText('review2')).toBeInTheDocument());
+ });
+
+ test('The component should be rendered and message should be shown if no review is present', async () => {
+ const { queryByText } = render(
+
+
+
+
+
+
+
+
+ );
+
+ await waitFor(() => expect(queryByText('Reviews')).toBeInTheDocument());
+
+ await waitFor(() =>
+ expect(
+ queryByText('Waiting for people to talk about the event...')
+ ).toBeInTheDocument()
+ );
+ });
+});
diff --git a/src/components/EventStats/Statistics/Review.tsx b/src/components/EventStats/Statistics/Review.tsx
new file mode 100644
index 0000000000..0528de79d3
--- /dev/null
+++ b/src/components/EventStats/Statistics/Review.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+import Rating from '@mui/material/Rating';
+
+type ModalPropType = {
+ data: {
+ event: {
+ _id: string;
+ averageFeedbackScore: number | null;
+ feedback: FeedbackType[];
+ };
+ };
+};
+
+type FeedbackType = {
+ _id: string;
+ rating: number;
+ review: string | null;
+};
+
+export const ReviewStats = ({ data }: ModalPropType): JSX.Element => {
+ const reviews = data.event.feedback.filter(
+ (feedback: FeedbackType) => feedback.review != null
+ );
+
+ return (
+ <>
+
+
+
+ Reviews
+
+ Filled by {reviews.length} people.
+ {reviews.length ? (
+ reviews.map((review) => (
+
+ ))
+ ) : (
+ <>Waiting for people to talk about the event...
+ )}
+
+
+
+ );
+};
diff --git a/src/screens/EventDashboard/EventDashboard.test.tsx b/src/screens/EventDashboard/EventDashboard.test.tsx
index a5452429e5..2a3340be10 100644
--- a/src/screens/EventDashboard/EventDashboard.test.tsx
+++ b/src/screens/EventDashboard/EventDashboard.test.tsx
@@ -17,6 +17,14 @@ import {
queryMockWithProjectAndTask,
} from './EventDashboard.mocks';
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+// These modules are used by the Feedback components
+jest.mock('@mui/x-charts/PieChart', () => ({
+ pieArcLabelClasses: jest.fn(),
+ PieChart: jest.fn().mockImplementation(() => <>Test),
+ pieArcClasses: jest.fn(),
+}));
+
describe('Testing Event Dashboard Screen', () => {
beforeEach(() => {
global.window = Object.create(window);
diff --git a/src/screens/EventDashboard/EventDashboard.tsx b/src/screens/EventDashboard/EventDashboard.tsx
index 0c48f30f12..198e31e508 100644
--- a/src/screens/EventDashboard/EventDashboard.tsx
+++ b/src/screens/EventDashboard/EventDashboard.tsx
@@ -8,6 +8,7 @@ import { AddEventProjectModal } from 'components/EventProjectModals/AddEventProj
import { UpdateEventProjectModal } from 'components/EventProjectModals/UpdateEventProjectModal';
import { DeleteEventProjectModal } from 'components/EventProjectModals/DeleteEventProjectModal';
import { AddTaskModal } from 'components/TaskModals/AddTaskModal';
+import { EventStatsWrapper } from 'components/EventStats/EventStatsWrapper';
import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
import Button from 'react-bootstrap/Button';
import List from '@mui/material/List';
@@ -96,7 +97,7 @@ const EventDashboard = (): JSX.Element => {
: ``}
- Registrantss: {eventData.event.attendees.length}
+ Registrants: {eventData.event.attendees.length}
{/* Buttons to trigger different modals */}
@@ -117,6 +118,7 @@ const EventDashboard = (): JSX.Element => {
orgId={eventData.event.organization._id}
/>
+