-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/main' into dot-kibana-split
- Loading branch information
Showing
71 changed files
with
2,047 additions
and
479 deletions.
There are no files selected for viewing
55 changes: 55 additions & 0 deletions
55
src/plugins/chart_expressions/expression_heatmap/public/components/chart_split.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { Accessor, AccessorFn, GroupBy, SmallMultiples, Predicate } from '@elastic/charts'; | ||
|
|
||
| interface ChartSplitProps { | ||
| splitColumnAccessor?: Accessor | AccessorFn; | ||
| splitRowAccessor?: Accessor | AccessorFn; | ||
| } | ||
|
|
||
| const CHART_SPLIT_ID = '__heatmap_chart_split__'; | ||
| const SMALL_MULTIPLES_ID = '__heatmap_chart_sm__'; | ||
|
|
||
| export const ChartSplit = ({ splitColumnAccessor, splitRowAccessor }: ChartSplitProps) => { | ||
| if (!splitColumnAccessor && !splitRowAccessor) return null; | ||
|
|
||
| return ( | ||
| <> | ||
| <GroupBy | ||
| id={CHART_SPLIT_ID} | ||
| by={(spec, datum) => { | ||
| const splitTypeAccessor = splitColumnAccessor || splitRowAccessor; | ||
| if (splitTypeAccessor) { | ||
| return typeof splitTypeAccessor === 'function' | ||
| ? splitTypeAccessor(datum) | ||
| : datum[splitTypeAccessor]; | ||
| } | ||
| return spec.id; | ||
| }} | ||
| sort={Predicate.DataIndex} | ||
| /> | ||
| <SmallMultiples | ||
| id={SMALL_MULTIPLES_ID} | ||
| splitVertically={splitRowAccessor ? CHART_SPLIT_ID : undefined} | ||
| splitHorizontally={splitColumnAccessor ? CHART_SPLIT_ID : undefined} | ||
| style={{ | ||
| verticalPanelPadding: { | ||
| outer: 0, | ||
| inner: 0.1, | ||
| }, | ||
| horizontalPanelPadding: { | ||
| outer: 0, | ||
| inner: 0.1, | ||
| }, | ||
| }} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
...ugins/chart_expressions/expression_heatmap/public/utils/get_split_dimension_utils.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
| import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks'; | ||
| import type { DatatableColumn, Datatable } from '@kbn/expressions-plugin/public'; | ||
| import type { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common'; | ||
| import { getSplitDimensionAccessor, createSplitPoint } from './get_split_dimension_utils'; | ||
|
|
||
| const data: Datatable = { | ||
| type: 'datatable', | ||
| rows: [ | ||
| { 'col-0-1': 0, 'col-1-2': 'a', 'col-2-3': 'd' }, | ||
| { 'col-0-1': 148, 'col-1-2': 'b', 'col-2-3': 'c' }, | ||
| ], | ||
| columns: [ | ||
| { id: 'col-0-1', name: 'Count', meta: { type: 'number' } }, | ||
| { id: 'col-1-2', name: 'Dest', meta: { type: 'string' } }, | ||
| { | ||
| id: 'col-2-3', | ||
| name: 'Test', | ||
| meta: { | ||
| type: 'number', | ||
| params: { | ||
| id: 'number', | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| describe('getSplitDimensionAccessor', () => { | ||
| const defaultFormatter = jest.fn((...args) => fieldFormatsMock.deserialize(...args)); | ||
|
|
||
| beforeEach(() => { | ||
| defaultFormatter.mockClear(); | ||
| }); | ||
|
|
||
| const splitDimension: ExpressionValueVisDimension = { | ||
| type: 'vis_dimension', | ||
| accessor: { | ||
| id: data.columns[2].id, | ||
| name: data.columns[2].name, | ||
| meta: data.columns[2].meta, | ||
| }, | ||
| format: { | ||
| params: {}, | ||
| }, | ||
| }; | ||
|
|
||
| it('returns accessor which is using formatter, if meta.params are present at accessing column', () => { | ||
| const accessor = getSplitDimensionAccessor(data.columns, splitDimension, defaultFormatter); | ||
|
|
||
| expect(defaultFormatter).toHaveBeenCalledTimes(1); | ||
| expect(typeof accessor).toBe('function'); | ||
| accessor(data.rows[0]); | ||
| }); | ||
|
|
||
| it('returns accessor which is using default formatter, if meta.params and format are not present', () => { | ||
| const column: Partial<DatatableColumn> = { | ||
| ...data.columns[2], | ||
| meta: { type: 'number' }, | ||
| }; | ||
| const columns = [data.columns[0], column, data.columns[2]] as DatatableColumn[]; | ||
| const defaultFormatterReturnedVal = fieldFormatsMock.deserialize(); | ||
| const spyOnDefaultFormatterConvert = jest.spyOn(defaultFormatterReturnedVal, 'convert'); | ||
|
|
||
| defaultFormatter.mockReturnValueOnce(defaultFormatterReturnedVal); | ||
| const accessor = getSplitDimensionAccessor(columns, splitDimension, defaultFormatter); | ||
|
|
||
| expect(defaultFormatter).toHaveBeenCalledTimes(1); | ||
|
|
||
| expect(typeof accessor).toBe('function'); | ||
| accessor(data.rows[0]); | ||
| expect(spyOnDefaultFormatterConvert).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('returns accessor which returns undefined, if such column is not present', () => { | ||
| const accessor1 = getSplitDimensionAccessor(data.columns, splitDimension, defaultFormatter); | ||
|
|
||
| expect(typeof accessor1).toBe('function'); | ||
| const result1 = accessor1({}); | ||
| expect(result1).toBeUndefined(); | ||
|
|
||
| const column2: Partial<DatatableColumn> = { | ||
| ...data.columns[2], | ||
| meta: { type: 'string' }, | ||
| }; | ||
| const columns2 = [data.columns[0], data.columns[1], column2] as DatatableColumn[]; | ||
| const accessor2 = getSplitDimensionAccessor(columns2, splitDimension, defaultFormatter); | ||
|
|
||
| expect(typeof accessor2).toBe('function'); | ||
| const result2 = accessor1({}); | ||
| expect(result2).toBeUndefined(); | ||
|
|
||
| const column3 = { | ||
| ...data.columns[2], | ||
| meta: { type: 'string' }, | ||
| format: { | ||
| id: 'string', | ||
| params: {}, | ||
| }, | ||
| }; | ||
| const columns3 = [data.columns[0], data.columns[1], column3] as DatatableColumn[]; | ||
|
|
||
| const accessor3 = getSplitDimensionAccessor(columns3, splitDimension, defaultFormatter); | ||
| expect(typeof accessor3).toBe('function'); | ||
| const result3 = accessor3({}); | ||
| expect(result3).toBeUndefined(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('createSplitPoint', () => { | ||
| const defaultFormatter = jest.fn((...args) => fieldFormatsMock.deserialize(...args)); | ||
|
|
||
| beforeEach(() => { | ||
| defaultFormatter.mockClear(); | ||
| }); | ||
|
|
||
| const splitDimension: ExpressionValueVisDimension = { | ||
| type: 'vis_dimension', | ||
| accessor: { | ||
| id: data.columns[2].id, | ||
| name: data.columns[2].name, | ||
| meta: data.columns[2].meta, | ||
| }, | ||
| format: { | ||
| params: {}, | ||
| }, | ||
| }; | ||
|
|
||
| it('returns point if value is found in the table', () => { | ||
| const point = createSplitPoint(splitDimension, 'c', defaultFormatter, data); | ||
|
|
||
| expect(defaultFormatter).toHaveBeenCalledTimes(1); | ||
| expect(point).toStrictEqual({ column: 2, row: 1, value: 'c' }); | ||
| }); | ||
|
|
||
| it('returns undefined if value is not found in the table', () => { | ||
| const point = createSplitPoint(splitDimension, 'test', defaultFormatter, data); | ||
|
|
||
| expect(defaultFormatter).toHaveBeenCalledTimes(1); | ||
| expect(point).toBeUndefined(); | ||
| }); | ||
| }); |
56 changes: 56 additions & 0 deletions
56
src/plugins/chart_expressions/expression_heatmap/public/utils/get_split_dimension_utils.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
| import type { AccessorFn } from '@elastic/charts'; | ||
| import type { DatatableColumn, Datatable } from '@kbn/expressions-plugin/public'; | ||
| import type { FormatFactory } from '@kbn/field-formats-plugin/common'; | ||
| import type { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common'; | ||
| import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils'; | ||
|
|
||
| export const getSplitDimensionAccessor = ( | ||
| columns: DatatableColumn[], | ||
| splitDimension: ExpressionValueVisDimension | string, | ||
| formatFactory: FormatFactory | ||
| ): AccessorFn => { | ||
| const splitChartColumn = getColumnByAccessor(splitDimension, columns)!; | ||
| const accessor = splitChartColumn.id; | ||
|
|
||
| const formatter = formatFactory(splitChartColumn.meta?.params); | ||
| const fn: AccessorFn = (d) => { | ||
| const v = d[accessor]; | ||
| if (v === undefined) { | ||
| return; | ||
| } | ||
|
|
||
| const f = formatter.convert(v); | ||
| return f; | ||
| }; | ||
|
|
||
| return fn; | ||
| }; | ||
|
|
||
| export function createSplitPoint( | ||
| splitDimension: ExpressionValueVisDimension | string, | ||
| value: string | number, | ||
| formatFactory: FormatFactory, | ||
| table: Datatable | ||
| ) { | ||
| const splitChartColumn = getColumnByAccessor(splitDimension, table.columns)!; | ||
| const accessor = splitChartColumn.id; | ||
|
|
||
| const formatter = formatFactory(splitChartColumn.meta?.params); | ||
| const splitPointRowIndex = table.rows.findIndex((row) => { | ||
| return formatter.convert(row[accessor]) === value; | ||
| }); | ||
| if (splitPointRowIndex !== -1) { | ||
| return { | ||
| row: splitPointRowIndex, | ||
| column: table.columns.findIndex((column) => column.id === accessor), | ||
| value: table.rows[splitPointRowIndex][accessor], | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.