Feature #55922
closedmgr/dashboard: auto-coloring label
0%
Description
What¶
The use case would be to achieve what is described here:
Current
¶
Proposed¶
How¶
New Angular component or directive that creates a Bootstrap badge with a background color that depends on the text of the badge:
<cd-label>Primary</cd-label>
<cd-label>Secondary</cd-label>
In the above example, the primary
and secondary
labels would have different background colors. The color depends on the contents (text) of the label.
There's a specific use case here: sometimes badges/labels can be used for key-value expressions. In that very case, probably we might not want to change the color with the value, and only with the key. And example of this would be labels like mon: 1
, where we want the mon
part to be colored always with the same colour even if the count is 1, 2, 3...
For that latter use case we could derive a new component from the above:
<cd-kv-label key="mon">1</cd-kv-label>
<cd-kv-label key="osd">100</cd-kv-label>
For deriving the color from the text there could be multiple approaches:
- Random color based on the hash, like colorhash library and demo.
- However the above will result in potentially any color (even those not matching our current theme), so a solution would be to provide a bucketed solution. The input to the component is the string to hash a max-colors input (e.g.: 10). Then:
hash(string) mod max-colors
. Instead of directly setting the CSS background color property, the component sets a classcd-label-color-0
,cd-label-color-1
...cd-label-color-9
, and then we can customize the colors by defining that CSS classes.
Updated by Pedro González Gómez almost 2 years ago
- Assignee set to Pedro González Gómez
Updated by Nizamudeen A over 1 year ago
- Status changed from New to Pending Backport
- Backport set to pacific, quincy
Updated by Backport Bot over 1 year ago
- Copied to Backport #57846: pacific: mgr/dashboard: auto-coloring label added
Updated by Backport Bot over 1 year ago
- Copied to Backport #57847: quincy: mgr/dashboard: auto-coloring label added
Updated by Nizamudeen A about 1 year ago
- Status changed from Pending Backport to Resolved