Show and Tell: Competitive Pokemon TCG analysis site

Dash Python
,
1

Hello everyone!

I recently completed a site I’ve been working on for some time called Trainer Hill. This site communicates with an API I wrote (using Flask Restx) which in turn gathers data from a site that hosts Pokemon Trading Card Game, Pokemon Video Game, and Digimon Trading Card Game tournaments.

The app includes two different analysis tabs that visualizes different types of data for players: overall meta analysis and individual deck analysis. The app also includes a leaderboard for both players and deck archetypes. Lastly, the app allows individual player reports to be created and downloaded.

I host the site using DigitalOcean’s app platform ($5 per month for dynamic sites).

If there are any specific components or pieces you are curious about, feel free to reply below and I’d be happy to try and create a small example.

Below I’ll highlight some of the more interesting things I did with the Dash framework.

Let me know what you think!

Custom radio item component that uses images instead of text:

2022-03-31-13-27-19

Selecting and highlighting DataTable rows by clicking anywhere in the row, both multi and single select:

2022-03-31-13-43-39
2022-03-31-13-32-38

Downloading full reports from the site using clientside callbacks:

meta-analysis-matchup(1)
meta-analysis-matchup(1)1137×838 94.9 KB

Removing columns from DashTable based on screen size:

deck_mobile
deck_mobile354×539 23.7 KB

deck_full
deck_full1280×547 44.1 KB

9 Likes
2

Wow!
You gotta see this. @adamschroeder

1 Like
3

This is so cool! @raptorbrad
What a great idea for a Dash App. As a Pokemon fan myself this is really fun to see :heart_eyes:

Amazing work !

1 Like
4

Great job sir :grinning:

pikacheers
pikacheers550×550 40.5 KB

2 Likes
5

hi Brad @raptorbrad .
Thank you so much for sharing this with the community. You’ve come a long way since the last version.

Would you be ok sharing with us the piece of code on custom radio item component that uses images? I thought that was a neat trick.

Thank you,

2 Likes
6

Of course! I created that component in React based on other radio buttons, but included some very specific syntax. Each radio item is a normal radio item with a card as a child and within each card is an image.

To use it, first install the package:

pip install dash-utility-components

Then use as the following

import dash_utility_components as duc
radio_images = duc.RadioImages(
    id=radio_image,
    options=[
        {'label': '/assets/images/img1.png', 'value': 'img1'}
        {'label': '/assets/images/img2.png', 'value': 'img2'}
    ],
    value='img1',
    input_class_name='d-none',
    image_class_name='p-3 w-100',
    card_class_name='border-2',
    color='primary',
    persistence=True
)

The id, options, persistence, and value operate the same as other radio items. input_class_name sets the classes for the radio button itself. image_class_name sets the classes of the images and card_class_name sets that of the classes. The color parameter sets the color of the selected card. I suggest using a border on the card to emulate the card being selected.

3 Likes