@page "/"
@using Radzen
@using Radzen.Blazor
@using System.Globalization


<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<h2>A Radzen chart:</h2>

<RadzenChart SeriesClick=@OnSeriesClick style="height: 400px">
    <RadzenBarSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
        <RadzenSeriesDataLabels Visible="@showDataLabels" />
    </RadzenBarSeries>
    <RadzenBarSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue">
        <RadzenSeriesDataLabels Visible="@showDataLabels" />
    </RadzenBarSeries>
    <RadzenValueAxis Formatter="@FormatAsUSD">
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Revenue in USD" />
    </RadzenValueAxis>
    <RadzenBarOptions Radius="5" />
</RadzenChart>


@code {
    bool showDataLabels = false;

    void OnSeriesClick(SeriesClickEventArgs args)
    {
        
    }

    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    DataItem[] revenue2023 = new DataItem[]
    {
    new DataItem
    {
        Quarter = "Q1",
        Revenue = 234000
    },
    new DataItem
    {
        Quarter = "Q2",
        Revenue = 284000
    },
    new DataItem
    {
        Quarter = "Q3",
        Revenue = 274000
    },
    new DataItem
    {
        Quarter = "Q4",
        Revenue = 294000
    },
    };

    DataItem[] revenue2024 = new DataItem[] {
    new DataItem
    {
    Quarter = "Q1",
    Revenue = 254000
    },
    new DataItem
    {
    Quarter = "Q2",
    Revenue = 324000
    },
    new DataItem
    {
    Quarter = "Q3",
    Revenue = 354000
    },
    new DataItem
    {
    Quarter = "Q4",
    Revenue = 394000
    },

    };
}