Is there a way to make only the arc in simple gauge blink 0.5 sec when the value goes above a certain threshold.
I tried using animation using style classes, but it can only be applied to the whole component, not just the arc.
You have to target this group here:
I’m very bewildered by why there are so many groups in that arc SVG…..
This targets it, but it’s extremely brittle if that SVG in the component is ever fixed changed. There’s not really much else you can use to target it specifically though, apart from the fill colour and fill-opacity perhaps?
@keyframes arcPulse {
0% { fill-opacity: 1; }
50% { fill-opacity: 0.2; }
100% { fill-opacity: 1; }
}
.psc-test[data-component="ia.chart.simple-gauge"] svg g g g g g g g g g g g g g g:nth-child(3) {
animation: arcPulse 0.5s ease-in-out 2;
/* fill: red;*/
}
you could use this if you wanted to target the specific colour and opacity
@keyframes arcPulse {
0% { fill-opacity: 1; }
50% { fill-opacity: 0.2; }
100% { fill-opacity: 1; }
}
.psc-test[data-component="ia.chart.simple-gauge"] svg g[fill="#77b6d8"][fill-opacity="1"] {
animation: arcPulse 0.5s ease-in-out 2;
/* fill: red;*/
}
1 Like
I agree. I have never really understood all of the nested groups.
I would make my own gauge SVG, something similar to this:
Though I have done some really fancy things too like this:
1 Like
On a related note, the moving analogue indicator is far simpler in terms of the SVG
but it suffers from lots of issues as well 