Skip to content

Commit eb018cd

Browse files
fix: label overlap when legend deselected (#7215)
* fix: overlapDodgeY transform issue when filtered data is empty * chore: restore playground * test: update snapshots * test: add test
1 parent 3b275ab commit eb018cd

10 files changed

Lines changed: 1102 additions & 597 deletions

File tree

__tests__/integration/snapshots/interaction/change-size-polar-crosshairs-x-y-no-elements/step3.svg

Lines changed: 2 additions & 16 deletions
Loading

__tests__/integration/snapshots/interaction/stocks-line-label-overlap-dodge-y-legend-filter/step0.svg

Lines changed: 253 additions & 0 deletions
Loading

__tests__/integration/snapshots/interaction/stocks-line-label-overlap-dodge-y-legend-filter/step1.svg

Lines changed: 377 additions & 0 deletions
Loading

__tests__/integration/snapshots/interaction/stocks-line-label-overlap-dodge-y-legend-filter/step2.svg

Lines changed: 253 additions & 0 deletions
Loading
Lines changed: 127 additions & 0 deletions
Loading

__tests__/integration/snapshots/interaction/temperatures-line-legend-filter-ordinal/step3.svg

Lines changed: 1 addition & 8 deletions
Loading

__tests__/plots/interaction/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,4 @@ export { stateAgesSankeyHighlight } from './stateages-sankey-highlight';
9292
export { stocksLineSliderWheel } from './stocks-line-slider-wheel';
9393
export { aaplLineSliderWheel } from './aapl-line-slider-wheel';
9494
export { intervalSliderWheelTranspose } from './interval-slider-wheel-transpose';
95+
export { stocksLineLabelOverlapDodgeYLegendFilter } from './stocks-line-label-overlap-dodge-y-legend-filter';
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { G2Spec } from '../../../src';
2+
import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
3+
import { step } from './utils';
4+
5+
export function stocksLineLabelOverlapDodgeYLegendFilter(): G2Spec {
6+
return {
7+
type: 'line',
8+
data: {
9+
type: 'fetch',
10+
value: 'data/stocks2.csv',
11+
},
12+
encode: {
13+
x: (d) => new Date(d.date).getFullYear(),
14+
y: 'price',
15+
color: 'symbol',
16+
},
17+
transform: [{ type: 'groupX', y: 'mean' }],
18+
labels: [
19+
{
20+
text: 'price',
21+
transform: [{ type: 'overlapDodgeY' }],
22+
fontSize: 10,
23+
},
24+
],
25+
legend: {
26+
color: {
27+
defaultSelect: [],
28+
},
29+
},
30+
};
31+
}
32+
33+
stocksLineLabelOverlapDodgeYLegendFilter.steps = ({ canvas }) => {
34+
const { document } = canvas;
35+
const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
36+
const [e0, e1, e2] = elements;
37+
return [
38+
// Step 0: Initial state - all deselected (defaultSelect: [])
39+
step(e0, 'click'), // Step 1: Select first item
40+
step(e1, 'click'), // Step 2: Select second item
41+
step(e0, 'click'), // Step 3: Deselect first, only second selected
42+
step(e1, 'click'), // Step 4: Deselect second, back to all deselected
43+
];
44+
};

0 commit comments

Comments
 (0)