Change an SVG color in BloX with criteria based on token - and for it to work with the carousel
Hello, my aim is to have a bar grow (change width, seems to be working fine) and change color based on if it exceeds a threshold. The issue is that the threshold will be client dependent. I have this script that works as intended for the initial display with static thresholds, but I want to replace the "parseInt('80')" and "parseInt('65')" in the script with tokens like "{panel:Threshold Good}" and "{panel:Threshold Meh}".
It also fails to display the conditional color when I cycle on the carousel.
Any assistance would be appreciated!
{
"style": ".conditional-bar-good{fill:#006100; stroke:#006100} .conditional-bar-meh{fill:#9C6500; stroke:#9C6500} .conditional-bar-bad{fill:#9C0006; stroke:#9C0006} .conditional-bar-na{fill:#000000; stroke:#000000}",
"script": "$(document).ready(function(){let barClass = document.getElementById('conditional-bar');let cbw = parseInt(barClass.getAttribute('width'));if(cbw >=parseInt('80')){barClass.className.baseVal = 'conditional-bar-good';}else if(cbw>=parseInt('65')){barClass.className.baseVal = 'conditional-bar-meh';}else{barClass.className.baseVal = 'conditional-bar-bad';};});",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"spacing": "small",
"text": "<svg width='80%' height='25'> <rect width='100%' height=100% rx='15' style='fill:#C6EFCE;stroke-width:1;stroke:#006100' /> <rect width='{panel:Threshold Good}%' height='100%' rx='15' style='fill:#FFEB9C;stroke-width:1;stroke:#9C6500' /> <rect width='{panel: Threshold Meh}%' height='100%' rx='15' style='fill:#FFC7CE;stroke-width:1;stroke:#9C0006' /> <rect id='conditional-bar' class='conditional-bar-na' y='20%' width='{panel:Value 1}%' height='60%' rx='10' style='fill-opacity: 0.7;stroke-width:3;' /></svg>"
}
]
},
{
"spacing": "none",
"type": "Container",
"items": [
{
"spacing": "none",
"type": "TextBlock",
"class": "condition_data",
"text": "{panel:Label 1}",
"horizontalAlignment": "center",
"size": "medium",
"weight": "bold"
},
{
"spacing": "none",
"type": "TextBlock",
"class": "condition_data",
"text": "{panel:Value 1}%",
"horizontalAlignment": "center",
"size": "large",
"weight": "bold"
}
]
}
],
"actions": []
}
Hi bengreene,
I got this response from one of our engineers. Can you take a look and let us know if it works for you?
"The issue is in the customer's script. They are using document.getElementById('conditional-bar').This method only returns the first found element in the DOM. Hence, their function only used once. They should use document.querySelectorAll instead, and cycle to colorize the bar."
"script": "(()=>{function customBarColoring(){var bars=document.querySelectorAll('#conditional-bar');if(!bars.length){setTimeout(customBarColoring,50);return}bars.forEach(function(b){var cbw=parseInt(b.getAttribute('width'));b.className.baseVal=cbw>=80?'conditional-bar-good':cbw>=65?'conditional-bar-meh':'conditional-bar-bad';});}customBarColoring();})();",
