diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor index 937d2a660..8eb2308ef 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor @@ -41,6 +41,9 @@
+
+ + @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor new file mode 100644 index 000000000..8ff9bc039 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor @@ -0,0 +1,54 @@ + + +
+ Selected item: @selectedItemMessage +
+ +@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 { "January", "February", "March", "April", "May", "June" }, + Datasets = new List + { + new BarChartDataset + { + Label = "Product A", + Data = new List { 65, 59, 80, 81, 56, 55 }, + BackgroundColor = new List { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() }, + BorderColor = new List { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() }, + BorderWidth = new List { 0 } + }, + new BarChartDataset + { + Label = "Product B", + Data = new List { 28, 48, 40, 19, 86, 27 }, + BackgroundColor = new List { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() }, + BorderColor = new List { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() }, + BorderWidth = new List { 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}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index 0da6ee990..ff728ac8f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -31,6 +31,10 @@
+
+ +
+ @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor new file mode 100644 index 000000000..a5b5021b1 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor @@ -0,0 +1,50 @@ + + +
+ Selected item: @selectedItemMessage +
+ +@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 { "Chrome", "Edge", "Firefox", "Safari" }, + Datasets = new List + { + new DoughnutChartDataset + { + Label = "Browsers", + Data = new List { 62, 18, 11, 9 }, + BackgroundColor = new List + { + 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}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor index 3e1e96621..f62dfbc3b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor @@ -53,6 +53,10 @@
+
+ +
+ @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor new file mode 100644 index 000000000..d317a3f72 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor @@ -0,0 +1,62 @@ +
+ +
+ +
+ Selected item: @selectedItemMessage +
+ +@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 { "January", "February", "March", "April", "May", "June" }, + Datasets = new List + { + new LineChartDataset + { + Label = "Product A", + Data = new List { 35, 41, 62, 42, 13, 18 }, + BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(), + BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), + PointRadius = new List { 5 }, + PointHoverRadius = new List { 8 } + }, + new LineChartDataset + { + Label = "Product B", + Data = new List { 28, 48, 40, 19, 86, 27 }, + BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(), + BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), + PointRadius = new List { 5 }, + PointHoverRadius = new List { 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}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor index a9dadd4c4..902984a17 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor @@ -38,6 +38,10 @@ +
+ +
+ @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor new file mode 100644 index 000000000..89d5a0c6e --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor @@ -0,0 +1,50 @@ + + +
+ Selected item: @selectedItemMessage +
+ +@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 { "Chrome", "Edge", "Firefox", "Safari" }, + Datasets = new List + { + new PieChartDataset + { + Label = "Browsers", + Data = new List { 62, 18, 11, 9 }, + BackgroundColor = new List + { + 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}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index e0d92bcfa..a0f13930c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -27,6 +27,10 @@ +
+ +
+ @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor new file mode 100644 index 000000000..3bbd6a715 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor @@ -0,0 +1,59 @@ + + +
+ Selected item: @selectedItemMessage +
+ +@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 { "North", "South", "East", "West", "Central" }, + Datasets = new List + { + new PolarAreaChartDataset + { + Label = "Regions", + Data = new List { 11, 16, 7, 3, 14 }, + BackgroundColor = new List + { + 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 + { + 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}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor index 99f669f27..7f8e4e47a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor @@ -27,6 +27,10 @@ +
+ +
+ @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor new file mode 100644 index 000000000..f9e4e907b --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor @@ -0,0 +1,58 @@ + + +
+ Selected item: @selectedItemMessage +
+ +@code { + private RadarChart radarChart = default!; + private RadarChartOptions radarChartOptions = 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 { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" }, + Datasets = new List + { + new RadarChartDataset + { + Label = "Model A", + Data = new List { 65, 59, 90, 81, 56 }, + BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(), + BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8), + BorderWidth = 2, + Fill = true, + HoverBorderWidth = 4 + }, + new RadarChartDataset + { + Label = "Model B", + Data = new List { 28, 48, 40, 19, 96 }, + BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(), + BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8), + BorderWidth = 2, + Fill = true, + HoverBorderWidth = 4 + } + } + }; + + radarChartOptions = new RadarChartOptions { Responsive = true }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await radarChart.InitializeAsync(chartData, radarChartOptions); + + await base.OnAfterRenderAsync(firstRender); + } + + private void OnClick(ChartClickEventArgs eventArgs) + { + selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor index 1b1b02b30..3aa86ac41 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -36,6 +36,10 @@ +
+ +
+ @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor new file mode 100644 index 000000000..ab1614c18 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor @@ -0,0 +1,71 @@ + + +
+ Selected item: @selectedItemMessage +
+ +@code { + private ScatterChart scatterChart = default!; + private ScatterChartOptions scatterChartOptions = default!; + private ChartData chartData = default!; + private string selectedItemMessage = "Click a point to view its details."; + + protected override void OnInitialized() + { + chartData = new ChartData + { + Datasets = new List + { + new ScatterChartDataset + { + Label = "Team 1", + Data = new List + { + new(15, 25), + new(22, 48), + new(38, 32), + new(55, 67) + }, + BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(), + BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), + BorderWidth = 2, + HoverBorderWidth = 4, + PointRadius = new List { 6 }, + PointHoverRadius = new List { 8 } + }, + new ScatterChartDataset + { + Label = "Team 2", + Data = new List + { + new(12, 35), + new(28, 30), + new(41, 52), + new(63, 72) + }, + BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(), + BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), + BorderWidth = 2, + HoverBorderWidth = 4, + PointRadius = new List { 6 }, + PointHoverRadius = new List { 8 } + } + } + }; + + scatterChartOptions = new ScatterChartOptions { Responsive = true }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await scatterChart.InitializeAsync(chartData, scatterChartOptions); + + await base.OnAfterRenderAsync(firstRender); + } + + private void OnClick(ChartClickEventArgs eventArgs) + { + selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Value: {eventArgs.Value}"; + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor index ed1a309ca..6359f74d3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor index 3bf6a2f84..2942f774c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor index 5c5043178..8da0ace5e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/LineCharts/LineChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor index 15f573c30..6a499aa53 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PieCharts/PieChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor index 03e3a562f..9602c6066 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/PolarAreaCharts/PolarAreaChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor index daaec3803..8f5edb2a6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/RadarCharts/RadarChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor index c852917b8..21686b2ee 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/ScatterCharts/ScatterChart_Doc_01_Documentation.razor @@ -22,6 +22,14 @@ +
+ +
+ +
+ +
+
diff --git a/blazorbootstrap/Components/Charts/BarChart.razor.cs b/blazorbootstrap/Components/Charts/BarChart.razor.cs index 26db0541c..a8da064a6 100644 --- a/blazorbootstrap/Components/Charts/BarChart.razor.cs +++ b/blazorbootstrap/Components/Charts/BarChart.razor.cs @@ -111,7 +111,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins, ObjRef); } } @@ -121,7 +121,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (BarChartOptions)chartOptions); + await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (BarChartOptions)chartOptions, ObjRef); } } diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs index d68d90ea5..58a1eaf68 100644 --- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs +++ b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs @@ -6,6 +6,8 @@ public class BlazorBootstrapChart : BlazorBootstrapComponentBase, IDisposable, I internal ChartType chartType; + private DotNetObjectReference? objRef; + #endregion #region Methods @@ -47,14 +49,25 @@ public virtual async Task InitializeAsync(ChartData chartData, IChartOptions cha var _data = GetChartDataObject(chartData); if (chartType == ChartType.Bar) - await SafeInvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins, ObjRef); else if (chartType == ChartType.Line) - await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins, ObjRef); else - await SafeInvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins); + await SafeInvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins, ObjRef); } } + [JSInvokable] + public async Task HandleClickAsync(ChartClickEventArgs eventArgs) => await OnClick.InvokeAsync(eventArgs); + + /// + protected override void OnInitialized() + { + objRef ??= DotNetObjectReference.Create(this); + + base.OnInitialized(); + } + //public async Task Render() { } //public async Task Reset() { } @@ -86,14 +99,30 @@ public virtual async Task UpdateAsync(ChartData chartData, IChartOptions chartOp var data = GetChartDataObject(chartData); if (chartType == ChartType.Bar) - await SafeInvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions); + await SafeInvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions, ObjRef); else if (chartType == ChartType.Line) - await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions); + await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions, ObjRef); else - await SafeInvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions); + await SafeInvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions, ObjRef); } } + protected override void Dispose(bool disposing) + { + if (disposing) + objRef?.Dispose(); + + base.Dispose(disposing); + } + + protected override ValueTask DisposeAsyncCore(bool disposing) + { + if (disposing) + objRef?.Dispose(); + + return base.DisposeAsyncCore(disposing); + } + /// /// Update only data labels and values. If animation is enabled, this will animate the datapoints. /// Changes to the options will not be applied. @@ -169,14 +198,27 @@ private object GetChartDataObject(ChartData chartData) internal string ContainerStyle => GetChartContainerSizeAsStyle(); + /// + /// Fired when a chart data point is clicked. + /// + [AddedVersion("4.0.0")] + [Description("Fired when a chart data point is clicked.")] + [Parameter] + public EventCallback OnClick { get; set; } + + protected DotNetObjectReference? ObjRef => objRef; + /// /// Gets or sets chart container height. /// The default unit of measure is . /// To change the unit of measure see . /// /// - /// Default value is null. + /// Default value is . /// + [AddedVersion("1.0.0")] + [DefaultValue(null)] + [Description("Gets or sets chart container height. The default unit of measure is Unit.Px. To change the unit of measure see HeightUnit.")] [Parameter] public int? Height { get; set; } @@ -186,6 +228,9 @@ private object GetChartDataObject(ChartData chartData) /// /// Default value is . /// + [AddedVersion("1.0.0")] + [DefaultValue(Unit.Px)] + [Description("Gets or sets chart container height unit of measure.")] [Parameter] public Unit HeightUnit { get; set; } = Unit.Px; @@ -195,8 +240,11 @@ private object GetChartDataObject(ChartData chartData) /// To change the unit of measure see . /// /// - /// Default value is null. + /// Default value is . /// + [AddedVersion("1.0.0")] + [DefaultValue(null)] + [Description("Get or sets chart container width. The default unit of measure is Unit.Px. To change the unit of measure see WidthUnit.")] [Parameter] public int? Width { get; set; } @@ -206,6 +254,9 @@ private object GetChartDataObject(ChartData chartData) /// /// Default value is . /// + [AddedVersion("1.0.0")] + [DefaultValue(Unit.Px)] + [Description("Gets or sets chart container width unit of measure.")] [Parameter] public Unit WidthUnit { get; set; } = Unit.Px; diff --git a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs index 1e28b6c52..3774f0cf3 100644 --- a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs +++ b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs @@ -117,7 +117,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins, ObjRef); } } @@ -127,7 +127,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions); + await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, ObjRef); } } diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs index a68334578..48378d852 100644 --- a/blazorbootstrap/Components/Charts/LineChart.razor.cs +++ b/blazorbootstrap/Components/Charts/LineChart.razor.cs @@ -112,7 +112,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), data, (LineChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), data, (LineChartOptions)chartOptions, plugins, ObjRef); } public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) @@ -128,7 +128,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions); + await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions, ObjRef); } #endregion diff --git a/blazorbootstrap/Components/Charts/PieChart.razor.cs b/blazorbootstrap/Components/Charts/PieChart.razor.cs index 9c9f6d52b..edb16f2df 100644 --- a/blazorbootstrap/Components/Charts/PieChart.razor.cs +++ b/blazorbootstrap/Components/Charts/PieChart.razor.cs @@ -117,7 +117,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PieChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PieChartOptions)chartOptions, plugins, ObjRef); } } @@ -127,7 +127,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PieChartOptions)chartOptions); + await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PieChartOptions)chartOptions, ObjRef); } } diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs index 993ec1f99..58d88266c 100644 --- a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs +++ b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs @@ -112,7 +112,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins, ObjRef); } } @@ -122,7 +122,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions); + await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, ObjRef); } } diff --git a/blazorbootstrap/Components/Charts/RadarChart.razor.cs b/blazorbootstrap/Components/Charts/RadarChart.razor.cs index d727a2e6f..664b2937b 100644 --- a/blazorbootstrap/Components/Charts/RadarChart.razor.cs +++ b/blazorbootstrap/Components/Charts/RadarChart.razor.cs @@ -112,7 +112,7 @@ public override async Task InitializeAsync(ChartData chartData, IChartOptions ch { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins, ObjRef); } } @@ -122,7 +122,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO { var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (RadarChartOptions)chartOptions); + await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (RadarChartOptions)chartOptions, ObjRef); } } diff --git a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs index df7271d7c..9dbd84f3b 100644 --- a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs +++ b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs @@ -119,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 SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins); + await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins, ObjRef); } public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) @@ -135,7 +135,7 @@ public override async Task UpdateAsync(ChartData chartData, IChartOptions chartO var datasets = chartData.Datasets.OfType(); var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (ScatterChartOptions)chartOptions); + await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, ObjRef); } #endregion diff --git a/blazorbootstrap/EventArguments/ChartClickEventArgs.cs b/blazorbootstrap/EventArguments/ChartClickEventArgs.cs new file mode 100644 index 000000000..84d4a5c35 --- /dev/null +++ b/blazorbootstrap/EventArguments/ChartClickEventArgs.cs @@ -0,0 +1,48 @@ +namespace BlazorBootstrap; + +public class ChartClickEventArgs +{ + #region Properties, Indexers + + /// + /// Gets or sets the dataset index of the clicked chart item. + /// + [AddedVersion("4.0.0")] + [DefaultValue(0)] + [Description("Gets or sets the dataset index of the clicked chart item.")] + public int DatasetIndex { get; set; } + + /// + /// Gets or sets the dataset label of the clicked chart item. + /// + [AddedVersion("4.0.0")] + [DefaultValue(null)] + [Description("Gets or sets the dataset label of the clicked chart item.")] + public string? DatasetLabel { get; set; } + + /// + /// Gets or sets the data index of the clicked chart item. + /// + [AddedVersion("4.0.0")] + [DefaultValue(0)] + [Description("Gets or sets the data index of the clicked chart item.")] + public int Index { get; set; } + + /// + /// Gets or sets the data label of the clicked chart item. + /// + [AddedVersion("4.0.0")] + [DefaultValue(null)] + [Description("Gets or sets the data label of the clicked chart item.")] + public string? Label { get; set; } + + /// + /// Gets or sets the raw value of the clicked chart item. + /// + [AddedVersion("4.0.0")] + [DefaultValue(null)] + [Description("Gets or sets the raw value of the clicked chart item.")] + public System.Text.Json.JsonElement? Value { get; set; } + + #endregion +} diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 545eef466..7594cf3a2 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -993,10 +993,41 @@ window.blazorBootstrap = { } window.blazorChart = { - create: (elementId, type, data, options, plugins) => { + setOnClickHandler: (options, dotNetHelper) => { + if (!options || !dotNetHelper) + return; + + const onClick = options.onClick; + + options.onClick = function (event, activeElements, chart) { + if (typeof onClick === 'function') + onClick.call(this, event, activeElements, chart); + + if (!activeElements || activeElements.length === 0 || !chart) + return; + + const activeElement = activeElements[0]; + const datasetIndex = activeElement.datasetIndex; + const index = activeElement.index; + const dataset = chart.data?.datasets?.[datasetIndex]; + const label = chart.data?.labels?.[index] ?? null; + const value = dataset?.data?.[index] ?? null; + + dotNetHelper.invokeMethodAsync('HandleClickAsync', { + datasetIndex: datasetIndex, + datasetLabel: dataset?.label ?? null, + index: index, + label: label, + value: value + }).catch(() => { }); + }; + }, + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1026,11 +1057,11 @@ window.blazorChart = { return chart; }, - initialize: (elementId, type, data, options, plugins) => { + initialize: (elementId, type, data, options, plugins, dotNetHelper) => { 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.get(elementId); @@ -1039,7 +1070,7 @@ window.blazorChart = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1049,6 +1080,8 @@ window.blazorChart = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1122,10 +1155,12 @@ window.blazorChart.bar = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1155,11 +1190,11 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.bar.get(elementId); @@ -1168,7 +1203,7 @@ window.blazorChart.bar = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.bar.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1178,6 +1213,8 @@ window.blazorChart.bar = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1252,10 +1289,12 @@ window.blazorChart.doughnut = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1290,11 +1329,11 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.doughnut.get(elementId); @@ -1303,7 +1342,7 @@ window.blazorChart.doughnut = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.doughnut.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1313,6 +1352,8 @@ window.blazorChart.doughnut = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1386,10 +1427,12 @@ window.blazorChart.line = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1457,12 +1500,12 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.line.get(elementId); @@ -1471,7 +1514,7 @@ window.blazorChart.line = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.line.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1481,6 +1524,8 @@ window.blazorChart.line = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1555,10 +1600,12 @@ window.blazorChart.pie = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1593,11 +1640,11 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.pie.get(elementId); @@ -1606,7 +1653,7 @@ window.blazorChart.pie = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.pie.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1616,6 +1663,8 @@ window.blazorChart.pie = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1690,10 +1739,12 @@ window.blazorChart.polarArea = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1729,11 +1780,11 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.polarArea.get(elementId); @@ -1742,7 +1793,7 @@ window.blazorChart.polarArea = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.polarArea.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1752,6 +1803,8 @@ window.blazorChart.polarArea = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1825,10 +1878,12 @@ window.blazorChart.radar = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1864,11 +1919,11 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.radar.get(elementId); @@ -1877,7 +1932,7 @@ window.blazorChart.radar = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.radar.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -1887,6 +1942,8 @@ window.blazorChart.radar = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update(); @@ -1960,10 +2017,12 @@ window.blazorChart.scatter = { chart.update(); } }, - create: (elementId, type, data, options, plugins) => { + create: (elementId, type, data, options, plugins, dotNetHelper) => { let chartEl = document.getElementById(elementId); let _plugins = []; + window.blazorChart.setOnClickHandler(options, dotNetHelper); + if (plugins && plugins.length > 0) { // register `ChartDataLabels` plugin if (plugins.includes('ChartDataLabels')) { @@ -1999,11 +2058,11 @@ 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, dotNetHelper); }, resize: (elementId, width, height) => { let chart = window.blazorChart.scatter.get(elementId); @@ -2012,7 +2071,7 @@ window.blazorChart.scatter = { chart.canvas.parentNode.style.width = width; } }, - update: (elementId, type, data, options) => { + update: (elementId, type, data, options, dotNetHelper) => { let chart = window.blazorChart.scatter.get(elementId); if (chart) { if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { @@ -2022,6 +2081,8 @@ window.blazorChart.scatter = { }; } + window.blazorChart.setOnClickHandler(options, dotNetHelper); + chart.data = data; chart.options = options; chart.update();