Skip to content

Commit 2fbd772

Browse files
mhspeltMischa Speltgvreddy04
authored
UpdateValuesAsync (#832)
* Added UpdateValuesAsync that will only update chart values but leave the rest of the configuration alone (cherry picked from commit 75ab692) * Updated demo 1 and documentation * js, charts base class, and LineChart_Demo_01 demo - code cleanup * Line chart - demos and docs updated --------- Co-authored-by: Mischa Spelt <mischa.spelt@talumis.com> Co-authored-by: Vikram Reddy <gvreddy04@gmail.com>
1 parent e5e8ec7 commit 2fbd772

File tree

9 files changed

+217
-43
lines changed

9 files changed

+217
-43
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
<LineChart @ref="lineChart" Width="500" Height="200" />
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" Width="800" />
3+
</div>
24

35
<div class="mt-5">
4-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
5-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
6-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
7-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
8-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
6+
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
7+
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()" Disabled="@(datasetsCount >= 12)"> Add Dataset </Button>
8+
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
9+
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
10+
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
911
</div>
1012

1113
@code {
@@ -22,6 +24,7 @@
2224
{
2325
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
2426
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
27+
lineChartOptions.Scales.Y!.Max = 250;
2528
}
2629

2730
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -60,7 +63,7 @@
6063

6164
chartData.Datasets = newDatasets;
6265

63-
await lineChart.UpdateAsync(chartData, lineChartOptions);
66+
await lineChart.UpdateValuesAsync(chartData);
6467
}
6568

6669
private async Task AddDatasetAsync()

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<LineChart @ref="lineChart" />
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" Width="800" />
3+
</div>
24

35
@code {
46
private LineChart lineChart = default!;

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<LineChart @ref="lineChart" Width="800" />
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" Width="800" />
3+
</div>
24

35
@code {
46
private LineChart lineChart = default!;

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<LineChart @ref="lineChart" Width="800" />
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" Width="800" />
3+
</div>
24

35
<div class="mt-5">
46
<Button Color="ButtonColor.Primary" Type="ButtonType.Button" Size="ButtonSize.Small" @onclick="UpdateIndiaNextOverRunsAsync"> India Next Over </Button>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<LineChart @ref="lineChart" Width="800" />
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" Width="800" />
3+
</div>
24

35
@code {
46
private LineChart lineChart = default!;

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<LineChart @ref="lineChart" Width="500" Height="200" />
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" Width="800" />
3+
</div>
24

35
<div class="mt-5">
46
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>

‎blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,22 +74,43 @@ public async Task ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, U
7474
}
7575

7676
/// <summary>
77-
/// Update chart.
77+
/// Update chart by reapplying all chart data and options.
78+
/// If animation is enabled, this will animate the datasets from scratch.
7879
/// </summary>
7980
/// <param name="chartData"></param>
8081
/// <param name="chartOptions"></param>
8182
public virtual async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions)
8283
{
8384
if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any())
8485
{
85-
var _data = GetChartDataObject(chartData);
86+
var data = GetChartDataObject(chartData);
87+
88+
if (chartType == ChartType.Bar)
89+
await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions);
90+
else if (chartType == ChartType.Line)
91+
await JSRuntime.InvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions);
92+
else
93+
await JSRuntime.InvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions);
94+
}
95+
}
96+
97+
/// <summary>
98+
/// Update only data labels and values. If animation is enabled, this will animate the datapoints.
99+
/// Changes to the options will not be applied.
100+
/// </summary>
101+
/// <param name="chartData">The updated chart data. Only dataset labels and values will be applied.</param>
102+
public virtual async Task UpdateValuesAsync(ChartData chartData)
103+
{
104+
if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any())
105+
{
106+
var data = GetChartDataObject(chartData);
86107

87108
if (chartType == ChartType.Bar)
88-
await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), _data, (BarChartOptions)chartOptions);
109+
await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.updateDataValues", Id, data);
89110
else if (chartType == ChartType.Line)
90-
await JSRuntime.InvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), _data, (LineChartOptions)chartOptions);
111+
await JSRuntime.InvokeVoidAsync("window.blazorChart.line.updateDataValues", Id, data);
91112
else
92-
await JSRuntime.InvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), _data, chartOptions);
113+
await JSRuntime.InvokeVoidAsync("window.blazorChart.updateDataValues", Id, data);
93114
}
94115
}
95116

‎blazorbootstrap/wwwroot/blazor.bootstrap.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -845,6 +845,23 @@ window.blazorChart = {
845845
console.warn(`The chart is not initialized. Initialize it and then call update.`);
846846
}
847847
},
848+
updateDataValues: (elementId, data) => {
849+
let chart = window.blazorChart.line.get(elementId);
850+
if (chart) {
851+
chart.data.datasets.splice(data.datasets.length);
852+
853+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
854+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
855+
chart.data.labels = data.labels;
856+
}
857+
858+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
859+
chart.data.datasets.push(data.datasets[datasetIndex]);
860+
}
861+
862+
chart.update();
863+
}
864+
}
848865
}
849866

850867
window.blazorChart.bar = {
@@ -957,6 +974,23 @@ window.blazorChart.bar = {
957974
console.warn(`The chart is not initialized. Initialize it and then call update.`);
958975
}
959976
},
977+
updateDataValues: (elementId, data) => {
978+
let chart = window.blazorChart.line.get(elementId);
979+
if (chart) {
980+
chart.data.datasets.splice(data.datasets.length);
981+
982+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
983+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
984+
chart.data.labels = data.labels;
985+
}
986+
987+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
988+
chart.data.datasets.push(data.datasets[datasetIndex]);
989+
}
990+
991+
chart.update();
992+
}
993+
}
960994
}
961995

962996
window.blazorChart.doughnut = {
@@ -1075,6 +1109,23 @@ window.blazorChart.doughnut = {
10751109
console.warn(`The chart is not initialized. Initialize it and then call update.`);
10761110
}
10771111
},
1112+
updateDataValues: (elementId, data) => {
1113+
let chart = window.blazorChart.line.get(elementId);
1114+
if (chart) {
1115+
chart.data.datasets.splice(data.datasets.length);
1116+
1117+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
1118+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
1119+
chart.data.labels = data.labels;
1120+
}
1121+
1122+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
1123+
chart.data.datasets.push(data.datasets[datasetIndex]);
1124+
}
1125+
1126+
chart.update();
1127+
}
1128+
}
10781129
}
10791130

10801131
window.blazorChart.line = {
@@ -1227,6 +1278,23 @@ window.blazorChart.line = {
12271278
console.warn(`The chart is not initialized. Initialize it and then call update.`);
12281279
}
12291280
},
1281+
updateDataValues: (elementId, data) => {
1282+
let chart = window.blazorChart.line.get(elementId);
1283+
if (chart) {
1284+
chart.data.datasets.splice(data.datasets.length);
1285+
1286+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
1287+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
1288+
chart.data.labels = data.labels;
1289+
}
1290+
1291+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
1292+
chart.data.datasets.push(data.datasets[datasetIndex]);
1293+
}
1294+
1295+
chart.update();
1296+
}
1297+
}
12301298
}
12311299

12321300
window.blazorChart.pie = {
@@ -1345,6 +1413,23 @@ window.blazorChart.pie = {
13451413
console.warn(`The chart is not initialized. Initialize it and then call update.`);
13461414
}
13471415
},
1416+
updateDataValues: (elementId, data) => {
1417+
let chart = window.blazorChart.line.get(elementId);
1418+
if (chart) {
1419+
chart.data.datasets.splice(data.datasets.length);
1420+
1421+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
1422+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
1423+
chart.data.labels = data.labels;
1424+
}
1425+
1426+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
1427+
chart.data.datasets.push(data.datasets[datasetIndex]);
1428+
}
1429+
1430+
chart.update();
1431+
}
1432+
}
13481433
}
13491434

13501435
window.blazorChart.polarArea = {
@@ -1464,6 +1549,23 @@ window.blazorChart.polarArea = {
14641549
console.warn(`The chart is not initialized. Initialize it and then call update.`);
14651550
}
14661551
},
1552+
updateDataValues: (elementId, data) => {
1553+
let chart = window.blazorChart.line.get(elementId);
1554+
if (chart) {
1555+
chart.data.datasets.splice(data.datasets.length);
1556+
1557+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
1558+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
1559+
chart.data.labels = data.labels;
1560+
}
1561+
1562+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
1563+
chart.data.datasets.push(data.datasets[datasetIndex]);
1564+
}
1565+
1566+
chart.update();
1567+
}
1568+
}
14671569
}
14681570

14691571
window.blazorChart.radar = {
@@ -1582,6 +1684,23 @@ window.blazorChart.radar = {
15821684
console.warn(`The chart is not initialized. Initialize it and then call update.`);
15831685
}
15841686
},
1687+
updateDataValues: (elementId, data) => {
1688+
let chart = window.blazorChart.line.get(elementId);
1689+
if (chart) {
1690+
chart.data.datasets.splice(data.datasets.length);
1691+
1692+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
1693+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
1694+
chart.data.labels = data.labels;
1695+
}
1696+
1697+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
1698+
chart.data.datasets.push(data.datasets[datasetIndex]);
1699+
}
1700+
1701+
chart.update();
1702+
}
1703+
}
15851704
}
15861705

15871706
window.blazorChart.scatter = {
@@ -1700,4 +1819,21 @@ window.blazorChart.scatter = {
17001819
console.warn(`The chart is not initialized. Initialize it and then call update.`);
17011820
}
17021821
},
1822+
updateDataValues: (elementId, data) => {
1823+
let chart = window.blazorChart.line.get(elementId);
1824+
if (chart) {
1825+
chart.data.datasets.splice(data.datasets.length);
1826+
1827+
for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
1828+
chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
1829+
chart.data.labels = data.labels;
1830+
}
1831+
1832+
for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
1833+
chart.data.datasets.push(data.datasets[datasetIndex]);
1834+
}
1835+
1836+
chart.update();
1837+
}
1838+
}
17031839
}

0 commit comments

Comments
 (0)