Untitled

@using EweComponentLibrary.Interfaces
@using Syncfusion.Blazor
@using Syncfusion.Blazor.CircularGauge

@inherits BaseComponent

<div class="rina-panel">
    <div class="rina-compass">
        <div class="rina-compass__header">
            <i class="icon icon-wind-direction icon--sm"></i>
            <span>Wind Direction</span>
        </div>
        <SfCircularGauge Width="174px" Height="174px" ID="rina-compass" Background="transparent">
            <CircularGaugeAxes>
                <CircularGaugeAxis Radius="140%" StartAngle="0" EndAngle="360" Minimum="0" Maximum="360">
                    <CircularGaugeAxisLabelStyle AutoAngle="true" HiddenLabel="HiddenLabel.Last">
                        <CircularGaugeAxisLabelFont FontFamily="inherit" Color="transparent" />
                    </CircularGaugeAxisLabelStyle>
                    <CircularGaugeAxisLineStyle Width="1" Color="transparent" />
                    <CircularGaugeAxisMajorTicks Height="15" Interval="45" Color="transparent" />
                    <CircularGaugeAxisMinorTicks Height="10" Interval="5" Color="transparent" />
                    <CircularGaugePointers>
                        <CircularGaugePointer Value="@NeedleValue"
                                              Type="PointerType.Marker"
                                              MarkerHeight="100"
                                              MarkerWidth="100"
                                              MarkerShape="GaugeShape.Image"
                                              PointerWidth="70"
                                              Radius="5"
                                              ImageUrl="_content/EweComponentLibrary/images/component-images/winddirection/compass-arrow.png">
                            <CircularGaugePointerAnimation Enable="true" Duration="400" />
                        </CircularGaugePointer>
                    </CircularGaugePointers>
                </CircularGaugeAxis>
            </CircularGaugeAxes>
        </SfCircularGauge>
        <div class="rina-compass__direction">
            @ViewModel?.DirectionDeg.ToString("F0")° @ViewModel?.CardinalDirection
        </div>
        <div class="rina-compass__time">
            Last update 01.01-2025 - 08:48
        </div>
    </div>
</div>

@code {
#pragma warning disable BL0007 // Parameter properties are set asynchronously so get and set should be simple
    [Parameter, EditorRequired]
    public IWindTurbineWindDataViewModel? ViewModel
    {
        get => ObservableObject as IWindTurbineWindDataViewModel;
        set => ObservableObject = value;
    }
#pragma warning restore BL0007

    private double _lastValue = 0;

    private double NeedleValue
    {
        get
        {
            if (ViewModel == null)
                return 0;

            var newValue = ViewModel.DirectionDeg;

            var delta = newValue - _lastValue;

            if (delta > 180)
                newValue -= 360;
            else if (delta < -180)
                newValue += 360;

            _lastValue = newValue;
            return newValue;
        }
    }
}

<style>
    #rina-compass {
        background-image: url('_content/EweComponentLibrary/images/component-images/winddirection/compass.png');
        background-size: cover;
        background-position: center;
    }
</style>