Add chart item click event handling and enhance JavaScript interop#37
Merged
Conversation
Introduced `DotNetObjectReference` in `ChartComponentBase` and updated all chart components to handle click events on chart data items. Added `HandleClickAsync` method and `OnClick` parameter for callback support. Implemented `ChartClickEventArgs` to encapsulate click metadata. Enhanced JavaScript interop in `blazorexpress.chartjs.js` to attach click handlers and dispatch events to .NET. Updated `Dispose` method to clean up resources. Added versioning and descriptions for new features.
Removed the `ChartClickEventArgsTests` class and its test methods, including `HandleClickAsync` tests and JavaScript bridge validation. Deleted the `GetRepositoryFile` helper method and the `TestChartComponent` class. Cleaned up unused `using` directives and namespace declaration.
Closed
Added a new namespace declaration `BlazorExpress.ChartJS.Demo.RCL`. Introduced a `<Section>` component for the "Prerequisites" section. Included a `<Block>` with a link to the "Getting Started guide". Added a `PageUrl` parameter for dynamic URL handling.
Added "Click event" sections to documentation for BarChart, BubbleChart, DoughnutChart, LineChart, PieChart, PolarAreaChart, RadarChart, and ScatterChart. These sections explain the use of the `OnClick` callback to handle user interactions with chart elements. Created new demo files for each chart type to showcase the "Click event" functionality. Demos include event handling, chart data initialization, and displaying selected item details.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds support for chart data item click events across all chart types in the BlazorExpress.ChartJS library. It introduces a new
OnClickcallback that provides detailed information about the selected chart item, updates the JavaScript interop to bridge click events from Chart.js to .NET, and includes tests and documentation for the new feature.New Chart Click Event Support:
ChartClickEventArgsclass to encapsulate metadata about the clicked chart item, including dataset index/label, data item index/label, and value.[Parameter]OnClickcallback toChartComponentBase, invoked when a chart data item is selected. The callback receives aChartClickEventArgsinstance.blazorexpress.chartjs.js), wiring up canvas click events to call the .NET handler with the correct metadata.Interop and Component Updates:
InitializeAsyncmethods to pass aDotNetObjectReferencefor click event interop.DotNetObjectReferenceinChartComponentBaseto avoid memory leaks.Demo, Documentation, and Testing:
Other:
System.Text.Json.These changes allow developers to easily react to user interactions with chart data points, enabling interactive dashboards and data exploration scenarios.