Add TODO content, fix section depth of Probleme und Lösungen

documentation/parts/frontend.tex

@@ -105,6 +105,7 @@
 			\begin{itemize}
 				\item Verhältnis von Arbeitszeit zu Pausenzeit von allen Accounts des Benutzers.
 				\item Verhältnis der Arbeitszeit je TimeTrack Account des Benutzers mit Angabe des Gesamtverdienstes.
+				\item Verhältnis des Verdienstes je TimeTrack Account des Benutzers.
 			\end{itemize}
 			\item Säulendiagramme
 			\begin{itemize}
@@ -114,7 +115,6 @@
 		\end{itemize}
 		Um Diagramme verwenden zu können haben wir das Framework Apexcharts eingebunden, welches es ermöglicht, konfigurierbare Diagramme einzufügen.
 		Die Konfiguration des Säulendiagramms für die Ansicht der letzten 30 Tage ist nachfolgend dargestellt.
-		%TODO Update listing if changes to options are made 
 		\begin{lstlisting}[language=JavaScript, caption=Konfiguration Säulendiagramm]
 		<script>
 		...
@@ -196,6 +196,12 @@
 		          type: "datetime",
 		          categories: []
 		        },
+		        yaxis: {
+		          labels: formatter: function(value) {
+		                     ...
+		                    return hours + ":" + minutes + ":" + seconds;
+		                  }
+		        },
 		        legend: {
 		          show: false,
 		          position: "left",
@@ -254,8 +260,17 @@
 		\end{figure} 	
 		
 		\subsection{Statistics}
-		Auf der Statistics Seite sind die Daten der Time Records übersichtlich ausgewertet. Hier sind 2 verschiedene Diagrammtypen eingesetzt. 
-		%TODO Add picture when statistics page is reworked		
+		Auf der Statistics Seite sind die Daten der Time Records übersichtlich ausgewertet. Hier werden 2 verschiedene Diagrammtypen eingesetzt, um dem Benutzer eine bestmögliche Auswertung seiner Zeiteinträge zu bieten.
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/statistics_pie.PNG}
+			\caption{Kreisdiagramme}
+		\end{figure}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=\linewidth]{img/frontend/statistics_column.PNG}
+			\caption{Säulendiagramme}
+		\end{figure}
 		\subsection{Accounts}
 		Die Accouts Seite bietet einem die Möglichkeit eigene Accounts einzusehen und zu verwalten. Man kann neue Accounts hinzufügen und bestehende Accounts löschen oder anpassen.
 		
@@ -277,8 +292,8 @@
 		\includegraphics[width=\linewidth/2]{img/frontend/verwaltung.PNG}
 		\caption{Nutzer Verwaltung}
 	\end{figure} 
-	\subsection{Probleme und Lösungen}
-	\subsubsection{Diagramme}
+	\section{Probleme und Lösungen}
+	\subsection{Diagramme}
 	Beim erstellen der Säulendiagramme sind wir auf den Fehler gestoßen, dass der erste Eintrag von links nicht richtig angezeigt wird. Dieser Fehler ist den Entwicklern von Apexcharts bekannt aber noch nicht behoben. Wir haben das Problem behoben indem wir die die Daten an der ersten Stelle entfernen. Dies führt zu einem kleinen Abstand, jedoch wird das Diagramm so optimal ohne fehlende Beschriftungen dargestellt.
 	\subsection{Custom Headers Chrome}
 	Ein weiteres unserer Probleme war, dass Chrome sich geweigert hat auf den selbst erstellten Header zuzugreifen. Dieses Problem konnten wir im Backend lösen, indem wir den Header zu den Access-Control-Expose-Headers hinzugefügt haben.