diff --git a/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step0.svg b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step0.svg new file mode 100644 index 0000000000..afb2ac65df --- /dev/null +++ b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step0.svg @@ -0,0 +1,336 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step1.svg b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step1.svg new file mode 100644 index 0000000000..7d845d6e70 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step1.svg @@ -0,0 +1,358 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step2.svg b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step2.svg new file mode 100644 index 0000000000..abe8ff27e3 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step2.svg @@ -0,0 +1,337 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step3.svg b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step3.svg new file mode 100644 index 0000000000..e14b3cf64a --- /dev/null +++ b/__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step3.svg @@ -0,0 +1,359 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step0.svg b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step0.svg new file mode 100644 index 0000000000..bb26e6a1f1 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step0.svg @@ -0,0 +1,419 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MODIFY + + + + + + + + + + + + + + + + + + + + PRERELEASE + + + + + + + + + + + + + + + + + + + + RELEASING + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step1.svg b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step1.svg new file mode 100644 index 0000000000..2011f0463a --- /dev/null +++ b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step1.svg @@ -0,0 +1,434 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MODIFY + + + + + + + + + + + + + + + + + + + + PRERELEASE + + + + + + + + + + + + + + + + + + + + RELEASING + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step2.svg b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step2.svg new file mode 100644 index 0000000000..62832e956b --- /dev/null +++ b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step2.svg @@ -0,0 +1,420 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MODIFY + + + + + + + + + + + + + + + + + + + + PRERELEASE + + + + + + + + + + + + + + + + + + + + RELEASING + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step3.svg b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step3.svg new file mode 100644 index 0000000000..55b4200e8b --- /dev/null +++ b/__tests__/integration/snapshots/interaction/commit-interval-fixed-corner-filter-no-element/step3.svg @@ -0,0 +1,406 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MODIFY + + + + + + + + + + + + + + + + + + + + PRERELEASE + + + + + + + + + + + + + + + + + + + + RELEASING + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-ordinal/step3.svg b/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-ordinal/step3.svg index 1f1b6467ea..bb6940092b 100644 --- a/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-ordinal/step3.svg +++ b/__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-ordinal/step3.svg @@ -153,7 +153,7 @@ id="g-svg-21" fill="rgba(170,170,170,1)" d="M 0,8 L 0,-8" - stroke="rgba(23,131,255,1)" + stroke="rgba(170,170,170,1)" stroke-width="2" class="legend-category-item-marker" visibility="visible" @@ -169,7 +169,7 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/__tests__/plots/interaction/change-size-polar-crosshairsXY-no-elements.ts b/__tests__/plots/interaction/change-size-polar-crosshairsXY-no-elements.ts new file mode 100644 index 0000000000..ac855279d4 --- /dev/null +++ b/__tests__/plots/interaction/change-size-polar-crosshairsXY-no-elements.ts @@ -0,0 +1,102 @@ +import { G2Spec } from '../../../src'; +import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter'; +import { step } from './utils'; + +export function changeSizePolarCrosshairsXYNoElements(): G2Spec { + const data = [ + { item: 'Design', type: 'a', score: 70 }, + { item: 'Design', type: 'b', score: 30 }, + { item: 'Development', type: 'a', score: 60 }, + { item: 'Development', type: 'b', score: 70 }, + { item: 'Marketing', type: 'a', score: 50 }, + { item: 'Marketing', type: 'b', score: 60 }, + { item: 'Users', type: 'a', score: 40 }, + { item: 'Users', type: 'b', score: 50 }, + { item: 'Test', type: 'a', score: 60 }, + { item: 'Test', type: 'b', score: 70 }, + { item: 'Language', type: 'a', score: 70 }, + { item: 'Language', type: 'b', score: 50 }, + { item: 'Technology', type: 'a', score: 50 }, + { item: 'Technology', type: 'b', score: 40 }, + { item: 'Support', type: 'a', score: 30 }, + { item: 'Support', type: 'b', score: 40 }, + { item: 'Sales', type: 'a', score: 60 }, + { item: 'Sales', type: 'b', score: 40 }, + { item: 'UX', type: 'a', score: 50 }, + { item: 'UX', type: 'b', score: 60 }, + ]; + + return { + type: 'view', + coordinate: { + type: 'polar', + }, + scale: { + x: { padding: 0.5, align: 0 }, + y: { tickCount: 5, domainMax: 80 }, + }, + autoFit: true, + data, + interaction: { + elementPointMove: true, + tooltip: { + crosshairs: true, + crosshairsStroke: 'red', + crosshairsLineDash: [4, 4], + }, + }, + axis: { + x: { + grid: true, + gridStrokeWidth: 1, + tick: false, + gridLineDash: [0, 0], + }, + y: { + zIndex: 1, + title: false, + gridConnect: 'line', + gridStrokeWidth: 1, + gridLineDash: [0, 0], + }, + }, + children: [ + { + type: 'area', + encode: { + x: 'item', + y: 'score', + color: 'type', + key: 'type', + }, + style: { + fillOpacity: 0.5, + }, + }, + { + type: 'line', + encode: { + x: 'item', + y: 'score', + color: 'type', + key: 'type', + }, + style: { + lineWidth: 2, + }, + }, + ], + }; +} + +changeSizePolarCrosshairsXYNoElements.steps = ({ canvas }) => { + const { document } = canvas; + const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME); + const [e0, e1] = elements; + return [ + step(e0, 'click'), + step(e0, 'click'), + step(e1, 'click'), + step(e0, 'click'), + ]; +}; diff --git a/__tests__/plots/interaction/commit-interval-fixed-corner-filter-no-element.ts b/__tests__/plots/interaction/commit-interval-fixed-corner-filter-no-element.ts new file mode 100644 index 0000000000..e2f0592051 --- /dev/null +++ b/__tests__/plots/interaction/commit-interval-fixed-corner-filter-no-element.ts @@ -0,0 +1,35 @@ +import { G2Spec } from '../../../src'; +import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter'; +import { commit } from '../../data/commit'; +import { step } from './utils'; + +export function commitIntervalFixedCornerFilterNoElement(): G2Spec { + return { + type: 'interval', + data: commit, + encode: { + x: 'name', + y: 'value', + color: 'name', + size: 80, + }, + style: { + radiusTopLeft: 10, + radiusTopRight: 20, + radiusBottomRight: 30, + radiusBottomLeft: 40, + }, + }; +} + +commitIntervalFixedCornerFilterNoElement.steps = ({ canvas }) => { + const { document } = canvas; + const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME); + const [e0, e1, e2] = elements; + return [ + step(e0, 'click'), + step(e0, 'click'), + step(e1, 'click'), + step(e2, 'click'), + ]; +}; diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts index 007c3cbd67..82819d9754 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -82,3 +82,5 @@ export { indicesLineCrosshairsXY } from './indices-line-crosshairs-xy'; export { changeSizePolarCrosshairsXY } from './change-size-polar-crosshairs-xy'; export { alphabetIntervalActiveMarkerType } from './alphabet-interval-activate-line-marker-type'; export { mockPieLegendFilter } from './mock-pie-legend-filter'; +export { commitIntervalFixedCornerFilterNoElement } from './commit-interval-fixed-corner-filter-no-element'; +export { changeSizePolarCrosshairsXYNoElements } from './change-size-polar-crosshairsXY-no-elements'; diff --git a/src/interaction/legendFilter.ts b/src/interaction/legendFilter.ts index a7000179ee..b59a83bfff 100644 --- a/src/interaction/legendFilter.ts +++ b/src/interaction/legendFilter.ts @@ -126,7 +126,6 @@ function legendFilterOrdinal( const index = selectedValues.indexOf(value); if (index === -1) selectedValues.push(value); else selectedValues.splice(index, 1); - if (selectedValues.length === 0) selectedValues.push(...items.map(datum)); await filter(selectedValues); updateLegendState(); diff --git a/src/transform/filter.ts b/src/transform/filter.ts index 024f8e2823..d43b4c202e 100644 --- a/src/transform/filter.ts +++ b/src/transform/filter.ts @@ -1,5 +1,5 @@ import { deepMix } from '@antv/util'; -import { TransformComponent as TC } from '../runtime'; +import { G2Mark, TransformComponent as TC } from '../runtime'; import { FilterTransform } from '../spec'; import { defined } from '../utils/helper'; import { columnOf } from './utils/helper'; @@ -11,6 +11,54 @@ function normalizeValue(value) { else return [value, true]; } +function filterWhenNoElements(mark: G2Mark) { + const { encode } = mark; + + // keep y-axis + const noElementMark = { + ...mark, + encode: { + ...mark.encode, + y: { + ...mark.encode.y, + value: [], + }, + }, + }; + + const targetField = encode?.color?.field; + if (!encode || !targetField) { + return noElementMark; + } + + // 获取color的筛选源 + let filterObject; + + for (const [key, v] of Object.entries(encode)) { + if ((key === 'x' || key === 'y') && v.field === targetField) { + filterObject = { + ...filterObject, + [key]: { + ...v, + value: [], + }, + }; + } + } + + if (!filterObject) { + return noElementMark; + } + + return { + ...mark, + encode: { + ...mark.encode, + ...filterObject, + }, + }; +} + /** * The Filter transform filter channels. */ @@ -35,14 +83,16 @@ export const Filter: TC = (options = {}) => { } }) .filter(defined); - - // Skip empty filters. - if (filters.length === 0) return [I, mark]; - // Filter index and channels. const totalFilter = (i) => filters.every((f) => f(i)); const FI = I.filter(totalFilter); const newIndex = FI.map((_, i) => i); + + if (filters.length === 0) { + const targetMark = filterWhenNoElements(mark); + return [I, targetMark]; + } + const newEncodes = Object.entries(encode).map(([key, encode]) => { return [ key,