maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Maps] convert Vector style descriptor to typescript (#60526)

Browse source 
* vector style descriptor TS

* revert color_utils TS conversion

* clean up TS errors

* updated blended layer to use vector style descriptor type

* fix eslint error

* use FIELD_ORIGIN.SOURCE instead of SOURCE_DATA_ID_ORIGIN

* fix other incorrect uses of SOURCE_DATA_ID_ORIGIN

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese 2020-03-20 11:29:31 -06:00 committed by GitHub
parent c9cc04423d
commit 103f217964
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 239 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
x-pack/legacy/plugins/maps/common/descriptor_types.d.ts vendored
View file

@ -5,8 +5,9 @@
*/
/* eslint-disable @typescript-eslint/consistent-type-definitions */
import { DataRequestDescriptor } from './data_request_descriptor_types';
import { AGG_TYPE, GRID_RESOLUTION, RENDER_AS, SORT_ORDER, SCALING_TYPES } from './constants';
import { VectorStyleDescriptor } from './style_property_descriptor_types';
import { DataRequestDescriptor } from './data_request_descriptor_types';
export type AbstractSourceDescriptor = {
id?: string;
@ -110,7 +111,7 @@ export type LayerDescriptor = {
export type VectorLayerDescriptor = LayerDescriptor & {
joins?: JoinDescriptor[];
style?: unknown;
style?: VectorStyleDescriptor;
};
export type RangeFieldMeta = {

89
x-pack/legacy/plugins/maps/common/style_property_descriptor_types.d.ts vendored
View file

@ -5,17 +5,32 @@
*/
/* eslint-disable @typescript-eslint/consistent-type-definitions */
import { FIELD_ORIGIN, LABEL_BORDER_SIZES, SYMBOLIZE_AS_TYPES } from './constants';
import {
FIELD_ORIGIN,
LABEL_BORDER_SIZES,
SYMBOLIZE_AS_TYPES,
VECTOR_STYLES,
STYLE_TYPE,
LAYER_STYLE_TYPE,
} from './constants';
// Non-static/dynamic options
export type SymbolizeAsOptions = {
value: SYMBOLIZE_AS_TYPES;
};
export type SymbolizeAsStylePropertyDescriptor = {
options: SymbolizeAsOptions;
};
export type LabelBorderSizeOptions = {
size: LABEL_BORDER_SIZES;
};
export type LabelBorderSizeStylePropertyDescriptor = {
options: LabelBorderSizeOptions;
};
// Static/dynamic options
export type FieldMetaOptions = {
@ -62,6 +77,16 @@ export type ColorStaticOptions = {
color: string;
};
export type ColorStylePropertyDescriptor =
| {
type: STYLE_TYPE.STATIC;
options: ColorStaticOptions;
}
| {
type: STYLE_TYPE.DYNAMIC;
options: ColorDynamicOptions;
};
export type IconDynamicOptions = {
iconPaletteId?: string;
customIconStops?: IconStop[];
@ -74,14 +99,34 @@ export type IconStaticOptions = {
value: string; // icon id
};
export type IconStylePropertyDescriptor =
| {
type: STYLE_TYPE.STATIC;
options: IconStaticOptions;
}
| {
type: STYLE_TYPE.DYNAMIC;
options: IconDynamicOptions;
};
export type LabelDynamicOptions = {
field: StylePropertyField; // field containing label value
field?: StylePropertyField; // field containing label value
};
export type LabelStaticOptions = {
value: string; // static label text
};
export type LabelStylePropertyDescriptor =
| {
type: STYLE_TYPE.STATIC;
options: LabelStaticOptions;
}
| {
type: STYLE_TYPE.DYNAMIC;
options: LabelDynamicOptions;
};
export type OrientationDynamicOptions = {
field?: StylePropertyField;
fieldMetaOptions: FieldMetaOptions;
@ -91,6 +136,16 @@ export type OrientationStaticOptions = {
orientation: number;
};
export type OrientationStylePropertyDescriptor =
| {
type: STYLE_TYPE.STATIC;
options: OrientationStaticOptions;
}
| {
type: STYLE_TYPE.DYNAMIC;
options: OrientationDynamicOptions;
};
export type SizeDynamicOptions = {
minSize: number;
maxSize: number;
@ -102,6 +157,36 @@ export type SizeStaticOptions = {
size: number;
};
export type SizeStylePropertyDescriptor =
| {
type: STYLE_TYPE.STATIC;
options: SizeStaticOptions;
}
| {
type: STYLE_TYPE.DYNAMIC;
options: SizeDynamicOptions;
};
export type VectorStylePropertiesDescriptor = {
[VECTOR_STYLES.SYMBOLIZE_AS]?: SymbolizeAsStylePropertyDescriptor;
[VECTOR_STYLES.FILL_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LINE_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LINE_WIDTH]?: SizeStylePropertyDescriptor;
[VECTOR_STYLES.ICON]?: IconStylePropertyDescriptor;
[VECTOR_STYLES.ICON_SIZE]?: SizeStylePropertyDescriptor;
[VECTOR_STYLES.ICON_ORIENTATION]?: OrientationStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_TEXT]?: LabelStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_SIZE]?: SizeStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_BORDER_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_BORDER_SIZE]?: LabelBorderSizeStylePropertyDescriptor;
};
export type VectorStyleDescriptor = {
type: LAYER_STYLE_TYPE.VECTOR;
properties: VectorStylePropertiesDescriptor;
};
export type StylePropertyOptions =
| LabelBorderSizeOptions
| SymbolizeAsOptions

40
x-pack/legacy/plugins/maps/public/layers/blended_vector_layer.ts
View file

@ -7,8 +7,7 @@
import { i18n } from '@kbn/i18n';
import { VectorLayer } from './vector_layer';
import { IVectorStyle, VectorStyle } from './styles/vector/vector_style';
// @ts-ignore
import { getDefaultDynamicProperties, VECTOR_STYLES } from './styles/vector/vector_style_defaults';
import { getDefaultDynamicProperties } from './styles/vector/vector_style_defaults';
import { IDynamicStyleProperty } from './styles/vector/properties/dynamic_style_property';
import { IStyleProperty } from './styles/vector/properties/style_property';
import {
@ -17,9 +16,11 @@ import {
ES_GEO_GRID,
LAYER_TYPE,
AGG_TYPE,
SOURCE_DATA_ID_ORIGIN,
RENDER_AS,
STYLE_TYPE,
VECTOR_STYLES,
LAYER_STYLE_TYPE,
FIELD_ORIGIN,
} from '../../common/constants';
import { ESGeoGridSource } from './sources/es_geo_grid_source/es_geo_grid_source';
// @ts-ignore
@ -30,6 +31,11 @@ import { IESAggSource } from './sources/es_agg_source';
import { ISource } from './sources/source';
import { SyncContext } from '../actions/map_actions';
import { DataRequestAbortError } from './util/data_request';
import {
VectorStyleDescriptor,
SizeDynamicOptions,
DynamicStylePropertyOptions,
} from '../../common/style_property_descriptor_types';
const ACTIVE_COUNT_DATA_ID = 'ACTIVE_COUNT_DATA_ID';
@ -62,28 +68,28 @@ function getClusterSource(documentSource: IESSource, documentStyle: IVectorStyle
function getClusterStyleDescriptor(
documentStyle: IVectorStyle,
clusterSource: IESAggSource
): unknown {
): VectorStyleDescriptor {
const defaultDynamicProperties = getDefaultDynamicProperties();
const clusterStyleDescriptor: any = {
...documentStyle.getDescriptor(),
const clusterStyleDescriptor: VectorStyleDescriptor = {
type: LAYER_STYLE_TYPE.VECTOR,
properties: {
[VECTOR_STYLES.LABEL_TEXT]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT].options,
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT]!.options,
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
},
},
[VECTOR_STYLES.ICON_SIZE]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options,
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
},
},
@ -99,8 +105,15 @@ function getClusterStyleDescriptor(
return;
}
if (styleProperty.isDynamic()) {
const options = (styleProperty as IDynamicStyleProperty).getOptions();
if (styleName === VECTOR_STYLES.SYMBOLIZE_AS || styleName === VECTOR_STYLES.LABEL_BORDER_SIZE) {
// copy none static/dynamic styles to cluster style
// @ts-ignore
clusterStyleDescriptor.properties[styleName] = {
options: { ...styleProperty.getOptions() },
};
} else if (styleProperty.isDynamic()) {
// copy dynamic styles to cluster style
const options = styleProperty.getOptions() as DynamicStylePropertyOptions;
const field =
options && options.field && options.field.name
? {
@ -111,6 +124,7 @@ function getClusterStyleDescriptor(
),
}
: undefined;
// @ts-ignore
clusterStyleDescriptor.properties[styleName] = {
type: STYLE_TYPE.DYNAMIC,
options: {
@ -119,6 +133,8 @@ function getClusterStyleDescriptor(
},
};
} else {
// copy static styles to cluster style
// @ts-ignore
clusterStyleDescriptor.properties[styleName] = {
type: STYLE_TYPE.STATIC,
options: { ...styleProperty.getOptions() },

14
x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.js
View file

@ -12,21 +12,19 @@ import { HeatmapLayer } from '../../heatmap_layer';
import { VectorLayer } from '../../vector_layer';
import { convertCompositeRespToGeoJson, convertRegularRespToGeoJson } from './convert_to_geojson';
import { VectorStyle } from '../../styles/vector/vector_style';
import {
getDefaultDynamicProperties,
VECTOR_STYLES,
} from '../../styles/vector/vector_style_defaults';
import { getDefaultDynamicProperties } from '../../styles/vector/vector_style_defaults';
import { COLOR_GRADIENTS } from '../../styles/color_utils';
import { CreateSourceEditor } from './create_source_editor';
import { UpdateSourceEditor } from './update_source_editor';
import {
DEFAULT_MAX_BUCKETS_LIMIT,
SOURCE_DATA_ID_ORIGIN,
ES_GEO_GRID,
COUNT_PROP_NAME,
COLOR_MAP_TYPE,
RENDER_AS,
GRID_RESOLUTION,
VECTOR_STYLES,
FIELD_ORIGIN,
} from '../../../../common/constants';
import { i18n } from '@kbn/i18n';
import { getDataSourceLabel } from '../../../../common/i18n_getters';
@ -356,7 +354,7 @@ export class ESGeoGridSource extends AbstractESAggSource {
...defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options,
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
color: COLOR_GRADIENTS[0].value,
type: COLOR_MAP_TYPE.ORDINAL,
@ -380,7 +378,7 @@ export class ESGeoGridSource extends AbstractESAggSource {
...defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options,
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
},
},
@ -390,7 +388,7 @@ export class ESGeoGridSource extends AbstractESAggSource {
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT].options,
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
},
},

16
x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/es_pew_pew_source.js
View file

@ -12,12 +12,14 @@ import { VectorLayer } from '../../vector_layer';
import { CreateSourceEditor } from './create_source_editor';
import { UpdateSourceEditor } from './update_source_editor';
import { VectorStyle } from '../../styles/vector/vector_style';
import {
getDefaultDynamicProperties,
VECTOR_STYLES,
} from '../../styles/vector/vector_style_defaults';
import { getDefaultDynamicProperties } from '../../styles/vector/vector_style_defaults';
import { i18n } from '@kbn/i18n';
import { SOURCE_DATA_ID_ORIGIN, ES_PEW_PEW, COUNT_PROP_NAME } from '../../../../common/constants';
import {
FIELD_ORIGIN,
ES_PEW_PEW,
COUNT_PROP_NAME,
VECTOR_STYLES,
} from '../../../../common/constants';
import { getDataSourceLabel } from '../../../../common/i18n_getters';
import { convertToLines } from './convert_to_lines';
import { AbstractESAggSource } from '../es_agg_source';
@ -132,7 +134,7 @@ export class ESPewPewSource extends AbstractESAggSource {
...defaultDynamicProperties[VECTOR_STYLES.LINE_COLOR].options,
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
color: COLOR_GRADIENTS[0].value,
},
@ -143,7 +145,7 @@ export class ESPewPewSource extends AbstractESAggSource {
...defaultDynamicProperties[VECTOR_STYLES.LINE_WIDTH].options,
field: {
name: COUNT_PROP_NAME,
origin: SOURCE_DATA_ID_ORIGIN,
origin: FIELD_ORIGIN.SOURCE,
},
},
},

4
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_meta/ordinal_field_meta_popover.tsx
View file

@ -9,11 +9,11 @@ import _ from 'lodash';
import React, { ChangeEvent, Fragment, MouseEvent } from 'react';
import { EuiFormRow, EuiRange, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
// @ts-ignore
import { DEFAULT_SIGMA, VECTOR_STYLES } from '../../vector_style_defaults';
import { DEFAULT_SIGMA } from '../../vector_style_defaults';
import { FieldMetaPopover } from './field_meta_popover';
import { IDynamicStyleProperty } from '../../properties/dynamic_style_property';
import { FieldMetaOptions } from '../../../../../../common/style_property_descriptor_types';
import { VECTOR_STYLES } from '../../../../../../common/constants';
function getIsEnableToggleLabel(styleName: string) {
switch (styleName) {

2
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js
View file

@ -6,7 +6,7 @@
import { i18n } from '@kbn/i18n';
import { VECTOR_STYLES } from '../vector_style_defaults';
import { VECTOR_STYLES } from '../../../../../common/constants';
export function getDisabledByMessage(styleName) {
return i18n.translate('xpack.maps.styles.vector.disabledByMessage', {

3
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js
View file

@ -7,10 +7,9 @@
import React from 'react';
import { EuiFormRow, EuiSelect, EuiToolTip } from '@elastic/eui';
import { VECTOR_STYLES } from '../../vector_style_defaults';
import { getVectorStyleLabel, getDisabledByMessage } from '../get_vector_style_label';
import { i18n } from '@kbn/i18n';
import { LABEL_BORDER_SIZES } from '../../../../../../common/constants';
import { LABEL_BORDER_SIZES, VECTOR_STYLES } from '../../../../../../common/constants';
const options = [
{

2
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/category.js
View file

@ -5,7 +5,7 @@
*/
import React from 'react';
import { VECTOR_STYLES } from '../../vector_style_defaults';
import { VECTOR_STYLES } from '../../../../../../common/constants';
import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import { VectorIcon } from './vector_icon';

5
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js
View file

@ -4,16 +4,15 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { VectorStyle } from '../../vector_style';
import { getColorRampCenterColor, getColorPalette } from '../../../color_utils';
import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
import { COLOR_MAP_TYPE, STYLE_TYPE } from '../../../../../../common/constants';
export function extractColorFromStyleProperty(colorStyleProperty, defaultColor) {
if (!colorStyleProperty) {
return defaultColor;
}
if (colorStyleProperty.type === VectorStyle.STYLE_TYPE.STATIC) {
if (colorStyleProperty.type === STYLE_TYPE.STATIC) {
return colorStyleProperty.options.color;
}

12
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
View file

@ -14,7 +14,7 @@ import {
EuiFieldText,
EuiToolTip,
} from '@elastic/eui';
import { VectorStyle } from '../vector_style';
import { STYLE_TYPE } from '../../../../../common/constants';
import { i18n } from '@kbn/i18n';
export class StylePropEditor extends Component {
@ -52,7 +52,7 @@ export class StylePropEditor extends Component {
renderStaticDynamicSelect() {
const options = [
{
value: VectorStyle.STYLE_TYPE.STATIC,
value: STYLE_TYPE.STATIC,
text: this.props.customStaticOptionLabel
? this.props.customStaticOptionLabel
: i18n.translate('xpack.maps.styles.staticDynamicSelect.staticLabel', {
@ -60,7 +60,7 @@ export class StylePropEditor extends Component {
}),
},
{
value: VectorStyle.STYLE_TYPE.DYNAMIC,
value: STYLE_TYPE.DYNAMIC,
text: i18n.translate('xpack.maps.styles.staticDynamicSelect.dynamicLabel', {
defaultMessage: 'By value',
}),
@ -70,11 +70,7 @@ export class StylePropEditor extends Component {
return (
<EuiSelect
options={options}
value={
this.props.styleProperty.isDynamic()
? VectorStyle.STYLE_TYPE.DYNAMIC
: VectorStyle.STYLE_TYPE.STATIC
}
value={this.props.styleProperty.isDynamic() ? STYLE_TYPE.DYNAMIC : STYLE_TYPE.STATIC}
onChange={this._onTypeToggle}
disabled={this.props.disabled || this.props.fields.length === 0}
aria-label={i18n.translate('xpack.maps.styles.staticDynamicSelect.ariaLabel', {

3
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/vector_style_symbolize_as_editor.js
View file

@ -9,8 +9,7 @@ import React from 'react';
import { EuiFormRow, EuiButtonGroup, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SYMBOLIZE_AS_TYPES } from '../../../../../../common/constants';
import { VECTOR_STYLES } from '../../vector_style_defaults';
import { SYMBOLIZE_AS_TYPES, VECTOR_STYLES } from '../../../../../../common/constants';
import { getDisabledByMessage } from '../get_vector_style_label';
const SYMBOLIZE_AS_OPTIONS = [

13
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
View file

@ -13,13 +13,8 @@ import { VectorStyleSymbolizeAsEditor } from './symbol/vector_style_symbolize_as
import { VectorStyleIconEditor } from './symbol/vector_style_icon_editor';
import { VectorStyleLabelEditor } from './label/vector_style_label_editor';
import { VectorStyleLabelBorderSizeEditor } from './label/vector_style_label_border_size_editor';
import { VectorStyle } from '../vector_style';
import { OrientationEditor } from './orientation/orientation_editor';
import {
getDefaultDynamicProperties,
getDefaultStaticProperties,
VECTOR_STYLES,
} from '../vector_style_defaults';
import { getDefaultDynamicProperties, getDefaultStaticProperties } from '../vector_style_defaults';
import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types';
import { i18n } from '@kbn/i18n';
@ -29,6 +24,8 @@ import {
CATEGORICAL_DATA_TYPES,
ORDINAL_DATA_TYPES,
LABEL_BORDER_SIZES,
VECTOR_STYLES,
STYLE_TYPE,
} from '../../../../../common/constants';
export class VectorStyleEditor extends Component {
@ -123,7 +120,7 @@ export class VectorStyleEditor extends Component {
_onStaticStyleChange = (propertyName, options) => {
const styleDescriptor = {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options,
};
this.props.handlePropertyChange(propertyName, styleDescriptor);
@ -131,7 +128,7 @@ export class VectorStyleEditor extends Component {
_onDynamicStyleChange = (propertyName, options) => {
const styleDescriptor = {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options,
};
this.props.handlePropertyChange(propertyName, styleDescriptor);

3
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
View file

@ -14,10 +14,9 @@ jest.mock('../components/vector_style_editor', () => ({
import React from 'react';
import { shallow } from 'enzyme';
import { VECTOR_STYLES } from '../vector_style_defaults';
import { DynamicColorProperty } from './dynamic_color_property';
import { StyleMeta } from '../style_meta';
import { COLOR_MAP_TYPE, FIELD_ORIGIN } from '../../../../../common/constants';
import { COLOR_MAP_TYPE, FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants';
const mockField = {
async getLabel() {

2
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js
View file

@ -6,7 +6,7 @@
import { DynamicStyleProperty } from './dynamic_style_property';
import { getComputedFieldName } from '../style_util';
import { VECTOR_STYLES } from '../vector_style_defaults';
import { VECTOR_STYLES } from '../../../../../common/constants';
export class DynamicOrientationProperty extends DynamicStyleProperty {
syncIconRotationWithMb(symbolLayerId, mbMap) {

2
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js
View file

@ -11,7 +11,7 @@ import {
LARGE_MAKI_ICON_SIZE,
SMALL_MAKI_ICON_SIZE,
} from '../symbol_utils';
import { VECTOR_STYLES } from '../vector_style_defaults';
import { VECTOR_STYLES } from '../../../../../common/constants';
import _ from 'lodash';
import { CircleIcon } from '../components/legend/circle_icon';
import React, { Fragment } from 'react';

9
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.ts
View file

@ -12,6 +12,7 @@ import {
FieldMetaOptions,
StylePropertyOptions,
} from '../../../../../common/style_property_descriptor_types';
import { VECTOR_STYLES } from '../../../../../common/constants';
type LegendProps = {
isPointsOnly: boolean;
@ -23,7 +24,7 @@ export interface IStyleProperty {
isDynamic(): boolean;
isComplete(): boolean;
formatField(value: string | undefined): string;
getStyleName(): string;
getStyleName(): VECTOR_STYLES;
getOptions(): StylePropertyOptions;
renderRangeLegendHeader(): ReactElement<any> | null;
renderLegendDetailRow(legendProps: LegendProps): ReactElement<any> | null;
@ -35,9 +36,9 @@ export interface IStyleProperty {
export class AbstractStyleProperty implements IStyleProperty {
private readonly _options: StylePropertyOptions;
private readonly _styleName: string;
private readonly _styleName: VECTOR_STYLES;
constructor(options: StylePropertyOptions, styleName: string) {
constructor(options: StylePropertyOptions, styleName: VECTOR_STYLES) {
this._options = options;
this._styleName = styleName;
}
@ -61,7 +62,7 @@ export class AbstractStyleProperty implements IStyleProperty {
return value == undefined ? '' : value;
}
getStyleName(): string {
getStyleName(): VECTOR_STYLES {
return this._styleName;
}

7
x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.d.ts vendored
View file

@ -7,17 +7,18 @@ import { IStyleProperty } from './properties/style_property';
import { IDynamicStyleProperty } from './properties/dynamic_style_property';
import { IVectorLayer } from '../../vector_layer';
import { IVectorSource } from '../../sources/vector_source';
import { VectorStyleDescriptor } from '../../../../common/style_property_descriptor_types';
export interface IVectorStyle {
getAllStyleProperties(): IStyleProperty[];
getDescriptor(): object;
getDescriptor(): VectorStyleDescriptor;
getDynamicPropertiesArray(): IDynamicStyleProperty[];
}
export class VectorStyle implements IVectorStyle {
constructor(descriptor: unknown, source: IVectorSource, layer: IVectorLayer);
constructor(descriptor: VectorStyleDescriptor, source: IVectorSource, layer: IVectorLayer);
getAllStyleProperties(): IStyleProperty[];
getDescriptor(): object;
getDescriptor(): VectorStyleDescriptor;
getDynamicPropertiesArray(): IDynamicStyleProperty[];
}

10
x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
View file

@ -7,12 +7,7 @@
import _ from 'lodash';
import React from 'react';
import { VectorStyleEditor } from './components/vector_style_editor';
import {
getDefaultProperties,
LINE_STYLES,
POLYGON_STYLES,
VECTOR_STYLES,
} from './vector_style_defaults';
import { getDefaultProperties, LINE_STYLES, POLYGON_STYLES } from './vector_style_defaults';
import { AbstractStyle } from '../abstract_style';
import {
GEO_JSON_TYPE,
@ -21,6 +16,7 @@ import {
SOURCE_FORMATTERS_ID_ORIGIN,
LAYER_STYLE_TYPE,
DEFAULT_ICON,
VECTOR_STYLES,
} from '../../../../common/constants';
import { StyleMeta } from './style_meta';
import { VectorIcon } from './components/legend/vector_icon';
@ -49,7 +45,7 @@ const POLYGONS = [GEO_JSON_TYPE.POLYGON, GEO_JSON_TYPE.MULTI_POLYGON];
export class VectorStyle extends AbstractStyle {
static type = LAYER_STYLE_TYPE.VECTOR;
static STYLE_TYPE = STYLE_TYPE;
static createDescriptor(properties = {}, isTimeAware = true) {
return {
type: VectorStyle.type,

12
x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
View file

@ -7,7 +7,7 @@
import { VectorStyle } from './vector_style';
import { DataRequest } from '../../util/data_request';
import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types';
import { FIELD_ORIGIN } from '../../../../common/constants';
import { FIELD_ORIGIN, STYLE_TYPE } from '../../../../common/constants';
jest.mock('../../../kibana_services');
jest.mock('ui/new_platform');
@ -45,11 +45,11 @@ describe('getDescriptorWithMissingStylePropsRemoved', () => {
const fieldName = 'doIStillExist';
const properties = {
fillColor: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {},
},
lineColor: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
field: {
name: fieldName,
@ -58,7 +58,7 @@ describe('getDescriptorWithMissingStylePropsRemoved', () => {
},
},
iconSize: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
color: 'a color',
field: { name: fieldName, origin: FIELD_ORIGIN.SOURCE },
@ -249,7 +249,7 @@ describe('pluckStyleMetaFromSourceDataRequest', () => {
{
properties: {
fillColor: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
field: {
origin: FIELD_ORIGIN.SOURCE,
@ -273,7 +273,7 @@ describe('pluckStyleMetaFromSourceDataRequest', () => {
{
properties: {
fillColor: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
field: {
origin: FIELD_ORIGIN.SOURCE,

92
x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js → x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.ts
View file

@ -4,14 +4,22 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { VectorStyle } from './vector_style';
import { DEFAULT_ICON, LABEL_BORDER_SIZES, SYMBOLIZE_AS_TYPES } from '../../../../common/constants';
import {
DEFAULT_ICON,
LABEL_BORDER_SIZES,
SYMBOLIZE_AS_TYPES,
VECTOR_STYLES,
STYLE_TYPE,
} from '../../../../common/constants';
import {
COLOR_GRADIENTS,
COLOR_PALETTES,
DEFAULT_FILL_COLORS,
DEFAULT_LINE_COLORS,
// @ts-ignore
} from '../color_utils';
import { VectorStylePropertiesDescriptor } from '../../../../common/style_property_descriptor_types';
// @ts-ignore
import { getUiSettings } from '../../../kibana_services';
export const MIN_SIZE = 1;
@ -21,21 +29,8 @@ export const DEFAULT_MAX_SIZE = 32;
export const DEFAULT_SIGMA = 3;
export const DEFAULT_LABEL_SIZE = 14;
export const DEFAULT_ICON_SIZE = 6;
export const VECTOR_STYLES = {
SYMBOLIZE_AS: 'symbolizeAs',
FILL_COLOR: 'fillColor',
LINE_COLOR: 'lineColor',
LINE_WIDTH: 'lineWidth',
ICON: 'icon',
ICON_SIZE: 'iconSize',
ICON_ORIENTATION: 'iconOrientation',
LABEL_TEXT: 'labelText',
LABEL_COLOR: 'labelColor',
LABEL_SIZE: 'labelSize',
LABEL_BORDER_COLOR: 'labelBorderColor',
LABEL_BORDER_SIZE: 'labelBorderSize',
};
export const DEFAULT_COLOR_RAMP = COLOR_GRADIENTS[0].value;
export const DEFAULT_COLOR_PALETTE = COLOR_PALETTES[0].value;
export const LINE_STYLES = [VECTOR_STYLES.LINE_COLOR, VECTOR_STYLES.LINE_WIDTH];
export const POLYGON_STYLES = [
@ -44,7 +39,7 @@ export const POLYGON_STYLES = [
VECTOR_STYLES.LINE_WIDTH,
];
export function getDefaultProperties(mapColors = []) {
export function getDefaultProperties(mapColors: string[] = []): VectorStylePropertiesDescriptor {
return {
...getDefaultStaticProperties(mapColors),
[VECTOR_STYLES.SYMBOLIZE_AS]: {
@ -60,7 +55,9 @@ export function getDefaultProperties(mapColors = []) {
};
}
export function getDefaultStaticProperties(mapColors = []) {
export function getDefaultStaticProperties(
mapColors: string[] = []
): VectorStylePropertiesDescriptor {
// Colors must be state-aware to reduce unnecessary incrementation
const lastColor = mapColors.pop();
const nextColorIndex = (DEFAULT_FILL_COLORS.indexOf(lastColor) + 1) % DEFAULT_FILL_COLORS.length;
@ -71,61 +68,61 @@ export function getDefaultStaticProperties(mapColors = []) {
return {
[VECTOR_STYLES.ICON]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
value: DEFAULT_ICON,
},
},
[VECTOR_STYLES.FILL_COLOR]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
color: nextFillColor,
},
},
[VECTOR_STYLES.LINE_COLOR]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
color: nextLineColor,
},
},
[VECTOR_STYLES.LINE_WIDTH]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
size: 1,
},
},
[VECTOR_STYLES.ICON_SIZE]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
size: DEFAULT_ICON_SIZE,
},
},
[VECTOR_STYLES.ICON_ORIENTATION]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
orientation: 0,
},
},
[VECTOR_STYLES.LABEL_TEXT]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
value: '',
},
},
[VECTOR_STYLES.LABEL_COLOR]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
color: isDarkMode ? '#FFFFFF' : '#000000',
},
},
[VECTOR_STYLES.LABEL_SIZE]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
size: DEFAULT_LABEL_SIZE,
},
},
[VECTOR_STYLES.LABEL_BORDER_COLOR]: {
type: VectorStyle.STYLE_TYPE.STATIC,
type: STYLE_TYPE.STATIC,
options: {
color: isDarkMode ? '#000000' : '#FFFFFF',
},
@ -133,10 +130,10 @@ export function getDefaultStaticProperties(mapColors = []) {
};
}
export function getDefaultDynamicProperties() {
export function getDefaultDynamicProperties(): VectorStylePropertiesDescriptor {
return {
[VECTOR_STYLES.ICON]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
iconPaletteId: 'filledShapes',
field: undefined,
@ -146,10 +143,10 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.FILL_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
color: COLOR_GRADIENTS[0].value,
colorCategory: COLOR_PALETTES[0].value,
color: DEFAULT_COLOR_RAMP,
colorCategory: DEFAULT_COLOR_PALETTE,
field: undefined,
fieldMetaOptions: {
isEnabled: true,
@ -158,9 +155,10 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.LINE_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
color: undefined,
color: DEFAULT_COLOR_RAMP,
colorCategory: DEFAULT_COLOR_PALETTE,
field: undefined,
fieldMetaOptions: {
isEnabled: true,
@ -169,7 +167,7 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.LINE_WIDTH]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
minSize: 1,
maxSize: 10,
@ -181,7 +179,7 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.ICON_SIZE]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
minSize: DEFAULT_MIN_SIZE,
maxSize: DEFAULT_MAX_SIZE,
@ -193,7 +191,7 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.ICON_ORIENTATION]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
field: undefined,
fieldMetaOptions: {
@ -203,16 +201,16 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.LABEL_TEXT]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
field: undefined,
},
},
[VECTOR_STYLES.LABEL_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
color: COLOR_GRADIENTS[0].value,
colorCategory: COLOR_PALETTES[0].value,
color: DEFAULT_COLOR_RAMP,
colorCategory: DEFAULT_COLOR_PALETTE,
field: undefined,
fieldMetaOptions: {
isEnabled: true,
@ -221,7 +219,7 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.LABEL_SIZE]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
minSize: DEFAULT_MIN_SIZE,
maxSize: DEFAULT_MAX_SIZE,
@ -233,10 +231,10 @@ export function getDefaultDynamicProperties() {
},
},
[VECTOR_STYLES.LABEL_BORDER_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
type: STYLE_TYPE.DYNAMIC,
options: {
color: COLOR_GRADIENTS[0].value,
colorCategory: COLOR_PALETTES[0].value,
color: DEFAULT_COLOR_RAMP,
colorCategory: DEFAULT_COLOR_PALETTE,
field: undefined,
fieldMetaOptions: {
isEnabled: true,

1
x-pack/legacy/plugins/maps/server/maps_telemetry/maps_telemetry.ts
View file

@ -16,7 +16,6 @@ import {
ES_GEO_FIELD_TYPE,
MAP_SAVED_OBJECT_TYPE,
TELEMETRY_TYPE,
// @ts-ignore
} from '../../common/constants';
import { LayerDescriptor } from '../../common/descriptor_types';
import { MapSavedObject } from '../../../../../plugins/maps/common/map_saved_object_type';

31
x-pack/plugins/maps/common/constants.ts
View file

@ -156,15 +156,15 @@ export const COUNT_PROP_LABEL = i18n.translate('xpack.maps.aggs.defaultCountLabe
export const COUNT_PROP_NAME = 'doc_count';
export const STYLE_TYPE = {
STATIC: 'STATIC',
DYNAMIC: 'DYNAMIC',
};
export enum STYLE_TYPE {
STATIC = 'STATIC',
DYNAMIC = 'DYNAMIC',
}
export const LAYER_STYLE_TYPE = {
VECTOR: 'VECTOR',
HEATMAP: 'HEATMAP',
};
export enum LAYER_STYLE_TYPE {
VECTOR = 'VECTOR',
HEATMAP = 'HEATMAP',
}
export const COLOR_MAP_TYPE = {
CATEGORICAL: 'CATEGORICAL',
@ -190,6 +190,21 @@ export enum LABEL_BORDER_SIZES {
export const DEFAULT_ICON = 'airfield';
export enum VECTOR_STYLES {
SYMBOLIZE_AS = 'symbolizeAs',
FILL_COLOR = 'fillColor',
LINE_COLOR = 'lineColor',
LINE_WIDTH = 'lineWidth',
ICON = 'icon',
ICON_SIZE = 'iconSize',
ICON_ORIENTATION = 'iconOrientation',
LABEL_TEXT = 'labelText',
LABEL_COLOR = 'labelColor',
LABEL_SIZE = 'labelSize',
LABEL_BORDER_COLOR = 'labelBorderColor',
LABEL_BORDER_SIZE = 'labelBorderSize',
}
export enum SCALING_TYPES {
LIMIT = 'LIMIT',
CLUSTERS = 'CLUSTERS',