Horizontal bar for time overview

frontend/src/components/BarChart.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState, useContext } from "react";
+import { AuthContext } from "../components/AuthProvider";
+import { getTimeEntries } from "../utils";
+import { FetchedTimeEntry } from "../model";
+
+export const BarChart = () => {
+  const [spentTime, setSpentTime] = useState<{ [key: string]: number }>({});
+  const [total, setTotal] = useState<number>(0);
+  const context = useContext(AuthContext);
+  const today = new Date();
+  const oneYearAgo = new Date();
+  oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
+
+  useEffect(() => {
+    getHoursPerActivity();
+  }, []);
+
+  const getHoursPerActivity = async () => {
+    const timeEntries = await getTimeEntries(
+      undefined,
+      oneYearAgo,
+      today,
+      context
+    );
+    let activityHours: { [key: string]: number } = {};
+    timeEntries.map((entry: FetchedTimeEntry) => {
+      if (!activityHours[entry.activity.name]) {
+        activityHours[entry.activity.name] = 0;
+      }
+      activityHours[entry.activity.name] += entry.hours;
+    });
+    setSpentTime(activityHours);
+  };
+
+  useEffect(() => {
+    const total = Object.values(spentTime).reduce(
+      (previousValue, currentValue) => previousValue + currentValue,
+      0
+    );
+    setTotal(total);
+  }, [spentTime]);
+
+  const getPercent = (value: number) => {
+    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%) ",
+  ];
+
+  return (
+    <section className="overview-wrapper">
+      <h2 className="overview-heading">This year's work</h2>
+      <div className="bar-chart-wrapper">
+        {Object.keys(spentTime).map((key, index) => {
+          // 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 =
+            getPercent(spentTime[key]) > 0
+              ? `${getPercent(spentTime[key])}%`
+              : "4px";
+
+          return (
+            <div
+              key={spentTime[key]}
+              style={{
+                width: width,
+                backgroundColor: `${colors[index]}`,
+              }}
+              className="bar-chart-section"
+            >
+              <p>{key}</p>
+              <p>
+                {spentTime[key]}h, {getPercent(spentTime[key])}%
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+};

frontend/src/index.css

@@ -804,6 +804,41 @@ Other button classes are defined further down together with other classes for th
   margin-left: 0.5rem;
 }
 
+/* OVERVIEW SECTION */
+.overview-wrapper {
+  padding: 1rem 1.5rem;
+  background-color: hsl(0deg 0% 97%);
+  margin-top: 0.2rem;
+}
+
+.overview-bar {
+  width: 100%;
+  height: 2rem;
+}
+
+.overview-heading {
+  font-size: 1rem;
+}
+
+.bar-chart-wrapper {
+  display: flex;
+  width: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.bar-chart-section {
+  overflow: hidden;
+  height: 100%;
+  padding-left: 0.3rem;
+}
+
+.bar-chart-section > p {
+  display: block ruby;
+  margin: 0;
+  font-size: 0.8rem;
+}
+
 .vacation-plan-picker-label {
   margin: 0 0 0.1rem;
 }

frontend/src/pages/Report.tsx

@@ -37,6 +37,7 @@ import warning from "../icons/exclamation-triangle.svg";
 import check from "../icons/check.svg";
 import up from "../icons/caret-up-fill.svg";
 import down from "../icons/caret-down-fill.svg";
+import { BarChart } from "../components/BarChart";
 
 const beforeUnloadHandler = (event) => {
   event.preventDefault();
@@ -829,6 +830,7 @@ export const Report = () => {
               </div>
             </div>
           </section>
+          <BarChart></BarChart>
         </main>
         <div className="footer">
           <section className="footer-container">