Skip to content
This repository has been archived by the owner on Mar 31, 2024. It is now read-only.

Commit

Permalink
[XY] Expression chart. (elastic#127150)
Browse files Browse the repository at this point in the history
* added xy plugin.

* Added expressionXY limits.

* Added xy expression functions to the expression_xy plugin.

* Moved xy to a separate plugin.

* Fixed bugs, caused by the refactoring process.

* Fixed lens snapshots.

* Removed new line.

* Fixed xy_chart tests.

* Added lazy loading for xy chart.

* Fixed xy chart test.

* Fixed broken chart selectors.

* Fixed dashboard tests.

* dashboard test fixed.

* Fixed heatmap vis.

* Smokescreen test fixed.

* more fixes.

* async dashboard tests fixed.

* Fixed xy smokescreen tests selectors.

* fixed show_underlying_data tests.

* Updated snapshots.

* updated limits.

* Fixed more selectors

* Fixed persistent context test.

* Fixed some more test at ml.

* Fixed types and imports

* Fixed handlers.inspectorAdapters.tables.logDatatable

* Fixed logDatatable

* Translations fixed.

* Fixed "Visualize App ... cleans filters and query" test.

* Fixed "lens disable auto-apply tests" test.

* Updated dashboard tests.

* Fixed translations.

* Expression tests fixed.

* Cleaned up expression_xy.

* cleaned up lens xy_visualization.

* Moved XY state types to lens.

* Update src/plugins/chart_expressions/expression_xy/README.md

Co-authored-by: Marta Bondyra <[email protected]>

* [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs'

* Removed yConfig from *Layers types

* Removed not used utils and styles.

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>
  • Loading branch information
3 people authored Mar 28, 2022
1 parent 0ea741d commit 072fe63
Show file tree
Hide file tree
Showing 172 changed files with 7,945 additions and 5,220 deletions.
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
/src/plugins/chart_expressions/expression_heatmap/ @elastic/kibana-vis-editors
/src/plugins/chart_expressions/expression_gauge/ @elastic/kibana-vis-editors
/src/plugins/chart_expressions/expression_partition_vis/ @elastic/kibana-vis-editors
/src/plugins/chart_expressions/expression_xy/ @elastic/kibana-vis-editors
/src/plugins/url_forwarding/ @elastic/kibana-vis-editors
/packages/kbn-tinymath/ @elastic/kibana-vis-editors
/x-pack/test/functional/apps/lens @elastic/kibana-vis-editors
Expand Down
1 change: 1 addition & 0 deletions .i18nrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"expressionMetric": "src/plugins/expression_metric",
"expressionMetricVis": "src/plugins/chart_expressions/expression_metric",
"expressionPartitionVis": "src/plugins/chart_expressions/expression_partition_vis",
"expressionXY": "src/plugins/chart_expressions/expression_xy",
"expressionRepeatImage": "src/plugins/expression_repeat_image",
"expressionRevealImage": "src/plugins/expression_reveal_image",
"expressions": "src/plugins/expressions",
Expand Down
4 changes: 4 additions & 0 deletions docs/developer/plugin-list.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,10 @@ for use in their own application.
|Expression Tagcloud plugin adds a tagcloud renderer and function to the expression plugin. The renderer will display the Wordcloud chart.
|{kib-repo}blob/{branch}/src/plugins/chart_expressions/expression_xy/README.md[expressionXY]
|Expression XY plugin adds a xy renderer and function to the expression plugin. The renderer will display the xy chart.
|{kib-repo}blob/{branch}/src/plugins/field_formats/README.md[fieldFormats]
|Index pattern fields formatters
Expand Down
1 change: 1 addition & 0 deletions packages/kbn-optimizer/limits.yml
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,5 @@ pageLoadAssetSize:
sessionView: 77750
cloudSecurityPosture: 19109
visTypeGauge: 24113
expressionXY: 41392
eventAnnotation: 19334
9 changes: 9 additions & 0 deletions src/plugins/chart_expressions/expression_xy/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# expressionXY

Expression XY plugin adds a `xy` renderer and function to the expression plugin. The renderer will display the `xy` chart.

---

## Development

See the [kibana contributing guide](https://github.com/elastic/kibana/blob/main/CONTRIBUTING.md) for instructions setting up your development environment.
128 changes: 128 additions & 0 deletions src/plugins/chart_expressions/expression_xy/common/__mocks__/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
/*
* 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 { Position } from '@elastic/charts';
import { PaletteOutput } from 'src/plugins/charts/common';
import { Datatable, DatatableRow } from 'src/plugins/expressions';
import { LayerTypes } from '../constants';
import { DataLayerConfigResult, LensMultiTable, XYArgs } from '../types';

export const mockPaletteOutput: PaletteOutput = {
type: 'palette',
name: 'mock',
params: {},
};

export const createSampleDatatableWithRows = (rows: DatatableRow[]): Datatable => ({
type: 'datatable',
columns: [
{
id: 'a',
name: 'a',
meta: { type: 'number', params: { id: 'number', params: { pattern: '0,0.000' } } },
},
{
id: 'b',
name: 'b',
meta: { type: 'number', params: { id: 'number', params: { pattern: '000,0' } } },
},
{
id: 'c',
name: 'c',
meta: {
type: 'date',
field: 'order_date',
sourceParams: { type: 'date-histogram', params: { interval: 'auto' } },
params: { id: 'string' },
},
},
{ id: 'd', name: 'ColD', meta: { type: 'string' } },
],
rows,
});

export const sampleLayer: DataLayerConfigResult = {
type: 'dataLayer',
layerId: 'first',
layerType: LayerTypes.DATA,
seriesType: 'line',
xAccessor: 'c',
accessors: ['a', 'b'],
splitAccessor: 'd',
columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
xScaleType: 'ordinal',
yScaleType: 'linear',
isHistogram: false,
palette: mockPaletteOutput,
};

export const createArgsWithLayers = (layers: DataLayerConfigResult[] = [sampleLayer]): XYArgs => ({
xTitle: '',
yTitle: '',
yRightTitle: '',
legend: {
type: 'legendConfig',
isVisible: false,
position: Position.Top,
},
valueLabels: 'hide',
valuesInLegend: false,
axisTitlesVisibilitySettings: {
type: 'axisTitlesVisibilityConfig',
x: true,
yLeft: true,
yRight: true,
},
tickLabelsVisibilitySettings: {
type: 'tickLabelsConfig',
x: true,
yLeft: false,
yRight: false,
},
labelsOrientation: {
type: 'labelsOrientationConfig',
x: 0,
yLeft: -90,
yRight: -45,
},
gridlinesVisibilitySettings: {
type: 'gridlinesConfig',
x: true,
yLeft: false,
yRight: false,
},
yLeftExtent: {
mode: 'full',
type: 'axisExtentConfig',
},
yRightExtent: {
mode: 'full',
type: 'axisExtentConfig',
},
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();

return { data, args };
}
111 changes: 111 additions & 0 deletions src/plugins/chart_expressions/expression_xy/common/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
/*
* 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.
*/

export const XY_VIS = 'xyVis';
export const Y_CONFIG = 'yConfig';
export const MULTITABLE = 'lens_multitable';
export const DATA_LAYER = 'dataLayer';
export const LEGEND_CONFIG = 'legendConfig';
export const XY_VIS_RENDERER = 'xyVis';
export const GRID_LINES_CONFIG = 'gridlinesConfig';
export const ANNOTATION_LAYER = 'annotationLayer';
export const TICK_LABELS_CONFIG = 'tickLabelsConfig';
export const AXIS_EXTENT_CONFIG = 'axisExtentConfig';
export const REFERENCE_LINE_LAYER = 'referenceLineLayer';
export const LABELS_ORIENTATION_CONFIG = 'labelsOrientationConfig';
export const AXIS_TITLES_VISIBILITY_CONFIG = 'axisTitlesVisibilityConfig';

export const LayerTypes = {
DATA: 'data',
REFERENCELINE: 'referenceLine',
ANNOTATIONS: 'annotations',
} as const;

export const FittingFunctions = {
NONE: 'None',
ZERO: 'Zero',
LINEAR: 'Linear',
CARRY: 'Carry',
LOOKAHEAD: 'Lookahead',
} as const;

export const EndValues = {
NONE: 'None',
ZERO: 'Zero',
NEAREST: 'Nearest',
} as const;

export const YAxisModes = {
AUTO: 'auto',
LEFT: 'left',
RIGHT: 'right',
BOTTOM: 'bottom',
} as const;

export const AxisExtentModes = {
FULL: 'full',
CUSTOM: 'custom',
DATA_BOUNDS: 'dataBounds',
} as const;

export const LineStyles = {
SOLID: 'solid',
DASHED: 'dashed',
DOTTED: 'dotted',
} as const;

export const FillStyles = {
NONE: 'none',
ABOVE: 'above',
BELOW: 'below',
} as const;

export const IconPositions = {
AUTO: 'auto',
LEFT: 'left',
RIGHT: 'right',
ABOVE: 'above',
BELOW: 'below',
} as const;

export const SeriesTypes = {
BAR: 'bar',
LINE: 'line',
AREA: 'area',
BAR_STACKED: 'bar_stacked',
AREA_STACKED: 'area_stacked',
BAR_HORIZONTAL: 'bar_horizontal',
BAR_PERCENTAGE_STACKED: 'bar_percentage_stacked',
BAR_HORIZONTAL_STACKED: 'bar_horizontal_stacked',
AREA_PERCENTAGE_STACKED: 'area_percentage_stacked',
BAR_HORIZONTAL_PERCENTAGE_STACKED: 'bar_horizontal_percentage_stacked',
} as const;

export const YScaleTypes = {
TIME: 'time',
LINEAR: 'linear',
LOG: 'log',
SQRT: 'sqrt',
} as const;

export const XScaleTypes = {
TIME: 'time',
LINEAR: 'linear',
ORDINAL: 'ordinal',
} as const;

export const XYCurveTypes = {
LINEAR: 'LINEAR',
CURVE_MONOTONE_X: 'CURVE_MONOTONE_X',
} as const;

export const ValueLabelModes = {
HIDE: 'hide',
INSIDE: 'inside',
OUTSIDE: 'outside',
} as const;
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* 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 { ExpressionFunctionDefinition } from '../../../../expressions/common';
import { LayerTypes, ANNOTATION_LAYER } from '../constants';
import { AnnotationLayerArgs, AnnotationLayerConfigResult } from '../types';

export function annotationLayerConfigFunction(): ExpressionFunctionDefinition<
typeof ANNOTATION_LAYER,
null,
AnnotationLayerArgs,
AnnotationLayerConfigResult
> {
return {
name: ANNOTATION_LAYER,
aliases: [],
type: ANNOTATION_LAYER,
inputTypes: ['null'],
help: 'Annotation layer in lens',
args: {
layerId: {
types: ['string'],
help: '',
},
hide: {
types: ['boolean'],
default: false,
help: 'Show details',
},
annotations: {
types: ['manual_event_annotation'],
help: '',
multi: true,
},
},
fn: (input, args) => {
return {
type: ANNOTATION_LAYER,
...args,
layerType: LayerTypes.ANNOTATIONS,
};
},
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* 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 { i18n } from '@kbn/i18n';
import type { ExpressionFunctionDefinition } from '../../../../expressions/common';
import { AxisExtentConfig, AxisExtentConfigResult } from '../types';
import { AxisExtentModes, AXIS_EXTENT_CONFIG } from '../constants';

export const axisExtentConfigFunction: ExpressionFunctionDefinition<
typeof AXIS_EXTENT_CONFIG,
null,
AxisExtentConfig,
AxisExtentConfigResult
> = {
name: AXIS_EXTENT_CONFIG,
aliases: [],
type: AXIS_EXTENT_CONFIG,
help: i18n.translate('expressionXY.axisExtentConfig.help', {
defaultMessage: `Configure the xy chart's axis extents`,
}),
inputTypes: ['null'],
args: {
mode: {
types: ['string'],
options: [...Object.values(AxisExtentModes)],
help: i18n.translate('expressionXY.axisExtentConfig.extentMode.help', {
defaultMessage: 'The extent mode',
}),
},
lowerBound: {
types: ['number'],
help: i18n.translate('expressionXY.axisExtentConfig.lowerBound.help', {
defaultMessage: 'Lower bound',
}),
},
upperBound: {
types: ['number'],
help: i18n.translate('expressionXY.axisExtentConfig.upperBound.help', {
defaultMessage: 'Upper bound',
}),
},
},
fn(input, args) {
return {
type: AXIS_EXTENT_CONFIG,
...args,
};
},
};
Loading

0 comments on commit 072fe63

Please sign in to comment.