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

Aria omit columns #20038

Closed
wants to merge 28 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
ad1d487
feat(aria): omit columns
semla Jun 14, 2024
64b51e9
add test for excluding data from aria
semla Jun 15, 2024
5ad8f6e
exclude aria columns directly
semla Jun 15, 2024
a67fd83
Merge branch 'apache:master' into aria-omit-columns
semla Jun 17, 2024
99d9731
Merge branch 'apache:master' into aria-omit-columns
semla Jun 20, 2024
77580e9
fix(aria): filter columns and only aria
semla Jun 20, 2024
1b630cb
test(aria): add test for not modifying graph data
semla Jun 20, 2024
bcd1a81
fix(aria): filter columns, not data items
semla Jun 21, 2024
9cb5d9a
test(aria): update test to realistic use case
semla Jun 21, 2024
94fd435
Merge branch 'apache:master' into aria-omit-columns
semla Jul 15, 2024
da33a83
test(aria): rename test file
semla Jul 16, 2024
34b4eed
fix(legend): fix legend action is not isolated from other legend comp…
plainheart Jul 8, 2024
7b5e85b
test(legend): add a test case for legend action
plainheart Jul 9, 2024
d76ce4e
fix(legend): fix legend item is selected but corresponding series may…
plainheart Jul 11, 2024
f2c165d
fix(legend): remove unused import
plainheart Jul 11, 2024
5a1ad78
fix(legend): remove duplicated type of legend select method name
plainheart Jul 11, 2024
1a456fa
fix(legend): return allSelectedMap rather than selectedMap
plainheart Jul 11, 2024
c74c28a
fix(candlestick): add back missing support for non-normal states sinc…
plainheart Jul 2, 2024
5bcac1c
fix(candlestick): disable emphasis state by default for forward compa…
plainheart Jul 2, 2024
c630017
fix(candelstick): still enable emphasis state by default
plainheart Jul 15, 2024
0ab51ee
perf(line): prebind context of `_changePolyState` function to current…
plainheart Jul 15, 2024
212ee25
feature(axis): add feature to remove SplitLine on specified tick
Jul 4, 2024
01c2e6e
fix(pie): Missing pie chart label display. close #20070
Jun 25, 2024
b3eac27
fix(pie): fix some labels may not show #20074
Jul 9, 2024
1577bce
chore(deps-dev): bump socket.io-parser in /test/runTest
dependabot[bot] Jul 23, 2024
1a06ff8
fix(axis): ticks overflowing grid area with dataZoom #20185
Ovilia Jul 24, 2024
50339df
perf(aria): use functions from zrender
semla Jul 26, 2024
9a65f9d
test(aria): also test values that should exist
semla Jul 26, 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: 0 additions & 1 deletion src/chart/candlestick/CandlestickSeries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ class CandlestickSeriesModel extends SeriesModel<CandlestickSeriesOption> {
},

emphasis: {
scale: true,
itemStyle: {
borderWidth: 2
}
Expand Down
23 changes: 17 additions & 6 deletions src/chart/candlestick/CandlestickView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import * as zrUtil from 'zrender/src/core/util';
import ChartView from '../../view/Chart';
import * as graphic from '../../util/graphic';
import { setStatesStylesFromModel } from '../../util/states';
import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
import Path, { PathProps } from 'zrender/src/graphic/Path';
import {createClipPath} from '../helper/createClipPathFromCoordSys';
import CandlestickSeriesModel, { CandlestickDataItemOption } from './CandlestickSeries';
Expand All @@ -33,6 +33,7 @@ import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
import Model from '../../model/Model';
import { saveOldStyle } from '../../animation/basicTransition';
import Element from 'zrender/src/Element';
import { getBorderColor, getColor } from './candlestickVisual';

const SKIP_PROPS = ['color', 'borderColor'] as const;

Expand Down Expand Up @@ -294,6 +295,19 @@ function setBoxCommon(el: NormalBoxPath, data: SeriesData, dataIndex: number, is
el.__simpleBox = isSimpleBox;

setStatesStylesFromModel(el, itemModel);

const sign = data.getItemLayout(dataIndex).sign;
zrUtil.each(el.states, (state, stateName) => {
const stateModel = itemModel.getModel(stateName as any);
const color = getColor(sign, stateModel);
const borderColor = getBorderColor(sign, stateModel) || color;
const stateStyle = state.style || (state.style = {});
color && (stateStyle.fill = color);
borderColor && (stateStyle.stroke = borderColor);
});

const emphasisModel = itemModel.getModel('emphasis');
toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
}

function transInit(points: number[][], itemLayout: CandlestickItemLayout) {
Expand Down Expand Up @@ -391,12 +405,9 @@ function createLarge(

function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickSeriesModel, data: SeriesData) {
// TODO put in visual?
let borderColor = seriesModel.get(['itemStyle', sign > 0 ? 'borderColor' : 'borderColor0'])
const borderColor = getBorderColor(sign, seriesModel)
// Use color for border color by default.
|| seriesModel.get(['itemStyle', sign > 0 ? 'color' : 'color0']);
if (sign === 0) {
borderColor = seriesModel.get(['itemStyle', 'borderColorDoji']);
}
|| getColor(sign, seriesModel);

// Color must be excluded.
// Because symbol provide setColor individually to set fill and stroke
Expand Down
31 changes: 15 additions & 16 deletions src/chart/candlestick/candlestickVisual.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,21 @@ const dojiBorderColorQuery = ['itemStyle', 'borderColorDoji'] as const;
const positiveColorQuery = ['itemStyle', 'color'] as const;
const negativeColorQuery = ['itemStyle', 'color0'] as const;

export function getColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
return model.get(
sign > 0 ? positiveColorQuery : negativeColorQuery
);
}

export function getBorderColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
return model.get(
sign === 0 ? dojiBorderColorQuery
: sign > 0
? positiveBorderColorQuery
: negativeBorderColorQuery
);
}

const candlestickVisual: StageHandler = {

seriesType: 'candlestick',
Expand All @@ -39,22 +54,6 @@ const candlestickVisual: StageHandler = {
performRawSeries: true,

reset: function (seriesModel: CandlestickSeriesModel, ecModel) {

function getColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
return model.get(
sign > 0 ? positiveColorQuery : negativeColorQuery
);
}

function getBorderColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
return model.get(
sign === 0 ? dojiBorderColorQuery
: sign > 0
? positiveBorderColorQuery
: negativeBorderColorQuery
);
}

// Only visible series has each data be visual encoded
if (ecModel.isSeriesFiltered(seriesModel)) {
return;
Expand Down
6 changes: 3 additions & 3 deletions src/chart/line/LineView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -624,6 +624,8 @@ class LineView extends ChartView {

this._symbolDraw = symbolDraw;
this._lineGroup = lineGroup;

this._changePolyState = zrUtil.bind(this._changePolyState, this);
}

render(seriesModel: LineSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
Expand Down Expand Up @@ -885,9 +887,7 @@ class LineView extends ChartView {
toggleHoverEmphasis(polygon, focus, blurScope, emphasisDisabled);
}

const changePolyState = (toState: DisplayState) => {
this._changePolyState(toState);
};
const changePolyState = this._changePolyState;

data.eachItemGraphicEl(function (el) {
// Switch polyline / polygon state if element changed its state.
Expand Down
2 changes: 1 addition & 1 deletion src/chart/pie/labelLayout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ function adjustSingleSide(
const rA = r + item.len;
const rA2 = rA * rA;
// Use ellipse implicit function to calculate x
const dx = Math.sqrt((1 - Math.abs(dy * dy / rB2)) * rA2);
const dx = Math.sqrt(Math.abs((1 - dy * dy / rB2) * rA2));
const newX = cx + (dx + item.len2) * dir;
const deltaX = newX - item.label.x;
const newTargetWidth = item.targetTextWidth - deltaX * dir;
Expand Down
11 changes: 9 additions & 2 deletions src/component/axis/CartesianAxisView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
const splitLineModel = axisModel.getModel('splitLine');
const lineStyleModel = splitLineModel.getModel('lineStyle');
let lineColors = lineStyleModel.get('color');
const showMinLine = splitLineModel.get('showMinLine') !== false;
const showMaxLine = splitLineModel.get('showMaxLine') !== false;

lineColors = zrUtil.isArray(lineColors) ? lineColors : [lineColors];

Expand All @@ -142,6 +144,12 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
for (let i = 0; i < ticksCoords.length; i++) {
const tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);

if ((i === 0 && !showMinLine) || (i === ticksCoords.length - 1 && !showMaxLine)) {
continue;
}

const tickValue = ticksCoords[i].tickValue;

if (isHorizontal) {
p1[0] = tickCoord;
p1[1] = gridRect.y;
Expand All @@ -156,9 +164,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
}

const colorIndex = (lineCount++) % lineColors.length;
const tickValue = ticksCoords[i].tickValue;
const line = new graphic.Line({
anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
anid: tickValue != null ? 'line_' + tickValue : null,
autoBatch: true,
shape: {
x1: p1[0],
Expand Down
3 changes: 2 additions & 1 deletion src/component/legend/LegendView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,8 @@ class LegendView extends ComponentView {
},
onclick() {
api.dispatchAction({
type: type === 'all' ? 'legendAllSelect' : 'legendInverseSelect'
type: type === 'all' ? 'legendAllSelect' : 'legendInverseSelect',
legendId: legendModel.id
});
}
});
Expand Down
96 changes: 59 additions & 37 deletions src/component/legend/legendAction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,59 +17,81 @@
* under the License.
*/

// @ts-nocheck
import {curry, each, hasOwn} from 'zrender/src/core/util';
import { EChartsExtensionInstallRegisters } from '../../extension';
import { Payload } from '../../util/types';
import type GlobalModel from '../../model/Global';
import type LegendModel from './LegendModel';

import {curry, each} from 'zrender/src/core/util';
type LegendSelectMethodNames = 'select' | 'unSelect' | 'toggleSelected' | 'allSelect' | 'inverseSelect';

function legendSelectActionHandler(methodName, payload, ecModel) {
const selectedMap = {};
const isToggleSelect = methodName === 'toggleSelected';
let isSelected;
// Update all legend components
ecModel.eachComponent('legend', function (legendModel) {
if (isToggleSelect && isSelected != null) {
// Force other legend has same selected status
// Or the first is toggled to true and other are toggled to false
// In the case one legend has some item unSelected in option. And if other legend
// doesn't has the item, they will assume it is selected.
legendModel[isSelected ? 'select' : 'unSelect'](payload.name);
}
else if (methodName === 'allSelect' || methodName === 'inverseSelect') {
function legendSelectActionHandler(methodName: LegendSelectMethodNames, payload: Payload, ecModel: GlobalModel) {
const isAllSelect = methodName === 'allSelect' || methodName === 'inverseSelect';
const selectedMap: Record<string, boolean> = {};

const actionLegendIndices: number[] = [];
ecModel.eachComponent({ mainType: 'legend', query: payload }, function (legendModel: LegendModel) {
if (isAllSelect) {
legendModel[methodName]();
}
else {
legendModel[methodName](payload.name);
isSelected = legendModel.isSelected(payload.name);
}
const legendData = legendModel.getData();
each(legendData, function (model) {
const name = model.get('name');
// Wrap element
if (name === '\n' || name === '') {
return;
}
const isItemSelected = legendModel.isSelected(name);
if (selectedMap.hasOwnProperty(name)) {
// Unselected if any legend is unselected
selectedMap[name] = selectedMap[name] && isItemSelected;
}
else {
selectedMap[name] = isItemSelected;
}

makeSelectedMap(legendModel, selectedMap);

actionLegendIndices.push(legendModel.componentIndex);
});

const allSelectedMap: Record<string, boolean> = {};

// make selectedMap from all legend components
ecModel.eachComponent('legend', function (legendModel: LegendModel) {
each(selectedMap, function (isSelected, name) {
// Force other legend has same selected status
// Or the first is toggled to true and other are toggled to false
// In the case one legend has some item unSelected in option. And if other legend
// doesn't has the item, they will assume it is selected.
legendModel[isSelected ? 'select' : 'unSelect'](name);
});

makeSelectedMap(legendModel, allSelectedMap);
});

// Return the event explicitly
return (methodName === 'allSelect' || methodName === 'inverseSelect')
return isAllSelect
? {
selected: selectedMap
selected: allSelectedMap,
// return legendIndex array to tell the developers which legends are allSelect / inverseSelect
legendIndex: actionLegendIndices
}
: {
name: payload.name,
selected: selectedMap
selected: allSelectedMap
};
}

export function installLegendAction(registers) {
function makeSelectedMap(legendModel: LegendModel, out?: Record<string, boolean>) {
const selectedMap: Record<string, boolean> = out || {};
each(legendModel.getData(), function (model) {
const name = model.get('name');
// Wrap element
if (name === '\n' || name === '') {
return;
}
const isItemSelected = legendModel.isSelected(name);
if (hasOwn(selectedMap, name)) {
// Unselected if any legend is unselected
selectedMap[name] = selectedMap[name] && isItemSelected;
}
else {
selectedMap[name] = isItemSelected;
}
});
return selectedMap;
}

export function installLegendAction(registers: EChartsExtensionInstallRegisters) {
/**
* @event legendToggleSelect
* @type {Object}
Expand Down Expand Up @@ -113,4 +135,4 @@ export function installLegendAction(registers) {
'legendUnSelect', 'legendunselected',
curry(legendSelectActionHandler, 'unSelect')
);
}
}
4 changes: 2 additions & 2 deletions src/coord/Axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ function fixOnBandTicksCoords(
let diffSize;
if (ticksLen === 1) {
ticksCoords[0].coord = axisExtent[0];
last = ticksCoords[1] = {coord: axisExtent[1]};
last = ticksCoords[1] = {coord: axisExtent[1], tickValue: ticksCoords[0].tickValue};
}
else {
const crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
Expand All @@ -315,7 +315,7 @@ function fixOnBandTicksCoords(
const dataExtent = axis.scale.getExtent();
diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue;

last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize};
last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize, tickValue: dataExtent[1] + 1};

ticksCoords.push(last);
}
Expand Down
6 changes: 5 additions & 1 deletion src/coord/axisCommonTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,11 @@ interface MinorTickOption {

interface SplitLineOption {
show?: boolean,
interval?: 'auto' | number | ((index:number, value: string) => boolean)
interval?: 'auto' | number | ((index:number, value: string) => boolean),
// true | false
showMinLine?: boolean,
// true | false
showMaxLine?: boolean,
// colors will display in turn
lineStyle?: LineStyleOption<ZRColor | ZRColor[]>
}
Expand Down
2 changes: 2 additions & 0 deletions src/coord/axisDefault.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ const defaultOption: AxisBaseOption = {
},
splitLine: {
show: true,
showMinLine: true,
showMaxLine: true,
lineStyle: {
color: ['#E0E6F1'],
width: 1,
Expand Down
9 changes: 7 additions & 2 deletions src/coord/axisTickLabelBuilder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,11 @@ export function createAxisLabels(axis: Axis): {
const custom = axis.getLabelModel().get('customValues');
if (custom) {
const labelFormatter = makeLabelFormatter(axis);
const extent = axis.scale.getExtent();
const tickNumbers = tickValuesToNumbers(axis, custom);
const ticks = zrUtil.filter(tickNumbers, val => val >= extent[0] && val <= extent[1]);
return {
labels: tickValuesToNumbers(axis, custom).map(numval => {
labels: zrUtil.map(ticks, numval => {
const tick = {value: numval};
return {
formattedLabel: labelFormatter(tick),
Expand Down Expand Up @@ -115,8 +118,10 @@ export function createAxisTicks(axis: Axis, tickModel: AxisBaseModel): {
} {
const custom = axis.getTickModel().get('customValues');
if (custom) {
const extent = axis.scale.getExtent();
const tickNumbers = tickValuesToNumbers(axis, custom);
return {
ticks: tickValuesToNumbers(axis, custom)
ticks: zrUtil.filter(tickNumbers, val => val >= extent[0] && val <= extent[1])
};
}
// Only ordinal scale support tick interval
Expand Down
3 changes: 2 additions & 1 deletion src/util/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1733,7 +1733,8 @@ export interface AriaLabelOption {
separator?: {
middle?: string;
end?: string;
}
},
excludeDataId?: number[]
}
}

Expand Down
4 changes: 3 additions & 1 deletion src/visual/aria.ts
Original file line number Diff line number Diff line change
Expand Up @@ -218,11 +218,13 @@ export default function ariaVisual(ecModel: GlobalModel, api: ExtensionAPI) {

const middleSeparator = labelModel.get(['data', 'separator', 'middle']);
const endSeparator = labelModel.get(['data', 'separator', 'end']);
const excludeDataId = labelModel.get(['data', 'excludeDataId']);
const dataLabels = [];
for (let i = 0; i < data.count(); i++) {
if (i < maxDataCnt) {
const name = data.getName(i);
const value = data.getValues(i);
const value = !excludeDataId ? data.getValues(i)
: zrUtil.filter(data.getValues(i), (v, j) => zrUtil.indexOf(excludeDataId, j) === -1);
const dataLabel = labelModel.get(['data', name ? 'withName' : 'withoutName']);
dataLabels.push(
replace(dataLabel, {
Expand Down
Loading