Added time filter

Author: oliviahyw

package-lock.json

@@ -106,6 +106,7 @@
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.0.14",
     "@types/dompurify": "^3.0.5",
+    "@types/react-datepicker": "^7.0.0",
     "@types/react-router-dom": "^5.3.3",
     "babel-eslint": "^10.1.0",
     "cross-env": "^5.2.1",

package.json

@@ -0,0 +1,47 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  LabelList,
+} from 'recharts';
+
+function AgeChart({ data, compareLabel }) {
+  const formatTooltip = (value, name, props) => {
+    const { change } = props.payload;
+    let changeText = '';
+    if (compareLabel && change !== undefined) {
+      if (change > 0) {
+        changeText = `${change}% more than ${compareLabel}`;
+      } else if (change < 0) {
+        changeText = `${Math.abs(change)}% less than ${compareLabel}`;
+      } else {
+        changeText = `No change from ${compareLabel}`;
+      }
+      return [`${value} (${changeText})`, 'Applicants'];
+    }
+    return [`${value}`, 'Applicants'];
+  };
+
+  return (
+    <div style={{ width: '800px', height: 500, margin: '0 auto', padding: '20px' }}>
+      <h2>Applicants grouped by Age</h2>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }} barSize={80}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="ageGroup" />
+          <YAxis />
+          <Tooltip formatter={formatTooltip} />
+          <Bar dataKey="applicants" fill="#3b82f6">
+            <LabelList dataKey="applicants" position="top" />
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export default AgeChart;

src/components/ApplicantsChart/AgeChart.jsx

@@ -10,26 +10,39 @@ import {
 } from 'recharts';
 
 const data = [
-  { ageGroup: '18 - 21', applicants: 25 },
-  { ageGroup: '21 - 24', applicants: 60 },
-  { ageGroup: '24 - 27', applicants: 45 },
-  { ageGroup: '27 - 30', applicants: 7 },
-  { ageGroup: '30 - 33', applicants: 10 },
+  { ageGroup: '18 - 21', applicants: 25, change: 10 },
+  { ageGroup: '21 - 24', applicants: 60, change: -5 },
+  { ageGroup: '24 - 27', applicants: 45, change: 15 },
+  { ageGroup: '27 - 30', applicants: 7, change: -3 },
+  { ageGroup: '30 - 33', applicants: 10, change: 0 },
 ];
 
 function ApplicantsChartPage() {
+  const formatTooltip = (value, name, props) => {
+    const { change } = props.payload;
+    let changeText = '';
+    if (change > 0) {
+      changeText = `${change}% more than last week`;
+    } else if (change < 0) {
+      changeText = `${Math.abs(change)}% less than last week`;
+    } else {
+      changeText = `No change from last week`;
+    }
+    return [`${value} (${changeText})`, 'Applicants'];
+  };
+
   return (
-    <div style={{ width: '100%', height: 500, padding: '20px' }}>
+    <div style={{ width: '800px', height: 500, margin: '0 auto', padding: '20px' }}>
       <h2>Applicants grouped by Age</h2>
       <ResponsiveContainer width="100%" height="100%">
-        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
+        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }} barSize={80}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey="ageGroup"
             label={{ value: 'Age Group', position: 'insideBottom', offset: -10 }}
           />
           <YAxis label={{ value: 'Applicants', angle: -90, position: 'insideLeft' }} />
-          <Tooltip />
+          <Tooltip formatter={formatTooltip} />
           <Bar dataKey="applicants" fill="#3b82f6">
             <LabelList dataKey="applicants" position="top" />
           </Bar>

src/components/ApplicantsAgeChart.jsx …s/ApplicantsChart/ApplicantsAgeChart.jsxsrc/components/ApplicantsAgeChart.jsx renamed to src/components/ApplicantsChart/ApplicantsAgeChart.jsx src/components/ApplicantsAgeChart.jsx renamed to src/components/ApplicantsChart/ApplicantsAgeChart.jsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+function TimeFilter({ onFilterChange }) {
+  const [selectedOption, setSelectedOption] = useState('weekly');
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  useEffect(() => {
+    onFilterChange({ selectedOption, startDate, endDate });
+  }, [selectedOption, startDate, endDate]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '16px',
+        margin: '20px auto',
+        flexWrap: 'wrap',
+      }}
+    >
+      <label htmlFor="timeFilterSelect" style={{ fontWeight: 500 }}>
+        Time Filter:
+      </label>
+      <select
+        id="timeFilterSelect"
+        value={selectedOption}
+        onChange={e => setSelectedOption(e.target.value)}
+        style={{
+          padding: '6px 12px',
+          borderRadius: '4px',
+          border: '1px solid #ccc',
+          fontSize: '14px',
+        }}
+      >
+        <option value="weekly">Weekly</option>
+        <option value="monthly">Monthly</option>
+        <option value="yearly">Yearly</option>
+        <option value="custom">Custom Dates</option>
+      </select>
+
+      {selectedOption === 'custom' && (
+        <>
+          <DatePicker
+            selected={startDate}
+            onChange={date => setStartDate(date)}
+            placeholderText="Start Date"
+            dateFormat="yyyy/MM/dd"
+            style={{ marginRight: '10px' }}
+          />
+          <span>to</span>
+          <DatePicker
+            selected={endDate}
+            onChange={date => setEndDate(date)}
+            placeholderText="End Date"
+            dateFormat="yyyy/MM/dd"
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default TimeFilter;

src/components/ApplicantsChart/TimeFilter.jsx

@@ -0,0 +1,10 @@
+import sampleData from './data';
+
+const fetchApplicantsData = filter =>
+  new Promise(resolve => {
+    setTimeout(() => {
+      resolve(sampleData[filter.selectedOption]);
+    }, 500);
+  });
+
+export default fetchApplicantsData;

src/components/ApplicantsChart/api.js

@@ -0,0 +1,32 @@
+const sampleData = {
+  weekly: [
+    { ageGroup: '18 - 21', applicants: 25, change: 10 },
+    { ageGroup: '21 - 24', applicants: 60, change: -5 },
+    { ageGroup: '24 - 27', applicants: 45, change: 15 },
+    { ageGroup: '27 - 30', applicants: 7, change: -3 },
+    { ageGroup: '30 - 33', applicants: 10, change: 0 },
+  ],
+  monthly: [
+    { ageGroup: '18 - 21', applicants: 100, change: 20 },
+    { ageGroup: '21 - 24', applicants: 150, change: -10 },
+    { ageGroup: '24 - 27', applicants: 130, change: 25 },
+    { ageGroup: '27 - 30', applicants: 30, change: -12 },
+    { ageGroup: '30 - 33', applicants: 40, change: 5 },
+  ],
+  yearly: [
+    { ageGroup: '18 - 21', applicants: 1200, change: 5 },
+    { ageGroup: '21 - 24', applicants: 1400, change: 12 },
+    { ageGroup: '24 - 27', applicants: 1100, change: 8 },
+    { ageGroup: '27 - 30', applicants: 300, change: -10 },
+    { ageGroup: '30 - 33', applicants: 450, change: 15 },
+  ],
+  custom: [
+    { ageGroup: '18 - 21', applicants: 200 },
+    { ageGroup: '21 - 24', applicants: 300 },
+    { ageGroup: '24 - 27', applicants: 250 },
+    { ageGroup: '27 - 30', applicants: 70 },
+    { ageGroup: '30 - 33', applicants: 100 },
+  ],
+};
+
+export default sampleData;

src/components/ApplicantsChart/data.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import TimeFilter from './TimeFilter';
+import AgeChart from './AgeChart';
+import fetchApplicantsData from './api';
+
+function ApplicantsChart() {
+  const [chartData, setChartData] = useState([]);
+  const [compareLabel, setCompareLabel] = useState('last week');
+  const [loading, setLoading] = useState(false);
+
+  const handleFilterChange = async filter => {
+    setLoading(true);
+    const data = await fetchApplicantsData(filter);
+    setChartData(data);
+
+    setCompareLabel(
+      filter.selectedOption === 'custom' ? null : `last ${filter.selectedOption.slice(0, -2)}`,
+    );
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    handleFilterChange({ selectedOption: 'weekly' });
+  }, []);
+
+  return (
+    <div>
+      <TimeFilter onFilterChange={handleFilterChange} />
+      {loading ? <p>Loading...</p> : <AgeChart data={chartData} compareLabel={compareLabel} />}
+    </div>
+  );
+}
+
+export default ApplicantsChart;

src/components/ApplicantsChart/index.jsx

@@ -43,7 +43,7 @@ import UnsubscribeForm from './components/EmailSubscribeForm/Unsubscribe';
 import NotFoundPage from './components/NotFound/NotFoundPage';
 import { EmailSender } from './components/common/EmailSender/EmailSender';
 import Collaboration from './components/Collaboration';
-import ApplicantsAgeChart from './components/ApplicantsAgeChart';
+import ApplicantsAgeChart from './components/ApplicantsChart';
 
 // LB Dashboard
 import LBProtectedRoute from './components/common/LBDashboard/LBProtectedRoute';