Chart options to control the chart's animation #171

vikramlearning · Jul 26, 2023 · e7647cd · e7647cd
1 parent 6ed081d
commit e7647cd
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 30 deletions.
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
@@ -7,21 +7,19 @@
     private LineChart lineChart;
     private LineChartOptions lineChartOptions;
     private ChartData chartData;
-    private List<string> chartXLabels;
-    private List<string> chartYLabels;
+    private List<string> labels;
 
-    private List<double> indiaRuns = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 };
-    private List<double> englandRuns = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 };
+    private List<double> indiaRunsArray = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 };
+    private List<double> 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<string> { "111", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" };
-        chartYLabels = new List<string> { "10", "20", "30", "40", "50", "60", "70", "80", "90", "100", "110", "120", "130", "140", "150", "160", "170", "180", "190", "200" };
+        labels = new List<string> { "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
@@ -60,6 +60,9 @@ public override async Task<ChartData> 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<ChartData> 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<LineChartDataset>();
-        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<LineChartDataset>();
-        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
@@ -5,12 +5,6 @@ public class ChartData
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public List<string>? Labels { get; set; }
 
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
-    public List<string>? XLabels { get; set; }
-
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
-    public List<string>? YLabels { get; set; }
-
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public List<IChartDataset>? Datasets { get; set; }
 }
diff --git 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;