<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
        <RadzenStack Gap="0.25rem">
            <RadzenText TextStyle="TextStyle.Caption">Grid Shape</RadzenText>
            <RadzenSelectBar @bind-Value="gridShape" TValue="SpiderChartGridShape" Size="ButtonSize.Small">
                <Items>
                    <RadzenSelectBarItem Text="Polygon" Value="SpiderChartGridShape.Polygon" />
                    <RadzenSelectBarItem Text="Circle" Value="SpiderChartGridShape.Circular" />
                </Items>
            </RadzenSelectBar>
        </RadzenStack>
        <RadzenStack Gap="0.25rem">
            <RadzenText TextStyle="TextStyle.Caption">Angular Range</RadzenText>
            <RadzenSelectBar @bind-Value="rangePreset" TValue="string" Size="ButtonSize.Small" Change="@OnRangeChanged">
                <Items>
                    <RadzenSelectBarItem Text="Full" Value="@("full")" />
                    <RadzenSelectBarItem Text="Top Half" Value="@("top")" />
                    <RadzenSelectBarItem Text="Right Half" Value="@("right")" />
                    <RadzenSelectBarItem Text="Top-Right" Value="@("topright")" />
                    <RadzenSelectBarItem Text="Custom" Value="@("custom")" />
                </Items>
            </RadzenSelectBar>
        </RadzenStack>
        @if (rangePreset == "custom")
        {
            <RadzenStack Gap="0.25rem">
                <RadzenText TextStyle="TextStyle.Caption">Start Angle: @startAngle°</RadzenText>
                <RadzenSlider @bind-Value="startAngle" TValue="double" Min="-360" Max="360" Step="15" Style="width: 150px;" />
            </RadzenStack>
            <RadzenStack Gap="0.25rem">
                <RadzenText TextStyle="TextStyle.Caption">End Angle: @endAngle°</RadzenText>
                <RadzenSlider @bind-Value="endAngle" TValue="double" Min="-360" Max="360" Step="15" Style="width: 150px;" />
            </RadzenStack>
        }
        <RadzenStack Gap="0.25rem">
            <RadzenText TextStyle="TextStyle.Caption">Show Axis Values</RadzenText>
            <RadzenSwitch @bind-Value="showAxisValues" />
        </RadzenStack>
        </RadzenStack>
    </RadzenCard>

    <RadzenSpiderChart Style="width: 100%; height: 500px;" GridShape="@gridShape" ShowAxisValues="@showAxisValues"
                   StartAngle="@startAngle" EndAngle="@endAngle">
    <RadzenSpiderSeries TItem="PolarData"
                        Data="@windData"
                        CategoryProperty="@nameof(PolarData.Direction)"
                        ValueProperty="@nameof(PolarData.Speed)"
                        Title="Wind Speed"
                        ValueFormatter="@(v => $"{v:F0} km/h")" />
    <RadzenSpiderSeries TItem="PolarData"
                        Data="@gustData"
                        CategoryProperty="@nameof(PolarData.Direction)"
                        ValueProperty="@nameof(PolarData.Speed)"
                        Title="Gust Speed"
                        ValueFormatter="@(v => $"{v:F0} km/h")" />
        <RadzenSpiderLegend Position="LegendPosition.Bottom" />
    </RadzenSpiderChart>
</RadzenStack>

@code {
    SpiderChartGridShape gridShape = SpiderChartGridShape.Circular;
    bool showAxisValues = true;
    string rangePreset = "full";
    double startAngle = 0;
    double endAngle = 360;

    void OnRangeChanged()
    {
        switch (rangePreset)
        {
            case "full":
                startAngle = 0;
                endAngle = 360;
                break;
            case "top":
                startAngle = 270;
                endAngle = 90;
                break;
            case "right":
                startAngle = 0;
                endAngle = 180;
                break;
            case "topright":
                startAngle = 0;
                endAngle = 90;
                break;
        }
    }

    class PolarData
    {
        public string Direction { get; set; }
        public double Speed { get; set; }
    }

    IEnumerable<PolarData> windData = new PolarData[]
    {
        new PolarData { Direction = "N", Speed = 45 },
        new PolarData { Direction = "NNE", Speed = 38 },
        new PolarData { Direction = "NE", Speed = 52 },
        new PolarData { Direction = "ENE", Speed = 61 },
        new PolarData { Direction = "E", Speed = 72 },
        new PolarData { Direction = "ESE", Speed = 65 },
        new PolarData { Direction = "SE", Speed = 48 },
        new PolarData { Direction = "SSE", Speed = 35 },
        new PolarData { Direction = "S", Speed = 28 },
        new PolarData { Direction = "SSW", Speed = 32 },
        new PolarData { Direction = "SW", Speed = 40 },
        new PolarData { Direction = "WSW", Speed = 55 },
        new PolarData { Direction = "W", Speed = 68 },
        new PolarData { Direction = "WNW", Speed = 58 },
        new PolarData { Direction = "NW", Speed = 50 },
        new PolarData { Direction = "NNW", Speed = 42 },
    };

    IEnumerable<PolarData> gustData = new PolarData[]
    {
        new PolarData { Direction = "N", Speed = 62 },
        new PolarData { Direction = "NNE", Speed = 55 },
        new PolarData { Direction = "NE", Speed = 70 },
        new PolarData { Direction = "ENE", Speed = 78 },
        new PolarData { Direction = "E", Speed = 90 },
        new PolarData { Direction = "ESE", Speed = 82 },
        new PolarData { Direction = "SE", Speed = 65 },
        new PolarData { Direction = "SSE", Speed = 50 },
        new PolarData { Direction = "S", Speed = 40 },
        new PolarData { Direction = "SSW", Speed = 48 },
        new PolarData { Direction = "SW", Speed = 58 },
        new PolarData { Direction = "WSW", Speed = 72 },
        new PolarData { Direction = "W", Speed = 85 },
        new PolarData { Direction = "WNW", Speed = 75 },
        new PolarData { Direction = "NW", Speed = 68 },
        new PolarData { Direction = "NNW", Speed = 58 },
    };
}
