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

[Horizontal Bar Chart With Axis] Enable multiple legend selection #33484

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+120 −55
Open

[Horizontal Bar Chart With Axis] Enable multiple legend selection #33484

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f255301
Enable multiple legend selection for Horizontal bar chart with axis
srmukher Dec 16, 2024
5d4b991
Adding handlers for selected legends
srmukher Dec 18, 2024
32cc743
Merge branch 'master' of https://github.com/microsoft/fluentui into u…
srmukher Dec 27, 2024
be94cea
Adding tests for legend multiselect and updating handlers
srmukher Dec 27, 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
102 changes: 66 additions & 36 deletions ...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export interface IHorizontalBarChartWithAxisState extends IBasestate {
callOutAccessibilityData?: IAccessibilityProps;
srmukher marked this conversation as resolved.
Show resolved Hide resolved
// eslint-disable-next-line @typescript-eslint/no-explicit-any
tooltipElement?: any;
selectedLegends: string[];
}

type ColorScale = (_p?: number) => string;
Expand Down Expand Up @@ -93,6 +94,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
activeXdataPoint: null,
YValueHover: [],
hoverXValue: '',
selectedLegends: [],
};
this._calloutId = getId('callout');
this._tooltipId = getId('HBCWATooltipID_');
Expand Down Expand Up @@ -336,8 +338,11 @@ export class HorizontalBarChartWithAxisBase extends React.Component<

const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point);
if (
(this.state.isLegendSelected === false ||
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
(!this._isLegendSelected() ||
(this._isLegendSelected() &&
(this._isSpecificLegendTitleSelected(point.legend!) ||
this._noLegendsSelected() ||
this._isSpecificLegendSelected(point.legend!)))) &&
this._calloutAnchorPoint !== point
) {
this._calloutAnchorPoint = point;
Expand Down Expand Up @@ -378,10 +383,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
refArrayIndexNumber: number,
color: string,
): void => {
if (
this.state.isLegendSelected === false ||
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)
) {
if (!this._isLegendSelected() || (this._isLegendSelected() && this._isSpecificLegendTitleSelected(point.legend!))) {
srmukher marked this conversation as resolved.
Show resolved Hide resolved
const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point);
this._refArray.forEach((obj: IRefArrayData, index: number) => {
if (refArrayIndexNumber === index) {
Expand Down Expand Up @@ -456,8 +458,9 @@ export class HorizontalBarChartWithAxisBase extends React.Component<

const bars = sortedBars.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => {
let shouldHighlight = true;
if (this.state.isLegendHovered || this.state.isLegendSelected) {
shouldHighlight = this.state.selectedLegendTitle === point.legend;
if (this._isLegendHovered() || this._isLegendSelected()) {
shouldHighlight =
this._isSpecificLegendTitleSelected(point.legend!) || this._isSpecificLegendSelected(point.legend!);
srmukher marked this conversation as resolved.
Show resolved Hide resolved
}
this._classNames = getClassNames(this.props.styles!, {
theme: this.props.theme!,
Expand Down Expand Up @@ -584,8 +587,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
const { useSingleColor = false } = this.props;
const bars = this._points.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => {
let shouldHighlight = true;
if (this.state.isLegendHovered || this.state.isLegendSelected) {
shouldHighlight = this.state.selectedLegendTitle === point.legend;
if (this._isLegendHovered() || this._isLegendSelected()) {
shouldHighlight = this._isSpecificLegendTitleSelected(point.legend!);
srmukher marked this conversation as resolved.
Show resolved Hide resolved
}
this._classNames = getClassNames(this.props.styles!, {
theme: this.props.theme!,
Expand Down Expand Up @@ -698,28 +701,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
});
};

private _onLegendClick(customMessage: string): void {
if (this.state.isLegendSelected) {
if (this.state.selectedLegendTitle === customMessage) {
this.setState({
isLegendSelected: false,
selectedLegendTitle: customMessage,
});
} else {
this.setState({
selectedLegendTitle: customMessage,
});
}
} else {
this.setState({
isLegendSelected: true,
selectedLegendTitle: customMessage,
});
}
}

private _onLegendHover(customMessage: string): void {
if (this.state.isLegendSelected === false) {
if (!this._isLegendSelected()) {
this.setState({
isLegendHovered: true,
selectedLegendTitle: customMessage,
Expand All @@ -728,11 +711,11 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
}

private _onLegendLeave(isLegendFocused?: boolean): void {
if (!!isLegendFocused || this.state.isLegendSelected === false) {
if (!!isLegendFocused || !this._isLegendSelected()) {
this.setState({
isLegendHovered: false,
selectedLegendTitle: '',
isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
isLegendSelected: isLegendFocused ? false : this._isLegendSelected(),
});
}
}
Expand All @@ -759,9 +742,6 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
const legend: ILegend = {
title: point.legend!,
color,
action: () => {
this._onLegendClick(point.legend!);
},
hoverAction: () => {
this._handleChartMouseLeave();
this._onLegendHover(point.legend!);
Expand All @@ -780,11 +760,61 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
overflowText={this.props.legendsOverflowText}
{...this.props.legendProps}
canSelectMultipleLegends={this.props.legendProps?.canSelectMultipleLegends}
srmukher marked this conversation as resolved.
Show resolved Hide resolved
onChange={this._onLegendChange}
/>
);
return legends;
};

private _isLegendSelected = (): boolean => {
return this.state.isLegendSelected!;
};

private _isSpecificLegendTitleSelected = (legend: string): boolean => {
return this.state.selectedLegendTitle === legend;
};

private _isLegendHovered = (): boolean => {
return this.state.isLegendHovered!;
};

private _isSpecificLegendSelected = (legend: string): boolean => {
return this.state.selectedLegends.indexOf(legend) > -1;
};

private _noLegendsSelected = (): boolean => {
return this.state.selectedLegends.length === 0;
};

private _onLegendChange = (
selectedLegends: string[],
event: React.MouseEvent<HTMLButtonElement>,
currentLegend?: ILegend,
) => {
this.setState({ selectedLegends });
if (this._isLegendSelected()) {
if (this._isSpecificLegendTitleSelected(currentLegend?.title!)) {
this.setState({
isLegendSelected: false,
srmukher marked this conversation as resolved.
Show resolved Hide resolved
selectedLegendTitle: currentLegend?.title!,
});
} else {
this.setState({
selectedLegendTitle: currentLegend?.title!,
});
}
} else {
this.setState({
isLegendSelected: true,
selectedLegendTitle: currentLegend?.title!,
});
}
if (this.props.legendProps?.onChange) {
this.props.legendProps.onChange(selectedLegends, event, currentLegend);
}
};

private _getAxisData = (yAxisData: IAxisData) => {
if (yAxisData && yAxisData.yAxisDomainValues.length) {
// For HBCWA x and y Values are swapped
Expand Down
15 changes: 15 additions & 0 deletions ...rc/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface IHorizontalBarChartWithAxisState {
useSingleColor: boolean;
enableGradient: boolean;
roundCorners: boolean;
selectMultipleLegends: boolean;
}

const options: IChoiceGroupOption[] = [
Expand All @@ -38,6 +39,7 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
useSingleColor: false,
enableGradient: false,
roundCorners: false,
selectMultipleLegends: false,
};
}

Expand Down Expand Up @@ -71,6 +73,10 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
this.setState({ roundCorners: checked });
};

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

private _basicExample(): JSX.Element {
const points: IHorizontalBarChartWithAxisDataPoint[] = [
{
Expand Down Expand Up @@ -148,6 +154,12 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
<Toggle label="Enable Gradient" onText="ON" offText="OFF" onChange={this._onToggleGradient} />
&nbsp;&nbsp;
<Toggle label="Rounded Corners" onText="ON" offText="OFF" onChange={this._onToggleRoundCorners} />
<Toggle
label="Select multiple legends"
onText="ON"
offText="OFF"
onChange={this._onToggleRoundMultipleLegendSelection}
/>
</div>
<br />

Expand All @@ -168,6 +180,9 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<
enableReflow={true}
enableGradient={this.state.enableGradient}
roundCorners={this.state.roundCorners}
legendProps={{
canSelectMultipleLegends: this.state.selectMultipleLegends,
}}
/>
</div>
</>
Expand Down
Loading