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

[Lens] Do not use dynamic coloring for array values (#101750) (#101891)

Browse source 
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2021-06-10 10:56:08 -04:00 • committed by GitHub
parent 1d7c3d2769
commit 3eb9b6c392
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/lens/public/datatable_visualization/components/cell_value.test.tsx
View file

@ -192,5 +192,16 @@ describe('datatable cell renderer', () => {
style: expect.objectContaining({ color: 'blue' }),
});
});
it('should not color the cell when the value is an array', async () => {
const columnConfig = getColumnConfiguration();
columnConfig.columns[0].colorMode = 'cell';
const { setCellProps } = await renderCellComponent(columnConfig, {
table: { ...table, rows: [{ a: [10, 123] }] },
});
expect(setCellProps).not.toHaveBeenCalled();
});
});
});

7
x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
View file

@ -13,6 +13,7 @@ import type { DataContextType } from './types';
import { ColumnConfig } from './table_basic';
import { getContrastColor } from '../../shared_components/coloring/utils';
import { getOriginalId } from '../transpose_helpers';
import { getNumericValue } from './shared_utils';
export const createGridCell = (
formatters: Record<string, ReturnType<FormatFactory>>,
@ -37,7 +38,11 @@ export const createGridCell = (
if (minMaxByColumnId?.[originalId]) {
if (colorMode !== 'none' && palette?.params && getColorForValue) {
// workout the bucket the value belongs to
const color = getColorForValue(rowValue, palette.params, minMaxByColumnId[originalId]);
const color = getColorForValue(
getNumericValue(rowValue),
palette.params,
minMaxByColumnId[originalId]
);
if (color) {
const style = { [colorMode === 'cell' ? 'backgroundColor' : 'color']: color };
if (colorMode === 'cell' && color) {

18
x-pack/plugins/lens/public/datatable_visualization/components/shared_utils.tsx
View file

@ -8,6 +8,13 @@
import { Datatable } from 'src/plugins/expressions';
import { getOriginalId } from '../transpose_helpers';
export function getNumericValue(rowValue: number | number[] | undefined) {
if (rowValue == null || Array.isArray(rowValue)) {
return;
}
return rowValue;
}
export const findMinMaxByColumnId = (columnIds: string[], table: Datatable | undefined) => {
const minMax: Record<string, { min: number; max: number; fallback?: boolean }> = {};
@ -17,12 +24,13 @@ export const findMinMaxByColumnId = (columnIds: string[], table: Datatable | und
minMax[originalId] = minMax[originalId] || { max: -Infinity, min: Infinity };
table.rows.forEach((row) => {
const rowValue = row[columnId];
if (rowValue != null) {
if (minMax[originalId].min > rowValue) {
minMax[originalId].min = rowValue;
const numericValue = getNumericValue(rowValue);
if (numericValue != null) {
if (minMax[originalId].min > numericValue) {
minMax[originalId].min = numericValue;
}
if (minMax[originalId].max < rowValue) {
minMax[originalId].max = rowValue;
if (minMax[originalId].max < numericValue) {
minMax[originalId].max = numericValue;
}
}
});