Skip to content

Commit

Permalink
[Maps] show field type icons in data driven styling field select (#55166
Browse files Browse the repository at this point in the history 
) (#55491)

* [Maps] show field icons in data driven styling field select

* only show origin group label when there is more then one origin

* review feedback

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
@nreese @elasticmachine
nreese and elasticmachine committed Jan 22, 2020
1 parent 8412868 commit 83078a7
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 185 deletions.
60 changes: 27 additions & 33 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ import { ColorStopsCategorical } from './color_stops_categorical';
const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';

export class ColorMapSelect extends Component {
state = {
selected: '',
};
state = {};

static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.customColorMap === prevState.prevPropsCustomColorMap) {
Expand All @@ -41,10 +39,7 @@ export class ColorMapSelect extends Component {
_onCustomColorMapChange = ({ colorStops, isInvalid }) => {
// Manage invalid custom color map in local state
if (isInvalid) {
const newState = {
customColorMap: colorStops,
};
this.setState(newState);
this.setState({ customColorMap: colorStops });
return;
}

Expand All @@ -56,35 +51,34 @@ export class ColorMapSelect extends Component {
};

_renderColorStopsInput() {
let colorStopsInput;
if (this.props.useCustomColorMap) {
if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
colorStopsInput = (
<Fragment>
<EuiSpacer size="s" />
<ColorStopsOrdinal
colorStops={this.state.customColorMap}
onChange={this._onCustomColorMapChange}
/>
</Fragment>
);
} else if (this.props.colorMapType === COLOR_MAP_TYPE.CATEGORICAL) {
colorStopsInput = (
<Fragment>
<EuiSpacer size="s" />
<ColorStopsCategorical
colorStops={this.state.customColorMap}
onChange={this._onCustomColorMapChange}
/>
</Fragment>
);
}
if (!this.props.useCustomColorMap) {
return null;
}
return colorStopsInput;

if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
return (
<Fragment>
<EuiSpacer size="s" />
<ColorStopsOrdinal
colorStops={this.state.customColorMap}
onChange={this._onCustomColorMapChange}
/>
</Fragment>
);
}

return (
<Fragment>
<EuiSpacer size="s" />
<ColorStopsCategorical
colorStops={this.state.customColorMap}
onChange={this._onCustomColorMapChange}
/>
</Fragment>
);
}

render() {
const colorStopsInput = this._renderColorStopsInput();
const colorMapOptionsWithCustom = [
{
value: CUSTOM_COLOR_MAP,
Expand All @@ -110,7 +104,7 @@ export class ColorMapSelect extends Component {
valueOfSelected={valueOfSelected}
hasDividers={true}
/>
{colorStopsInput}
{this._renderColorStopsInput()}
</Fragment>
);
}
Expand Down
188 changes: 72 additions & 116 deletions ...ck/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,140 +13,96 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
import { i18n } from '@kbn/i18n';

export class DynamicColorForm extends React.Component {
state = {
colorMapType: COLOR_MAP_TYPE.ORDINAL,
};

constructor() {
super();
this._isMounted = false;
}

componentWillUnmount() {
this._isMounted = false;
}
export function DynamicColorForm({
fields,
onDynamicStyleChange,
staticDynamicSelect,
styleProperty,
}) {
const styleOptions = styleProperty.getOptions();

componentDidMount() {
this._isMounted = true;
this._loadColorMapType();
}

componentDidUpdate() {
this._loadColorMapType();
}

async _loadColorMapType() {
const field = this.props.styleProperty.getField();
if (!field) {
return;
}
const dataType = await field.getDataType();
const colorMapType = CATEGORICAL_DATA_TYPES.includes(dataType)
? COLOR_MAP_TYPE.CATEGORICAL
: COLOR_MAP_TYPE.ORDINAL;
if (this._isMounted && this.state.colorMapType !== colorMapType) {
this.setState({ colorMapType }, () => {
const options = this.props.styleProperty.getOptions();
this.props.onDynamicStyleChange(this.props.styleProperty.getStyleName(), {
...options,
type: colorMapType,
});
});
const onColorMapSelect = ({ color, customColorMap, type, useCustomColorMap }) => {
const newColorOptions = {
...styleOptions,
type,
};
if (type === COLOR_MAP_TYPE.ORDINAL) {
newColorOptions.useCustomColorRamp = useCustomColorMap;
newColorOptions.customColorRamp = customColorMap;
newColorOptions.color = color;
} else {
newColorOptions.useCustomColorPalette = useCustomColorMap;
newColorOptions.customColorPalette = customColorMap;
newColorOptions.colorCategory = color;
}
}

_getColorSelector() {
const { onDynamicStyleChange, styleProperty } = this.props;
const styleOptions = styleProperty.getOptions();
onDynamicStyleChange(styleProperty.getStyleName(), newColorOptions);
};

const onFieldChange = async ({ field }) => {
const { name, origin, type } = field;
onDynamicStyleChange(styleProperty.getStyleName(), {
...styleOptions,
field: { name, origin },
type: CATEGORICAL_DATA_TYPES.includes(type)
? COLOR_MAP_TYPE.CATEGORICAL
: COLOR_MAP_TYPE.ORDINAL,
});
};

const renderColorMapSelect = () => {
if (!styleOptions.field || !styleOptions.field.name) {
return;
return null;
}

let colorSelect;
const onColorChange = colorOptions => {
const newColorOptions = {
type: colorOptions.type,
};
if (colorOptions.type === COLOR_MAP_TYPE.ORDINAL) {
newColorOptions.useCustomColorRamp = colorOptions.useCustomColorMap;
newColorOptions.customColorRamp = colorOptions.customColorMap;
newColorOptions.color = colorOptions.color;
} else {
newColorOptions.useCustomColorPalette = colorOptions.useCustomColorMap;
newColorOptions.customColorPalette = colorOptions.customColorMap;
newColorOptions.colorCategory = colorOptions.color;
}

onDynamicStyleChange(styleProperty.getStyleName(), {
...styleOptions,
...newColorOptions,
});
};

if (this.state.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
const customOptionLabel = i18n.translate('xpack.maps.style.customColorRampLabel', {
defaultMessage: 'Custom color ramp',
});
colorSelect = (
if (styleOptions.type === COLOR_MAP_TYPE.ORDINAL) {
return (
<ColorMapSelect
colorMapOptions={COLOR_GRADIENTS}
customOptionLabel={customOptionLabel}
onChange={options => onColorChange(options)}
customOptionLabel={i18n.translate('xpack.maps.style.customColorRampLabel', {
defaultMessage: 'Custom color ramp',
})}
onChange={onColorMapSelect}
colorMapType={COLOR_MAP_TYPE.ORDINAL}
color={styleOptions.color}
customColorMap={styleOptions.customColorRamp}
useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
compressed
/>
);
} else if (this.state.colorMapType === COLOR_MAP_TYPE.CATEGORICAL) {
const customOptionLabel = i18n.translate('xpack.maps.style.customColorPaletteLabel', {
defaultMessage: 'Custom color palette',
});
colorSelect = (
<ColorMapSelect
colorMapOptions={COLOR_PALETTES}
customOptionLabel={customOptionLabel}
onChange={options => onColorChange(options)}
colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
color={styleOptions.colorCategory}
customColorMap={styleOptions.customColorPalette}
useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
compressed
/>
);
}
return colorSelect;
}

render() {
const { fields, onDynamicStyleChange, staticDynamicSelect, styleProperty } = this.props;
const styleOptions = styleProperty.getOptions();
const onFieldChange = options => {
const field = options.field;
onDynamicStyleChange(styleProperty.getStyleName(), { ...styleOptions, field });
};

const colorSelect = this._getColorSelector();

return (
<Fragment>
<EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
<EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
<EuiFlexItem>
<FieldSelect
fields={fields}
selectedFieldName={_.get(styleOptions, 'field.name')}
onChange={onFieldChange}
compressed
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
{colorSelect}
</Fragment>
<ColorMapSelect
colorMapOptions={COLOR_PALETTES}
customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
defaultMessage: 'Custom color palette',
})}
onChange={onColorMapSelect}
colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
color={styleOptions.colorCategory}
customColorMap={styleOptions.customColorPalette}
useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
compressed
/>
);
}
};

return (
<Fragment>
<EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
<EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
<EuiFlexItem>
<FieldSelect
fields={fields}
selectedFieldName={_.get(styleOptions, 'field.name')}
onChange={onFieldChange}
compressed
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
{renderColorMapSelect()}
</Fragment>
);
}
Loading

0 comments on commit 83078a7

Please sign in to comment.