moadiran/TaxPayerFull/Layout/SaleChart.razor

@using Color = System.Drawing.Color
@using Shared.DTOs

<LineChart @ref="lineChart" Width="500" Class="mb-4" />

@* <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
 *@
@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;
    public List<IdNameByCount<int>> items = new List<IdNameByCount<int>>();
    private int datasetsCount = 0;
    private int labelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        items.AddRange(new List<IdNameByCount<int>>()
        {
            new IdNameByCount<int>{ID=0,Title="1",count=10},
               new IdNameByCount<int>{ID=1,Title="2",count=5},
                 new IdNameByCount<int>{ID=2,Title="3",count=12},
                   new IdNameByCount<int>{ID=3,Title="4",count=21}
        });
        chartData = new ChartData { Labels = GetDefaultDataLabels(), Datasets = GetDefaultDataSets(1) };
        lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    // private async Task RandomizeAsync()
    // {
    //     if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

    //     var newDatasets = new List<IChartDataset>();

    //     foreach (var dataset in chartData.Datasets)
    //     {
    //         if (dataset is LineChartDataset lineChartDataset
    //             && lineChartDataset is not null
    //             && lineChartDataset.Data is not null)
    //         {
    //             var count = lineChartDataset.Data.Count;

    //             var newData = new List<double>();
    //             for (var i = 0; i < count; i++)
    //             {
    //                 newData.Add(random.Next(200));
    //             }

    //             lineChartDataset.Data = newData;
    //             newDatasets.Add(lineChartDataset);
    //         }
    //     }

    //     chartData.Datasets = newDatasets;

    //     await lineChart.UpdateAsync(chartData, lineChartOptions);
    // }

    // private async Task AddDatasetAsync()
    // {
    //     if (chartData is null || chartData.Datasets is null) return;

    //     var chartDataset = GetRandomLineChartDataset();
    //     chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);
    // }

    // private async Task AddDataAsync()
    // {
    //     if (chartData is null || chartData.Datasets is null)
    //         return;

    //     var data = new List<IChartDatasetData>();
    //     foreach (var dataset in chartData.Datasets)
    //     {
    //         if (dataset is LineChartDataset lineChartDataset)
    //             data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));
    //     }

    //     chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    // }

    // private async Task ShowHorizontalLineChartAsync()
    // {
    //     lineChartOptions.IndexAxis = "y";
    //     await lineChart.UpdateAsync(chartData, lineChartOptions);
    // }

    // private async Task ShowVerticalLineChartAsync()
    // {
    //     lineChartOptions.IndexAxis = "x";
    //     await lineChart.UpdateAsync(chartData, lineChartOptions);
    // }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomLineChartDataset());
        }

        return datasets;
    }

    private LineChartDataset GetRandomLineChartDataset()
    {
        var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new LineChartDataset()
            {
                Label = $"فروش",
                Data = GetRandomData(),
                BackgroundColor = new List<string> { c.ToRgbString() },
                BorderColor = new List<string> { c.ToRgbString() },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { c.ToRgbString() },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < items.Count; index++)
        {
           
            data.Add(decimal.ToDouble(items[index].count.Value));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels()
    {

        var labels = new List<string>();
        for (var index = 0; index < items.Count; index++)
        {
            
            labels.Add($"روز {items[index].Title}");
        }

        return labels;
    }

    // private string GetNextDataLabel()
    // {
    //     labelsCount += 1;
    //     return $"روز {labelsCount}";
    // }

    #endregion Data Preparation
}