Goal: I've created a Swimming Tracker using the Plotly Dash library in python. Here my goal was to create performance indicators that are not otherwise available in the usual sport tracking apps such as Strava, as they are lacking in Swimming performance indicators. Here my goal was to create two graphs, one for what is called Stroke Index, which is a performance indicator in the world of swimming which takes; swimspeed (m/s), distance per strok (DPS), and a stroke multiplier for freestyle (2 in this case), as sport watches only count strokes for one arm. The second graph I wanted to make was a mean idle time graph, to show progression in swimming with (hopefully) shorter breaks with time. To swim more and more continuously without breaks.
Data handling: Data from sports acitivities are exported from my sports watch and are in a file format ".FIT", which needs special parsing. Luckily there is a library for this called Fitparse, which I use in the application to parse all the files. All the files are put in a data folder and retrieved using the glob library, which provides a list of all the files in the data folder. Then the files are parsed using a function that reads each file and appends it to a initialized dataframe for further processing. As fitfiles contain multiple objects within, I create a dictionary of dataframes to keep all the information from each fitfile in their respective category.
For data storage, I thought it easiest to use a simple folder, as a SQL database would not be necessary as there wasn't much need for a relational database, due to the relative simplistic use of data in this application, that could simply be solved with basic pandas dataframes.
With the raw data at hand, some data transformation/data wrangling is done to; remove unecessary columns, create a date column, removing rows that are outside the scope of the later graphing, grouping dataframes on specific columns to get the mean of specific data. The data was then ready to use for the graphing that I had in mind, as I created specific dataframes for each graph.
Graphing: The graphing consists of two graphs; Stroke Index over time, to see any improvements in swimming. Here I made use of a scatter plot, to plot all the points in the dataframe. The second graph is the mean idle time, this is a line graph. Both of these graphs where For the graphing I added som interactivity for the UI in the form of a checklist button for toggling a rangeslider for the moving average graph. This works by creating a function that updates the layout of the figure when the app.callback is used.
Styling/formatting: The style of the application is very simple. It is simply two columns created with HTML. Here the simplest way to create the layout was by creating one variable for each section of the webpage sidebar & content. As when I tried to do it in one go when creating the variable app.layout, it simply did not work for whatever reason. Inside the sidebar and content variables that are input in app.layout, there are also some basic css elements used to place the footer correctly. I also created two CSS elements (sidebarstyle and contentstyle) which the layout variables sidebar and content make use of. This was done to make the code more readable and not mix the languages too much.
Potential improvements: The styling could use some more love, as the style is very simple with no pictures, colors etc. Which was as intended as my focus was on the functionality rather than the beauty of it. Morever my use of data in this app is not the most effective. I could have cleaned the data to a much higher extent by keeping only data that was needed. However I opted to simply leave much of the data in this case.