Merge pull request #628 from NBISweden/dev/barchart-fix

Bar chart fixes and help page

frontend/src/components/BarChart.tsx

@@ -12,6 +12,7 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
   const context = useContext(AuthContext);
   const today = new Date();
   const startDate = new Date(`January 1, ${today.getFullYear()}`);
+  const endDate = new Date(`December 31, ${today.getFullYear()}`);
 
   useEffect(() => {
     // Whenever the user has saved changes we want to fetch the year's time entries
@@ -28,7 +29,7 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
     const timeEntries = await getTimeEntries(
       undefined,
       startDate,
-      today,
+      endDate,
       context
     );
     let activityHours: { [key: string]: { hours: number; name: string } } = {};
@@ -79,7 +80,7 @@ export const BarChart = ({ loading }: { loading: boolean }) => {
 
   return (
     <section className="overview-wrapper">
-      <h2 className="overview-heading">This year's work</h2>
+      <h2 className="overview-heading">Yearly overview</h2>
       <div className="bar-chart-wrapper">
         {Object.keys(spentTime).length === 0 ? (
           <div className="bar-chart-section">

frontend/src/pages/Help.tsx

@@ -7,6 +7,7 @@ import { Cell } from "../components/Cell";
 import { IssueActivityPair, FetchedTimeEntry } from "../model";
 import { QuickAdd } from "../components/QuickAdd";
 import weektravel from "../images/weektravel.png";
+import { BarChart } from "../components/BarChart";
 
 export const Help = () => {
   const context = React.useContext(AuthContext);
@@ -207,6 +208,35 @@ export const Help = () => {
             onBlurRow={() => {}}
           />
         </div>
+        <h2 className="help-subtitle">The yearly overview</h2>
+        <p className="help-info">
+          The purpose of the yearly overview is to show you what you have spent
+          your time on between January 1st and December 31st of the current
+          year.
+        </p>
+        <p className="help-info">
+          The rectangular bars of the chart have labels like "Support" or
+          "Administration" that correspond to the activities you have reported
+          hours on. Therefore, all hours you have logged on "Support" will be
+          summed up into one single rectangle even though they were spent in
+          different support projects.
+        </p>
+        <BarChart loading={false}></BarChart>
+        <p className="help-info">
+          Absence is <b>not</b> included in the bar chart. When the bar chart is
+          generated, all hours logged during the current year on anything but
+          Absence are summed up. Then, a percentage for every activity is
+          calculated based on the total and rounded to two decimals.
+        </p>
+        <p className="help-info">
+          In sections with very few hours logged, you might not be able to
+          properly see what activity, hours and percentage they show. Hover over
+          the section to see the full label text. In rare situations, you might
+          have logged so few hours on an activity that its percentage would be
+          rounded down to zero during calculations. In that case, you will still
+          see a thin section displayed in the chart. Hover over it to see what
+          it belongs to.
+        </p>
         <h2 className="help-subtitle">Time travelling</h2>
         <p className="help-info">
           Users can navigate across different weeks by using the left and right