[Lens][Table] Add color by terms with color mappings

packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx

@@ -15,22 +15,26 @@ import { Container } from './components/container/container';
 import { ColorMapping } from './config';
 import { uiReducer } from './state/ui';
 
+export interface ColorMappingInputCategoricalData {
+  type: 'categories';
+  /** an ORDERED array of categories rendered in the visualization  */
+  categories: Array<string | string[]>;
+}
+
+export interface ColorMappingInputContinuousData {
+  type: 'ranges';
+  min: number;
+  max: number;
+  bins: number;
+}
+
 /**
  * A configuration object that is required to populate correctly the visible categories
  * or the ranges in the CategoricalColorMapping component
  */
 export type ColorMappingInputData =
-  | {
-      type: 'categories';
-      /** an ORDERED array of categories rendered in the visualization  */
-      categories: Array<string | string[]>;
-    }
-  | {
-      type: 'ranges';
-      min: number;
-      max: number;
-      bins: number;
-    };
+  | ColorMappingInputCategoricalData
+  | ColorMappingInputContinuousData;
 
 /**
  * The props of the CategoricalColorMapping component

packages/kbn-coloring/src/shared_components/color_mapping/color/rule_matching.ts

@@ -41,7 +41,7 @@ export function rangeMatch(rule: ColorMapping.RuleRange, value: number) {
 }
 
 // TODO: move in some data/table related package
-export const SPECIAL_TOKENS_STRING_CONVERTION = new Map([
+export const SPECIAL_TOKENS_STRING_CONVERSION = new Map([
   [
     '__other__',
     i18n.translate('coloring.colorMapping.terms.otherBucketLabel', {

packages/kbn-coloring/src/shared_components/color_mapping/components/assignment/match.tsx

@@ -73,6 +73,7 @@ export const Match: React.FC<{
   return (
     <EuiFlexItem style={{ minWidth: 1, width: 1 }}>
       <EuiComboBox
+        isClearable
         data-test-subj={`lns-colorMapping-assignmentsItem${index}`}
         fullWidth={true}
         aria-label={i18n.translate('coloring.colorMapping.assignments.autoAssignedTermAriaLabel', {
@@ -82,7 +83,7 @@ export const Match: React.FC<{
         placeholder={i18n.translate(
           'coloring.colorMapping.assignments.autoAssignedTermPlaceholder',
           {
-            defaultMessage: 'Auto assigned',
+            defaultMessage: 'Auto assigning term',
           }
         )}
         options={convertedOptions}
@@ -103,7 +104,6 @@ export const Match: React.FC<{
           }
         }}
         isCaseSensitive
-        isClearable={false}
         compressed
       />
     </EuiFlexItem>

packages/kbn-coloring/src/shared_components/color_mapping/components/container/assigments.tsx

@@ -195,7 +195,7 @@ export function AssignmentsConfig({
                       'coloring.colorMapping.container.mapValuesPromptDescription.mapValuesPromptDetail',
                       {
                         defaultMessage:
-                          'Add new assignments to begin associating terms in your data with specified colors.',
+                          'Add a new assignment to manually associate terms with specified colors.',
                       }
                     )}
                   </p>
@@ -214,7 +214,7 @@ export function AssignmentsConfig({
                 </EuiButton>,
                 <EuiButtonEmpty
                   data-test-subj="lns-colorMapping-assignmentsPromptAddAll"
-                  color="primary"
+                  color="text"
                   size="xs"
                   onClick={onClickAddAllCurrentCategories}
                 >
@@ -251,6 +251,7 @@ export function AssignmentsConfig({
                 button={
                   <EuiButtonIcon
                     iconType="boxesVertical"
+                    color="text"
                     aria-label={i18n.translate(
                       'coloring.colorMapping.container.OpenAdditionalActionsButtonLabel',
                       {

packages/kbn-coloring/src/shared_components/color_mapping/components/container/container.tsx

@@ -81,6 +81,7 @@ export function Container({
             >
               <EuiButtonIcon
                 data-test-subj="lns-colorMapping-invertGradient"
+                color="text"
                 iconType="merge"
                 size="xs"
                 aria-label={i18n.translate(

packages/kbn-coloring/src/shared_components/color_mapping/components/palette_selector/scale.tsx

@@ -107,6 +107,7 @@ export function ScaleMode({ getPaletteFn }: { getPaletteFn: ReturnType<typeof ge
       >
         <EuiButtonGroup
           legend="Mode"
+          buttonSize="compressed"
           data-test-subj="lns_colorMapping_scaleSwitch"
           options={[
             {

packages/kbn-coloring/src/shared_components/color_mapping/config/default_color_mapping.ts

@@ -11,6 +11,7 @@ import { AVAILABLE_PALETTES, getPalette } from '../palettes';
 import { EUIAmsterdamColorBlindPalette } from '../palettes/eui_amsterdam';
 import { NeutralPalette } from '../palettes/neutral';
 import { getColor, getGradientColorScale } from '../color/color_handling';
+import { DEFAULT_FALLBACK_PALETTE, PaletteOutput, PaletteRegistry } from '../../../palettes';
 
 export const DEFAULT_NEUTRAL_PALETTE_INDEX = 1;
 export const DEFAULT_OTHER_ASSIGNMENT_INDEX = 0;
@@ -37,6 +38,22 @@ export const DEFAULT_COLOR_MAPPING_CONFIG: ColorMapping.Config = {
   },
 };
 
+/**
+ * Returns array of colors for provided colorMapping or palette
+ */
+export function getColorStops<T>(
+  paletteService: PaletteRegistry,
+  isDarkMode: boolean,
+  palette?: PaletteOutput<T>,
+  colorMapping?: ColorMapping.Config
+): string[] {
+  return colorMapping
+    ? getColorsFromMapping(isDarkMode, colorMapping)
+    : paletteService
+        .get(palette?.name || DEFAULT_FALLBACK_PALETTE)
+        .getCategoricalColors(10, palette);
+}
+
 export function getPaletteColors(
   isDarkMode: boolean,
   colorMappings?: ColorMapping.Config

packages/kbn-coloring/src/shared_components/color_mapping/index.ts

@@ -11,10 +11,11 @@ export type { ColorMappingInputData } from './categorical_color_mapping';
 export type { ColorMapping } from './config';
 export * from './palettes';
 export * from './color/color_handling';
-export { SPECIAL_TOKENS_STRING_CONVERTION } from './color/rule_matching';
+export { SPECIAL_TOKENS_STRING_CONVERSION } from './color/rule_matching';
 export {
   DEFAULT_COLOR_MAPPING_CONFIG,
   DEFAULT_OTHER_ASSIGNMENT_INDEX,
   getPaletteColors,
   getColorsFromMapping,
+  getColorStops,
 } from './config/default_color_mapping';

src/plugins/chart_expressions/common/color_categories.ts

@@ -15,27 +15,38 @@ import { isMultiFieldKey } from '@kbn/data-plugin/common';
  */
 export function getColorCategories(
   rows: DatatableRow[],
-  accessor?: string
+  accessor?: string,
+  isTransposed?: boolean,
+  exclude?: any[]
 ): Array<string | string[]> {
-  return accessor
-    ? rows.reduce<{ keys: Set<string>; categories: Array<string | string[]> }>(
-        (acc, r) => {
-          const value = r[accessor];
-          if (value === undefined) {
-            return acc;
-          }
+  const ids = isTransposed
+    ? Object.keys(rows[0]).filter((key) => accessor && key.endsWith(accessor))
+    : accessor
+    ? [accessor]
+    : [];
+
+  return rows
+    .flatMap((r) =>
+      ids
+        .map((id) => r[id])
+        .filter((v) => !(v === undefined || exclude?.includes(v)))
+        .map((v) => {
           // The categories needs to be stringified in their unformatted version.
           // We can't distinguish between a number and a string from a text input and the match should
           // work with both numeric field values and string values.
-          const key = (isMultiFieldKey(value) ? [...value.keys] : [value]).map(String);
+          const key = (isMultiFieldKey(v) ? [...v.keys] : [v]).map(String);
           const stringifiedKeys = key.join(',');
-          if (!acc.keys.has(stringifiedKeys)) {
-            acc.keys.add(stringifiedKeys);
-            acc.categories.push(key.length === 1 ? key[0] : key);
-          }
-          return acc;
-        },
-        { keys: new Set(), categories: [] }
-      ).categories
-    : [];
+          return { key, stringifiedKeys };
+        })
+    )
+    .reduce<{ keys: Set<string>; categories: Array<string | string[]> }>(
+      (acc, { key, stringifiedKeys }) => {
+        if (!acc.keys.has(stringifiedKeys)) {
+          acc.keys.add(stringifiedKeys);
+          acc.categories.push(key.length === 1 ? key[0] : key);
+        }
+        return acc;
+      },
+      { keys: new Set(), categories: [] }
+    ).categories;
 }

src/plugins/chart_expressions/expression_xy/public/helpers/color_assignment.ts

@@ -98,7 +98,6 @@ export const getAllSeries = (
 /**
  * This function joins every data series name available on each layer by the same color palette.
  * The returned function `getRank` should return the position of a series name in this unified list by palette.
- *
  */
 export function getColorAssignments(
   layers: CommonXYLayerConfig[],

src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx

@@ -28,7 +28,7 @@ import {
   getPalette,
   AVAILABLE_PALETTES,
   NeutralPalette,
-  SPECIAL_TOKENS_STRING_CONVERTION,
+  SPECIAL_TOKENS_STRING_CONVERSION,
 } from '@kbn/coloring';
 import { getColorCategories } from '@kbn/chart-expressions-common';
 import { isDataLayer } from '../../common/utils/layer_types_guards';
@@ -333,7 +333,7 @@ const getColor: GetColorFn = (
 
   const name = getSeriesNameFn(series)?.toString() || '';
 
-  const overwriteColors: Record<string, string> = uiState?.get ? uiState.get('vis.colors', {}) : {};
+  const overwriteColors: Record<string, string> = uiState?.get?.('vis.colors', {}) ?? {};
 
   if (Object.keys(overwriteColors).includes(name)) {
     return overwriteColors[name];
@@ -493,15 +493,15 @@ export const getSeriesProps: GetSeriesPropsFn = ({
     // if colorMapping exist then we can apply it, if not let's use the legacy coloring method
     layer.colorMapping && splitColumnIds.length > 0
       ? getColorSeriesAccessorFn(
-          JSON.parse(layer.colorMapping), // the color mapping is at this point just a strinfigied JSON
+          JSON.parse(layer.colorMapping), // the color mapping is at this point just a stringified JSON
           getPalette(AVAILABLE_PALETTES, NeutralPalette),
           isDarkMode,
           {
             type: 'categories',
             categories: getColorCategories(table.rows, splitColumnIds[0]),
           },
           splitColumnIds[0],
-          SPECIAL_TOKENS_STRING_CONVERTION
+          SPECIAL_TOKENS_STRING_CONVERSION
         )
       : (series) =>
           getColor(

x-pack/plugins/lens/common/expressions/datatable/datatable.ts

@@ -8,7 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import type { ExecutionContext } from '@kbn/expressions-plugin/common';
 import type { FormatFactory, RowHeightMode } from '../../types';
-import type { ColumnConfigArg } from './datatable_column';
+import type { DatatableColumnConfigArgs } from './datatable_column';
 import type { DatatableExpressionFunction } from './types';
 
 export interface SortingState {
@@ -24,7 +24,7 @@ export interface PagingState {
 export interface DatatableArgs {
   title: string;
   description?: string;
-  columns: ColumnConfigArg[];
+  columns: DatatableColumnConfigArgs[];
   sortingColumnId: SortingState['columnId'];
   sortingDirection: SortingState['direction'];
   fitRowToContent?: boolean;

x-pack/plugins/lens/common/expressions/datatable/datatable_column.ts

@@ -6,23 +6,25 @@
  */
 
 import type { Direction } from '@elastic/eui';
-import type { PaletteOutput, CustomPaletteParams } from '@kbn/coloring';
+import type { PaletteOutput, CustomPaletteParams, ColorMapping } from '@kbn/coloring';
 import type { CustomPaletteState } from '@kbn/charts-plugin/common';
 import type { ExpressionFunctionDefinition, DatatableColumn } from '@kbn/expressions-plugin/common';
 import type { SortingHint } from '../../types';
 import { CollapseFunction } from '../collapse';
 
+const LENS_DATATABLE_COLUMN = 'lens_datatable_column';
+
 export type LensGridDirection = 'none' | Direction;
 
-export interface ColumnConfig {
-  columns: ColumnConfigArg[];
+export interface DatatableColumnConfig {
+  columns: DatatableColumnConfigArgs[];
   sortingColumnId: string | undefined;
   sortingDirection: LensGridDirection;
 }
 
-export type ColumnConfigArg = Omit<ColumnState, 'palette'> & {
-  type: 'lens_datatable_column';
+export type DatatableColumnConfigArgs = Omit<ColumnState, 'palette' | 'colorMapping'> & {
   palette?: PaletteOutput<CustomPaletteState>;
+  colorMapping?: string;
   summaryRowValue?: unknown;
   sortingHint?: SortingHint;
 };
@@ -41,25 +43,28 @@ export interface ColumnState {
   bucketValues?: Array<{ originalBucketColumn: DatatableColumn; value: unknown }>;
   alignment?: 'left' | 'right' | 'center';
   palette?: PaletteOutput<CustomPaletteParams>;
+  colorMapping?: ColorMapping.Config;
   colorMode?: 'none' | 'cell' | 'text';
   summaryRow?: 'none' | 'sum' | 'avg' | 'count' | 'min' | 'max';
   summaryLabel?: string;
   collapseFn?: CollapseFunction;
   isMetric?: boolean;
 }
 
-export type DatatableColumnResult = ColumnState & { type: 'lens_datatable_column' };
-export type DatatableColumnFunction = ExpressionFunctionDefinition<
-  'lens_datatable_column',
+export type DatatableColumnResult = DatatableColumnConfigArgs & {
+  type: typeof LENS_DATATABLE_COLUMN;
+};
+export type DatatableColumnFn = ExpressionFunctionDefinition<
+  typeof LENS_DATATABLE_COLUMN,
   null,
-  ColumnState & { sortingHint?: SortingHint },
+  DatatableColumnConfigArgs,
   DatatableColumnResult
 >;
 
-export const datatableColumn: DatatableColumnFunction = {
-  name: 'lens_datatable_column',
+export const datatableColumn: DatatableColumnFn = {
+  name: LENS_DATATABLE_COLUMN,
   aliases: [],
-  type: 'lens_datatable_column',
+  type: LENS_DATATABLE_COLUMN,
   help: '',
   inputTypes: ['null'],
   args: {
@@ -76,12 +81,16 @@ export const datatableColumn: DatatableColumnFunction = {
       types: ['palette'],
       help: '',
     },
+    colorMapping: {
+      types: ['string'],
+      help: '',
+    },
     summaryRow: { types: ['string'], help: '' },
     summaryLabel: { types: ['string'], help: '' },
   },
-  fn: function fn(input: unknown, args: ColumnState) {
+  fn: function fn(input, args) {
     return {
-      type: 'lens_datatable_column',
+      type: LENS_DATATABLE_COLUMN,
       ...args,
     };
   },

x-pack/plugins/lens/common/expressions/datatable/index.ts

@@ -7,5 +7,6 @@
 
 export * from './datatable_column';
 export * from './datatable';
+export { isTransposeId, getOriginalId } from './transpose_helpers';
 
 export type { DatatableProps, DatatableExpressionFunction } from './types';