rename to color category

elastic · Jan 14, 2020 · 3680b60 · 3680b60
1 parent b098784
commit 3680b60
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 67 deletions.
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
@@ -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
@@ -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 (
       <Fragment>
         <EuiSuperSelect
           options={colorMapOptionsWithCustom}
           onChange={this._onColorMapSelect}
-          valueOfSelected={this.state.selected}
+          valueOfSelected={valueOfSelected}
           hasDividers={true}
         />
         {colorStopsInput}

diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/...ck/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 = (
         <ColorMapSelect
-          colorMapOptions={COLOR_PALETTES_INPUTS}
+          colorMapOptions={COLOR_PALETTES}
           customOptionLabel={customOptionLabel}
           onChange={options => 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/...s/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js b/...s/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
@@ -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
@@ -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,