Added more descriptions for the components in graphs and layout

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) + '%',

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;

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">

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>();

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">

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">
             {

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 ?? '')}>

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 (

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);
 

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">

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 (