HTML Card for Account Product Matrix

cmoreno

Hello,

Back in March 24' I attended Domopalooza where a html card was utilized as matrix to measure domo account activity (picture attached). I would love to utilize a similar idea, but I am running into some issues. I have my ETL set where I have distinguished my levels to measure an account product matrix. I have been referencing this page , Adding Graphics, Links, and Images to Table Cards Using Beast Mode (domo.com), for table cards.

How should I construct my beast mode to show the values as text field, while also having the colors set by the value. I would like the initial view to show all accounts and have each column color as a heatmap based on the distinct number of accounts. Then have the ability to have user to search for a particular account, where those account levels can be highlighted.

ArborRose

I wasn't at Domopalooza, but it looks like a very interesting card. I think what you are looking for may be something like the following.

rgba - is R (red), G (green), and B (blue)..the colors of light. With an alpha channel as a fourth value. The values go from 0 to 255. Turning the first value to 255 means red is on.

Metric with applied formatting:

CONCAT('<div style="background-color:', 

    CASE 

        WHEN `activity_metric` > 100 THEN 'rgba(255, 0, 0, 0.5)' -- Red for high activity

        WHEN `activity_metric` BETWEEN 50 AND 100 THEN 'rgba(255, 165, 0, 0.5)' -- Orange for medium activity

        WHEN `activity_metric` < 50 THEN 'rgba(0, 255, 0, 0.5)' -- Green for low activity

        ELSE 'rgba(211, 211, 211, 0.5)' -- Gray for no activity

    END, 

    '">', `activity_metric`, '</div>'

)

And if you need to highlight based on a specific account:

CASE 

    WHEN `account_name` = 'SearchedAccountName' THEN 'rgba(0, 0, 255, 0.5)' -- Blue highlight for searched account

    ELSE 

        CASE 

            WHEN `activity_metric` > 100 THEN 'rgba(255, 0, 0, 0.5)'

            WHEN `activity_metric` BETWEEN 50 AND 100 THEN 'rgba(255, 165, 0, 0.5)'

            WHEN `activity_metric` < 50 THEN 'rgba(0, 255, 0, 0.5)'

            ELSE 'rgba(211, 211, 211, 0.5)'

        END

END

ArborRose

If you are using concat to combine text and numeric values on an html card, you won't be able to use Domo's heatmap. But you can implement your own heatmap by assigning your own color ranges based on the number of accounts.

Level 1: 0 - 10 accounts → light green
Level 2: 11 - 30 accounts → yellow
Level 3: 31 - 50 accounts → light orange
Level 4: 51 - 100 accounts → darker orange
Level 5: 101 - 200 accounts → light red
Level 6: 200+ accounts → dark red

CASE 

    WHEN `account_count` <= 10 THEN 'rgba(173, 255, 47, 0.5)' 

    WHEN `account_count` BETWEEN 11 AND 30 THEN 'rgba(255, 255, 0, 0.5)'

    WHEN `account_count` BETWEEN 31 AND 50 THEN 'rgba(255, 165, 0, 0.5)'

    WHEN `account_count` BETWEEN 51 AND 100 THEN 'rgba(255, 140, 0, 0.5)'

    WHEN `account_count` BETWEEN 101 AND 200 THEN 'rgba(255, 99, 71, 0.5)'

    WHEN `account_count` > 200 THEN 'rgba(255, 0, 0, 0.5)'

    ELSE 'rgba(211, 211, 211, 0.5)' -- Default Gray 

END

CONCAT('<div style="background-color:', 
    CASE 

        WHEN `account_count` <= 10 THEN 'rgba(173, 255, 47, 0.5)' 

        WHEN `account_count` BETWEEN 11 AND 30 THEN 'rgba(255, 255, 0, 0.5)'

        WHEN `account_count` BETWEEN 31 AND 50 THEN 'rgba(255, 165, 0, 0.5)'

        WHEN `account_count` BETWEEN 51 AND 100 THEN 'rgba(255, 140, 0, 0.5)'

        WHEN `account_count` BETWEEN 101 AND 200 THEN 'rgba(255, 99, 71, 0.5)'

        WHEN `account_count` > 200 THEN 'rgba(255, 0, 0, 0.5)'

        ELSE 'rgba(211, 211, 211, 0.5)' -- Default Gray 

    END, 
    '">', `account_count`, '</div>'
)

ArborRose

I wasn't at Domopalooza, but it looks like a very interesting card. I think what you are looking for may be something like the following.

rgba - is R (red), G (green), and B (blue)..the colors of light. With an alpha channel as a fourth value. The values go from 0 to 255. Turning the first value to 255 means red is on.

Metric with applied formatting:

CONCAT('<div style="background-color:', 

    CASE 

        WHEN `activity_metric` > 100 THEN 'rgba(255, 0, 0, 0.5)' -- Red for high activity

        WHEN `activity_metric` BETWEEN 50 AND 100 THEN 'rgba(255, 165, 0, 0.5)' -- Orange for medium activity

        WHEN `activity_metric` < 50 THEN 'rgba(0, 255, 0, 0.5)' -- Green for low activity

        ELSE 'rgba(211, 211, 211, 0.5)' -- Gray for no activity

    END, 

    '">', `activity_metric`, '</div>'

)

And if you need to highlight based on a specific account:

CASE 

    WHEN `account_name` = 'SearchedAccountName' THEN 'rgba(0, 0, 255, 0.5)' -- Blue highlight for searched account

    ELSE 

        CASE 

            WHEN `activity_metric` > 100 THEN 'rgba(255, 0, 0, 0.5)'

            WHEN `activity_metric` BETWEEN 50 AND 100 THEN 'rgba(255, 165, 0, 0.5)'

            WHEN `activity_metric` < 50 THEN 'rgba(0, 255, 0, 0.5)'

            ELSE 'rgba(211, 211, 211, 0.5)'

        END

END

cmoreno

@ArborRose thank you for your response!

I have about 6 levels, and I'm wanting to have the colors show as heatmap based on the numbers of accounts at each level. Can this instead be set as a heatmap? I know there is an automatic heatmap option with integer values. However, since I'm using the concat function to include text along with int. values, I cannot use that option. I'm assuming that I will have to assign my own heatmap colors and ranges values, and it cannot be done automatically. Is this correct?

ArborRose

If you are using concat to combine text and numeric values on an html card, you won't be able to use Domo's heatmap. But you can implement your own heatmap by assigning your own color ranges based on the number of accounts.

Level 1: 0 - 10 accounts → light green
Level 2: 11 - 30 accounts → yellow
Level 3: 31 - 50 accounts → light orange
Level 4: 51 - 100 accounts → darker orange
Level 5: 101 - 200 accounts → light red
Level 6: 200+ accounts → dark red

CASE 

    WHEN `account_count` <= 10 THEN 'rgba(173, 255, 47, 0.5)' 

    WHEN `account_count` BETWEEN 11 AND 30 THEN 'rgba(255, 255, 0, 0.5)'

    WHEN `account_count` BETWEEN 31 AND 50 THEN 'rgba(255, 165, 0, 0.5)'

    WHEN `account_count` BETWEEN 51 AND 100 THEN 'rgba(255, 140, 0, 0.5)'

    WHEN `account_count` BETWEEN 101 AND 200 THEN 'rgba(255, 99, 71, 0.5)'

    WHEN `account_count` > 200 THEN 'rgba(255, 0, 0, 0.5)'

    ELSE 'rgba(211, 211, 211, 0.5)' -- Default Gray 

END

CONCAT('<div style="background-color:', 
    CASE 

        WHEN `account_count` <= 10 THEN 'rgba(173, 255, 47, 0.5)' 

        WHEN `account_count` BETWEEN 11 AND 30 THEN 'rgba(255, 255, 0, 0.5)'

        WHEN `account_count` BETWEEN 31 AND 50 THEN 'rgba(255, 165, 0, 0.5)'

        WHEN `account_count` BETWEEN 51 AND 100 THEN 'rgba(255, 140, 0, 0.5)'

        WHEN `account_count` BETWEEN 101 AND 200 THEN 'rgba(255, 99, 71, 0.5)'

        WHEN `account_count` > 200 THEN 'rgba(255, 0, 0, 0.5)'

        ELSE 'rgba(211, 211, 211, 0.5)' -- Default Gray 

    END, 
    '">', `account_count`, '</div>'
)