Skip to content

Commit

Permalink
[Maps] show custom color ramps in legend (#53780) (#53996)
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasneirynck authored Jan 6, 2020
1 parent 3d088cc commit 647d7cd
Show file tree
Hide file tree
Showing 16 changed files with 541 additions and 89 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 <LineIcon style={style} />;
}

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) {
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export class StaticDynamicStyleRow extends Component {
});

return (
<EuiFlexGroup gutterSize="s">
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem
className={isDynamic ? 'mapStaticDynamicSylingOption__dynamicSizeHack' : undefined}
>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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,
});
}
}
Loading

0 comments on commit 647d7cd

Please sign in to comment.