Show and Tell: Dashboard app for online games data

Dash Python
1

Hello fellow Plotly Dash coders! I want to share something that I’ve been working on for some time using Plotly Dash.

What is it for?

There is a free strategy game that I’ve been playing on and off for years called Battle for Wesnoth. The main team was creating a monthly report of the data that they collect about all online games played each month on the official server. I realized that, as an improvement, I could make a dashboard that connects directly to the source of their data and allows users to see and filter any information they want.

How does it look like now?

image
image1850×1552 291 KB

The Statistics Page

image
image1850×1483 327 KB

The Query Page

You can see the live version of the app here. It is a multi-page app that uses Dash Pages, but it only has two pages so far. Dash Bootstrap Components was used a lot.

The Header section at the top of the website contains a title, a User Guide button that displays a modal with usage info, and a primary navigation for going to the two pages implemented using Dash Pages.

The main section of the website is a Dash Pages Container that changes its content when the user clicks on the page links in the primary navigation in the header.

In both pages, after a user selects a Date Range, data is fetched from the database and then output on the dashboard.

In the first page, some overall descriptive statistics for the games played in the specified date range is presented as several donut plots.

In the second page, a Dash Datatable is used to present a list of all games played in the specified date range, and a histogram is shown below that conveys how the games are distributed based on Game Duration in minutes.

At the bottom of the website is a footer where I decided to show all the notable technologies used for creating the website, which includes links for going to the official Plotly website. It also contains links to the source code on GitHub where people can contribute or learn from the code.

About the Source Code

The source code is hosted on GitHub, where it has a detailed README. It was a repository that was originally created by me but has now been transferred under the ownership of the Wesnoth organization. Here are some things the app features that is relevant to developers:

  • Automated tests using Dash Testing.
  • Separate list of Python dependencies for development and production
  • app runtime configuration using JSON or environment variables

Contributions Welcome

As of this posting, I have been the main author of this app so far, but I don’t need to have all the glory. We would be happy for others to contribute by fixing bugs, reviewing the code quality, and implementing feature requests or coming up with their own. There are a few open issues in the repository page.

The dashboard has not yet reached its full potential and is only making use of a fraction of the data from the database. To have an idea about what kind of information exists in the database, here is a link to a .sql file that contains the schema or table definitions of the database. A small sample of the database is included as a .sql file in the repository for development purposes.

If you are new to Plotly Dash, don’t be shy. You can try to run this on your own computer by following the README instructions. If there are things that you need help with regards to understanding the code, I am willing to answer questions.

An Impression I want to make

Some might look at Plotly Dash and think that it is a software tool to be utilized only for specialized or advanced applications of data analysis and simulation. I hope this project shows that Plotly Dash is practical for the simple task of just fetching data and then listing it and plotting it.

As an aside, the Battle for Wesnoth game is quite good in its own right. if you like probability, you will enjoy it’s probability-based combat. You have to mitigate bad luck, or bad RNG, as much as you can by creating the most favorable conditions. During play, whenever you get defeated, you must have the awareness to realize whether you have lost because you played poorly or if you have actually played well but only lost due to a rare stroke of bad luck.

3 Likes
2

What a cool app. I never heard of that game, @human42, but it reminds me of Heroes of Might and Magic, which I played a lot throughout my teenage years.

I reviewed your app and liked how you represent your data. Here are a few pointers, in case you find them helpful:

  1. The user guide button includes a question mark icon. I would remove that. The common practice is to see a stand alone question mark icon which suggests more information. But user guide is explicit in that it provides more information for the user. Therefore, the question mark icon is a bit redundant.
  2. The footnote takes up a lot of space and will most likely be read once by the user, after which there is no need to see it. Maybe put it inside an accordion or collapsible div or modal, so you have more screen space for your graphs.
  3. view source code on github can also be shortened to Github or Github code. People assume the clicking on a button will take them to a place to read / view more.
  4. Why am I limited to 5000 games in the query tab but not in the statistics tab? Is there any way to lift that limitation?
  5. Make sure your app loads with content from the very beginning, or else it looks broken. Pre-populate dates when app loads so you have some graphs display. Maybe FROM (present date minus two days) TO (present date).
1 Like
3

Thank you for those good tips, with an included rationale for each!

Why am I limited to 5000 games in the query tab but not in the statistics tab? Is there any way to lift that limitation?

An early version of the app originally had only one page, where the elements of both the query tab and the statistics tab were displayed together. In this version, there was also no limit on the query size.


statistics and query combined early version ^

We started seeing Out-of-Memory errors when making queries that had a date range several weeks long or more as a result of this. For context, the server environment the app is running in has only 2GB RAM.

The issue is documented initially here and then followed by here.

The solution was to split the dashboard into two pages,

one that makes SQL queries that only fetch aggregate data over the specified date range, the statistics tab

Example: Fetching only the count of games that match the filter condition instead of the rows of all the games

SELECT INSTANCE_VERSION, COUNT(*) FROM {target_table} WHERE START_TIME BETWEEN ? AND ? GROUP BY INSTANCE_VERSION

and one that fetches complete data over the specified date range, the query tab

If someone in the Plotly Community would provide a better solution, or even make a PR, it would make my day!

1 Like