Added OnClick for charts

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor

@@ -1,11 +1,15 @@
-<PieChart @ref="pieChart" Width="500" />
+<PieChart @ref="pieChart" Width="500" OnClick="OnClickTest"/>
 
 <div class="mt-5">
     <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
     <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
     <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
 </div>
 
+@if (_clickedArgs is not null) {
+    <div class="mt-5"> Clicked on '@_clickedArgs.LabelName' that has the index @_clickedArgs.Index </div>
+}
+
 @code {
     private PieChart pieChart = default!;
     private PieChartOptions pieChartOptions = default!;
@@ -17,8 +21,9 @@
 
     private Random random = new();
 
-    protected override void OnInitialized()
-    {
+    private ChartClickArgs? _clickedArgs;
+
+    protected override void OnInitialized() {
         backgroundColors = ColorUtility.CategoricalTwelveColors;
         chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };
 
@@ -28,32 +33,27 @@
         pieChartOptions.Plugins.Title.Display = true;
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
+    protected override async Task OnAfterRenderAsync(bool firstRender) {
+        if (firstRender) {
             await pieChart.InitializeAsync(chartData, pieChartOptions);
         }
+
         await base.OnAfterRenderAsync(firstRender);
     }
 
-    private async Task RandomizeAsync()
-    {
+    private async Task RandomizeAsync() {
         if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;
 
         var newDatasets = new List<IChartDataset>();
 
-        foreach (var dataset in chartData.Datasets)
-        {
+        foreach (var dataset in chartData.Datasets) {
             if (dataset is PieChartDataset pieChartDataset
-                && pieChartDataset is not null
-                && pieChartDataset.Data is not null)
-            {
+             && pieChartDataset is not null
+             && pieChartDataset.Data is not null) {
                 var count = pieChartDataset.Data.Count;
 
                 var newData = new List<double?>();
-                for (var i = 0; i < count; i++)
-                {
+                for (var i = 0; i < count; i++) {
                     newData.Add(random.Next(0, 100));
                 }
 
@@ -67,27 +67,21 @@
         await pieChart.UpdateAsync(chartData, pieChartOptions);
     }
 
-    private async Task AddDatasetAsync()
-    {
+    private async Task AddDatasetAsync() {
         if (chartData is null || chartData.Datasets is null) return;
 
         var chartDataset = GetRandomPieChartDataset();
         chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions);
     }
 
-    private async Task AddDataAsync()
-    {
-        if (dataLabelsCount >= 12)
-            return;
+    private async Task AddDataAsync() {
+        if (dataLabelsCount >= 12) return;
 
-        if (chartData is null || chartData.Datasets is null)
-            return;
+        if (chartData is null || chartData.Datasets is null) return;
 
         var data = new List<IChartDatasetData>();
-        foreach (var dataset in chartData.Datasets)
-        {
-            if (dataset is PieChartDataset pieChartDataset)
-                data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
+        foreach (var dataset in chartData.Datasets) {
+            if (dataset is PieChartDataset pieChartDataset) data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
         }
 
         chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);
@@ -97,51 +91,42 @@
 
     #region Data Preparation
 
-    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
-    {
+    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets) {
         var datasets = new List<IChartDataset>();
 
-        for (var index = 0; index < numberOfDatasets; index++)
-        {
+        for (var index = 0; index < numberOfDatasets; index++) {
             datasets.Add(GetRandomPieChartDataset());
         }
 
         return datasets;
     }
 
-    private PieChartDataset GetRandomPieChartDataset()
-    {
+    private PieChartDataset GetRandomPieChartDataset() {
         datasetsCount += 1;
         return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
     }
 
-    private List<double?> GetRandomData()
-    {
+    private List<double?> GetRandomData() {
         var data = new List<double?>();
-        for (var index = 0; index < dataLabelsCount; index++)
-        {
+        for (var index = 0; index < dataLabelsCount; index++) {
             data.Add(random.Next(0, 100));
         }
 
         return data;
     }
 
-    private List<string> GetRandomBackgroundColors()
-    {
+    private List<string> GetRandomBackgroundColors() {
         var colors = new List<string>();
-        for (var index = 0; index < dataLabelsCount; index++)
-        {
+        for (var index = 0; index < dataLabelsCount; index++) {
             colors.Add(backgroundColors![index]);
         }
 
         return colors;
     }
 
-    private List<string> GetDefaultDataLabels(int numberOfLabels)
-    {
+    private List<string> GetDefaultDataLabels(int numberOfLabels) {
         var labels = new List<string>();
-        for (var index = 0; index < numberOfLabels; index++)
-        {
+        for (var index = 0; index < numberOfLabels; index++) {
             labels.Add(GetNextDataLabel());
             dataLabelsCount += 1;
         }
@@ -153,5 +138,10 @@
 
     private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];
 
-    #endregion  Data Preparation
-}
+    #endregion Data Preparation
+
+    private void OnClickTest(ChartClickArgs args) {
+        _clickedArgs = args;
+    }
+
+}

blazorbootstrap/Components/Charts/BarChart.razor.cs

@@ -5,6 +5,8 @@ public partial class BarChart : BlazorBootstrapChart
     #region Fields and Constants
 
     private const string _jsObjectName = "window.blazorChart.bar";
+
+    private DotNetObjectReference<BarChart> objRef;
 
     #endregion
 
@@ -18,6 +20,12 @@ public BarChart()
     #endregion
 
     #region Methods
+
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
 
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)
     {

blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs

@@ -5,6 +5,8 @@ public class BlazorBootstrapChart : BlazorBootstrapComponentBase, IDisposable, I
     #region Fields and Constants
 
     internal ChartType chartType;
+
+    protected DotNetObjectReference<PieChart> objRef;
 
     #endregion
 
@@ -46,12 +48,13 @@ public virtual async Task InitializeAsync(ChartData chartData, IChartOptions cha
         {
             var _data = GetChartDataObject(chartData);
 
+            var dotNetReference = DotNetObjectReference.Create(this);
             if (chartType == ChartType.Bar)
-                await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins);
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins, dotNetReference);
             else if (chartType == ChartType.Line)
-                await JSRuntime.InvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins);
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins, dotNetReference);
             else
-                await JSRuntime.InvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins);
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins, dotNetReference);
         }
     }
 
@@ -163,6 +166,11 @@ private object GetChartDataObject(ChartData chartData)
         return data;
     }
 
+    [JSInvokable]
+    public async Task ClickEvent(string item, int index) {
+        await OnClick.InvokeAsync(new ChartClickArgs(item, index));
+    }
+
     #endregion
 
     #region Properties, Indexers
@@ -209,5 +217,8 @@ private object GetChartDataObject(ChartData chartData)
     [Parameter]
     public Unit WidthUnit { get; set; } = Unit.Px;
 
+
+    [Parameter]
+    public EventCallback<ChartClickArgs> OnClick { get; set; }
     #endregion
 }

blazorbootstrap/Components/Charts/DoughnutChart.razor.cs

@@ -5,7 +5,9 @@ public partial class DoughnutChart : BlazorBootstrapChart
     #region Fields and Constants
 
     private const string _jsObjectName = "window.blazorChart.doughnut";
-
+
+    private DotNetObjectReference<DoughnutChart> objRef;
+
     #endregion
 
     #region Constructors
@@ -18,6 +20,12 @@ public DoughnutChart()
     #endregion
 
     #region Methods
+
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
 
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)
     {

blazorbootstrap/Components/Charts/LineChart.razor.cs

@@ -2,6 +2,12 @@
 
 public partial class LineChart : BlazorBootstrapChart
 {
+    #region Fields and Constants
+
+    private DotNetObjectReference<LineChart> objRef;
+
+    #endregion
+
     #region Constructors
 
     public LineChart()
@@ -12,6 +18,12 @@ public LineChart()
     #endregion
 
     #region Methods
+
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
 
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)
     {

blazorbootstrap/Components/Charts/PieChart.razor.cs

@@ -6,6 +6,8 @@ public partial class PieChart : BlazorBootstrapChart
 
     private const string _jsObjectName = "window.blazorChart.pie";
 
+    private DotNetObjectReference<PieChart> objRef;
+
     #endregion
 
     #region Constructors
@@ -19,6 +21,12 @@ public PieChart()
 
     #region Methods
 
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
+
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)
     {
         if (chartData is null)
@@ -117,7 +125,8 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch
         {
             var datasets = chartData.Datasets.OfType<PieChartDataset>();
             var data = new { chartData.Labels, Datasets = datasets };
-            await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PieChartOptions)chartOptions, plugins);
+            var options = (PieChartOptions)chartOptions;
+            await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, options, plugins, objRef);
         }
     }
 

blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs

@@ -6,6 +6,8 @@ public partial class PolarAreaChart : BlazorBootstrapChart
 
     private const string _jsObjectName = "window.blazorChart.polarArea";
 
+    private DotNetObjectReference<PolarAreaChart> objRef;
+
     #endregion
 
     #region Constructors
@@ -18,6 +20,12 @@ public PolarAreaChart()
     #endregion
 
     #region Methods
+
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
 
     // TODO: May be this method is not required
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)

blazorbootstrap/Components/Charts/RadarChart.razor.cs

@@ -6,6 +6,8 @@ public partial class RadarChart : BlazorBootstrapChart
 
     private const string _jsObjectName = "window.blazorChart.radar";
 
+    private DotNetObjectReference<RadarChart> objRef;
+
     #endregion
 
     #region Constructors
@@ -18,6 +20,12 @@ public RadarChart()
     #endregion
 
     #region Methods
+
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
 
     // TODO: May be this method is not required
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)

blazorbootstrap/Components/Charts/ScatterChart.razor.cs

@@ -6,6 +6,8 @@ public partial class ScatterChart : BlazorBootstrapChart
 
     private const string _jsObjectName = "window.blazorChart.scatter";
 
+    private DotNetObjectReference<ScatterChart> objRef;
+
     #endregion
 
     #region Constructors
@@ -18,6 +20,12 @@ public ScatterChart()
     #endregion
 
     #region Methods
+
+    protected override async Task OnInitializedAsync() {
+        await base.OnInitializedAsync();
+
+        objRef ??= DotNetObjectReference.Create(this);
+    }
 
     // TODO: May be this method is not required
     public override async Task<ChartData> AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)