HTML Card for Account Product Matrix
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.
Best Answers
-
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** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0 -
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 redCASE
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
ENDCONCAT('<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>' )** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Answers
-
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** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0 -
@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?
0 -
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 redCASE
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
ENDCONCAT('<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>' )** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0
Categories
- All Categories
- 1.8K Product Ideas
- 1.8K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 300 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.9K Transform
- 100 SQL DataFlows
- 616 Datasets
- 2.2K Magic ETL
- 3.9K Visualize
- 2.5K Charting
- 738 Beast Mode
- 57 App Studio
- 40 Variables
- 685 Automate
- 176 Apps
- 452 APIs & Domo Developer
- 47 Workflows
- 10 DomoAI
- 36 Predict
- 15 Jupyter Workspaces
- 21 R & Python Tiles
- 394 Distribute
- 113 Domo Everywhere
- 275 Scheduled Reports
- 6 Software Integrations
- 124 Manage
- 121 Governance & Security
- 8 Domo Community Gallery
- 38 Product Releases
- 10 Domo University
- 5.4K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 108 Community Announcements
- 4.8K Archive