[Maps] Support categorical styling for numbers and dates

x-pack/legacy/plugins/maps/common/constants.ts

@@ -151,6 +151,7 @@ export const COLOR_MAP_TYPE = {
 export const COLOR_PALETTE_MAX_SIZE = 10;
 
 export const CATEGORICAL_DATA_TYPES = ['string', 'ip', 'boolean'];
+export const ORDINAL_DATA_TYPES = ['number', 'date'];
 
 export const SYMBOLIZE_AS_TYPES = {
   CIRCLE: 'circle',

x-pack/legacy/plugins/maps/public/layers/layer.js

@@ -332,18 +332,6 @@ export class AbstractLayer {
     return [];
   }
 
-  async getDateFields() {
-    return [];
-  }
-
-  async getNumberFields() {
-    return [];
-  }
-
-  async getCategoricalFields() {
-    return [];
-  }
-
   async getFields() {
     return [];
   }

x-pack/legacy/plugins/maps/public/layers/sources/es_agg_source.js

@@ -102,10 +102,6 @@ export class AbstractESAggSource extends AbstractESSource {
     return this.getMetricFields().map(esAggMetric => esAggMetric.makeMetricAggConfig());
   }
 
-  async getNumberFields() {
-    return this.getMetricFields();
-  }
-
   async filterAndFormatPropertiesToHtmlForMetricFields(properties) {
     const metricFields = this.getMetricFields();
     const tooltipPropertiesPromises = [];

x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js

@@ -19,7 +19,6 @@ import {
   ES_GEO_FIELD_TYPE,
   DEFAULT_MAX_BUCKETS_LIMIT,
   SORT_ORDER,
-  CATEGORICAL_DATA_TYPES,
 } from '../../../../common/constants';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
@@ -159,49 +158,6 @@ export class ESSearchSource extends AbstractESSource {
     );
   }
 
-  async getNumberFields() {
-    try {
-      const indexPattern = await this.getIndexPattern();
-      return indexPattern.fields.getByType('number').map(field => {
-        return this.createField({ fieldName: field.name });
-      });
-    } catch (error) {
-      return [];
-    }
-  }
-
-  async getDateFields() {
-    try {
-      const indexPattern = await this.getIndexPattern();
-      return indexPattern.fields.getByType('date').map(field => {
-        return this.createField({ fieldName: field.name });
-      });
-    } catch (error) {
-      return [];
-    }
-  }
-
-  async getCategoricalFields() {
-    try {
-      const indexPattern = await this.getIndexPattern();
-
-      const aggFields = [];
-      CATEGORICAL_DATA_TYPES.forEach(dataType => {
-        indexPattern.fields.getByType(dataType).forEach(field => {
-          if (field.aggregatable) {
-            aggFields.push(field);
-          }
-        });
-      });
-      return aggFields.map(field => {
-        return this.createField({ fieldName: field.name });
-      });
-    } catch (error) {
-      //error surfaces in the LayerTOC UI
-      return [];
-    }
-  }
-
   async getFields() {
     try {
       const indexPattern = await this.getIndexPattern();

x-pack/legacy/plugins/maps/public/layers/sources/vector_source.js

@@ -111,22 +111,10 @@ export class AbstractVectorSource extends AbstractSource {
     return null;
   }
 
-  async getDateFields() {
-    return [];
-  }
-
-  async getNumberFields() {
-    return [];
-  }
-
   async getFields() {
     return [...(await this.getDateFields()), ...(await this.getNumberFields())];
   }
 
-  async getCategoricalFields() {
-    return [];
-  }
-
   async getLeftJoinFields() {
     return [];
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js

@@ -6,10 +6,18 @@
 
 import React, { Component, Fragment } from 'react';
 
-import { EuiSuperSelect, EuiSpacer } from '@elastic/eui';
+import {
+  EuiSpacer,
+  EuiSelect,
+  EuiSuperSelect,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+} from '@elastic/eui';
 import { ColorStopsOrdinal } from './color_stops_ordinal';
 import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
 import { ColorStopsCategorical } from './color_stops_categorical';
+import { i18n } from '@kbn/i18n';
 
 const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';
 
@@ -27,6 +35,53 @@ export class ColorMapSelect extends Component {
     };
   }
 
+  _renderColorMapToggle() {
+    const options = [
+      {
+        value: COLOR_MAP_TYPE.ORDINAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.quantitativeLabel', {
+          defaultMessage: 'Quantitative',
+        }),
+      },
+      {
+        value: COLOR_MAP_TYPE.CATEGORICAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.qualitativeLavel', {
+          defaultMessage: 'Qualitative',
+        }),
+      },
+    ];
+
+    const selectedValue = this.props.styleProperty.isOrdinal()
+      ? COLOR_MAP_TYPE.ORDINAL
+      : COLOR_MAP_TYPE.CATEGORICAL;
+
+    return (
+      <EuiToolTip
+        position="top"
+        content={i18n.translate(
+          'xpack.maps.styles.dynamicColorSelect.qualitativeOrQuantitativeTooltip',
+          {
+            defaultMessage:
+              'Choose `quantitative` to map the value as a number to a color on a range. Choose `qualitative` to map the value as a category to a color from a palette',
+          }
+        )}
+      >
+        <EuiSelect
+          options={options}
+          value={selectedValue}
+          onChange={this.props.onColorMapTypeChange}
+          aria-label={i18n.translate(
+            'xpack.maps.styles.dynamicColorSelect.qualitativeOrQuantitativeAriaLabel',
+            {
+              defaultMessage: 'Select to style by gradient or color palette',
+            }
+          )}
+          compressed
+        />
+      </EuiToolTip>
+    );
+  }
+
   _onColorMapSelect = selectedValue => {
     const useCustomColorMap = selectedValue === CUSTOM_COLOR_MAP;
     this.props.onChange({
@@ -57,30 +112,24 @@ export class ColorMapSelect extends Component {
 
     if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
       return (
-        <Fragment>
-          <EuiSpacer size="s" />
-          <ColorStopsOrdinal
-            colorStops={this.state.customColorMap}
-            onChange={this._onCustomColorMapChange}
-          />
-        </Fragment>
+        <ColorStopsOrdinal
+          colorStops={this.state.customColorMap}
+          onChange={this._onCustomColorMapChange}
+        />
       );
     }
 
     return (
-      <Fragment>
-        <EuiSpacer size="s" />
-        <ColorStopsCategorical
-          colorStops={this.state.customColorMap}
-          field={this.props.styleProperty.getField()}
-          getValueSuggestions={this.props.styleProperty.getValueSuggestions}
-          onChange={this._onCustomColorMapChange}
-        />
-      </Fragment>
+      <ColorStopsCategorical
+        colorStops={this.state.customColorMap}
+        field={this.props.styleProperty.getField()}
+        getValueSuggestions={this.props.styleProperty.getValueSuggestions}
+        onChange={this._onCustomColorMapChange}
+      />
     );
   }
 
-  render() {
+  _renderColorMapSelections() {
     const colorMapOptionsWithCustom = [
       {
         value: CUSTOM_COLOR_MAP,
@@ -98,15 +147,39 @@ export class ColorMapSelect extends Component {
         : '';
     }
 
+    let toggle;
+    if (this.props.showColorMapTypeToggle) {
+      toggle = <EuiFlexItem grow={false}>{this._renderColorMapToggle()}</EuiFlexItem>;
+    } else {
+      toggle = <Fragment />;
+    }
+
+    return (
+      <EuiFlexGroup gutterSize={'none'}>
+        {toggle}
+        <EuiFlexItem>
+          <EuiSuperSelect
+            compressed
+            options={colorMapOptionsWithCustom}
+            onChange={this._onColorMapSelect}
+            valueOfSelected={valueOfSelected}
+            hasDividers={true}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  render() {
     return (
       <Fragment>
-        <EuiSuperSelect
-          options={colorMapOptionsWithCustom}
-          onChange={this._onColorMapSelect}
-          valueOfSelected={valueOfSelected}
-          hasDividers={true}
-        />
-        {this._renderColorStopsInput()}
+        {this._renderColorMapSelections()}
+
+        <EuiSpacer size="s" />
+
+        <EuiFlexGroup>
+          <EuiFlexItem>{this._renderColorStopsInput()}</EuiFlexItem>
+        </EuiFlexGroup>
       </Fragment>
     );
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js

@@ -13,6 +13,12 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
 import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
 import { i18n } from '@kbn/i18n';
 
+function getDefaultColorMapType(fieldType) {
+  return CATEGORICAL_DATA_TYPES.includes(fieldType)
+    ? COLOR_MAP_TYPE.CATEGORICAL
+    : COLOR_MAP_TYPE.ORDINAL;
+}
+
 export function DynamicColorForm({
   fields,
   onDynamicStyleChange,
@@ -40,21 +46,42 @@ export function DynamicColorForm({
   };
 
   const onFieldChange = async ({ field }) => {
-    const { name, origin, type } = field;
+    const { name, origin, type: fieldType } = field;
+    const defaultColorMapType = getDefaultColorMapType(fieldType);
     onDynamicStyleChange(styleProperty.getStyleName(), {
       ...styleOptions,
       field: { name, origin },
-      type: CATEGORICAL_DATA_TYPES.includes(type)
-        ? COLOR_MAP_TYPE.CATEGORICAL
-        : COLOR_MAP_TYPE.ORDINAL,
+      type: defaultColorMapType,
+    });
+  };
+
+  const onColorMapTypeChange = async e => {
+    const colorMapType = e.target.value;
+    onDynamicStyleChange(styleProperty.getStyleName(), {
+      ...styleOptions,
+      type: colorMapType,
+    });
+  };
+
+  const getField = () => {
+    const fieldName = styleProperty.getFieldName();
+    if (!fieldName) {
+      return null;
+    }
+
+    return fields.find(field => {
+      return field.name === fieldName;
     });
   };
 
   const renderColorMapSelect = () => {
-    if (!styleOptions.field || !styleOptions.field.name) {
+    const field = getField();
+    if (!field) {
       return null;
     }
 
+    const showColorMapTypeToggle = !CATEGORICAL_DATA_TYPES.includes(field.type);
+
     if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
@@ -63,29 +90,33 @@ export function DynamicColorForm({
             defaultMessage: 'Custom color ramp',
           })}
           onChange={onColorMapSelect}
+          onColorMapTypeChange={onColorMapTypeChange}
           colorMapType={COLOR_MAP_TYPE.ORDINAL}
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
           useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
           styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
+        />
+      );
+    } else if (styleProperty.isCategorical()) {
+      return (
+        <ColorMapSelect
+          colorMapOptions={COLOR_PALETTES}
+          customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
+            defaultMessage: 'Custom color palette',
+          })}
+          onColorMapTypeChange={onColorMapTypeChange}
+          onChange={onColorMapSelect}
+          colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
+          color={styleOptions.colorCategory}
+          customColorMap={styleOptions.customColorPalette}
+          useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
+          styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
         />
       );
     }
-
-    return (
-      <ColorMapSelect
-        colorMapOptions={COLOR_PALETTES}
-        customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
-          defaultMessage: 'Custom color palette',
-        })}
-        onChange={onColorMapSelect}
-        colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
-        color={styleOptions.colorCategory}
-        customColorMap={styleOptions.customColorPalette}
-        useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
-        styleProperty={styleProperty}
-      />
-    );
   };
 
   return (