RadialBarIndicator Styling Issue

nativescriptcore

#1

Another issue where styling doesn’t follow suite. This time regarding RadialGauge used as workflow status item for a list of participants:

<gauge:RadialScale startAngle="0" sweepAngle="220" minimum="0" maximum="{{visitsAuthorized}}" radius="0.9">
                                    <gauge:RadialScale.scaleStyle>
                                        <gauge:ScaleStyle ticksVisible="false" labelsVisible="false" lineThickness="0" />
                                    </gauge:RadialScale.scaleStyle>

                                    <gauge:RadialScale.indicators>
                                        <gauge:RadialBarIndicator minimum="0" maximum="{{visitsAuthorized}}" location="0.5">
                                            <gauge:RadialBarIndicator.indicatorStyle>
                                                <gauge:BarIndicatorStyle fillColor="{{visitGauge ? '#000000' : '#3d3d3d' }}" opacity="0.5" barWidth="0.2"/>
                                            </gauge:RadialBarIndicator.indicatorStyle>
                                        </gauge:RadialBarIndicator>

                                        <gauge:RadialBarIndicator minimum="0" maximum="{{visitsRemaining}}" location="0.5" isAnimated="true">
                                            <gauge:RadialBarIndicator.indicatorStyle>
                                                <gauge:BarIndicatorStyle cap="Round" fillColor="{{visitGauge}}" opacity="1" barWidth="0.2"/>
                                            </gauge:RadialBarIndicator.indicatorStyle>
                                        </gauge:RadialBarIndicator>

                                    </gauge:RadialScale.indicators>

                                </gauge:RadialScale>

data.forEach(function(entry){
console.log("data entry: "+JSON.stringify(entry) );

        viewModel.push({
         
            id: entry.mongodb_id,
            hold: entry.hold,
            firstName: entry.name.first,
            lastName: entry.name.last,
            service: entry.service,
            visitsRemaining: entry.visitsRemaining,
            visitsAuthorized: entry.visitsAuthorized,
            visitGauge: getFillColor(entry)',

function getFillColor(entry){
var vsitGauge = ‘#edddd3’;//“154,205,50,0.5”;

        if(entry.visitsRemaining && entry.visitsAuthorized){
            var val = (entry.visitsRemaining/entry.visitsAuthorized)*100;

            if(val < 50){
                vsitGauge = '#d3d3d3';//"224,151,36,0.5";
            }
            if(val <= 20 ){
                vsitGauge = '#000000';//"178,34,34,0.5";
            }
        }
        return vsitGauge;
    }

I left the different attempts shown that didn’t work such as checking property before the viewModel is even loaded into the listView.

However static fillColor works:

gauge:RadialBarIndicator.indicatorStyle
<gauge:BarIndicatorStyle cap=“Round” fillColor="#000000" opacity=“1” barWidth=“0.2”/>
</gauge:RadialBarIndicator.indicatorStyle>

Thanks for any help!