2019-09-17 20:57:53 +02:00
|
|
|
/*
|
|
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
|
|
* or more contributor license agreements. Licensed under the Elastic License;
|
|
|
|
* you may not use this file except in compliance with the Elastic License.
|
|
|
|
*/
|
|
|
|
|
2020-09-29 19:00:29 +02:00
|
|
|
import { xyVisualization } from './visualization';
|
2019-09-17 20:57:53 +02:00
|
|
|
import { Position } from '@elastic/charts';
|
|
|
|
import { Operation } from '../types';
|
2019-10-02 19:21:39 +02:00
|
|
|
import { State, SeriesType } from './types';
|
2020-02-13 13:54:51 +01:00
|
|
|
import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
|
2020-09-15 11:24:02 +02:00
|
|
|
import { LensIconChartBar } from '../assets/chart_bar';
|
2019-09-17 20:57:53 +02:00
|
|
|
|
|
|
|
function exampleState(): State {
|
|
|
|
return {
|
|
|
|
legend: { position: Position.Bottom, isVisible: true },
|
|
|
|
preferredSeriesType: 'bar',
|
|
|
|
layers: [
|
|
|
|
{
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
splitAccessor: 'd',
|
|
|
|
xAccessor: 'a',
|
|
|
|
accessors: ['b', 'c'],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
describe('xy_visualization', () => {
|
2020-04-30 01:14:47 +02:00
|
|
|
describe('#getDescription', () => {
|
2019-10-02 19:21:39 +02:00
|
|
|
function mixedState(...types: SeriesType[]) {
|
|
|
|
const state = exampleState();
|
|
|
|
return {
|
|
|
|
...state,
|
|
|
|
layers: types.map((t, i) => ({
|
|
|
|
...state.layers[0],
|
|
|
|
layerId: `layer_${i}`,
|
|
|
|
seriesType: t,
|
|
|
|
})),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
it('should show mixed xy chart when multilple series types', () => {
|
|
|
|
const desc = xyVisualization.getDescription(mixedState('bar', 'line'));
|
|
|
|
|
2020-10-06 17:17:41 +02:00
|
|
|
expect(desc.label).toEqual('Mixed XY');
|
2019-10-02 19:21:39 +02:00
|
|
|
});
|
|
|
|
|
2019-10-23 22:28:18 +02:00
|
|
|
it('should show the preferredSeriesType if there are no layers', () => {
|
|
|
|
const desc = xyVisualization.getDescription(mixedState());
|
|
|
|
|
2020-09-15 11:24:02 +02:00
|
|
|
expect(desc.icon).toEqual(LensIconChartBar);
|
2020-10-06 17:17:41 +02:00
|
|
|
expect(desc.label).toEqual('Bar');
|
2019-10-23 22:28:18 +02:00
|
|
|
});
|
|
|
|
|
2019-10-02 19:21:39 +02:00
|
|
|
it('should show mixed horizontal bar chart when multiple horizontal bar types', () => {
|
|
|
|
const desc = xyVisualization.getDescription(
|
|
|
|
mixedState('bar_horizontal', 'bar_horizontal_stacked')
|
|
|
|
);
|
|
|
|
|
2020-10-06 17:17:41 +02:00
|
|
|
expect(desc.label).toEqual('Mixed H. bar');
|
2019-10-02 19:21:39 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should show bar chart when bar only', () => {
|
|
|
|
const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal'));
|
|
|
|
|
2020-10-06 17:17:41 +02:00
|
|
|
expect(desc.label).toEqual('H. Bar');
|
2019-10-02 19:21:39 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should show the chart description if not mixed', () => {
|
2020-10-06 17:17:41 +02:00
|
|
|
expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area');
|
|
|
|
expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line');
|
2019-10-02 19:21:39 +02:00
|
|
|
expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual(
|
2020-10-06 17:17:41 +02:00
|
|
|
'Stacked area'
|
2019-10-02 19:21:39 +02:00
|
|
|
);
|
|
|
|
expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual(
|
2020-10-06 17:17:41 +02:00
|
|
|
'H. Stacked bar'
|
2019-10-02 19:21:39 +02:00
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-04-30 01:14:47 +02:00
|
|
|
describe('#getVisualizationTypeId', () => {
|
|
|
|
function mixedState(...types: SeriesType[]) {
|
|
|
|
const state = exampleState();
|
|
|
|
return {
|
|
|
|
...state,
|
|
|
|
layers: types.map((t, i) => ({
|
|
|
|
...state.layers[0],
|
|
|
|
layerId: `layer_${i}`,
|
|
|
|
seriesType: t,
|
|
|
|
})),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
it('should show mixed when each layer is different', () => {
|
|
|
|
expect(xyVisualization.getVisualizationTypeId(mixedState('bar', 'line'))).toEqual('mixed');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show the preferredSeriesType if there are no layers', () => {
|
|
|
|
expect(xyVisualization.getVisualizationTypeId(mixedState())).toEqual('bar');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should combine multiple layers into one type', () => {
|
|
|
|
expect(
|
|
|
|
xyVisualization.getVisualizationTypeId(mixedState('bar_horizontal', 'bar_horizontal'))
|
|
|
|
).toEqual('bar_horizontal');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should return the subtype for single layers', () => {
|
|
|
|
expect(xyVisualization.getVisualizationTypeId(mixedState('area'))).toEqual('area');
|
|
|
|
expect(xyVisualization.getVisualizationTypeId(mixedState('line'))).toEqual('line');
|
|
|
|
expect(xyVisualization.getVisualizationTypeId(mixedState('area_stacked'))).toEqual(
|
|
|
|
'area_stacked'
|
|
|
|
);
|
|
|
|
expect(xyVisualization.getVisualizationTypeId(mixedState('bar_horizontal_stacked'))).toEqual(
|
|
|
|
'bar_horizontal_stacked'
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-09-17 20:57:53 +02:00
|
|
|
describe('#initialize', () => {
|
|
|
|
it('loads default state', () => {
|
|
|
|
const mockFrame = createMockFramePublicAPI();
|
|
|
|
const initialState = xyVisualization.initialize(mockFrame);
|
|
|
|
|
|
|
|
expect(initialState.layers).toHaveLength(1);
|
2020-03-17 14:57:52 +01:00
|
|
|
expect(initialState.layers[0].xAccessor).not.toBeDefined();
|
|
|
|
expect(initialState.layers[0].accessors).toHaveLength(0);
|
2019-09-17 20:57:53 +02:00
|
|
|
|
|
|
|
expect(initialState).toMatchInlineSnapshot(`
|
|
|
|
Object {
|
|
|
|
"layers": Array [
|
|
|
|
Object {
|
2020-03-17 14:57:52 +01:00
|
|
|
"accessors": Array [],
|
2019-09-17 20:57:53 +02:00
|
|
|
"layerId": "",
|
|
|
|
"position": "top",
|
2019-10-01 21:04:00 +02:00
|
|
|
"seriesType": "bar_stacked",
|
2019-09-17 20:57:53 +02:00
|
|
|
"showGridlines": false,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
"legend": Object {
|
|
|
|
"isVisible": true,
|
|
|
|
"position": "right",
|
|
|
|
},
|
2019-10-01 21:04:00 +02:00
|
|
|
"preferredSeriesType": "bar_stacked",
|
2019-10-25 18:09:41 +02:00
|
|
|
"title": "Empty XY chart",
|
2019-09-17 20:57:53 +02:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('loads from persisted state', () => {
|
|
|
|
expect(xyVisualization.initialize(createMockFramePublicAPI(), exampleState())).toEqual(
|
|
|
|
exampleState()
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
describe('#removeLayer', () => {
|
|
|
|
it('removes the specified layer', () => {
|
|
|
|
const prevState: State = {
|
|
|
|
...exampleState(),
|
|
|
|
layers: [
|
|
|
|
...exampleState().layers,
|
|
|
|
{
|
|
|
|
layerId: 'second',
|
|
|
|
seriesType: 'area',
|
|
|
|
splitAccessor: 'e',
|
|
|
|
xAccessor: 'f',
|
|
|
|
accessors: ['g', 'h'],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
expect(xyVisualization.removeLayer!(prevState, 'second')).toEqual(exampleState());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('#appendLayer', () => {
|
|
|
|
it('adds a layer', () => {
|
|
|
|
const layers = xyVisualization.appendLayer!(exampleState(), 'foo').layers;
|
|
|
|
expect(layers.length).toEqual(exampleState().layers.length + 1);
|
|
|
|
expect(layers[layers.length - 1]).toMatchObject({ layerId: 'foo' });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('#clearLayer', () => {
|
|
|
|
it('clears the specified layer', () => {
|
|
|
|
const layer = xyVisualization.clearLayer(exampleState(), 'first').layers[0];
|
|
|
|
expect(layer).toMatchObject({
|
2020-03-17 14:57:52 +01:00
|
|
|
accessors: [],
|
2020-01-14 18:06:51 +01:00
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'bar',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('#getLayerIds', () => {
|
|
|
|
it('returns layerids', () => {
|
|
|
|
expect(xyVisualization.getLayerIds(exampleState())).toEqual(['first']);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-03-17 14:57:52 +01:00
|
|
|
describe('#setDimension', () => {
|
|
|
|
it('sets the x axis', () => {
|
|
|
|
expect(
|
|
|
|
xyVisualization.setDimension({
|
|
|
|
prevState: {
|
|
|
|
...exampleState(),
|
|
|
|
layers: [
|
|
|
|
{
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
xAccessor: undefined,
|
|
|
|
accessors: [],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
layerId: 'first',
|
|
|
|
groupId: 'x',
|
|
|
|
columnId: 'newCol',
|
|
|
|
}).layers[0]
|
|
|
|
).toEqual({
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
xAccessor: 'newCol',
|
|
|
|
accessors: [],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('replaces the x axis', () => {
|
|
|
|
expect(
|
|
|
|
xyVisualization.setDimension({
|
|
|
|
prevState: {
|
|
|
|
...exampleState(),
|
|
|
|
layers: [
|
|
|
|
{
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
xAccessor: 'a',
|
|
|
|
accessors: [],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
layerId: 'first',
|
|
|
|
groupId: 'x',
|
|
|
|
columnId: 'newCol',
|
|
|
|
}).layers[0]
|
|
|
|
).toEqual({
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
xAccessor: 'newCol',
|
|
|
|
accessors: [],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('#removeDimension', () => {
|
|
|
|
it('removes the x axis', () => {
|
|
|
|
expect(
|
|
|
|
xyVisualization.removeDimension({
|
|
|
|
prevState: {
|
|
|
|
...exampleState(),
|
|
|
|
layers: [
|
|
|
|
{
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
xAccessor: 'a',
|
|
|
|
accessors: [],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
layerId: 'first',
|
|
|
|
columnId: 'a',
|
|
|
|
}).layers[0]
|
|
|
|
).toEqual({
|
|
|
|
layerId: 'first',
|
|
|
|
seriesType: 'area',
|
|
|
|
xAccessor: undefined,
|
|
|
|
accessors: [],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('#getConfiguration', () => {
|
2019-09-17 20:57:53 +02:00
|
|
|
let mockDatasource: ReturnType<typeof createMockDatasource>;
|
|
|
|
let frame: ReturnType<typeof createMockFramePublicAPI>;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
frame = createMockFramePublicAPI();
|
2020-03-17 14:57:52 +01:00
|
|
|
mockDatasource = createMockDatasource('testDatasource');
|
2019-09-17 20:57:53 +02:00
|
|
|
|
|
|
|
mockDatasource.publicAPIMock.getTableSpec.mockReturnValue([
|
|
|
|
{ columnId: 'd' },
|
|
|
|
{ columnId: 'a' },
|
|
|
|
{ columnId: 'b' },
|
|
|
|
{ columnId: 'c' },
|
|
|
|
]);
|
|
|
|
|
|
|
|
frame.datasourceLayers = {
|
|
|
|
first: mockDatasource.publicAPIMock,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2020-03-17 14:57:52 +01:00
|
|
|
it('should return options for 3 dimensions', () => {
|
|
|
|
const options = xyVisualization.getConfiguration({
|
|
|
|
state: exampleState(),
|
|
|
|
frame,
|
|
|
|
layerId: 'first',
|
|
|
|
}).groups;
|
|
|
|
expect(options).toHaveLength(3);
|
2020-05-22 09:08:58 +02:00
|
|
|
expect(options.map((o) => o.groupId)).toEqual(['x', 'y', 'breakdown']);
|
2019-09-17 20:57:53 +02:00
|
|
|
});
|
|
|
|
|
2020-03-17 14:57:52 +01:00
|
|
|
it('should only accept bucketed operations for x', () => {
|
|
|
|
const options = xyVisualization.getConfiguration({
|
|
|
|
state: exampleState(),
|
|
|
|
frame,
|
|
|
|
layerId: 'first',
|
|
|
|
}).groups;
|
2020-05-22 09:08:58 +02:00
|
|
|
const filterOperations = options.find((o) => o.groupId === 'x')!.filterOperations;
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-03-17 14:57:52 +01:00
|
|
|
const exampleOperation: Operation = {
|
|
|
|
dataType: 'number',
|
|
|
|
isBucketed: false,
|
|
|
|
label: 'bar',
|
|
|
|
};
|
|
|
|
const bucketedOps: Operation[] = [
|
|
|
|
{ ...exampleOperation, isBucketed: true, dataType: 'number' },
|
|
|
|
{ ...exampleOperation, isBucketed: true, dataType: 'string' },
|
|
|
|
{ ...exampleOperation, isBucketed: true, dataType: 'boolean' },
|
|
|
|
{ ...exampleOperation, isBucketed: true, dataType: 'date' },
|
|
|
|
];
|
|
|
|
const ops: Operation[] = [
|
|
|
|
...bucketedOps,
|
|
|
|
{ ...exampleOperation, dataType: 'number' },
|
|
|
|
{ ...exampleOperation, dataType: 'string' },
|
|
|
|
{ ...exampleOperation, dataType: 'boolean' },
|
|
|
|
{ ...exampleOperation, dataType: 'date' },
|
|
|
|
];
|
|
|
|
expect(ops.filter(filterOperations)).toEqual(bucketedOps);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not allow anything to be added to x', () => {
|
|
|
|
const options = xyVisualization.getConfiguration({
|
|
|
|
state: exampleState(),
|
|
|
|
frame,
|
|
|
|
layerId: 'first',
|
|
|
|
}).groups;
|
2020-05-22 09:08:58 +02:00
|
|
|
expect(options.find((o) => o.groupId === 'x')?.supportsMoreColumns).toBe(false);
|
2020-03-17 14:57:52 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should allow number operations on y', () => {
|
|
|
|
const options = xyVisualization.getConfiguration({
|
|
|
|
state: exampleState(),
|
|
|
|
frame,
|
|
|
|
layerId: 'first',
|
|
|
|
}).groups;
|
2020-05-22 09:08:58 +02:00
|
|
|
const filterOperations = options.find((o) => o.groupId === 'y')!.filterOperations;
|
2020-03-17 14:57:52 +01:00
|
|
|
const exampleOperation: Operation = {
|
|
|
|
dataType: 'number',
|
|
|
|
isBucketed: false,
|
|
|
|
label: 'bar',
|
|
|
|
};
|
|
|
|
const ops: Operation[] = [
|
|
|
|
{ ...exampleOperation, dataType: 'number' },
|
|
|
|
{ ...exampleOperation, dataType: 'string' },
|
|
|
|
{ ...exampleOperation, dataType: 'boolean' },
|
|
|
|
{ ...exampleOperation, dataType: 'date' },
|
|
|
|
];
|
2020-05-22 09:08:58 +02:00
|
|
|
expect(ops.filter(filterOperations).map((x) => x.dataType)).toEqual(['number']);
|
2019-09-17 20:57:53 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|