@using Color = System.Drawing.Color @* *@ @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; private int datasetsCount = 0; private int labelsCount = 0; private Random random = new(); protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(31), 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 < labelsCount; index++) { data.Add(random.Next(200)); } return data; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); } return labels; } private string GetNextDataLabel() { labelsCount += 1; return $"روز {labelsCount}"; } #endregion Data Preparation }