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": []
}
Ben Greene
Posted 11 months ago·Last reply 10 months ago
5 comments
DRay
·10 months agoHi bengreene ,
I’m following up to see if the solution I offered workedharikm007 for you.
If so, please click the 'Accept as Solution' button on my post. That way others with the same questions can find the answer. If not, please let us know so that we can continue to help.
Thank you.
DRay
·11 months agoHi 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."
Ben Greene
OP11 months agoI have resolved my first issue - by moving the script inside the item text, it will load my dynamic thresholds. This doesn't seem to be enough to make the carousel work with the conditional logic - those all default to the base color.