-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[VSBC] Support for multiple legend selection for Vertical Stacked Bar Chart #33466
base: master
Are you sure you want to change the base?
Conversation
📊 Bundle size report✅ No changes found |
Pull request demo site: URL |
change/@fluentui-react-charting-891c4db7-8af3-489e-80f8-b8a02b227536.json
Show resolved
Hide resolved
796309f
to
5ede767
Compare
5ede767
to
0235b7f
Compare
0e57dba
to
cdde37e
Compare
…sers/srmukher/legendsMultiSelectVBC
….com/microsoft/fluentui into users/srmukher/legendsMultiSelectVBC
...harts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
Outdated
Show resolved
Hide resolved
395c027
to
2c55a79
Compare
….com/microsoft/fluentui into users/srmukher/legendsMultiSelectVBC
…sers/srmukher/legendsMultiSelectVBC
@@ -140,8 +141,8 @@ export class VerticalStackedBarChartBase | |||
|
|||
this.state = { | |||
isCalloutVisible: false, | |||
selectedLegend: props.legendProps?.selectedLegend ?? '', | |||
activeLegend: '', | |||
selectedLegends: [], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.state.selectedLegend === legendTitle || | ||
(this.state.selectedLegend === '' && this.state.activeLegend === legendTitle) | ||
); | ||
private _legendHighlighted = (legendTitle: string): boolean => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
_legendHighlighted was already there, so didn't change the name. Will change
this.setState({ | ||
refSelected, | ||
isCalloutVisible: true, | ||
isCalloutVisible: stack.chartData.length > 0 || (stack.lineData?.length ?? 0) > 0, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, for stacks which does not have line data, checked it explicitly. For example, in the second data point, there is no line data.
[ { x: 80000, y: 20000, legend: 'Elephants', color: getColorFromToken(DataVizPalette.color11), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '8%', lineData: { y: 16000, yAxisCalloutData: '7%', }, }, { x: 92000, y: 45000, legend: 'Monkeys', color: getColorFromToken(DataVizPalette.color6), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19%' ]
Support for multiple legend selection for Vertical Stacked Bar Chart