@using System.Globalization

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap" Gap="2rem">
            <RadzenStack Gap="0.5rem">
                <RadzenText TextStyle="TextStyle.Subtitle2">Category axis crosshair</RadzenText>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenCheckBox @bind-Value="@categoryVisible" Name="categoryVisible" />
                    <RadzenLabel Text="Visible" Component="categoryVisible" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenCheckBox @bind-Value="@categorySnap" Name="categorySnap" />
                    <RadzenLabel Text="Snap" Component="categorySnap" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenCheckBox @bind-Value="@categoryLabel" Name="categoryLabel" />
                    <RadzenLabel Text="Label" Component="categoryLabel" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Color" />
                    <RadzenColorPicker @bind-Value="@categoryStroke" Style="width: 110px;" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Width" />
                    <RadzenNumeric @bind-Value="@categoryStrokeWidth" Min="1" Max="6" Step="1" Style="width: 80px;" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Style" />
                    <RadzenDropDown @bind-Value="@categoryLineType" Data="@lineTypes" Style="width: 110px;" />
                </RadzenStack>
            </RadzenStack>

            <RadzenStack Gap="0.5rem">
                <RadzenText TextStyle="TextStyle.Subtitle2">Value axis crosshair</RadzenText>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenCheckBox @bind-Value="@valueVisible" Name="valueVisible" />
                    <RadzenLabel Text="Visible" Component="valueVisible" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenCheckBox @bind-Value="@valueSnap" Name="valueSnap" />
                    <RadzenLabel Text="Snap" Component="valueSnap" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenCheckBox @bind-Value="@valueLabel" Name="valueLabel" />
                    <RadzenLabel Text="Label" Component="valueLabel" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Color" />
                    <RadzenColorPicker @bind-Value="@valueStroke" Style="width: 110px;" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Width" />
                    <RadzenNumeric @bind-Value="@valueStrokeWidth" Min="1" Max="6" Step="1" Style="width: 80px;" />
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Style" />
                    <RadzenDropDown @bind-Value="@valueLineType" Data="@lineTypes" Style="width: 110px;" />
                </RadzenStack>
            </RadzenStack>

        </RadzenStack>
    </RadzenCard>

    <RadzenChart>
        <RadzenLineSeries Smooth="true" Data="@solar" CategoryProperty="Year" ValueProperty="Capacity" Title="Solar" />
        <RadzenLineSeries Smooth="true" Data="@wind" CategoryProperty="Year" ValueProperty="Capacity" Title="Wind" />
        <RadzenCategoryAxis Padding="20">
            <RadzenAxisTitle Text="Year" />
            <RadzenAxisCrosshair Visible="@categoryVisible"
                                 Snap="@categorySnap"
                                 Label="@categoryLabel"
                                 Stroke="@categoryStroke"
                                 StrokeWidth="@categoryStrokeWidth"
                                 LineType="@categoryLineType" />
        </RadzenCategoryAxis>
        <RadzenValueAxis Formatter="@FormatGW">
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Installed capacity (GW)" />
            <RadzenAxisCrosshair Visible="@valueVisible"
                                 Snap="@valueSnap"
                                 Label="@valueLabel"
                                 Stroke="@valueStroke"
                                 StrokeWidth="@valueStrokeWidth"
                                 LineType="@valueLineType" />
        </RadzenValueAxis>
        <RadzenLegend Position="LegendPosition.Top" />
    </RadzenChart>
</RadzenStack>

@code {
    bool categoryVisible = true;
    bool categorySnap = true;
    bool categoryLabel = true;
    string categoryStroke = "#1976d2";
    double categoryStrokeWidth = 1;
    LineType categoryLineType = LineType.Dashed;

    bool valueVisible = true;
    bool valueSnap = true;
    bool valueLabel = true;
    string valueStroke = "#1976d2";
    double valueStrokeWidth = 1;
    LineType valueLineType = LineType.Dashed;

    LineType[] lineTypes = new[] { LineType.Solid, LineType.Dashed, LineType.Dotted };

    class DataItem
    {
        public int Year { get; set; }
        public double Capacity { get; set; }
    }

    string FormatGW(object value) => $"{((double)value).ToString("N0", CultureInfo.InvariantCulture)} GW";

    // Approximate global installed capacity, gigawatts (GW). Source: IRENA.
    DataItem[] solar = new[]
    {
        new DataItem { Year = 2005, Capacity = 5 },     new DataItem { Year = 2007, Capacity = 9 },
        new DataItem { Year = 2009, Capacity = 23 },    new DataItem { Year = 2011, Capacity = 73 },
        new DataItem { Year = 2013, Capacity = 138 },   new DataItem { Year = 2015, Capacity = 228 },
        new DataItem { Year = 2017, Capacity = 391 },   new DataItem { Year = 2019, Capacity = 587 },
        new DataItem { Year = 2021, Capacity = 849 },   new DataItem { Year = 2023, Capacity = 1419 },
    };

    DataItem[] wind = new[]
    {
        new DataItem { Year = 2005, Capacity = 59 },    new DataItem { Year = 2007, Capacity = 94 },
        new DataItem { Year = 2009, Capacity = 159 },   new DataItem { Year = 2011, Capacity = 238 },
        new DataItem { Year = 2013, Capacity = 320 },   new DataItem { Year = 2015, Capacity = 433 },
        new DataItem { Year = 2017, Capacity = 540 },   new DataItem { Year = 2019, Capacity = 650 },
        new DataItem { Year = 2021, Capacity = 825 },   new DataItem { Year = 2023, Capacity = 1017 },
    };
}
