[Maps] Support categorical styling for numbers and dates

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

@@ -7,13 +7,16 @@
 import { IESSource } from './es_source';
 import { AbstractESSource } from './es_source';
 import { AGG_TYPE } from '../../../common/constants';
+import { IESAggField } from '../fields/es_agg_field';
 
 export interface IESAggSource extends IESSource {
   getAggKey(aggType: AGG_TYPE, fieldName: string): string;
   getAggLabel(aggType: AGG_TYPE, fieldName: string): string;
+  getMetricFields(): IESAggField[];
 }
 
 export class AbstractESAggSource extends AbstractESSource implements IESAggSource {
   getAggKey(aggType: AGG_TYPE, fieldName: string): string;
   getAggLabel(aggType: AGG_TYPE, fieldName: string): string;
+  getMetricFields(): IESAggField[];
 }

x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.d.ts

@@ -6,9 +6,7 @@
 
 import { AbstractESAggSource } from '../es_agg_source';
 import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types';
-import { IESAggField } from '../../fields/es_agg_field';
 
 export class ESGeoGridSource extends AbstractESAggSource {
   constructor(sourceDescriptor: ESGeoGridSourceDescriptor, inspectorAdapters: unknown);
-  getMetricFields(): IESAggField[];
 }

x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.test.ts

@@ -11,55 +11,49 @@ import { AGG_TYPE, ES_GEO_GRID, GRID_RESOLUTION, RENDER_AS } from '../../../../c
 import { IField } from '../../fields/field';
 
 describe('ESGeoGridSource', () => {
-  it('metrics and fields should match', async () => {
-    const metricExamples = [
-      {
-        type: AGG_TYPE.SUM,
-        field: 'myFieldGettingSummed',
-        label: 'my custom label',
-      },
-      {
-        // metric config is invalid beause field is missing
-        type: AGG_TYPE.MAX,
-      },
-      {
-        // metric config is valid because "count" metric does not need to provide field
-        type: AGG_TYPE.COUNT,
-        label: '', // should ignore empty label fields
-      },
-    ];
+  const metricExamples = [
+    {
+      type: AGG_TYPE.SUM,
+      field: 'myFieldGettingSummed',
+      label: 'my custom label',
+    },
+    {
+      // metric config is invalid beause field is missing
+      type: AGG_TYPE.MAX,
+    },
+    {
+      // metric config is valid because "count" metric does not need to provide field
+      type: AGG_TYPE.COUNT,
+      label: '', // should ignore empty label fields
+    },
+  ];
 
-    const geogridSource = new ESGeoGridSource(
-      {
-        id: 'foobar',
-        indexPatternId: 'fooIp',
-        geoField: 'bar',
-        metrics: metricExamples,
-        resolution: GRID_RESOLUTION.COARSE,
-        type: ES_GEO_GRID,
-        requestType: RENDER_AS.HEATMAP,
-      },
-      {}
-    );
+  const geogridSource = new ESGeoGridSource(
+    {
+      id: 'foobar',
+      indexPatternId: 'fooIp',
+      geoField: 'bar',
+      metrics: metricExamples,
+      resolution: GRID_RESOLUTION.COARSE,
+      type: ES_GEO_GRID,
+      requestType: RENDER_AS.HEATMAP,
+    },
+    {}
+  );
 
-    const fields = await geogridSource.getFields();
-    const metrics = await geogridSource.getMetricFields();
-
-    const getFieldMeta = async (field: IField) => {
-      return {
-        field: field.getName(),
-        label: await field.getLabel(),
-        type: await field.getDataType(),
-      };
+  const getFieldMeta = async (field: IField) => {
+    return {
+      field: field.getName(),
+      label: await field.getLabel(),
+      type: await field.getDataType(),
     };
+  };
 
-    const fm = await Promise.all(fields.map(getFieldMeta));
-    const mm = await Promise.all(metrics.map(getFieldMeta));
-
-    expect(_.isEqual(fm, mm)).toEqual(true);
-
+  it('getMetricFields should remove incomplete metric aggregations. Smaller tests t', async () => {
+    const fields = await geogridSource.getFields();
+    const fieldsMeta = await Promise.all(fields.map(getFieldMeta));
     expect(
-      _.isEqual(fm, [
+      _.isEqual(fieldsMeta, [
         {
           type: 'number',
           field: 'sum_of_myFieldGettingSummed',
@@ -73,4 +67,13 @@ describe('ESGeoGridSource', () => {
       ])
     ).toEqual(true);
   });
+
+  it('getFields should return getMetricFields', async () => {
+    const fields = await geogridSource.getFields();
+    const metrics = await geogridSource.getMetricFields();
+    const fieldsMeta = await Promise.all(fields.map(getFieldMeta));
+    const metricFieldsMeta = await Promise.all(metrics.map(getFieldMeta));
+
+    expect(_.isEqual(fieldsMeta, metricFieldsMeta)).toEqual(true);
+  });
 });

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

@@ -130,12 +130,9 @@ export class ColorMapSelect extends Component {
         : '';
     }
 
-    let toggle;
-    if (this.props.showColorMapTypeToggle) {
-      toggle = <EuiFlexItem grow={false}>{this._renderColorMapToggle()}</EuiFlexItem>;
-    } else {
-      toggle = <Fragment />;
-    }
+    const toggle = this.props.showColorMapTypeToggle ? (
+      <EuiFlexItem grow={false}>{this._renderColorMapToggle()}</EuiFlexItem>
+    ) : null;
 
     return (
       <EuiFlexGroup gutterSize={'none'}>

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

@@ -13,12 +13,6 @@ 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,
@@ -47,7 +41,9 @@ export function DynamicColorForm({
 
   const onFieldChange = async ({ field }) => {
     const { name, origin, type: fieldType } = field;
-    const defaultColorMapType = getDefaultColorMapType(fieldType);
+    const defaultColorMapType = CATEGORICAL_DATA_TYPES.includes(fieldType)
+      ? COLOR_MAP_TYPE.CATEGORICAL
+      : COLOR_MAP_TYPE.ORDINAL;
     onDynamicStyleChange(styleProperty.getStyleName(), {
       ...styleOptions,
       field: { name, origin },

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

@@ -33,7 +33,7 @@ export class VectorStyleEditor extends Component {
     dateFields: [],
     numberFields: [],
     fields: [],
-    styleableFields: [],
+    ordinalAndCategoricalFields: [],
     defaultDynamicProperties: getDefaultDynamicProperties(),
     defaultStaticProperties: getDefaultStaticProperties(),
     supportedFeatures: undefined,
@@ -70,25 +70,19 @@ export class VectorStyleEditor extends Component {
     const fieldPromises = fields.map(getFieldMeta);
     const fieldsArrayAll = await Promise.all(fieldPromises);
     if (this._isMounted && !_.isEqual(fieldsArrayAll, this.state.fields)) {
-      this.setState({ fields: fieldsArrayAll });
+      return;
     }
 
-    const styleableFields = fieldsArrayAll.filter(field => {
-      return CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type);
+    this.setState({
+      fields: fieldsArrayAll,
+      ordinalAndCategoricalFields: fieldsArrayAll.filter(field => {
+        return (
+          CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type)
+        );
+      }),
+      dateFields: fieldsArrayAll.filter(field => field.type === 'date'),
+      numberFields: fieldsArrayAll.filter(field => field.type === 'number'),
     });
-    if (this._isMounted && !_.isEqual(styleableFields, this.state.styleableFields)) {
-      this.setState({ styleableFields: styleableFields });
-    }
-
-    const dateFieldsArray = styleableFields.filter(field => field.type === 'date');
-    if (this._isMounted && !_.isEqual(dateFieldsArray, this.state.dateFields)) {
-      this.setState({ dateFields: dateFieldsArray });
-    }
-
-    const numberFieldsArray = styleableFields.filter(field => field.type === 'number');
-    if (this._isMounted && !_.isEqual(numberFieldsArray, this.state.numberFields)) {
-      this.setState({ numberFields: numberFieldsArray });
-    }
   }
 
   async _loadSupportedFeatures() {
@@ -166,7 +160,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.FILL_COLOR]}
-        fields={this.state.styleableFields}
+        fields={this.state.ordinalAndCategoricalFields}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.FILL_COLOR].options
         }
@@ -187,7 +181,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_COLOR]}
-        fields={this.state.styleableFields}
+        fields={this.state.ordinalAndCategoricalFields}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.LINE_COLOR].options
         }
@@ -243,7 +237,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_COLOR]}
-          fields={this.state.styleableFields}
+          fields={this.state.ordinalAndCategoricalFields}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_COLOR].options
           }
@@ -276,7 +270,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_COLOR]}
-          fields={this.state.styleableFields}
+          fields={this.state.ordinalAndCategoricalFields}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
           }
@@ -329,7 +323,7 @@ export class VectorStyleEditor extends Component {
             onStaticStyleChange={this._onStaticStyleChange}
             onDynamicStyleChange={this._onDynamicStyleChange}
             styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON]}
-            fields={this.state.styleableFields}
+            fields={this.state.ordinalAndCategoricalFields}
             defaultStaticStyleOptions={
               this.state.defaultStaticProperties[VECTOR_STYLES.ICON].options
             }

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

@@ -237,7 +237,7 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => {
   });
 });
 
-test('Should read out categorical type correctly', async () => {
+test('isCategorical should return true when type is categorical', async () => {
   const categoricalColorStyle = makeProperty({
     type: COLOR_MAP_TYPE.CATEGORICAL,
     colorCategory: 'palette_0',
@@ -247,7 +247,7 @@ test('Should read out categorical type correctly', async () => {
   expect(categoricalColorStyle.isCategorical()).toEqual(true);
 });
 
-test('Should read out ordinal correctly when type===undefined', async () => {
+test('isOrdinal should return true when type is ordinal', async () => {
   const ordinalColorStyle = makeProperty({
     type: undefined,
     color: 'Blues',