[Maps] Fix mb-style interpolate style rule (#68413)
This commit is contained in:
parent
1f99144ef6
commit
77c8aee3cd
3 changed files with 100 additions and 66 deletions
|
@ -25,6 +25,21 @@ class MockField extends AbstractField {
|
|||
}
|
||||
}
|
||||
|
||||
export class MockMbMap {
|
||||
_paintPropertyCalls: unknown[];
|
||||
|
||||
constructor() {
|
||||
this._paintPropertyCalls = [];
|
||||
}
|
||||
setPaintProperty(...args: unknown[]) {
|
||||
this._paintPropertyCalls.push([...args]);
|
||||
}
|
||||
|
||||
getPaintPropertyCalls(): unknown[] {
|
||||
return this._paintPropertyCalls;
|
||||
}
|
||||
}
|
||||
|
||||
export const mockField: IField = new MockField({
|
||||
fieldName: 'foobar',
|
||||
origin: FIELD_ORIGIN.SOURCE,
|
||||
|
|
|
@ -110,6 +110,9 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
|
|||
|
||||
_getMbDataDrivenSize({ targetName, minSize, maxSize, minValue, maxValue }) {
|
||||
const lookup = this.supportsMbFeatureState() ? 'feature-state' : 'get';
|
||||
|
||||
const stops =
|
||||
minValue === maxValue ? [maxValue, maxSize] : [minValue, minSize, maxValue, maxSize];
|
||||
return [
|
||||
'interpolate',
|
||||
['linear'],
|
||||
|
@ -120,10 +123,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
|
|||
fieldName: targetName,
|
||||
fallback: 0,
|
||||
}),
|
||||
minValue,
|
||||
minSize,
|
||||
maxValue,
|
||||
maxSize,
|
||||
...stops,
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -4,8 +4,6 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { IVectorStyle } from '../vector_style';
|
||||
|
||||
jest.mock('ui/new_platform');
|
||||
jest.mock('../components/vector_style_editor', () => ({
|
||||
VectorStyleEditor: () => {
|
||||
|
@ -18,68 +16,22 @@ import { shallow } from 'enzyme';
|
|||
|
||||
// @ts-ignore
|
||||
import { DynamicSizeProperty } from './dynamic_size_property';
|
||||
import { StyleMeta } from '../style_meta';
|
||||
import { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants';
|
||||
import { DataRequest } from '../../../util/data_request';
|
||||
import { IVectorLayer } from '../../../layers/vector_layer/vector_layer';
|
||||
import { VECTOR_STYLES } from '../../../../../common/constants';
|
||||
import { IField } from '../../../fields/field';
|
||||
import { MockMbMap } from './__tests__/test_util';
|
||||
|
||||
// @ts-ignore
|
||||
const mockField: IField = {
|
||||
async getLabel() {
|
||||
return 'foobar_label';
|
||||
},
|
||||
getName() {
|
||||
return 'foobar';
|
||||
},
|
||||
getRootName() {
|
||||
return 'foobar';
|
||||
},
|
||||
getOrigin() {
|
||||
return FIELD_ORIGIN.SOURCE;
|
||||
},
|
||||
supportsFieldMeta() {
|
||||
return true;
|
||||
},
|
||||
canValueBeFormatted() {
|
||||
return true;
|
||||
},
|
||||
async getDataType() {
|
||||
return 'number';
|
||||
},
|
||||
};
|
||||
import { mockField, MockLayer, MockStyle } from './__tests__/test_util';
|
||||
|
||||
// @ts-ignore
|
||||
const mockLayer: IVectorLayer = {
|
||||
getDataRequest(): DataRequest | undefined {
|
||||
return undefined;
|
||||
},
|
||||
getStyle(): IVectorStyle {
|
||||
// @ts-ignore
|
||||
return {
|
||||
getStyleMeta(): StyleMeta {
|
||||
return new StyleMeta({
|
||||
geometryTypes: {
|
||||
isPointsOnly: true,
|
||||
isLinesOnly: false,
|
||||
isPolygonsOnly: false,
|
||||
},
|
||||
fieldMeta: {
|
||||
foobar: {
|
||||
range: { min: 0, max: 100, delta: 100 },
|
||||
categories: { categories: [] },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const makeProperty: DynamicSizeProperty = (options: object) => {
|
||||
return new DynamicSizeProperty(options, VECTOR_STYLES.ICON_SIZE, mockField, mockLayer, () => {
|
||||
return (x: string) => x + '_format';
|
||||
});
|
||||
const makeProperty = (options: object, mockStyle: MockStyle, field: IField = mockField) => {
|
||||
return new DynamicSizeProperty(
|
||||
options,
|
||||
VECTOR_STYLES.ICON_SIZE,
|
||||
field,
|
||||
new MockLayer(mockStyle),
|
||||
() => {
|
||||
return (x: string) => x + '_format';
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const defaultLegendParams = {
|
||||
|
@ -89,7 +41,7 @@ const defaultLegendParams = {
|
|||
|
||||
describe('renderLegendDetailRow', () => {
|
||||
test('Should render as range', async () => {
|
||||
const sizeProp = makeProperty();
|
||||
const sizeProp = makeProperty({}, new MockStyle({ min: 0, max: 100 }));
|
||||
const legendRow = sizeProp.renderLegendDetailRow(defaultLegendParams);
|
||||
const component = shallow(legendRow);
|
||||
|
||||
|
@ -100,3 +52,70 @@ describe('renderLegendDetailRow', () => {
|
|||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('syncSize', () => {
|
||||
test('Should sync with circle-radius prop', async () => {
|
||||
const sizeProp = makeProperty({ minSize: 8, maxSize: 32 }, new MockStyle({ min: 0, max: 100 }));
|
||||
const mockMbMap = new MockMbMap();
|
||||
|
||||
sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap);
|
||||
|
||||
expect(mockMbMap.getPaintPropertyCalls()).toEqual([
|
||||
[
|
||||
'foobar',
|
||||
'circle-radius',
|
||||
[
|
||||
'interpolate',
|
||||
['linear'],
|
||||
[
|
||||
'coalesce',
|
||||
[
|
||||
'case',
|
||||
['==', ['feature-state', 'foobar'], null],
|
||||
-1,
|
||||
['max', ['min', ['to-number', ['feature-state', 'foobar']], 100], 0],
|
||||
],
|
||||
0,
|
||||
],
|
||||
0,
|
||||
8,
|
||||
100,
|
||||
32,
|
||||
],
|
||||
],
|
||||
]);
|
||||
});
|
||||
|
||||
test('Should truncate interpolate expression to max when no delta', async () => {
|
||||
const sizeProp = makeProperty(
|
||||
{ minSize: 8, maxSize: 32 },
|
||||
new MockStyle({ min: 100, max: 100 })
|
||||
);
|
||||
const mockMbMap = new MockMbMap();
|
||||
|
||||
sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap);
|
||||
|
||||
expect(mockMbMap.getPaintPropertyCalls()).toEqual([
|
||||
[
|
||||
'foobar',
|
||||
'circle-radius',
|
||||
[
|
||||
'interpolate',
|
||||
['linear'],
|
||||
[
|
||||
'coalesce',
|
||||
[
|
||||
'case',
|
||||
['==', ['feature-state', 'foobar'], null],
|
||||
99,
|
||||
['max', ['min', ['to-number', ['feature-state', 'foobar']], 100], 100],
|
||||
],
|
||||
0,
|
||||
],
|
||||
100,
|
||||
32,
|
||||
],
|
||||
],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue