Skip to content

Commit 44bb317

Browse files
thomasneirynckthomasneirynck
committed
add color breaks
1 parent decdb5a commit 44bb317

6 files changed

Lines changed: 139 additions & 12 deletions

File tree

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,15 @@ export class VectorStyleLegend extends Component {
4646

4747
render() {
4848
return this.state.styles.map(style => {
49-
return <Fragment key={style.getStyleName()}>{style.renderLegendDetailRow()}</Fragment>;
49+
return (
50+
<Fragment key={style.getStyleName()}>
51+
{style.renderLegendDetailRow({
52+
loadIsLinesOnly: this.props.loadIsLinesOnly,
53+
loadIsPointsOnly: this.props.loadIsPointsOnly,
54+
symbolId: this.props.symbolId,
55+
})}
56+
</Fragment>
57+
);
5058
});
5159
}
5260
}

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
import React from 'react';
88
import _ from 'lodash';
99
import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row';
10-
import { getVectorStyleLabel } from '../../components/get_vector_style_label';
11-
1210
const EMPTY_VALUE = '';
1311

1412
export class DynamicLegendRow extends React.Component {
@@ -17,12 +15,16 @@ export class DynamicLegendRow extends React.Component {
1715
this._isMounted = false;
1816
this.state = {
1917
label: EMPTY_VALUE,
18+
isPointsOnly: null,
19+
isLinesOnly: null,
2020
};
2121
}
2222

2323
async _loadParams() {
2424
const label = await this.props.style.getField().getLabel();
25-
const newState = { label };
25+
const isLinesOnly = await this.props.loadIsLinesOnly();
26+
const isPointsOnly = await this.props.loadIsPointsOnly();
27+
const newState = { label, isLinesOnly, isPointsOnly };
2628
if (this._isMounted && !_.isEqual(this.state, newState)) {
2729
this.setState(newState);
2830
}
@@ -73,14 +75,19 @@ export class DynamicLegendRow extends React.Component {
7375
header={this.props.style.renderRangeLegendHeader()}
7476
minLabel={minLabel}
7577
maxLabel={maxLabel}
76-
propertyLabel={getVectorStyleLabel(this.props.style.getStyleName())}
78+
propertyLabel={this.props.style.getDisplayStyleName()}
7779
fieldLabel={this.state.label}
7880
/>
7981
);
8082
}
8183

8284
_renderBreakedLegend() {
83-
return <span>render breaked legend</span>;
85+
return this.props.style.renderBreakedLegend({
86+
fieldLabel: this.state.label,
87+
isLinesOnly: this.state.isLinesOnly,
88+
isPointsOnly: this.state.isPointsOnly,
89+
symbolId: this.props.symbolId,
90+
});
8491
}
8592

8693
render() {

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ import { getComputedFieldName } from '../style_util';
1010
import { getColorRampStops } from '../../color_utils';
1111
import { ColorGradient } from '../../components/color_gradient';
1212
import React from 'react';
13+
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
14+
import { LineIcon } from '../components/legend/line_icon';
15+
import { PolygonIcon } from '../components/legend/polygon_icon';
16+
import { CircleIcon } from '../components/legend/circle_icon';
17+
import { SymbolIcon } from '../components/legend/symbol_icon';
18+
import { VECTOR_STYLES } from '../vector_style_defaults';
1319

1420
export class DynamicColorProperty extends DynamicStyleProperty {
1521
syncCircleColorWithMb(mbLayerId, mbMap, alpha) {
@@ -132,4 +138,89 @@ export class DynamicColorProperty extends DynamicStyleProperty {
132138
return null;
133139
}
134140
}
141+
142+
_renderStopIcon(color, isLinesOnly, isPointsOnly, symbolId) {
143+
if (isLinesOnly && this.getStyleName() === VECTOR_STYLES.LINE_COLOR) {
144+
const style = {
145+
stroke: color,
146+
strokeWidth: '4px',
147+
};
148+
return <LineIcon style={style} />;
149+
}
150+
151+
const style = {};
152+
153+
if (this.getStyleName() === VECTOR_STYLES.FILL_COLOR) {
154+
style.fill = color;
155+
style.strokeWidth = '0px';
156+
} else if (this.getStyleName() === VECTOR_STYLES.LINE_COLOR) {
157+
style.fill = 'rgba(255,255,255,0)';
158+
style.stroke = color;
159+
style.strokeWidth = '1px';
160+
}
161+
162+
if (!isPointsOnly) {
163+
return <PolygonIcon style={style} />;
164+
}
165+
166+
if (!symbolId) {
167+
return <CircleIcon style={style} />;
168+
}
169+
170+
const fillColor =
171+
this.getStyleName() === VECTOR_STYLES.FILL_COLOR ? color : 'rgba(255,255,255,0)';
172+
const strokeColor =
173+
this.getStyleName() === VECTOR_STYLES.LINE_COLOR ? color : 'rgba(255,255,255,0)';
174+
return (
175+
<SymbolIcon symbolId={symbolId} fill={fillColor} stroke={strokeColor} strokeWidth={'1px'} />
176+
);
177+
}
178+
179+
_renderColorbreaks({ isLinesOnly, isPointsOnly, symbolId }) {
180+
if (!this._options.customColorRamp) {
181+
return null;
182+
}
183+
184+
return this._options.customColorRamp.map((config, index) => {
185+
const value = this.formatField(config.stop);
186+
return (
187+
<EuiFlexItem key={index}>
188+
<EuiFlexGroup direction={'row'}>
189+
<EuiFlexItem>
190+
<EuiText size={'xs'}>{value}</EuiText>
191+
</EuiFlexItem>
192+
<EuiFlexItem>
193+
{this._renderStopIcon(config.color, isLinesOnly, isPointsOnly, symbolId)}
194+
</EuiFlexItem>
195+
</EuiFlexGroup>
196+
</EuiFlexItem>
197+
);
198+
});
199+
}
200+
201+
renderBreakedLegend({ fieldLabel, isPointsOnly, isLinesOnly, symbolId }) {
202+
return (
203+
<div>
204+
<EuiSpacer size="s" />
205+
<EuiFlexGroup gutterSize="xs" justifyContent="spaceBetween">
206+
<EuiFlexItem grow={false}>
207+
<EuiToolTip position="top" title={this.getDisplayStyleName()} content={fieldLabel}>
208+
<EuiText className="eui-textTruncate" size="xs" style={{ maxWidth: '180px' }}>
209+
<small>
210+
<strong>{fieldLabel}</strong>
211+
</small>
212+
</EuiText>
213+
</EuiToolTip>
214+
</EuiFlexItem>
215+
</EuiFlexGroup>
216+
<EuiFlexGroup direction={'column'}>
217+
{this._renderColorbreaks({
218+
isPointsOnly,
219+
isLinesOnly,
220+
symbolId,
221+
})}
222+
</EuiFlexGroup>
223+
</div>
224+
);
225+
}
135226
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,14 @@ export class DynamicStyleProperty extends AbstractStyleProperty {
144144
}
145145
}
146146

147-
renderLegendDetailRow() {
148-
return <DynamicLegendRow style={this} />;
147+
renderLegendDetailRow({ loadIsPointsOnly, loadIsLinesOnly, symbolId }) {
148+
return (
149+
<DynamicLegendRow
150+
style={this}
151+
loadIsPointsOnly={loadIsPointsOnly}
152+
loadIsLinesOnly={loadIsLinesOnly}
153+
symbolId={symbolId}
154+
/>
155+
);
149156
}
150157
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7+
import { getVectorStyleLabel } from '../components/get_vector_style_label';
78
export class AbstractStyleProperty {
89
constructor(options, styleName) {
910
this._options = options;
@@ -43,4 +44,8 @@ export class AbstractStyleProperty {
4344
renderLegendDetailRow() {
4445
return null;
4546
}
47+
48+
getDisplayStyleName() {
49+
return getVectorStyleLabel(this.getStyleName());
50+
}
4651
}

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -385,11 +385,15 @@ export class VectorStyle extends AbstractStyle {
385385
return _.get(this._descriptor, '__styleMeta', {});
386386
};
387387

388-
getIcon = () => {
389-
const styles = this.getRawProperties();
390-
const symbolId = this.arePointsSymbolizedAsCircles()
388+
_getSymbolId() {
389+
return this.arePointsSymbolizedAsCircles()
391390
? undefined
392391
: this._descriptor.properties.symbol.options.symbolId;
392+
}
393+
394+
getIcon = () => {
395+
const styles = this.getRawProperties();
396+
const symbolId = this._getSymbolId();
393397
return (
394398
<VectorIcon
395399
loadIsPointsOnly={this._getIsPointsOnly}
@@ -430,7 +434,12 @@ export class VectorStyle extends AbstractStyle {
430434

431435
renderLegendDetails() {
432436
return (
433-
<VectorStyleLegend getLegendDetailStyleProperties={this._getLegendDetailStyleProperties} />
437+
<VectorStyleLegend
438+
getLegendDetailStyleProperties={this._getLegendDetailStyleProperties}
439+
loadIsPointsOnly={this._getIsPointsOnly}
440+
loadIsLinesOnly={this._getIsLinesOnly}
441+
symbolId={this._getSymbolId()}
442+
/>
434443
);
435444
}
436445

0 commit comments

Comments
 (0)