Counter.razor

@page "/counter"
@inject IJSRuntime js
<div @ref="container" class="counter-container">
    <h1>Counter</h1>

    <p>Current count: @currentCount</p>

    <div class="form-group">
        <button id="counterClick" class="btn btn-primary counterClickC" @onclick="IncrementCount">Click me</button>
    </div>

    <div class="form-group">
        <label>Date Start</label>
        <input type="text" class="form-control datetimepicker-input" id="dateStart" data-toggle="datetimepicker" data-target="#dateStart" />
    </div>
    <div class="form-group">
        <label>Date End</label>
        <input type="text" class="form-control datetimepicker-input" id="dateEnd" data-toggle="datetimepicker" data-target="#dateEnd" />
    </div>

    <div style="width: 500px;">
        <h5>Gráfico Importante</h5>
        <canvas id="myChart"></canvas>
    </div>
</div>

@code {
    private int currentCount = 0;

    private ElementReference container;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("initializeCounterComponent", container);
        }
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}