Skip to content

Commit 79e4a55

Browse files
gvreddy04gvreddy04
authored
Demos updated (#6)
1 parent fd3d780 commit 79e4a55

21 files changed

Lines changed: 401 additions & 20 deletions

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_01_Examples.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<BarChart @ref="barChart" />
1+
<BarChart @ref="barChart" Width="600" />
22

33
<div class="mt-5">
44
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<BarChart @ref="barChart" />
1+
<BarChart @ref="barChart" Width="600" />
22

33
@code {
44
private BarChart barChart = default!;

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<BarChart @ref="barChart" />
1+
<BarChart @ref="barChart" Width="600" />
22

33
@code {
44
private BarChart barChart = default!;

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<BarChart @ref="barChart" />
1+
<BarChart @ref="barChart" Width="600" />
22

33
@code {
44
private BarChart barChart = default!;

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_05_Locale.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<BarChart @ref="barChart" />
1+
<BarChart @ref="barChart" Width="600" />
22

33
@code {
44
private BarChart barChart = default!;

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<DoughnutChart @ref="doughnutChart" Width="500" />
1+
<DoughnutChart @ref="doughnutChart" Width="600" />
22

33
<div class="mt-5">
44
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<DoughnutChart @ref="doughnutChart" Width="500" />
1+
<DoughnutChart @ref="doughnutChart" Width="600" />
22

33
@code {
44
private DoughnutChart doughnutChart = default!;

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_01_BarChart.razor‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<BarChart @ref="barChart" Width="415" Height="207" />
2+
3+
@code {
4+
private BarChart barChart = default!;
5+
private BarChartOptions barChartOptions = default!;
6+
private ChartData chartData = default!;
7+
8+
private int datasetsCount = 0;
9+
private int labelsCount = 0;
10+
private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
11+
private Random random = new();
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
16+
barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
17+
}
18+
19+
protected override async Task OnAfterRenderAsync(bool firstRender)
20+
{
21+
if (firstRender)
22+
{
23+
await barChart.InitializeAsync(chartData, barChartOptions);
24+
}
25+
await base.OnAfterRenderAsync(firstRender);
26+
}
27+
28+
#region Data Preparation
29+
30+
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
31+
{
32+
var datasets = new List<IChartDataset>();
33+
34+
for (var index = 0; index < numberOfDatasets; index++)
35+
{
36+
datasets.Add(GetRandomBarChartDataset());
37+
}
38+
39+
return datasets;
40+
}
41+
42+
private BarChartDataset GetRandomBarChartDataset()
43+
{
44+
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
45+
46+
datasetsCount += 1;
47+
48+
return new BarChartDataset()
49+
{
50+
Label = $"Product {datasetsCount}",
51+
Data = GetRandomData(),
52+
BackgroundColor = new List<string> { c.ToRgbString() },
53+
BorderColor = new List<string> { c.ToRgbString() },
54+
BorderWidth = new List<double> { 0 },
55+
};
56+
}
57+
58+
private List<double> GetRandomData()
59+
{
60+
var data = new List<double>();
61+
for (var index = 0; index < labelsCount; index++)
62+
{
63+
data.Add(random.Next(200));
64+
}
65+
66+
return data;
67+
}
68+
69+
private List<string> GetDefaultDataLabels(int numberOfLabels)
70+
{
71+
var labels = new List<string>();
72+
for (var index = 0; index < numberOfLabels; index++)
73+
{
74+
labels.Add(GetNextDataLabel());
75+
}
76+
77+
return labels;
78+
}
79+
80+
private string GetNextDataLabel()
81+
{
82+
labelsCount += 1;
83+
return months[labelsCount - 1];
84+
}
85+
86+
#endregion Data Preparation
87+
}

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_02_DoughnutChart.razor‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<DoughnutChart @ref="doughnutChart" Width="415" Height="415" />
2+
3+
@code {
4+
private DoughnutChart doughnutChart = default!;
5+
private DoughnutChartOptions doughnutChartOptions = default!;
6+
private ChartData chartData = default!;
7+
private string[]? backgroundColors;
8+
9+
private int datasetsCount = 0;
10+
private int dataLabelsCount = 0;
11+
12+
private Random random = new();
13+
14+
protected override void OnInitialized()
15+
{
16+
backgroundColors = ColorUtility.CategoricalTwelveColors;
17+
chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };
18+
19+
doughnutChartOptions = new();
20+
doughnutChartOptions.Responsive = true;
21+
doughnutChartOptions.Plugins.Title!.Text = "2022 - Sales";
22+
doughnutChartOptions.Plugins.Title.Display = true;
23+
}
24+
25+
protected override async Task OnAfterRenderAsync(bool firstRender)
26+
{
27+
if (firstRender)
28+
{
29+
await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
30+
}
31+
await base.OnAfterRenderAsync(firstRender);
32+
}
33+
34+
#region Data Preparation
35+
36+
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
37+
{
38+
var datasets = new List<IChartDataset>();
39+
40+
for (var index = 0; index < numberOfDatasets; index++)
41+
{
42+
datasets.Add(GetRandomDoughnutChartDataset());
43+
}
44+
45+
return datasets;
46+
}
47+
48+
private DoughnutChartDataset GetRandomDoughnutChartDataset()
49+
{
50+
datasetsCount += 1;
51+
return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
52+
}
53+
54+
private List<double> GetRandomData()
55+
{
56+
var data = new List<double>();
57+
for (var index = 0; index < dataLabelsCount; index++)
58+
{
59+
data.Add(random.Next(0, 100));
60+
}
61+
62+
return data;
63+
}
64+
65+
private List<string> GetRandomBackgroundColors()
66+
{
67+
var colors = new List<string>();
68+
for (var index = 0; index < dataLabelsCount; index++)
69+
{
70+
colors.Add(backgroundColors![index]);
71+
}
72+
73+
return colors;
74+
}
75+
76+
private List<string> GetDefaultDataLabels(int numberOfLabels)
77+
{
78+
var labels = new List<string>();
79+
for (var index = 0; index < numberOfLabels; index++)
80+
{
81+
labels.Add(GetNextDataLabel());
82+
dataLabelsCount += 1;
83+
}
84+
85+
return labels;
86+
}
87+
88+
private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";
89+
90+
private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];
91+
92+
#endregion Data Preparation
93+
}

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_03_LineChart.razor‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<LineChart @ref="lineChart" Width="415" Height="207" />
2+
3+
@code {
4+
private LineChart lineChart = default!;
5+
private LineChartOptions lineChartOptions = default!;
6+
private ChartData chartData = default!;
7+
8+
private int datasetsCount;
9+
private int labelsCount;
10+
11+
private Random random = new();
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
16+
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
17+
}
18+
19+
protected override async Task OnAfterRenderAsync(bool firstRender)
20+
{
21+
if (firstRender)
22+
{
23+
await lineChart.InitializeAsync(chartData, lineChartOptions);
24+
}
25+
await base.OnAfterRenderAsync(firstRender);
26+
}
27+
28+
#region Data Preparation
29+
30+
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
31+
{
32+
var datasets = new List<IChartDataset>();
33+
34+
for (var index = 0; index < numberOfDatasets; index++)
35+
{
36+
datasets.Add(GetRandomLineChartDataset());
37+
}
38+
39+
return datasets;
40+
}
41+
42+
private LineChartDataset GetRandomLineChartDataset()
43+
{
44+
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
45+
46+
datasetsCount += 1;
47+
48+
return new LineChartDataset
49+
{
50+
Label = $"Team {datasetsCount}",
51+
Data = GetRandomData(),
52+
BackgroundColor = new List<string> { c.ToRgbString() },
53+
BorderColor = new List<string> { c.ToRgbString() },
54+
BorderWidth = new List<double> { 2 },
55+
HoverBorderWidth = new List<double> { 4 },
56+
PointBackgroundColor = new List<string> { c.ToRgbString() },
57+
PointRadius = new List<int> { 0 }, // hide points
58+
PointHoverRadius = new List<int> { 4 }
59+
};
60+
}
61+
62+
private List<double> GetRandomData()
63+
{
64+
var data = new List<double>();
65+
for (var index = 0; index < labelsCount; index++)
66+
{
67+
data.Add(random.Next(200));
68+
}
69+
70+
return data;
71+
}
72+
73+
private List<string> GetDefaultDataLabels(int numberOfLabels)
74+
{
75+
var labels = new List<string>();
76+
for (var index = 0; index < numberOfLabels; index++)
77+
{
78+
labels.Add(GetNextDataLabel());
79+
}
80+
81+
return labels;
82+
}
83+
84+
private string GetNextDataLabel()
85+
{
86+
labelsCount += 1;
87+
return $"Day {labelsCount}";
88+
}
89+
90+
#endregion Data Preparation
91+
92+
}

0 commit comments

Comments
 (0)