diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js b/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js index 8caaf89723237..921e5dad28a33 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js @@ -92,7 +92,7 @@ export function getLinearGradient(colorStrings) { return `${linearGradient} ${colorStrings[colorStrings.length - 1]} 100%)`; } -export const COLOR_PALETTES = [ +const COLOR_PALETTES_CONFIGS = [ { id: 'palette_0', colors: DEFAULT_FILL_COLORS.slice(0, COLOR_PALETTE_MAX_SIZE), @@ -130,11 +130,11 @@ export const COLOR_PALETTES = [ ]; export function getColorPalette(paletteId) { - const palette = COLOR_PALETTES.find(palette => palette.id === paletteId); + const palette = COLOR_PALETTES_CONFIGS.find(palette => palette.id === paletteId); return palette ? palette.colors : null; } -export const COLOR_PALETTES_INPUTS = COLOR_PALETTES.map(palette => { +export const COLOR_PALETTES = COLOR_PALETTES_CONFIGS.map(palette => { const paletteDisplay = palette.colors.map(color => { const style = { backgroundColor: color, 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 0349dbe3b92de..242b71522f9a2 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 @@ -55,38 +55,6 @@ export class ColorMapSelect extends Component { }); }; - componentDidMount() { - this._updateSelected(); - } - - componentDidUpdate() { - this._updateSelected(); - } - - _updateSelected() { - const { color, useCustomColorMap, colorMapOptions } = this.props; - let valueOfSelected; - let shouldUpdate = false; - if (useCustomColorMap) { - valueOfSelected = CUSTOM_COLOR_MAP; - } else { - if (colorMapOptions.find(option => option.value === color)) { - valueOfSelected = color; - } else { - valueOfSelected = colorMapOptions[0].value; - shouldUpdate = true; - } - } - - if (this.state.selected !== valueOfSelected) { - this.setState({ selected: valueOfSelected }, () => { - if (shouldUpdate) { - this._onColorMapSelect(valueOfSelected); - } - }); - } - } - _renderColorStopsInput() { let colorStopsInput; if (this.props.useCustomColorMap) { @@ -125,12 +93,21 @@ export class ColorMapSelect extends Component { ...this.props.colorMapOptions, ]; + let valueOfSelected; + if (this.props.useCustomColorMap) { + valueOfSelected = CUSTOM_COLOR_MAP; + } else { + valueOfSelected = this.props.colorMapOptions.find(option => option.value === this.props.color) + ? this.props.color + : ''; + } + return ( {colorStopsInput} 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 0c9f7b9c65d38..7994f84386a8a 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 @@ -10,7 +10,7 @@ import { FieldSelect } from '../field_select'; import { ColorMapSelect } from './color_map_select'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common/constants'; -import { COLOR_GRADIENTS, COLOR_PALETTES_INPUTS } from '../../../color_utils'; +import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils'; import { i18n } from '@kbn/i18n'; export class DynamicColorForm extends React.Component { @@ -46,7 +46,13 @@ export class DynamicColorForm extends React.Component { ? COLOR_MAP_TYPE.CATEGORICAL : COLOR_MAP_TYPE.ORDINAL; if (this._isMounted && this.state.colorMapType !== colorMapType) { - this.setState({ colorMapType }); + this.setState({ colorMapType }, () => { + const options = this.props.styleProperty.getOptions(); + this.props.onDynamicStyleChange(this.props.styleProperty.getStyleName(), { + ...options, + type: colorMapType, + }); + }); } } @@ -62,34 +68,21 @@ export class DynamicColorForm extends React.Component { const onColorChange = colorOptions => { const newColorOptions = { type: colorOptions.type, - color: colorOptions.color, }; 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; } - const oldStyleOptions = { ...styleOptions }; - - if (oldStyleOptions.type === !newColorOptions.type) { - delete oldStyleOptions.type; - if (newColorOptions.type === COLOR_MAP_TYPE.ORDINAL) { - delete oldStyleOptions.useCustomColorPalette; - delete oldStyleOptions.customColorPalette; - } else { - delete oldStyleOptions.useCustomColorRamp; - delete oldStyleOptions.customColorRamp; - } - } - - const newOptions = { - ...oldStyleOptions, + onDynamicStyleChange(styleProperty.getStyleName(), { + ...styleOptions, ...newColorOptions, - }; - onDynamicStyleChange(styleProperty.getStyleName(), newOptions); + }); }; if (this.state.colorMapType === COLOR_MAP_TYPE.ORDINAL) { @@ -114,11 +107,11 @@ export class DynamicColorForm extends React.Component { }); colorSelect = ( onColorChange(options)} colorMapType={COLOR_MAP_TYPE.CATEGORICAL} - color={styleOptions.color} + color={styleOptions.colorCategory} customColorMap={styleOptions.customColorPalette} useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)} compressed @@ -131,7 +124,8 @@ export class DynamicColorForm extends React.Component { render() { const { fields, onDynamicStyleChange, staticDynamicSelect, styleProperty } = this.props; const styleOptions = styleProperty.getOptions(); - const onFieldChange = ({ field }) => { + const onFieldChange = options => { + const field = options.field; onDynamicStyleChange(styleProperty.getStyleName(), { ...styleOptions, field }); }; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js index d3862f80385f4..2c41fb20bd4c0 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js @@ -26,15 +26,15 @@ export function extractColorFromStyleProperty(colorStyleProperty, defaultColor) if (colorStyleProperty.options.useCustomColorPalette) { return colorStyleProperty.options.customColorPalette && colorStyleProperty.options.customColorPalette.length - ? colorStyleProperty.options.customColorPalette[0].color + ? colorStyleProperty.options.customColorPalette[0].colorCategory : defaultColor; } - if (!colorStyleProperty.options.color) { + if (!colorStyleProperty.options.colorCategory) { return null; } - const palette = getColorPalette(colorStyleProperty.options.color); + const palette = getColorPalette(colorStyleProperty.options.colorCategory); return palette[0]; } else { // return middle of gradient for dynamic style property diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js index a64ad63ade356..232a602db3590 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js @@ -178,7 +178,7 @@ export class DynamicColorProperty extends DynamicStyleProperty { return EMPTY_STOPS; } - const colors = getColorPalette(this._options.color); + const colors = getColorPalette(this._options.colorCategory); if (!colors) { return EMPTY_STOPS; } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js index 597a6ecd6fbff..54af55b61ab2e 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js @@ -6,7 +6,12 @@ import { VectorStyle } from './vector_style'; import { SYMBOLIZE_AS_CIRCLE, DEFAULT_ICON_SIZE } from './vector_constants'; -import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../color_utils'; +import { + COLOR_GRADIENTS, + COLOR_PALETTES, + DEFAULT_FILL_COLORS, + DEFAULT_LINE_COLORS, +} from '../color_utils'; import chrome from 'ui/chrome'; const DEFAULT_ICON = 'airfield'; @@ -135,7 +140,8 @@ export function getDefaultDynamicProperties() { [VECTOR_STYLES.FILL_COLOR]: { type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { - color: undefined, + color: COLOR_GRADIENTS[0].value, + colorCategory: COLOR_PALETTES[0].value, field: undefined, fieldMetaOptions: { isEnabled: true, @@ -197,7 +203,8 @@ export function getDefaultDynamicProperties() { [VECTOR_STYLES.LABEL_COLOR]: { type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { - color: undefined, + color: COLOR_GRADIENTS[0].value, + colorCategory: COLOR_PALETTES[0].value, field: undefined, fieldMetaOptions: { isEnabled: true, @@ -220,7 +227,8 @@ export function getDefaultDynamicProperties() { [VECTOR_STYLES.LABEL_BORDER_COLOR]: { type: VectorStyle.STYLE_TYPE.DYNAMIC, options: { - color: undefined, + color: COLOR_GRADIENTS[0].value, + colorCategory: COLOR_PALETTES[0].value, field: undefined, fieldMetaOptions: { isEnabled: true,