Skip to content

Commit ee8659e

Browse files
mosBrkrmosBrkr
authored
Merge branch 'vikramlearning:main' into main
2 parents de91e66 + f68ca7b commit ee8659e

45 files changed

Lines changed: 1004 additions & 146 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@
4141
<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
4242
<Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
4343

44+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event" />
45+
<Demo Type="typeof(BarChart_Demo_06_Click_Event)" Tabs="true" />
46+
4447
<ChartJSCallout />
4548

4649
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<BarChart @ref="barChart" OnClick="OnClick" Width="500" Height="300" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private BarChart barChart = default!;
9+
private BarChartOptions barChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a bar to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new BarChartDataset
21+
{
22+
Label = "Product A",
23+
Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
24+
BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() },
25+
BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() },
26+
BorderWidth = new List<double> { 0 }
27+
},
28+
new BarChartDataset
29+
{
30+
Label = "Product B",
31+
Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
32+
BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() },
33+
BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() },
34+
BorderWidth = new List<double> { 0 }
35+
}
36+
}
37+
};
38+
39+
barChartOptions = new BarChartOptions { Responsive = true };
40+
}
41+
42+
protected override async Task OnAfterRenderAsync(bool firstRender)
43+
{
44+
if (firstRender)
45+
await barChart.InitializeAsync(chartData, barChartOptions);
46+
47+
await base.OnAfterRenderAsync(firstRender);
48+
}
49+
50+
private void OnClick(ChartClickEventArgs eventArgs)
51+
{
52+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
53+
}
54+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
<Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />
3232
</Section>
3333

34+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
35+
<Demo Type="typeof(DoughnutChart_Demo_03_Click_Event)" Tabs="true" />
36+
</Section>
37+
3438
<ChartJSCallout />
3539

3640
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<DoughnutChart @ref="doughnutChart" OnClick="OnClick" Width="500" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private DoughnutChart doughnutChart = default!;
9+
private DoughnutChartOptions doughnutChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a slice to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new DoughnutChartDataset
21+
{
22+
Label = "Browsers",
23+
Data = new List<double?> { 62, 18, 11, 9 },
24+
BackgroundColor = new List<string>
25+
{
26+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
27+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
28+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
29+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
30+
}
31+
}
32+
}
33+
};
34+
35+
doughnutChartOptions = new DoughnutChartOptions { Responsive = true };
36+
}
37+
38+
protected override async Task OnAfterRenderAsync(bool firstRender)
39+
{
40+
if (firstRender)
41+
await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
42+
43+
await base.OnAfterRenderAsync(firstRender);
44+
}
45+
46+
private void OnClick(ChartClickEventArgs eventArgs)
47+
{
48+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
49+
}
50+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
<Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
5454
</Section>
5555

56+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
57+
<Demo Type="typeof(LineChart_Demo_07_Click_Event)" Tabs="true" />
58+
</Section>
59+
5660
<ChartJSCallout />
5761

5862
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" OnClick="OnClick" Width="800" />
3+
</div>
4+
5+
<div class="mt-3">
6+
<strong>Selected item:</strong> @selectedItemMessage
7+
</div>
8+
9+
@code {
10+
private LineChart lineChart = default!;
11+
private LineChartOptions lineChartOptions = default!;
12+
private ChartData chartData = default!;
13+
private string selectedItemMessage = "Click a point to view its details.";
14+
15+
protected override void OnInitialized()
16+
{
17+
chartData = new ChartData
18+
{
19+
Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
20+
Datasets = new List<IChartDataset>
21+
{
22+
new LineChartDataset
23+
{
24+
Label = "Product A",
25+
Data = new List<double?> { 35, 41, 62, 42, 13, 18 },
26+
BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
27+
BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
28+
PointRadius = new List<double> { 5 },
29+
PointHoverRadius = new List<double> { 8 }
30+
},
31+
new LineChartDataset
32+
{
33+
Label = "Product B",
34+
Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
35+
BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
36+
BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
37+
PointRadius = new List<double> { 5 },
38+
PointHoverRadius = new List<double> { 8 }
39+
}
40+
}
41+
};
42+
43+
lineChartOptions = new LineChartOptions
44+
{
45+
Interaction = new Interaction { Mode = InteractionMode.Nearest, Intersect = true },
46+
Responsive = true
47+
};
48+
}
49+
50+
protected override async Task OnAfterRenderAsync(bool firstRender)
51+
{
52+
if (firstRender)
53+
await lineChart.InitializeAsync(chartData, lineChartOptions);
54+
55+
await base.OnAfterRenderAsync(firstRender);
56+
}
57+
58+
private void OnClick(ChartClickEventArgs eventArgs)
59+
{
60+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
61+
}
62+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@
3838
<Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
3939
</Section>
4040

41+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
42+
<Demo Type="typeof(PieChart_Demo_04_Click_Event)" Tabs="true" />
43+
</Section>
44+
4145
<ChartJSCallout />
4246

4347
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<PieChart @ref="pieChart" OnClick="OnClick" Width="500" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private PieChart pieChart = default!;
9+
private PieChartOptions pieChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a slice to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new PieChartDataset
21+
{
22+
Label = "Browsers",
23+
Data = new List<double?> { 62, 18, 11, 9 },
24+
BackgroundColor = new List<string>
25+
{
26+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
27+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
28+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
29+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
30+
}
31+
}
32+
}
33+
};
34+
35+
pieChartOptions = new PieChartOptions { Responsive = true };
36+
}
37+
38+
protected override async Task OnAfterRenderAsync(bool firstRender)
39+
{
40+
if (firstRender)
41+
await pieChart.InitializeAsync(chartData, pieChartOptions);
42+
43+
await base.OnAfterRenderAsync(firstRender);
44+
}
45+
46+
private void OnClick(ChartClickEventArgs eventArgs)
47+
{
48+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
49+
}
50+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
<Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
2828
</Section>
2929

30+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
31+
<Demo Type="typeof(PolarAreaChart_Demo_02_Click_Event)" Tabs="true" />
32+
</Section>
33+
3034
<ChartJSCallout />
3135

3236
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<PolarAreaChart @ref="polarAreaChart" OnClick="OnClick" Width="600" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private PolarAreaChart polarAreaChart = default!;
9+
private PolarAreaChartOptions polarAreaChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a segment to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "North", "South", "East", "West", "Central" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new PolarAreaChartDataset
21+
{
22+
Label = "Regions",
23+
Data = new List<double?> { 11, 16, 7, 3, 14 },
24+
BackgroundColor = new List<string>
25+
{
26+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.5),
27+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.5),
28+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.5),
29+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.5),
30+
ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.5)
31+
},
32+
BorderColor = new List<string>
33+
{
34+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
35+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
36+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
37+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString(),
38+
ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString()
39+
}
40+
}
41+
}
42+
};
43+
44+
polarAreaChartOptions = new PolarAreaChartOptions { Responsive = true };
45+
}
46+
47+
protected override async Task OnAfterRenderAsync(bool firstRender)
48+
{
49+
if (firstRender)
50+
await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions);
51+
52+
await base.OnAfterRenderAsync(firstRender);
53+
}
54+
55+
private void OnClick(ChartClickEventArgs eventArgs)
56+
{
57+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
58+
}
59+
}

0 commit comments

Comments
 (0)