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

[Area Chart] Support legend multi selection #33475

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

[Area Chart] Support legend multi selection #33475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
936c244
Support for multiple legend selection for Area chart
srmukher Dec 13, 2024
3691842
Adding example for legend multi select for area chart
srmukher Dec 16, 2024
950cbe2
Handle legend click in area chart
srmukher Dec 16, 2024
73f6397
Removing legend click logic as it is handled in legend component
srmukher Dec 16, 2024
b5419e1
Merge branch 'master' of https://github.com/microsoft/fluentui into u…
srmukher Dec 19, 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
1 change: 1 addition & 0 deletions packages/charts/react-charting/etc/react-charting.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ export interface IAccessibilityProps {

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.Left center.chromium.png 2616 Changed
Callout.Bottom Right Edge RTL.chromium.png 1593 Changed
Callout.Top center.chromium.png 2178 Changed
Callout.Bottom auto edge.chromium.png 2309 Changed
react-charting-LineChart 1 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-LineChart.Gaps.chromium.png 1 Changed

// @public
export interface IAreaChartProps extends ICartesianChartProps {
canSelectMultipleLegends?: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

canSelectMultipleLegends

remove

culture?: string;
data: IChartProps;
enableGradient?: boolean;
Expand Down
70 changes: 40 additions & 30 deletions packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export interface IAreaChartState extends IBasestate {
isShowCalloutPending: boolean;
/** focused point */
activePoint: string;
selectedLegends: string[];
}

export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartState> {
Expand Down Expand Up @@ -124,8 +125,8 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
super(props);
this._createSet = memoizeFunction(this._createDataSet);
this.state = {
selectedLegend: props.legendProps?.selectedLegend ?? '',
activeLegend: '',
selectedLegends: [],
activeLegend: undefined,
hoverXValue: '',
isCalloutVisible: false,
refSelected: null,
Expand Down Expand Up @@ -287,6 +288,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
const { data } = this.props;
const { lineChartData } = data;
// This will get the value of the X when mouse is on the chart
const { selectedLegends } = this.state;
const xOffset = this._xAxisRectScale.invert(pointer(mouseEvent)[0], document.getElementById(this._rectId)!);
const i = bisect(lineChartData![0].data, xOffset);
const d0 = lineChartData![0].data[i - 1] as ILineChartDataPoint;
Expand Down Expand Up @@ -338,16 +340,20 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
const pointToHighlightUpdated = this.state.nearestCircleToHighlight !== nearestCircleToHighlight;
// if no points need to be called out then don't show vertical line and callout card
if (found && pointToHighlightUpdated && !this.state.isShowCalloutPending) {
const filteredValues =
selectedLegends.length > 0
? found.values.filter((value: { legend: string }) => selectedLegends.includes(value.legend))
: found.values;
this.setState({
nearestCircleToHighlight,
isCalloutVisible: false,
isShowCalloutPending: true,
lineXValue: this._xAxisRectScale(pointToHighlight),
displayOfLine: InterceptVisibility.show,
isCircleClicked: false,
stackCalloutProps: found!,
YValueHover: found.values,
dataPointCalloutProps: found!,
stackCalloutProps: { ...found, values: filteredValues },
YValueHover: filteredValues,
dataPointCalloutProps: { ...found, values: filteredValues },
hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
xAxisCalloutAccessibilityData,
activePoint: '',
Expand Down Expand Up @@ -560,18 +566,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
this._chart = this._drawGraph(containerHeight, xAxis, yAxis, xElement!);
};

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

private _onLegendHover(legend: string): void {
this.setState({
activeLegend: legend,
Expand All @@ -580,7 +574,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt

private _onLegendLeave(): void {
this.setState({
activeLegend: '',
activeLegend: undefined,
});
}

Expand All @@ -600,9 +594,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
const legend: ILegend = {
title: singleChartData.legend,
color,
action: () => {
this._onLegendClick(singleChartData.legend);
},
hoverAction: () => {
this._handleChartMouseLeave();
this._onLegendHover(singleChartData.legend);
Expand All @@ -621,10 +612,16 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
enabledWrapLines={this.props.enabledLegendsWrapLines}
focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
{...this.props.legendProps}
canSelectMultipleLegends={this.props.canSelectMultipleLegends}
Copy link
Contributor

Choose a reason for hiding this comment

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

canSelectMultipleLegends={this.props.canSelectMultipleLegends}

this is not needed

onChange={this._onLegendChange}
Copy link
Contributor

Choose a reason for hiding this comment

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

_onLegendChange

onLegendsChange

/>
);
};

private _onLegendChange = (selectedLegends: string[]) => {
this.setState({ selectedLegends });
};

private _onDataPointClick = (func: (() => void) | undefined) => {
if (func) {
func();
Expand Down Expand Up @@ -776,6 +773,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
const circleId = `${this._circleId}_${index * this._stackedData[0].length + pointIndex}`;
const xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal;
lineColor = points[index]!.color!;
const legend = points[index]!.legend;
return (
<circle
key={circleId}
Expand All @@ -792,7 +790,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
onFocus={() => this._handleFocus(index, pointIndex, circleId)}
onBlur={this._handleBlur}
{...getSecureProps(pointOptions)}
r={this._getCircleRadius(xDataPoint, circleRadius, circleId)}
r={this._getCircleRadius(xDataPoint, circleRadius, circleId, legend)}
role="img"
aria-label={this._getAriaLabel(index, pointIndex)}
/>
Expand All @@ -807,6 +805,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
if (this.state.nearestCircleToHighlight === xDataPoint) {
const circleId = `${this._circleId}_${index * this._stackedData[0].length + pointIndex}`;
lineColor = points[index]!.color!;
const legend = points[index]!.legend;
graph.push(
<circle
key={circleId}
Expand All @@ -820,7 +819,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
onMouseOver={this._onRectMouseMove}
onClick={this._onDataPointClick.bind(this, points[index]!.data[pointIndex].onDataPointClick!)}
{...getSecureProps(pointOptions)}
r={this._getCircleRadius(xDataPoint, circleRadius, circleId)}
r={this._getCircleRadius(xDataPoint, circleRadius, circleId, legend)}
/>,
);
}
Expand Down Expand Up @@ -870,8 +869,14 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
return graph;
};

private _getCircleRadius = (xDataPoint: number, circleRadius: number, circleId: string): number => {
const { isCircleClicked, nearestCircleToHighlight, activePoint } = this.state;
private _getCircleRadius = (xDataPoint: number, circleRadius: number, circleId: string, legend: string): number => {
const { isCircleClicked, nearestCircleToHighlight, activePoint, selectedLegends } = this.state;

// Show the circle if no legends are selected or if the point's legend is in the selected legends
if (selectedLegends.length > 0 && !selectedLegends.includes(legend)) {
return 0;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

this is missing out on legend hovered condition.


if (isCircleClicked && nearestCircleToHighlight === xDataPoint) {
return 1;
} else if (nearestCircleToHighlight === xDataPoint || activePoint === circleId) {
Expand All @@ -895,15 +900,16 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
*/
private _legendHighlighted = (legend: string) => {
return (
this.state.selectedLegend === legend || (this.state.selectedLegend === '' && this.state.activeLegend === legend)
this.state.selectedLegends.includes(legend) ||
(this.state.selectedLegends.length === 0 && this.state.activeLegend === legend)
);
};

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

private _addDefaultColors = (lineChartData?: ILineChartPoints[]): ILineChartPoints[] => {
Expand All @@ -930,14 +936,18 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
const found: any = this._calloutPoints.find((e: { x: string | number }) => e.x === modifiedXVal);
// Show details in the callout for the focused point only
found.values = found.values.filter((e: { y: number }) => e.y === y);
const filteredValues =
this.state.selectedLegends.length > 0
? found.values.filter((value: { legend: string }) => this.state.selectedLegends.includes(value.legend))
: found.values;
Copy link
Contributor

Choose a reason for hiding this comment

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

move logic to function


this.setState({
refSelected: `#${circleId}`,
isCalloutVisible: true,
hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
YValueHover: found.values,
stackCalloutProps: found,
dataPointCalloutProps: found,
YValueHover: filteredValues,
stackCalloutProps: { ...found, values: filteredValues },
dataPointCalloutProps: { ...found, values: filteredValues },
activePoint: circleId,
});
};
Expand Down
6 changes: 6 additions & 0 deletions packages/charts/react-charting/src/components/AreaChart/AreaChart.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,12 @@ export interface IAreaChartProps extends ICartesianChartProps {
* The prop used to enable gradient fill color for the chart.
*/
enableGradient?: boolean;

/**
* @default false
* The prop used to enable multiple selection of legends.
*/
canSelectMultipleLegends?: boolean;
}

/**
Expand Down
43 changes: 43 additions & 0 deletions packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ interface IAreaChartBasicState {
height: number;
isCalloutselected: boolean;
showAxisTitles: boolean;
legendMultiSelect: boolean;
}

const options: IChoiceGroupOption[] = [
Expand All @@ -24,6 +25,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
height: 300,
isCalloutselected: false,
showAxisTitles: true,
legendMultiSelect: false,
};
}
public componentDidMount(): void {
Expand Down Expand Up @@ -68,6 +70,11 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
this.setState({ showAxisTitles: checked });
};

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

private _basicExample(): JSX.Element {
const chart1Points = [
{
Expand Down Expand Up @@ -162,11 +169,37 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
},
];

const chart2Points = chart1Points.map((point, index) => {
return {
x: point.x,
y: point.y + 5000,
xAxisCalloutData: point.xAxisCalloutData,
yAxisCalloutData: point.yAxisCalloutData,
};
});

const chart3Points = chart1Points.map((point, index) => {
return {
x: point.x,
y: point.y - 5000,
xAxisCalloutData: point.xAxisCalloutData,
yAxisCalloutData: point.yAxisCalloutData,
};
});

const chartPoints = [
{
legend: 'legend1',
data: chart1Points,
},
{
legend: 'legend2',
data: chart2Points,
},
{
legend: 'legend3',
data: chart3Points,
},
];

const chartData = {
Expand Down Expand Up @@ -208,6 +241,14 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
onChange={this._onToggleAxisTitlesCheckChange}
styles={{ root: { marginTop: '10px' } }}
/>
<Toggle
label="Select multiple legends"
onText="ON"
offText="OFF"
checked={this.state.legendMultiSelect}
onChange={this._onToggleLegendMultiSelect}
styles={{ root: { marginTop: '10px' } }}
/>
{this.state.showAxisTitles && (
<div style={rootStyle}>
<AreaChart
Expand All @@ -230,6 +271,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
enableReflow={true}
yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined}
xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined}
canSelectMultipleLegends={this.state.legendMultiSelect}
/>
</div>
)}
Expand All @@ -253,6 +295,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
) : null
}
enableReflow={true}
canSelectMultipleLegends={this.state.legendMultiSelect}
/>
</div>
)}
Expand Down
Loading