Skip to content
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

Open
wants to merge 16 commits into
base: master
Choose a base branch
from

Conversation

srmukher
Copy link
Contributor

Support for multiple legend selection for Vertical Stacked Bar Chart

image

@srmukher srmukher requested a review from a team as a code owner December 13, 2024 11:05
Copy link

github-actions bot commented Dec 13, 2024

📊 Bundle size report

✅ No changes found

Copy link

Pull request demo site: URL

@srmukher srmukher force-pushed the users/srmukher/legendsMultiSelectVBC branch from 796309f to 5ede767 Compare December 13, 2024 11:28
@srmukher srmukher force-pushed the users/srmukher/legendsMultiSelectVBC branch from 5ede767 to 0235b7f Compare December 13, 2024 11:40
@srmukher srmukher force-pushed the users/srmukher/legendsMultiSelectVBC branch from 0e57dba to cdde37e Compare December 19, 2024 13:36
@srmukher srmukher force-pushed the users/srmukher/legendsMultiSelectVBC branch from 395c027 to 2c55a79 Compare December 22, 2024 18:44
@srmukher srmukher changed the title Support for multiple legend selection for Vertical Stacked Bar Chart [VSBC] Support for multiple legend selection for Vertical Stacked Bar Chart Dec 23, 2024
@@ -140,8 +141,8 @@ export class VerticalStackedBarChartBase

this.state = {
isCalloutVisible: false,
selectedLegend: props.legendProps?.selectedLegend ?? '',
activeLegend: '',
selectedLegends: [],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

selectedLegends: [],

use same prop to initialize as selectedLegend

this.state.selectedLegend === legendTitle ||
(this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)
);
private _legendHighlighted = (legendTitle: string): boolean => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_legendHighlighted

_isLegendHighlighted

Copy link
Contributor Author

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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stack.chartData.length > 0 || (stack.lineData?.length ?? 0) > 0,

is this condition possible

Copy link
Contributor Author

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%' ]

Without this check, it will show something like:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants