fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

react-charting: Add controlled selection to Legends component

Open cjsut opened this issue 1 year ago • 7 comments

This PR adds controlled selection to the Legends component in @fluentui/react-charting.

With controlled selection, we allow the parent component to add additional integrations that interact with the selection state (for example, a button that selects all items, or a separate control that allows selecting grouped subsets of items).

Previous Behavior

Legends component allows setting initial selection via props, but does not allow fully-controlled selection behavior.

New Behavior

Legends component now supports fully-controlled selection behavior.

Related Issue(s)

None.

cjsut avatar Sep 24 '24 21:09 cjsut

Team, thank you for your review! Please let me know if there are any additional changes that need to happen. Do I need to update any documentation, for example to add an example of a controlled legend selection to the React Charting demo site?

cjsut avatar Sep 24 '24 22:09 cjsut

@insaneinside Could you add the scenario where this behavior is required in the PR description. We have a legends onChange handler callback when a legend value changes.

It would be great if you could add an example as well. You can add the example under react-examples/src/react-charting/Legends

AtishayMsft avatar Sep 25 '24 01:09 AtishayMsft

/azp run

AtishayMsft avatar Sep 30 '24 14:09 AtishayMsft

Azure Pipelines successfully started running 4 pipeline(s).

azure-pipelines[bot] avatar Sep 30 '24 14:09 azure-pipelines[bot]

📊 Bundle size report

✅ No changes found

fabricteam avatar Sep 30 '24 14:09 fabricteam

There are some formatting and lint errors reported in the PR build. https://uifabric.visualstudio.com/fabricpublic/_build/results?buildId=362233&view=logs&j=258ec178-2d8b-5611-7b9b-60c5c95dae55&t=cc94c182-d6f4-5dae-734d-3676c12cee2a

AtishayMsft avatar Sep 30 '24 14:09 AtishayMsft

Could you add some margin between the example button and legend control in the example that you have added. It is looking misaligned currently.

image

AtishayMsft avatar Sep 30 '24 14:09 AtishayMsft

Thanks for implementing the changes @cjsut . Changes in this PR have been validated and merged in #33436

AtishayMsft avatar Jan 22 '25 16:01 AtishayMsft