diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index 242b71522f9a2b..fde088ab4475e6 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -14,9 +14,7 @@ import { ColorStopsCategorical } from './color_stops_categorical';
const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';
export class ColorMapSelect extends Component {
- state = {
- selected: '',
- };
+ state = {};
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.customColorMap === prevState.prevPropsCustomColorMap) {
@@ -41,10 +39,7 @@ export class ColorMapSelect extends Component {
_onCustomColorMapChange = ({ colorStops, isInvalid }) => {
// Manage invalid custom color map in local state
if (isInvalid) {
- const newState = {
- customColorMap: colorStops,
- };
- this.setState(newState);
+ this.setState({ customColorMap: colorStops });
return;
}
@@ -56,35 +51,34 @@ export class ColorMapSelect extends Component {
};
_renderColorStopsInput() {
- let colorStopsInput;
- if (this.props.useCustomColorMap) {
- if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
- colorStopsInput = (
-
-
-
-
- );
- } else if (this.props.colorMapType === COLOR_MAP_TYPE.CATEGORICAL) {
- colorStopsInput = (
-
-
-
-
- );
- }
+ if (!this.props.useCustomColorMap) {
+ return null;
}
- return colorStopsInput;
+
+ if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
}
render() {
- const colorStopsInput = this._renderColorStopsInput();
const colorMapOptionsWithCustom = [
{
value: CUSTOM_COLOR_MAP,
@@ -110,7 +104,7 @@ export class ColorMapSelect extends Component {
valueOfSelected={valueOfSelected}
hasDividers={true}
/>
- {colorStopsInput}
+ {this._renderColorStopsInput()}
);
}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index 7994f84386a8a2..ba5621b8efadfd 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -13,87 +13,56 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
import { i18n } from '@kbn/i18n';
-export class DynamicColorForm extends React.Component {
- state = {
- colorMapType: COLOR_MAP_TYPE.ORDINAL,
- };
-
- constructor() {
- super();
- this._isMounted = false;
- }
-
- componentWillUnmount() {
- this._isMounted = false;
- }
+export function DynamicColorForm({
+ fields,
+ onDynamicStyleChange,
+ staticDynamicSelect,
+ styleProperty,
+}) {
+ const styleOptions = styleProperty.getOptions();
- componentDidMount() {
- this._isMounted = true;
- this._loadColorMapType();
- }
-
- componentDidUpdate() {
- this._loadColorMapType();
- }
-
- async _loadColorMapType() {
- const field = this.props.styleProperty.getField();
- if (!field) {
- return;
- }
- const dataType = await field.getDataType();
- const colorMapType = CATEGORICAL_DATA_TYPES.includes(dataType)
- ? COLOR_MAP_TYPE.CATEGORICAL
- : COLOR_MAP_TYPE.ORDINAL;
- if (this._isMounted && this.state.colorMapType !== colorMapType) {
- this.setState({ colorMapType }, () => {
- const options = this.props.styleProperty.getOptions();
- this.props.onDynamicStyleChange(this.props.styleProperty.getStyleName(), {
- ...options,
- type: colorMapType,
- });
- });
+ const onColorMapSelect = ({ color, customColorMap, type, useCustomColorMap }) => {
+ const newColorOptions = {
+ ...styleOptions,
+ type,
+ };
+ if (type === COLOR_MAP_TYPE.ORDINAL) {
+ newColorOptions.useCustomColorRamp = useCustomColorMap;
+ newColorOptions.customColorRamp = customColorMap;
+ newColorOptions.color = color;
+ } else {
+ newColorOptions.useCustomColorPalette = useCustomColorMap;
+ newColorOptions.customColorPalette = customColorMap;
+ newColorOptions.colorCategory = color;
}
- }
- _getColorSelector() {
- const { onDynamicStyleChange, styleProperty } = this.props;
- const styleOptions = styleProperty.getOptions();
+ onDynamicStyleChange(styleProperty.getStyleName(), newColorOptions);
+ };
+ const onFieldChange = async ({ field }) => {
+ const { name, origin, type } = field;
+ onDynamicStyleChange(styleProperty.getStyleName(), {
+ ...styleOptions,
+ field: { name, origin },
+ type: CATEGORICAL_DATA_TYPES.includes(type)
+ ? COLOR_MAP_TYPE.CATEGORICAL
+ : COLOR_MAP_TYPE.ORDINAL,
+ });
+ };
+
+ const renderColorMapSelect = () => {
if (!styleOptions.field || !styleOptions.field.name) {
- return;
+ return null;
}
- let colorSelect;
- const onColorChange = colorOptions => {
- const newColorOptions = {
- type: colorOptions.type,
- };
- if (colorOptions.type === COLOR_MAP_TYPE.ORDINAL) {
- newColorOptions.useCustomColorRamp = colorOptions.useCustomColorMap;
- newColorOptions.customColorRamp = colorOptions.customColorMap;
- newColorOptions.color = colorOptions.color;
- } else {
- newColorOptions.useCustomColorPalette = colorOptions.useCustomColorMap;
- newColorOptions.customColorPalette = colorOptions.customColorMap;
- newColorOptions.colorCategory = colorOptions.color;
- }
-
- onDynamicStyleChange(styleProperty.getStyleName(), {
- ...styleOptions,
- ...newColorOptions,
- });
- };
-
- if (this.state.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
- const customOptionLabel = i18n.translate('xpack.maps.style.customColorRampLabel', {
- defaultMessage: 'Custom color ramp',
- });
- colorSelect = (
+ if (styleOptions.type === COLOR_MAP_TYPE.ORDINAL) {
+ return (
onColorChange(options)}
+ customOptionLabel={i18n.translate('xpack.maps.style.customColorRampLabel', {
+ defaultMessage: 'Custom color ramp',
+ })}
+ onChange={onColorMapSelect}
colorMapType={COLOR_MAP_TYPE.ORDINAL}
color={styleOptions.color}
customColorMap={styleOptions.customColorRamp}
@@ -101,52 +70,39 @@ export class DynamicColorForm extends React.Component {
compressed
/>
);
- } else if (this.state.colorMapType === COLOR_MAP_TYPE.CATEGORICAL) {
- const customOptionLabel = i18n.translate('xpack.maps.style.customColorPaletteLabel', {
- defaultMessage: 'Custom color palette',
- });
- colorSelect = (
- onColorChange(options)}
- colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
- color={styleOptions.colorCategory}
- customColorMap={styleOptions.customColorPalette}
- useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
- compressed
- />
- );
}
- return colorSelect;
- }
-
- render() {
- const { fields, onDynamicStyleChange, staticDynamicSelect, styleProperty } = this.props;
- const styleOptions = styleProperty.getOptions();
- const onFieldChange = options => {
- const field = options.field;
- onDynamicStyleChange(styleProperty.getStyleName(), { ...styleOptions, field });
- };
-
- const colorSelect = this._getColorSelector();
return (
-
-
- {staticDynamicSelect}
-
-
-
-
-
- {colorSelect}
-
+
);
- }
+ };
+
+ return (
+
+
+ {staticDynamicSelect}
+
+
+
+
+
+ {renderColorMapSelect()}
+
+ );
}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
index 1d8f4e13fdd1a5..a32c2ce04d7355 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
@@ -7,48 +7,73 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { EuiComboBox } from '@elastic/eui';
-import { SOURCE_DATA_ID_ORIGIN } from '../../../../../common/constants';
+import { EuiComboBox, EuiHighlight } from '@elastic/eui';
+import { FIELD_ORIGIN } from '../../../../../common/constants';
import { i18n } from '@kbn/i18n';
+import { FieldIcon } from '../../../../../../../../../src/plugins/kibana_react/public';
-export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) {
- const onFieldChange = selectedFields => {
- onChange({
- field: selectedFields.length > 0 ? selectedFields[0].value : null,
- });
- };
+function renderOption(option, searchValue, contentClassName) {
+ return (
+
+
+
+ {option.label}
+
+ );
+}
- const groupFieldsByOrigin = () => {
- const fieldsByOriginMap = new Map();
- fields.forEach(field => {
- if (fieldsByOriginMap.has(field.origin)) {
- const fieldsList = fieldsByOriginMap.get(field.origin);
- fieldsList.push(field);
- fieldsByOriginMap.set(field.origin, fieldsList);
- } else {
- fieldsByOriginMap.set(field.origin, [field]);
- }
- });
+function groupFieldsByOrigin(fields) {
+ const fieldsByOriginMap = new Map();
+ fields.forEach(field => {
+ if (fieldsByOriginMap.has(field.origin)) {
+ const fieldsList = fieldsByOriginMap.get(field.origin);
+ fieldsList.push(field);
+ fieldsByOriginMap.set(field.origin, fieldsList);
+ } else {
+ fieldsByOriginMap.set(field.origin, [field]);
+ }
+ });
- const optionGroups = [];
- fieldsByOriginMap.forEach((fieldsList, fieldOrigin) => {
- optionGroups.push({
- label: fieldOrigin,
- options: fieldsList
- .map(field => {
- return { value: field, label: field.label };
- })
- .sort((a, b) => {
- return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
- }),
+ function fieldsListToOptions(fieldsList) {
+ return fieldsList
+ .map(field => {
+ return { value: field, label: field.label };
+ })
+ .sort((a, b) => {
+ return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
});
- });
+ }
+
+ if (fieldsByOriginMap.size === 1) {
+ // do not show origin group if all fields are from same origin
+ const onlyOriginKey = fieldsByOriginMap.keys().next().value;
+ const fieldsList = fieldsByOriginMap.get(onlyOriginKey);
+ return fieldsListToOptions(fieldsList);
+ }
- optionGroups.sort((a, b) => {
- return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+ const optionGroups = [];
+ fieldsByOriginMap.forEach((fieldsList, fieldOrigin) => {
+ optionGroups.push({
+ label: i18n.translate('xpack.maps.style.fieldSelect.OriginLabel', {
+ defaultMessage: 'Fields from {fieldOrigin}',
+ values: { fieldOrigin },
+ }),
+ options: fieldsListToOptions(fieldsList),
});
+ });
+
+ optionGroups.sort((a, b) => {
+ return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+ });
+
+ return optionGroups;
+}
- return optionGroups;
+export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) {
+ const onFieldChange = selectedFields => {
+ onChange({
+ field: selectedFields.length > 0 ? selectedFields[0].value : null,
+ });
};
let selectedOption;
@@ -61,7 +86,7 @@ export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) {
return (
);
@@ -76,7 +102,8 @@ export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) {
export const fieldShape = PropTypes.shape({
name: PropTypes.string.isRequired,
- origin: PropTypes.oneOf(['join', SOURCE_DATA_ID_ORIGIN]).isRequired,
+ origin: PropTypes.oneOf(Object.values(FIELD_ORIGIN)).isRequired,
+ type: PropTypes.string.isRequired,
});
FieldSelect.propTypes = {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
index 2f3cfa1d8e4bb6..0784e2a8cc355c 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
@@ -61,6 +61,7 @@ export class VectorStyleEditor extends Component {
label: await field.getLabel(),
name: field.getName(),
origin: field.getOrigin(),
+ type: await field.getDataType(),
};
};