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.

Sign up for GitHub

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

assign colors to activities and remove Absence #606

Merged
merged 5 commits into from
Aug 31, 2022
Merged

assign colors to activities and remove Absence #606

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
13ca598
#591 assign colors to activities, remove Absence
HenrikeW Aug 30, 2022
3ec03f5
#591 add escape color for unknown activities
HenrikeW Aug 30, 2022
9ce9a9a
reset spentTime to avoid duplicates in chart
HenrikeW Aug 31, 2022
821098f
use activity ids in colorscheme
HenrikeW Aug 31, 2022
ec61470
fix inconsistent quoting
HenrikeW Aug 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 24 additions & 20 deletions frontend/src/components/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
);
let activityHours: { [key: string]: number } = {};
timeEntries.map((entry: FetchedTimeEntry) => {
if (entry.activity.name === "Absence (Vacation/VAB/Other)") {
return;
}
if (!activityHours[entry.activity.name]) {
activityHours[entry.activity.name] = 0;
}
Expand Down Expand Up @@ -58,31 +61,30 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
return Math.round((value / total) * 100);
};

const colors = [
"hsl(76deg 55% 53%)",
"hsl(288deg 13% 61%)",
"hsl(185deg 24% 80%)",
"hsl(26deg 91% 65%)",
"hsl(0deg 0% 75%)",
"hsl(186deg 30% 60%)",
"hsl(76deg 55% 77%)",
"hsl(291deg 13% 81%)",
"hsl(27deg 91% 77%)",
"hsl(76deg 55% 65%)",
"hsl(186deg 30% 86%)",
"hsl(0deg 0% 83%)",
"hsl(76deg 55% 42%)",
"hsl(26deg 91% 54%)",
"hsl(291deg 13% 90%)",
"hsl(185deg 24% 60%) ",
];
const colorScheme: { [key: string]: string } = {
Administration: "hsl(0deg 0% 75%)",
Consultation: "hsl(185deg 24% 80%)",
"Consultation (DM)": "hsl(76deg 55% 65%)",
"Core Facility Support": "hsl(185deg 24% 60%) ",
Design: "hsl(186deg 30% 86%)",
Development: "hsl(26deg 91% 65%)",
Implementation: "hsl(291deg 13% 81%)",
"Internal consultation": "hsl(0deg 0% 83%)",
"Internal NBIS": "hsl(76deg 55% 77%)",
"NBIS management": "hsl(26deg 91% 54%)",
"Presenting (outreach)": "hsl(27deg 91% 77%)",
"Professional Development": "hsl(288deg 13% 61%)",
Teaching: "hsl(186deg 30% 60%)",
Support: "hsl(76deg 55% 53%)",
"Support (DM)": "hsl(291deg 13% 90%)",
};

return (
<section className="overview-wrapper">
<h2 className="overview-heading">This year's work</h2>
<div className="bar-chart-wrapper">
{Object.keys(spentTime).length > 0 ? (
Object.keys(spentTime).map((key, index) => {
Object.keys(spentTime).map((key) => {
// If the number of hours is so low that the width would be rounded down to 0%,
// make it a thin slice anyway to show that it's there
const width =
Expand All @@ -95,7 +97,9 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
key={spentTime[key]}
style={{
width: width,
backgroundColor: `${colors[index]}`,
backgroundColor: `${
colorScheme[key] ? colorScheme[key] : "hsl(291deg 13% 90%)"
}`,
}}
className="bar-chart-section"
>
Expand Down