Skip to content

Commit cf674d8

Browse files
nreeseelasticmachine
nreese
and
elasticmachine
committed
[Maps] show field type icons in data driven styling field select (#55166)
* [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>
1 parent fca83a6 commit cf674d8

4 files changed

Lines changed: 163 additions & 185 deletions

File tree

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ import { ColorStopsCategorical } from './color_stops_categorical';
1414
const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';
1515

1616
export class ColorMapSelect extends Component {
17-
state = {
18-
selected: '',
19-
};
17+
state = {};
2018

2119
static getDerivedStateFromProps(nextProps, prevState) {
2220
if (nextProps.customColorMap === prevState.prevPropsCustomColorMap) {
@@ -41,10 +39,7 @@ export class ColorMapSelect extends Component {
4139
_onCustomColorMapChange = ({ colorStops, isInvalid }) => {
4240
// Manage invalid custom color map in local state
4341
if (isInvalid) {
44-
const newState = {
45-
customColorMap: colorStops,
46-
};
47-
this.setState(newState);
42+
this.setState({ customColorMap: colorStops });
4843
return;
4944
}
5045

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

5853
_renderColorStopsInput() {
59-
let colorStopsInput;
60-
if (this.props.useCustomColorMap) {
61-
if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
62-
colorStopsInput = (
63-
<Fragment>
64-
<EuiSpacer size="s" />
65-
<ColorStopsOrdinal
66-
colorStops={this.state.customColorMap}
67-
onChange={this._onCustomColorMapChange}
68-
/>
69-
</Fragment>
70-
);
71-
} else if (this.props.colorMapType === COLOR_MAP_TYPE.CATEGORICAL) {
72-
colorStopsInput = (
73-
<Fragment>
74-
<EuiSpacer size="s" />
75-
<ColorStopsCategorical
76-
colorStops={this.state.customColorMap}
77-
onChange={this._onCustomColorMapChange}
78-
/>
79-
</Fragment>
80-
);
81-
}
54+
if (!this.props.useCustomColorMap) {
55+
return null;
8256
}
83-
return colorStopsInput;
57+
58+
if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
59+
return (
60+
<Fragment>
61+
<EuiSpacer size="s" />
62+
<ColorStopsOrdinal
63+
colorStops={this.state.customColorMap}
64+
onChange={this._onCustomColorMapChange}
65+
/>
66+
</Fragment>
67+
);
68+
}
69+
70+
return (
71+
<Fragment>
72+
<EuiSpacer size="s" />
73+
<ColorStopsCategorical
74+
colorStops={this.state.customColorMap}
75+
onChange={this._onCustomColorMapChange}
76+
/>
77+
</Fragment>
78+
);
8479
}
8580

8681
render() {
87-
const colorStopsInput = this._renderColorStopsInput();
8882
const colorMapOptionsWithCustom = [
8983
{
9084
value: CUSTOM_COLOR_MAP,
@@ -110,7 +104,7 @@ export class ColorMapSelect extends Component {
110104
valueOfSelected={valueOfSelected}
111105
hasDividers={true}
112106
/>
113-
{colorStopsInput}
107+
{this._renderColorStopsInput()}
114108
</Fragment>
115109
);
116110
}

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js‎

Lines changed: 72 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -13,140 +13,96 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
1313
import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
1414
import { i18n } from '@kbn/i18n';
1515

16-
export class DynamicColorForm extends React.Component {
17-
state = {
18-
colorMapType: COLOR_MAP_TYPE.ORDINAL,
19-
};
20-
21-
constructor() {
22-
super();
23-
this._isMounted = false;
24-
}
25-
26-
componentWillUnmount() {
27-
this._isMounted = false;
28-
}
16+
export function DynamicColorForm({
17+
fields,
18+
onDynamicStyleChange,
19+
staticDynamicSelect,
20+
styleProperty,
21+
}) {
22+
const styleOptions = styleProperty.getOptions();
2923

30-
componentDidMount() {
31-
this._isMounted = true;
32-
this._loadColorMapType();
33-
}
34-
35-
componentDidUpdate() {
36-
this._loadColorMapType();
37-
}
38-
39-
async _loadColorMapType() {
40-
const field = this.props.styleProperty.getField();
41-
if (!field) {
42-
return;
43-
}
44-
const dataType = await field.getDataType();
45-
const colorMapType = CATEGORICAL_DATA_TYPES.includes(dataType)
46-
? COLOR_MAP_TYPE.CATEGORICAL
47-
: COLOR_MAP_TYPE.ORDINAL;
48-
if (this._isMounted && this.state.colorMapType !== colorMapType) {
49-
this.setState({ colorMapType }, () => {
50-
const options = this.props.styleProperty.getOptions();
51-
this.props.onDynamicStyleChange(this.props.styleProperty.getStyleName(), {
52-
...options,
53-
type: colorMapType,
54-
});
55-
});
24+
const onColorMapSelect = ({ color, customColorMap, type, useCustomColorMap }) => {
25+
const newColorOptions = {
26+
...styleOptions,
27+
type,
28+
};
29+
if (type === COLOR_MAP_TYPE.ORDINAL) {
30+
newColorOptions.useCustomColorRamp = useCustomColorMap;
31+
newColorOptions.customColorRamp = customColorMap;
32+
newColorOptions.color = color;
33+
} else {
34+
newColorOptions.useCustomColorPalette = useCustomColorMap;
35+
newColorOptions.customColorPalette = customColorMap;
36+
newColorOptions.colorCategory = color;
5637
}
57-
}
5838

59-
_getColorSelector() {
60-
const { onDynamicStyleChange, styleProperty } = this.props;
61-
const styleOptions = styleProperty.getOptions();
39+
onDynamicStyleChange(styleProperty.getStyleName(), newColorOptions);
40+
};
6241

42+
const onFieldChange = async ({ field }) => {
43+
const { name, origin, type } = field;
44+
onDynamicStyleChange(styleProperty.getStyleName(), {
45+
...styleOptions,
46+
field: { name, origin },
47+
type: CATEGORICAL_DATA_TYPES.includes(type)
48+
? COLOR_MAP_TYPE.CATEGORICAL
49+
: COLOR_MAP_TYPE.ORDINAL,
50+
});
51+
};
52+
53+
const renderColorMapSelect = () => {
6354
if (!styleOptions.field || !styleOptions.field.name) {
64-
return;
55+
return null;
6556
}
6657

67-
let colorSelect;
68-
const onColorChange = colorOptions => {
69-
const newColorOptions = {
70-
type: colorOptions.type,
71-
};
72-
if (colorOptions.type === COLOR_MAP_TYPE.ORDINAL) {
73-
newColorOptions.useCustomColorRamp = colorOptions.useCustomColorMap;
74-
newColorOptions.customColorRamp = colorOptions.customColorMap;
75-
newColorOptions.color = colorOptions.color;
76-
} else {
77-
newColorOptions.useCustomColorPalette = colorOptions.useCustomColorMap;
78-
newColorOptions.customColorPalette = colorOptions.customColorMap;
79-
newColorOptions.colorCategory = colorOptions.color;
80-
}
81-
82-
onDynamicStyleChange(styleProperty.getStyleName(), {
83-
...styleOptions,
84-
...newColorOptions,
85-
});
86-
};
87-
88-
if (this.state.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
89-
const customOptionLabel = i18n.translate('xpack.maps.style.customColorRampLabel', {
90-
defaultMessage: 'Custom color ramp',
91-
});
92-
colorSelect = (
58+
if (styleOptions.type === COLOR_MAP_TYPE.ORDINAL) {
59+
return (
9360
<ColorMapSelect
9461
colorMapOptions={COLOR_GRADIENTS}
95-
customOptionLabel={customOptionLabel}
96-
onChange={options => onColorChange(options)}
62+
customOptionLabel={i18n.translate('xpack.maps.style.customColorRampLabel', {
63+
defaultMessage: 'Custom color ramp',
64+
})}
65+
onChange={onColorMapSelect}
9766
colorMapType={COLOR_MAP_TYPE.ORDINAL}
9867
color={styleOptions.color}
9968
customColorMap={styleOptions.customColorRamp}
10069
useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
10170
compressed
10271
/>
10372
);
104-
} else if (this.state.colorMapType === COLOR_MAP_TYPE.CATEGORICAL) {
105-
const customOptionLabel = i18n.translate('xpack.maps.style.customColorPaletteLabel', {
106-
defaultMessage: 'Custom color palette',
107-
});
108-
colorSelect = (
109-
<ColorMapSelect
110-
colorMapOptions={COLOR_PALETTES}
111-
customOptionLabel={customOptionLabel}
112-
onChange={options => onColorChange(options)}
113-
colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
114-
color={styleOptions.colorCategory}
115-
customColorMap={styleOptions.customColorPalette}
116-
useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
117-
compressed
118-
/>
119-
);
12073
}
121-
return colorSelect;
122-
}
123-
124-
render() {
125-
const { fields, onDynamicStyleChange, staticDynamicSelect, styleProperty } = this.props;
126-
const styleOptions = styleProperty.getOptions();
127-
const onFieldChange = options => {
128-
const field = options.field;
129-
onDynamicStyleChange(styleProperty.getStyleName(), { ...styleOptions, field });
130-
};
131-
132-
const colorSelect = this._getColorSelector();
13374

13475
return (
135-
<Fragment>
136-
<EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
137-
<EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
138-
<EuiFlexItem>
139-
<FieldSelect
140-
fields={fields}
141-
selectedFieldName={_.get(styleOptions, 'field.name')}
142-
onChange={onFieldChange}
143-
compressed
144-
/>
145-
</EuiFlexItem>
146-
</EuiFlexGroup>
147-
<EuiSpacer size="s" />
148-
{colorSelect}
149-
</Fragment>
76+
<ColorMapSelect
77+
colorMapOptions={COLOR_PALETTES}
78+
customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
79+
defaultMessage: 'Custom color palette',
80+
})}
81+
onChange={onColorMapSelect}
82+
colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
83+
color={styleOptions.colorCategory}
84+
customColorMap={styleOptions.customColorPalette}
85+
useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
86+
compressed
87+
/>
15088
);
151-
}
89+
};
90+
91+
return (
92+
<Fragment>
93+
<EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
94+
<EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
95+
<EuiFlexItem>
96+
<FieldSelect
97+
fields={fields}
98+
selectedFieldName={_.get(styleOptions, 'field.name')}
99+
onChange={onFieldChange}
100+
compressed
101+
/>
102+
</EuiFlexItem>
103+
</EuiFlexGroup>
104+
<EuiSpacer size="s" />
105+
{renderColorMapSelect()}
106+
</Fragment>
107+
);
152108
}

0 commit comments

Comments
 (0)