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

Bar chart fixes and help page #628

Merged
merged 5 commits into from
Sep 6, 2022
Merged

Bar chart fixes and help page #628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f652d9
include full year in bar chart
HenrikeW Sep 6, 2022
5fa3c53
change bar chart heading
HenrikeW Sep 6, 2022
1c6b288
adding help page section for bar chart
HenrikeW Sep 6, 2022
b598818
include Jons suggestions on help page
HenrikeW Sep 6, 2022
2287286
small help text corrections
HenrikeW Sep 6, 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
5 changes: 3 additions & 2 deletions frontend/src/components/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 } } = {};
Expand Down Expand Up @@ -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">
Expand Down
30 changes: 30 additions & 0 deletions frontend/src/pages/Help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down