[Lens] Adds dynamic table cell coloring (#95217) (#100878)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
Co-authored-by: Michael Marcialis <michael@marcial.is>

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
Co-authored-by: Michael Marcialis <michael@marcial.is>

src/plugins/charts/common/palette.test.ts

@@ -12,13 +12,14 @@ import {
   systemPalette,
   PaletteOutput,
   CustomPaletteState,
+  CustomPaletteArguments,
 } from './palette';
 import { functionWrapper } from 'src/plugins/expressions/common/expression_functions/specs/tests/utils';
 
 describe('palette', () => {
   const fn = functionWrapper(palette()) as (
     context: null,
-    args?: { color?: string[]; gradient?: boolean; reverse?: boolean }
+    args?: Partial<CustomPaletteArguments>
   ) => PaletteOutput<CustomPaletteState>;
 
   it('results a palette', () => {
@@ -39,6 +40,18 @@ describe('palette', () => {
       });
     });
 
+    describe('stop', () => {
+      it('sets stops', () => {
+        const result = fn(null, { color: ['red', 'green', 'blue'], stop: [1, 2, 3] });
+        expect(result.params!.stops).toEqual([1, 2, 3]);
+      });
+
+      it('defaults to pault_tor_14 colors', () => {
+        const result = fn(null);
+        expect(result.params!.colors).toEqual(defaultCustomColors);
+      });
+    });
+
     describe('gradient', () => {
       it('sets gradient', () => {
         let result = fn(null, { gradient: true });
@@ -69,6 +82,16 @@ describe('palette', () => {
         const result = fn(null);
         expect(result.params!.colors).toEqual(defaultCustomColors);
       });
+
+      it('keeps the stops order pristine when set', () => {
+        const stops = [1, 2, 3];
+        const result = fn(null, {
+          color: ['red', 'green', 'blue'],
+          stop: [1, 2, 3],
+          reverse: true,
+        });
+        expect(result.params!.stops).toEqual(stops);
+      });
     });
   });
 });

src/plugins/charts/common/palette.ts

@@ -14,11 +14,21 @@ export interface CustomPaletteArguments {
   color?: string[];
   gradient: boolean;
   reverse?: boolean;
+  stop?: number[];
+  range?: 'number' | 'percent';
+  rangeMin?: number;
+  rangeMax?: number;
+  continuity?: 'above' | 'below' | 'all' | 'none';
 }
 
 export interface CustomPaletteState {
   colors: string[];
   gradient: boolean;
+  stops: number[];
+  range: 'number' | 'percent';
+  rangeMin: number;
+  rangeMax: number;
+  continuity?: 'above' | 'below' | 'all' | 'none';
 }
 
 export interface SystemPaletteArguments {
@@ -83,6 +93,35 @@ export function palette(): ExpressionFunctionDefinition<
         }),
         required: false,
       },
+      stop: {
+        multi: true,
+        types: ['number'],
+        help: i18n.translate('charts.functions.palette.args.stopHelpText', {
+          defaultMessage:
+            'The palette color stops. When used, it must be associated with each color.',
+        }),
+        required: false,
+      },
+      continuity: {
+        types: ['string'],
+        options: ['above', 'below', 'all', 'none'],
+        default: 'above',
+        help: '',
+      },
+      rangeMin: {
+        types: ['number'],
+        help: '',
+      },
+      rangeMax: {
+        types: ['number'],
+        help: '',
+      },
+      range: {
+        types: ['string'],
+        options: ['number', 'percent'],
+        default: 'percent',
+        help: '',
+      },
       gradient: {
         types: ['boolean'],
         default: false,
@@ -101,15 +140,32 @@ export function palette(): ExpressionFunctionDefinition<
       },
     },
     fn: (input, args) => {
-      const { color, reverse, gradient } = args;
+      const {
+        color,
+        continuity,
+        reverse,
+        gradient,
+        stop,
+        range,
+        rangeMin = 0,
+        rangeMax = 100,
+      } = args;
       const colors = ([] as string[]).concat(color || defaultCustomColors);
-
+      const stops = ([] as number[]).concat(stop || []);
+      if (stops.length > 0 && colors.length !== stops.length) {
+        throw Error('When stop is used, each color must have an associated stop value.');
+      }
       return {
         type: 'palette',
         name: 'custom',
         params: {
           colors: reverse ? colors.reverse() : colors,
+          stops,
+          range: range ?? 'percent',
           gradient,
+          continuity,
+          rangeMin,
+          rangeMax,
         },
       };
     },