add color breaks

elastic · Dec 23, 2019 · 44bb317 · 44bb317
1 parent decdb5a
commit 44bb317
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 12 deletions.
diff --git a/.../legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js b/.../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>
+      );
     });
   }
 }
diff --git a/...gacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js b/...gacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js
@@ -7,8 +7,6 @@
 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 {
@@ -17,12 +15,16 @@ export class DynamicLegendRow extends React.Component {
     this._isMounted = false;
     this.state = {
       label: EMPTY_VALUE,
+      isPointsOnly: null,
+      isLinesOnly: null,
     };
   }
 
   async _loadParams() {
     const label = await this.props.style.getField().getLabel();
-    const newState = { label };
+    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);
     }
@@ -73,14 +75,19 @@ export class DynamicLegendRow extends React.Component {
         header={this.props.style.renderRangeLegendHeader()}
         minLabel={minLabel}
         maxLabel={maxLabel}
-        propertyLabel={getVectorStyleLabel(this.props.style.getStyleName())}
+        propertyLabel={this.props.style.getDisplayStyleName()}
         fieldLabel={this.state.label}
       />
     );
   }
 
   _renderBreakedLegend() {
-    return <span>render breaked legend</span>;
+    return this.props.style.renderBreakedLegend({
+      fieldLabel: this.state.label,
+      isLinesOnly: this.state.isLinesOnly,
+      isPointsOnly: this.state.isPointsOnly,
+      symbolId: this.props.symbolId,
+    });
   }
 
   render() {

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
@@ -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) {
@@ -132,4 +138,89 @@ export class DynamicColorProperty extends DynamicStyleProperty {
       return null;
     }
   }
+
+  _renderStopIcon(color, isLinesOnly, isPointsOnly, symbolId) {
+    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'}>
+            <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 gutterSize="xs" justifyContent="spaceBetween">
+          <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>
+        <EuiFlexGroup direction={'column'}>
+          {this._renderColorbreaks({
+            isPointsOnly,
+            isLinesOnly,
+            symbolId,
+          })}
+        </EuiFlexGroup>
+      </div>
+    );
+  }
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js
@@ -144,7 +144,14 @@ export class DynamicStyleProperty extends AbstractStyleProperty {
     }
   }
 
-  renderLegendDetailRow() {
-    return <DynamicLegendRow style={this} />;
+  renderLegendDetailRow({ loadIsPointsOnly, loadIsLinesOnly, symbolId }) {
+    return (
+      <DynamicLegendRow
+        style={this}
+        loadIsPointsOnly={loadIsPointsOnly}
+        loadIsLinesOnly={loadIsLinesOnly}
+        symbolId={symbolId}
+      />
+    );
   }
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { getVectorStyleLabel } from '../components/get_vector_style_label';
 export class AbstractStyleProperty {
   constructor(options, styleName) {
     this._options = options;
@@ -43,4 +44,8 @@ export class AbstractStyleProperty {
   renderLegendDetailRow() {
     return null;
   }
+
+  getDisplayStyleName() {
+    return getVectorStyleLabel(this.getStyleName());
+  }
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
@@ -385,11 +385,15 @@ export class VectorStyle extends AbstractStyle {
     return _.get(this._descriptor, '__styleMeta', {});
   };
 
-  getIcon = () => {
-    const styles = this.getRawProperties();
-    const symbolId = this.arePointsSymbolizedAsCircles()
+  _getSymbolId() {
+    return this.arePointsSymbolizedAsCircles()
       ? undefined
       : this._descriptor.properties.symbol.options.symbolId;
+  }
+
+  getIcon = () => {
+    const styles = this.getRawProperties();
+    const symbolId = this._getSymbolId();
     return (
       <VectorIcon
         loadIsPointsOnly={this._getIsPointsOnly}
@@ -430,7 +434,12 @@ export class VectorStyle extends AbstractStyle {
 
   renderLegendDetails() {
     return (
-      <VectorStyleLegend getLegendDetailStyleProperties={this._getLegendDetailStyleProperties} />
+      <VectorStyleLegend
+        getLegendDetailStyleProperties={this._getLegendDetailStyleProperties}
+        loadIsPointsOnly={this._getIsPointsOnly}
+        loadIsLinesOnly={this._getIsLinesOnly}
+        symbolId={this._getSymbolId()}
+      />
     );
   }