diff --git a/BlazorBootstrap.Demo/Pages/Charts/Charts_Demo_04_B_LineChart_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/Charts_Demo_04_B_LineChart_Examples.razor index 447e2a72c..0d563c1b0 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/Charts_Demo_04_B_LineChart_Examples.razor +++ b/BlazorBootstrap.Demo/Pages/Charts/Charts_Demo_04_B_LineChart_Examples.razor @@ -7,21 +7,19 @@ private LineChart lineChart; private LineChartOptions lineChartOptions; private ChartData chartData; - private List chartXLabels; - private List chartYLabels; + private List labels; - private List indiaRuns = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }; - private List englandRuns = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }; + private List indiaRunsArray = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }; + private List englandRunsArray = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }; private int indiaCurrentOver = 0; private int englandCurrentOver = 0; protected override void OnInitialized() { - chartXLabels = new List { "111", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }; - chartYLabels = new List { "10", "20", "30", "40", "50", "60", "70", "80", "90", "100", "110", "120", "130", "140", "150", "160", "170", "180", "190", "200" }; + labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }; lineChartOptions = GetLineChartOptions(); - chartData = new ChartData { XLabels = chartXLabels, YLabels = chartYLabels, Datasets = GetDefaultDatasets() }; + chartData = new ChartData { Labels = labels, Datasets = GetDefaultDatasets() }; } protected override async Task OnAfterRenderAsync(bool firstRender) @@ -32,13 +30,19 @@ private async Task UpdateIndiaNextOverRunsAsync() { - chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver}", "India", indiaRuns[indiaCurrentOver]); + if (indiaCurrentOver > 0 && indiaCurrentOver > (indiaRunsArray.Count - 1)) + return; + + chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver}", "India", indiaRunsArray[indiaCurrentOver]); indiaCurrentOver++; } private async Task UpdateEnglandNextOverRunsAsync() { - chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver}", "England", englandRuns[englandCurrentOver]); + if (englandCurrentOver > 0 && englandCurrentOver > (englandRunsArray.Count - 1)) + return; + + chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver}", "England", englandRunsArray[englandCurrentOver]); englandCurrentOver++; } diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs index 4c6dc69de..27e47f6be 100644 --- a/blazorbootstrap/Components/Charts/LineChart.razor.cs +++ b/blazorbootstrap/Components/Charts/LineChart.razor.cs @@ -60,6 +60,9 @@ public override async Task AddDataAsync(ChartData chartData, string d if (chartData.Datasets is null) throw new ArgumentNullException(nameof(chartData.Datasets)); + if (chartData.Labels is null) + throw new ArgumentNullException(nameof(chartData.Labels)); + if (dataLabel is null) throw new ArgumentNullException(nameof(dataLabel)); @@ -75,6 +78,11 @@ public override async Task AddDataAsync(ChartData chartData, string d if (chartData.Datasets.Count != data.Count) throw new InvalidDataException("The chart dataset count and the new data points count do not match."); + if (chartData.Labels.Contains(dataLabel)) + throw new Exception($"{dataLabel} already exists."); + + chartData.Labels.Add(dataLabel); + foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset) @@ -124,7 +132,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch throw new ArgumentNullException(nameof(chartOptions)); var datasets = chartData.Datasets.OfType(); - var data = new { Labels = chartData.Labels, XLabels = chartData.XLabels, YLabels = chartData.YLabels, Datasets = datasets }; + var data = new { Labels = chartData.Labels, Datasets = datasets }; await JS.InvokeVoidAsync("window.blazorChart.line.initialize", ElementId, GetChartType(), data, (LineChartOptions)chartOptions); } @@ -140,7 +148,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO throw new ArgumentNullException(nameof(chartOptions)); var datasets = chartData.Datasets.OfType(); - var data = new { Labels = chartData.Labels, XLabels = chartData.XLabels, YLabels = chartData.YLabels, Datasets = datasets }; + var data = new { Labels = chartData.Labels, Datasets = datasets }; await JS.InvokeVoidAsync("window.blazorChart.line.update", ElementId, GetChartType(), data, (LineChartOptions)chartOptions); } diff --git a/blazorbootstrap/Models/Charts/ChartData.cs b/blazorbootstrap/Models/Charts/ChartData.cs index 1d9b205a8..609c9bfb1 100644 --- a/blazorbootstrap/Models/Charts/ChartData.cs +++ b/blazorbootstrap/Models/Charts/ChartData.cs @@ -5,12 +5,6 @@ public class ChartData [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public List? Labels { get; set; } - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? XLabels { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? YLabels { get; set; } - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public List? Datasets { get; set; } } \ No newline at end of file diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 689efa374..0744741c7 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -690,7 +690,13 @@ window.blazorChart.line = { addDatasetData: (elementId, dataLabel, datasetLabel, data) => { let chart = window.blazorChart.get(elementId); if (chart) { - const chartDatasets = chart.data.datasets; + const chartData = chart.data; + + if (!chartData.labels.includes(dataLabel)) + chartData.labels.push(dataLabel); + + const chartDatasets = chartData.datasets; + if (chartDatasets.length > 0) { let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === datasetLabel); if (datasetIndex > -1) { @@ -704,15 +710,17 @@ window.blazorChart.line = { let chart = window.blazorChart.get(elementId); if (chart && data) { const chartData = chart.data; - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - chartData.labels.push(dataLabel); - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - }); + if (!chartData.labels.includes(dataLabel)) { + chartData.labels.push(dataLabel); - chart.update(); + if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { + data.forEach(chartDatasetData => { + let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); + chartData.datasets[datasetIndex].data.push(chartDatasetData.data); + }); + chart.update(); + } } } }, @@ -798,16 +806,23 @@ window.blazorChart.line = { update: (elementId, type, data, options) => { let chart = window.blazorChart.line.get(elementId); if (chart) { + const chartData = chart.data; + let updatedDatasets = []; data.datasets.forEach(newDataset => { - if (chart.data && chart.data.datasets && chart.data.datasets.length > 0) { - let datasetIndex = chart.data.datasets.findIndex(chartDataset => chartDataset.oid === newDataset.oid); - if (datasetIndex > -1) { - chart.data.datasets[datasetIndex].data = newDataset.data; + if (chartData.datasets.length > 0) { + let chartDatasetIndex = chartData.datasets.findIndex(chartDataset => chartDataset.oid === newDataset.oid); + if (chartDatasetIndex > -1) { + chart.data.datasets[chartDatasetIndex].data = newDataset.data; + updatedDatasets.push(chart.data.datasets[chartDatasetIndex]); + } + else { + updatedDatasets.push(newDataset); } } else { - chart.data.datasets.push(newDataset); + updatedDatasets.push(newDataset); } + chart.data.datasets = updatedDatasets; }); chart.options = options;