Skip to content

Commit

Permalink
fix(brush): force brush tool per panel (elastic#1071)
Browse files Browse the repository at this point in the history 
This commit force the brush tool to work per panel when using small multiples. This behavior is built to works independently from the presence or absence of a small multiples configuration.
It works by forcing the brushable area to be constraint between the boundaries of the panel where the brushing event started. The brush selection doesn't move between panels and the coordinate of the mouse down event determines the limiting panel.

fix elastic#1070
  • Loading branch information
@markov00
markov00 committed Mar 11, 2021
1 parent 3236301 commit 28147b8
Show file tree
Hide file tree
Showing 8 changed files with 489 additions and 125 deletions.
323 changes: 281 additions & 42 deletions src/chart_types/xy_chart/state/selectors/get_brush_area.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,62 +17,301 @@
* under the License.
*/

import { Dimensions } from '../../../../utils/dimensions';
import { getBrushForXAxis, getBrushForYAxis, getBrushForBothAxis } from './get_brush_area';
import { MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs/specs';
import { MockStore } from '../../../../mocks/store/store';
import { ScaleType } from '../../../../scales/constants';
import { BrushAxis } from '../../../../specs/constants';
import { onMouseDown, onMouseUp, onPointerMove } from '../../../../state/actions/mouse';
import { getBrushAreaSelector } from './get_brush_area';

describe('getBrushArea Selector', () => {
it('should return the brush area', () => {
const chartDimensions: Dimensions = { left: 0, top: 0, width: 100, height: 110 };
describe('getBrushArea selector', () => {
describe('compute brush', () => {
it('along the X axis', () => {
const store = MockStore.default({ left: 0, top: 0, width: 100, height: 100 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd }),
MockSeriesSpec.line({
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
],
store,
);
store.dispatch(onMouseDown({ x: 10, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 30, y: 30 }, 1000));
const xBrushArea = getBrushAreaSelector(store.getState());
store.dispatch(onMouseUp({ x: 30, y: 30 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

const xBrushArea = getBrushForXAxis(chartDimensions, 0, { x: 10, y: 10 }, { x: 30, y: 30 });
expect(xBrushArea).toEqual({
top: 0,
left: 10,
width: 20,
height: 110,
expect(onBrushEnd).toHaveBeenCalled();
expect(onBrushEnd.mock.calls[0][0].x[0]).toBeCloseTo(0.1);
expect(onBrushEnd.mock.calls[0][0].x[1]).toBeCloseTo(0.3);

expect(xBrushArea).toEqual({
top: 0,
left: 10,
width: 20,
height: 100,
});
});
const yBrushArea = getBrushForYAxis(chartDimensions, 0, { x: 10, y: 10 }, { x: 30, y: 30 });
expect(yBrushArea).toEqual({
top: 10,
left: 0,
width: 100,
height: 20,

it('along the Y axis', () => {
const store = MockStore.default({ left: 0, top: 0, width: 100, height: 100 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd, brushAxis: BrushAxis.Y }),
MockSeriesSpec.line({
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
],
store,
);
store.dispatch(onMouseDown({ x: 10, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 30, y: 30 }, 1000));
const yBrushArea = getBrushAreaSelector(store.getState());
store.dispatch(onMouseUp({ x: 30, y: 30 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

expect(onBrushEnd).toHaveBeenCalled();
const brushData = onBrushEnd.mock.calls[0][0].y;

expect(brushData[0].extent[0]).toBeCloseTo(7);
expect(brushData[0].extent[1]).toBeCloseTo(9);

expect(yBrushArea).toEqual({
top: 10,
left: 0,
width: 100,
height: 20,
});
});

const bothBrushArea = getBrushForBothAxis(chartDimensions, { x: 10, y: 10 }, { x: 30, y: 30 });
expect(bothBrushArea).toEqual({
top: 10,
left: 10,
width: 20,
height: 20,
it('along both axis', () => {
const store = MockStore.default({ left: 0, top: 0, width: 100, height: 100 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd, brushAxis: BrushAxis.Both }),
MockSeriesSpec.line({
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
],
store,
);
store.dispatch(onMouseDown({ x: 10, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 30, y: 30 }, 1000));
const bothBrushArea = getBrushAreaSelector(store.getState());
store.dispatch(onMouseUp({ x: 30, y: 30 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

expect(onBrushEnd).toHaveBeenCalled();

expect(onBrushEnd.mock.calls[0][0].x[0]).toBeCloseTo(0.1);
expect(onBrushEnd.mock.calls[0][0].x[1]).toBeCloseTo(0.3);
expect(onBrushEnd.mock.calls[0][0].y[0].extent[0]).toBeCloseTo(7);
expect(onBrushEnd.mock.calls[0][0].y[0].extent[1]).toBeCloseTo(9);

expect(bothBrushArea).toEqual({
top: 10,
left: 10,
width: 20,
height: 20,
});
});
});

it('should return the brush area on rotated chart', () => {
const chartDimensions: Dimensions = { left: 0, top: 0, width: 100, height: 110 };
describe('compute brush on a rotated chart', () => {
it('along the X axis', () => {
const store = MockStore.default({ left: 0, top: 0, width: 100, height: 100 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd, rotation: 90 }),
MockSeriesSpec.line({
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
],
store,
);
store.dispatch(onMouseDown({ x: 10, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 30, y: 30 }, 1000));
const xBrushArea = getBrushAreaSelector(store.getState());
store.dispatch(onMouseUp({ x: 30, y: 30 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

const brushArea = getBrushForXAxis(chartDimensions, 90, { x: 10, y: 10 }, { x: 30, y: 30 });
expect(brushArea).toEqual({
top: 10,
left: 0,
width: 100,
height: 20,
expect(onBrushEnd).toHaveBeenCalled();
expect(onBrushEnd.mock.calls[0][0].x[0]).toBeCloseTo(0.1);
expect(onBrushEnd.mock.calls[0][0].x[1]).toBeCloseTo(0.3);

expect(xBrushArea).toEqual({
top: 10,
left: 0,
width: 100,
height: 20,
});
});

const yBrushArea = getBrushForYAxis(chartDimensions, 90, { x: 10, y: 10 }, { x: 30, y: 30 });
expect(yBrushArea).toEqual({
top: 0,
left: 10,
width: 20,
height: 110,
it('along the Y axis', () => {
const store = MockStore.default({ left: 0, top: 0, width: 100, height: 100 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd, brushAxis: BrushAxis.Y, rotation: 90 }),
MockSeriesSpec.line({
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
],
store,
);
store.dispatch(onMouseDown({ x: 10, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 30, y: 30 }, 1000));
const yBrushArea = getBrushAreaSelector(store.getState());
store.dispatch(onMouseUp({ x: 30, y: 30 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

expect(onBrushEnd).toHaveBeenCalled();
const brushData = onBrushEnd.mock.calls[0][0].y;

expect(brushData[0].extent[0]).toBeCloseTo(1);
expect(brushData[0].extent[1]).toBeCloseTo(3);

expect(yBrushArea).toEqual({
top: 0,
left: 10,
width: 20,
height: 100,
});
});

const bothBrushArea = getBrushForBothAxis(chartDimensions, { x: 10, y: 10 }, { x: 30, y: 30 });
it('along both axis', () => {
const store = MockStore.default({ left: 0, top: 0, width: 100, height: 100 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd, brushAxis: BrushAxis.Both, rotation: 90 }),
MockSeriesSpec.line({
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
],
store,
);
store.dispatch(onMouseDown({ x: 10, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 30, y: 30 }, 1000));
const bothBrushArea = getBrushAreaSelector(store.getState());
store.dispatch(onMouseUp({ x: 30, y: 30 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

expect(onBrushEnd).toHaveBeenCalled();

expect(onBrushEnd.mock.calls[0][0].x[0]).toBeCloseTo(0.1);
expect(onBrushEnd.mock.calls[0][0].x[1]).toBeCloseTo(0.3);
expect(onBrushEnd.mock.calls[0][0].y[0].extent[0]).toBeCloseTo(1);
expect(onBrushEnd.mock.calls[0][0].y[0].extent[1]).toBeCloseTo(3);

expect(bothBrushArea).toEqual({
top: 10,
left: 10,
width: 20,
height: 20,
});
});
});

describe('limit brush to single panel w/small multiples', () => {
const store = MockStore.default({ left: 0, top: 0, width: 200, height: 200 });
const onBrushEnd = jest.fn();
MockStore.addSpecs(
[
MockGlobalSpec.settingsNoMargins({ onBrushEnd }),
MockGlobalSpec.groupBy({ id: 'hSplit' }),
MockGlobalSpec.groupBy({ id: 'vSplit' }),
MockGlobalSpec.smallMultiple({ splitHorizontally: 'hSplit', splitVertically: 'vSplit' }),
MockSeriesSpec.line({
id: '1',
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 10],
[0.5, 5],
[1, 3],
],
}),
MockSeriesSpec.line({
id: '2',
xAccessor: 0,
yAccessors: [1],
xScaleType: ScaleType.Linear,
data: [
[0, 5],
[0.5, 2],
[1, 6],
],
}),
],
store,
);

store.dispatch(onMouseDown({ x: 150, y: 10 }, 0));
store.dispatch(onPointerMove({ x: 10, y: 150 }, 1000));
const bothBrushArea = getBrushAreaSelector(store.getState());
expect(bothBrushArea).toEqual({
top: 10,
left: 10,
width: 20,
height: 20,
top: 0,
left: 150,
width: -50,
height: 100,
});

store.dispatch(onMouseUp({ x: 10, y: 150 }, 1100));
store.getState().internalChartState?.eventCallbacks(store.getState());

expect(onBrushEnd).toHaveBeenCalled();

expect(onBrushEnd.mock.calls[0][0].x[0]).toBeCloseTo(0);
expect(onBrushEnd.mock.calls[0][0].x[1]).toBeCloseTo(0.5);
});
});
Loading

0 comments on commit 28147b8

Please sign in to comment.