@page "/chart/bar"
@inject IStringLocalizer<Bar> Localizer

<DemoBlock Title="@Localizer["BarTypeTitle"]"
           Introduction="@Localizer["BarTypeIntro"]"
           Name="BarType">
    <Chart ChartType="ChartType.Bar"
           OnInitAsync="() => OnInit(false)" OnClickDataAsync="OnClickDataAsync"
           OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BarChart" />
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-info" data-method="play" @onclick="@OnPlayChart">
                <i class="fa-solid fa-circle-play"></i>
                <span>@Localizer["BarTypeAnimationOn"]</span>
            </button>
            <button class="btn btn-info" data-method="stop" @onclick="@OnStopChart">
                <i class="fa-solid fa-circle-stop"></i>
                <span>@Localizer["BarTypeAnimationOff"]</span>
            </button>
        </div>
    </div>
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Utility.RandomData(BarChart)"><i class="fa-solid fa-chart-column"></i><span>@Localizer["BarTypeRandomData"]</span></button>
            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["BarTypeReload"]</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BarChart, ref _barDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["BarTypeAddDataSet"]</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BarChart, ref _barDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["BarTypeRemoveDataSet"]</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddData(BarChart, ref _barDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["BarTypeAddData"]</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(BarChart, ref _barDataCount)"><i class="fa-solid fa-minus"></i><span>@Localizer["BarTypeRemoveData"]</span></button>
        </div>
    </div>
    <ConsoleLogger @ref="Logger" />
</DemoBlock>

<DemoBlock Title="@Localizer["BarStackedTitle"]"
           Introduction="@Localizer["BarStackedIntro"]"
           Name="BarStacked">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitStack(true)" />
</DemoBlock>

<DemoBlock Title="@Localizer["BarTwoYAxesTitle"]"
           Introduction="@Localizer["BarTwoYAxesIntro"]"
           Name="TwoYAxes">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitTwoYAxes(true)" />
</DemoBlock>

<DemoBlock Title="@Localizer["BarAspectRatioTitle"]"
           Introduction="@Localizer["BarAspectRatioIntro"]"
           Name="BarAspectRatio">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitAspectRatio(true)" Title="Aspect Ratio Demo" Height="500px" Width="500px" />
</DemoBlock>

<DemoBlock Title="@Localizer["BarShowDataLabelTitle"]"
           Introduction="@Localizer["BarShowDataLabelIntro"]"
           Name="BarShowDataLabel">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitShowDataLabel(true)" Title="ShowDataLabel Demo" Height="500px" Width="500px" />
</DemoBlock>

<DemoBlock Title="@Localizer["BarColorSeparatelyTitle"]"
           Introduction="@Localizer["BarColorSeparatelyIntro"]"
           Name="BarColorSeparately">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitBarColorSeparately(true)" Title="BarColorSeparately Demo" Height="500px" Width="500px" />
</DemoBlock>
