Klant Statistieken — Techniek (Frontend)

Deze pagina beschrijft hoe Tenant Metrics aan de voorkant gebruikt en getoond worden in het Management Portal, met concrete codevoorbeelden uit de repository.

Overzicht

Service: TenantMetricsService
State: TenantMetricsState
Component: EmployeeOverTimeWidget
Repository (API client): ITenantMetricsRepository (auto-generated client, niet handmatig aanpassen)

Conform de richtlijnen wordt de API-client automatisch gegenereerd. We bouwen alleen in de AutoMate.API en gebruiken de gegenereerde client in de portal.

Datastroom (UI)

EmployeeOverTimeWidget triggert bij eerste render State.LoadMetrics().
TenantMetricsState roept TenantMetricsService.GetMetrics() aan.
TenantMetricsService haalt de metrics op voor de huidige tenant via ITenantMetricsRepository.GetMetrics(tenantId).
De component transformeert de metrics naar grafiekdata — specifiek wordt Payload["TotalUsers"] gelezen en gekoppeld aan de maand (TimeStamp).

Service

Bron: ManagementPortal.Infrastructure/Services/TenantService/TenantMetricsService.cs

public class TenantMetricsService : ITenantMetricsService
{
    private readonly ApplicationUser _applicationUser;
    private readonly ITenantMetricsRepository _metricsRepository;

    public async Task<List<TenantMetric>?> GetMetrics()
    {
        var currentTenant = _applicationUser.TenantId;
        var response = await _metricsRepository.GetMetrics(tenantId: currentTenant.ToString());
        return response.IsSuccessStatusCode ? response.Content.Metrics : null;
    }
}

Haalt de tenant-id uit ApplicationUser en vraagt de metrics via de API-client op.

State

Bron: ManagementPortal.Website/States/TenantMetrics/TenantMetricsState.cs

public class TenantMetricsState(ITenantMetricsService tenantMetricsService)
{
    private List<TenantMetric> TenantMetrics { get; set; } = new();
    public IReadOnlyList<TenantMetric> Metrics => TenantMetrics.AsReadOnly();

    public async Task LoadMetrics()
    {
        var result = await tenantMetricsService.GetMetrics();
        TenantMetrics = result;
    }
}

Houdt de metrics in geheugen en biedt een read-only view voor componenten.

Bron: ManagementPortal.Website/Components/.../EmployeeOverTimeWidget.razor.cs

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    await State.LoadMetrics();
    Data = State.Metrics
      .Select(metric => {
        if (metric.Payload is not null)
        {
          var ok = metric.Payload.TryGetValue("TotalUsers", out var value);
          var intUsers = int.TryParse(value?.ToString(), out var t) ? t : 0;
          if (intUsers != 0)
            return new EmployeeOverTimeItem(metric.TimeStamp.ToString("MMMM yyyy", new CultureInfo("nl-NL")), intUsers);
        }
        return null;
      })
      .ToList();
    // min/max/step berekenen en renderen
  }
}

Parse van TotalUsers is defensief (fallback naar 0) en maandnaam wordt in nl-NL geformatteerd.

Voorbeeld: van payload naar grafiekpunt

Uitgaande van een metric record:

{
  "timeStamp": "2025-05-01T00:00:00Z",
  "payload": { "TotalUsers": 128 }
}

Wordt dit getoond als:

Categorie: "mei 2025" (met hoofdletter start in de widget-code)
Waarde: 128 gebruikers

Contract- en UI-verwachtingen

Vereist: Payload bevat key "TotalUsers" met een geheel getal (string of number, wordt geparset).
Weergave: maandnaam wordt opgemaakt als MMMM yyyy in cultuur nl-NL.
Extra KPI’s kunnen in dezelfde payload worden meegeleverd en door nieuwe widgets worden gelezen.

Uitbreiden (voorbeelden)

Nieuwe widget die ActiveUsers toont:

metric.Payload.TryGetValue("ActiveUsers", out var v);
var active = int.TryParse(v?.ToString(), out var a) ? a : 0;

Filtering op recente maanden: filter State.Metrics vóór mapping op metric.TimeStamp.

Fouten en loading

De component houdt _isLoading bij en berekent assen (min/max/step) op basis van de data.
Service retourneert null bij mislukte responses; zorg in de UI voor null-checks en eventueel een melding.
Overweeg telemetry bij parsefouten om datakwaliteit te bewaken.

Last modified: 23 March 2026

AutoMate Technisch Help