Colored labels in table

I'm having an issue with the widget script to color the labels in a table created by harikm007 in a previous post.

https://community.sisense.com/t5/build-analytics/colored-labels-in-table-widget/m-p/10780

I have successfully been able to implement the script. However, the color flashes quickly when I load the dashboard then disappears.

Any reason why or if I have to change the script?

HQ_Dev_Prod

Posted 1 year ago·Last reply 11 months ago

10 comments

HQ_Dev_Prod

OP1 year ago

Hi DRay and TriAnthony

Yes! That delay worked perfectly. Thank y

widget.on('domready', function(se, ev){

	let columnsIndex = [2, 4]

	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',

ou!!

Is there a way to continue adding columns to the list so it is applied to multiple columns?

Tri Anthony

·1 year ago

Hi HQ_Dev_Prod,

Yes, you can use this script instead to apply the styles to multiple columns. I also noticed that script works as intended without the observer, so I removed that part of the script. Let me know if you run into any issues.

-Tri

widget.on('domready', function(se, ev){

	let columnsIndex = [1,2,3,4]

	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',
		'High Risk':'background-color:#FF6347; color:white; padding: 2px 8px; border-radius:15px',
		'Med Risk': 'background-color:#FFD166; color:white; padding: 2px 8px; border-radius:15px',
		'Low Risk': 'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
		'Very Low Risk': 'background-color:#2E8B57; color:white; padding: 2px 8px; border-radius:15px',
		'No risk score': 'background-color:#D3D3D3; color:white; padding: 2px 8px; border-radius:15px'
	}
	
	const elementToObserve = $('table tbody', element)[0];

	// Apply styles after a slight delay to ensure the table is fully rendered
	setTimeout(function() {
		for(i=0; i<columnsIndex.length; i++) {
			$(elementToObserve).find(`tr td:nth-child(${columnsIndex[i]})`).each(function(index, value){
				var label = $(this).text()

				if(label in itemStyleMapping)
				{
					$(this).text('')
					$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
				}						
			})
		}
	}, 10);  // Adjust the timeout as needed (100ms delay)
	
})

HQ_Dev_Prod

OP1 year ago

This worked! Thank you

DRay

·1 year ago

Hi HQ_Dev_Prod,

I’m following up to see if the solution offered by TriAnthony worked for you.

If so, please click the 'Accept as Solution' button on the appropriate post. That way other users with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

DRay

·1 year ago

Hi HQ_Dev_Prod,

Thank you for reaching out. Can you share your widget script? We can take a look at it and provide feedback.

Thank you.

HQ_Dev_Prod

OP1 year ago

Hi DRay

Here is the widget script. I'm assuming I can add all columns in columnsIndex where I want the coloring to show.

widget.on('domready', function(se, ev){
	
	let columnsIndex = 2
	
	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',
		'High Risk':'background-color:#FF6347; color:white; padding: 2px 8px; border-radius:15px',
		'Med Risk': 'background-color:#FFD166; color:white; padding: 2px 8px; border-radius:15px',
		'Low Risk': 'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
		'Very Low Risk': 'background-color:#2E8B57; color:white; padding: 2px 8px; border-radius:15px',
		'No risk score': 'background-color:#D3D3D3; color:white; padding: 2px 8px; border-radius:15px'
	}
	const elementToObserve = $('table tbody', element)[0];
	
	$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){
		var label = $(this).text()
		
		if(label in itemStyleMapping)
		{
			$(this).text('')
			$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
		}
						
	})
	
	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$.each(m.addedNodes, function(index, value){

					elementObj = $(value).find('td:nth-child(3)')
					var label = elementObj.text()

					if(label in itemStyleMapping)
					{
						elementObj.text('')
						elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
					}
				})
			}
		}
	})
										  
	observer.observe(elementToObserve, {subtree: true, childList: true});

})

Tri Anthony

·1 year ago

Hi HQ_Dev_Prod,

Please try the updated script below.

The issue likely occurs because the table is not fully rendered when the styles are applied, and the changes were overwritten by other processes or rendering updates shortly after. I’ve added a slight delay (10ms in this case) before the styles are applied. This ensures the table is fully rendered and all elements are available in the DOM.

-Tri

widget.on('domready', function(se, ev){

	let columnsIndex = 2

	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',
		'High Risk':'background-color:#FF6347; color:white; padding: 2px 8px; border-radius:15px',
		'Med Risk': 'background-color:#FFD166; color:white; padding: 2px 8px; border-radius:15px',
		'Low Risk': 'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
		'Very Low Risk': 'background-color:#2E8B57; color:white; padding: 2px 8px; border-radius:15px',
		'No risk score': 'background-color:#D3D3D3; color:white; padding: 2px 8px; border-radius:15px'
	}
	const elementToObserve = $('table tbody', element)[0];

	// Apply styles after a slight delay to ensure the table is fully rendered
	setTimeout(function() {
		$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){
			var label = $(this).text()

			if(label in itemStyleMapping)
			{
				$(this).text('')
				$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
			}						
		})
	}, 10);  // Adjust the timeout as needed

	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$.each(m.addedNodes, function(index, value){

					elementObj = $(value).find('td:nth-child(3)')
					var label = elementObj.text()

					if(label in itemStyleMapping)
					{
						elementObj.text('')
						elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
					}
				})
			}
		}
	})

	observer.observe(elementToObserve, {subtree: true, childList: true});
})