Hello, Trying to write a arcade code in combination with html for the advanced formatting of the List in dashboard.
What would like to set up is that the colour of the icon is changed based on the attributes for the list. I wrote the code as per below, and the returns for strings works as expected but nothing is returned for the icon - it just returns blank space next to the returned strings.
Thanks in advance for any advice and much appreciated if anyone gives me any solution for this!
Arcade:
var symbol_color = Decode(
$datapoint.buildtype,
"house","#0071fe",
"shed", "#ffff01",
"rural","#fe0000"
);
var symbol_size = 10;
var svg = `<svg height="${symbol_size}" width="${symbol_size}"><circle cx="${symbol_size / 2}" cy="${symbol_size / 2}" r="${
symbol_size * 0.4
}" stroke="black" stroke-width="1" style=fill:"${symbol_color}" />
</svg>`;
var buildType = $datapoint.buildtype;
var clr = "";
var txt = "";
if (buildType == "house") {
clr = "#0071fe";
txt = "House";
} else if (buildType == "shed") {
clr = "#ffff01";
txt = "Shed";
} else if (buildType == "rural") {
clr = "#fe0000";
txt = "Rural";
}
return {
attributes: {
svg: svg,
color: clr,
txt: txt,
},
};
Html:
<div style="display:flex">
<div style="flex:0 4 20%">{expression/svg}</div>
<div style="flex:0 1 80%">
<p>Build Type: <span style="color:{expression/color}"><strong>{expression/txt}</strong></span></p>
</div>
</div>