diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js similarity index 92% rename from x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js rename to x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js index 38ffed308a0d1..3eb34ec1406d2 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js @@ -9,7 +9,7 @@ import PropTypes from 'prop-types'; import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer, EuiToolTip } from '@elastic/eui'; -export function StyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) { +export function RangedStyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) { return (
@@ -39,7 +39,7 @@ export function StyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fiel ); } -StyleLegendRow.propTypes = { +RangedStyleLegendRow.propTypes = { header: PropTypes.node.isRequired, minLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, maxLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js index ce514734b6606..1d8dfe9c7bdbf 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js @@ -8,7 +8,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { ColorGradient } from '../../../components/color_gradient'; -import { StyleLegendRow } from '../../../components/style_legend_row'; +import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row'; import { DEFAULT_RGB_HEATMAP_COLOR_RAMP, DEFAULT_HEATMAP_COLOR_RAMP_NAME, @@ -50,7 +50,7 @@ export class HeatmapLegend extends React.Component { ); return ( - { - if (!this.props.fieldFormatter || value === EMPTY_VALUE) { - return value; - } - - return this.props.fieldFormatter(value); - }; - - render() { - const { meta: range, style } = this.props; - - const min = this._formatValue(_.get(range, 'min', EMPTY_VALUE)); - const minLabel = - this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange - ? `< ${min}` - : min; - - const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE)); - const maxLabel = - this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange - ? `> ${max}` - : max; - - return ( - - ); - } -} - -StylePropertyLegendRow.propTypes = { - label: PropTypes.string, - fieldFormatter: PropTypes.func, - meta: PropTypes.object, - style: PropTypes.object, -}; 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 7ea9b2b04bcfe..9e7afb0aa8873 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 @@ -5,19 +5,16 @@ */ import _ from 'lodash'; -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -import { StylePropertyLegendRow } from './style_property_legend_row'; +import React, { Component, Fragment } from 'react'; export class VectorStyleLegend extends Component { state = { - rows: [], + styles: [], }; componentDidMount() { this._isMounted = true; - this._prevRowDescriptors = undefined; + this._prevStyleDescriptors = undefined; this._loadRows(); } @@ -30,27 +27,26 @@ export class VectorStyleLegend extends Component { } _loadRows = _.debounce(async () => { - const rows = await this.props.loadRows(); - const rowDescriptors = rows.map(row => { + const styles = await this.props.getLegendDetailStyleProperties(); + const styleDescriptorPromises = styles.map(async style => { return { - label: row.label, - range: row.meta, - styleOptions: row.style.getOptions(), + type: style.getStyleName(), + options: style.getOptions(), + fieldMeta: style.getFieldMeta(), + label: await style.getField().getLabel(), }; }); - if (this._isMounted && !_.isEqual(rowDescriptors, this._prevRowDescriptors)) { - this._prevRowDescriptors = rowDescriptors; - this.setState({ rows }); + + const styleDescriptors = await Promise.all(styleDescriptorPromises); + if (this._isMounted && !_.isEqual(styleDescriptors, this._prevStyleDescriptors)) { + this._prevStyleDescriptors = styleDescriptors; + this.setState({ styles: styles }); } }, 100); render() { - return this.state.rows.map(rowProps => { - return ; + return this.state.styles.map(style => { + return {style.renderLegendDetailRow()}; }); } } - -VectorStyleLegend.propTypes = { - loadRows: PropTypes.func.isRequired, -}; 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/dynamic_legend_row.js new file mode 100644 index 0000000000000..5933bd1575b2a --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js @@ -0,0 +1,81 @@ +/* + * 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'; +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 { + constructor() { + super(); + this._isMounted = false; + this.state = { + label: EMPTY_VALUE, + }; + } + + async _loadParams() { + const label = await this.props.style.getField().getLabel(); + const newState = { label }; + if (this._isMounted && !_.isEqual(this.state, newState)) { + this.setState(newState); + } + } + + componentDidUpdate() { + this._loadParams(); + } + + componentWillUnmount() { + this._isMounted = false; + } + + componentDidMount() { + 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)); + minLabel = + this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange + ? `< ${min}` + : min; + + const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE)); + maxLabel = + this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange + ? `> ${max}` + : max; + } + + 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 fdbb19a60d2e6..167a4be0476c9 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 @@ -111,7 +111,7 @@ export class DynamicColorProperty extends DynamicStyleProperty { return getColorRampStops(this._options.color); } - renderHeader() { + renderLegendHeader() { if (this._options.color) { return ; } else { 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 78409ef0d488f..df8d11fb455a8 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 @@ -121,7 +121,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { ); } - renderHeader() { + renderLegendHeader() { let icons; if (this.getStyleName() === VECTOR_STYLES.LINE_WIDTH) { icons = getLineWidthIcons(); 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 3b25746717088..4b7cac51d4fa7 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,13 +8,21 @@ 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 React from 'react'; export class DynamicStyleProperty extends AbstractStyleProperty { static type = STYLE_TYPE.DYNAMIC; - constructor(options, styleName, field) { + constructor(options, styleName, field, getFieldMeta, getFieldFormatter) { super(options, styleName); this._field = field; + this._getFieldMeta = getFieldMeta; + this._getFieldFormatter = getFieldFormatter; + } + + getFieldMeta() { + return this._getFieldMeta && this._field ? this._getFieldMeta(this._field.getName()) : null; } getField() { @@ -105,4 +113,18 @@ export class DynamicStyleProperty extends AbstractStyleProperty { isMaxOutsideStdRange: stats.max > stdUpperBounds, }; } + + formatField(value) { + if (this.getField()) { + const fieldName = this.getField().getName(); + const fieldFormatter = this._getFieldFormatter(fieldName); + return fieldFormatter ? fieldFormatter(value) : value; + } else { + return value; + } + } + + renderLegendDetailRow() { + return ; + } } 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 b0b4bcefd7d2f..8da76a775229e 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 @@ -24,6 +24,10 @@ export class AbstractStyleProperty { return true; } + formatField(value) { + return value; + } + getStyleName() { return this._styleName; } @@ -32,7 +36,11 @@ export class AbstractStyleProperty { return this._options || {}; } - renderHeader() { + renderLegendHeader() { + return null; + } + + renderLegendDetailRow() { return null; } } 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 161c0ea69e86c..1a547e04da8ab 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 @@ -333,11 +333,10 @@ export class VectorStyle extends AbstractStyle { const data = styleMetaDataRequest.getData(); const fieldMeta = dynamicProp.pluckStyleMetaFromFieldMetaData(data); - return fieldMeta ? fieldMeta : fieldMetaFromLocalFeatures; }; - _getFieldFormatter(fieldName) { + _getFieldFormatter = fieldName => { const dynamicProp = this._getDynamicPropertyByFieldName(fieldName); if (!dynamicProp) { return null; @@ -366,7 +365,7 @@ export class VectorStyle extends AbstractStyle { const formatters = formattersDataRequest.getData(); return formatters[fieldName]; - } + }; _getStyleMeta = () => { return _.get(this._descriptor, '__styleMeta', {}); @@ -388,7 +387,7 @@ export class VectorStyle extends AbstractStyle { ); }; - async _getLegendDetailStyleProperties() { + _getLegendDetailStyleProperties = async () => { const isLinesOnly = await this._getIsLinesOnly(); const isPolygonsOnly = await this._getIsPolygonsOnly(); @@ -403,7 +402,7 @@ export class VectorStyle extends AbstractStyle { return true; }); - } + }; async hasLegendDetails() { const styles = await this._getLegendDetailStyleProperties(); @@ -411,20 +410,9 @@ export class VectorStyle extends AbstractStyle { } renderLegendDetails() { - const loadRows = async () => { - const styles = await this._getLegendDetailStyleProperties(); - const promises = styles.map(async style => { - return { - label: await style.getField().getLabel(), - fieldFormatter: this._getFieldFormatter(style.getField().getName()), - meta: this._getFieldMeta(style.getField().getName()), - style, - }; - }); - return await Promise.all(promises); - }; - - return ; + return ( + + ); } _getFeatureStyleParams() { @@ -589,7 +577,13 @@ export class VectorStyle extends AbstractStyle { return new StaticSizeProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicSizeProperty(descriptor.options, styleName, field); + return new DynamicSizeProperty( + descriptor.options, + styleName, + field, + this._getFieldMeta, + this._getFieldFormatter + ); } else { throw new Error(`${descriptor} not implemented`); } @@ -602,7 +596,13 @@ export class VectorStyle extends AbstractStyle { return new StaticColorProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicColorProperty(descriptor.options, styleName, field); + return new DynamicColorProperty( + descriptor.options, + styleName, + field, + this._getFieldMeta, + this._getFieldFormatter + ); } else { throw new Error(`${descriptor} not implemented`); }