diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.tsx b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.tsx index c3eb659435b2d..dc7e13634d6d6 100644 --- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.tsx +++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/index.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { cloneDeep, get } from 'lodash'; import { EuiSpacer } from '@elastic/eui'; @@ -19,7 +19,6 @@ import { SeriesPanel } from './series_panel'; import { CategoryAxisPanel } from './category_axis_panel'; import { ValueAxesPanel } from './value_axes_panel'; import { - makeSerie, isAxisHorizontal, countNextAxisNumber, getUpdatedAxisName, @@ -27,6 +26,7 @@ import { mapPosition, mapPositionOpposingOpposite, } from './utils'; +import { getSeriesParams } from '../../../../utils/get_series_params'; export type SetParamByIndex =

( axesName: 'valueAxes' | 'seriesParams', @@ -273,40 +273,19 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps) { ); const schemaName = vis.type.schemas.metrics[0].name; - const metrics = useMemo(() => { - return aggs.bySchemaName(schemaName); - }, [schemaName, aggs]); - const firstValueAxesId = stateParams.valueAxes[0].id; useEffect(() => { - const updatedSeries = metrics.map((agg) => { - const params = stateParams.seriesParams.find((param) => param.data.id === agg.id); - const label = agg.makeLabel(); - - // update labels for existing params or create new one - if (params) { - return { - ...params, - data: { - ...params.data, - label, - }, - }; - } else { - const series = makeSerie( - agg.id, - label, - firstValueAxesId, - stateParams.seriesParams[stateParams.seriesParams.length - 1] - ); - return series; - } - }); + const updatedSeries = getSeriesParams( + aggs, + stateParams.seriesParams, + schemaName, + firstValueAxesId + ); - setValue('seriesParams', updatedSeries); + if (updatedSeries) setValue('seriesParams', updatedSeries); updateAxisTitle(updatedSeries); - }, [metrics, firstValueAxesId, setValue, stateParams.seriesParams, updateAxisTitle]); + }, [firstValueAxesId, setValue, stateParams.seriesParams, updateAxisTitle, aggs, schemaName]); return isTabSelected ? ( <> diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/utils.ts b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/utils.ts index a8d53e45bc988..cd6368d961ec4 100644 --- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/utils.ts +++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/utils.ts @@ -10,30 +10,7 @@ import { upperFirst } from 'lodash'; import { Position } from '@elastic/charts'; -import { VisParams, ValueAxis, SeriesParam, ChartMode, InterpolationMode } from '../../../../types'; -import { ChartType } from '../../../../../common'; - -export const makeSerie = ( - id: string, - label: string, - defaultValueAxis: ValueAxis['id'], - lastSerie?: SeriesParam -): SeriesParam => { - const data = { id, label }; - const defaultSerie = { - show: true, - mode: ChartMode.Normal, - type: ChartType.Line, - drawLinesBetweenPoints: true, - showCircles: true, - circlesRadius: 3, - interpolate: InterpolationMode.Linear, - lineWidth: 2, - valueAxis: defaultValueAxis, - data, - }; - return lastSerie ? { ...lastSerie, data } : defaultSerie; -}; +import { VisParams, ValueAxis } from '../../../../types'; export const isAxisHorizontal = (position: Position) => [Position.Top, Position.Bottom].includes(position as any); diff --git a/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts index 7fff29edfab51..de1ccdea1e79b 100644 --- a/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts +++ b/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts @@ -1780,6 +1780,28 @@ export const sampleAreaVis = { }, aggs: { typesRegistry: {}, + bySchemaName: () => [ + { + id: '1', + enabled: true, + type: 'sum', + params: { + field: 'total_quantity', + }, + schema: 'metric', + makeLabel: () => 'Total quantity', + toSerializedFieldFormat: () => ({ + id: 'number', + params: { + parsedUrl: { + origin: 'http://localhost:5801', + pathname: '/app/visualize', + basePath: '', + }, + }, + }), + }, + ], getResponseAggs: () => [ { id: '1', diff --git a/src/plugins/vis_types/xy/public/to_ast.ts b/src/plugins/vis_types/xy/public/to_ast.ts index 5fc130a08ed27..9e2c7554aaf7c 100644 --- a/src/plugins/vis_types/xy/public/to_ast.ts +++ b/src/plugins/vis_types/xy/public/to_ast.ts @@ -33,6 +33,7 @@ import { visName, VisTypeXyExpressionFunctionDefinition } from './expression_fun import { XyVisType } from '../common'; import { getEsaggsFn } from './to_ast_esaggs'; import { TimeRangeBounds } from '../../../data/common'; +import { getSeriesParams } from './utils/get_series_params'; const prepareLabel = (data: Labels) => { const label = buildExpressionFunction('label', { @@ -145,6 +146,17 @@ export const toExpressionAst: VisToExpressionAst = async (vis, params const responseAggs = vis.data.aggs?.getResponseAggs().filter(({ enabled }) => enabled) ?? []; + const schemaName = vis.type.schemas?.metrics[0].name; + const firstValueAxesId = vis.params.valueAxes[0].id; + const updatedSeries = getSeriesParams( + vis.data.aggs, + vis.params.seriesParams, + schemaName, + firstValueAxesId + ); + + const finalSeriesParams = updatedSeries ?? vis.params.seriesParams; + if (dimensions.x) { const xAgg = responseAggs[dimensions.x.accessor] as any; if (xAgg.type.name === BUCKET_TYPES.DATE_HISTOGRAM) { @@ -202,7 +214,7 @@ export const toExpressionAst: VisToExpressionAst = async (vis, params orderBucketsBySum: vis.params.orderBucketsBySum, categoryAxes: vis.params.categoryAxes.map(prepareCategoryAxis), valueAxes: vis.params.valueAxes.map(prepareValueAxis), - seriesParams: vis.params.seriesParams.map(prepareSeriesParam), + seriesParams: finalSeriesParams.map(prepareSeriesParam), labels: prepareLabel(vis.params.labels), thresholdLine: prepareThresholdLine(vis.params.thresholdLine), gridCategoryLines: vis.params.grid.categoryLines, diff --git a/src/plugins/vis_types/xy/public/utils/get_series_params.test.ts b/src/plugins/vis_types/xy/public/utils/get_series_params.test.ts new file mode 100644 index 0000000000000..67b8a1c160d40 --- /dev/null +++ b/src/plugins/vis_types/xy/public/utils/get_series_params.test.ts @@ -0,0 +1,64 @@ +/* + * 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 { AggConfigs } from '../../../../data/public'; +import type { SeriesParam } from '../types'; +import { getSeriesParams } from './get_series_params'; +import { sampleAreaVis } from '../sample_vis.test.mocks'; + +describe('getSeriesParams', () => { + it('returns correct params', () => { + const seriesParams = getSeriesParams( + sampleAreaVis.data.aggs as unknown as AggConfigs, + sampleAreaVis.params.seriesParams as unknown as SeriesParam[], + 'metric', + 'ValueAxis-1' + ); + expect(seriesParams).toStrictEqual([ + { + circlesRadius: 5, + data: { + id: '1', + label: 'Total quantity', + }, + drawLinesBetweenPoints: true, + interpolate: 'linear', + mode: 'stacked', + show: 'true', + showCircles: true, + type: 'area', + valueAxis: 'ValueAxis-1', + }, + ]); + }); + + it('returns default params if no params provided', () => { + const seriesParams = getSeriesParams( + sampleAreaVis.data.aggs as unknown as AggConfigs, + [], + 'metric', + 'ValueAxis-1' + ); + expect(seriesParams).toStrictEqual([ + { + circlesRadius: 3, + data: { + id: '1', + label: 'Total quantity', + }, + drawLinesBetweenPoints: true, + interpolate: 'linear', + lineWidth: 2, + mode: 'normal', + show: true, + showCircles: true, + type: 'line', + valueAxis: 'ValueAxis-1', + }, + ]); + }); +}); diff --git a/src/plugins/vis_types/xy/public/utils/get_series_params.ts b/src/plugins/vis_types/xy/public/utils/get_series_params.ts new file mode 100644 index 0000000000000..987c8df83b01f --- /dev/null +++ b/src/plugins/vis_types/xy/public/utils/get_series_params.ts @@ -0,0 +1,63 @@ +/* + * 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 { ValueAxis, SeriesParam, ChartMode, InterpolationMode } from '../types'; +import { ChartType } from '../../common'; +import type { AggConfigs } from '../../../../data/public'; + +const makeSerie = ( + id: string, + label: string, + defaultValueAxis: ValueAxis['id'], + lastSerie?: SeriesParam +): SeriesParam => { + const data = { id, label }; + const defaultSerie = { + show: true, + mode: ChartMode.Normal, + type: ChartType.Line, + drawLinesBetweenPoints: true, + showCircles: true, + circlesRadius: 3, + interpolate: InterpolationMode.Linear, + lineWidth: 2, + valueAxis: defaultValueAxis, + }; + return { ...defaultSerie, ...lastSerie, data }; +}; +export const getSeriesParams = ( + aggs: AggConfigs | undefined, + seriesParams: SeriesParam[], + schemaName: string, + firstValueAxesId: string +) => { + const metrics = aggs?.bySchemaName(schemaName); + + return metrics?.map((agg) => { + const params = seriesParams.find((param) => param.data.id === agg.id); + const label = agg.makeLabel(); + + // update labels for existing params or create new one + if (params) { + return { + ...params, + data: { + ...params.data, + label, + }, + }; + } else { + const series = makeSerie( + agg.id, + label, + firstValueAxesId, + seriesParams[seriesParams.length - 1] + ); + return series; + } + }); +}; diff --git a/src/plugins/vis_types/xy/public/vis_types/area.ts b/src/plugins/vis_types/xy/public/vis_types/area.ts index 6ba197ceb9424..3ff840f1817e9 100644 --- a/src/plugins/vis_types/xy/public/vis_types/area.ts +++ b/src/plugins/vis_types/xy/public/vis_types/area.ts @@ -78,7 +78,7 @@ export const areaVisTypeDefinition = { truncate: 100, }, title: { - text: defaultCountLabel, + text: '', }, style: {}, }, diff --git a/src/plugins/vis_types/xy/public/vis_types/histogram.ts b/src/plugins/vis_types/xy/public/vis_types/histogram.ts index bd549615fe7fd..dd65d6f31cb80 100644 --- a/src/plugins/vis_types/xy/public/vis_types/histogram.ts +++ b/src/plugins/vis_types/xy/public/vis_types/histogram.ts @@ -80,7 +80,7 @@ export const histogramVisTypeDefinition = { truncate: 100, }, title: { - text: defaultCountLabel, + text: '', }, style: {}, }, diff --git a/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts b/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts index 5bd45fc2eb7a8..c8494024d1d0a 100644 --- a/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts +++ b/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts @@ -81,7 +81,7 @@ export const horizontalBarVisTypeDefinition = { truncate: 100, }, title: { - text: defaultCountLabel, + text: '', }, style: {}, }, diff --git a/src/plugins/vis_types/xy/public/vis_types/line.ts b/src/plugins/vis_types/xy/public/vis_types/line.ts index 747de1679c7c5..08e17f7e97d46 100644 --- a/src/plugins/vis_types/xy/public/vis_types/line.ts +++ b/src/plugins/vis_types/xy/public/vis_types/line.ts @@ -78,7 +78,7 @@ export const lineVisTypeDefinition = { truncate: 100, }, title: { - text: defaultCountLabel, + text: '', }, style: {}, },