Description:

We need to create a responsive activity chart component that showcases user application activity, with data showing "Approved" and "Denied" statuses for each month. This component will be integrated into the ProfilePage folder.

View:

Requirements:

1. Component Structure:

Create an ActivityChart component that accepts data for application statuses over a period of months.
The chart will display two categories: "Approved" and "Denied."
It should support changing the time period using a dropdown (e.g., months, weeks).

2. Suggested Name for Component:

ActivityChart: A component responsible for displaying application activity (approved and denied statuses).

3. Props:

ActivityChart Props: This component will accept an array of objects containing:

month (String): The name of the month.
approved (Number): The number of approved applications for that month.
denied (Number): The number of denied applications for that month.
timePeriod (String): The selected time period, defaulting to "Months."

Example:

const activityData = [
 { month: "January", approved: 20, denied: 10 },
 { month: "February", approved: 15, denied: 5 },
 { month: "March", approved: 35, denied: 10 },
 { month: "April", approved: 20, denied: 10 },
 { month: "May", approved: 15, denied: 5 },
 { month: "June", approved: 40, denied: 10 },
 { month: "August", approved: 30, denied: 10 },
];

<ActivityChart data={activityData} timePeriod="Months" />

4. Design and Layout:

Ensure the chart is responsive and looks good on both desktop and mobile views.
The chart should use a bar graph to differentiate between "Approved" and "Denied" applications.
Include a dropdown to switch between time periods (months, weeks, etc.).
The chart should display clear labels and a legend for "Approved" and "Denied" statuses.

dragonsbootcampllc / Spotalent