From 647d7cddb9be18bf91b1f56744d1a59fdce7495e Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 6 Jan 2020 08:45:28 -0500 Subject: [PATCH] [Maps] show custom color ramps in legend (#53780) (#53996) --- .../vector/components/color/color_stops.js | 2 +- .../extract_color_from_style_property.js | 39 +++++++ .../vector/components/legend/vector_icon.js | 49 +------- .../components/legend/vector_icon.test.js | 34 ++++-- .../components/legend/vector_style_legend.js | 10 +- .../components/static_dynamic_style_row.js | 2 +- .../dynamic_color_property.test.js.snap | 105 ++++++++++++++++++ .../components/categorical_legend.js | 56 ++++++++++ ...ynamic_legend_row.js => ordinal_legend.js} | 23 ++-- .../properties/dynamic_color_property.js | 97 +++++++++++++++- .../properties/dynamic_color_property.test.js | 103 +++++++++++++++++ .../properties/dynamic_size_property.js | 4 +- .../properties/dynamic_style_property.js | 58 ++++++++-- .../properties/dynamic_text_property.js | 4 - .../vector/properties/style_property.js | 7 +- .../layers/styles/vector/vector_style.js | 37 +++++- 16 files changed, 541 insertions(+), 89 deletions(-) create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/categorical_legend.js rename x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/{dynamic_legend_row.js => ordinal_legend.js} (87%) create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js index df8464d141b5a..d523cf5870912 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js +++ b/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" >
- + {stopInput} {colorInput} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js new file mode 100644 index 0000000000000..157b863ac4986 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/extract_color_from_style_property.js @@ -0,0 +1,39 @@ +/* + * 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 { VectorStyle } from '../../vector_style'; +import { getColorRampCenterColor } from '../../../color_utils'; + +export function extractColorFromStyleProperty(colorStyleProperty, defaultColor) { + if (!colorStyleProperty) { + return defaultColor; + } + + if (colorStyleProperty.type === VectorStyle.STYLE_TYPE.STATIC) { + return colorStyleProperty.options.color; + } + + // Do not use dynamic color unless configuration is complete + if (!colorStyleProperty.options.field || !colorStyleProperty.options.field.name) { + return defaultColor; + } + + // return middle of gradient for dynamic style property + + if (colorStyleProperty.options.useCustomColorRamp) { + if ( + !colorStyleProperty.options.customColorRamp || + !colorStyleProperty.options.customColorRamp.length + ) { + return defaultColor; + } + // favor the lowest color in even arrays + const middleIndex = Math.floor((colorStyleProperty.options.customColorRamp.length - 1) / 2); + return colorStyleProperty.options.customColorRamp[middleIndex].color; + } + + return getColorRampCenterColor(colorStyleProperty.options.color); +} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js index c9d31b7c22c19..1ce12a5f75bb6 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js @@ -7,13 +7,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { dynamicColorShape, staticColorShape } from '../style_option_shapes'; import { CircleIcon } from './circle_icon'; import { LineIcon } from './line_icon'; import { PolygonIcon } from './polygon_icon'; import { SymbolIcon } from './symbol_icon'; -import { VectorStyle } from '../../vector_style'; -import { getColorRampCenterColor } from '../../../color_utils'; +import { VECTOR_STYLES } from '../../vector_style_defaults'; export class VectorIcon extends Component { state = { @@ -48,16 +46,16 @@ export class VectorIcon extends Component { if (this.state.isLinesOnly) { const style = { - stroke: extractColorFromStyleProperty(this.props.lineColor, 'grey'), + stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, true), strokeWidth: '4px', }; return ; } const style = { - stroke: extractColorFromStyleProperty(this.props.lineColor, 'none'), + stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, false), strokeWidth: '1px', - fill: extractColorFromStyleProperty(this.props.fillColor, 'grey'), + fill: this.props.getColorForProperty(VECTOR_STYLES.FILL_COLOR, false), }; if (!this.state.isPointsOnly) { @@ -79,45 +77,8 @@ export class VectorIcon extends Component { } } -function extractColorFromStyleProperty(colorStyleProperty, defaultColor) { - if (!colorStyleProperty) { - return defaultColor; - } - - if (colorStyleProperty.type === VectorStyle.STYLE_TYPE.STATIC) { - return colorStyleProperty.options.color; - } - - // Do not use dynamic color unless configuration is complete - if (!colorStyleProperty.options.field || !colorStyleProperty.options.field.name) { - return defaultColor; - } - - // return middle of gradient for dynamic style property - - if (colorStyleProperty.options.useCustomColorRamp) { - if ( - !colorStyleProperty.options.customColorRamp || - !colorStyleProperty.options.customColorRamp.length - ) { - return defaultColor; - } - // favor the lowest color in even arrays - const middleIndex = Math.floor((colorStyleProperty.options.customColorRamp.length - 1) / 2); - return colorStyleProperty.options.customColorRamp[middleIndex].color; - } - - return getColorRampCenterColor(colorStyleProperty.options.color); -} - -const colorStylePropertyShape = PropTypes.shape({ - type: PropTypes.string.isRequired, - options: PropTypes.oneOfType([dynamicColorShape, staticColorShape]).isRequired, -}); - VectorIcon.propTypes = { - fillColor: colorStylePropertyShape, - lineColor: colorStylePropertyShape, + getColorForProperty: PropTypes.func.isRequired, symbolId: PropTypes.string, loadIsPointsOnly: PropTypes.func.isRequired, loadIsLinesOnly: PropTypes.func.isRequired, diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js index 0341f1f22ca0a..ee0058a6ef1aa 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js @@ -9,16 +9,12 @@ import { shallow } from 'enzyme'; import { VectorIcon } from './vector_icon'; import { VectorStyle } from '../../vector_style'; +import { extractColorFromStyleProperty } from './extract_color_from_style_property'; +import { VECTOR_STYLES } from '../../vector_style_defaults'; let isPointsOnly = false; let isLinesOnly = false; -const defaultProps = { - loadIsPointsOnly: () => { - return isPointsOnly; - }, - loadIsLinesOnly: () => { - return isLinesOnly; - }, +const styles = { fillColor: { type: VectorStyle.STYLE_TYPE.STATIC, options: { @@ -36,6 +32,30 @@ const defaultProps = { }, }; +const defaultProps = { + getColorForProperty: (styleProperty, isLinesOnly) => { + if (isLinesOnly) { + return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'grey'); + } + + if (styleProperty === VECTOR_STYLES.LINE_COLOR) { + return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'none'); + } else if (styleProperty === VECTOR_STYLES.FILL_COLOR) { + return extractColorFromStyleProperty(styles[VECTOR_STYLES.FILL_COLOR], 'grey'); + } else { + //unexpected + console.error('Cannot return color for properties other then line or fill color'); + } + }, + + loadIsPointsOnly: () => { + return isPointsOnly; + }, + loadIsLinesOnly: () => { + return isLinesOnly; + }, +}; + function configureIsLinesOnly() { isLinesOnly = true; isPointsOnly = false; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js index 9e7afb0aa8873..df302c42d48ed 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js +++ b/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 {style.renderLegendDetailRow()}; + return ( + + {style.renderLegendDetailRow({ + loadIsLinesOnly: this.props.loadIsLinesOnly, + loadIsPointsOnly: this.props.loadIsPointsOnly, + symbolId: this.props.symbolId, + })} + + ); }); } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/static_dynamic_style_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/static_dynamic_style_row.js index 625f63a77374d..311406731801a 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/static_dynamic_style_row.js +++ b/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 ( - + diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap new file mode 100644 index 0000000000000..26e36cb97a791 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/__snapshots__/dynamic_color_property.test.js.snap @@ -0,0 +1,105 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Should render categorical legend 1`] = ` +
+ + + + + + + 0_format + + + + + + + + + + + + 10_format + + + + + + + + + + + + + + + foobar_label + + + + + + +
+`; + +exports[`Should render ranged legend 1`] = ` + + } + maxLabel="100_format" + minLabel="0_format" + propertyLabel="Border color" +/> +`; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/categorical_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/categorical_legend.js new file mode 100644 index 0000000000000..8f8ad4d24e715 --- /dev/null +++ b/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, + }); + } +} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/ordinal_legend.js similarity index 87% rename from x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/ordinal_legend.js index 5933bd1575b2a..564bae3ef3f72 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js +++ b/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; @@ -28,6 +26,13 @@ export class DynamicLegendRow extends React.Component { } } + _formatValue(value) { + if (value === EMPTY_VALUE) { + return value; + } + return this.props.style.formatField(value); + } + componentDidUpdate() { this._loadParams(); } @@ -40,14 +45,6 @@ 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(); @@ -70,10 +67,10 @@ export class DynamicLegendRow extends React.Component { return ( ); 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 index 3961325c3bd59..200df9e5cc33d 100644 --- 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,9 @@ 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 { VectorIcon } from '../components/legend/vector_icon'; +import { VECTOR_STYLES } from '../vector_style_defaults'; export class DynamicColorProperty extends DynamicStyleProperty { syncCircleColorWithMb(mbLayerId, mbMap, alpha) { @@ -64,6 +67,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 +128,95 @@ export class DynamicColorProperty extends DynamicStyleProperty { return getColorRampStops(this._options.color); } - renderLegendHeader() { + renderRangeLegendHeader() { if (this._options.color) { return ; } else { return null; } } + + _renderStopIcon(color, isLinesOnly, isPointsOnly, symbolId) { + if (this.getStyleName() === VECTOR_STYLES.LABEL_COLOR) { + const style = { color: color }; + return ( + + Tx + + ); + } + + const loadIsLinesOnly = () => { + return isLinesOnly; + }; + + const loadIsPointsOnly = () => { + return isPointsOnly; + }; + + const getColorForProperty = (styleProperty, isLinesOnly) => { + if (isLinesOnly) { + return color; + } + + return this.getStyleName() === styleProperty ? color : 'none'; + }; + + return ( + + ); + } + + _renderColorbreaks({ isLinesOnly, isPointsOnly, symbolId }) { + if (!this._options.customColorRamp) { + return null; + } + + return this._options.customColorRamp.map((config, index) => { + const value = this.formatField(config.stop); + return ( + + + + {value} + + + {this._renderStopIcon(config.color, isLinesOnly, isPointsOnly, symbolId)} + + + + ); + }); + } + + renderBreakedLegend({ fieldLabel, isPointsOnly, isLinesOnly, symbolId }) { + return ( +
+ + + {this._renderColorbreaks({ + isPointsOnly, + isLinesOnly, + symbolId, + })} + + + + + + + {fieldLabel} + + + + + +
+ ); + } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js new file mode 100644 index 0000000000000..dbf704c9cbe4c --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js @@ -0,0 +1,103 @@ +/* + * 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. + */ + +// eslint-disable-next-line no-unused-vars +import React from 'react'; +import { shallow } from 'enzyme'; + +import { VECTOR_STYLES } from '../vector_style_defaults'; +import { DynamicColorProperty } from './dynamic_color_property'; + +const mockField = { + async getLabel() { + return 'foobar_label'; + }, + + getName() { + return 'foobar'; + }, + supportsFieldMeta() { + return true; + }, +}; + +test('Should render ranged legend', async () => { + const colorStyle = new DynamicColorProperty( + { + color: 'Blues', + }, + VECTOR_STYLES.LINE_COLOR, + mockField, + () => { + return { min: 0, max: 100 }; + }, + () => { + return x => x + '_format'; + } + ); + + const legendRow = colorStyle.renderLegendDetailRow({ + loadIsPointsOnly: () => { + return true; + }, + loadIsLinesOnly: () => { + return false; + }, + }); + + const component = shallow(legendRow); + + // Ensure all promises resolve + await new Promise(resolve => process.nextTick(resolve)); + // Ensure the state changes are reflected + component.update(); + + expect(component).toMatchSnapshot(); +}); + +test('Should render categorical legend', async () => { + const colorStyle = new DynamicColorProperty( + { + useCustomColorRamp: true, + customColorRamp: [ + { + stop: 0, + color: '#FF0000', + }, + { + stop: 10, + color: '#00FF00', + }, + ], + }, + VECTOR_STYLES.LINE_COLOR, + mockField, + () => { + return { min: 0, max: 100 }; + }, + () => { + return x => x + '_format'; + } + ); + + const legendRow = colorStyle.renderLegendDetailRow({ + loadIsPointsOnly: () => { + return true; + }, + loadIsLinesOnly: () => { + return false; + }, + }); + + const component = shallow(legendRow); + + // Ensure all promises resolve + await new Promise(resolve => process.nextTick(resolve)); + // Ensure the state changes are reflected + component.update(); + + expect(component).toMatchSnapshot(); +}); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js index 05e235f6926a6..f2e5672226814 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js @@ -146,7 +146,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { ); } - renderLegendHeader() { + renderRangeLegendHeader() { let icons; if (this.getStyleName() === VECTOR_STYLES.LINE_WIDTH) { icons = getLineWidthIcons(); @@ -157,7 +157,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { } return ( - + {icons.map((icon, index) => { const isLast = index === icons.length - 1; let spacer; 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 index e6448f365b44a..bac3c96581967 100644 --- 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 @@ -8,9 +8,10 @@ import _ from 'lodash'; import { AbstractStyleProperty } from './style_property'; import { DEFAULT_SIGMA } from '../vector_style_defaults'; import { STYLE_TYPE } from '../../../../../common/constants'; -import { DynamicLegendRow } from './components/dynamic_legend_row'; import { scaleValue } from '../style_util'; import React from 'react'; +import { OrdinalLegend } from './components/ordinal_legend'; +import { CategoricalLegend } from './components/categorical_legend'; export class DynamicStyleProperty extends AbstractStyleProperty { static type = STYLE_TYPE.DYNAMIC; @@ -38,6 +39,14 @@ export class DynamicStyleProperty extends AbstractStyleProperty { return true; } + hasBreaks() { + return false; + } + + isRanged() { + return true; + } + isComplete() { return !!this._field; } @@ -75,6 +84,10 @@ export class DynamicStyleProperty extends AbstractStyleProperty { } pluckStyleMetaFromFeatures(features) { + if (!this.isOrdinal()) { + return null; + } + const name = this.getField().getName(); let min = Infinity; let max = -Infinity; @@ -97,6 +110,10 @@ export class DynamicStyleProperty extends AbstractStyleProperty { } pluckStyleMetaFromFieldMetaData(fieldMetaData) { + if (!this.isOrdinal()) { + return null; + } + const realFieldName = this._field.getESDocFieldName ? this._field.getESDocFieldName() : this._field.getName(); @@ -120,13 +137,13 @@ export class DynamicStyleProperty extends AbstractStyleProperty { } formatField(value) { - if (!this.getField()) { + if (this.getField()) { + const fieldName = this.getField().getName(); + const fieldFormatter = this._getFieldFormatter(fieldName); + return fieldFormatter ? fieldFormatter(value) : value; + } else { return value; } - - const fieldName = this.getField().getName(); - const fieldFormatter = this._getFieldFormatter(fieldName); - return fieldFormatter ? fieldFormatter(value) : value; } getMbValue(value) { @@ -144,7 +161,32 @@ export class DynamicStyleProperty extends AbstractStyleProperty { return valueAsFloat; } - renderLegendDetailRow() { - return ; + renderBreakedLegend() { + return null; + } + + _renderCategoricalLegend({ loadIsPointsOnly, loadIsLinesOnly, symbolId }) { + return ( + + ); + } + + _renderRangeLegend() { + return ; + } + + renderLegendDetailRow({ loadIsPointsOnly, loadIsLinesOnly, symbolId }) { + if (this.isRanged()) { + return this._renderRangeLegend(); + } else if (this.hasBreaks()) { + return this._renderCategoricalLegend({ loadIsPointsOnly, loadIsLinesOnly, symbolId }); + } else { + return null; + } } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js index b716030d2f263..fbc4c3af78f98 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js @@ -32,8 +32,4 @@ export class DynamicTextProperty extends DynamicStyleProperty { isScaled() { return false; } - - renderHeader() { - return null; - } } 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 index 8da76a775229e..52e1a46a18e94 100644 --- 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; @@ -36,11 +37,15 @@ export class AbstractStyleProperty { return this._options || {}; } - renderLegendHeader() { + renderRangeLegendHeader() { return null; } 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 index ae434f5002800..ea80b188e1646 100644 --- 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 @@ -38,6 +38,7 @@ import { StaticOrientationProperty } from './properties/static_orientation_prope import { DynamicOrientationProperty } from './properties/dynamic_orientation_property'; import { StaticTextProperty } from './properties/static_text_property'; import { DynamicTextProperty } from './properties/dynamic_text_property'; +import { extractColorFromStyleProperty } from './components/legend/extract_color_from_style_property'; const POINTS = [GEO_JSON_TYPE.POINT, GEO_JSON_TYPE.MULTI_POINT]; const LINES = [GEO_JSON_TYPE.LINE_STRING, GEO_JSON_TYPE.MULTI_LINE_STRING]; @@ -386,18 +387,37 @@ 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; + } + + _getColorForProperty = (styleProperty, isLinesOnly) => { + const styles = this.getRawProperties(); + if (isLinesOnly) { + return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'grey'); + } + + if (styleProperty === VECTOR_STYLES.LINE_COLOR) { + return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'none'); + } else if (styleProperty === VECTOR_STYLES.FILL_COLOR) { + return extractColorFromStyleProperty(styles[VECTOR_STYLES.FILL_COLOR], 'grey'); + } else { + //unexpected + console.error('Cannot return color for properties other then line or fill color'); + } + }; + + getIcon = () => { + const symbolId = this._getSymbolId(); + return ( ); }; @@ -431,7 +451,12 @@ export class VectorStyle extends AbstractStyle { renderLegendDetails() { return ( - + ); }