-
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
[Area Chart] Support legend multi selection #33475
base: master
Are you sure you want to change the base?
Conversation
// 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; | ||
} |
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 is missing out on legend hovered condition.
…sers/srmukher/AreaMultiSel
📊 Bundle size report✅ No changes found |
Pull request demo site: URL |
@@ -194,6 +194,7 @@ export interface IAccessibilityProps { | |||
|
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.
🕵🏾♀️ 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 |
@@ -194,6 +194,7 @@ export interface IAccessibilityProps { | |||
|
|||
// @public | |||
export interface IAreaChartProps extends ICartesianChartProps { | |||
canSelectMultipleLegends?: 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.
@@ -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} |
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.
@@ -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} | |||
onChange={this._onLegendChange} |
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.
const filteredValues = | ||
this.state.selectedLegends.length > 0 | ||
? found.values.filter((value: { legend: string }) => this.state.selectedLegends.includes(value.legend)) | ||
: found.values; |
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.
move logic to function
Support legend multi selection for area chart