Skip to content

Commit

Permalink
[XY] xyVis and layeredXyVis. (elastic#128255)
Browse files Browse the repository at this point in the history
* Added extended layers expressions.

* Added support of tables at layers.

* Added annotations to layeredXyVIs.

* Refactored the implementation to be reusable.

* Fixed undefined layers.

* Fixed empty arrays problems.

* Fixed input translations and removed not used arguments.

* Fixed missing required args error, and added required to arguments.

* Simplified expression configuration.

* Added strict to all the expressions.

* Moved dataLayer to the separate component.

* Refactored dataLayers helpers and xy_chart.

* fillOpacity usage validation is added.

* Fixed valueLabels argument options. Removed not used. Added validation for usage.

* Added validation to the layeredXyVis.

* Fixed extent validation.

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>
  • Loading branch information
4 people authored and kertal committed May 24, 2022
1 parent 7ebea07 commit 853f3bb
Show file tree
Hide file tree
Showing 118 changed files with 7,374 additions and 3,780 deletions.
2 changes: 1 addition & 1 deletion packages/kbn-optimizer/limits.yml
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ pageLoadAssetSize:
visTypeGauge: 24113
unifiedSearch: 71059
data: 454087
expressionXY: 26500
eventAnnotation: 19334
screenshotting: 22870
synthetics: 40958
expressionXY: 29000
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Position } from '@elastic/charts';
import type { PaletteOutput } from '@kbn/coloring';
import { Datatable, DatatableRow } from '@kbn/expressions-plugin';
import { LayerTypes } from '../constants';
import { DataLayerConfigResult, LensMultiTable, XYArgs } from '../types';
import { DataLayerConfig, XYProps } from '../types';

export const mockPaletteOutput: PaletteOutput = {
type: 'palette',
Expand Down Expand Up @@ -46,9 +46,9 @@ export const createSampleDatatableWithRows = (rows: DatatableRow[]): Datatable =
rows,
});

export const sampleLayer: DataLayerConfigResult = {
type: 'dataLayer',
export const sampleLayer: DataLayerConfig = {
layerId: 'first',
type: 'dataLayer',
layerType: LayerTypes.DATA,
seriesType: 'line',
xAccessor: 'c',
Expand All @@ -59,9 +59,12 @@ export const sampleLayer: DataLayerConfigResult = {
yScaleType: 'linear',
isHistogram: false,
palette: mockPaletteOutput,
table: createSampleDatatableWithRows([]),
};

export const createArgsWithLayers = (layers: DataLayerConfigResult[] = [sampleLayer]): XYArgs => ({
export const createArgsWithLayers = (
layers: DataLayerConfig | DataLayerConfig[] = sampleLayer
): XYProps => ({
xTitle: '',
yTitle: '',
yRightTitle: '',
Expand Down Expand Up @@ -104,25 +107,17 @@ export const createArgsWithLayers = (layers: DataLayerConfigResult[] = [sampleLa
mode: 'full',
type: 'axisExtentConfig',
},
layers,
layers: Array.isArray(layers) ? layers : [layers],
});

export function sampleArgs() {
const data: LensMultiTable = {
type: 'lens_multitable',
tables: {
first: createSampleDatatableWithRows([
{ a: 1, b: 2, c: 'I', d: 'Foo' },
{ a: 1, b: 5, c: 'J', d: 'Bar' },
]),
},
dateRange: {
fromDate: new Date('2019-01-02T05:00:00.000Z'),
toDate: new Date('2019-01-03T05:00:00.000Z'),
},
};

const args: XYArgs = createArgsWithLayers();
const data = createSampleDatatableWithRows([
{ a: 1, b: 2, c: 'I', d: 'Foo' },
{ a: 1, b: 5, c: 'J', d: 'Bar' },
]);

return { data, args };
return {
data,
args: createArgsWithLayers({ ...sampleLayer, table: data }),
};
}
26 changes: 24 additions & 2 deletions src/plugins/chart_expressions/expression_xy/common/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,21 @@
*/

export const XY_VIS = 'xyVis';
export const LAYERED_XY_VIS = 'layeredXyVis';
export const Y_CONFIG = 'yConfig';
export const EXTENDED_Y_CONFIG = 'extendedYConfig';
export const MULTITABLE = 'lens_multitable';
export const DATA_LAYER = 'dataLayer';
export const EXTENDED_DATA_LAYER = 'extendedDataLayer';
export const LEGEND_CONFIG = 'legendConfig';
export const XY_VIS_RENDERER = 'xyVis';
export const GRID_LINES_CONFIG = 'gridlinesConfig';
export const ANNOTATION_LAYER = 'annotationLayer';
export const EXTENDED_ANNOTATION_LAYER = 'extendedAnnotationLayer';
export const TICK_LABELS_CONFIG = 'tickLabelsConfig';
export const AXIS_EXTENT_CONFIG = 'axisExtentConfig';
export const REFERENCE_LINE_LAYER = 'referenceLineLayer';
export const EXTENDED_REFERENCE_LINE_LAYER = 'extendedReferenceLineLayer';
export const LABELS_ORIENTATION_CONFIG = 'labelsOrientationConfig';
export const AXIS_TITLES_VISIBILITY_CONFIG = 'axisTitlesVisibilityConfig';

Expand Down Expand Up @@ -106,6 +111,23 @@ export const XYCurveTypes = {

export const ValueLabelModes = {
HIDE: 'hide',
INSIDE: 'inside',
OUTSIDE: 'outside',
SHOW: 'show',
} as const;

export const AvailableReferenceLineIcons = {
EMPTY: 'empty',
ASTERISK: 'asterisk',
ALERT: 'alert',
BELL: 'bell',
BOLT: 'bolt',
BUG: 'bug',
CIRCLE: 'circle',
EDITOR_COMMENT: 'editorComment',
FLAG: 'flag',
HEART: 'heart',
MAP_MARKER: 'mapMarker',
PIN_FILLED: 'pinFilled',
STAR_EMPTY: 'starEmpty',
TAG: 'tag',
TRIANGLE: 'triangle',
} as const;
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,40 @@
* Side Public License, v 1.
*/

import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
import type { Datatable, ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
import { LayerTypes, ANNOTATION_LAYER } from '../constants';
import { AnnotationLayerArgs, AnnotationLayerConfigResult } from '../types';
import { strings } from '../i18n';

export function annotationLayerConfigFunction(): ExpressionFunctionDefinition<
export function annotationLayerFunction(): ExpressionFunctionDefinition<
typeof ANNOTATION_LAYER,
null,
Datatable,
AnnotationLayerArgs,
AnnotationLayerConfigResult
> {
return {
name: ANNOTATION_LAYER,
aliases: [],
type: ANNOTATION_LAYER,
inputTypes: ['null'],
help: 'Annotation layer in lens',
inputTypes: ['datatable'],
help: strings.getAnnotationLayerFnHelp(),
args: {
layerId: {
types: ['string'],
help: '',
},
hide: {
types: ['boolean'],
default: false,
help: 'Show details',
help: strings.getAnnotationLayerHideHelp(),
},
annotations: {
types: ['manual_point_event_annotation', 'manual_range_event_annotation'],
help: '',
help: strings.getAnnotationLayerAnnotationsHelp(),
multi: true,
},
},
fn: (input, args) => {
return {
type: ANNOTATION_LAYER,
...args,
annotations: args.annotations ?? [],
layerType: LayerTypes.ANNOTATIONS,
};
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/commo
import { AxisExtentConfig, AxisExtentConfigResult } from '../types';
import { AxisExtentModes, AXIS_EXTENT_CONFIG } from '../constants';

const errors = {
upperBoundLowerOrEqualToLowerBoundError: () =>
i18n.translate('expressionXY.reusable.function.axisExtentConfig.errors.emptyUpperBound', {
defaultMessage: 'Upper bound should be greater than lower bound, if custom mode is enabled.',
}),
};

export const axisExtentConfigFunction: ExpressionFunctionDefinition<
typeof AXIS_EXTENT_CONFIG,
null,
Expand All @@ -27,10 +34,12 @@ export const axisExtentConfigFunction: ExpressionFunctionDefinition<
args: {
mode: {
types: ['string'],
options: [...Object.values(AxisExtentModes)],
help: i18n.translate('expressionXY.axisExtentConfig.extentMode.help', {
defaultMessage: 'The extent mode',
}),
options: [...Object.values(AxisExtentModes)],
strict: true,
default: AxisExtentModes.FULL,
},
lowerBound: {
types: ['number'],
Expand All @@ -46,6 +55,16 @@ export const axisExtentConfigFunction: ExpressionFunctionDefinition<
},
},
fn(input, args) {
if (args.mode === AxisExtentModes.CUSTOM) {
if (
args.lowerBound !== undefined &&
args.upperBound !== undefined &&
args.lowerBound >= args.upperBound
) {
throw new Error(errors.upperBoundLowerOrEqualToLowerBoundError());
}
}

return {
type: AXIS_EXTENT_CONFIG,
...args,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/*
* 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 { SeriesTypes, XScaleTypes, YScaleTypes, Y_CONFIG } from '../constants';
import { strings } from '../i18n';
import { DataLayerFn, ExtendedDataLayerFn } from '../types';

type CommonDataLayerFn = DataLayerFn | ExtendedDataLayerFn;

export const commonDataLayerArgs: CommonDataLayerFn['args'] = {
hide: {
types: ['boolean'],
default: false,
help: strings.getHideHelp(),
},
xAccessor: {
types: ['string'],
help: strings.getXAccessorHelp(),
},
seriesType: {
types: ['string'],
options: [...Object.values(SeriesTypes)],
help: strings.getSeriesTypeHelp(),
required: true,
strict: true,
},
xScaleType: {
options: [...Object.values(XScaleTypes)],
help: strings.getXScaleTypeHelp(),
default: XScaleTypes.ORDINAL,
strict: true,
},
isHistogram: {
types: ['boolean'],
default: false,
help: strings.getIsHistogramHelp(),
},
yScaleType: {
options: [...Object.values(YScaleTypes)],
help: strings.getYScaleTypeHelp(),
default: YScaleTypes.LINEAR,
strict: true,
},
splitAccessor: {
types: ['string'],
help: strings.getSplitAccessorHelp(),
},
accessors: {
types: ['string'],
help: strings.getAccessorsHelp(),
multi: true,
},
yConfig: {
types: [Y_CONFIG],
help: strings.getYConfigHelp(),
multi: true,
},
columnToLabel: {
types: ['string'],
help: strings.getColumnToLabelHelp(),
},
palette: {
types: ['palette', 'system_palette'],
help: strings.getPaletteHelp(),
default: '{palette}',
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/*
* 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 { EXTENDED_Y_CONFIG } from '../constants';
import { strings } from '../i18n';
import { ReferenceLineLayerFn, ExtendedReferenceLineLayerFn } from '../types';

type CommonReferenceLineLayerFn = ReferenceLineLayerFn | ExtendedReferenceLineLayerFn;

export const commonReferenceLineLayerArgs: CommonReferenceLineLayerFn['args'] = {
accessors: {
types: ['string'],
help: strings.getRLAccessorsHelp(),
multi: true,
},
yConfig: {
types: [EXTENDED_Y_CONFIG],
help: strings.getRLYConfigHelp(),
multi: true,
},
columnToLabel: {
types: ['string'],
help: strings.getColumnToLabelHelp(),
},
};
Loading

0 comments on commit 853f3bb

Please sign in to comment.