@page "/circular-gauge/speedometer"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.Buttons
@using ThemeHelper
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the appearance of a speedometer rendered with the circular gauge component. The pointer value is dynamically updated with random values in this case.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to make circular gauge appear like a speedometer. The labels can be changed, gap can be added between the ranges, or the ranges can be combined to form single range using the options provided in the properties panel.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfCircularGauge Title="Speedometer" CenterY="75%" @ref="@Gauge" Theme="@Theme">
        <CircularGaugeTitleStyle Size="18px" FontFamily="Segoe UI" />
        <CircularGaugeAxes>
            <CircularGaugeAxis EndAngle="90" StartAngle="270" Radius="120%" Minimum="0" Maximum="120" RangeGap="@RangeGap">
                <CircularGaugeAxisLineStyle Width="0" Color="#9E9E9E" />
                <CircularGaugeAxisMajorTicks Width="0" />
                <CircularGaugeAxisMinorTicks Width="0" />
                <CircularGaugeAxisLabelStyle Position="Position.Outside" AutoAngle="true">
                    <CircularGaugeAxisLabelFont Size="13px" FontFamily="Segoe UI"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="@FirstRangeStart" End="@FirstRangeEnd" StartWidth="@FirstRangeStartWidth" EndWidth="@FirstRangeEndWidth" Radius="102%" Color="@FirstRangeColor" />
                    <CircularGaugeRange Start="@SecondRangeStart" End="@SecondRangeEnd" StartWidth="@SecondRangeStartWidth" EndWidth="@SecondRangeEndWidth" Radius="102%" Color="@SecondRangeColor" />
                    <CircularGaugeRange Start="@ThirdRangeStart" End="@ThirdRangeEnd" StartWidth="@ThirdRangeStartWidth" EndWidth="@ThirdRangeEndWidth" Radius="102%" Color="@ThirdRangeColor" />
                    <CircularGaugeRange Start="@FourthRangeStart" End="@FourthRangeEnd" StartWidth="@FourthRangeStartWidth" EndWidth="@FourthRangeEndWidth" Radius="102%" Color="@FourthRangeColor" />
                    <CircularGaugeRange Start="@FifthRangeStart" End="@FifthRangeEnd" StartWidth="@FifthRangeStartWidth" EndWidth="@FifthRangeEndWidth" Radius="102%" Color="@FifthRangeColor" />
                    <CircularGaugeRange Start="@SixRangeStart" End="@SixRangeEnd" StartWidth="@SixRangeStartWidth" EndWidth="@SixRangeEndWidth" Radius="102%" Color="@SixRangeColor" />
                </CircularGaugeRanges>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="@PointerValue" Radius="80%" Color="#757575" PointerWidth="7">
                        <CircularGaugePointerAnimation Enable="false" Duration="1000" />
                        <CircularGaugeCap Radius="8" Color="#757575">
                            <CircularGaugeCapBorder Width="0" />
                        </CircularGaugeCap>
                        <CircularGaugeNeedleTail Length="15%" Color="#757575" />
                    </CircularGaugePointer>
                </CircularGaugePointers>
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Angle="0" Radius='30%' ZIndex='1' Content="40 km/h">
                        <CircularGaugeAnnotationTextStyle Size="20px" FontFamily="Segoe UI" />
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <colgroup>
                    <col span="1" style="width: 60%;">
                    <col span="1" style="width: 40%;">
                </colgroup>
                <tbody>
                    <tr>
                        <td>
                            <div> Combine Ranges</div>
                        </td>
                        <td>
                            <SfCheckBox ValueChange="@CombineRangeChange" Checked="@CombineRangeChecked" TChecked="bool" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>Gap Between Ranges</div>
                        </td>
                        <td>
                            <SfCheckBox Disabled="@GapDisable" ValueChange="@RangeGapChange" Checked="@RangeGapChecked" TChecked="bool" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<svg style="height:0px;width:0px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#82b944;stop-opacity:1" />
            <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
</svg>
<style>
    tr {
        height: 40px;
    }

    td {
        width: 50%
    }
</style>

@code {
    public Theme Theme { get; set; }
    SfCircularGauge Gauge;
    private double RangeGap = 0;
    private double PointerValue = 40;
    private double FirstRangeStart = 0;
    private double FirstRangeEnd = 20;
    private string FirstRangeStartWidth = "5";
    private string FirstRangeEndWidth = "10";
    private string FirstRangeColor = "#82b944";
    private double SecondRangeStart = 20;
    private double SecondRangeEnd = 40;
    private string SecondRangeStartWidth = "10";
    private string SecondRangeEndWidth = "15";
    private string SecondRangeColor = "#a1cb43";
    private double ThirdRangeStart = 40;
    private double ThirdRangeEnd = 60;
    private string ThirdRangeStartWidth = "15";
    private string ThirdRangeEndWidth = "20";
    private string ThirdRangeColor = "#ddec12";
    private double FourthRangeStart = 60;
    private double FourthRangeEnd = 80;
    private string FourthRangeStartWidth = "20";
    private string FourthRangeEndWidth = "25";
    private string FourthRangeColor = "#ffbc00";
    private double FifthRangeStart = 80;
    private double FifthRangeEnd = 100;
    private string FifthRangeStartWidth = "25";
    private string FifthRangeEndWidth = "30";
    private string FifthRangeColor = "#ff6000";
    private double SixRangeStart = 100;
    private double SixRangeEnd = 120;
    private string SixRangeStartWidth = "30";
    private string SixRangeEndWidth = "35";
    private string SixRangeColor = "red";
    private string PointerValueText = "40 km/h";
    private bool CombineRangeChecked;
    private bool RangeGapChecked;
    private bool GapDisable = false;
    System.Timers.Timer syncTimer1 = null;
    protected override void OnInitialized()
    {
        syncTimer1 = new System.Timers.Timer(1000);
        syncTimer1.Elapsed += this.PointerValueUpdate;
        syncTimer1.AutoReset = true;
        syncTimer1.Enabled = true;
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }
    Random Random = new Random();
    void PointerValueUpdate(Object source, System.Timers.ElapsedEventArgs e)
    {
        var Number = Random.NextDouble();
        var value = PointerValue + ((Number * (10 - (-10))) - 10);
        PointerValue = Math.Abs(value);
        Gauge.SetPointerValueAsync(0, 0, PointerValue);
        PointerValueText = (Math.Round(PointerValue)).ToString() + "km/h";
        Gauge.SetAnnotationValueAsync(0, 0, PointerValueText);
    }
    private void CombineRangeChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        CombineRangeChecked = args.Checked;
        if (CombineRangeChecked)
        {
            FirstRangeStart = 0;
            FirstRangeEnd = 120;
            FirstRangeStartWidth = "5";
            FirstRangeEndWidth = "35";
            FirstRangeColor = "url(#grad1)";
            SecondRangeStart = 0;
            SecondRangeEnd = 0;
            SecondRangeStartWidth = "";
            SecondRangeEndWidth = "";
            SecondRangeColor = "";
            ThirdRangeStart = 0;
            ThirdRangeEnd = 0;
            ThirdRangeStartWidth = "";
            ThirdRangeEndWidth = "";
            ThirdRangeColor = "";
            FourthRangeStart = 0;
            FourthRangeEnd = 0;
            FourthRangeStartWidth = "";
            FourthRangeEndWidth = "";
            FourthRangeColor = "";
            FifthRangeStart = 0;
            FifthRangeEnd = 0;
            FifthRangeStartWidth = "";
            FifthRangeEndWidth = "";
            FifthRangeColor = "";
            SixRangeStart = 0;
            SixRangeEnd = 0;
            SixRangeStartWidth = "";
            SixRangeEndWidth = "";
            SixRangeColor = "";
        }
        else
        {
            FirstRangeStart = 0;
            FirstRangeEnd = 20;
            FirstRangeStartWidth = "5";
            FirstRangeEndWidth = "10";
            FirstRangeColor = "#82b944";
            SecondRangeStart = 20;
            SecondRangeEnd = 40;
            SecondRangeStartWidth = "10";
            SecondRangeEndWidth = "15";
            SecondRangeColor = "#a1cb43";
            ThirdRangeStart = 40;
            ThirdRangeEnd = 60;
            ThirdRangeStartWidth = "15";
            ThirdRangeEndWidth = "20";
            ThirdRangeColor = "#ddec12";
            FourthRangeStart = 60;
            FourthRangeEnd = 80;
            FourthRangeStartWidth = "20";
            FourthRangeEndWidth = "25";
            FourthRangeColor = "#ffbc00";
            FifthRangeStart = 80;
            FifthRangeEnd = 100;
            FifthRangeStartWidth = "25";
            FifthRangeEndWidth = "30";
            FifthRangeColor = "#ff6000";
            SixRangeStart = 100;
            SixRangeEnd = 120;
            SixRangeStartWidth = "30";
            SixRangeEndWidth = "35";
            SixRangeColor = "red";
        }
        GapDisable = args.Checked;
    }
    private void RangeGapChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        RangeGapChecked = args.Checked;
        RangeGap = (RangeGapChecked) ? 5 : 0;
    }
}