@using Color = System.Drawing.Color @using Shared.DTOs @* *@ @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; public List> items = new List>(); private int datasetsCount = 0; private int labelsCount = 0; private Random random = new(); protected override void OnInitialized() { items.AddRange(new List>() { new IdNameByCount{ID=0,Title="1",count=10}, new IdNameByCount{ID=1,Title="2",count=5}, new IdNameByCount{ID=2,Title="3",count=12}, new IdNameByCount{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(); // 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(); // 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(); // 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 GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); 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 { c.ToRgbString() }, BorderColor = new List { c.ToRgbString() }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { c.ToRgbString() }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < items.Count; index++) { data.Add(decimal.ToDouble(items[index].count.Value)); } return data; } private List GetDefaultDataLabels() { var labels = new List(); 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 }