diff --git a/client/src/components/graphs/BarChart/index.tsx b/client/src/components/graphs/BarChart/index.tsx
index 08a5a512ac6cbe7b88d307acd3ef0579c8ad1d5e..195623a53cd9a0724b3fcee75224f4797b767c30 100644
--- a/client/src/components/graphs/BarChart/index.tsx
+++ b/client/src/components/graphs/BarChart/index.tsx
@@ -81,7 +81,7 @@ export default function BarChart({ data, unit, multiplier }: Props) {
{
data.map((item, i) => (
<div
- key={i}
+ key={data.length - i}
className="bar"
style={{
height: ((item.value / maxValue) * 95 + 5) + '%',
diff --git a/client/src/components/graphs/CircularProgress/index.tsx b/client/src/components/graphs/CircularProgress/index.tsx
index 7427f1c2e0deb16ce81b2f699e88468261324b5a..f9ec5bf31a8de0e64210636f1fdc634e9253113d 100644
--- a/client/src/components/graphs/CircularProgress/index.tsx
+++ b/client/src/components/graphs/CircularProgress/index.tsx
@@ -10,6 +10,11 @@ interface Props {
label?: string;
}
+/**
+ * This component implements a circular progress element. The completion will be shown in the color
+ * given in the property. If a label will be given, it will be displayed in the center of the
+ * progress circle. The circle itself is implemented as a svg.
+ */
export default function CircularProgress({ percent, color, label }: Props) {
const angle = Math.min(Math.max(percent / 100, 0), 0.99) * 2 * Math.PI;
const largeFlag = angle > Math.PI ? 1 : 0;
diff --git a/client/src/components/graphs/LinearProgress/index.tsx b/client/src/components/graphs/LinearProgress/index.tsx
index 70ea18469091af80a59354e2a8b69803c9cbf75e..435c88500839cd90384de031d5fd4e0576765662 100644
--- a/client/src/components/graphs/LinearProgress/index.tsx
+++ b/client/src/components/graphs/LinearProgress/index.tsx
@@ -6,6 +6,10 @@ interface Props {
color: string;
}
+/**
+ * This component implements a linear progress bar. The progress bar will be shown in the color
+ * given in the color property. This value must be one of the theme colors.
+ */
export default function LinearProgress({ percent, color }: Props) {
return (
<div className="linear-progress">
diff --git a/client/src/components/layout/CommentList/index.tsx b/client/src/components/layout/CommentList/index.tsx
index 1ce5089050f2630a485e0c0563b562cf63110102..0ca38be608e306ee835ea9d57b22c954ff07bf8c 100644
--- a/client/src/components/layout/CommentList/index.tsx
+++ b/client/src/components/layout/CommentList/index.tsx
@@ -15,6 +15,11 @@ interface Props {
taskId: string;
}
+/**
+ * This component implements the list of comment that is to be shown in the task page. This includes
+ * a list of comments given in the comments property and a input form that allows the user to create
+ * a new comment.
+ */
export default function CommentList({ comments, taskId }: Props) {
const [error, setError] = useState(false);
const [user, setUser] = useState<User>();
diff --git a/client/src/components/layout/CompletionGrid/index.tsx b/client/src/components/layout/CompletionGrid/index.tsx
index 05059b261e6844242845446c6df5eeaadb195445..43cd21397ad0fe7d54b2a7dcbf568dbe687bc241 100644
--- a/client/src/components/layout/CompletionGrid/index.tsx
+++ b/client/src/components/layout/CompletionGrid/index.tsx
@@ -7,6 +7,10 @@ interface Props {
items: CompletionProps[];
}
+/**
+ * This component implements a grid for displaying completion information. This consists of multiple
+ * Completion components the parameters of which are given in the items property.
+ */
export default function CompletionGrid({ items }: Props) {
return (
<div className="completion-grid">
diff --git a/client/src/components/layout/DetailGrid/index.tsx b/client/src/components/layout/DetailGrid/index.tsx
index 466bddecbb16218b0f095e60b22e6e3e63850397..8dd0d29d3adb43c03ccd42789c8fe1213432d1a2 100644
--- a/client/src/components/layout/DetailGrid/index.tsx
+++ b/client/src/components/layout/DetailGrid/index.tsx
@@ -7,7 +7,11 @@ interface Props {
details?: DetailProps[]
}
-export default function DetailGrid({ details }: Props) {
+/**
+ * This component implements a grid for displaying details. It consists of multiple DetailBoxes
+ * the properties of which are given in the details property.
+ */
+export default function DetailGrid({ details }: Props): JSX.Element {
return (
<div className="detail-grid">
{
diff --git a/client/src/components/layout/Page/index.tsx b/client/src/components/layout/Page/index.tsx
index 8832523357e8872fefc80c23c5f0d69ebacc7de6..4538a73e564fd4f83ead1575e711c6c80bcf453d 100644
--- a/client/src/components/layout/Page/index.tsx
+++ b/client/src/components/layout/Page/index.tsx
@@ -8,6 +8,10 @@ interface Props {
className?: string,
}
+/**
+ * This is used as a wrapper for the application content. This is mainly used for styling and layout
+ * purposes.
+ */
export default function Page({ children, className }: Props) {
return (<>
<main className={'page-container ' + (className ?? '')}>
diff --git a/client/src/components/layout/ProjectGrid/index.tsx b/client/src/components/layout/ProjectGrid/index.tsx
index 0027090aea0651d47fa07b8d26393903ab4e487b..ae435f99fad103dd8d3b166b85c1d54d33513678 100644
--- a/client/src/components/layout/ProjectGrid/index.tsx
+++ b/client/src/components/layout/ProjectGrid/index.tsx
@@ -11,6 +11,11 @@ interface Props {
projects: IProject[]
}
+/**
+ * This component implements a grid for showing multiple projects. The grid will display all
+ * projects given in the projects property. The grid also gives a link to the project creation
+ * page.
+ */
export default function ProjectGrid({ projects }: Props) {
let counter = 0;
return (
diff --git a/client/src/components/layout/ProjectsSlider/index.tsx b/client/src/components/layout/ProjectsSlider/index.tsx
index 1accdd8dcb4f74efb7ed475d382ba0ad5e450bdc..33f527a200a598275afa3957b8a2262d3a789e7c 100644
--- a/client/src/components/layout/ProjectsSlider/index.tsx
+++ b/client/src/components/layout/ProjectsSlider/index.tsx
@@ -11,6 +11,12 @@ interface Props {
projects: Project[]
}
+/**
+ * This component implements a slider for showing multiple projects. The slider will adjust the
+ * number of projects presented depending on the size of the screen. The component also provided a
+ * functionality to move the slider. All projects in the projects property will be shown in a
+ * project slide component.
+ */
export default function ProjectsSlider({ projects }: Props) {
const [position, setPosition] = useState(0);
diff --git a/client/src/components/layout/TaskList/index.tsx b/client/src/components/layout/TaskList/index.tsx
index e4344b41bd95afe5446c0a7b556b25d6b3f15109..9be8e5c1363f319c0fd08a646d9f0e1054f834e9 100644
--- a/client/src/components/layout/TaskList/index.tsx
+++ b/client/src/components/layout/TaskList/index.tsx
@@ -12,6 +12,10 @@ interface Props {
addButton?: boolean
}
+/**
+ * This component implements a list of task. The list also has a link to the task creation page. The
+ * tasks in the tasks property will be displayed under the add button.
+ */
export default function TaskList({ tasks, addButton }: Props) {
return (
<div className="task-list">
diff --git a/client/src/components/layout/UserList/index.tsx b/client/src/components/layout/UserList/index.tsx
index ca288e281827d8f461219ed3092f2fa77ce65416..5ab9eee8ab878c8adea728378e081ca9c12b9c61 100644
--- a/client/src/components/layout/UserList/index.tsx
+++ b/client/src/components/layout/UserList/index.tsx
@@ -16,6 +16,11 @@ interface Props<T extends User> {
settings?: (user: T) => DropDownItem[];
}
+/**
+ * This component implements a list of user. The list will be displayed with the users name and user
+ * image and also include information given by the info function. If the settings function is given
+ * as a property, the dropdown returned by this function will be accessible to the user by a button.
+ */
export default function UserList<T extends User>({ users, addContent, info, settings }: Props<T>) {
const [showAdd, setShowAdd] = useState(false);
return (