Skip to content

Commit 9e49534

Browse files
markov00markov00
authored
feat(brush): add multi axis brushing (#625)
This commit allows the consumer to configure the direction used for the brush tool. The direction is, by default, along the X-axis, but can be changed to be along the Y-axis or have a rectangular selection along both axes. For each Y-axis defined (usually determined by an associated `groupId`) we return a scaled set of `[min, max]` values. BREAKING CHANGE: The type used by the `BrushEndListener` is now in the following form `{ x?: [number, number]; y?: Array<{ groupId: GroupId; values: [number, number]; }> }` where `x` contains an array of `[min, max]` values, and the `y` property is an optional array of objects, containing the `GroupId` and the values of the brush for that specific axis. fix #587, fix #620
1 parent 43c5a59 commit 9e49534

25 files changed

Lines changed: 695 additions & 89 deletions

‎integration/page_objects/common.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,51 @@ class CommonPage {
132132
await page.mouse.click(element.left + mousePosition.x, element.top + mousePosition.y);
133133
}
134134

135+
/**
136+
* Drag mouse relative to element
137+
*
138+
* @param mousePosition
139+
* @param selector
140+
*/
141+
async dragMouseRelativeToDOMElement(
142+
start: { x: number; y: number },
143+
end: { x: number; y: number },
144+
selector: string,
145+
) {
146+
const element = await this.getBoundingClientRect(selector);
147+
await page.mouse.move(element.left + start.x, element.top + start.y);
148+
await page.mouse.down();
149+
await page.mouse.move(element.left + end.x, element.top + end.y);
150+
}
151+
152+
/**
153+
* Drop mouse
154+
*
155+
* @param mousePosition
156+
* @param selector
157+
*/
158+
async dropMouse() {
159+
await page.mouse.up();
160+
}
161+
162+
/**
163+
* Drag and drop mouse relative to element
164+
*
165+
* @param mousePosition
166+
* @param selector
167+
*/
168+
async dragAndDropMouseRelativeToDOMElement(
169+
start: { x: number; y: number },
170+
end: { x: number; y: number },
171+
selector: string,
172+
) {
173+
const element = await this.getBoundingClientRect(selector);
174+
await page.mouse.move(element.left + start.x, element.top + start.y);
175+
await page.mouse.down();
176+
await page.mouse.move(element.left + end.x, element.top + end.y);
177+
await page.mouse.up();
178+
}
179+
135180
/**
136181
* Expect an element given a url and selector from storybook
137182
*
@@ -201,6 +246,27 @@ class CommonPage {
201246
});
202247
}
203248

249+
/**
250+
* Expect a chart given a url from storybook with mouse move
251+
*
252+
* @param url Storybook url from knobs section
253+
* @param start - the start postion of mouse relative to chart
254+
* @param end - the end postion of mouse relative to chart
255+
* @param options
256+
*/
257+
async expectChartWithDragAtUrlToMatchScreenshot(
258+
url: string,
259+
start: { x: number; y: number },
260+
end: { x: number; y: number },
261+
options?: Omit<ScreenshotElementAtUrlOptions, 'action'>,
262+
) {
263+
const action = async () => await this.dragMouseRelativeToDOMElement(start, end, this.chartSelector);
264+
await this.expectChartAtUrlToMatchScreenshot(url, {
265+
...options,
266+
action,
267+
});
268+
}
269+
204270
/**
205271
* Loads storybook page from raw url, and waits for element
206272
*

‎integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-brush-tool-visually-looks-correct-1-snap.png‎

26.8 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-show-rectangular-brush-selection-1-snap.png‎

27.1 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-show-rectangular-brush-selection-90-degree-1-snap.png‎

26.6 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-show-x-brush-selection-1-snap.png‎

27.2 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-show-x-brush-selection-90-degree-1-snap.png‎

26.1 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-show-y-brush-selection-1-snap.png‎

26.5 KB
Loading

‎integration/tests/__image_snapshots__/interactions-test-ts-tooltips-rotation-90-show-y-brush-selection-90-degree-1-snap.png‎

27 KB
Loading

‎integration/tests/interactions.test.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,49 @@ describe('Tooltips', () => {
103103
},
104104
);
105105
});
106+
it('show rectangular brush selection', async () => {
107+
await common.expectChartWithDragAtUrlToMatchScreenshot(
108+
'http://localhost:9001/?path=/story/interactions--brush-tool',
109+
{ x: 100, y: 100 },
110+
{ x: 250, y: 250 },
111+
);
112+
});
113+
it('show y brush selection', async () => {
114+
await common.expectChartWithDragAtUrlToMatchScreenshot(
115+
'http://localhost:9001/?path=/story/interactions--brush-tool&knob-brush axis=y&knob-chartRotation=0',
116+
{ x: 100, y: 100 },
117+
{ x: 250, y: 250 },
118+
);
119+
});
120+
it('show x brush selection', async () => {
121+
await common.expectChartWithDragAtUrlToMatchScreenshot(
122+
'http://localhost:9001/?path=/story/interactions--brush-tool&knob-brush axis=x&knob-chartRotation=0',
123+
{ x: 100, y: 100 },
124+
{ x: 250, y: 250 },
125+
);
126+
});
127+
128+
it('show rectangular brush selection -90 degree', async () => {
129+
await common.expectChartWithDragAtUrlToMatchScreenshot(
130+
'http://localhost:9001/?path=/story/interactions--brush-tool&knob-brush axis=both&knob-chartRotation=-90',
131+
{ x: 100, y: 100 },
132+
{ x: 250, y: 250 },
133+
);
134+
});
135+
it('show y brush selection -90 degree', async () => {
136+
await common.expectChartWithDragAtUrlToMatchScreenshot(
137+
'http://localhost:9001/?path=/story/interactions--brush-tool&knob-brush axis=y&knob-chartRotation=-90',
138+
{ x: 100, y: 100 },
139+
{ x: 250, y: 250 },
140+
);
141+
});
142+
it('show x brush selection -90 degree', async () => {
143+
await common.expectChartWithDragAtUrlToMatchScreenshot(
144+
'http://localhost:9001/?path=/story/interactions--brush-tool&knob-brush axis=x&knob-chartRotation=-90',
145+
{ x: 100, y: 100 },
146+
{ x: 250, y: 250 },
147+
);
148+
});
106149
});
107150
it('should render corrent tooltip for split and y accessors', async () => {
108151
await common.expectChartWithMouseAtUrlToMatchScreenshot(

‎src/chart_types/xy_chart/renderer/dom/_brush.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
.echBrushTool {
22
position: absolute;
3+
top: 0;
4+
left: 0;
5+
margin: 0;
6+
padding: 0;
37
box-sizing: border-box;
48
overflow: hidden;
59
pointer-events: none;

0 commit comments

Comments
 (0)