github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[7.6] [Maps] Fix custom color ramp on save (#59953) (#59974)

Browse source 
* merge with master

* fix jest test for 7.6
This commit is contained in:
Nathan Reese 2020-03-12 07:50:45 -06:00 • committed by GitHub
parent 03ce9b54c6
commit f0fdebdcb0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 240 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

53
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js
View file

@ -105,34 +105,26 @@ export class DynamicColorProperty extends DynamicStyleProperty {
}
_getMbColor() {
const isDynamicConfigComplete =
_.has(this._options, 'field.name') && _.has(this._options, 'color');
if (!isDynamicConfigComplete) {
if (!_.get(this._options, 'field.name')) {
return null;
}
const targetName = getComputedFieldName(this._styleName, this._options.field.name);
if (this.isCategorical()) {
return this._getMbDataDrivenCategoricalColor({ targetName });
} else {
return this._getMbDataDrivenOrdinalColor({ targetName });
}
return this.isCategorical()
? this._getCategoricalColorMbExpression()
: this._getOrdinalColorMbExpression();
}
_getMbDataDrivenOrdinalColor({ targetName }) {
if (
this._options.useCustomColorRamp &&
(!this._options.customColorRamp || !this._options.customColorRamp.length)
) {
return null;
}
const colorStops = this._getMbOrdinalColorStops();
if (!colorStops) {
return null;
}
_getOrdinalColorMbExpression() {
const targetName = getComputedFieldName(this._styleName, this._options.field.name);
if (this._options.useCustomColorRamp) {
if (!this._options.customColorRamp || !this._options.customColorRamp.length) {
// custom color ramp config is not complete
return null;
}
const colorStops = this._options.customColorRamp.reduce((accumulatedStops, nextStop) => {
return [...accumulatedStops, nextStop.stop, nextStop.color];
}, []);
const firstStopValue = colorStops[0];
const lessThenFirstStopValue = firstStopValue - 1;
return [
@ -142,6 +134,11 @@ export class DynamicColorProperty extends DynamicStyleProperty {
...colorStops,
];
}
const colorStops = getOrdinalColorRampStops(this._options.color);
if (!colorStops) {
return null;
}
return [
'interpolate',
['linear'],
@ -198,7 +195,7 @@ export class DynamicColorProperty extends DynamicStyleProperty {
};
}
_getMbDataDrivenCategoricalColor() {
_getCategoricalColorMbExpression() {
if (
this._options.useCustomColorPalette &&
(!this._options.customColorPalette || !this._options.customColorPalette.length)
@ -230,16 +227,6 @@ export class DynamicColorProperty extends DynamicStyleProperty {
return ['match', ['to-string', ['get', this._options.field.name]], ...mbStops];
}
_getMbOrdinalColorStops() {
if (this._options.useCustomColorRamp) {
return this._options.customColorRamp.reduce((accumulatedStops, nextStop) => {
return [...accumulatedStops, nextStop.stop, nextStop.color];
}, []);
} else {
return getOrdinalColorRampStops(this._options.color);
}
}
renderRangeLegendHeader() {
if (this._options.color) {
return <ColorGradient colorRampName={this._options.color} />;

220
x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
View file

@ -221,3 +221,223 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => {
],
});
});
describe('get mapbox color expression', () => {
describe('ordinal color ramp', () => {
test('should return null when field is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return null when field name is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
field: {},
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBeNull();
});
describe('pre-defined color ramp', () => {
test('should return null when color ramp is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
field: {
name: 'myField',
},
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return mapbox expression for color ramp', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
field: {
name: 'myField',
},
color: 'Blues',
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toEqual([
'interpolate',
['linear'],
['coalesce', ['feature-state', '__kbn__dynamic__myField__lineColor'], -1],
-1,
'rgba(0,0,0,0)',
0,
'#f7faff',
0.125,
'#ddeaf7',
0.25,
'#c5daee',
0.375,
'#9dc9e0',
0.5,
'#6aadd5',
0.625,
'#4191c5',
0.75,
'#2070b4',
0.875,
'#072f6b',
]);
});
});
describe('custom color ramp', () => {
test('should return null when customColorRamp is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
field: {
name: 'myField',
},
useCustomColorRamp: true,
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return null when customColorRamp is empty', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
field: {
name: 'myField',
},
useCustomColorRamp: true,
customColorRamp: [],
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return mapbox expression for custom color ramp', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.ORDINAL,
field: {
name: 'myField',
},
useCustomColorRamp: true,
customColorRamp: [
{ stop: 10, color: '#f7faff' },
{ stop: 100, color: '#072f6b' },
],
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toEqual([
'step',
['coalesce', ['feature-state', '__kbn__dynamic__myField__lineColor'], 9],
'rgba(0,0,0,0)',
10,
'#f7faff',
100,
'#072f6b',
]);
});
});
});
describe('categorical color palette', () => {
test('should return null when field is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return null when field name is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
field: {},
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toBeNull();
});
describe('pre-defined color palette', () => {
test('should return null when color palette is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
field: {
name: 'myField',
},
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return mapbox expression for color palette', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
field: {
name: 'myField',
},
colorCategory: 'palette_0',
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toEqual([
'match',
['to-string', ['get', 'myField']],
'US',
'#54B399',
'CN',
'#6092C0',
'#D36086',
]);
});
});
describe('custom color palette', () => {
test('should return null when customColorPalette is not provided', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
field: {
name: 'myField',
},
useCustomColorPalette: true,
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return null when customColorPalette is empty', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
field: {
name: 'myField',
},
useCustomColorPalette: true,
customColorPalette: [],
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toBeNull();
});
test('should return mapbox expression for custom color palette', async () => {
const dynamicStyleOptions = {
type: COLOR_MAP_TYPE.CATEGORICAL,
field: {
name: 'myField',
},
useCustomColorPalette: true,
customColorPalette: [
{ stop: null, color: '#f7faff' },
{ stop: 'MX', color: '#072f6b' },
],
};
const colorProperty = makeProperty(dynamicStyleOptions, getCategoricalFieldMeta);
expect(colorProperty._getMbColor()).toEqual([
'match',
['to-string', ['get', 'myField']],
'MX',
'#072f6b',
'#f7faff',
]);
});
});
});
});