[Maps] Add percentile metric

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

@@ -150,6 +150,7 @@ export enum AGG_TYPE {
   MIN = 'min',
   SUM = 'sum',
   TERMS = 'terms',
+  PERCENTILE = 'percentile',
   UNIQUE_COUNT = 'cardinality',
 }
 
@@ -171,6 +172,7 @@ export const GEOTILE_GRID_AGG_NAME = 'gridSplit';
 export const GEOCENTROID_AGG_NAME = 'gridCentroid';
 
 export const TOP_TERM_PERCENTAGE_SUFFIX = '__percentage';
+export const DEFAULT_PERCENTILE = 50;
 
 export const COUNT_PROP_LABEL = i18n.translate('xpack.maps.aggs.defaultCountLabel', {
   defaultMessage: 'count',

x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts

@@ -60,7 +60,13 @@ export type FieldedAggDescriptor = AbstractAggDescriptor & {
   field?: string;
 };
 
-export type AggDescriptor = CountAggDescriptor | FieldedAggDescriptor;
+export type PercentileAggDescriptor = AbstractAggDescriptor & {
+  type: AGG_TYPE.PERCENTILE;
+  field?: string;
+  percentile?: number;
+};
+
+export type AggDescriptor = CountAggDescriptor | FieldedAggDescriptor | PercentileAggDescriptor;
 
 export type AbstractESAggSourceDescriptor = AbstractESSourceDescriptor & {
   metrics: AggDescriptor[];

x-pack/plugins/maps/common/elasticsearch_util/es_agg_utils.ts

@@ -6,7 +6,7 @@
 import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
 import { IndexPattern, IFieldType } from '../../../../../src/plugins/data/common';
-import { TOP_TERM_PERCENTAGE_SUFFIX } from '../constants';
+import { AGG_TYPE, JOIN_FIELD_NAME_PREFIX, TOP_TERM_PERCENTAGE_SUFFIX } from '../constants';
 
 export type BucketProperties = Record<string | number, unknown>;
 export type PropertiesMap = Map<string, BucketProperties>;
@@ -46,6 +46,7 @@ export function extractPropertiesFromBucket(
       continue;
     }
 
+    // todo: push these implementations in the IAggFields
     if (_.has(bucket[key], 'value')) {
       properties[key] = bucket[key].value;
     } else if (_.has(bucket[key], 'buckets')) {
@@ -63,7 +64,20 @@ export function extractPropertiesFromBucket(
         );
       }
     } else {
-      properties[key] = bucket[key];
+      if (
+        key.startsWith(AGG_TYPE.PERCENTILE) ||
+        key.startsWith(JOIN_FIELD_NAME_PREFIX + AGG_TYPE.PERCENTILE)
+      ) {
+        const values = bucket[key].values;
+        for (const k in values) {
+          if (values.hasOwnProperty(k)) {
+            properties[key] = values[k];
+            break;
+          }
+        }
+      } else {
+        properties[key] = bucket[key];
+      }
     }
   }
   return properties;

x-pack/plugins/maps/public/classes/fields/agg/count_agg_field.ts

@@ -14,9 +14,9 @@ import { IESAggField, CountAggFieldParams } from './agg_field_types';
 
 // Agg without field. Essentially a count-aggregation.
 export class CountAggField implements IESAggField {
-  private readonly _source: IESAggSource;
+  protected readonly _source: IESAggSource;
   private readonly _origin: FIELD_ORIGIN;
-  private readonly _label?: string;
+  protected readonly _label?: string;
   private readonly _canReadFromGeoJson: boolean;
 
   constructor({ label, source, origin, canReadFromGeoJson = true }: CountAggFieldParams) {

x-pack/plugins/maps/public/classes/fields/agg/es_agg_factory.ts

@@ -6,12 +6,13 @@
 
 import { AggDescriptor } from '../../../../common/descriptor_types';
 import { IESAggSource } from '../../sources/es_agg_source';
-import { AGG_TYPE, FIELD_ORIGIN } from '../../../../common/constants';
+import { AGG_TYPE, DEFAULT_PERCENTILE, FIELD_ORIGIN } from '../../../../common/constants';
 import { ESDocField } from '../es_doc_field';
 import { TopTermPercentageField } from './top_term_percentage_field';
 import { CountAggField } from './count_agg_field';
 import { IESAggField } from './agg_field_types';
 import { AggField } from './agg_field';
+import { PercentileAggField } from './percentile_agg_field';
 
 export function esAggFieldsFactory(
   aggDescriptor: AggDescriptor,
@@ -27,6 +28,21 @@ export function esAggFieldsFactory(
       origin,
       canReadFromGeoJson,
     });
+  } else if (aggDescriptor.type === AGG_TYPE.PERCENTILE) {
+    aggField = new PercentileAggField({
+      label: aggDescriptor.label,
+      esDocField:
+        'field' in aggDescriptor && aggDescriptor.field
+          ? new ESDocField({ fieldName: aggDescriptor.field, source, origin })
+          : undefined,
+      percentile:
+        'percentile' in aggDescriptor && typeof aggDescriptor.percentile === 'number'
+          ? aggDescriptor.percentile
+          : DEFAULT_PERCENTILE,
+      source,
+      origin,
+      canReadFromGeoJson,
+    });
   } else {
     aggField = new AggField({
       label: aggDescriptor.label,

x-pack/plugins/maps/public/classes/fields/agg/percentile_agg_field.ts

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IndexPattern } from 'src/plugins/data/common/index_patterns/index_patterns';
+import { AGG_TYPE } from '../../../../common/constants';
+import { IESAggField, CountAggFieldParams } from './agg_field_types';
+import { CountAggField } from './count_agg_field';
+import { addFieldToDSL, getField } from '../../../../common/elasticsearch_util';
+import { ESDocField } from '../es_doc_field';
+
+export interface PercentileAggParams extends CountAggFieldParams {
+  esDocField?: ESDocField;
+  percentile: number;
+}
+
+export class PercentileAggField extends CountAggField implements IESAggField {
+  private readonly _percentile: number;
+  private readonly _esDocField?: ESDocField;
+  constructor(params: PercentileAggParams) {
+    super(params);
+    this._esDocField = params.esDocField;
+    this._percentile = params.percentile;
+  }
+
+  supportsFieldMeta(): boolean {
+    return true;
+  }
+
+  canValueBeFormatted(): boolean {
+    return true;
+  }
+
+  async getLabel(): Promise<string> {
+    const suffix = this._percentile === 1 ? 'st' : this._percentile === 2 ? 'nd' : 'th';
+    return this._label
+      ? this._label
+      : `${this._percentile}${suffix} ${this._source.getAggLabel(
+          this._getAggType(),
+          this.getRootName()
+        )}`;
+  }
+
+  getName() {
+    return `${super.getName()}_${this._percentile}`;
+  }
+
+  getRootName(): string {
+    return this._esDocField ? this._esDocField.getName() : '';
+  }
+
+  getValueAggDsl(indexPattern: IndexPattern): unknown {
+    const field = getField(indexPattern, this.getRootName());
+    const dsl: Record<string, unknown> = addFieldToDSL({}, field);
+    dsl.percents = [this._percentile];
+    return {
+      percentiles: dsl,
+    };
+  }
+
+  _getAggType(): AGG_TYPE {
+    return AGG_TYPE.PERCENTILE;
+  }
+
+  async getExtendedStatsFieldMetaRequest(): Promise<unknown | null> {
+    return this._esDocField ? await this._esDocField.getExtendedStatsFieldMetaRequest() : null;
+  }
+
+  async getCategoricalFieldMetaRequest(size: number): Promise<unknown | null> {
+    return this._esDocField ? await this._esDocField.getCategoricalFieldMetaRequest(size) : null;
+  }
+
+  async getPercentilesFieldMetaRequest(percentiles: number[]): Promise<unknown | null> {
+    return this._esDocField
+      ? await this._esDocField.getPercentilesFieldMetaRequest(percentiles)
+      : null;
+  }
+
+  isValid(): boolean {
+    return !!this._esDocField;
+  }
+}

x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts

@@ -48,7 +48,9 @@ interface CountData {
   isSyncClustered: boolean;
 }
 
-function getAggType(dynamicProperty: IDynamicStyleProperty<DynamicStylePropertyOptions>): AGG_TYPE {
+function getAggType(
+  dynamicProperty: IDynamicStyleProperty<DynamicStylePropertyOptions>
+): AGG_TYPE.AVG | AGG_TYPE.TERMS {
   return dynamicProperty.isOrdinal() ? AGG_TYPE.AVG : AGG_TYPE.TERMS;
 }
 

x-pack/plugins/maps/public/classes/layers/create_region_map_layer_descriptor.ts

@@ -21,7 +21,6 @@ import {
 import { VectorStyle } from '../styles/vector/vector_style';
 import { EMSFileSource } from '../sources/ems_file_source';
 // @ts-ignore
-import { ESGeoGridSource } from '../sources/es_geo_grid_source';
 import { VectorLayer } from './vector_layer/vector_layer';
 import { getDefaultDynamicProperties } from '../styles/vector/vector_style_defaults';
 import { NUMERICAL_COLOR_PALETTES } from '../styles/color_palettes';
@@ -35,9 +34,13 @@ export function createAggDescriptor(metricAgg: string, metricFieldName?: string)
   });
   const aggType = aggTypeKey ? AGG_TYPE[aggTypeKey as keyof typeof AGG_TYPE] : undefined;
 
-  return aggType && metricFieldName
-    ? { type: aggType, field: metricFieldName }
-    : { type: AGG_TYPE.COUNT };
+  if (!aggType || aggType === AGG_TYPE.COUNT || !metricFieldName) {
+    return { type: AGG_TYPE.COUNT };
+  } else if (aggType === AGG_TYPE.PERCENTILE) {
+    return { type: aggType, field: metricFieldName, percentile: 50 };
+  } else {
+    return { type: aggType, field: metricFieldName };
+  }
 }
 
 export function createRegionMapLayerDescriptor({

x-pack/plugins/maps/public/classes/layers/create_tile_map_layer_descriptor.ts

@@ -14,6 +14,7 @@ import {
 import {
   AGG_TYPE,
   COLOR_MAP_TYPE,
+  DEFAULT_PERCENTILE,
   FIELD_ORIGIN,
   GRID_RESOLUTION,
   RENDER_AS,
@@ -59,9 +60,18 @@ export function createAggDescriptor(
   });
   const aggType = aggTypeKey ? AGG_TYPE[aggTypeKey as keyof typeof AGG_TYPE] : undefined;
 
-  return aggType && metricFieldName && (!isHeatmap(mapType) || isMetricCountable(aggType))
-    ? { type: aggType, field: metricFieldName }
-    : { type: AGG_TYPE.COUNT };
+  if (
+    !aggType ||
+    aggType === AGG_TYPE.COUNT ||
+    !metricFieldName ||
+    (isHeatmap(mapType) && !isMetricCountable(aggType))
+  ) {
+    return { type: AGG_TYPE.COUNT };
+  }
+
+  return aggType === AGG_TYPE.PERCENTILE
+    ? { type: aggType, field: metricFieldName, percentile: DEFAULT_PERCENTILE }
+    : { type: aggType, field: metricFieldName };
 }
 
 export function createTileMapLayerDescriptor({

x-pack/plugins/maps/public/classes/sources/es_agg_source/es_agg_source.ts

@@ -28,7 +28,7 @@ export interface IESAggSource extends IESSource {
   getValueAggsDsl(indexPattern: IndexPattern): { [key: string]: unknown };
 }
 
-export abstract class AbstractESAggSource extends AbstractESSource {
+export abstract class AbstractESAggSource extends AbstractESSource implements IESAggSource {
   private readonly _metricFields: IESAggField[];
   private readonly _canReadFromGeoJson: boolean;
 

x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx

@@ -178,6 +178,7 @@ export class DynamicColorProperty extends DynamicStyleProperty<ColorDynamicOptio
         this._options.color ? this._options.color : null,
         percentilesFieldMeta
       );
+
       if (!colorStops) {
         return null;
       }

x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx

@@ -17,6 +17,7 @@ import {
   LAYER_STYLE_TYPE,
   SOURCE_FORMATTERS_DATA_REQUEST_ID,
   STYLE_TYPE,
+  TOP_TERM_PERCENTAGE_SUFFIX,
   VECTOR_SHAPE_TYPE,
   VECTOR_STYLES,
 } from '../../../../common/constants';

x-pack/plugins/maps/public/components/metrics_editor/metric_editor.tsx

@@ -4,16 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { ChangeEvent, Fragment } from 'react';
+import React, { ChangeEvent, Fragment, MouseEvent } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { EuiButtonEmpty, EuiComboBoxOptionOption, EuiFieldText, EuiFormRow } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiComboBoxOptionOption,
+  EuiFieldText,
+  EuiFormRow,
+  EuiRange,
+} from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { MetricSelect } from './metric_select';
 import { SingleFieldSelect } from '../single_field_select';
 import { AggDescriptor } from '../../../common/descriptor_types';
-import { AGG_TYPE } from '../../../common/constants';
+import { AGG_TYPE, DEFAULT_PERCENTILE } from '../../../common/constants';
 import { getTermsFields } from '../../index_pattern_util';
 import { IFieldType } from '../../../../../../src/plugins/data/public';
 
@@ -70,10 +76,18 @@ export function MetricEditor({
 
     const fieldsForNewAggType = filterFieldsForAgg(fields, metricAggregationType);
     const found = fieldsForNewAggType.find((field) => field.name === metric.field);
-    onChange({
+    const newDescriptor = {
       ...descriptor,
       field: found ? metric.field : undefined,
-    });
+    };
+    if (metricAggregationType === AGG_TYPE.PERCENTILE) {
+      onChange({
+        ...newDescriptor,
+        percentile: 'percentile' in metric ? metric.percentile : DEFAULT_PERCENTILE,
+      });
+    } else {
+      onChange(newDescriptor);
+    }
   };
   const onFieldChange = (fieldName?: string) => {
     if (!fieldName || metric.type === AGG_TYPE.COUNT) {
@@ -85,6 +99,16 @@ export function MetricEditor({
       field: fieldName,
     });
   };
+
+  const onPercentileChange = (e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) => {
+    if (metric.type !== AGG_TYPE.PERCENTILE) {
+      return;
+    }
+    onChange({
+      ...metric,
+      percentile: parseInt((e.target as HTMLInputElement).value, 10),
+    });
+  };
   const onLabelChange = (e: ChangeEvent<HTMLInputElement>) => {
     onChange({
       ...metric,
@@ -115,6 +139,29 @@ export function MetricEditor({
     );
   }
 
+  let percentileSelect;
+  if (metric.type === AGG_TYPE.PERCENTILE) {
+    percentileSelect = (
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.metricsEditor.selectPercentileLabel', {
+          defaultMessage: 'Percentile',
+        })}
+        display="columnCompressed"
+      >
+        <EuiRange
+          min={0}
+          max={100}
+          step={1}
+          value={typeof metric.percentile === 'number' ? metric.percentile : DEFAULT_PERCENTILE}
+          onChange={onPercentileChange}
+          showLabels
+          showValue
+          aria-label="percentile select"
+        />
+      </EuiFormRow>
+    );
+  }
+
   let labelInput;
   if (metric.type) {
     labelInput = (
@@ -172,6 +219,7 @@ export function MetricEditor({
       </EuiFormRow>
 
       {fieldSelect}
+      {percentileSelect}
       {labelInput}
       {removeButton}
     </Fragment>