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.

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

feat(bar): provide more options for emphasis focus ('stack', … #20724

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 19 additions & 3 deletions src/util/states.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import ExtensionAPI from '../core/ExtensionAPI';
import ComponentModel from '../model/Component';
import { error } from './log';
import type ComponentView from '../view/Component';
import { BarSeriesOption } from '../chart/bar/BarSeries';

// Reserve 0 as default.
let _highlightNextDigit = 1;
Expand Down Expand Up @@ -427,6 +428,7 @@ export function allLeaveBlur(api: ExtensionAPI) {

export function blurSeries(
targetSeriesIndex: number,
targetDataIndex: number,
focus: InnerFocus,
blurScope: BlurScope,
api: ExtensionAPI
Expand All @@ -450,6 +452,7 @@ export function blurSeries(
}

const targetSeriesModel = ecModel.getSeriesByIndex(targetSeriesIndex);
const targetStack = targetSeriesModel.option.type === 'bar' && (targetSeriesModel.option as BarSeriesOption).stack;
Copy link
Contributor

Choose a reason for hiding this comment

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

Please use targetSeriesModel.get('type') instead of accessing option directly.

let targetCoordSys: CoordinateSystemMaster | CoordinateSystem = targetSeriesModel.coordinateSystem;
if (targetCoordSys && (targetCoordSys as CoordinateSystem).master) {
targetCoordSys = (targetCoordSys as CoordinateSystem).master;
Expand All @@ -460,6 +463,9 @@ export function blurSeries(
ecModel.eachSeries(function (seriesModel) {

const sameSeries = targetSeriesModel === seriesModel;
const sameStack = targetStack && seriesModel.option.type === 'bar'
&& (seriesModel.option as BarSeriesOption).stack === targetStack;

let coordSys: CoordinateSystemMaster | CoordinateSystem = seriesModel.coordinateSystem;
if (coordSys && (coordSys as CoordinateSystem).master) {
coordSys = (coordSys as CoordinateSystem).master;
Expand All @@ -478,13 +484,23 @@ export function blurSeries(
)) {
const view = api.getViewOfSeriesModel(seriesModel);
view.group.traverse(function (child) {
const sameDataIndex = (child as any).__dataIndex === targetDataIndex;
// For the elements that have been triggered by other components,
// and are still required to be highlighted,
// because the current is directly forced to blur the element,
// it will cause the focus self to be unable to highlight, so skip the blur of this element.
if ((child as ExtendedElement).__highByOuter && sameSeries && focus === 'self') {
return;
}
if (sameDataIndex && focus === 'dataIndex') {
return;
}
if (sameStack && focus === 'stackSeries') {
return;
}
if (sameStack && sameDataIndex && focus === 'stack') {
return;
}
singleEnterBlur(child);
});

Expand Down Expand Up @@ -570,7 +586,7 @@ export function blurSeriesFromHighlightPayload(
if (el) {
const ecData = getECData(el);
blurSeries(
seriesIndex, ecData.focus, ecData.blurScope, api
seriesIndex, ecData.dataIndex, ecData.focus, ecData.blurScope, api
);
}
else {
Expand All @@ -579,7 +595,7 @@ export function blurSeriesFromHighlightPayload(
const focus = seriesModel.get(['emphasis', 'focus']);
const blurScope = seriesModel.get(['emphasis', 'blurScope']);
if (focus != null) {
blurSeries(seriesIndex, focus, blurScope, api);
blurSeries(seriesIndex, dataIndex, focus, blurScope, api);
}
}
}
Expand Down Expand Up @@ -659,7 +675,7 @@ export function handleGlobalMouseOverForHighDown(
else {
// Try blur all in the related series. Then emphasis the hoverred.
// TODO. progressive mode.
blurSeries(ecData.seriesIndex, ecData.focus, ecData.blurScope, api);
blurSeries(ecData.seriesIndex, ecData.dataIndex, ecData.focus, ecData.blurScope, api);
if (ecData.focus === 'self') {
blurComponent(ecData.componentMainType, ecData.componentIndex, api);
}
Expand Down
2 changes: 1 addition & 1 deletion src/util/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1486,7 +1486,7 @@ export interface DefaultStatesMixin {
blur?: any
}

export type DefaultEmphasisFocus = 'none' | 'self' | 'series';
export type DefaultEmphasisFocus = 'none' | 'self' | 'series' | 'stack' | 'stackSeries' | 'dataIndex';

export interface DefaultStatesMixinEmphasis {
/**
Expand Down