Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Maps] Label style properties #52957

Merged
merged 25 commits into from
Dec 19, 2019
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 53 additions & 25 deletions docs/maps/vector-style-properties.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,52 @@ Point, polygon, and line features support different styling properties.
[[point-style-properties]]
==== Point style properties

You can add text labels to your Point features by configuring label style properties.

[cols="2*"]
|===
|*Label*
|Specifies label content.
|*Label color*
|The text color.
|*Label size*
|The size of the text font, in pixels.
|===

You can symbolize Point features as *Circle markers* or *Icons*.

Use *Circle marker* to symbolize Points as circles.

*Fill color*:: The fill color of the point features.

*Border color*:: The border color of the point features.

*Border width*:: The border width of the point features.

*Symbol size*:: The radius of the symbol size, in pixels.
[cols="2*"]
|===
|*Border color*
|The border color of the point features.
|*Border width*
|The border width of the point features.
|*Fill color*
|The fill color of the point features.
|*Symbol size*
|The radius of the symbol size, in pixels.
|===

Use *Icon* to symbolize Points as icons.

*Fill color*:: The fill color of the point features.

*Border color*:: The border color of the point features.

*Border width*:: The border width of the point features.
[cols="2*"]
|===
|*Border color*
|The border color of the point features.
|*Border width*
|The border width of the point features.
|*Fill color*
|The fill color of the point features.
|*Symbol orientation*
|The symbol orientation rotating the icon clockwise.
|*Symbol size*
|The radius of the symbol size, in pixels.
|===

*Symbol orientation*:: The symbol orientation rotating the icon clockwise.

*Symbol size*:: The radius of the symbol size, in pixels.
+
Available icons
+

[role="screenshot"]
image::maps/images/maki-icons.png[]

Expand All @@ -42,17 +62,25 @@ image::maps/images/maki-icons.png[]
[[polygon-style-properties]]
==== Polygon style properties

*Fill color*:: The fill color of the polygon features.

*Border color*:: The border color of the polygon features.

*Border width*:: The border width of the polygon features.
[cols="2*"]
|===
|*Border color*
|The border color of the polygon features.
|*Border width*
|The border width of the polygon features.
|*Fill color*
|The fill color of the polygon features.
|===


[float]
[[line-style-properties]]
==== Line style properties

*Border color*:: The color of the line features.

*Border width*:: The width of the line features.
[cols="2*"]
|===
|*Border color*
|The color of the line features.
|*Border width*
|The width of the line features.
|===
4 changes: 4 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/layer.js
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,10 @@ export class AbstractLayer {
return [];
}

async getFields() {
nreese marked this conversation as resolved.
Show resolved Hide resolved
return [];
}

syncVisibilityWithMb(mbMap, mbLayerId) {
mbMap.setLayoutProperty(mbLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,23 @@ export class ESSearchSource extends AbstractESSource {
}
}

async getFields() {
try {
const indexPattern = await this.getIndexPattern();
return indexPattern.fields
.filter(field => {
// Ensure fielddata is enabled for field.
// Search does not request _source
return field.aggregatable;
})
.map(field => {
return this.createField({ fieldName: field.name });
});
} catch (error) {
nreese marked this conversation as resolved.
Show resolved Hide resolved
return [];
}
}

getFieldNames() {
return [this._descriptor.geoField];
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,10 @@ export class AbstractVectorSource extends AbstractSource {
return [];
}

async getFields() {
return [...(await this.getDateFields()), ...(await this.getNumberFields())];
}

async getLeftJoinFields() {
return [];
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { FieldSelect, fieldShape } from '../field_select';
import { ColorRampSelect } from './color_ramp_select';
import { EuiSpacer } from '@elastic/eui';

export function DynamicColorSelection({ ordinalFields, onChange, styleOptions }) {
export function DynamicColorSelection({ fields, onChange, styleOptions }) {
const onFieldChange = ({ field }) => {
onChange({ ...styleOptions, field });
};
Expand All @@ -32,7 +32,7 @@ export function DynamicColorSelection({ ordinalFields, onChange, styleOptions })
/>
<EuiSpacer size="s" />
<FieldSelect
fields={ordinalFields}
fields={fields}
nreese marked this conversation as resolved.
Show resolved Hide resolved
selectedFieldName={_.get(styleOptions, 'field.name')}
onChange={onFieldChange}
compressed
Expand All @@ -42,7 +42,7 @@ export function DynamicColorSelection({ ordinalFields, onChange, styleOptions })
}

DynamicColorSelection.propTypes = {
ordinalFields: PropTypes.arrayOf(fieldShape).isRequired,
fields: PropTypes.arrayOf(fieldShape).isRequired,
styleOptions: dynamicColorShape.isRequired,
onChange: PropTypes.func.isRequired,
};
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { StaticColorSelection } from './static_color_selection';
export function VectorStyleColorEditor(props) {
return (
<StaticDynamicStyleRow
ordinalFields={props.ordinalFields}
fields={props.fields}
styleProperty={props.styleProperty}
handlePropertyChange={props.handlePropertyChange}
swatches={props.swatches}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,18 @@ export function getVectorStyleLabel(styleName) {
return i18n.translate('xpack.maps.styles.vector.orientationLabel', {
defaultMessage: 'Symbol orientation',
});
case VECTOR_STYLES.LABEL_TEXT:
return i18n.translate('xpack.maps.styles.vector.labelLabel', {
defaultMessage: 'Label',
});
case VECTOR_STYLES.LABEL_COLOR:
return i18n.translate('xpack.maps.styles.vector.labelColorLabel', {
defaultMessage: 'Label color',
});
case VECTOR_STYLES.LABEL_SIZE:
return i18n.translate('xpack.maps.styles.vector.labelSizeLabel', {
defaultMessage: 'Label size',
});
default:
return styleName;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
* 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 _ from 'lodash';
import React from 'react';
import { FieldSelect } from '../field_select';

export function DynamicLabelSelector({ fields, styleOptions, onChange }) {
const onFieldChange = ({ field }) => {
onChange({ ...styleOptions, field });
};

return (
<FieldSelect
fields={fields}
selectedFieldName={_.get(styleOptions, 'field.name')}
onChange={onFieldChange}
compressed
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/*
* 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 { i18n } from '@kbn/i18n';
import { EuiFieldText } from '@elastic/eui';

export function StaticLabelSelector({ onChange, styleOptions }) {
const onValueChange = event => {
onChange({ value: event.target.value });
};

return (
<EuiFieldText
placeholder={i18n.translate('xpack.maps.styles.staticLabel.valuePlaceholder', {
defaultMessage: 'symbol label',
})}
value={styleOptions.value}
onChange={onValueChange}
aria-label={i18n.translate('xpack.maps.styles.staticLabel.valueAriaLabel', {
defaultMessage: 'symbol label',
})}
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
* 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 { StaticDynamicStyleRow } from '../static_dynamic_style_row';
import { DynamicLabelSelector } from './dynamic_label_selector';
import { StaticLabelSelector } from './static_label_selector';

export function VectorStyleLabelEditor(props) {
return (
<StaticDynamicStyleRow
{...props}
DynamicSelector={DynamicLabelSelector}
StaticSelector={StaticLabelSelector}
/>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import PropTypes from 'prop-types';
import { dynamicOrientationShape } from '../style_option_shapes';
import { FieldSelect, fieldShape } from '../field_select';

export function DynamicOrientationSelection({ ordinalFields, styleOptions, onChange }) {
export function DynamicOrientationSelection({ fields, styleOptions, onChange }) {
const onFieldChange = ({ field }) => {
onChange({ ...styleOptions, field });
};

return (
<FieldSelect
fields={ordinalFields}
fields={fields}
selectedFieldName={_.get(styleOptions, 'field.name')}
onChange={onFieldChange}
compressed
Expand All @@ -26,7 +26,7 @@ export function DynamicOrientationSelection({ ordinalFields, styleOptions, onCha
}

DynamicOrientationSelection.propTypes = {
ordinalFields: PropTypes.arrayOf(fieldShape).isRequired,
fields: PropTypes.arrayOf(fieldShape).isRequired,
styleOptions: dynamicOrientationShape.isRequired,
onChange: PropTypes.func.isRequired,
};
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { StaticOrientationSelection } from './static_orientation_selection';
export function OrientationEditor(props) {
return (
<StaticDynamicStyleRow
ordinalFields={props.ordinalFields}
fields={props.fields}
styleProperty={props.styleProperty}
handlePropertyChange={props.handlePropertyChange}
DynamicSelector={DynamicOrientationSelection}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { FieldSelect, fieldShape } from '../field_select';
import { SizeRangeSelector } from './size_range_selector';
import { EuiSpacer } from '@elastic/eui';

export function DynamicSizeSelection({ ordinalFields, styleOptions, onChange }) {
export function DynamicSizeSelection({ fields, styleOptions, onChange }) {
const onFieldChange = ({ field }) => {
onChange({ ...styleOptions, field });
};
Expand All @@ -32,7 +32,7 @@ export function DynamicSizeSelection({ ordinalFields, styleOptions, onChange })
/>
<EuiSpacer size="s" />
<FieldSelect
fields={ordinalFields}
fields={fields}
selectedFieldName={_.get(styleOptions, 'field.name')}
onChange={onFieldChange}
compressed
Expand All @@ -42,7 +42,7 @@ export function DynamicSizeSelection({ ordinalFields, styleOptions, onChange })
}

DynamicSizeSelection.propTypes = {
ordinalFields: PropTypes.arrayOf(fieldShape).isRequired,
fields: PropTypes.arrayOf(fieldShape).isRequired,
styleOptions: dynamicSizeShape.isRequired,
onChange: PropTypes.func.isRequired,
};
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { StaticSizeSelection } from './static_size_selection';
export function VectorStyleSizeEditor(props) {
return (
<StaticDynamicStyleRow
ordinalFields={props.ordinalFields}
fields={props.fields}
styleProperty={props.styleProperty}
handlePropertyChange={props.handlePropertyChange}
DynamicSelector={DynamicSizeSelection}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export class StaticDynamicStyleRow extends Component {
prevDynamicStyleOptions = this.props.defaultDynamicStyleOptions;

_canBeDynamic() {
return this.props.ordinalFields.length > 0;
return this.props.fields.length > 0;
}

_isDynamic() {
Expand Down Expand Up @@ -78,7 +78,7 @@ export class StaticDynamicStyleRow extends Component {
return (
<Fragment>
<DynamicSelector
ordinalFields={this.props.ordinalFields}
fields={this.props.fields}
onChange={this._onDynamicStyleChange}
styleOptions={this._getStyleOptions()}
/>
Expand Down
Loading