Skip to content

Commit

Permalink
Merge pull request #29 from OpenUpSA/feature/attendance-tracker-downl…
Browse files Browse the repository at this point in the history 
…oad-data

Add Download Data to Attendance Tracker
  • Loading branch information
@paulmwatson
paulmwatson authored Feb 19, 2025
2 parents dd21109 + f227b6b commit 2a4d741
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 135 deletions.
235 changes: 121 additions & 114 deletions src/components/attendance/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
faArrowPointer,
faUser,
faFilter,
faDownload,
faComment
} from "@fortawesome/free-solid-svg-icons";

import "./index.scss";
Expand Down Expand Up @@ -118,6 +120,18 @@ function Attendance() {
}
};

const downloadJSON = () => {
const jsonString = JSON.stringify(filteredAttendance, (key, value) => {
return (value instanceof Set ? [...value] : value)
});

const blob = new Blob([jsonString], { type: 'text/json;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'parlimeter-attendance.json';
link.click();
};

const AttendanceTooltip = () => {
const attendedGroup = tooltipAttendance["grouped-attendance"]?.find(
(a) => a.group === "attended"
Expand Down Expand Up @@ -201,7 +215,7 @@ function Attendance() {
{Math.round(
(attendance.count /
tooltipAttendance["attendance-count"]) *
100
100
)}
%)
</td>
Expand Down Expand Up @@ -670,9 +684,9 @@ function Attendance() {
setFilteredByParties(
filteredByParties.includes(party)
? filteredByParties.filter(
(selectedParty) =>
selectedParty !== party
)
(selectedParty) =>
selectedParty !== party
)
: [...filteredByParties, party]
)
}
Expand Down Expand Up @@ -731,9 +745,9 @@ function Attendance() {
setFilteredByCommittees(
filteredByCommittees.includes(committee)
? filteredByCommittees.filter(
(selectedCommittee) =>
selectedCommittee !== committee
)
(selectedCommittee) =>
selectedCommittee !== committee
)
: [...filteredByCommittees, committee]
)
}
Expand Down Expand Up @@ -794,9 +808,9 @@ function Attendance() {
setFilteredByHouses(
filteredByHouses.includes(house)
? filteredByHouses.filter(
(selectedHouse) =>
selectedHouse !== house
)
(selectedHouse) =>
selectedHouse !== house
)
: [...filteredByHouses, house]
)
}
Expand Down Expand Up @@ -832,9 +846,8 @@ function Attendance() {
{filteredAttendance.length})
</h2>
<table
className={`${
ChartTypes[selectedChartType].detailed ? "detailed" : ""
}`}
className={`${ChartTypes[selectedChartType].detailed ? "detailed" : ""
}`}
>
<thead>
<tr>
Expand Down Expand Up @@ -951,45 +964,43 @@ function Attendance() {
<Fragment>
<td width="50%" className="no-padding-horizontal">
<div
className={`bar-background no-border-radius-right half ${
getDifferentToAveragePercentage(
row["attendance-percentage"]
) <= 0 && "align-right"
}`}
className={`bar-background no-border-radius-right half ${getDifferentToAveragePercentage(
row["attendance-percentage"]
) <= 0 && "align-right"
}`}
>
{getDifferentToAveragePercentage(
row["attendance-percentage"]
) <= 0 && (
<div
className={`bar state-${
getDifferentToAveragePercentage(
<div
className={`bar state-${getDifferentToAveragePercentage(
row["attendance-percentage"]
) > 0
? "more-than-average"
: "less-than-average"
}`}
style={{
width: `${Math.min(
Math.abs(
getDifferentToAveragePercentage(
row["attendance-percentage"]
)
),
100
)}%`,
}}
>
{getDifferentToAveragePercentage(
row["attendance-percentage"]
) > 0 && "+"}
{Math.round(
getDifferentToAveragePercentage(
}`}
style={{
width: `${Math.min(
Math.abs(
getDifferentToAveragePercentage(
row["attendance-percentage"]
)
),
100
)}%`,
}}
>
{getDifferentToAveragePercentage(
row["attendance-percentage"]
)
)}
%
</div>
)}
) > 0 && "+"}
{Math.round(
getDifferentToAveragePercentage(
row["attendance-percentage"]
)
)}
%
</div>
)}
&nbsp;
</div>
</td>
Expand All @@ -1002,45 +1013,43 @@ function Attendance() {
</td>
<td width="50%" className="no-padding-horizontal">
<div
className={`bar-background no-border-radius-left half ${
getDifferentToAveragePercentage(
row["attendance-percentage"]
) <= 0 && "align-right"
}`}
className={`bar-background no-border-radius-left half ${getDifferentToAveragePercentage(
row["attendance-percentage"]
) <= 0 && "align-right"
}`}
>
{getDifferentToAveragePercentage(
row["attendance-percentage"]
) > 0 && (
<div
className={`bar state-${
getDifferentToAveragePercentage(
<div
className={`bar state-${getDifferentToAveragePercentage(
row["attendance-percentage"]
) > 0
? "more-than-average"
: "less-than-average"
}`}
style={{
width: `${Math.min(
Math.abs(
getDifferentToAveragePercentage(
row["attendance-percentage"]
)
),
100
)}%`,
}}
>
{getDifferentToAveragePercentage(
row["attendance-percentage"]
) > 0 && "+"}
{Math.round(
getDifferentToAveragePercentage(
}`}
style={{
width: `${Math.min(
Math.abs(
getDifferentToAveragePercentage(
row["attendance-percentage"]
)
),
100
)}%`,
}}
>
{getDifferentToAveragePercentage(
row["attendance-percentage"]
)
)}
%
</div>
)}
) > 0 && "+"}
{Math.round(
getDifferentToAveragePercentage(
row["attendance-percentage"]
)
)}
%
</div>
)}
&nbsp;
</div>
</td>
Expand Down Expand Up @@ -1089,37 +1098,33 @@ function Attendance() {
attendance.state
)
}
className={`bar state-${
attendance.state
} state-grouping-${
ChartTypes[selectedChartType].detailed
className={`bar state-${attendance.state
} state-grouping-${ChartTypes[selectedChartType].detailed
? attendanceStates[attendance.state].group
: attendance.group
} ${
highlightedAttendanceState ===
attendance.state
} ${highlightedAttendanceState ===
attendance.state
? "state-highlighted"
: ""
}`}
}`}
style={{
width: `${
(attendance.count /
(ChartTypes[selectedChartType]
.percentage
? row["attendance-count"]
: maxAttendance)) *
width: `${(attendance.count /
(ChartTypes[selectedChartType]
.percentage
? row["attendance-count"]
: maxAttendance)) *
100
}%`,
}%`,
}}
>
{ChartTypes[selectedChartType].percentage
? `${Math.round(
parseFloat(
(attendance.count /
row["attendance-count"]) *
100
)
)}%`
parseFloat(
(attendance.count /
row["attendance-count"]) *
100
)
)}%`
: attendance.count.toLocaleString()}
</div>
))}
Expand Down Expand Up @@ -1166,18 +1171,16 @@ function Attendance() {
.map((state) => (
<li
key={state}
className={`state-${state} ${
highlightedAttendanceState === state
? "state-highlighted"
: ""
}`}
className={`state-${state} ${highlightedAttendanceState === state
? "state-highlighted"
: ""
}`}
>
<span
className={`bar state-${state} ${
highlightedAttendanceState === state
? "state-highlighted"
: ""
}`}
className={`bar state-${state} ${highlightedAttendanceState === state
? "state-highlighted"
: ""
}`}
>
{state}
</span>{" "}
Expand Down Expand Up @@ -1206,14 +1209,27 @@ function Attendance() {
</ul>
{selectedChartType !== "average" &&
ChartTypes[selectedChartType].detailed && (
<Fragment>
<Fragment className="mx-auto">
<FontAwesomeIcon
style={{ marginLeft: "auto" }}
icon={faArrowPointer}
/>
<div>Click to isolate a category</div>
</Fragment>
)}
<Button size="sm" onClick={downloadJSON}>
<FontAwesomeIcon icon={faDownload} className="me-2" />
Download Data
</Button>
<a
className="btn btn-primary btn-sm"
href="https://docs.google.com/forms/d/e/1FAIpQLSfaMxpxAx4TxaDcGZv2NySfZBir-nRblwMnNWiYhrxsnwsudg/viewform?usp=pp_url&entry.1431082534=Attendance+Tracker"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faComment} className="me-2" />
Provide Feedback
</a>
</Stack>
</td>
</tr>
Expand All @@ -1224,15 +1240,6 @@ function Attendance() {
</Row>
</div>
</Container>

<a
className="provideFeedback"
href="https://docs.google.com/forms/d/e/1FAIpQLSfaMxpxAx4TxaDcGZv2NySfZBir-nRblwMnNWiYhrxsnwsudg/viewform?usp=pp_url&entry.1431082534=Attendance+Tracker"
target="_blank"
rel="noopener noreferrer"
>
Povide feedback
</a>
</Fragment>
);
}
Expand Down
21 changes: 0 additions & 21 deletions src/components/attendance/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,27 +357,6 @@ h2 {
}
}

.provideFeedback {
position: fixed;
bottom: 47px;
right: 28px;
text-decoration: none;
display: inline-flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
background: linear-gradient(0deg, #001489 0%, #001489 100%), #fff;
box-shadow: 0px -101px 5px 0px rgba(0, 0, 0, 0),
0px 12px 5px 0px rgba(0, 0, 0, 0.01), 0px 7px 4px 0px rgba(0, 0, 0, 0.03),
0px 3px 3px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
&:hover {
background: linear-gradient(0deg, #001489 0%, #001489 100%), #fff;
color: #fff;
}
}

.attendance-tooltip {
background: #fff;
border-radius: 5px;
Expand Down

0 comments on commit 2a4d741

Please sign in to comment.