diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor index de529bfed..d4e091fb4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor @@ -1,4 +1,4 @@ - +
@@ -6,6 +6,10 @@
+@if (_clickedArgs is not null) { +
Clicked on '@_clickedArgs.LabelName' that has the index @_clickedArgs.Index
+} + @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(); - 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(); - 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(); - 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 GetDefaultDataSets(int numberOfDatasets) - { + private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); - 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 GetRandomData() - { + private List GetRandomData() { var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { + for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } - private List GetRandomBackgroundColors() - { + private List GetRandomBackgroundColors() { var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { + for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } - private List GetDefaultDataLabels(int numberOfLabels) - { + private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); - 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; + } + +} \ No newline at end of file diff --git a/blazorbootstrap/Components/Charts/BarChart.razor.cs b/blazorbootstrap/Components/Charts/BarChart.razor.cs index c48a934f2..34720d7e1 100644 --- a/blazorbootstrap/Components/Charts/BarChart.razor.cs +++ b/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 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 AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { @@ -111,7 +119,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins); + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins, objRef); } } diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs index 0bfa8781d..a7710b92c 100644 --- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs +++ b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs @@ -5,6 +5,8 @@ public class BlazorBootstrapChart : BlazorBootstrapComponentBase, IDisposable, I #region Fields and Constants internal ChartType chartType; + + protected DotNetObjectReference objRef; #endregion @@ -46,12 +48,18 @@ public virtual async Task InitializeAsync(ChartData chartData, IChartOptions cha { var _data = GetChartDataObject(chartData); + var dotNetReference = DotNetObjectReference.Create(this); + if (dotNetReference is null) { + Console.WriteLine("ERROR!"); + } else { + Console.WriteLine("SUCCESS!"); + } 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, objRef); 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 +171,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 +222,8 @@ private object GetChartDataObject(ChartData chartData) [Parameter] public Unit WidthUnit { get; set; } = Unit.Px; + + [Parameter] + public EventCallback OnClick { get; set; } #endregion } diff --git a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs index 6119d6da7..585489184 100644 --- a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs +++ b/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 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 AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { @@ -117,7 +125,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins); + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins, objRef); } } diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs index 765fa000e..898b1e0e0 100644 --- a/blazorbootstrap/Components/Charts/LineChart.razor.cs +++ b/blazorbootstrap/Components/Charts/LineChart.razor.cs @@ -2,6 +2,12 @@ public partial class LineChart : BlazorBootstrapChart { + #region Fields and Constants + + private DotNetObjectReference 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 AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { @@ -112,7 +124,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - 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, objRef); } public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) diff --git a/blazorbootstrap/Components/Charts/PieChart.razor.cs b/blazorbootstrap/Components/Charts/PieChart.razor.cs index 86a4eeb5e..bb4198c34 100644 --- a/blazorbootstrap/Components/Charts/PieChart.razor.cs +++ b/blazorbootstrap/Components/Charts/PieChart.razor.cs @@ -6,6 +6,8 @@ public partial class PieChart : BlazorBootstrapChart private const string _jsObjectName = "window.blazorChart.pie"; + private DotNetObjectReference 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 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(); 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); } } diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs index 615c9b624..4639951fe 100644 --- a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs +++ b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs @@ -6,6 +6,8 @@ public partial class PolarAreaChart : BlazorBootstrapChart private const string _jsObjectName = "window.blazorChart.polarArea"; + private DotNetObjectReference 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 AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) @@ -112,7 +120,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins); + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins, objRef); } } diff --git a/blazorbootstrap/Components/Charts/RadarChart.razor.cs b/blazorbootstrap/Components/Charts/RadarChart.razor.cs index 360607416..49db2f60c 100644 --- a/blazorbootstrap/Components/Charts/RadarChart.razor.cs +++ b/blazorbootstrap/Components/Charts/RadarChart.razor.cs @@ -6,6 +6,8 @@ public partial class RadarChart : BlazorBootstrapChart private const string _jsObjectName = "window.blazorChart.radar"; + private DotNetObjectReference 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 AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) @@ -112,7 +120,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins); + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins, objRef); } } diff --git a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs index 02f22c924..671f2a767 100644 --- a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs +++ b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs @@ -6,6 +6,8 @@ public partial class ScatterChart : BlazorBootstrapChart private const string _jsObjectName = "window.blazorChart.scatter"; + private DotNetObjectReference 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 AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) @@ -119,7 +127,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins); + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins, objRef); } public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) diff --git a/blazorbootstrap/EventArguments/ChartClickArgs.cs b/blazorbootstrap/EventArguments/ChartClickArgs.cs new file mode 100644 index 000000000..979bdeba3 --- /dev/null +++ b/blazorbootstrap/EventArguments/ChartClickArgs.cs @@ -0,0 +1,3 @@ +namespace BlazorBootstrap; + +public record ChartClickArgs(string LabelName, int Index); \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs index 686eebea3..394c4383b 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs @@ -42,7 +42,8 @@ public class ChartOptions : IChartOptions /// Default value is . /// public bool Responsive { get; set; } - + + public EventCallback OnClick { get; set; } #endregion } diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index d0a59ddc9..370c50a7e 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -148,18 +148,14 @@ window.blazorBootstrap = { if (key === window.blazorBootstrap.fe.ARROWDOWN) { if (nextSelectedIndex < childNodes.length - 1) nextSelectedIndex++; - } - else if (key === window.blazorBootstrap.fe.ARROWUP) { + } else if (key === window.blazorBootstrap.fe.ARROWUP) { if (nextSelectedIndex > 0 && nextSelectedIndex <= childNodes.length - 1) nextSelectedIndex--; - } - else if (key === window.blazorBootstrap.fe.HOME) { + } else if (key === window.blazorBootstrap.fe.HOME) { nextSelectedIndex = 0; - } - else if (key === window.blazorBootstrap.fe.END) { + } else if (key === window.blazorBootstrap.fe.END) { nextSelectedIndex = childNodes.length - 1; - } - else + } else return; // reset li element focus @@ -198,7 +194,7 @@ window.blazorBootstrap = { dotNetHelper.invokeMethodAsync('bsHiddenCollapse'); }); - let options = { parent: parent, toggle: toggle }; + let options = {parent: parent, toggle: toggle}; bootstrap?.Collapse?.getOrCreateInstance(collapseEl, options); }, show: (elementId) => { @@ -470,8 +466,7 @@ window.blazorBootstrap = { scale: marker.pinElement.scale, }); _content = pin.element; - } - else if (marker.content) { + } else if (marker.content) { _content = document.createElement("div"); _content.classList.add("bb-google-marker-content"); _content.innerHTML = marker.content; @@ -489,8 +484,8 @@ window.blazorBootstrap = { // add a click listener for each marker, and set up the info window. if (clickable) { - markerEl.addListener("click", ({ domEvent, latLng }) => { - const { target } = domEvent; + markerEl.addListener("click", ({domEvent, latLng}) => { + const {target} = domEvent; const infoWindow = new google.maps.InfoWindow(); infoWindow.close(); infoWindow.setContent(markerEl.title); @@ -515,7 +510,7 @@ window.blazorBootstrap = { initialize: (elementId, zoom, center, markers, clickable, dotNetHelper) => { window.blazorBootstrap.googlemaps.markerEls[elementId] = window.blazorBootstrap.googlemaps.markerEls[elementId] ?? []; - let mapOptions = { center: center, zoom: zoom, mapId: elementId }; + let mapOptions = {center: center, zoom: zoom, mapId: elementId}; let map = new google.maps.Map(document.getElementById(elementId), mapOptions); window.blazorBootstrap.googlemaps.create(elementId, map, zoom, center, markers, clickable); @@ -568,8 +563,7 @@ window.blazorBootstrap = { colEls.forEach((e, i) => { e.classList.remove('freeze-column-active'); }); - } - else if (tableEl.parentElement.scrollLeft > 0) { + } else if (tableEl.parentElement.scrollLeft > 0) { let colEls = tableEl.querySelectorAll('.freeze-column'); if (colEls.length === 0) return; @@ -585,12 +579,10 @@ window.blazorBootstrap = { if (state === 1) { // checked checkboxEl.checked = true; checkboxEl.indeterminate = false; - } - else if (state === 2) { // unchecked + } else if (state === 2) { // unchecked checkboxEl.checked = false; checkboxEl.indeterminate = false; - } - else if (state === 3) { // indeterminate + } else if (state === 3) { // indeterminate checkboxEl.checked = false; checkboxEl.indeterminate = true; } @@ -619,7 +611,7 @@ window.blazorBootstrap = { dotNetHelper.invokeMethodAsync('bsHidePreventedModal'); }); - let options = { backdrop: useStaticBackdrop ? 'static' : true, keyboard: closeOnEscape }; + let options = {backdrop: useStaticBackdrop ? 'static' : true, keyboard: closeOnEscape}; bootstrap?.Modal?.getOrCreateInstance(modalEl, options); }, show: (elementId) => { @@ -705,7 +697,11 @@ window.blazorBootstrap = { dotNetHelper.invokeMethodAsync('bsHiddenOffcanvas'); }); - let options = { backdrop: useStaticBackdrop ? 'static' : true, keyboard: closeOnEscape, scroll: isScrollable }; + let options = { + backdrop: useStaticBackdrop ? 'static' : true, + keyboard: closeOnEscape, + scroll: isScrollable + }; bootstrap?.Offcanvas?.getOrCreateInstance(offcanvasEl, options); }, show: (elementId) => { @@ -907,7 +903,7 @@ window.blazorBootstrap = { dotNetHelper.invokeMethodAsync('bsHiddenToast'); }); - let options = { animation: true, autohide: autohide, delay: delay }; + let options = {animation: true, autohide: autohide, delay: delay}; bootstrap?.Toast?.getOrCreateInstance(toastEl, options)?.show(); }, hide: (elementId) => { @@ -1009,11 +1005,21 @@ window.blazorChart = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotnetReference) => { let chart = window.blazorChart.get(elementId); if (chart) return; - else - window.blazorChart.create(elementId, type, data, options, plugins); + + window.blazorChart.create(elementId, type, data, options, plugins); + chart = window.blazorChart.pie.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.get(elementId); @@ -1035,8 +1041,7 @@ window.blazorChart = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1138,11 +1143,21 @@ window.blazorChart.bar = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.bar.get(elementId); if (chart) return; - else - window.blazorChart.bar.create(elementId, type, data, options, plugins); + + window.blazorChart.bar.create(elementId, type, data, options, plugins); + chart = window.blazorChart.bar.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.bar.get(elementId); @@ -1164,8 +1179,7 @@ window.blazorChart.bar = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1273,11 +1287,22 @@ window.blazorChart.doughnut = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.doughnut.get(elementId); if (chart) return; - else - window.blazorChart.doughnut.create(elementId, type, data, options, plugins); + + window.blazorChart.doughnut.create(elementId, type, data, options, plugins); + chart = window.blazorChart.doughnut.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.doughnut.get(elementId); @@ -1299,8 +1324,7 @@ window.blazorChart.doughnut = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1441,12 +1465,24 @@ window.blazorChart.line = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.line.get(elementId); if (chart) return; - else - window.blazorChart.line.create(elementId, type, data, options, plugins); + + window.blazorChart.line.create(elementId, type, data, options, plugins); + + chart = window.blazorChart.doughnut.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.line.get(elementId); @@ -1468,8 +1504,7 @@ window.blazorChart.line = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1559,7 +1594,7 @@ window.blazorChart.pie = { type: type, data: data, options: options, - plugins: _plugins + plugins: _plugins, }; const chart = new Chart( @@ -1577,11 +1612,22 @@ window.blazorChart.pie = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.pie.get(elementId); if (chart) return; - else - window.blazorChart.pie.create(elementId, type, data, options, plugins); + + window.blazorChart.pie.create(elementId, type, data, options, plugins); + chart = window.blazorChart.pie.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.pie.get(elementId); @@ -1603,8 +1649,7 @@ window.blazorChart.pie = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1713,11 +1758,21 @@ window.blazorChart.polarArea = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.polarArea.get(elementId); if (chart) return; - else - window.blazorChart.polarArea.create(elementId, type, data, options, plugins); + + window.blazorChart.polarArea.create(elementId, type, data, options, plugins); + chart = window.blazorChart.polarArea.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.polarArea.get(elementId); @@ -1739,8 +1794,7 @@ window.blazorChart.polarArea = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1848,11 +1902,21 @@ window.blazorChart.radar = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.radar.get(elementId); if (chart) return; - else - window.blazorChart.radar.create(elementId, type, data, options, plugins); + + window.blazorChart.radar.create(elementId, type, data, options, plugins); + chart = window.blazorChart.radar.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.radar.get(elementId); @@ -1874,8 +1938,7 @@ window.blazorChart.radar = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } }, @@ -1983,11 +2046,21 @@ window.blazorChart.scatter = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { let chart = window.blazorChart.scatter.get(elementId); if (chart) return; - else - window.blazorChart.scatter.create(elementId, type, data, options, plugins); + + window.blazorChart.scatter.create(elementId, type, data, options, plugins); + chart = window.blazorChart.scatter.get(elementId); + options.onClick = (e, array) => { + if (array.length <= 0) { + return; + } + + const rawItem = array[0]; + const item = chart.data.labels[rawItem.index]; + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.scatter.get(elementId); @@ -2009,8 +2082,7 @@ window.blazorChart.scatter = { chart.data = data; chart.options = options; chart.update(); - } - else { + } else { console.warn(`The chart is not initialized. Initialize it and then call update.`); } },