UI styling. and streamline.
This commit is contained in:
douwe
703
Pages/Home.razor
703
Pages/Home.razor
@@ -1,79 +1,543 @@
|
||||
@page "/"
|
||||
@page "/"
|
||||
@using Radzen
|
||||
@using Radzen.Blazor
|
||||
@using BattSim.Models
|
||||
@using BattSim.Services
|
||||
|
||||
<PageTitle>Energie Simulator</PageTitle>
|
||||
<PageTitle>Thuisbatterij Simulator</PageTitle>
|
||||
|
||||
<h1>Energie Simulator</h1>
|
||||
<h1 style="color: white">Thuisbatterij Simulator</h1>
|
||||
|
||||
<h2>Je Fluvius Energie Data</h2>
|
||||
<div>
|
||||
<p>Ga naar de website van Fluvius en download je historische elektriciteitsverbruiksgegevens met kwartier nauwkeurigheid. Voor een optimale simulatie is het raadzaam om een volledig jaar te downloaden. Dit geeft je inzicht in seizoensgebonden patronen en helpt om realistische uitkomsten te genereren.</p>
|
||||
<InputFile OnChange="OnFileUploaded" accept=".csv"/>
|
||||
@if (_isLoadingFile) { <p>Data aan het inladen...</p> }
|
||||
else
|
||||
{
|
||||
@if (FluviusDataRaw.Length != 0)
|
||||
{
|
||||
<p>@(FluviusDataRaw.Length) kwartieren ingeladen.</p>
|
||||
}
|
||||
<div class="pipeline-container">
|
||||
<!-- Pipeline with 3 connected boxes -->
|
||||
<div class="pipeline-row">
|
||||
<div class="pipeline-connector"></div>
|
||||
|
||||
<!-- Box 1: Data Upload -->
|
||||
<div class="pipeline-box @GetPipelineStepClasses(0)">
|
||||
<div class="box-header" @onclick="() => ToggleBox(0)">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-title">Fluvius Data</div>
|
||||
<div class="status-indicator"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-inner">
|
||||
<p class="box-description">Upload je Fluvius kwartierdata om te beginnen</p>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="file-input-wrapper">
|
||||
<InputFile type="file" id="fileUpload" accept=".csv" onchange="async (e) => await OnFileUploaded(e)" />
|
||||
<label for="fileUpload" class="file-input-label">
|
||||
@if (StepData[0].isProcessing)
|
||||
{
|
||||
<div class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<span style="margin-left: 10px;">Data aan het inladen...</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
@if (FluviusDataRaw.Length == 0)
|
||||
{
|
||||
<text>Kies CSV bestand</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>OK @FluviusDataRaw.Length kwartieren geladen</text>
|
||||
}
|
||||
}
|
||||
</label>
|
||||
@if (FluviusDataRaw.Length > 0 && !StepData[0].isProcessing)
|
||||
{
|
||||
<p class="file-name">@_uploadedFileName</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (StepData[0].Completed)
|
||||
{
|
||||
<div class="success-message">
|
||||
Data succesvol ingeladen en verwerkt!
|
||||
</div>
|
||||
}
|
||||
@if (_uploadError != null)
|
||||
{
|
||||
<div class="error-message">
|
||||
@_uploadError
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-text">
|
||||
<p><strong>Tip:</strong> Download een volledig jaar aan kwartierdata voor de meest accurate resultaten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box 2: Battery Simulation -->
|
||||
<div class="pipeline-box @GetPipelineStepClasses(1)">
|
||||
<div class="box-header" @onclick="() => ToggleBox(1)">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-title">Batterij Simulatie</div>
|
||||
<div class="status-indicator"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-inner">
|
||||
<p class="box-description">Test verschillende batterijconfiguraties</p>
|
||||
|
||||
@if (FluviusDataRaw.Length == 0)
|
||||
{
|
||||
<div class="info-text">
|
||||
<p>Upload eerst je Fluvius data (stap 1) om deze stap te kunnen uitvoeren.</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="form-section">
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Batterijcapaciteit (kWh):</label>
|
||||
<InputNumber @bind-value="BatteryCapacity" T="double" min="0.1" max="100" step="0.1"/>
|
||||
</div>
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Round-trip Efficiëntie (%):</label>
|
||||
<InputNumber @bind-value="Efficiency" T="double" min="0" max="100" step="1"/>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 0.85rem; color: var(--text-clr); margin-top: 1rem;">
|
||||
Efficiëntie is het percentage van opgeslagen energie dat terug kan worden gebruikt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center; margin-top: 1.5rem;">
|
||||
<button @onclick="SimulateBattery" @onclick:stopPropagation disabled="@(StepData[1].isProcessing || FluviusDataRaw.Length == 0)">
|
||||
@if (StepData[1].isProcessing)
|
||||
{
|
||||
<text>Simuleren...</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>Simuleer Batterij</text>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (StepData[1].Completed)
|
||||
{
|
||||
<div class="success-message">
|
||||
Simulatie voltooid! @SimulationData.Length kwartieren gesimuleerd.
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box 3: Cost Calculation -->
|
||||
<div class="pipeline-box @GetPipelineStepClasses(2)">
|
||||
<div class="box-header" @onclick="() => ToggleBox(2)">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-title">Kosten Berekenen</div>
|
||||
<div class="status-indicator"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-inner">
|
||||
<p class="box-description">Vergelijk kosten met en zonder batterij</p>
|
||||
|
||||
<!-- Vaste Kosten -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Vaste Kosten
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Vaste vergoeding (€/jaar):</label>
|
||||
<InputNumber @bind-value="calculator.BasePayment" T="double" min="0" step="1"/>
|
||||
</div>
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Databeheer tarief (€/jaar):</label>
|
||||
<InputNumber @bind-value="calculator.DataManagementCost" T="double" min="0" step="0.01"/>
|
||||
</div>
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Vlaamse energieheffing (€/jaar):</label>
|
||||
<InputNumber @bind-value="calculator.FlemishEnergyTariff" T="double" min="0" step="0.01"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Energiekosten -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Energiekosten
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Energiekost (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.EnergyCost" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Terugleveringsvergoeding (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.ReturnCost" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Heffingen Groene Stroom -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Heffingen Groene Stroom
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Groene stroomcertificaten (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.GreenCertificateCost" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Warmtekracht certificaten (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.HeatingCertificateCost" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Net- en distributiekosten -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Net- en distributiekosten
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Capaciteitstarief (€/kWh/jaar):</label>
|
||||
<InputNumber @bind-value="calculator.CapacityCost" T="double" min="0" step="0.01"/>
|
||||
</div>
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Afnametarief (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.UsageTariff" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Heffingen en Toeslagen -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Heffingen en Toeslagen
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Energiebijdrage (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.EnergyContribution" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
<div class="input-group" style=" flex: 1;">
|
||||
<label>Bijzondere accijns (c€/kWh):</label>
|
||||
<InputNumber @bind-value="calculator.SpecialTariffs" T="double" min="0" step="0.0001"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center; margin-top: 1.5rem;">
|
||||
<button @onclick="Calculate" @onclick:stopPropagation disabled="@(StepData[2].isProcessing || SimulationData.Length == 0)">
|
||||
@if (StepData[2].isProcessing)
|
||||
{
|
||||
<text>Berekenen...</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>Bereken Kosten</text>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (StepData[2].Completed)
|
||||
{
|
||||
<div class="results">
|
||||
<p><strong>Originele kosten:</strong> <span class="result-value">€@normalCost.ToString("0.00")</span></p>
|
||||
<p><strong>Gesimuleerde kosten:</strong> <span class="result-value">€@simulatedCost.ToString("0.00")</span></p>
|
||||
<p><strong>Besparing:</strong> <span class="result-value">€@((normalCost - simulatedCost).ToString("0.00"))</span></p>
|
||||
@if (normalCost > 0)
|
||||
{
|
||||
<p><strong>Besparingspercent:</strong> <span class="result-value">@(((normalCost - simulatedCost) / normalCost * 100).ToString("0.00"))%</span></p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (FluviusDataDaily.Length != 0)
|
||||
{
|
||||
<RadzenChart>
|
||||
<RadzenAreaSeries Smooth=true Data="@FluviusDataDaily" CategoryProperty="Time" Title="Consumption" ValueProperty="Consumption">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@FluviusDataDaily" CategoryProperty="Time" Title="Production" ValueProperty="Production">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenCategoryAxis Formatter="@FormatObject" Padding="20" LabelAutoRotation="-45">
|
||||
<RadzenGridLines Visible="true"/>
|
||||
<RadzenAxisTitle Text="Time"/>
|
||||
</RadzenCategoryAxis>
|
||||
<RadzenValueAxis Formatter="@FormatObject">
|
||||
<RadzenGridLines Visible="true"/>
|
||||
<RadzenAxisTitle Text="Energy"/>
|
||||
</RadzenValueAxis>
|
||||
</RadzenChart>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@code{
|
||||
|
||||
<!-- Chart - Directly on page, full width -->
|
||||
@if (FluviusDataDaily.Length > 0)
|
||||
{
|
||||
<div class="chart-container">
|
||||
<h2>Overzicht: Energie Data & Simulatie</h2>
|
||||
|
||||
<!-- Time Period Toggle -->
|
||||
<div class="time-toggle-container">
|
||||
<button class="@GetTimeButtonClass("all")" @onclick="SetTimePeriodAll" @onclick:stopPropagation>
|
||||
All periodes
|
||||
</button>
|
||||
<button class="@GetTimeButtonClass("year")" @onclick="SetTimePeriodYear" @onclick:stopPropagation>
|
||||
Per jaar
|
||||
</button>
|
||||
<button class="@GetTimeButtonClass("month")" @onclick="SetTimePeriodMonth" @onclick:stopPropagation>
|
||||
Per maand
|
||||
</button>
|
||||
<button class="@GetTimeButtonClass("week")" @onclick="SetTimePeriodWeek" @onclick:stopPropagation>
|
||||
Per week
|
||||
</button>
|
||||
<button class="@GetTimeButtonClass("day")" @onclick="SetTimePeriodDay" @onclick:stopPropagation>
|
||||
Per dag
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<RadzenChart Class="unified-chart">
|
||||
<!-- Original Data -->
|
||||
<RadzenAreaSeries Smooth=true Data="@FilteredFluviusData" CategoryProperty="Time" Title="Consumption" ValueProperty="Consumption">
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@FilteredFluviusData" CategoryProperty="Time" Title="Production" ValueProperty="Production">
|
||||
</RadzenAreaSeries>
|
||||
|
||||
<!-- Simulated Data -->
|
||||
@if (SimulationDataDaily.Length > 0)
|
||||
{
|
||||
<RadzenAreaSeries Smooth=true Data="@FilteredSimulationData" CategoryProperty="Time" Title="Simulated Consumption" ValueProperty="Consumption">
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@FilteredSimulationData" CategoryProperty="Time" Title="Simulated Production" ValueProperty="Production">
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@FilteredSimulationData" CategoryProperty="Time" Title="Battery Charge" ValueProperty="BatteryCharge">
|
||||
</RadzenAreaSeries>
|
||||
}
|
||||
|
||||
<RadzenCategoryAxis Formatter="@FormatObject" Padding="20" LabelAutoRotation="-45">
|
||||
<RadzenGridLines Visible="true"/>
|
||||
<RadzenAxisTitle Text="Tijd"/>
|
||||
</RadzenCategoryAxis>
|
||||
<RadzenValueAxis Formatter="@FormatObject">
|
||||
<RadzenGridLines Visible="true"/>
|
||||
<RadzenAxisTitle Text="Energie (kWh)"/>
|
||||
</RadzenValueAxis>
|
||||
</RadzenChart>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
EnergyData[] FluviusDataRaw = [];
|
||||
EnergyData[] FluviusDataDaily = [];
|
||||
bool _isLoadingFile = false;
|
||||
|
||||
SimulatedBatteryEnergyData[] SimulationData = [];
|
||||
SimulatedBatteryEnergyData[] SimulationDataDaily = [];
|
||||
|
||||
EnergyData[] FilteredFluviusData = [];
|
||||
SimulatedBatteryEnergyData[] FilteredSimulationData = [];
|
||||
|
||||
EnergyCostCalculator calculator = new();
|
||||
double normalCost = 0.0;
|
||||
double simulatedCost = 0.0;
|
||||
|
||||
struct PipelineStep{
|
||||
public bool Expanded;
|
||||
public bool Completed;
|
||||
public bool isProcessing;
|
||||
}
|
||||
|
||||
PipelineStep[] StepData = [
|
||||
new PipelineStep(), // Step 1
|
||||
new PipelineStep(), // Step 2
|
||||
new PipelineStep(), // Step 3
|
||||
];
|
||||
|
||||
string _uploadedFileName = string.Empty;
|
||||
string? _uploadError = null;
|
||||
|
||||
string _timePeriod = "all";
|
||||
|
||||
double BatteryCapacity = 7.5;
|
||||
double Efficiency = 90;
|
||||
|
||||
private string GetPipelineStepClasses(int step){
|
||||
var classes = new List<string>();
|
||||
if (StepData[step].Expanded) classes.Add("expanded");
|
||||
if (StepData[step].Completed) classes.Add("completed");
|
||||
if (StepData[step].isProcessing) classes.Add("running");
|
||||
return string.Join(" ", classes);
|
||||
}
|
||||
|
||||
private string GetTimeButtonClass(string period)
|
||||
{
|
||||
var baseClass = "time-toggle-button";
|
||||
if (_timePeriod == period)
|
||||
{
|
||||
return $"{baseClass} active";
|
||||
}
|
||||
return baseClass;
|
||||
}
|
||||
|
||||
private void SetTimePeriodAll() => SetTimePeriod("all");
|
||||
private void SetTimePeriodYear() => SetTimePeriod("year");
|
||||
private void SetTimePeriodMonth() => SetTimePeriod("month");
|
||||
private void SetTimePeriodWeek() => SetTimePeriod("week");
|
||||
private void SetTimePeriodDay() => SetTimePeriod("day");
|
||||
|
||||
private void ToggleBox(int step)
|
||||
{
|
||||
if(step == 1 && FluviusDataRaw.Length == 0) return;
|
||||
if(step == 2 && SimulationData.Length == 0) return;
|
||||
StepData[step].Expanded = !StepData[step].Expanded;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task OnFileUploaded(InputFileChangeEventArgs e)
|
||||
{
|
||||
_uploadError = null;
|
||||
var file = e.File;
|
||||
_uploadedFileName = file.Name;
|
||||
|
||||
if (file.ContentType != "text/csv")
|
||||
{
|
||||
Console.WriteLine("Only CSV files are allowed!");
|
||||
_uploadError = "Alleen CSV bestanden zijn toegestaan!";
|
||||
StateHasChanged();
|
||||
return;
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
Console.WriteLine("Reading csv file...");
|
||||
_isLoadingFile = true;
|
||||
StepData[0].isProcessing = true;
|
||||
StateHasChanged();
|
||||
|
||||
FluviusDataRaw = await FluviusDataHandler.LoadAndProcessFile(file);
|
||||
FluviusDataDaily = FluviusDataHandler.GenerateDailyData(FluviusDataRaw);
|
||||
_isLoadingFile = false;
|
||||
FilteredFluviusData = FluviusDataDaily;
|
||||
FilteredSimulationData = [];
|
||||
|
||||
StepData[0].isProcessing = false;
|
||||
StepData[0].Completed = true;
|
||||
StepData[1].Completed = false;
|
||||
StepData[2].Completed = false;
|
||||
SimulationData = [];
|
||||
SimulationDataDaily = [];
|
||||
|
||||
StateHasChanged();
|
||||
Console.WriteLine("Done reading csv file!");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Console.WriteLine($"Error loading file: {ex.Message}");
|
||||
StepData[0].isProcessing = false;
|
||||
_uploadError = ex.Message;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private void OnSeriesClick(){}
|
||||
private void SimulateBattery()
|
||||
{
|
||||
if (FluviusDataRaw.Length == 0) return;
|
||||
|
||||
StepData[1].isProcessing = true;
|
||||
StateHasChanged();
|
||||
|
||||
try
|
||||
{
|
||||
SimulationData = BatterySimulator.SimulateBattery(FluviusDataRaw, BatteryCapacity, Efficiency/100);
|
||||
SimulationDataDaily = BatterySimulator.GenerateDailyData(SimulationData);
|
||||
FilteredSimulationData = SimulationDataDaily;
|
||||
|
||||
StepData[1].isProcessing = false;
|
||||
StepData[1].Completed = true;
|
||||
StepData[2].Completed = false;
|
||||
normalCost = 0;
|
||||
simulatedCost = 0;
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
StepData[1].isProcessing = false;
|
||||
Console.WriteLine($"Error: {ex.Message}");
|
||||
}
|
||||
}
|
||||
|
||||
private void Calculate()
|
||||
{
|
||||
if (SimulationData.Length == 0) return;
|
||||
|
||||
StepData[2].isProcessing = true;
|
||||
StateHasChanged();
|
||||
|
||||
try
|
||||
{
|
||||
normalCost = calculator.CalculateCostOfEnergyUsage(FluviusDataRaw);
|
||||
simulatedCost = calculator.CalculateCostOfEnergyUsage(SimulationData);
|
||||
|
||||
StepData[2].isProcessing = false;
|
||||
StepData[2].Completed = true;
|
||||
StateHasChanged();
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
StepData[2].isProcessing = false;
|
||||
Console.WriteLine($"Error: {ex.Message}");
|
||||
}
|
||||
}
|
||||
|
||||
private void SetTimePeriod(string period)
|
||||
{
|
||||
_timePeriod = period;
|
||||
|
||||
// Filter data based on selected period
|
||||
FilteredFluviusData = FilterFluviusDataByPeriod(period);
|
||||
FilteredSimulationData = FilterSimulationDataByPeriod(period);
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private EnergyData[] FilterFluviusDataByPeriod(string period)
|
||||
{
|
||||
if (period == "all" || FluviusDataDaily.Length == 0)
|
||||
return FluviusDataDaily;
|
||||
|
||||
var result = new List<EnergyData>();
|
||||
|
||||
foreach (var item in FluviusDataDaily)
|
||||
{
|
||||
// The Time property is DateTime but for daily data it represents the day
|
||||
var date = DateOnly.FromDateTime(item.Time);
|
||||
bool include = false;
|
||||
switch (period)
|
||||
{
|
||||
case "day": include = true; break; // Show all daily data
|
||||
case "week": include = date.DayOfWeek == DayOfWeek.Monday; break;
|
||||
case "month": include = date.Day == 1; break;
|
||||
case "year": include = date.Month == 1 && date.Day == 1; break;
|
||||
}
|
||||
if (include) result.Add(item);
|
||||
}
|
||||
|
||||
return result.ToArray();
|
||||
}
|
||||
|
||||
private SimulatedBatteryEnergyData[] FilterSimulationDataByPeriod(string period)
|
||||
{
|
||||
if (period == "all" || SimulationDataDaily.Length == 0)
|
||||
return SimulationDataDaily;
|
||||
|
||||
var result = new List<SimulatedBatteryEnergyData>();
|
||||
|
||||
foreach (var item in SimulationDataDaily)
|
||||
{
|
||||
var date = DateOnly.FromDateTime(item.Time);
|
||||
bool include = false;
|
||||
switch (period)
|
||||
{
|
||||
case "day": include = true; break;
|
||||
case "week": include = date.DayOfWeek == DayOfWeek.Monday; break;
|
||||
case "month": include = date.Day == 1; break;
|
||||
case "year": include = date.Month == 1 && date.Day == 1; break;
|
||||
}
|
||||
if (include) result.Add(item);
|
||||
}
|
||||
|
||||
return result.ToArray();
|
||||
}
|
||||
|
||||
private string FormatObject(object value) {
|
||||
if(value is double d) return $"{d:0.##} kWh";
|
||||
if(value is DateTime time) return time.ToString("dd/MM/yyyy");
|
||||
@@ -81,156 +545,3 @@
|
||||
return string.Empty;
|
||||
}
|
||||
}
|
||||
|
||||
<h2>Batterij Simulatie</h2>
|
||||
<div>
|
||||
<p>
|
||||
Met je Fluvius-kwartierdata simuleren we een batterij die elk kwartier de energie die normaal op het elektriciteitsnet wordt teruggeleverd, opvangt en de stroom die normaal uit het net wordt gehaald vervangt—mits de batterij nog voldoende capaciteit heeft.
|
||||
Op deze manier kun je verschillende batterijcapaciteiten testen om te zien welke installatie het beste past bij jouw verbruiksprofiel en besparingsdoelen. Daarnaast kun je onderzoeken hoe verschillende batterijtypes, met uiteenlopende efficiëntieniveaus, de uitkomsten beïnvloeden. Onder efficiëntie verstaan we hier het aandeel van de opgeslagen energie dat uiteindelijk ook daadwerkelijk weer kan worden gebruikt.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Batterijcapaciteit: <InputNumber @bind-value="BatteryCapacity"/> kWh</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Round-trip Efficiëntie: <InputNumber @bind-value="Efficiency"/> %</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Button @onclick="SimulateBattery">Simulate</Button>
|
||||
@if (_isSimulating) { <p>Simulating...</p> }
|
||||
else
|
||||
{
|
||||
@if (SimulationDataDaily.Length != 0)
|
||||
{
|
||||
<RadzenChart>
|
||||
<RadzenAreaSeries Smooth=true Data="@FluviusDataDaily" CategoryProperty="Time" Title="Consumption" ValueProperty="Consumption">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@FluviusDataDaily" CategoryProperty="Time" Title="Production" ValueProperty="Production">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@SimulationDataDaily" CategoryProperty="Time" Title="SimulatedConsumption" ValueProperty="Consumption">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@SimulationDataDaily" CategoryProperty="Time" Title="SimulatedProduction" ValueProperty="Production">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenAreaSeries Smooth=true Data="@SimulationDataDaily" CategoryProperty="Time" Title="BatteryCharge" ValueProperty="BatteryCharge">
|
||||
<RadzenChartTooltipOptions Visible="true"/>
|
||||
</RadzenAreaSeries>
|
||||
<RadzenCategoryAxis Formatter="@FormatObject" Padding="20" LabelAutoRotation="-45">
|
||||
<RadzenGridLines Visible="true"/>
|
||||
<RadzenAxisTitle Text="Time"/>
|
||||
</RadzenCategoryAxis>
|
||||
<RadzenValueAxis Formatter="@FormatObject">
|
||||
<RadzenGridLines Visible="true"/>
|
||||
<RadzenAxisTitle Text="Energy"/>
|
||||
</RadzenValueAxis>
|
||||
</RadzenChart>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
double BatteryCapacity = 7.5;
|
||||
double Efficiency = 90;
|
||||
bool _isSimulating = false;
|
||||
|
||||
SimulatedBatteryEnergyData[] SimulationData = [];
|
||||
SimulatedBatteryEnergyData[] SimulationDataDaily = [];
|
||||
|
||||
private void SimulateBattery(){
|
||||
Console.WriteLine("Simulating...");
|
||||
_isSimulating = true;
|
||||
SimulationData = BatterySimulator.SimulateBattery(FluviusDataRaw, BatteryCapacity, Efficiency/100);
|
||||
SimulationDataDaily = BatterySimulator.GenerateDailyData(SimulationData);
|
||||
_isSimulating = false;
|
||||
Console.WriteLine("Done simulating!");
|
||||
}
|
||||
}
|
||||
|
||||
<h2>Bereken kosten</h2>
|
||||
<div>
|
||||
<p>
|
||||
Uitleg
|
||||
</p>
|
||||
<p>Vaste Vergoeding</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Vaste vergoeding: <InputNumber @bind-value="calculator.BasePayment" /> €/jaar</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Energiekosten</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Energiekost: <InputNumber @bind-value="calculator.EnergyCost" /> c€/kWh</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Terugleveringsvergoeding: <InputNumber @bind-value="calculator.ReturnCost" /> c€/kWh</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Heffingen Groene Stroom</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Groene stroomcertificaten: <InputNumber @bind-value="calculator.GreenCertificateCost" /> c€/kWh</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Warmtekracht certificaten: <InputNumber @bind-value="calculator.HeatingCertificateCost" /> c€/kWh</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>Net- en distributiekosten</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Tarief databeheer: <InputNumber @bind-value="calculator.DataManagementCost" /> €/jaar</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Capaciteitstarief: <InputNumber @bind-value="calculator.CapacityCost" /> €/kWh/jaar</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Afnametarief: <InputNumber @bind-value="calculator.UsageTariff" /> c€/kWh</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>Heffingen en Toeslagen</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Energiebijdrage: <InputNumber @bind-value="calculator.EnergyContribution" /> c€/kWh</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Bijzondere accijns elektriciteit: <InputNumber @bind-value="calculator.SpecialTariffs" /> c€/kWh</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Vlaamse energieheffing elektriciteit: <InputNumber @bind-value="calculator.FlemishEnergyTariff" /> €/jaar</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Button @onclick="Calculate">Calculate</Button>
|
||||
@if (_isCalculating) { <p>Calculating...</p> }
|
||||
else
|
||||
{
|
||||
<p>The original price is: €@normalCost</p>
|
||||
<p>The simulated price is: €@simulatedCost</p>
|
||||
<p>The costsaving is: €@(normalCost - simulatedCost)</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
EnergyCostCalculator calculator = new();
|
||||
double normalCost = 0.0;
|
||||
double simulatedCost = 0.0;
|
||||
bool _isCalculating = false;
|
||||
|
||||
private void Calculate()
|
||||
{
|
||||
Console.WriteLine("Calculating...");
|
||||
_isCalculating = true;
|
||||
normalCost = calculator.CalculateCostOfEnergyUsage(FluviusDataRaw);
|
||||
simulatedCost = calculator.CalculateCostOfEnergyUsage(SimulationData);
|
||||
_isCalculating = false;
|
||||
Console.WriteLine("Done Calculating!");
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user