From 7b05de05950ae2b8d4b4fff1ff2b422ecc44a2f7 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Wed, 20 Oct 2021 15:26:22 +0300 Subject: [PATCH] [XY] Fixes the formatting on multiple axis (#115552) * [XY] fixes the formatting on multiple axis * Move mock data to its own file --- .../xy/public/config/get_config.test.ts | 44 ++++ .../vis_types/xy/public/config/get_config.ts | 14 +- src/plugins/vis_types/xy/public/mocks.ts | 223 ++++++++++++++++++ 3 files changed, 277 insertions(+), 4 deletions(-) create mode 100644 src/plugins/vis_types/xy/public/config/get_config.test.ts create mode 100644 src/plugins/vis_types/xy/public/mocks.ts diff --git a/src/plugins/vis_types/xy/public/config/get_config.test.ts b/src/plugins/vis_types/xy/public/config/get_config.test.ts new file mode 100644 index 0000000000000..d046ac17c2b27 --- /dev/null +++ b/src/plugins/vis_types/xy/public/config/get_config.test.ts @@ -0,0 +1,44 @@ +/* + * 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 { getConfig } from './get_config'; +import { visData, visParamsWithTwoYAxes } from '../mocks'; + +// ToDo: add more tests for all the config properties +describe('getConfig', () => { + it('identifies it as a timeChart if the x axis has a date field', () => { + const config = getConfig(visData, visParamsWithTwoYAxes); + expect(config.isTimeChart).toBe(true); + }); + + it('not adds the current time marker if the param is set to false', () => { + const config = getConfig(visData, visParamsWithTwoYAxes); + expect(config.showCurrentTime).toBe(false); + }); + + it('adds the current time marker if the param is set to false', () => { + const newVisParams = { + ...visParamsWithTwoYAxes, + addTimeMarker: true, + }; + const config = getConfig(visData, newVisParams); + expect(config.showCurrentTime).toBe(true); + }); + + it('enables the histogram mode for a date_histogram', () => { + const config = getConfig(visData, visParamsWithTwoYAxes); + expect(config.enableHistogramMode).toBe(true); + }); + + it('assigns the correct formatter per y axis', () => { + const config = getConfig(visData, visParamsWithTwoYAxes); + expect(config.yAxes.length).toBe(2); + expect(config.yAxes[0].ticks?.formatter).toStrictEqual(config.aspects.y[1].formatter); + expect(config.yAxes[1].ticks?.formatter).toStrictEqual(config.aspects.y[0].formatter); + }); +}); diff --git a/src/plugins/vis_types/xy/public/config/get_config.ts b/src/plugins/vis_types/xy/public/config/get_config.ts index 13c9a6c275f8e..d2a3b9ad2a103 100644 --- a/src/plugins/vis_types/xy/public/config/get_config.ts +++ b/src/plugins/vis_types/xy/public/config/get_config.ts @@ -50,10 +50,16 @@ export function getConfig(table: Datatable, params: VisParams): VisConfig { params.dimensions.x?.aggType === BUCKET_TYPES.DATE_HISTOGRAM ); const tooltip = getTooltip(aspects, params); - const yAxes = params.valueAxes.map((a) => - // uses first y aspect in array for formatting axis - getAxis(a, params.grid, aspects.y[0], params.seriesParams) - ); + const yAxes = params.valueAxes.map((a) => { + // find the correct aspect for each value axis + const aspectsIdx = params.seriesParams.findIndex((s) => s.valueAxis === a.id); + return getAxis( + a, + params.grid, + aspects.y[aspectsIdx > -1 ? aspectsIdx : 0], + params.seriesParams + ); + }); const enableHistogramMode = (params.dimensions.x?.aggType === BUCKET_TYPES.DATE_HISTOGRAM || params.dimensions.x?.aggType === BUCKET_TYPES.HISTOGRAM) && diff --git a/src/plugins/vis_types/xy/public/mocks.ts b/src/plugins/vis_types/xy/public/mocks.ts new file mode 100644 index 0000000000000..bb74035485723 --- /dev/null +++ b/src/plugins/vis_types/xy/public/mocks.ts @@ -0,0 +1,223 @@ +/* + * 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 { Datatable } from '../../../expressions/public'; +import type { VisParams } from './types'; + +export const visData = { + type: 'datatable', + columns: [ + { + id: 'col-0-2', + name: 'timestamp per 12 hours', + meta: { + type: 'date', + field: 'timestamp', + index: 'kibana_sample_data_logs', + }, + }, + { + id: 'col-1-3', + name: 'Average memory', + meta: { + type: 'number', + field: 'memory', + index: 'kibana_sample_data_logs', + }, + }, + { + id: 'col-2-1', + name: 'Average bytes', + meta: { + type: 'number', + field: 'bytes', + index: 'kibana_sample_data_logs', + }, + }, + ], + rows: [ + { + 'col-0-2': 1632603600000, + 'col-1-3': 27400, + 'col-2-1': 6079.305555555556, + }, + { + 'col-0-2': 1632646800000, + 'col-1-3': 148270, + 'col-2-1': 6164.056818181818, + }, + { + 'col-0-2': 1632690000000, + 'col-1-3': 235280, + 'col-2-1': 6125.469387755102, + }, + { + 'col-0-2': 1632733200000, + 'col-1-3': 206750, + 'col-2-1': 5362.68306010929, + }, + ], +} as Datatable; + +export const visParamsWithTwoYAxes = { + type: 'histogram', + addLegend: true, + addTooltip: true, + legendPosition: 'right', + addTimeMarker: false, + maxLegendLines: 1, + truncateLegend: true, + categoryAxes: [ + { + type: 'category', + id: 'CategoryAxis-1', + show: true, + position: 'bottom', + title: {}, + scale: { + type: 'linear', + }, + labels: { + filter: true, + show: true, + truncate: 100, + }, + }, + ], + labels: { + type: 'label', + show: false, + }, + thresholdLine: { + type: 'threshold_line', + show: false, + value: 10, + width: 1, + style: 'full', + color: '#E7664C', + }, + valueAxes: [ + { + type: 'value', + name: 'LeftAxis-1', + id: 'ValueAxis-1', + show: true, + position: 'left', + axisType: 'value', + title: { + text: 'my custom title', + }, + scale: { + type: 'linear', + mode: 'normal', + scaleType: 'linear', + }, + labels: { + type: 'label', + filter: false, + rotate: 0, + show: true, + truncate: 100, + }, + }, + { + type: 'value', + name: 'RightAxis-1', + id: 'ValueAxis-2', + show: true, + position: 'right', + title: { + text: 'my custom title', + }, + scale: { + type: 'linear', + mode: 'normal', + }, + labels: { + filter: false, + rotate: 0, + show: true, + truncate: 100, + }, + }, + ], + grid: { + categoryLines: false, + }, + seriesParams: [ + { + type: 'histogram', + data: { + label: 'Average memory', + id: '3', + }, + drawLinesBetweenPoints: true, + interpolate: 'linear', + lineWidth: 2, + mode: 'stacked', + show: true, + showCircles: true, + circlesRadius: 3, + seriesParamType: 'histogram', + valueAxis: 'ValueAxis-2', + }, + { + type: 'line', + data: { + label: 'Average bytes', + id: '1', + }, + drawLinesBetweenPoints: true, + interpolate: 'linear', + lineWidth: 2, + mode: 'stacked', + show: true, + showCircles: true, + circlesRadius: 3, + valueAxis: 'ValueAxis-1', + }, + ], + dimensions: { + x: { + type: 'xy_dimension', + label: 'timestamp per 12 hours', + aggType: 'date_histogram', + accessor: 0, + format: { + id: 'date', + params: { + pattern: 'YYYY-MM-DD HH:mm', + }, + }, + params: { + date: true, + }, + }, + y: [ + { + label: 'Average memory', + aggType: 'avg', + params: {}, + accessor: 1, + format: { + id: 'number', + params: {}, + }, + }, + { + label: 'Average bytes', + aggType: 'avg', + params: {}, + accessor: 2, + format: { + id: 'bytes', + params: {}, + }, + }, + ], + }, +} as unknown as VisParams;