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.

Sign up for GitHub

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

[GVBC] Enabling multiple legend selection for Grouped Vertical Bar Chart #33511

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+141 −23
Open

[GVBC] Enabling multiple legend selection for Grouped Vertical Bar Chart #33511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de9425e
Enabling multiple legend selection for Grouped Vertical Bar Chart
srmukher Dec 23, 2024
f396313
Adding change file
srmukher Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-d99f14e6-dd3a-4f33-a8b3-9e28ea5bcfab.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv8 Visual Regression Report

Callout 4 screenshots
Image Name Diff(in Pixels) Image Type
Callout.No callout width specified.chromium.png 2319 Changed
Callout.Left top edge.chromium.png 1949 Changed
Callout.Right top edge.chromium.png 1127 Changed
Callout.Bottom auto edge.chromium.png 2309 Changed

"type": "patch",
"comment": "Enabling multiple legend selection for Grouped Vertical Bar Chart",
"packageName": "@fluentui/react-charting",
"email": "120183316+srmukher@users.noreply.github.com",
"dependentChangeType": "patch"
}
53 changes: 30 additions & 23 deletions ...ts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export interface IGroupedVerticalBarChartState extends IBasestate {
dataPointCalloutProps?: IGVBarChartSeriesPoint;
callOutAccessibilityData?: IAccessibilityProps;
calloutLegend: string;
selectedLegends: string[];
}

export class GroupedVerticalBarChartBase extends React.Component<
Expand Down Expand Up @@ -109,7 +110,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
dataForHoverCard: 0,
isCalloutVisible: false,
refSelected: null,
selectedLegend: props.legendProps?.selectedLegend ?? '',
selectedLegends: [],
Copy link
Contributor

Choose a reason for hiding this comment

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

[]

same as other PRs

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

xCalloutValue: '',
yCalloutValue: '',
YValueHover: [],
Expand Down Expand Up @@ -307,7 +308,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
this.setState({
refSelected: mouseEvent,
/** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend,
isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(pointData.legend),
calloutLegend: pointData.legend,
dataForHoverCard: pointData.data,
color: pointData.color,
Expand Down Expand Up @@ -343,7 +344,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
this.setState({
refSelected: obj.refElement,
/** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend,
isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(pointData.legend),
calloutLegend: pointData.legend,
dataForHoverCard: pointData.data,
color: pointData.color,
Expand Down Expand Up @@ -555,18 +556,6 @@ export class GroupedVerticalBarChartBase extends React.Component<
});
};

private _onLegendClick(legendTitle: string): void {
if (this.state.selectedLegend === legendTitle) {
this.setState({
selectedLegend: '',
});
} else {
this.setState({
selectedLegend: legendTitle,
});
}
}

private _onLegendHover(legendTitle: string): void {
this.setState({
activeLegend: legendTitle,
Expand Down Expand Up @@ -598,9 +587,6 @@ export class GroupedVerticalBarChartBase extends React.Component<
const legend: ILegend = {
title: point.legend,
color,
action: () => {
this._onLegendClick(point.legend);
},
hoverAction: () => {
this._handleChartMouseLeave();
this._onLegendHover(point.legend);
Expand All @@ -620,10 +606,26 @@ export class GroupedVerticalBarChartBase extends React.Component<
enabledWrapLines={this.props.enabledLegendsWrapLines}
focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
{...this.props.legendProps}
onChange={this._onLegendSelectionChange.bind(this)}
/>
);
};

private _onLegendSelectionChange(
selectedLegends: string[],
event: React.MouseEvent<HTMLButtonElement>,
currentLegend?: ILegend,
): void {
if (this.props.legendProps?.canSelectMultipleLegends) {
this.setState({ selectedLegends });
} else {
this.setState({ selectedLegends: selectedLegends.slice(-1) });
}
if (this.props.legendProps?.onChange) {
this.props.legendProps.onChange(selectedLegends, event, currentLegend);
}
}

private _getAxisData = (yAxisData: IAxisData) => {
if (yAxisData && yAxisData.yAxisDomainValues.length) {
const { yAxisDomainValues: domainValue } = yAxisData;
Expand All @@ -638,19 +640,24 @@ export class GroupedVerticalBarChartBase extends React.Component<
* 2. hovering: if there is no selected legend and the user hovers over it
*/
private _legendHighlighted = (legendTitle: string) => {
return (
this.state.selectedLegend === legendTitle ||
(this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)
);
return this._getHighlightedLegend().includes(legendTitle!);
};

/**
* This function checks if none of the legends is selected or hovered.
*/
private _noLegendHighlighted = () => {
return this.state.selectedLegend === '' && this.state.activeLegend === '';
return this._getHighlightedLegend().length === 0;
};

private _getHighlightedLegend() {
return this.state.selectedLegends.length > 0
? this.state.selectedLegends
: this.state.activeLegend
? [this.state.activeLegend]
: [];
}

private _getAriaLabel = (point: IGVBarChartSeriesPoint, xAxisPoint: string): string => {
const xValue = point.xAxisCalloutData || xAxisPoint;
const legend = point.legend;
Expand Down
104 changes: 104 additions & 0 deletions ...ples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ interface IGroupedBarChartState {
hideLabels: boolean;
enableGradient: boolean;
roundCorners: boolean;
selectMultipleLegends: boolean;
}

export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGroupedBarChartState> {
Expand All @@ -29,6 +30,7 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
hideLabels: false,
enableGradient: false,
roundCorners: false,
selectMultipleLegends: false,
};
}

Expand Down Expand Up @@ -60,6 +62,10 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
this.setState({ roundCorners: checked });
};

private _onLegendMultiSelectChange = (ev: React.MouseEvent<HTMLElement>, checked: boolean) => {
this.setState({ selectMultipleLegends: checked });
};

private _basicExample(): JSX.Element {
const data = [
{
Expand Down Expand Up @@ -87,6 +93,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%',
},
},
{
key: 'series3',
data: 54000,
color: getColorFromToken(DataVizPalette.color5),
legend: '2024',
xAxisCalloutData: '2024/04/30',
yAxisCalloutData: '44%',
callOutAccessibilityData: {
ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%',
},
},
{
key: 'series4',
data: 24000,
color: getColorFromToken(DataVizPalette.color6),
legend: '2021',
xAxisCalloutData: '2021/04/30',
yAxisCalloutData: '44%',
callOutAccessibilityData: {
ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%',
},
},
],
},
{
Expand Down Expand Up @@ -114,6 +142,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%',
},
},
{
key: 'series3',
data: 9000,
color: getColorFromToken(DataVizPalette.color5),
legend: '2024',
xAxisCalloutData: '2024/05/30',
yAxisCalloutData: '3%',
callOutAccessibilityData: {
ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%',
},
},
{
key: 'series4',
data: 12000,
color: getColorFromToken(DataVizPalette.color6),
legend: '2021',
xAxisCalloutData: '2021/05/30',
yAxisCalloutData: '3%',
callOutAccessibilityData: {
ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%',
},
},
],
},

Expand Down Expand Up @@ -142,6 +192,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%',
},
},
{
key: 'series3',
data: 60000,
color: getColorFromToken(DataVizPalette.color5),
legend: '2024',
xAxisCalloutData: '2024/06/30',
yAxisCalloutData: '50%',
callOutAccessibilityData: {
ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%',
},
},
{
key: 'series4',
data: 10000,
color: getColorFromToken(DataVizPalette.color6),
legend: '2021',
xAxisCalloutData: '2021/06/30',
yAxisCalloutData: '50%',
callOutAccessibilityData: {
ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%',
},
},
],
},
{
Expand Down Expand Up @@ -169,6 +241,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%',
},
},
{
key: 'series3',
data: 6000,
color: getColorFromToken(DataVizPalette.color5),
legend: '2024',
xAxisCalloutData: '2024/07/30',
yAxisCalloutData: '3%',
callOutAccessibilityData: {
ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%',
},
},
{
key: 'series4',
data: 15000,
color: getColorFromToken(DataVizPalette.color6),
legend: '2021',
xAxisCalloutData: '2021/07/30',
yAxisCalloutData: '3%',
callOutAccessibilityData: {
ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%',
},
},
],
},
];
Expand Down Expand Up @@ -234,6 +328,13 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
<Toggle label="Enable Gradient" onText="ON" offText="OFF" onChange={this._onEnableGradientChange} />
&nbsp;&nbsp;
<Toggle label="Rounded Corners" onText="ON" offText="OFF" onChange={this._onRoundCornersChange} />
&nbsp;&nbsp;
<Toggle
label="Select Multiple Legends"
onText="ON"
offText="OFF"
onChange={this._onLegendMultiSelectChange}
/>
</div>
<div style={rootStyle}>
<GroupedVerticalBarChart
Expand All @@ -248,6 +349,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr
enableReflow={true}
enableGradient={this.state.enableGradient}
roundCorners={this.state.roundCorners}
legendProps={{
canSelectMultipleLegends: this.state.selectMultipleLegends,
}}
/>
</div>
</>
Expand Down
Loading