From 3c1eac95cbac231f9b8fc8572d3b3596390c3914 Mon Sep 17 00:00:00 2001 From: yannikHoeflich Date: Wed, 27 Nov 2024 17:14:22 +0100 Subject: [PATCH 1/2] Added OnClick for charts --- .../PieCharts/PieChart_Demo_01_Examples.razor | 7 +- .../Components/Charts/BarChart.razor.cs | 8 + .../Components/Charts/BlazorBootstrapChart.cs | 17 +- .../Components/Charts/DoughnutChart.razor.cs | 10 +- .../Components/Charts/LineChart.razor.cs | 12 ++ .../Components/Charts/PieChart.razor.cs | 11 +- .../Components/Charts/PolarAreaChart.razor.cs | 8 + .../Components/Charts/RadarChart.razor.cs | 8 + .../Components/Charts/ScatterChart.razor.cs | 8 + .../Charts/ChartOptions/ChartOptions.cs | 3 +- blazorbootstrap/wwwroot/blazor.bootstrap.js | 202 ++++++++++++------ 11 files changed, 222 insertions(+), 72 deletions(-) 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..4b5e0d903 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 @@ - +
@@ -154,4 +154,9 @@ private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation + + private void OnClickTest(string clickedItem) { + Console.WriteLine($"Clicked on {clickedItem}"); + } + } diff --git a/blazorbootstrap/Components/Charts/BarChart.razor.cs b/blazorbootstrap/Components/Charts/BarChart.razor.cs index c48a934f2..554d5775a 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) { diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs index 0bfa8781d..3ee12a50a 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,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) { + await OnClick.InvokeAsync(item); + } + #endregion #region Properties, Indexers @@ -209,5 +217,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..8a2de25d4 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) { diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs index 765fa000e..e5b5bc660 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) { 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..7f75b0f87 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) diff --git a/blazorbootstrap/Components/Charts/RadarChart.razor.cs b/blazorbootstrap/Components/Charts/RadarChart.razor.cs index 360607416..5c1106595 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) diff --git a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs index 02f22c924..93a37e118 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) 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 055742f0d..611319a64 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) => { @@ -877,7 +873,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) => { @@ -979,11 +975,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); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.get(elementId); @@ -1005,8 +1011,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.`); } }, @@ -1108,11 +1113,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.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); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.bar.get(elementId); @@ -1134,8 +1149,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.`); } }, @@ -1243,11 +1257,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.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); + + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.doughnut.get(elementId); @@ -1269,8 +1294,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.`); } }, @@ -1411,12 +1435,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.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); + + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.line.get(elementId); @@ -1438,8 +1474,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.`); } }, @@ -1529,7 +1564,7 @@ window.blazorChart.pie = { type: type, data: data, options: options, - plugins: _plugins + plugins: _plugins, }; const chart = new Chart( @@ -1547,11 +1582,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); + + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.pie.get(elementId); @@ -1573,8 +1619,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.`); } }, @@ -1683,11 +1728,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.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); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.polarArea.get(elementId); @@ -1709,8 +1764,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.`); } }, @@ -1818,11 +1872,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.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); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.radar.get(elementId); @@ -1844,8 +1908,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.`); } }, @@ -1953,11 +2016,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.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); + } }, resize: (elementId, width, height) => { let chart = window.blazorChart.scatter.get(elementId); @@ -1979,8 +2052,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.`); } }, @@ -2030,7 +2102,7 @@ window.blazorBootstrap.ai = { const decoder = new TextDecoder("utf-8"); let i = 0; while (true) { - const { done, value } = await reader.read(); + const {done, value} = await reader.read(); if (done) { break; } From 825705b3bb00a92fbf4e723ec65d2d6c98b88a5a Mon Sep 17 00:00:00 2001 From: yannikHoeflich Date: Wed, 27 Nov 2024 17:34:24 +0100 Subject: [PATCH 2/2] Added ChartClickArgs --- .../PieCharts/PieChart_Demo_01_Examples.razor | 85 ++++++++----------- .../Components/Charts/BlazorBootstrapChart.cs | 6 +- .../EventArguments/ChartClickArgs.cs | 3 + blazorbootstrap/wwwroot/blazor.bootstrap.js | 16 ++-- 4 files changed, 49 insertions(+), 61 deletions(-) create mode 100644 blazorbootstrap/EventArguments/ChartClickArgs.cs 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 4b5e0d903..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,10 +138,10 @@ private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; - #endregion Data Preparation + #endregion Data Preparation - private void OnClickTest(string clickedItem) { - Console.WriteLine($"Clicked on {clickedItem}"); + private void OnClickTest(ChartClickArgs args) { + _clickedArgs = args; } -} +} \ No newline at end of file diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs index 3ee12a50a..17ea6a0d8 100644 --- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs +++ b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs @@ -167,8 +167,8 @@ private object GetChartDataObject(ChartData chartData) } [JSInvokable] - public async Task ClickEvent(string item) { - await OnClick.InvokeAsync(item); + public async Task ClickEvent(string item, int index) { + await OnClick.InvokeAsync(new ChartClickArgs(item, index)); } #endregion @@ -219,6 +219,6 @@ public async Task ClickEvent(string item) { [Parameter] - public EventCallback OnClick { get; set; } + public EventCallback OnClick { get; set; } #endregion } 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/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 611319a64..7867b2969 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -988,7 +988,7 @@ window.blazorChart = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, resize: (elementId, width, height) => { @@ -1126,7 +1126,7 @@ window.blazorChart.bar = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, resize: (elementId, width, height) => { @@ -1270,7 +1270,7 @@ window.blazorChart.doughnut = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, @@ -1450,7 +1450,7 @@ window.blazorChart.line = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, @@ -1595,7 +1595,7 @@ window.blazorChart.pie = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, @@ -1741,7 +1741,7 @@ window.blazorChart.polarArea = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, resize: (elementId, width, height) => { @@ -1885,7 +1885,7 @@ window.blazorChart.radar = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, resize: (elementId, width, height) => { @@ -2029,7 +2029,7 @@ window.blazorChart.scatter = { const rawItem = array[0]; const item = chart.data.labels[rawItem.index]; - dotNetHelper.invokeMethodAsync("ClickEvent", item); + dotNetHelper.invokeMethodAsync("ClickEvent", item, rawItem.index); } }, resize: (elementId, width, height) => {