From f227b6b101b650305d5e0dd713066832a3da7da9 Mon Sep 17 00:00:00 2001 From: paulmwatson Date: Wed, 12 Feb 2025 11:45:39 +0200 Subject: [PATCH] Add Download Data to Attendance Tracker --- src/components/attendance/index.js | 235 ++++++++++++++------------- src/components/attendance/index.scss | 21 --- 2 files changed, 121 insertions(+), 135 deletions(-) diff --git a/src/components/attendance/index.js b/src/components/attendance/index.js index e6b4b53..bf18217 100644 --- a/src/components/attendance/index.js +++ b/src/components/attendance/index.js @@ -17,6 +17,8 @@ import { faArrowPointer, faUser, faFilter, + faDownload, + faComment } from "@fortawesome/free-solid-svg-icons"; import "./index.scss"; @@ -119,6 +121,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" @@ -202,7 +216,7 @@ function Attendance() { {Math.round( (attendance.count / tooltipAttendance["attendance-count"]) * - 100 + 100 )} %) @@ -671,9 +685,9 @@ function Attendance() { setFilteredByParties( filteredByParties.includes(party) ? filteredByParties.filter( - (selectedParty) => - selectedParty !== party - ) + (selectedParty) => + selectedParty !== party + ) : [...filteredByParties, party] ) } @@ -732,9 +746,9 @@ function Attendance() { setFilteredByCommittees( filteredByCommittees.includes(committee) ? filteredByCommittees.filter( - (selectedCommittee) => - selectedCommittee !== committee - ) + (selectedCommittee) => + selectedCommittee !== committee + ) : [...filteredByCommittees, committee] ) } @@ -795,9 +809,9 @@ function Attendance() { setFilteredByHouses( filteredByHouses.includes(house) ? filteredByHouses.filter( - (selectedHouse) => - selectedHouse !== house - ) + (selectedHouse) => + selectedHouse !== house + ) : [...filteredByHouses, house] ) } @@ -833,9 +847,8 @@ function Attendance() { {filteredAttendance.length}) @@ -952,45 +965,43 @@ function Attendance() { @@ -1003,45 +1014,43 @@ function Attendance() { @@ -1090,37 +1099,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()} ))} @@ -1167,18 +1172,16 @@ function Attendance() { .map((state) => (
  • {state} {" "} @@ -1207,7 +1210,7 @@ function Attendance() { {selectedChartType !== "average" && ChartTypes[selectedChartType].detailed && ( - + Click to isolate a category )} + + + + Provide Feedback +
    • @@ -1225,15 +1241,6 @@ function Attendance() { - - - Povide feedback - ); } diff --git a/src/components/attendance/index.scss b/src/components/attendance/index.scss index d0efafa..247dd53 100644 --- a/src/components/attendance/index.scss +++ b/src/components/attendance/index.scss @@ -359,27 +359,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;
    {getDifferentToAveragePercentage( row["attendance-percentage"] ) <= 0 && ( -
    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"] - ) - )} - % -
    - )} + ) > 0 && "+"} + {Math.round( + getDifferentToAveragePercentage( + row["attendance-percentage"] + ) + )} + % +
    + )}  
    {getDifferentToAveragePercentage( row["attendance-percentage"] ) > 0 && ( -
    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"] - ) - )} - % -
    - )} + ) > 0 && "+"} + {Math.round( + getDifferentToAveragePercentage( + row["attendance-percentage"] + ) + )} + % +
    + )}