[Maps] show custom color ramps in legend

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

@@ -113,7 +113,7 @@ export const ColorStops = ({ colorStops = [{ stop: 0, color: DEFAULT_COLOR }], o
         display="rowCompressed"
       >
         <div>
-          <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+          <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
             <EuiFlexItem>{stopInput}</EuiFlexItem>
             <EuiFlexItem>{colorInput}</EuiFlexItem>
           </EuiFlexGroup>

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

@@ -46,7 +46,15 @@ export class VectorStyleLegend extends Component {
 
   render() {
     return this.state.styles.map(style => {
-      return <Fragment key={style.getStyleName()}>{style.renderLegendDetailRow()}</Fragment>;
+      return (
+        <Fragment key={style.getStyleName()}>
+          {style.renderLegendDetailRow({
+            loadIsLinesOnly: this.props.loadIsLinesOnly,
+            loadIsPointsOnly: this.props.loadIsPointsOnly,
+            symbolId: this.props.symbolId,
+          })}
+        </Fragment>
+      );
     });
   }
 }

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

@@ -111,7 +111,7 @@ export class StaticDynamicStyleRow extends Component {
         });
 
     return (
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem
           className={isDynamic ? 'mapStaticDynamicSylingOption__dynamicSizeHack' : undefined}
         >

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

@@ -0,0 +1,56 @@
+/*
+ * 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 React from 'react';
+import _ from 'lodash';
+const EMPTY_VALUE = '';
+
+export class CategoricalLegend extends React.Component {
+  constructor() {
+    super();
+    this._isMounted = false;
+    this.state = {
+      label: EMPTY_VALUE,
+      isPointsOnly: null,
+      isLinesOnly: null,
+    };
+  }
+
+  async _loadParams() {
+    const label = await this.props.style.getField().getLabel();
+    const isLinesOnly = await this.props.loadIsLinesOnly();
+    const isPointsOnly = await this.props.loadIsPointsOnly();
+    const newState = { label, isLinesOnly, isPointsOnly };
+    if (this._isMounted && !_.isEqual(this.state, newState)) {
+      this.setState(newState);
+    }
+  }
+
+  componentDidUpdate() {
+    this._loadParams();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadParams();
+  }
+
+  render() {
+    if (this.state.label === EMPTY_VALUE) {
+      return null;
+    }
+    return this.props.style.renderBreakedLegend({
+      fieldLabel: this.state.label,
+      isLinesOnly: this.state.isLinesOnly,
+      isPointsOnly: this.state.isPointsOnly,
+      symbolId: this.props.symbolId,
+    });
+  }
+}

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js → x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/ordinal_legend.js

@@ -7,11 +7,9 @@
 import React from 'react';
 import _ from 'lodash';
 import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row';
-import { getVectorStyleLabel } from '../../components/get_vector_style_label';
-
 const EMPTY_VALUE = '';
 
-export class DynamicLegendRow extends React.Component {
+export class OrdinalLegend extends React.Component {
   constructor() {
     super();
     this._isMounted = false;
@@ -40,28 +38,20 @@ export class DynamicLegendRow extends React.Component {
     this._isMounted = true;
     this._loadParams();
   }
-
-  _formatValue(value) {
-    if (value === EMPTY_VALUE) {
-      return value;
-    }
-    return this.props.style.formatField(value);
-  }
-
   render() {
     const fieldMeta = this.props.style.getFieldMeta();
 
     let minLabel = EMPTY_VALUE;
     let maxLabel = EMPTY_VALUE;
     if (fieldMeta) {
       const range = { min: fieldMeta.min, max: fieldMeta.max };
-      const min = this._formatValue(_.get(range, 'min', EMPTY_VALUE));
+      const min = this.props.style.formatField(_.get(range, 'min', EMPTY_VALUE));
       minLabel =
         this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange
           ? `< ${min}`
           : min;
 
-      const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE));
+      const max = this.props.style.formatField(_.get(range, 'max', EMPTY_VALUE));
       maxLabel =
         this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange
           ? `> ${max}`
@@ -70,10 +60,10 @@ export class DynamicLegendRow extends React.Component {
 
     return (
       <RangedStyleLegendRow
-        header={this.props.style.renderLegendHeader()}
+        header={this.props.style.renderRangeLegendHeader()}
         minLabel={minLabel}
         maxLabel={maxLabel}
-        propertyLabel={getVectorStyleLabel(this.props.style.getStyleName())}
+        propertyLabel={this.props.style.getDisplayStyleName()}
         fieldLabel={this.state.label}
       />
     );

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

@@ -10,6 +10,12 @@ import { getComputedFieldName } from '../style_util';
 import { getColorRampStops } from '../../color_utils';
 import { ColorGradient } from '../../components/color_gradient';
 import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
+import { LineIcon } from '../components/legend/line_icon';
+import { PolygonIcon } from '../components/legend/polygon_icon';
+import { CircleIcon } from '../components/legend/circle_icon';
+import { SymbolIcon } from '../components/legend/symbol_icon';
+import { VECTOR_STYLES } from '../vector_style_defaults';
 
 export class DynamicColorProperty extends DynamicStyleProperty {
   syncCircleColorWithMb(mbLayerId, mbMap, alpha) {
@@ -64,6 +70,14 @@ export class DynamicColorProperty extends DynamicStyleProperty {
     return !this.isCustomColorRamp();
   }
 
+  isRanged() {
+    return !this.isCustomColorRamp();
+  }
+
+  hasBreaks() {
+    return this.isCustomColorRamp();
+  }
+
   _getMbColor() {
     const isDynamicConfigComplete =
       _.has(this._options, 'field.name') && _.has(this._options, 'color');
@@ -117,11 +131,105 @@ export class DynamicColorProperty extends DynamicStyleProperty {
     return getColorRampStops(this._options.color);
   }
 
-  renderLegendHeader() {
+  renderRangeLegendHeader() {
     if (this._options.color) {
       return <ColorGradient colorRampName={this._options.color} />;
     } else {
       return null;
     }
   }
+
+  _renderStopIcon(color, isLinesOnly, isPointsOnly, symbolId) {
+    if (this.getStyleName() === VECTOR_STYLES.LABEL_COLOR) {
+      const style = { color: color };
+      return (
+        <EuiText size={'xs'} style={style}>
+          Tx
+        </EuiText>
+      );
+    }
+
+    if (isLinesOnly && this.getStyleName() === VECTOR_STYLES.LINE_COLOR) {
+      const style = {
+        stroke: color,
+        strokeWidth: '4px',
+      };
+      return <LineIcon style={style} />;
+    }
+
+    const style = {};
+
+    if (this.getStyleName() === VECTOR_STYLES.FILL_COLOR) {
+      style.fill = color;
+      style.strokeWidth = '0px';
+    } else if (this.getStyleName() === VECTOR_STYLES.LINE_COLOR) {
+      style.fill = 'rgba(255,255,255,0)';
+      style.stroke = color;
+      style.strokeWidth = '1px';
+    }
+
+    if (!isPointsOnly) {
+      return <PolygonIcon style={style} />;
+    }
+
+    if (!symbolId) {
+      return <CircleIcon style={style} />;
+    }
+
+    const fillColor =
+      this.getStyleName() === VECTOR_STYLES.FILL_COLOR ? color : 'rgba(255,255,255,0)';
+    const strokeColor =
+      this.getStyleName() === VECTOR_STYLES.LINE_COLOR ? color : 'rgba(255,255,255,0)';
+    return (
+      <SymbolIcon symbolId={symbolId} fill={fillColor} stroke={strokeColor} strokeWidth={'1px'} />
+    );
+  }
+
+  _renderColorbreaks({ isLinesOnly, isPointsOnly, symbolId }) {
+    if (!this._options.customColorRamp) {
+      return null;
+    }
+
+    return this._options.customColorRamp.map((config, index) => {
+      const value = this.formatField(config.stop);
+      return (
+        <EuiFlexItem key={index}>
+          <EuiFlexGroup direction={'row'} gutterSize={'none'}>
+            <EuiFlexItem>
+              <EuiText size={'xs'}>{value}</EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              {this._renderStopIcon(config.color, isLinesOnly, isPointsOnly, symbolId)}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      );
+    });
+  }
+
+  renderBreakedLegend({ fieldLabel, isPointsOnly, isLinesOnly, symbolId }) {
+    return (
+      <div>
+        <EuiSpacer size="s" />
+        <EuiFlexGroup direction={'column'} gutterSize={'none'}>
+          {this._renderColorbreaks({
+            isPointsOnly,
+            isLinesOnly,
+            symbolId,
+          })}
+        </EuiFlexGroup>
+        <EuiFlexGroup gutterSize="xs" justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>
+            <EuiToolTip position="top" title={this.getDisplayStyleName()} content={fieldLabel}>
+              <EuiText className="eui-textTruncate" size="xs" style={{ maxWidth: '180px' }}>
+                <small>
+                  <strong>{fieldLabel}</strong>
+                </small>
+              </EuiText>
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    );
+  }
 }