[Maps] Unify legend for percentiles, interpolate and custom ordinal c…

…olor breaks (#86050) * [Maps] unify legend for percentiles, interpolate, and custom ordinal color breaks (#85343) * [Maps] unify legend for percentiles, interpolate, and custom ordinal color breaks * unify mapbox style expression * snapshot updates * update jest expects * use less than and great than symbol for first and last stop * tslint * do not show legend if customColorRamp is not provided * update functional test expects * update functional test expect * update mapbox expect expressions in join functional tests * update mvt expects * revert mapbox style expression changes for interpole color ramp * add greater then and equal to symbol for last stop * disable stop input for first ordinal color stop Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * fix crossmerge Co-authored-by: Nathan Reese <reese.nathan@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 16, 2020 · 3b67384 · 3b67384
1 parent 767a052
commit 3b67384
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 111 deletions.
diff --git a/x-pack/plugins/maps/common/i18n_getters.ts b/x-pack/plugins/maps/common/i18n_getters.ts
@@ -9,14 +9,6 @@ import { i18n } from '@kbn/i18n';
 import { $Values } from '@kbn/utility-types';
 import { ES_SPATIAL_RELATIONS } from './constants';
 
-export const UPTO = i18n.translate('xpack.maps.upto', {
-  defaultMessage: 'up to',
-});
-
-export const GREAT_THAN = i18n.translate('xpack.maps.greatThan', {
-  defaultMessage: 'greater than',
-});
-
 export function getAppTitle() {
   return i18n.translate('xpack.maps.appTitle', {
     defaultMessage: 'Maps',

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_stops_ordinal.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_stops_ordinal.js
@@ -39,7 +39,7 @@ export const ColorStopsOrdinal = ({
     return error;
   };
 
-  const renderStopInput = (stop, onStopChange) => {
+  const renderStopInput = (stop, onStopChange, index) => {
     function handleOnChangeEvent(event) {
       const sanitizedValue = parseFloat(event.target.value);
       const newStopValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
@@ -50,9 +50,10 @@ export const ColorStopsOrdinal = ({
         aria-label={i18n.translate('xpack.maps.styles.colorStops.ordinalStop.stopLabel', {
           defaultMessage: 'Stop',
         })}
-        value={stop}
+        value={index === 0 ? '' : stop}
         onChange={handleOnChangeEvent}
         compressed
+        disabled={index === 0}
       />
     );
   };

diff --git a/...ublic/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.tsx.snap b/...ublic/classes/styles/vector/properties/__snapshots__/dynamic_color_property.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx
@@ -371,7 +371,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
       expect(colorProperty._getMbColor()).toBeNull();
     });
 
-    describe('pre-defined color ramp', () => {
+    describe('interpolate color ramp', () => {
       test('should return null when color ramp is not provided', async () => {
         const dynamicStyleOptions = {
           type: COLOR_MAP_TYPE.ORDINAL,
@@ -457,7 +457,16 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
         const colorProperty = makeProperty(dynamicStyleOptions);
         expect(colorProperty._getMbColor()).toEqual([
           'step',
-          ['coalesce', ['feature-state', 'foobar'], 9],
+          [
+            'coalesce',
+            [
+              'case',
+              ['==', ['feature-state', 'foobar'], null],
+              9,
+              ['max', ['min', ['to-number', ['feature-state', 'foobar']], 100], 10],
+            ],
+            9,
+          ],
           'rgba(0,0,0,0)',
           10,
           '#f7faff',
@@ -483,7 +492,16 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
         const colorProperty = makeProperty(dynamicStyleOptions, undefined, field);
         expect(colorProperty._getMbColor()).toEqual([
           'step',
-          ['coalesce', ['get', 'foobar'], 9],
+          [
+            'coalesce',
+            [
+              'case',
+              ['==', ['get', 'foobar'], null],
+              9,
+              ['max', ['min', ['to-number', ['get', 'foobar']], 100], 10],
+            ],
+            9,
+          ],
           'rgba(0,0,0,0)',
           10,
           '#f7faff',