diff --git a/x-pack/plugins/maps/public/classes/styles/color_palettes.ts b/x-pack/plugins/maps/public/classes/styles/color_palettes.ts index e7574b4e7b3e4..51aadd98c1177 100644 --- a/x-pack/plugins/maps/public/classes/styles/color_palettes.ts +++ b/x-pack/plugins/maps/public/classes/styles/color_palettes.ts @@ -129,7 +129,7 @@ export function getColorRampCenterColor(colorPaletteId: string): string | null { // Returns an array of color stops // [ stop_input_1: number, stop_output_1: color, stop_input_n: number, stop_output_n: color ] export function getOrdinalMbColorRampStops( - colorPaletteId: string, + colorPaletteId: string | null, min: number, max: number ): Array | null { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/breaked_legend.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/breaked_legend.tsx index 9d5bf85005ae1..8eca89e31cf7a 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/breaked_legend.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/breaked_legend.tsx @@ -14,8 +14,8 @@ const EMPTY_VALUE = ''; interface Break { color: string; - label: ReactElement | string; - symbolId: string; + label: ReactElement | string | number; + symbolId?: string; } interface Props { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/category.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/category.tsx index 02ca4645dd8cd..4a71eb982d4d7 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/category.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/category.tsx @@ -11,11 +11,11 @@ import { VectorIcon } from './vector_icon'; interface Props { styleName: VECTOR_STYLES; - label: ReactElement | string; + label: ReactElement | string | number; color: string; isLinesOnly: boolean; isPointsOnly: boolean; - symbolId: string; + symbolId?: string; } export function Category({ styleName, label, color, isLinesOnly, isPointsOnly, symbolId }: Props) { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.tsx.snap similarity index 93% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap rename to x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.tsx.snap index 402eab355406b..c722e86512e52 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.tsx.snap @@ -121,6 +121,17 @@ exports[`ordinal Should render custom ordinal legend with breaks 1`] = ` > + + + + + + ({ import React from 'react'; import { shallow } from 'enzyme'; +import { Feature, Point } from 'geojson'; import { DynamicColorProperty } from './dynamic_color_property'; import { COLOR_MAP_TYPE, VECTOR_STYLES } from '../../../../../common/constants'; import { mockField, MockLayer, MockStyle } from './__tests__/test_util'; +import { ColorDynamicOptions } from '../../../../../common/descriptor_types'; +import { IVectorLayer } from '../../../layers/vector_layer/vector_layer'; +import { IField } from '../../../fields/field'; -const makeProperty = (options, mockStyle, field = mockField) => { +const makeProperty = (options: ColorDynamicOptions, style?: MockStyle, field?: IField) => { return new DynamicColorProperty( options, VECTOR_STYLES.LINE_COLOR, - field, - new MockLayer(mockStyle), + field ? field : mockField, + (new MockLayer(style ? style : new MockStyle()) as unknown) as IVectorLayer, () => { - return (x) => x + '_format'; + return (value: string | number | undefined) => value + '_format'; } ); }; @@ -35,11 +39,14 @@ const defaultLegendParams = { isLinesOnly: false, }; +const fieldMetaOptions = { isEnabled: true }; + describe('ordinal', () => { test('Should render ordinal legend as bands', async () => { const colorStyle = makeProperty({ color: 'Blues', type: undefined, + fieldMetaOptions, }); const legendRow = colorStyle.renderLegendDetailRow(defaultLegendParams); @@ -59,6 +66,7 @@ describe('ordinal', () => { { color: 'Blues', type: undefined, + fieldMetaOptions, }, new MockStyle({ min: 100, max: 100 }) ); @@ -89,6 +97,7 @@ describe('ordinal', () => { color: '#00FF00', }, ], + fieldMetaOptions, }); const legendRow = colorStyle.renderLegendDetailRow(defaultLegendParams); @@ -110,6 +119,7 @@ describe('categorical', () => { type: COLOR_MAP_TYPE.CATEGORICAL, useCustomColorPalette: false, colorCategory: 'palette_0', + fieldMetaOptions, }); const legendRow = colorStyle.renderLegendDetailRow(defaultLegendParams); @@ -130,7 +140,7 @@ describe('categorical', () => { useCustomColorPalette: true, customColorPalette: [ { - stop: null, //should include the default stop + stop: null, // should include the default stop color: '#FFFF00', }, { @@ -142,6 +152,7 @@ describe('categorical', () => { color: '#00FF00', }, ], + fieldMetaOptions, }); const legendRow = colorStyle.renderLegendDetailRow(defaultLegendParams); @@ -152,14 +163,18 @@ describe('categorical', () => { }); }); -function makeFeatures(foobarPropValues) { - return foobarPropValues.map((value) => { +function makeFeatures(foobarPropValues: string[]) { + return foobarPropValues.map((value: string) => { return { type: 'Feature', + geometry: { + type: 'Point', + coordinates: [-10, 0], + } as Point, properties: { foobar: value, }, - }; + } as Feature; }); } @@ -167,6 +182,7 @@ test('Should pluck the categorical style-meta', async () => { const colorStyle = makeProperty({ type: COLOR_MAP_TYPE.CATEGORICAL, colorCategory: 'palette_0', + fieldMetaOptions, }); const features = makeFeatures(['CN', 'CN', 'US', 'CN', 'US', 'IN']); @@ -185,6 +201,7 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => { const colorStyle = makeProperty({ type: COLOR_MAP_TYPE.CATEGORICAL, colorCategory: 'palette_0', + fieldMetaOptions, }); const meta = colorStyle._pluckCategoricalStyleMetaFromFieldMetaData({ @@ -210,25 +227,27 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => { }); describe('supportsFieldMeta', () => { - test('should support it when field does for ordinals', () => { + test('should support fieldMeta when ordinal field supports fieldMeta', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, + fieldMetaOptions, }; const styleProp = makeProperty(dynamicStyleOptions); expect(styleProp.supportsFieldMeta()).toEqual(true); }); - test('should support it when field does for categories', () => { + test('should support fieldMeta when categorical field supports fieldMeta', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, + fieldMetaOptions, }; const styleProp = makeProperty(dynamicStyleOptions); expect(styleProp.supportsFieldMeta()).toEqual(true); }); - test('should not support it when field does not', () => { + test('should not support fieldMeta when field does not support fieldMeta', () => { const field = Object.create(mockField); field.supportsFieldMeta = function () { return false; @@ -236,37 +255,50 @@ describe('supportsFieldMeta', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, + fieldMetaOptions, }; const styleProp = makeProperty(dynamicStyleOptions, undefined, field); expect(styleProp.supportsFieldMeta()).toEqual(false); }); - test('should not support it when field config not complete', () => { + test('should not support fieldMeta when field is not provided', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, + fieldMetaOptions, }; - const styleProp = makeProperty(dynamicStyleOptions, undefined, null); + + const styleProp = new DynamicColorProperty( + dynamicStyleOptions, + VECTOR_STYLES.LINE_COLOR, + null, + (new MockLayer(new MockStyle()) as unknown) as IVectorLayer, + () => { + return (value: string | number | undefined) => value + '_format'; + } + ); expect(styleProp.supportsFieldMeta()).toEqual(false); }); - test('should not support it when using custom ramp for ordinals', () => { + test('should not support fieldMeta when using custom ramp for ordinal field', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, useCustomColorRamp: true, customColorRamp: [], + fieldMetaOptions, }; const styleProp = makeProperty(dynamicStyleOptions); expect(styleProp.supportsFieldMeta()).toEqual(false); }); - test('should not support it when using custom palette for categories', () => { + test('should not support fieldMeta when using custom palette for categorical field', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, useCustomColorPalette: true, customColorPalette: [], + fieldMetaOptions, }; const styleProp = makeProperty(dynamicStyleOptions); @@ -279,6 +311,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { test('should return null when field is not provided', async () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -288,7 +321,9 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, field: {}, + fieldMetaOptions, }; + // @ts-expect-error - test is verifing behavior when field is invalid. const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); }); @@ -297,6 +332,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { test('should return null when color ramp is not provided', async () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -305,6 +341,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, color: 'Blues', + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toEqual([ @@ -343,19 +380,11 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { }); describe('custom color ramp', () => { - const dynamicStyleOptions = { - type: COLOR_MAP_TYPE.ORDINAL, - useCustomColorRamp: true, - customColorRamp: [ - { stop: 10, color: '#f7faff' }, - { stop: 100, color: '#072f6b' }, - ], - }; - test('should return null when customColorRamp is not provided', async () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.ORDINAL, useCustomColorRamp: true, + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -366,12 +395,22 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { type: COLOR_MAP_TYPE.ORDINAL, useCustomColorRamp: true, customColorRamp: [], + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); }); test('should use `feature-state` by default', async () => { + const dynamicStyleOptions = { + type: COLOR_MAP_TYPE.ORDINAL, + useCustomColorRamp: true, + customColorRamp: [ + { stop: 10, color: '#f7faff' }, + { stop: 100, color: '#072f6b' }, + ], + fieldMetaOptions, + }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toEqual([ 'step', @@ -389,6 +428,15 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { field.canReadFromGeoJson = function () { return false; }; + const dynamicStyleOptions = { + type: COLOR_MAP_TYPE.ORDINAL, + useCustomColorRamp: true, + customColorRamp: [ + { stop: 10, color: '#f7faff' }, + { stop: 100, color: '#072f6b' }, + ], + fieldMetaOptions, + }; const colorProperty = makeProperty(dynamicStyleOptions, undefined, field); expect(colorProperty._getMbColor()).toEqual([ 'step', @@ -407,6 +455,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { test('should return null when field is not provided', async () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -416,7 +465,9 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, field: {}, + fieldMetaOptions, }; + // @ts-expect-error - test is verifing behavior when field is invalid. const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); }); @@ -425,6 +476,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { test('should return null when color palette is not provided', async () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -434,6 +486,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, colorCategory: 'palette_0', + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toEqual([ @@ -453,6 +506,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { const dynamicStyleOptions = { type: COLOR_MAP_TYPE.CATEGORICAL, useCustomColorPalette: true, + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -463,6 +517,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { type: COLOR_MAP_TYPE.CATEGORICAL, useCustomColorPalette: true, customColorPalette: [], + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toBeNull(); @@ -476,6 +531,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => { { stop: null, color: '#f7faff' }, { stop: 'MX', color: '#072f6b' }, ], + fieldMetaOptions, }; const colorProperty = makeProperty(dynamicStyleOptions); expect(colorProperty._getMbColor()).toEqual([ @@ -494,6 +550,7 @@ test('isCategorical should return true when type is categorical', async () => { const categoricalColorStyle = makeProperty({ type: COLOR_MAP_TYPE.CATEGORICAL, colorCategory: 'palette_0', + fieldMetaOptions, }); expect(categoricalColorStyle.isOrdinal()).toEqual(false); @@ -504,6 +561,7 @@ test('isOrdinal should return true when type is ordinal', async () => { const ordinalColorStyle = makeProperty({ type: undefined, color: 'Blues', + fieldMetaOptions, }); expect(ordinalColorStyle.isOrdinal()).toEqual(true); @@ -514,6 +572,7 @@ test('Should read out ordinal type correctly', async () => { const ordinalColorStyle2 = makeProperty({ type: COLOR_MAP_TYPE.ORDINAL, colorCategory: 'palette_0', + fieldMetaOptions, }); expect(ordinalColorStyle2.isOrdinal()).toEqual(true); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx similarity index 79% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx index e643abcaf8d54..faecf51d4ced5 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx @@ -4,69 +4,73 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; +import React from 'react'; +import { EuiTextColor } from '@elastic/eui'; import { DynamicStyleProperty } from './dynamic_style_property'; import { makeMbClampedNumberExpression, dynamicRound } from '../style_util'; import { getOrdinalMbColorRampStops, getColorPalette } from '../../color_palettes'; -import React from 'react'; import { COLOR_MAP_TYPE } from '../../../../../common/constants'; import { isCategoricalStopsInvalid, getOtherCategoryLabel, + // @ts-expect-error } from '../components/color/color_stops_utils'; import { BreakedLegend } from '../components/legend/breaked_legend'; -import { EuiTextColor } from '@elastic/eui'; +import { ColorDynamicOptions, OrdinalColorStop } from '../../../../../common/descriptor_types'; +import { LegendProps } from './style_property'; const EMPTY_STOPS = { stops: [], defaultColor: null }; const RGBA_0000 = 'rgba(0,0,0,0)'; -export class DynamicColorProperty extends DynamicStyleProperty { - syncCircleColorWithMb(mbLayerId, mbMap, alpha) { +export class DynamicColorProperty extends DynamicStyleProperty { + syncCircleColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'circle-color', color); mbMap.setPaintProperty(mbLayerId, 'circle-opacity', alpha); } - syncIconColorWithMb(mbLayerId, mbMap) { + syncIconColorWithMb(mbLayerId: string, mbMap: MbMap) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'icon-color', color); } - syncHaloBorderColorWithMb(mbLayerId, mbMap) { + syncHaloBorderColorWithMb(mbLayerId: string, mbMap: MbMap) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'icon-halo-color', color); } - syncCircleStrokeWithMb(pointLayerId, mbMap, alpha) { + syncCircleStrokeWithMb(pointLayerId: string, mbMap: MbMap, alpha: number) { const color = this._getMbColor(); mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color); mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha); } - syncFillColorWithMb(mbLayerId, mbMap, alpha) { + syncFillColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'fill-color', color); mbMap.setPaintProperty(mbLayerId, 'fill-opacity', alpha); } - syncLineColorWithMb(mbLayerId, mbMap, alpha) { + syncLineColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'line-color', color); mbMap.setPaintProperty(mbLayerId, 'line-opacity', alpha); } - syncLabelColorWithMb(mbLayerId, mbMap, alpha) { + syncLabelColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'text-color', color); mbMap.setPaintProperty(mbLayerId, 'text-opacity', alpha); } - syncLabelBorderColorWithMb(mbLayerId, mbMap) { + syncLabelBorderColorWithMb(mbLayerId: string, mbMap: MbMap) { const color = this._getMbColor(); mbMap.setPaintProperty(mbLayerId, 'text-halo-color', color); } supportsFieldMeta() { - if (!this.isComplete() || !this._field.supportsFieldMeta()) { + if (!this.isComplete() || !this._field || !this._field.supportsFieldMeta()) { return false; } @@ -87,12 +91,16 @@ export class DynamicColorProperty extends DynamicStyleProperty { } getNumberOfCategories() { + if (!this._options.colorCategory) { + return 0; + } + const colors = getColorPalette(this._options.colorCategory); return colors ? colors.length : 0; } _getMbColor() { - if (!this._field || !this._field.getName()) { + if (!this.getFieldName()) { return null; } @@ -102,17 +110,20 @@ export class DynamicColorProperty extends DynamicStyleProperty { } _getOrdinalColorMbExpression() { - const targetName = this._field.getName(); + const targetName = this.getFieldName(); if (this._options.useCustomColorRamp) { if (!this._options.customColorRamp || !this._options.customColorRamp.length) { // custom color ramp config is not complete return null; } - const colorStops = this._options.customColorRamp.reduce((accumulatedStops, nextStop) => { - return [...accumulatedStops, nextStop.stop, nextStop.color]; - }, []); - const firstStopValue = colorStops[0]; + const colorStops: Array = this._options.customColorRamp.reduce( + (accumulatedStops: Array, nextStop: OrdinalColorStop) => { + return [...accumulatedStops, nextStop.stop, nextStop.color]; + }, + [] + ); + const firstStopValue = colorStops[0] as number; const lessThanFirstStopValue = firstStopValue - 1; return [ 'step', @@ -127,7 +138,7 @@ export class DynamicColorProperty extends DynamicStyleProperty { } const colorStops = getOrdinalMbColorRampStops( - this._options.color, + this._options.color ? this._options.color : null, rangeFieldMeta.min, rangeFieldMeta.max ); @@ -179,7 +190,9 @@ export class DynamicColorProperty extends DynamicStyleProperty { return EMPTY_STOPS; } - const colors = getColorPalette(this._options.colorCategory); + const colors = this._options.colorCategory + ? getColorPalette(this._options.colorCategory) + : null; if (!colors) { return EMPTY_STOPS; } @@ -209,7 +222,7 @@ export class DynamicColorProperty extends DynamicStyleProperty { const { stops, defaultColor } = this._getColorPaletteStops(); if (stops.length < 1) { - //occurs when no data + // occurs when no data return null; } @@ -225,8 +238,8 @@ export class DynamicColorProperty extends DynamicStyleProperty { mbStops.push(stop.color); } - mbStops.push(defaultColor); //last color is default color - return ['match', ['to-string', ['get', this._field.getName()]], ...mbStops]; + mbStops.push(defaultColor); // last color is default color + return ['match', ['to-string', ['get', this.getFieldName()]], ...mbStops]; } _getColorRampStops() { @@ -246,7 +259,7 @@ export class DynamicColorProperty extends DynamicStyleProperty { const colors = getColorPalette(this._options.color); if (rangeFieldMeta.delta === 0) { - //map to last color. + // map to last color. return [ { color: colors[colors.length - 1], @@ -277,11 +290,11 @@ export class DynamicColorProperty extends DynamicStyleProperty { } } - renderLegendDetailRow({ isPointsOnly, isLinesOnly, symbolId }) { + renderLegendDetailRow({ isPointsOnly, isLinesOnly, symbolId }: LegendProps) { const { stops, defaultColor } = this._getColorStops(); const breaks = []; - stops.forEach(({ stop, color }) => { - if (stop) { + stops.forEach(({ stop, color }: { stop: string | number | null; color: string }) => { + if (stop !== null) { breaks.push({ color, symbolId, diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx index c60547f3606c5..db44ae0da562d 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.test.tsx @@ -18,31 +18,52 @@ import { shallow } from 'enzyme'; import { DynamicSizeProperty } from './dynamic_size_property'; import { VECTOR_STYLES } from '../../../../../common/constants'; import { IField } from '../../../fields/field'; -import { MockMbMap } from './__tests__/test_util'; - +import { Map as MbMap } from 'mapbox-gl'; +import { SizeDynamicOptions } from '../../../../../common/descriptor_types'; import { mockField, MockLayer, MockStyle } from './__tests__/test_util'; +import { IVectorLayer } from '../../../layers/vector_layer/vector_layer'; + +export class MockMbMap { + _paintPropertyCalls: unknown[]; + + constructor() { + this._paintPropertyCalls = []; + } + setPaintProperty(...args: unknown[]) { + this._paintPropertyCalls.push([...args]); + } -const makeProperty = (options: object, mockStyle: MockStyle, field: IField = mockField) => { + getPaintPropertyCalls(): unknown[] { + return this._paintPropertyCalls; + } +} + +const makeProperty = ( + options: SizeDynamicOptions, + mockStyle: MockStyle, + field: IField = mockField +) => { return new DynamicSizeProperty( options, VECTOR_STYLES.ICON_SIZE, field, - new MockLayer(mockStyle), + (new MockLayer(mockStyle) as unknown) as IVectorLayer, () => { - return (x: string) => x + '_format'; - } + return (value: string | number | undefined) => value + '_format'; + }, + false ); }; -const defaultLegendParams = { - isPointsOnly: true, - isLinesOnly: false, -}; +const fieldMetaOptions = { isEnabled: true }; describe('renderLegendDetailRow', () => { test('Should render as range', async () => { - const sizeProp = makeProperty({}, new MockStyle({ min: 0, max: 100 })); - const legendRow = sizeProp.renderLegendDetailRow(defaultLegendParams); + const sizeProp = makeProperty( + { minSize: 0, maxSize: 10, fieldMetaOptions }, + new MockStyle({ min: 0, max: 100 }) + ); + const legendRow = sizeProp.renderLegendDetailRow(); const component = shallow(legendRow); // Ensure all promises resolve @@ -55,11 +76,15 @@ describe('renderLegendDetailRow', () => { 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(); + const sizeProp = makeProperty( + { minSize: 8, maxSize: 32, fieldMetaOptions }, + new MockStyle({ min: 0, max: 100 }) + ); + const mockMbMap = (new MockMbMap() as unknown) as MbMap; sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap); + // @ts-expect-error expect(mockMbMap.getPaintPropertyCalls()).toEqual([ [ 'foobar', @@ -88,13 +113,14 @@ describe('syncSize', () => { test('Should truncate interpolate expression to max when no delta', async () => { const sizeProp = makeProperty( - { minSize: 8, maxSize: 32 }, + { minSize: 8, maxSize: 32, fieldMetaOptions }, new MockStyle({ min: 100, max: 100 }) ); - const mockMbMap = new MockMbMap(); + const mockMbMap = (new MockMbMap() as unknown) as MbMap; sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap); + // @ts-expect-error expect(mockMbMap.getPaintPropertyCalls()).toEqual([ [ 'foobar', diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.tsx similarity index 72% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.tsx index 83bd4b70ba5c3..35c830f3cb5e3 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.tsx @@ -4,20 +4,34 @@ * you may not use this file except in compliance with the Elastic License. */ -import { DynamicStyleProperty } from './dynamic_style_property'; +import _ from 'lodash'; +import React from 'react'; +import { Map as MbMap } from 'mapbox-gl'; +import { DynamicStyleProperty, FieldFormatter } from './dynamic_style_property'; import { OrdinalLegend } from '../components/legend/ordinal_legend'; import { makeMbClampedNumberExpression } from '../style_util'; import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE, + // @ts-expect-error } from '../symbol_utils'; import { MB_LOOKUP_FUNCTION, VECTOR_STYLES } from '../../../../../common/constants'; -import _ from 'lodash'; -import React from 'react'; - -export class DynamicSizeProperty extends DynamicStyleProperty { - constructor(options, styleName, field, vectorLayer, getFieldFormatter, isSymbolizedAsIcon) { +import { SizeDynamicOptions } from '../../../../../common/descriptor_types'; +import { IField } from '../../../fields/field'; +import { IVectorLayer } from '../../../layers/vector_layer/vector_layer'; + +export class DynamicSizeProperty extends DynamicStyleProperty { + private readonly _isSymbolizedAsIcon: boolean; + + constructor( + options: SizeDynamicOptions, + styleName: VECTOR_STYLES, + field: IField | null, + vectorLayer: IVectorLayer, + getFieldFormatter: (fieldName: string) => null | FieldFormatter, + isSymbolizedAsIcon: boolean + ) { super(options, styleName, field, vectorLayer, getFieldFormatter); this._isSymbolizedAsIcon = isSymbolizedAsIcon; } @@ -36,7 +50,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { return super.supportsMbFeatureState(); } - syncHaloWidthWithMb(mbLayerId, mbMap) { + syncHaloWidthWithMb(mbLayerId: string, mbMap: MbMap) { const haloWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', haloWidth); } @@ -47,9 +61,9 @@ export class DynamicSizeProperty extends DynamicStyleProperty { : SMALL_MAKI_ICON_SIZE; } - syncIconSizeWithMb(symbolLayerId, mbMap) { + syncIconSizeWithMb(symbolLayerId: string, mbMap: MbMap) { const rangeFieldMeta = this.getRangeFieldMeta(); - if (this._isSizeDynamicConfigComplete(this._options) && rangeFieldMeta) { + if (this._isSizeDynamicConfigComplete() && rangeFieldMeta) { const halfIconPixels = this.getIconPixelSize() / 2; const targetName = this.getFieldName(); // Using property state instead of feature-state because layout properties do not support feature-state @@ -73,29 +87,29 @@ export class DynamicSizeProperty extends DynamicStyleProperty { } } - syncCircleStrokeWidthWithMb(mbLayerId, mbMap) { + syncCircleStrokeWidthWithMb(mbLayerId: string, mbMap: MbMap) { const lineWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', lineWidth); } - syncCircleRadiusWithMb(mbLayerId, mbMap) { + syncCircleRadiusWithMb(mbLayerId: string, mbMap: MbMap) { const circleRadius = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'circle-radius', circleRadius); } - syncLineWidthWithMb(mbLayerId, mbMap) { + syncLineWidthWithMb(mbLayerId: string, mbMap: MbMap) { const lineWidth = this.getMbSizeExpression(); mbMap.setPaintProperty(mbLayerId, 'line-width', lineWidth); } - syncLabelSizeWithMb(mbLayerId, mbMap) { + syncLabelSizeWithMb(mbLayerId: string, mbMap: MbMap) { const lineWidth = this.getMbSizeExpression(); mbMap.setLayoutProperty(mbLayerId, 'text-size', lineWidth); } getMbSizeExpression() { const rangeFieldMeta = this.getRangeFieldMeta(); - if (!this._isSizeDynamicConfigComplete(this._options) || !rangeFieldMeta) { + if (!this._isSizeDynamicConfigComplete() || !rangeFieldMeta) { return null; } @@ -108,7 +122,19 @@ export class DynamicSizeProperty extends DynamicStyleProperty { }); } - _getMbDataDrivenSize({ targetName, minSize, maxSize, minValue, maxValue }) { + _getMbDataDrivenSize({ + targetName, + minSize, + maxSize, + minValue, + maxValue, + }: { + targetName: string; + minSize: number; + maxSize: number; + minValue: number; + maxValue: number; + }) { const stops = minValue === maxValue ? [maxValue, maxSize] : [minValue, minSize, maxValue, maxSize]; return [ diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx index 39ceb580e92b9..47659e055936e 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx @@ -47,7 +47,7 @@ export interface IDynamicStyleProperty extends IStyleProperty { getValueSuggestions(query: string): Promise; } -type FieldFormatter = (value: string | number | undefined) => string | number; +export type FieldFormatter = (value: string | number | undefined) => string | number; export class DynamicStyleProperty extends AbstractStyleProperty implements IDynamicStyleProperty { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.ts similarity index 80% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.ts index a7a3130875a95..d55a6e1cfb444 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.ts @@ -4,11 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { DynamicStyleProperty } from './dynamic_style_property'; import { getComputedFieldName } from '../style_util'; +import { LabelDynamicOptions } from '../../../../../common/descriptor_types'; -export class DynamicTextProperty extends DynamicStyleProperty { - syncTextFieldWithMb(mbLayerId, mbMap) { +export class DynamicTextProperty extends DynamicStyleProperty { + syncTextFieldWithMb(mbLayerId: string, mbMap: MbMap) { if (this._field && this._field.isValid()) { // Fields that support auto-domain are normalized with a field-formatter and stored into a computed-field // Otherwise, the raw value is just carried over and no computed field is created. diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.ts similarity index 68% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.ts index 3016b15d0a05c..bda7a4584370f 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/label_border_size_property.ts @@ -5,15 +5,20 @@ */ import _ from 'lodash'; +import { Map as MbMap } from 'mapbox-gl'; import { AbstractStyleProperty } from './style_property'; import { DEFAULT_LABEL_SIZE } from '../vector_style_defaults'; import { LABEL_BORDER_SIZES } from '../../../../../common/constants'; +import { LabelBorderSizeOptions } from '../../../../../common/descriptor_types'; +import { VECTOR_STYLES } from '../../../../../common/constants'; +import { StaticSizeProperty } from './static_size_property'; +import { DynamicSizeProperty } from './dynamic_size_property'; const SMALL_SIZE = 1 / 16; const MEDIUM_SIZE = 1 / 8; const LARGE_SIZE = 1 / 5; // halo of 1/4 is just a square. Use smaller ratio to preserve contour on letters -function getWidthRatio(size) { +function getWidthRatio(size: LABEL_BORDER_SIZES) { switch (size) { case LABEL_BORDER_SIZES.LARGE: return LARGE_SIZE; @@ -24,13 +29,19 @@ function getWidthRatio(size) { } } -export class LabelBorderSizeProperty extends AbstractStyleProperty { - constructor(options, styleName, labelSizeProperty) { +export class LabelBorderSizeProperty extends AbstractStyleProperty { + private readonly _labelSizeProperty: StaticSizeProperty | DynamicSizeProperty; + + constructor( + options: LabelBorderSizeOptions, + styleName: VECTOR_STYLES, + labelSizeProperty: StaticSizeProperty | DynamicSizeProperty + ) { super(options, styleName); this._labelSizeProperty = labelSizeProperty; } - syncLabelBorderSizeWithMb(mbLayerId, mbMap) { + syncLabelBorderSizeWithMb(mbLayerId: string, mbMap: MbMap) { if (this.getOptions().size === LABEL_BORDER_SIZES.NONE) { mbMap.setPaintProperty(mbLayerId, 'text-halo-width', 0); return; @@ -39,7 +50,8 @@ export class LabelBorderSizeProperty extends AbstractStyleProperty { const widthRatio = getWidthRatio(this.getOptions().size); if (this._labelSizeProperty.isDynamic() && this._labelSizeProperty.isComplete()) { - const labelSizeExpression = this._labelSizeProperty.getMbSizeExpression(); + const labelSizeExpression = (this + ._labelSizeProperty as DynamicSizeProperty).getMbSizeExpression(); if (labelSizeExpression) { mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [ 'max', diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.ts similarity index 63% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.ts index ebe2a322711fc..45d25565b6f23 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_color_property.ts @@ -4,43 +4,45 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { ColorStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticColorProperty extends StaticStyleProperty { - syncCircleColorWithMb(mbLayerId, mbMap, alpha) { +export class StaticColorProperty extends StaticStyleProperty { + syncCircleColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'circle-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'circle-opacity', alpha); } - syncFillColorWithMb(mbLayerId, mbMap, alpha) { + syncFillColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'fill-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'fill-opacity', alpha); } - syncIconColorWithMb(mbLayerId, mbMap) { + syncIconColorWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'icon-color', this._options.color); } - syncHaloBorderColorWithMb(mbLayerId, mbMap) { + syncHaloBorderColorWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'icon-halo-color', this._options.color); } - syncLineColorWithMb(mbLayerId, mbMap, alpha) { + syncLineColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'line-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'line-opacity', alpha); } - syncCircleStrokeWithMb(mbLayerId, mbMap, alpha) { + syncCircleStrokeWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'circle-stroke-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'circle-stroke-opacity', alpha); } - syncLabelColorWithMb(mbLayerId, mbMap, alpha) { + syncLabelColorWithMb(mbLayerId: string, mbMap: MbMap, alpha: number) { mbMap.setPaintProperty(mbLayerId, 'text-color', this._options.color); mbMap.setPaintProperty(mbLayerId, 'text-opacity', alpha); } - syncLabelBorderColorWithMb(mbLayerId, mbMap) { + syncLabelBorderColorWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'text-halo-color', this._options.color); } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.ts similarity index 67% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.ts index 3b5be083dd3c9..58c569e8132d6 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_icon_property.ts @@ -4,11 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +// @ts-expect-error import { getMakiSymbolAnchor, getMakiIconId } from '../symbol_utils'; +import { IconStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticIconProperty extends StaticStyleProperty { - syncIconWithMb(symbolLayerId, mbMap, iconPixelSize) { +export class StaticIconProperty extends StaticStyleProperty { + syncIconWithMb(symbolLayerId: string, mbMap: MbMap, iconPixelSize: number) { const symbolId = this._options.value; mbMap.setLayoutProperty(symbolLayerId, 'icon-anchor', getMakiSymbolAnchor(symbolId)); mbMap.setLayoutProperty(symbolLayerId, 'icon-image', getMakiIconId(symbolId, iconPixelSize)); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.ts similarity index 62% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.ts index 0c8cae10d6189..388cfbd645468 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_orientation_property.ts @@ -4,10 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { VECTOR_STYLES } from '../../../../../common/constants'; +import { OrientationStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticOrientationProperty extends StaticStyleProperty { - constructor(options, styleName) { +export class StaticOrientationProperty extends StaticStyleProperty { + constructor(options: OrientationStaticOptions, styleName: VECTOR_STYLES) { if (typeof options.orientation !== 'number') { super({ orientation: 0 }, styleName); } else { @@ -15,7 +18,7 @@ export class StaticOrientationProperty extends StaticStyleProperty { } } - syncIconRotationWithMb(symbolLayerId, mbMap) { + syncIconRotationWithMb(symbolLayerId: string, mbMap: MbMap) { mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', this._options.orientation); } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.ts similarity index 65% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.ts index d86556c6218cf..c9ee64ca56647 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_size_property.ts @@ -4,15 +4,19 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { VECTOR_STYLES } from '../../../../../common/constants'; import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE, + // @ts-expect-error } from '../symbol_utils'; +import { SizeStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticSizeProperty extends StaticStyleProperty { - constructor(options, styleName) { +export class StaticSizeProperty extends StaticStyleProperty { + constructor(options: SizeStaticOptions, styleName: VECTOR_STYLES) { if (typeof options.size !== 'number') { super({ size: 1 }, styleName); } else { @@ -20,7 +24,7 @@ export class StaticSizeProperty extends StaticStyleProperty { } } - syncHaloWidthWithMb(mbLayerId, mbMap) { + syncHaloWidthWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', this._options.size); } @@ -30,12 +34,12 @@ export class StaticSizeProperty extends StaticStyleProperty { : SMALL_MAKI_ICON_SIZE; } - syncIconSizeWithMb(symbolLayerId, mbMap) { + syncIconSizeWithMb(symbolLayerId: string, mbMap: MbMap) { const halfIconPixels = this.getIconPixelSize() / 2; mbMap.setLayoutProperty(symbolLayerId, 'icon-size', this._options.size / halfIconPixels); } - syncCircleStrokeWidthWithMb(mbLayerId, mbMap, hasNoRadius) { + syncCircleStrokeWidthWithMb(mbLayerId: string, mbMap: MbMap, hasNoRadius: boolean) { if (hasNoRadius) { mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', 0); } else { @@ -43,15 +47,15 @@ export class StaticSizeProperty extends StaticStyleProperty { } } - syncCircleRadiusWithMb(mbLayerId, mbMap) { + syncCircleRadiusWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'circle-radius', this._options.size); } - syncLineWidthWithMb(mbLayerId, mbMap) { + syncLineWidthWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setPaintProperty(mbLayerId, 'line-width', this._options.size); } - syncLabelSizeWithMb(mbLayerId, mbMap) { + syncLabelSizeWithMb(mbLayerId: string, mbMap: MbMap) { mbMap.setLayoutProperty(mbLayerId, 'text-size', this._options.size); } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.ts similarity index 84% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.ts index a02aa15e28b28..ea39f4fa06a78 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_style_property.ts @@ -7,6 +7,6 @@ import { AbstractStyleProperty } from './style_property'; import { STYLE_TYPE } from '../../../../../common/constants'; -export class StaticStyleProperty extends AbstractStyleProperty { +export class StaticStyleProperty extends AbstractStyleProperty { static type = STYLE_TYPE.STATIC; } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.ts similarity index 69% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.ts index 7a4a4672152c0..e24e7553d0b38 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/static_text_property.ts @@ -4,14 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Map as MbMap } from 'mapbox-gl'; import { StaticStyleProperty } from './static_style_property'; +import { LabelStaticOptions } from '../../../../../common/descriptor_types'; -export class StaticTextProperty extends StaticStyleProperty { +export class StaticTextProperty extends StaticStyleProperty { isComplete() { return this.getOptions().value.length > 0; } - syncTextFieldWithMb(mbLayerId, mbMap) { + syncTextFieldWithMb(mbLayerId: string, mbMap: MbMap) { if (this.getOptions().value.length) { mbMap.setLayoutProperty(mbLayerId, 'text-field', this.getOptions().value); } else { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.ts similarity index 74% rename from x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.js rename to x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.ts index 9ae1ef5054e30..8bfc06a1c7fa9 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/symbolize_as_property.ts @@ -6,12 +6,9 @@ import { AbstractStyleProperty } from './style_property'; import { SYMBOLIZE_AS_TYPES } from '../../../../../common/constants'; +import { SymbolizeAsOptions } from '../../../../../common/descriptor_types'; -export class SymbolizeAsProperty extends AbstractStyleProperty { - constructor(options, styleName) { - super(options, styleName); - } - +export class SymbolizeAsProperty extends AbstractStyleProperty { isSymbolizedAsIcon = () => { return this.getOptions().value === SYMBOLIZE_AS_TYPES.ICON; };