Style_data_conditional and Empty Strings

twelsh37 · December 30, 2020, 1:14pm

Hi All, I’m new to Dash and Python so you know this is probably going to be a muppet post.

I have had a read of the 5 other posts similar to this one but none seem to address my problem apart from this one which was a bug back in 2019 and was addressed then.

I have Python 3.8.3, Dash 1.18.1 and dash-table 4.11.1

My Issue is that if i have a style_data_conditional filter set to highlight cells based on values

# Format Gross and Net Risk ***************************
# Cells dependant on risk score ***********************
#|------------|------------------|---------|------------|
#| Priority   | RGB Colour Value | Hex     |  Range     |
#|------------+------------------+---------+------------|
#| Very High  | 192, 0, 0        | #C00000 | > 18       |
#| High       | 237, 125, 49     | #ED7D31 | > 11 < 17  |
#| Medium     | 155, 192, 0      | #FFC000 | > 7 < 11   |
#| Low        | 0, 176, 80       | #00B050 | > 3 < 7    |
#| Very Low   | 146, 208, 80     | #92D050 | <= 3       |
#|------------|------------------|---------|------------|

I have filters for each of the Prioritys and they all work until I get to Very Low

# Format Gross and Net Risk ***************************
        # Cells dependant on risk score ***********************
        #|------------|------------------|---------|------------|
        #| Priority   | RGB Colour Value | Hex     |  Range     |
        #|------------+------------------+---------+------------|
        #| Very High  | 255, 0, 0        | #FF0000 | > 18       |
        #| High       | 255, 165, 0      | #FFA500 | > 11 < 17  |
        #| Medium     | 255, 255, 0      | #FFFF00 | > 7 < 11   |
        #| Low        | 154, 205, 50     | #9ACD32 | > 3 < 7    |
        #| Very Low   | 127, 255, 0      | #7FFF00 | <= 3       |
        #| Blank      | 255, 255, 255    | #FFFFFF | " "        |
        #|------------|------------------|---------|------------|

        # Very High - Gross Risk
        {
            'if': {
                'column_id': 'gross_risk',
                'filter_query': '{gross_risk} gt 16'
            },
            'backgroundColor': 'rgb(255, 0, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Very High - Net Risk
        {
            'if': {
                'column_id': 'net_risk',
                'filter_query': '{net_risk} gt 16'
            },
            'backgroundColor': 'rgb(255, 0, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # High - Gross Risk
        {
            'if': {
                'column_id': 'gross_risk',
                'filter_query': '{gross_risk} gt 11 && {gross_risk} lt 17'
            },
            'backgroundColor': 'rgb(255, 165, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # High - Net Risk
        {
            'if': {
                'column_id': 'net_risk',
                'filter_query': '{net_risk} gt 11 && {net_risk} lt 17'
            },
            'backgroundColor': 'rgb(255, 165, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Medium - Gross Risk
        {
            'if': {
                'column_id': 'gross_risk',
                'filter_query': '{gross_risk} gt 7 && {gross_risk} lt 11'
            },
            'backgroundColor': 'rgb(255, 255, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Medium - Net Risk
        {
            'if': {
                'column_id': 'net_risk',
                'filter_query': '{net_risk} gt 7 && {net_risk} lt 11'
            },
            'backgroundColor': 'rgb(255, 255, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Low - Gross Risk
        {
            'if': {
                'column_id': 'gross_risk',
                'filter_query': '{gross_risk} gt 3 && {gross_risk} lt 7'
            },
            'backgroundColor': 'rgb(154, 205, 50)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Low - Net Risk
        {
            'if': {
                'column_id': 'net_risk',
                'filter_query': '{net_risk} gt 3 && {net_risk} lt 7'
            },
            'backgroundColor': 'rgb(154, 205, 50)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Very Low - Gross Risk
        {
            'if': {
                'column_id': 'gross_risk',
                'filter_query': '{gross_risk} lt 4 && {net_risk} eq " "'
            },
            'backgroundColor': 'rgb(127, 255, 0)',
            'color': 'white',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Very Low - Net Risk
        {
            'if': {
                'column_id': 'net_risk',
                'filter_query': '{net_risk} lt 4 && {net_risk} eq " "'
            },
            'backgroundColor': 'rgb(127, 255, 0)',
            'color': 'black',
            'font-size': 22,
            'textAlign': 'center',
        },

        # Empty Cell - Gross Risk
        {
            'if': {
                'column_id': 'gross_risk',
                'filter_query': '{gross_risk} eq " "'
            },
            'backgroundColor': 'rgb(255, 255, 255)',
            'color': 'black',
        },

        # Empty Cell - Net Risk
        {
            'if': {
                'column_id': 'net_risk',
                'filter_query': '{net_risk} eq " "'
            },
            'backgroundColor': 'rgb(255, 255, 255)',
            'color': 'black',
        },

    ],

When i run this over my data table, not only do the cells with a value under 4 not get coloured but also blank cells also do not get a background colour added as can be seen in the output below.

I’m sure it is an easy fix but not as easy as just removing the ’ && {net_risk} eq “” ’ from the filter or putting a space between the ’ " " ’

All help gratefully received.

And yes, I have the same code for net_risk hence i dint post it all juts the very low one

Eduardo · December 30, 2020, 2:25pm

Hi @twelsh37 wellcome to the Community,

The part of the code you are showings seams to be doing what is shown in the table.

You are saying if the code in column “Net Risk” are less than 3 “and” the code in column “Gross Risk” is lower than “4” put some background color. But you are not saying what happend when the “Net Risk” is less than “3” and “Gross Risk” is higger than "4"

twelsh37 · December 30, 2020, 3:22pm

Hi @Eduardo,

I cut my code for simplicity, I see that was a mistake. I have updated it with the full code now for the styling.

All the levels above Very Low style as expected.

Very low, if i remove the ‘&& {net_risk} eq “”’ ’ will style both the values less than 3 AND cells with no content green as shown below

I want the blank cells to remain unstyled and i would like the Ver low between 1 - 3 to be the colour I have designated.

Now having just written that I could do the following

'filter_query': '{gross_risk} gt 0 && {gross_risk} lt 4'

Which gives me

But as you can see its not consistent. It has missed out a few of Net Risk < 4 but it has also colored some.

hmmm

p.s And yes I will sort out my font coloring so its consistent

Eduardo · December 30, 2020, 6:09pm

This is not consistent: it is not possible to have an element < than 4 and = " "

twelsh37 · December 31, 2020, 6:01am

Hi Eduardo. its explaining time .

Why can’t I have a < 4 AND = “” ( A BLANK cell) as a test condition? Both exist so I should be able to test for them?

If cell contents <4 = TRUE
if Cell contents = “” == TRUE
Do Something

I thought that’s the whole point of conditional logic?

Eduardo · December 31, 2020, 10:37am

@twelsh37 The and condition implies that both condition must be true in order to the whole condition to be also true.

If cell contents <4 ‘and’ that means Cell contents != “” == FALSE
if Cell contents = “” ‘and’ that means cell contents is not <4 == FALSE

It can be both True then allways is false.

In this case you must use 'or’

twelsh37 · December 31, 2020, 2:19pm

Hi Eduardo,

Thanks for taking time to hang out with Stupid here. I see the logic now. I also found out why i was getting another error. Copy paste is such a whore. Always giving, never saying anything. Any hoo

changing

'filter_query': '{net_risk} gt 0 &&  {gross_risk} lt 4'

To This

'filter_query': '{net_risk} gt 0 &&  {net_risk} lt 4'

Works perfectly when i changed the last row heading to {net_risk} from {gross_risk}
I’ll try and remember that logic OR will I

Eduardo · December 31, 2020, 3:01pm

Glad to know that works

Topic		Replies	Views
Datatable style_data_conditional for empty strings Dash Python	5	3249	August 5, 2024
Dashtable data conditionals Dash Python	0	372	March 19, 2019
Conditional Formatting in Dash Table 3.7.0? Dash Python	7	1509	June 29, 2022
Dash_Table in Python: style_data_conditional loop between columns Dash Python	2	650	December 17, 2022
Filter Query DashTable for blank Dash Python	0	1463	August 23, 2019

Style_data_conditional and Empty Strings

Related topics