I'm trying to make the dashboard in Blazor WebAssmebly with Syncfusion charts. However, when I'm trying to display them I'm getting the following error:
Error: <text> attribute x: Expected length, "NaN".
I was thinking that maybe there is problem in the browser, but I tried to use Chrome and Edge browser and in both I'm getting the same error.
Statistics.razor:
<CascadingAuthenticationState>
<AuthorizeView >
<NotAuthorized>
<body>
<header class="bgimg-1" id="home">
<div class="w3-display-left w3-text-white" style="padding-left: 5%">
<div class="container" style="background: none">
<span class="w3-jumbo w3-hide-small">Log in to see the content</span><br>
<span class="w3-xxlarge w3-hide-large w3-hide-medium">Log in to see the content</span><br>
</div>
</div>
</header>
</body>
</NotAuthorized>
<Authorized>
@if (_statisticsToDisplay.Count == 0)
{
<div class="spinner"></div>
}
else
{
<div class="container2">
<div class="row">
<div class="col-sm" style="margin-left: 10%; margin-top: 5%; align-content: center;">
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<table class='table' style=" color: black">
<thead>
<tr>
<th class="url" style="width: 35%">Worker</th>
<th class="isActive" style="width: 15%">Is Active</th>
<th class="status" style="width: 15%">Status</th>
<th class="duration" style="width: 15%">Duration (minutes)</th>
</tr>
</thead>
<tbody>
@foreach (var workerStatistic in _statisticsToDisplay)
{
<tr>
<td>@workerStatistic.URL</td>
<td>@workerStatistic.isActive</td>
<td>@workerStatistic.status</td>
<td>@workerStatistic.duration</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-sm" style="margin-right: 10%; margin-top: 5%; align-content: center;">
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<SfChart Title="Analysis Of Failed Runs" Width="100%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
LabelIntersectAction="LabelIntersectAction.Rotate90"
EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
<ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
<ChartMultiLevelLabels>
<ChartMultiLevelLabel>
<ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
<ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
</ChartAxisMultiLevelLabelBorder>
<ChartCategories>
<ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
</ChartCategories>
</ChartMultiLevelLabel>
</ChartMultiLevelLabels>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Number Of Failed Runs" Minimum="0" Maximum="100" Interval="10">
<ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@_statisticsToDisplay" XName="URL" YName="numberOfFailedRuns" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
<div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
<SfChart Title="Analysis Of The Duration Time Of The Workers" Width="100%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
LabelIntersectAction="LabelIntersectAction.Rotate90"
EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
<ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
<ChartMultiLevelLabels>
<ChartMultiLevelLabel>
<ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
<ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
</ChartAxisMultiLevelLabelBorder>
<ChartCategories>
<ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
</ChartCategories>
</ChartMultiLevelLabel>
</ChartMultiLevelLabels>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Average Duration (in minutes)" Minimum="0" Maximum="200" Interval="20">
<ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
<ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
</ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@_statisticsToDisplay" XName="URL" YName="duration" Type="ChartSeriesType.Line">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
</div>
</div>
</div>
}
</Authorized>
</AuthorizeView>
</CascadingAuthenticationState>
@code{
public class ModelTest
{
public int ID { get; set; }
public string URL { get; set; }
public double duration { get; set; }
public bool isActive { get; set; }
public int numberOfFailedRuns { get; set; }
public string status { get; set; }
}
private List<Models.WorkerConfiguration> WorkerConfigList = new();
private List<Models.WorkerStatistic> WorkerStatisticsList = new();
private List<ModelTest> _statisticsToDisplay = new();
protected override async Task OnInitializedAsync()
{
WorkerStatisticsList = await WorkerStatistics.ReadAllWorkerStatistics();
WorkerConfigList = await WorkerConfigService.ReadAllWorkerConfigurations();
_statisticsToDisplay = ReadWorkerStatistics();
}
List<ModelTest> ReadWorkerStatistics()
{
List<ModelTest> statistics = new List<ModelTest>();
foreach (var workerStatistic in WorkerStatisticsList)
{
Models.WorkerConfiguration workerConfiguration = WorkerConfigService.GetWorkerConfigurationById(workerStatistic.FkWorkerConfigurationId);
int countNumberOfFailedRuns = 0;
DateTime? start = workerStatistic.StartTime;
DateTime? end = workerStatistic.EndTime;
TimeSpan? calculateDuration = end -start;
if (workerStatistic.Status == "Failed")
{
countNumberOfFailedRuns++;
}
statistics.Add(new ModelTest(){URL = workerConfiguration.Url, duration = calculateDuration.Value.TotalMinutes , isActive = workerConfiguration.IsActive, numberOfFailedRuns = countNumberOfFailedRuns, status = workerStatistic.Status});
}
return statistics;
}
}
My current page looks like that: https://i.stack.imgur.com/TPH56.jpg
Can you give me any suggestions what am I doing wrong?
