Help with dynamic RadialGauge creation

Radzen.Blazor Components
1

Hello together,

I am playing around with the Radzen Blazor Components in Visual Studio 2019 without the Radzen IDE.

Here is my code:

 <div class="col">


    @if (ProcessResults != null)
    {
        @foreach (var data in ProcessResults)
        {
    <div class="row">
        
        <RadzenRadialGauge>
            <RadzenRadialGaugeScale StartAngle="-150" 
                                    EndAngle="150" 
                                    Step="@data.Steps" 
                                    Min="0" 
                                    Max="@data.MaxValue" 
                                    TickPosition=GaugeTickPosition.Inside>
                <RadzenRadialGaugeScalePointer Value=@data.Value>
                    <Template Context="pointer">
                        <h4>
                            @data.Name: @pointer.Value
                        </h4>
                    </Template>
                </RadzenRadialGaugeScalePointer>
            </RadzenRadialGaugeScale>
        </RadzenRadialGauge>
    </div>
        }
    }
    else
    {
        <p>no actual data</p>
    }
</div>
@code {
    class ProcessResultData
    {
        public string Name { get; set; }
        public double Value { get; set; }
        public double MaxValue { get; set; }
        public int Steps { get; set; }
    }
    private List<ProcessResultData> ProcessResults { get; set; }
    = new List<ProcessResultData>();
  
    protected async override Task OnInitializedAsync()
    {
        Random r = new Random(42);
        ProcessResults = Enumerable.Range(0, 9)
                           .Select(i => new
                                        {
                                          v = r.NextDouble() * 100,
                                          i 
                                       })
            .Select(a => new ProcessResultData 
                                       { 
                                          Value = a.v, 
                                         MaxValue = a.v * 1.3, 
                                         Steps = (int)(a.v * 1.3 / 20), 
                                         Name = $"G{a.i}" 
                                       })
            .ToList();

        await base.OnInitializedAsync();
    }
}

I have now two problems, but I guess they are related:
#1 After the OnInitializedAsync call memory consumption will be increasing within seconds to more than 15 GB.
#2 only one gauge is drawn and the whole website is frozen.

Hope someone can show me my mistake :slight_smile:

Sascha

2

Hi @sbaur,

The problem seems to be that Step is at least once set to 0. This leads to an endless loop hence the abnormal behavior. We will add a check in the Gauge to prevent such cases.

3

Thank you really much!
If I filter now data with steps == 0 it works. :slight_smile: