How to Build a Reporting Dashboard using Dash and Plotly
By: David Comfort
Tags: Dashboard, Dash, Towards Data Science, Data Science, Data Visualization

A method to select either a condensed data table or the complete data table.

One of the features that I wanted for the data table was the ability to show a “condensed” version of the table as well as the complete data table. Therefore, I included a radio button in the layouts.py file to select which version of the table to present:

Code Block 17: Radio Button in layouts.py

The callback for this functionality takes input from the radio button and outputs the columns to render in the data table:

Code Block 18: Callback for Radio Button in layouts.py File

This callback is a little bit more complicated since I am adding columns for conditional formatting (which I will go into below). Essentially, just as the callback below is changing the data presented in the data table based upon the dates selected using the callback statement, Output('datatable-paid-search', 'data' , this callback is changing the columns presented in the data table based upon the radio button selection using the callback statement, Output('datatable-paid-search', 'columns' .

Conditionally Color-Code Different Data Table cells

One of the features which the stakeholders wanted for the data table was the ability to have certain numbers or cells in the data table to be highlighted based upon a metric’s value; red for negative numbers for instance. However, conditional formatting of data table cells has three main issues.

There is lack of formatting functionality in Dash Data Tables at this time.

If a number is formatted prior to inclusion in a Dash Data Table (in pandas for instance), then data table functionality such as sorting and filtering does not work properly.

There is a bug in the Dash data table code in which conditional formatting does not work properly.

I ended up formatting the numbers in the data table in pandas despite the above limitations. I discovered that conditional formatting in Dash does not work properly for formatted numbers (numbers with commas, dollar signs, percent signs, etc.). Indeed, I found out that there is a bug with the method described in the Conditional Formatting — Highlighting Cells section of the Dash Data Table User Guide:

Code Block 19: Conditional Formatting — Highlighting Cells

The cell for New York City temperature shows up as green even though the value is less than 3.9.* I’ve tested this in other scenarios and it seems like the conditional formatting for numbers only uses the integer part of the condition (“3” but not “3.9”). The filter for Temperature used for conditional formatting somehow truncates the significant digits and only considers the integer part of a number. I posted to the Dash community forum about this bug, and it has since been fixed in a recent version of Dash.

*This has since been corrected in the Dash Documentation.

Conditional Formatting of Cells using Doppelganger Columns

Due to the above limitations with conditional formatting of cells, I came up with an alternative method in which I add “doppelganger” columns to both the pandas data frame and Dash data table. These doppelganger columns had either the value of the original column, or the value of the original column multiplied by 100 (to overcome the bug when the decimal portion of a value is not considered by conditional filtering). Then, the doppelganger columns can be added to the data table but are hidden from view with the following statements:

Code Block 20: Adding Doppelganger Columns

Then, the conditional cell formatting can be implemented using the following syntax:

Code Block 21: Conditional Cell Formatting

Essentially, the filter is applied on the “doppelganger” column, Revenue_YoY_percent_conditional (filtering cells in which the value is less than 0). However, the formatting is applied on the corresponding “real” column, Revenue YoY (%) . One can imagine other usages for this method of conditional formatting; for instance, highlighting outlier values.

The complete statement for the data table is below (with conditional formatting for odd and even rows, as well highlighting cells that are above a certain threshold using the doppelganger method):

Code Block 22: Data Table with Conditional Formatting

I describe the method to update the graphs using the selected rows in the data table below.