Линейная линейная линия Blazor ApexCharts не перерисована, когда новые данные доступны ⇐ Html

[Anonymous]

Я пытаюсь показать дату на вершине для каждой шифки. Когда я выбираю день, данные загружаются и не показывают проблем. Но если я выберу новый день после того, как у меня есть еще один день, выберет нагрузки данных правильно, но не изменяет график. Таким образом, он по-прежнему показывает предыдущий день. < /P>
И независимо от того, что я делаю, он не будет редерендером или обновлением.private List? DagRapportPloegen;
private List? GraphVroege;
private List? GraphLate;
private List? GraphNacht;

private long _selectedMachineId; // Initialize to 0 for "All Machines" or a default
private long SelectedMachineId
{
get => _selectedMachineId;
set
{
if (_selectedMachineId != value)
{
_selectedMachineId = value;
// Only load data if the component is already initialized and the change is not part of the initial setup
if (_isInitialized)
{
_ = LoadDataAsync(true); // Indicate that this load is due to a filter change
}
}
}
}

private DateTime? _dag = DateTime.Today;
private DateTime? Dag
{
get => _dag;
set
{
if (_dag != value)
{
_dag = value;
// Initialize chart options for each chart
InitializeChartOptions();
_ = LoadDataAsync(true);
}
}
}

private ApexChartOptions chartOptionsVroege;
private ApexChartOptions chartOptionsLate;
private ApexChartOptions chartOptionsNacht;

private void InitializeChartOptions()
{
// Get the selected date for dynamic axis range
DateTime selectedDate = _dag?.Date ?? DateTime.Today.Date;

// Y-axis range (adjust these based on your expected 'Cap_Act' values)
double yAxisMin = 0;
double yAxisMax = 600; // Example: assuming capacity goes up to 600 units/hour
int yAxisTickAmount = 3; // Number of ticks on the Y-axis

// Common Y-Axis Configuration (for all charts)
var commonYAxis = new List
{
new YAxis
{
Min = yAxisMin,
Max = yAxisMax,
TickAmount = yAxisTickAmount,
Labels = new YAxisLabels
{
Formatter = @"function (value) { return value.toFixed(0) + ' st/u' }" // Format as "X st/u"
}
}
};

// Vroege Ploeg (5:30 - 14:30)
var vroegeMin = new DateTimeOffset(selectedDate.AddHours(5).AddMinutes(30)).ToUnixTimeMilliseconds();
var vroegeMax = new DateTimeOffset(selectedDate.AddHours(14).AddMinutes(30)).ToUnixTimeMilliseconds();

chartOptionsVroege = new()
{
Chart = new Chart
{
Animations = new Animations { Enabled = false },
Zoom = new Zoom { Enabled = false }
},
Xaxis = new XAxis
{
Type = XAxisType.Datetime,
Min = vroegeMin,
Max = vroegeMax,
TickAmount = (int)((vroegeMax - vroegeMin) / (1000 * 60 * 60)), // Tick per hour within the range
Labels = new XAxisLabels
{
Format = "HH:mm"
},
Tooltip = new XAxisTooltip
{
Enabled = false
}
},
Yaxis = commonYAxis
};

// Late Ploeg (13:30 - 22:30)
var lateMin = new DateTimeOffset(selectedDate.AddHours(13).AddMinutes(30)).ToUnixTimeMilliseconds();
var lateMax = new DateTimeOffset(selectedDate.AddHours(22).AddMinutes(30)).ToUnixTimeMilliseconds();

chartOptionsLate = new()
{
Chart = new Chart
{
Animations = new Animations { Enabled = false },
Zoom = new Zoom { Enabled = false }
},
Xaxis = new XAxis
{
Type = XAxisType.Datetime,
Min = lateMin,
Max = lateMax,
TickAmount = (int)((lateMax - lateMin) / (1000 * 60 * 60)), // Tick per hour within the range
Labels = new XAxisLabels
{
Format = "HH:mm"
},
Tooltip = new XAxisTooltip
{
Enabled = false
}
},
Yaxis = commonYAxis
};

// Nacht Ploeg (21:30 - 6:30 of next day)
// This requires careful handling as it crosses midnight.
// The start time is on the selected date, and the end time is on the *next* date.
var nachtMin = new DateTimeOffset(selectedDate.AddHours(21).AddMinutes(30)).ToUnixTimeMilliseconds();
var nachtMax = new DateTimeOffset(selectedDate.AddDays(1).AddHours(6).AddMinutes(30)).ToUnixTimeMilliseconds();

chartOptionsNacht = new()
{
Chart = new Chart
{
Animations = new Animations { Enabled = false },
Zoom = new Zoom { Enabled = false }
},
Xaxis = new XAxis
{
Type = XAxisType.Datetime,
Min = nachtMin,
Max = nachtMax,
TickAmount = (int)((nachtMax - nachtMin) / (1000 * 60 * 60)), // Tick per hour within the range
Labels = new XAxisLabels
{
Format = "HH:mm"
},
Tooltip = new XAxisTooltip
{
Enabled = false
}
},
Yaxis = commonYAxis
};
}

// Flag to ensure LoadDataAsync is not called by property setters during initial load
private bool _isInitialized = false;

protected override async Task OnInitializedAsync()
{
PageTitleService.SetTitle("Zakkenmachine's • Dagrapport");

// Load machines first
machines = await Http.GetFromJsonAsync("DagRapport/Machine");

// Set the default selected machine ID if machines are available
if (machines != null && machines.Any())
{
_selectedMachineId = machines.FirstOrDefault()?.Id ?? 10; // Directly set the backing field
}

// Initialize chart options for the initial load
InitializeChartOptions();

// Now that initial setup is done, mark the component as initialized
_isInitialized = true;

// Finally, load the main data once
await LoadDataAsync(false);
}

private async Task LoadDataAsync(bool isFilterChange = false) // Added parameter to differentiate between initial load and filter change
{

// This check is now less critical for preventing double-initial calls, but still good for general logic flow
if (!_isInitialized && isFilterChange)
{
// If it's a filter change but the component isn't fully initialized,
// it means a filter was changed before initial data was loaded.
// This might happen if properties are set before OnInitializedAsync completes.
// In most cases, this `if` block can be removed as the _isInitialized flag prevents the issue more directly.
return;
}

if (Dag == null) // Check for null date, not Day == 0 as Day can't be 0 for a valid DateTime
{
if (isFilterChange)
{
Snackbar.Add("Selecteer alstublieft een datum.", Severity.Warning);
}
DagRapportPloegen = new List();
GraphVroege = new List();
GraphLate = new List();
GraphNacht = new List();
StateHasChanged();
return;
}

var requestObj = new DateAndLongDto
{
MachineId = SelectedMachineId,
ProductionDate = Dag
};
var requestObjVroege = new DateAndLongDto
{
MachineId = SelectedMachineId,
ProductionDate = Dag,
PloegId = 1
};
var requestObjLate = new DateAndLongDto
{
MachineId = SelectedMachineId,
ProductionDate = Dag,
PloegId = 2
};
var requestObjNacht = new DateAndLongDto
{
MachineId = SelectedMachineId,
ProductionDate = Dag,
PloegId = 3
};

try
{
var response = await Http.PostAsJsonAsync("DagRapport/DagRapportPloegen", requestObj);
var responseVroege = await Http.PostAsJsonAsync("DagRapport/Graphs", requestObjVroege);
var responseLate = await Http.PostAsJsonAsync("DagRapport/Graphs", requestObjLate);
var responseNacht = await Http.PostAsJsonAsync("DagRapport/Graphs", requestObjNacht);

response.EnsureSuccessStatusCode();
responseVroege.EnsureSuccessStatusCode();
responseLate.EnsureSuccessStatusCode();
responseNacht.EnsureSuccessStatusCode();

DagRapportPloegen = await response.Content.ReadFromJsonAsync();
GraphVroege = await responseVroege.Content.ReadFromJsonAsync();
GraphLate = await responseLate.Content.ReadFromJsonAsync();
GraphNacht = await responseNacht.Content.ReadFromJsonAsync();

if (isFilterChange && (DagRapportPloegen == null || DagRapportPloegen.Count == 0))
{
Snackbar.Add("Geen records gevonden voor de geselecteerde filter.", Severity.Info);
}
}
catch (HttpRequestException httpEx)
{
Console.Error.WriteLine($"HTTP Fout bij het laden van gegevens: {httpEx.Message}");
Snackbar.Add($"Fout bij het ophalen van gegevens: {httpEx.Message}", Severity.Error);
}
catch (Exception ex)
{
Console.Error.WriteLine($"Er is een onverwachte fout opgetreden: {ex.Message}");
Snackbar.Add($"Er is een onverwachte fout opgetreden: {ex.Message}", Severity.Error);
}

StateHasChanged(); // Refresh UI
}
< /code>
Просмотр < /p>

Vroege Ploeg
@if (GraphVroege != null && GraphVroege.Any())
{



}
else
{
Geen gegevens beschikbaar voor Vroege Ploeg.
}


Late
@if (GraphLate != null && GraphLate.Any())
{



}
else
{
Geen gegevens beschikbaar voor Late Ploeg.
}


Nacht
@if (GraphNacht != null && GraphNacht.Any())
{



}
else
{
Geen gegevens beschikbaar voor Nacht Ploeg.
}



Подробнее здесь: https://stackoverflow.com/questions/796 ... -available