Skip to content

Commit

Permalink
[Gauge] Visdimensions support. (#124927)
Browse files Browse the repository at this point in the history 
* Shape argument turned to required.

* Added checks for the gauge arguments.

* Moved (metric/min/max/goal)Accessor arguments to (metric/min/max/goal).

* Split gauge and lens state.

* Added support of vis_dimensions.

* Some fixes for uniformity.

* Moved findAccessor out of dimensions.

* Made accessors/vis_dimension functionality reusable for other plugins.

* Fixed test snapshots.

* Fixed snapshots.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@Kuznietsov @kibanamachine
Kuznietsov and kibanamachine authored Feb 16, 2022
1 parent b7b5088 commit 47ec103
Show file tree
Hide file tree
Showing 38 changed files with 515 additions and 323 deletions.
18 changes: 9 additions & 9 deletions src/plugins/chart_expressions/expression_gauge/common/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@ export const EXPRESSION_GAUGE_NAME = 'gauge';
export const GAUGE_FUNCTION_RENDERER_NAME = 'gauge_renderer';

export const GaugeShapes = {
horizontalBullet: 'horizontalBullet',
verticalBullet: 'verticalBullet',
HORIZONTAL_BULLET: 'horizontalBullet',
VERTICAL_BULLET: 'verticalBullet',
} as const;

export const GaugeTicksPositions = {
auto: 'auto',
bands: 'bands',
AUTO: 'auto',
BANDS: 'bands',
} as const;

export const GaugeLabelMajorModes = {
auto: 'auto',
custom: 'custom',
none: 'none',
AUTO: 'auto',
CUSTOM: 'custom',
NONE: 'none',
} as const;

export const GaugeColorModes = {
palette: 'palette',
none: 'none',
PALETTE: 'palette',
NONE: 'none',
} as const;
8 changes: 4 additions & 4 deletions ...ns/expression_gauge/common/expression_functions/__snapshots__/gauge_function.test.ts.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 8 additions & 7 deletions ...ins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
*/

import { gaugeFunction } from './gauge_function';
import type { GaugeArguments } from '..';
import { GaugeArguments, GaugeShapes } from '..';
import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
import { Datatable } from '../../../../expressions/common/expression_types/specs';
import { GaugeColorModes, GaugeLabelMajorModes, GaugeTicksPositions } from '../constants';

describe('interpreter/functions#gauge', () => {
const fn = functionWrapper(gaugeFunction());
Expand All @@ -22,13 +23,13 @@ describe('interpreter/functions#gauge', () => {
],
};
const args: GaugeArguments = {
ticksPosition: 'auto',
labelMajorMode: 'custom',
ticksPosition: GaugeTicksPositions.AUTO,
labelMajorMode: GaugeLabelMajorModes.CUSTOM,
labelMajor: 'title',
shape: 'horizontalBullet',
colorMode: 'none',
minAccessor: 'col-1-2',
metricAccessor: 'col-0-1',
shape: GaugeShapes.HORIZONTAL_BULLET,
colorMode: GaugeColorModes.NONE,
min: 'col-1-2',
metric: 'col-0-1',
};

it('returns an object with the correct structure', () => {
Expand Down
122 changes: 91 additions & 31 deletions src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,101 +7,161 @@
*/

import { i18n } from '@kbn/i18n';
import { findAccessorOrFail } from '../../../../visualizations/common/utils';
import type { ExpressionValueVisDimension } from '../../../../visualizations/common';
import type { DatatableColumn } from '../../../../expressions';
import { GaugeExpressionFunctionDefinition } from '../types';
import { EXPRESSION_GAUGE_NAME } from '../constants';
import {
EXPRESSION_GAUGE_NAME,
GaugeColorModes,
GaugeLabelMajorModes,
GaugeShapes,
GaugeTicksPositions,
} from '../constants';

export const errors = {
invalidShapeError: () =>
i18n.translate('expressionGauge.functions.gauge.errors.invalidShapeError', {
defaultMessage: `Invalid shape is specified. Supported shapes: {shapes}`,
values: { shapes: Object.values(GaugeShapes).join(', ') },
}),
invalidColorModeError: () =>
i18n.translate('expressionGauge.functions.gauge.errors.invalidColorModeError', {
defaultMessage: `Invalid color mode is specified. Supported color modes: {colorModes}`,
values: { colorModes: Object.values(GaugeColorModes).join(', ') },
}),
invalidTicksPositionError: () =>
i18n.translate('expressionGauge.functions.gauge.errors.invalidTicksPositionError', {
defaultMessage: `Invalid ticks position is specified. Supported ticks positions: {ticksPositions}`,
values: { ticksPositions: Object.values(GaugeTicksPositions).join(', ') },
}),
invalidLabelMajorModeError: () =>
i18n.translate('expressionGauge.functions.gauge.errors.invalidLabelMajorModeError', {
defaultMessage: `Invalid label major mode is specified. Supported label major modes: {labelMajorModes}`,
values: { labelMajorModes: Object.values(GaugeLabelMajorModes).join(', ') },
}),
};

const validateAccessor = (
accessor: string | undefined | ExpressionValueVisDimension,
columns: DatatableColumn[]
) => {
if (accessor && typeof accessor === 'string') {
findAccessorOrFail(accessor, columns);
}
};

const validateOptions = (
value: string,
availableOptions: Record<string, string>,
getErrorMessage: () => string
) => {
if (!Object.values(availableOptions).includes(value)) {
throw new Error(getErrorMessage());
}
};

export const gaugeFunction = (): GaugeExpressionFunctionDefinition => ({
name: EXPRESSION_GAUGE_NAME,
type: 'render',
inputTypes: ['datatable'],
help: i18n.translate('expressionGauge.functions.help', {
help: i18n.translate('expressionGauge.functions.gauge.help', {
defaultMessage: 'Gauge visualization',
}),
args: {
shape: {
types: ['string'],
options: ['horizontalBullet', 'verticalBullet'],
help: i18n.translate('expressionGauge.functions.shape.help', {
options: [GaugeShapes.HORIZONTAL_BULLET, GaugeShapes.VERTICAL_BULLET],
help: i18n.translate('expressionGauge.functions.gauge.args.shape.help', {
defaultMessage: 'Type of gauge chart',
}),
required: true,
},
metricAccessor: {
types: ['string'],
help: i18n.translate('expressionGauge.functions.metricAccessor.help', {
metric: {
types: ['string', 'vis_dimension'],
help: i18n.translate('expressionGauge.functions.gauge.args.metric.help', {
defaultMessage: 'Current value',
}),
},
minAccessor: {
types: ['string'],
help: i18n.translate('expressionGauge.functions.minAccessor.help', {
min: {
types: ['string', 'vis_dimension'],
help: i18n.translate('expressionGauge.functions.gauge.args.min.help', {
defaultMessage: 'Minimum value',
}),
},
maxAccessor: {
types: ['string'],
help: i18n.translate('expressionGauge.functions.maxAccessor.help', {
max: {
types: ['string', 'vis_dimension'],
help: i18n.translate('expressionGauge.functions.gauge.args.max.help', {
defaultMessage: 'Maximum value',
}),
},
goalAccessor: {
types: ['string'],
help: i18n.translate('expressionGauge.functions.goalAccessor.help', {
goal: {
types: ['string', 'vis_dimension'],
help: i18n.translate('expressionGauge.functions.gauge.args.goal.help', {
defaultMessage: 'Goal Value',
}),
},
colorMode: {
types: ['string'],
default: 'none',
options: ['none', 'palette'],
help: i18n.translate('expressionGauge.functions.colorMode.help', {
default: GaugeColorModes.NONE,
options: [GaugeColorModes.NONE, GaugeColorModes.PALETTE],
help: i18n.translate('expressionGauge.functions.gauge.args.colorMode.help', {
defaultMessage: 'If set to palette, the palette colors will be applied to the bands',
}),
},
palette: {
types: ['palette'],
help: i18n.translate('expressionGauge.functions..metric.palette.help', {
help: i18n.translate('expressionGauge.functions.gauge.args.palette.help', {
defaultMessage: 'Provides colors for the values',
}),
},
ticksPosition: {
types: ['string'],
options: ['auto', 'bands'],
help: i18n.translate('expressionGauge.functions..gaugeChart.config.ticksPosition.help', {
default: GaugeTicksPositions.AUTO,
options: [GaugeTicksPositions.AUTO, GaugeTicksPositions.BANDS],
help: i18n.translate('expressionGauge.functions.gauge.args.ticksPosition.help', {
defaultMessage: 'Specifies the placement of ticks',
}),
required: true,
},
labelMajor: {
types: ['string'],
help: i18n.translate('expressionGauge.functions..gaugeChart.config.labelMajor.help', {
help: i18n.translate('expressionGauge.functions.gauge.args.labelMajor.help', {
defaultMessage: 'Specifies the labelMajor of the gauge chart displayed inside the chart.',
}),
required: false,
},
labelMajorMode: {
types: ['string'],
options: ['none', 'auto', 'custom'],
help: i18n.translate('expressionGauge.functions..gaugeChart.config.labelMajorMode.help', {
options: [GaugeLabelMajorModes.NONE, GaugeLabelMajorModes.AUTO, GaugeLabelMajorModes.CUSTOM],
help: i18n.translate('expressionGauge.functions.gauge.args.labelMajorMode.help', {
defaultMessage: 'Specifies the mode of labelMajor',
}),
required: true,
default: GaugeLabelMajorModes.AUTO,
},
labelMinor: {
types: ['string'],
help: i18n.translate('expressionGauge.functions..gaugeChart.config.labelMinor.help', {
help: i18n.translate('expressionGauge.functions.gauge.args.labelMinor.help', {
defaultMessage: 'Specifies the labelMinor of the gauge chart',
}),
required: false,
},
ariaLabel: {
types: ['string'],
help: i18n.translate('expressionGauge.functions.gaugeChart.config.ariaLabel.help', {
defaultMessage: 'Specifies the aria label of the gauge chart',
}),
required: false,
},
},

fn(data, args, handlers) {
validateOptions(args.shape, GaugeShapes, errors.invalidShapeError);
validateOptions(args.colorMode, GaugeColorModes, errors.invalidColorModeError);
validateOptions(args.ticksPosition, GaugeTicksPositions, errors.invalidTicksPositionError);
validateOptions(args.labelMajorMode, GaugeLabelMajorModes, errors.invalidLabelMajorModeError);

validateAccessor(args.metric, data.columns);
validateAccessor(args.min, data.columns);
validateAccessor(args.max, data.columns);
validateAccessor(args.goal, data.columns);

return {
type: 'render',
as: EXPRESSION_GAUGE_NAME,
Expand Down
1 change: 1 addition & 0 deletions src/plugins/chart_expressions/expression_gauge/common/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export type {
GaugeLabelMajorMode,
GaugeTicksPosition,
GaugeState,
Accessors,
} from './types';

export { gaugeFunction } from './expression_functions';
Expand Down
26 changes: 17 additions & 9 deletions src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@
* Side Public License, v 1.
*/

import { $Values } from '@kbn/utility-types';
import {
Datatable,
ExpressionFunctionDefinition,
ExpressionValueRender,
} from '../../../../expressions';
import { ExpressionValueVisDimension } from '../../../../visualizations/public';
import { CustomPaletteState, PaletteOutput } from '../../../../charts/common';
import {
EXPRESSION_GAUGE_NAME,
Expand All @@ -22,17 +24,16 @@ import {
} from '../constants';
import { CustomPaletteParams } from '.';

export type GaugeType = 'gauge';
export type GaugeColorMode = keyof typeof GaugeColorModes;
export type GaugeShape = keyof typeof GaugeShapes;
export type GaugeLabelMajorMode = keyof typeof GaugeLabelMajorModes;
export type GaugeTicksPosition = keyof typeof GaugeTicksPositions;
export type GaugeColorMode = $Values<typeof GaugeColorModes>;
export type GaugeShape = $Values<typeof GaugeShapes>;
export type GaugeLabelMajorMode = $Values<typeof GaugeLabelMajorModes>;
export type GaugeTicksPosition = $Values<typeof GaugeTicksPositions>;

export interface GaugeState {
metricAccessor?: string;
minAccessor?: string;
maxAccessor?: string;
goalAccessor?: string;
metric?: string | ExpressionValueVisDimension;
min?: string | ExpressionValueVisDimension;
max?: string | ExpressionValueVisDimension;
goal?: string | ExpressionValueVisDimension;
ticksPosition: GaugeTicksPosition;
labelMajorMode: GaugeLabelMajorMode;
labelMajor?: string;
Expand Down Expand Up @@ -68,3 +69,10 @@ export type GaugeExpressionFunctionDefinition = ExpressionFunctionDefinition<
GaugeArguments,
ExpressionValueRender<GaugeExpressionProps>
>;

export interface Accessors {
min?: string;
max?: string;
metric?: string;
goal?: string;
}
Loading

0 comments on commit 47ec103

Please sign in to comment.