diff --git a/frontend/components/Settings/WhartonApplicationStatus.tsx b/frontend/components/Settings/WhartonApplicationStatus.tsx index 24d369a5a..480141c73 100644 --- a/frontend/components/Settings/WhartonApplicationStatus.tsx +++ b/frontend/components/Settings/WhartonApplicationStatus.tsx @@ -1,5 +1,6 @@ import React, { ReactElement, useState } from 'react' -import { DiscreteColorLegend, Hint, RadialChart } from 'react-vis' +import { Hint, RadialChart } from 'react-vis' +import styled from 'styled-components' import { WHITE } from '~/constants/colors' import { ApplicationStatus } from '~/types' @@ -29,24 +30,44 @@ const colors = { function parseStatuses(statuses: ApplicationStatus[]): PieChartData { const applicationsTotal = {} + const applicationCommittees = {} const applicationsGrouped: PieChartData = {} statuses.forEach((status) => { - if (!(status.name in applicationsGrouped)) { + if (!(status.club in applicationCommittees)) { const total = {} Object.keys(colors).forEach((status) => (total[status] = 0)) - applicationsTotal[status.name] = total + applicationsTotal[status.club] = total - const grouped = {} - grouped[status.committee] = [] - applicationsGrouped[status.name] = grouped - } else if (!(status.committee in applicationsGrouped[status.name])) { - applicationsGrouped[status.name][status.committee] = [] + applicationCommittees[status.club] = {} } - applicationsTotal[status.name][status.status] += status.count - applicationsGrouped[status.name][status.committee].push({ - angle: status.count, - label: status.status, - color: colors[status.status], + if (!(status.committee in applicationCommittees[status.club])) { + applicationCommittees[status.club][status.committee] = {} + } + if ( + !(status.status in applicationCommittees[status.club][status.committee]) + ) { + applicationCommittees[status.club][status.committee][status.status] = 0 + } + applicationsTotal[status.club][status.status] += status.count + applicationCommittees[status.club][status.committee][status.status] += + status.count + }) + + Object.keys(applicationCommittees).forEach((club) => { + Object.keys(applicationCommittees[club]).forEach((committee) => { + Object.keys(applicationCommittees[club][committee]).forEach((status) => { + if (!(club in applicationsGrouped)) { + applicationsGrouped[club] = {} + } + if (!(committee in applicationsGrouped[club])) { + applicationsGrouped[club][committee] = [] + } + applicationsGrouped[club][committee].push({ + angle: applicationCommittees[club][committee][status], + label: status, + color: colors[status], + }) + }) }) }) @@ -67,6 +88,41 @@ function parseStatuses(statuses: ApplicationStatus[]): PieChartData { return applicationsGrouped } +const LegendContainer = styled.div` + height: 130px; + display: grid; + rowGap: "0.5rem", + alignItems: "center" +` + +const LegendColor = styled.div<{ color: string }>` + background-color: ${(props) => props.color}; +` +const LegendRow = styled.div` + display: grid; + grid-template-columns: 20px auto; + gap: 6px; +` + +interface LegendProps { + items: { + color: string + title: string + }[] +} +const Legend: React.FC = ({ items }) => { + return ( + + {items.map((item, index) => ( + + +
{item.title}
+
+ ))} +
+ ) +} + function StatusCard({ application, pieData, @@ -203,10 +259,9 @@ const WhartonApplicationStatus = ({ Download Data
- ({ title: label, - strokeWidth: 100, color: colors[label], }))} />