Skip to content

Commit

Permalink
Callout to be visible on;y if stack has any data
Browse files Browse the repository at this point in the history
  • Loading branch information
srmukher committed Dec 22, 2024
1 parent ba28aee commit 2c55a79
Showing 1 changed file with 9 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export class VerticalStackedBarChartBase extends React.Component<
const { isCalloutForStack = false } = this.props;
let shouldFocusStackOnly: boolean = false;
if (_isHavingLines) {
if (this.state.selectedLegends.length === 1) {
if (this._getHighlightedLegend().length === 1) {
shouldFocusStackOnly = false;
} else {
shouldFocusStackOnly = true;
Expand Down Expand Up @@ -419,7 +419,7 @@ export class VerticalStackedBarChartBase extends React.Component<
strokeLinecap="round"
stroke={lineObject[item][i].color}
transform={`translate(${xScaleBandwidthTranslate}, 0)`}
{...(this._isLegendHighlighted(item) && {
{...(this._legendHighlighted(item) && {
onMouseOver: this._lineHover.bind(this, lineObject[item][i - 1]),
onMouseLeave: this._lineHoverOut,
})}
Expand All @@ -439,11 +439,11 @@ export class VerticalStackedBarChartBase extends React.Component<
circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y)
}
onMouseOver={
this._isLegendHighlighted(item)
this._legendHighlighted(item)
? this._lineHover.bind(this, circlePoint)
: this._onStackHover.bind(this, circlePoint.xItem)
}
{...(this._isLegendHighlighted(item) && {
{...(this._legendHighlighted(item) && {
onMouseLeave: this._lineHoverOut,
})}
r={this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius}
Expand Down Expand Up @@ -478,9 +478,9 @@ export class VerticalStackedBarChartBase extends React.Component<
): { visibility: CircleVisbility; radius: number } => {
const { activeXAxisDataPoint } = this.state;
if (!this._noLegendHighlighted()) {
if (xAxisPoint === activeXAxisDataPoint && this._isLegendHighlighted(legend)) {
if (xAxisPoint === activeXAxisDataPoint && this._legendHighlighted(legend)) {
return { visibility: CircleVisbility.show, radius: 8 };
} else if (this._isLegendHighlighted(legend)) {
} else if (this._legendHighlighted(legend)) {
return { visibility: CircleVisbility.show, radius: 0.3 };
} else {
return { visibility: CircleVisbility.hide, radius: 0 };
Expand Down Expand Up @@ -660,10 +660,6 @@ export class VerticalStackedBarChartBase extends React.Component<
: [];
}

private _isLegendHighlighted = (legend: string): boolean => {
return this._getHighlightedLegend().indexOf(legend) > -1;
};

private _onRectHover(
xAxisPoint: string,
point: IVSChartDataPoint,
Expand Down Expand Up @@ -763,7 +759,7 @@ export class VerticalStackedBarChartBase extends React.Component<

this.setState({
refSelected,
isCalloutVisible: true,
isCalloutVisible: stack.chartData.length > 0 || (stack.lineData?.length ?? 0) > 0,
YValueHover: isLinesPresent
? [...lineData!.sort((a, b) => (a.data! < b.data! ? 1 : -1)), ...stack.chartData.slice().reverse()]
: stack.chartData.slice().reverse(),
Expand Down Expand Up @@ -1122,11 +1118,8 @@ export class VerticalStackedBarChartBase extends React.Component<
* 1. selection: if the user clicks on it
* 2. hovering: if there is no selected legend and the user hovers over it
*/
private _legendHighlighted = (legendTitle: string) => {
return (
this.state.selectedLegends.includes(legendTitle) ||
(this.state.selectedLegends.length === 0 && this.state.activeLegend === legendTitle)
);
private _legendHighlighted = (legendTitle: string): boolean => {
return this._getHighlightedLegend().includes(legendTitle);
};

/**
Expand Down

0 comments on commit 2c55a79

Please sign in to comment.