Untitled
unknown
plain_text
a month ago
15 kB
4
Indexable
@using System.ComponentModel
@using Rina.Application.Utilities
@using Rina.Application.ViewModels
@using Rina.SharedUtilities
@using Rina.SharedUtilities.ComponentInterfaces
@using Syncfusion.Blazor.Charts
@using WebAppFrontend.Domain.ViewModels.DataObjectViewModels
@inject ApplicationContext ApplicationContext
@inject NavigationViewModel NavigationViewModel
@inject WindTurbineViewModel WindTurbineViewModel
@implements IDisposable
@rendermode InteractiveServer
<EweErrorBoundary>
<div class="wgt-overview-grids-container">
<div class="wgt-overview-header">
<h5>@NavigationViewModel?.SelectedNode?.Parent?.Parent?.Name</h5>
</div>
<div class="wgt-overview-item1">
<div class="rina-panel">
<div class="wtg__power-curve">
<div class="wtg__power-curve__header">
<i class="icon icon-turbine icon--sm"></i>
Power Curve
</div>
<SfChart Title="This week compared to baseline: 8% deviation" Background="var(--base-900)" Height="300">
<ChartTitleStyle Size="16px" Color="var(--base-150)" FontFamily="var(--font-primary)" FontWeight="var(--font-weight-semibold)" />
<ChartArea>
<ChartAreaBorder Color="var(--base-200)" Width="0"></ChartAreaBorder>
</ChartArea>
<ChartPrimaryXAxis IntervalType="IntervalType.Auto" >
<ChartAxisLineStyle Color="var(--base-200)" Width="2"></ChartAxisLineStyle>
<ChartAxisMajorGridLines Color="var(--base-400)" Width="2"></ChartAxisMajorGridLines>
<ChartAxisMinorGridLines Color="var(--base-400)" Width="2"></ChartAxisMinorGridLines>
<ChartAxisLabelStyle Color="var(--base-400)"></ChartAxisLabelStyle>
<ChartAxisMajorTickLines Color="var(--base-400)" Width="2"></ChartAxisMajorTickLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis LabelFormat="{value} MW" Minimum="0" Maximum="10" Interval="5">
<ChartAxisLineStyle Color="var(--base-200)" Width="2"></ChartAxisLineStyle>
<ChartAxisMajorGridLines Color="var(--base-400)" Width="2"></ChartAxisMajorGridLines>
<ChartAxisMinorGridLines Color="var(--base-400)" Width="2"></ChartAxisMinorGridLines>
<ChartAxisLabelStyle Color="var(--base-400)"></ChartAxisLabelStyle>
<ChartAxisMajorTickLines Color="var(--base-400)" Width="2"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeries DataSource="@PowerCurve1" XName="Value" High="High" Low="Low" Type="ChartSeriesType.SplineRangeArea" Fill="#0C294680">
</ChartSeries>
<ChartSeries DataSource="@PowerCurve2" XName="Value" YName="Low" Type="ChartSeriesType.Spline" Fill="var(--accent)">
</ChartSeries>
</SfChart>
<div class="wtg__power-curve__bottom">
<div class="wtg__power-curve__time">
Last update: 01.01-2025
</div>
</div>
</div>
</div>
</div>
<div class="wgt-overview-item2">
<div class="rina-panel">
<div class="wtg__spot-price">
<div class="wtg__spot-price__header">
<i class="icon icon-turbine icon--sm"></i>
Spot Price
</div>
<SfChart Title="Spot price" Theme="Syncfusion.Blazor.Theme.Bootstrap5Dark" Background="var(--base-900)" Height="300" IsTransposed="true">
<ChartTitleStyle Size="16px" Color="var(--base-150)" FontFamily="Gellix" FontWeight="semibold"></ChartTitleStyle>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" IntervalType="IntervalType.Hours" LabelFormat="HH">
<ChartAxisLineStyle Color="var(--base-200)" Width="2"></ChartAxisLineStyle>
<ChartAxisMajorGridLines Color="var(--base-700)" Width="1"></ChartAxisMajorGridLines>
<ChartAxisMinorGridLines Color="var(--base-700)" Width="1"></ChartAxisMinorGridLines>
<ChartAxisLabelStyle Color="var(--base-400)"></ChartAxisLabelStyle>
<ChartAxisMajorTickLines Color="var(--base-700)" Width="1"></ChartAxisMajorTickLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis LabelFormat="{value}" Minimum="-100" Maximum="600" Interval="100">
<ChartAxisLineStyle Color="var(--base-200)" Width="2"></ChartAxisLineStyle>
<ChartAxisMajorGridLines Color="var(--base-700)" Width="1"></ChartAxisMajorGridLines>
<ChartAxisMinorGridLines Color="var(--base-700)" Width="1"></ChartAxisMinorGridLines>
<ChartAxisLabelStyle Color="var(--base-400)"></ChartAxisLabelStyle>
<ChartAxisMajorTickLines Color="var(--base-700)" Width="1"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@SpotPriceList" Name="SpotPrice" XName="Time" YName="Price" Type="ChartSeriesType.Bar" Fill="var(--accent-2)"/>
</ChartSeriesCollection>
</SfChart>
<div class="wtg__spot-price__bottom">
<div class="wtg__power-curve__time">
Last update: 01.01-2025
</div>
</div>
</div>
</div>
</div>
<div class="wgt-overview-item3">
<WindTurbinePowerGauge ViewModel="@WindTurbineViewModel.WindTurbinePowerDataViewModel" />
</div>
<div class="wgt-overview-item4">
<WindDirectionGauge/>
</div>
<div class="wgt-overview-item5">
<WindSpeed/>
</div>
</div>
</EweErrorBoundary>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await WindTurbineViewModel.InitializeAsync();
}
}
private void AxisLabelChange(Syncfusion.Blazor.CircularGauge.AxisLabelRenderEventArgs args)
{
args.Text = TextValues[Convert.ToInt32(args.Value)];
}
public void Dispose()
{
WindTurbineViewModel.Dispose();
}
// Example data
private IReferenceValueDataObjectViewModel<float> _gaugeViewModel = new GaugeViewModel<float>();
private class GaugeViewModel<T> : IReferenceValueDataObjectViewModel<T>
{
private T? _referenceValue;
public T? ReferenceValue
{
get => _referenceValue;
private set => _referenceValue = value;
}
public string DisplayName => "Power data";
public int Max { get => 90; set => throw new NotImplementedException(); }
public int Min { get => 10; set => throw new NotImplementedException(); }
public int NumDecimals { get => 2; set => throw new NotImplementedException(); }
public string UnitText => "kW";
public T? Value => _referenceValue;
public event PropertyChangedEventHandler PropertyChanged;
}
public class PriceDataPoint
{
public DateTime Time { get; set; }
public double Price { get; set; }
}
public List<PriceDataPoint> SpotPriceList = new List<PriceDataPoint>
{
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 0, 0, 0), Price = 122.47 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 1, 0, 0), Price = 79.81 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 3, 0, 0), Price = 14.41 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 4, 0, 0), Price = -85.45 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 5, 0, 0), Price = -39.94 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 6, 0, 0), Price = 110.41 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 7, 0, 0), Price = 248.45 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 8, 0, 0), Price = 421.89 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 9, 0, 0), Price = 291.39 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 10, 0, 0), Price = 236.29 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 11, 0, 0), Price = 191.91 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 12, 0, 0), Price = 178.76 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 13, 0, 0), Price = 171.39 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 14, 0, 0), Price = 191.79 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 15, 0, 0), Price = 275.49 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 16, 0, 0), Price = 381.61 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 17, 0, 0), Price = 561.75 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 18, 0, 0), Price = 473.28 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 19, 0, 0), Price = 295.57 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 20, 0, 0), Price = 220.00 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 21, 0, 0), Price = 170.00 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 22, 0, 0), Price = 158.78 },
new PriceDataPoint{ Time = new DateTime(2025, 1, 1, 23, 0, 0), Price = 142.42 },
};
public class ChartData
{
public double Value { get; set; }
public double Low { get; set; }
public double High { get; set; }
}
public List<ChartData> PowerCurve1 = new List<ChartData>
{
new ChartData { Value = 3, Low= 0, High= 1.0 },
new ChartData { Value = 4, Low= 0, High= 1.5 },
new ChartData { Value = 5, Low= 2, High= 4 },
new ChartData { Value = 6, Low= 4, High= 6 },
new ChartData { Value = 7, Low= 5, High= 7 },
new ChartData { Value = 8, Low= 5.5, High= 7.5 },
new ChartData { Value = 9, Low= 6, High= 8 },
new ChartData { Value = 10, Low= 6, High= 8 },
new ChartData { Value = 11, Low= 6, High= 8 },
new ChartData { Value = 12, Low= 6, High= 8 },
new ChartData { Value = 13, Low= 6, High= 8 },
new ChartData { Value = 14, Low= 6, High= 8 },
new ChartData { Value = 15, Low= 6, High= 8 },
new ChartData { Value = 16, Low= 6, High= 8 },
new ChartData { Value = 17, Low= 6, High= 8 },
new ChartData { Value = 18, Low= 6, High= 8 },
new ChartData { Value = 19, Low= 6, High= 8 },
new ChartData { Value = 20, Low= 6, High= 8 },
new ChartData { Value = 21, Low= 6, High= 8 },
new ChartData { Value = 22, Low= 6, High= 8 },
new ChartData { Value = 23, Low= 6, High= 8 },
new ChartData { Value = 24, Low= 6, High= 8 },
new ChartData { Value = 25, Low= 6, High= 8 },
new ChartData { Value = 26, Low= 6, High= 8 },
};
public List<ChartData> PowerCurve2 = new List<ChartData>
{
new ChartData { Value = 3, Low= 0 },
new ChartData { Value = 4, Low= 0.5 },
new ChartData { Value = 5, Low= 3 },
new ChartData { Value = 6, Low= 5 },
new ChartData { Value = 7, Low= 6 },
new ChartData { Value = 8, Low= 6.5 },
new ChartData { Value = 9, Low= 7 },
new ChartData { Value = 10, Low= 7},
new ChartData { Value = 11, Low= 7},
new ChartData { Value = 12, Low= 7},
new ChartData { Value = 13, Low= 7},
new ChartData { Value = 14, Low= 7},
new ChartData { Value = 15, Low= 7},
new ChartData { Value = 16, Low= 7},
new ChartData { Value = 17, Low= 7},
new ChartData { Value = 18, Low= 7},
new ChartData { Value = 19, Low= 7},
new ChartData { Value = 20, Low= 7},
new ChartData { Value = 21, Low= 7},
new ChartData { Value = 22, Low= 7},
new ChartData { Value = 23, Low= 7},
new ChartData { Value = 24, Low= 7},
new ChartData { Value = 25, Low= 7},
new ChartData { Value = 26, Low= 7},
};
public string[] TextValues = { "N", "NE", "E", "SE", "S", "SW", "W", "NW", " " };
}
<style>
.wgt-overview-header {
grid-area: header;
}
.wgt-overview-item1 {
grid-area: chart1;
}
.wgt-overview-item2 {
grid-area: chart2;
}
.wgt-overview-item3 {
grid-area: power;
}
.wgt-overview-item4 {
grid-area: winddirection;
}
.wgt-overview-item5 {
grid-area: windspeed;
}
.wgt-overview-grids-container {
display: grid;
width: 100%;
grid-template-columns: 58% 20% 20%;
grid-template-rows: auto auto auto;
grid-template-areas:
'header header header'
'chart1 power power'
'chart2 winddirection windspeed';
gap: 20px;
background-color: var(--base-1000);
padding: 30px;
}
* {
box-sizing: border-box;
}
.wtg__power-curve__header, .wtg__spot-price__header {
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.wtg__power-curve__bottom, .wtg__spot-price__bottom {
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xs-01);
color: var(--base-400);
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
}
.wtg__power-curve i, .wtg__spot-price i {
background-color: var(--accent);
}
</style>
Editor is loading...
Leave a Comment