BarCustomization.razor

@page "/bullet-chart/bar-customization"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Newtonsoft.Json;
@using Newtonsoft.Json.Linq;
@using Syncfusion.Blazor
@inject NavigationManager NavigationManager

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a customization of feature bar and comparative bar type in terms of color and width.</p>
</SampleDescription>
<ActionDescription>
    <p>Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart.</p>
</ActionDescription>

<div class="row">
    <div class="control-section col-md-8">
        <SfBulletChart DataSource="@BulletChartData" Type="@Type" ValueField="ActualValue" Theme="@theme" TargetField="Targetvalue" Minimum="0" Maximum="300" Interval="50"
                       ValueFill="@valueFillColor" TargetColor="@targetFillColor" Title="New Customers" Subtitle="in Thousands" TitlePosition="TextPosition.Left">
            <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
            <BulletChartRangeCollection>
                <BulletChartRange End="150"> </BulletChartRange>
                <BulletChartRange End="250"></BulletChartRange>
                <BulletChartRange End="300"></BulletChartRange>
            </BulletChartRangeCollection>
        </SfBulletChart>
    </div>
    <div class="col-md-4 property-section">
        <table style="width: 100%">
            <tr style="height:50px"><th>Properties</th></tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Actual Value:</div>
                </td>
                <td style="width: 40%;">
                    <div>
                        <SfSlider @bind-Value="@actualValue" Min="0" Max="300" Step="10">
                            <SliderTooltip IsVisible="true"></SliderTooltip>
                            <SliderEvents TValue="double" OnChange="ChangeActualValue"></SliderEvents>
                        </SfSlider>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Target Value:</div>
                </td>
                <td style="width: 40%;">
                    <div>
                        <SfSlider @bind-Value="@targetValue" Min="0" Max="300" Step="10">
                            <SliderTooltip IsVisible="true"></SliderTooltip>
                            <SliderEvents TValue="double" OnChange="ChangeTagetValue"></SliderEvents>
                        </SfSlider>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    Feature Bar Type:
                </td>
                <td style="width: 40%;">
                    <SfDropDownList TValue="string" Placeholder="Rect" TItem="Data" DataSource="@DropDowmData" @bind-Value="@Value">
                        <DropDownListFieldSettings Value="ID"></DropDownListFieldSettings>
                        <DropDownListEvents TValue="string" TItem="Data" ValueChange="ChangeType"></DropDownListEvents>
                    </SfDropDownList>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Feature Bar Color:</div>
                </td>
                <td style="width: 40%;">
                    <div>
                        <SfColorPicker Value="@valueFillColor" Mode="ColorPickerMode.Palette" ValueChange="FeatureBarColor"></SfColorPicker>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Target Color:</div>
                </td>
                <td style="width: 40%;">
                    <div>
                        <SfColorPicker Value="@targetFillColor" Mode="ColorPickerMode.Palette" ValueChange="TargetColor"></SfColorPicker>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

@code{
    private double targetValue { get; set; } = 250;
    private double actualValue { get; set; } = 270;

    FeatureType Type;

    private string valueFillColor { get; set; } = "#000000";
    private string targetFillColor { get; set; } = "#000000";
    public GetCurrentValue ColorValue { get; set; }

    string Value = "Rect";
    public class GetCurrentValue
    {
        public string hex { get; set; }
        public string rgba { get; set; }
    }

    public void FeatureBarColor(ColorPickerEventArgs args)
    {
        this.valueFillColor = args.CurrentValue.Hex;
    }

    public void TargetColor(ColorPickerEventArgs args)
    {
        this.targetFillColor = args.CurrentValue.Hex;
    }


    public void ChangeActualValue(SliderChangeEventArgs<double> args)
    {

        BulletChartData = new List<ChartData>
        {
            new ChartData { ActualValue = args.Value, Targetvalue = this.BulletChartData[0].Targetvalue }
        };
    }

    public void ChangeTagetValue(SliderChangeEventArgs<double> args)
    {

        BulletChartData = new List<ChartData>
        {
            new ChartData { ActualValue = this.BulletChartData[0].ActualValue, Targetvalue = args.Value }
        };
    }

    public class Data
    {
        public string ID { get; set; }
    }

    private List<Data> DropDowmData = new List<Data>()
    {
        new Data(){ ID= "Rect"},
        new Data(){ ID= "Dot"}
    };

    private void ChangeType(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Data> args)
    {
        this.Type = (FeatureType)Enum.Parse(typeof(FeatureType), args.Value, true);
        StateHasChanged();
    }

    public class ChartData
    {
        public double ActualValue { get; set; }
        public double Targetvalue { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
    {
            new ChartData { ActualValue = 270, Targetvalue = 250 }
    };

    private string CurrentUri;
    private Theme theme { get; set; }
    protected override void OnInitialized()
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            theme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            theme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            theme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            theme = Theme.HighContrast;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            theme = Theme.Tailwind;
        }
        else
        {
            theme = Theme.Bootstrap4;
        }
    }
}