The last week I have been working on adding a category overview. This took longer than expected, as I have been sick this week, and also faced some challenges where I had to remake huge parts of my code, but here I am! @wehmoen has also provided the https://utopian.info/ domain (thanks!), so I will be referring to it as such from now on. I hope it's useful!

### Features
As I mentioned above, I added a category overview for all categories. Each overview has a graph that shows the amount of accepted/rejected contributions submitted to that category, each day, in the last week. Above this graph there's a bar showing the total amount of accepted/rejected/pending contributions for that category in the same time frame. Finally, there are three "leaderboards" at the bottom of the page, showing the contributors with the most accepted contributions, contributors with the most rejected contributions and moderators with the most reviewed contributions respectively. You can see this in action by going here https://utopian.info/category/all or watching the GIF below!

![categoryoverview.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520723172/nzgjahyfagbgu4xee02z.gif)

I tried to make it look relatively decent, but hopefully someone that is actually good at CSS and UX will make it look much better in the future (wanted to add some other statistics to the leaderboards, but couldn't make it look right)! I will probably add some more stuff to this overview in the future (like the original pie chart on utopian.info) once I think of it.  I also changed the supervisor overview slightly; supervisors themselves are now also shown in the overview (excluding points earned from task-requests) and each category on there links to its respective overview.

I also definitely want to add a proper homepage, instead of the current one, because it's currently pretty hard to find the category overview if you don't know it exists. The problem with this is that I have no idea how to make it look good, so if anyone can help with that, please contact me!

### How was it implemented?
#### Creating the dictionary
When I first started implementing everything, I created one function that created a huge dictionary containing *all* information about *all* categories, and I wanted to show everything on 1 page. After realising this wasn't the best way to do this, I created the route `/categories/<category>`, where `category` is a parameter for the `categories()` function in `app.py`. This function then retrieves all contributions made to the given category from the database and passes this to the `category_information()` function. This function creates three dictionaries, one for the category itself, one for the contributors and one for the moderators. Information is then extracted from each post to the relevant dictionary, and finally the functions `category_plot()` (creates the graph using [Bokeh](https://bokeh.pydata.org/en/latest/)), `author_leaderboard()` and `moderator_leaderboard()` are used to calculate some additional information/variables used on the page, which is then added to the `category` dictionary. This dictionary is then passed to the template, which is used to display all the information you see.
### Rendering the templates
There are actually two Jinja2 templates that are used to show each category's overview. The first one is `categories.html`, which uses a for loop to create the category sidebar on the left of the page. It is also the parent template of `category.html`, which is the template used to display the bar, the graph and the three leaderboards. This is also done using for loops to create the leaderboards, Bootstrap's progress bar to create the bar at the top, and the `<div>` and `<script>` returned by the  `category_plot()` function in `app.py` are used to create the graph.
### Styling the templates
The CSS for the leaderboards was adapted from [here](https://codepen.io/anon/pen/OvJxeq), and after watching some CSS tutorials (finally learned the difference between padding and margin...) I managed to style the rest myself. As I mentioned earlier, some people have contacted me to maybe help out with the UX/CSS etc. so my goal was to just make it presentable. Hopefully in the future it will look a lot better once others start working on it!

To see how to contribute and what my plans/roadmap are please check out [this post](https://utopian.io/utopian-io/@amosbastian/introducing-utopian-rocks) or the README! The next thing I'm probably going to work on is adding a way to change the time frame for both the category overview and the team overview. I also want to add sorting to the team overview tables and implement a proper homepage.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@amosbastian/utopian-rocks-utopian-info-category-overview">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>