Untitled

 avatar
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