Skip to content

Commit

Permalink
[Maps] Fix custom color ramp on save (#59953)
Browse files Browse the repository at this point in the history 
* [Maps] Fix custom color ramp on save

* clean up

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
@nreese @elasticmachine
nreese and elasticmachine committed Mar 12, 2020
1 parent cb4f7d6 commit 021d904
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 33 deletions.
53 changes: 20 additions & 33 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,34 +101,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 [
Expand All @@ -138,6 +130,11 @@ export class DynamicColorProperty extends DynamicStyleProperty {
...colorStops,
];
}

const colorStops = getOrdinalColorRampStops(this._options.color);
if (!colorStops) {
return null;
}
return [
'interpolate',
['linear'],
Expand Down Expand Up @@ -194,7 +191,7 @@ export class DynamicColorProperty extends DynamicStyleProperty {
};
}

_getMbDataDrivenCategoricalColor() {
_getCategoricalColorMbExpression() {
if (
this._options.useCustomColorPalette &&
(!this._options.customColorPalette || !this._options.customColorPalette.length)
Expand Down Expand Up @@ -226,16 +223,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} />;
Expand Down
220 changes: 220 additions & 0 deletions ...legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,226 @@ 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);
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);
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);
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);
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);
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);
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);
expect(colorProperty._getMbColor()).toEqual([
'match',
['to-string', ['get', 'myField']],
'MX',
'#072f6b',
'#f7faff',
]);
});
});
});
});

test('isCategorical should return true when type is categorical', async () => {
const categoricalColorStyle = makeProperty({
type: COLOR_MAP_TYPE.CATEGORICAL,
Expand Down

0 comments on commit 021d904

Please sign in to comment.