Add chart data point click event support

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

@@ -41,6 +41,9 @@
 <Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
 <Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event" />
+<Demo Type="typeof(BarChart_Demo_06_Click_Event)" Tabs="true" />
+
 <ChartJSCallout />
 
 @code {

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

@@ -0,0 +1,54 @@
+<BarChart @ref="barChart" OnClick="OnClick" Width="500" Height="300" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a bar to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
+                Datasets = new List<IChartDataset>
+                {
+                    new BarChartDataset
+                    {
+                        Label = "Product A",
+                        Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
+                        BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() },
+                        BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() },
+                        BorderWidth = new List<double> { 0 }
+                    },
+                    new BarChartDataset
+                    {
+                        Label = "Product B",
+                        Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
+                        BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() },
+                        BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() },
+                        BorderWidth = new List<double> { 0 }
+                    }
+                }
+            };
+
+        barChartOptions = new BarChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await barChart.InitializeAsync(chartData, barChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}

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

@@ -31,6 +31,10 @@
     <Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(DoughnutChart_Demo_03_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {

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

@@ -0,0 +1,50 @@
+<DoughnutChart @ref="doughnutChart" OnClick="OnClick" Width="500" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private DoughnutChart doughnutChart = default!;
+    private DoughnutChartOptions doughnutChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a slice to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
+                Datasets = new List<IChartDataset>
+                {
+                    new DoughnutChartDataset
+                    {
+                        Label = "Browsers",
+                        Data = new List<double?> { 62, 18, 11, 9 },
+                        BackgroundColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
+                        }
+                    }
+                }
+            };
+
+        doughnutChartOptions = new DoughnutChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}

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

@@ -53,6 +53,10 @@
     <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(LineChart_Demo_07_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {

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

@@ -0,0 +1,62 @@
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" OnClick="OnClick" Width="800" />
+</div>
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private LineChart lineChart = default!;
+    private LineChartOptions lineChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a point to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
+                Datasets = new List<IChartDataset>
+                {
+                    new LineChartDataset
+                    {
+                        Label = "Product A",
+                        Data = new List<double?> { 35, 41, 62, 42, 13, 18 },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                        PointRadius = new List<double> { 5 },
+                        PointHoverRadius = new List<double> { 8 }
+                    },
+                    new LineChartDataset
+                    {
+                        Label = "Product B",
+                        Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
+                        BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
+                        BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                        PointRadius = new List<double> { 5 },
+                        PointHoverRadius = new List<double> { 8 }
+                    }
+                }
+            };
+
+        lineChartOptions = new LineChartOptions
+            {
+                Interaction = new Interaction { Mode = InteractionMode.Nearest, Intersect = true },
+                Responsive = true
+            };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await lineChart.InitializeAsync(chartData, lineChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}

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

@@ -38,6 +38,10 @@
     <Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(PieChart_Demo_04_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {

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

@@ -0,0 +1,50 @@
+<PieChart @ref="pieChart" OnClick="OnClick" Width="500" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private PieChart pieChart = default!;
+    private PieChartOptions pieChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a slice to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
+                Datasets = new List<IChartDataset>
+                {
+                    new PieChartDataset
+                    {
+                        Label = "Browsers",
+                        Data = new List<double?> { 62, 18, 11, 9 },
+                        BackgroundColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
+                        }
+                    }
+                }
+            };
+
+        pieChartOptions = new PieChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await pieChart.InitializeAsync(chartData, pieChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}

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

@@ -27,6 +27,10 @@
     <Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(PolarAreaChart_Demo_02_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {

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

@@ -0,0 +1,59 @@
+<PolarAreaChart @ref="polarAreaChart" OnClick="OnClick" Width="600" />
+
+<div class="mt-3">
+    <strong>Selected item:</strong> @selectedItemMessage
+</div>
+
+@code {
+    private PolarAreaChart polarAreaChart = default!;
+    private PolarAreaChartOptions polarAreaChartOptions = default!;
+    private ChartData chartData = default!;
+    private string selectedItemMessage = "Click a segment to view its details.";
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData
+            {
+                Labels = new List<string> { "North", "South", "East", "West", "Central" },
+                Datasets = new List<IChartDataset>
+                {
+                    new PolarAreaChartDataset
+                    {
+                        Label = "Regions",
+                        Data = new List<double?> { 11, 16, 7, 3, 14 },
+                        BackgroundColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.5),
+                            ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.5)
+                        },
+                        BorderColor = new List<string>
+                        {
+                            ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString(),
+                            ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString()
+                        }
+                    }
+                }
+            };
+
+        polarAreaChartOptions = new PolarAreaChartOptions { Responsive = true };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions);
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnClick(ChartClickEventArgs eventArgs)
+    {
+        selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor

@@ -27,6 +27,10 @@
     <Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true"/>
 </Section>
 
+<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
+    <Demo Type="typeof(RadarChart_Demo_02_Click_Event)" Tabs="true" />
+</Section>
+
 <ChartJSCallout />
 
 @code {