Skip to content

Commit cc1034a

Browse files
author
Mischa Spelt
committed
Updated demo 1 and documentation
1 parent 6630a03 commit cc1034a

File tree

2 files changed

+124
-124
lines changed

2 files changed

+124
-124
lines changed

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

Lines changed: 121 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,166 @@
11
<LineChart @ref="lineChart" Width="500" Height="200" />
22

33
<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>
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>
99
</div>
1010

1111
@code {
12-
private LineChart lineChart = default!;
13-
private LineChartOptions lineChartOptions = default!;
14-
private ChartData chartData = default!;
12+
private LineChart lineChart = default!;
13+
private LineChartOptions lineChartOptions = default!;
14+
private ChartData chartData = default!;
1515

16-
private int datasetsCount;
17-
private int labelsCount;
16+
private int datasetsCount;
17+
private int labelsCount;
1818

19-
private Random random = new();
19+
private Random random = new();
2020

21-
protected override void OnInitialized()
22-
{
23-
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
24-
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
25-
}
21+
protected override void OnInitialized()
22+
{
23+
chartData = new ChartData { Labels = GetDefaultDataLabels( 6 ), Datasets = GetDefaultDataSets( 3 ) };
24+
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
25+
lineChartOptions.Scales.Y!.Max = 200;
26+
}
2627

27-
protected override async Task OnAfterRenderAsync(bool firstRender)
28+
protected override async Task OnAfterRenderAsync( bool firstRender )
29+
{
30+
if( firstRender )
2831
{
29-
if (firstRender)
30-
{
31-
await lineChart.InitializeAsync(chartData, lineChartOptions);
32-
}
33-
await base.OnAfterRenderAsync(firstRender);
32+
await lineChart.InitializeAsync( chartData, lineChartOptions );
3433
}
34+
await base.OnAfterRenderAsync( firstRender );
35+
}
3536

36-
private async Task RandomizeAsync()
37-
{
38-
if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;
37+
private async Task RandomizeAsync()
38+
{
39+
if( chartData is null || chartData.Datasets is null || !chartData.Datasets.Any() ) return;
3940

40-
var newDatasets = new List<IChartDataset>();
41+
var newDatasets = new List<IChartDataset>();
4142

42-
foreach (var dataset in chartData.Datasets)
43+
foreach( var dataset in chartData.Datasets )
44+
{
45+
if( dataset is LineChartDataset lineChartDataset
46+
&& lineChartDataset is not null
47+
&& lineChartDataset.Data is not null )
48+
{
49+
var count = lineChartDataset.Data.Count;
50+
51+
var newData = new List<double?>();
52+
for( var i = 0; i < count; i++ )
4353
{
44-
if (dataset is LineChartDataset lineChartDataset
45-
&& lineChartDataset is not null
46-
&& lineChartDataset.Data is not null)
47-
{
48-
var count = lineChartDataset.Data.Count;
49-
50-
var newData = new List<double?>();
51-
for (var i = 0; i < count; i++)
52-
{
53-
newData.Add(random.Next(200));
54-
}
55-
56-
lineChartDataset.Data = newData;
57-
newDatasets.Add(lineChartDataset);
58-
}
54+
newData.Add( random.Next( 200 ) );
5955
}
6056

61-
chartData.Datasets = newDatasets;
62-
63-
await lineChart.UpdateAsync(chartData, lineChartOptions);
57+
lineChartDataset.Data = newData;
58+
newDatasets.Add( lineChartDataset );
59+
}
6460
}
6561

66-
private async Task AddDatasetAsync()
67-
{
68-
if (chartData is null || chartData.Datasets is null) return;
62+
chartData.Datasets = newDatasets;
6963

70-
var chartDataset = GetRandomLineChartDataset();
71-
chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);
72-
}
64+
await lineChart.UpdateValuesAsync( chartData );
65+
}
7366

74-
private async Task AddDataAsync()
75-
{
76-
if (chartData is null || chartData.Datasets is null)
77-
return;
67+
private async Task AddDatasetAsync()
68+
{
69+
if( chartData is null || chartData.Datasets is null ) return;
7870

79-
var data = new List<IChartDatasetData>();
80-
foreach (var dataset in chartData.Datasets)
81-
{
82-
if (dataset is LineChartDataset lineChartDataset)
83-
data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));
84-
}
71+
var chartDataset = GetRandomLineChartDataset();
72+
chartData = await lineChart.AddDatasetAsync( chartData, chartDataset, lineChartOptions );
73+
}
8574

86-
chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);
87-
}
75+
private async Task AddDataAsync()
76+
{
77+
if( chartData is null || chartData.Datasets is null )
78+
return;
8879

89-
private async Task ShowHorizontalLineChartAsync()
80+
var data = new List<IChartDatasetData>();
81+
foreach( var dataset in chartData.Datasets )
9082
{
91-
lineChartOptions.IndexAxis = "y";
92-
await lineChart.UpdateAsync(chartData, lineChartOptions);
83+
if( dataset is LineChartDataset lineChartDataset )
84+
data.Add( new LineChartDatasetData( lineChartDataset.Label, random.Next( 200 ) ) );
9385
}
9486

95-
private async Task ShowVerticalLineChartAsync()
96-
{
97-
lineChartOptions.IndexAxis = "x";
98-
await lineChart.UpdateAsync(chartData, lineChartOptions);
99-
}
87+
chartData = await lineChart.AddDataAsync( chartData, GetNextDataLabel(), data );
88+
}
10089

101-
#region Data Preparation
90+
private async Task ShowHorizontalLineChartAsync()
91+
{
92+
lineChartOptions.IndexAxis = "y";
93+
await lineChart.UpdateAsync( chartData, lineChartOptions );
94+
}
10295

103-
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
104-
{
105-
var datasets = new List<IChartDataset>();
96+
private async Task ShowVerticalLineChartAsync()
97+
{
98+
lineChartOptions.IndexAxis = "x";
99+
await lineChart.UpdateAsync( chartData, lineChartOptions );
100+
}
106101

107-
for (var index = 0; index < numberOfDatasets; index++)
108-
{
109-
datasets.Add(GetRandomLineChartDataset());
110-
}
102+
#region Data Preparation
111103

112-
return datasets;
113-
}
104+
private List<IChartDataset> GetDefaultDataSets( int numberOfDatasets )
105+
{
106+
var datasets = new List<IChartDataset>();
114107

115-
private LineChartDataset GetRandomLineChartDataset()
108+
for( var index = 0; index < numberOfDatasets; index++ )
116109
{
117-
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
118-
119-
datasetsCount += 1;
120-
121-
return new LineChartDataset
122-
{
123-
Label = $"Team {datasetsCount}",
124-
Data = GetRandomData(),
125-
BackgroundColor = c.ToRgbString(),
126-
BorderColor = c.ToRgbString(),
127-
BorderWidth = 2,
128-
HoverBorderWidth = 4,
129-
// PointBackgroundColor = c.ToRgbString(),
130-
// PointRadius = 0, // hide points
131-
// PointHoverRadius = 4,
132-
};
110+
datasets.Add( GetRandomLineChartDataset() );
133111
}
134112

135-
private List<double?> GetRandomData()
113+
return datasets;
114+
}
115+
116+
private LineChartDataset GetRandomLineChartDataset()
117+
{
118+
var c = ColorUtility.CategoricalTwelveColors[ datasetsCount ].ToColor();
119+
120+
datasetsCount += 1;
121+
122+
return new LineChartDataset
123+
{
124+
Label = $"Team {datasetsCount}",
125+
Data = GetRandomData(),
126+
BackgroundColor = c.ToRgbString(),
127+
BorderColor = c.ToRgbString(),
128+
BorderWidth = 2,
129+
HoverBorderWidth = 4,
130+
// PointBackgroundColor = c.ToRgbString(),
131+
// PointRadius = 0, // hide points
132+
// PointHoverRadius = 4,
133+
};
134+
}
135+
136+
private List<double?> GetRandomData()
137+
{
138+
var data = new List<double?>();
139+
for( var index = 0; index < labelsCount; index++ )
136140
{
137-
var data = new List<double?>();
138-
for (var index = 0; index < labelsCount; index++)
139-
{
140-
data.Add(random.Next(200));
141-
}
142-
143-
return data;
141+
data.Add( random.Next( 200 ) );
144142
}
145143

146-
private List<string> GetDefaultDataLabels(int numberOfLabels)
147-
{
148-
var labels = new List<string>();
149-
for (var index = 0; index < numberOfLabels; index++)
150-
{
151-
labels.Add(GetNextDataLabel());
152-
}
144+
return data;
145+
}
153146

154-
return labels;
155-
}
156-
157-
private string GetNextDataLabel()
147+
private List<string> GetDefaultDataLabels( int numberOfLabels )
148+
{
149+
var labels = new List<string>();
150+
for( var index = 0; index < numberOfLabels; index++ )
158151
{
159-
labelsCount += 1;
160-
return $"Day {labelsCount}";
152+
labels.Add( GetNextDataLabel() );
161153
}
162154

163-
#endregion Data Preparation
155+
return labels;
156+
}
157+
158+
private string GetNextDataLabel()
159+
{
160+
labelsCount += 1;
161+
return $"Day {labelsCount}";
162+
}
163+
164+
#endregion Data Preparation
164165

165166
}

‎blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs

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

7676
/// <summary>
77-
/// Update chart.
77+
/// Update chart by reapplying all chart data and options. If animation is enabled, this will animate the datasets from scratch.
7878
/// </summary>
7979
/// <param name="chartData"></param>
8080
/// <param name="chartOptions"></param>
@@ -94,10 +94,9 @@ public virtual async Task UpdateAsync( ChartData chartData, IChartOptions chartO
9494
}
9595

9696
/// <summary>
97-
/// Update chart.
97+
/// Update only data labels and values. If animation is enabled, this will animate the datapoints from their previous values, but changes to the options will not be applied.
9898
/// </summary>
99-
/// <param name="chartData"></param>
100-
/// <param name="chartOptions"></param>
99+
/// <param name="chartData">The updated chart data. Only dataset labels and values will be applied.</param>
101100
public virtual async Task UpdateValuesAsync( ChartData chartData )
102101
{
103102
if( chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any() )

0 commit comments

Comments
 (0)