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.

Sign up for GitHub

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

fix(brush): force brush tool per panel #1071

Merged
merged 5 commits into from
Mar 11, 2021
Merged

fix(brush): force brush tool per panel #1071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fadde3c
fix(brush): force brush tool per panel
markov00 Mar 10, 2021
89da5c2
test: update unit tests to cover small multiples brush
markov00 Mar 11, 2021
57c86bf
fix: restrict area within panel including paddings
markov00 Mar 11, 2021
e08e859
chore: cleanup exported types/fn
markov00 Mar 11, 2021
11e94e9
test: revert changes on vertical areas story
markov00 Mar 11, 2021
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
323 changes: 281 additions & 42 deletions src/chart_types/xy_chart/state/selectors/get_brush_area.test.ts
View file
Open in desktop
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