Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Statistics Modal Frontend #87

Merged
merged 10 commits into from
Apr 27, 2024
Prev Previous commit
Next Next commit
Season defaults to current one from published-schedule when opening s…
…tats modal
  • Loading branch information
SubinQKim committed Apr 21, 2024
commit 545b9ddf79f977b79f5a555bcf3c06d464574163
67 changes: 51 additions & 16 deletions src/components/StatTable/StatTable.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,58 @@
.container {
display: flex;
flex-direction: column;
align-items: left;
}

.select-container {
margin-left: 35px;
vertical-align: top;
margin-bottom: 5px;
display: flex;
flex-direction: row;;
align-items: center;
}

.table-container {
border: 1px solid #ddd;
margin-top: 25px;
margin-bottom: 35px;
border: 1.5px solid #ddd;
border-collapse: collapse;
width: 100%;
width: calc(100% - 70px);
margin-left: 35px;
margin-right: 35px;
}

.table-container th{
background-color: rgb(83, 120, 201);
padding: 25px;
text-align: center;
}

.table-container tbody td {
border: 0px solid #ddd;
width: 60%;
height: 60%;
text-align: center;
}

.table-data {
height:100px;
}

.table-body td:last-child {
background-color: rgb(241, 160, 129);
font-weight: bold;
}

.table-body td:nth-child(1) {
background-color: rgb(83, 120, 201);
font-weight: bold;
}

.table-container th, .table-container td {
border: 1px solid #ddd;
padding: 8px;
.table-body tr:last-child{
background-color: rgb(241, 160, 129);
font-weight: bold;
}

.even-row {
background-color: #f2f2f2;
}

.odd-row {
background-color: #ffffff;
}

.divider-row td {
border-top: 1px solid #ddd;
}

90 changes: 53 additions & 37 deletions src/components/StatTable/StatTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@ import { NPOBackend } from '../../utils/auth_utils';
import { Select } from '@chakra-ui/react';
import './StatTable.css';

const StatTable = ({ season = 'spring' }) => {
const StatTable = ({ season }) => {
const [stats, setStats] = useState([]);
const [selectedSeason, setSelectedSeason] = useState(season);

const currSeason = season.split(' ')[0];
const currYear = season.split(' ')[1]
const [selectedSeason, setSelectedSeason] = useState(currSeason.toLowerCase());
const [selectedYear, setSelectedYear] = useState(currYear);
console.log(season)
console.log(season.split(' ')[0])
console.log(season.split(' ')[1])
useEffect(() => {
const fetchStats = async () => {
try {
const response = await NPOBackend.get(`/published-schedule/stats?season=${selectedSeason}`);
const response = await NPOBackend.get(`/published-schedule/stats?season=${selectedSeason}&year=${selectedYear}`);
const data = response.data;
setStats(data);
} catch (error) {
Expand All @@ -21,13 +26,18 @@ const StatTable = ({ season = 'spring' }) => {
};

fetchStats();
}, [selectedSeason]);
}, [selectedSeason, selectedYear]);

const handleSeasonChange = (event) => {
const newSeason = event.target.value;
setSelectedSeason(newSeason);
};

const handleYearChange = (event) => {
const newYear = event.target.value;
setSelectedYear(newYear);
};

const transformData = () => {
const transformedData = {};

Expand All @@ -49,45 +59,51 @@ const StatTable = ({ season = 'spring' }) => {
const transformedStats = transformData();

return (
<div>
<Select value={selectedSeason} onChange={handleSeasonChange}>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</Select>

<table className='table-container'>
<thead>
<tr>
<th>Event Type</th>
{Object.keys(transformedStats).length > 0 &&
Object.keys(transformedStats[Object.keys(transformedStats)[0]]).map(subject => (
<th key={subject}>{subject}</th>
))}
</tr>
</thead>
<tbody>
{Object.keys(transformedStats).map((eventType, index) => (
<React.Fragment key={eventType}>
<tr className={index % 2 === 0 ? 'even-row' : 'odd-row'}>
<td>{eventType}</td>
{Object.keys(transformedStats[eventType]).map(subject => (
<td key={`${eventType}-${subject}`}>{transformedStats[eventType][subject]}</td>
<div className='container'>
<div className='select-container'>
<Select variant='filled' size='md' width = '200px' marginTop='20px' marginRight='20px' value={selectedSeason} onChange={handleSeasonChange}>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</Select>
<Select variant='filled' size='md' width='200px' marginTop='20px' value={selectedYear} onChange={handleYearChange}>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</Select>
</div>
<div className='table-container'>
<table>
<thead>
<tr>
<th>Event Type</th>
{Object.keys(transformedStats).length > 0 &&
Object.keys(transformedStats[Object.keys(transformedStats)[0]]).map(subject => (
<th key={subject}>{subject}</th>
))}
</tr>
<tr className="divider-row">
<td colSpan={Object.keys(transformedStats[eventType]).length + 1}></td>
</tr>
</React.Fragment>
))}
</tbody>
</table>
</tr>
</thead>
<tbody className='table-body'>
{Object.keys(transformedStats).map((eventType) => (
<React.Fragment key={eventType}>
<tr className='table-data'>
<td>{eventType}</td>
{Object.keys(transformedStats[eventType]).map(subject => (
<td key={`${eventType}-${subject}`}>{transformedStats[eventType][subject]}</td>
))}
</tr>
</React.Fragment>
))}
</tbody>
</table>
</div>
</div>
);
};

StatTable.propTypes = {
season: PropTypes.string,
year: PropTypes.string,
};

export default StatTable;
8 changes: 4 additions & 4 deletions src/pages/PublishedSchedule/StatisticsModal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,19 @@ import {
ModalOverlay,
ModalContent,
ModalBody,
//useDisclosure,
} from '@chakra-ui/react';
import StatTable from '../../components/StatTable/StatTable';

const StatModal = ({ isOpen, onClose }) => {
//const { isOpen: isOpenStatModal, onOpen: onOpenStatModal, onClose: onCloseStatModal } = useDisclosure();
const StatModal = ({ isOpen, onClose, season }) => {
console.log(season);

return (
<>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent maxWidth={'fit-content'}>
<ModalBody>
<StatTable />
<StatTable season={season}/>
</ModalBody>
</ModalContent>
</Modal>
Expand All @@ -28,6 +27,7 @@ const StatModal = ({ isOpen, onClose }) => {
StatModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
season: PropTypes.string.isRequired,
};

export default StatModal;