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