Skip to content

Commit

Permalink
[TSVB] Hides ticks on the y axis for layers with the same format and …
Browse files Browse the repository at this point in the history 
…different template (#123598) (#125515)

* [TSVB] Hides ticks on the y axis for layers with the same format and different template

* fix PR comment

* fix JEST

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 61ef26d)

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@stratoula @alexwizp @kibanamachine
3 people authored Feb 16, 2022
1 parent 226be06 commit f1a4f21
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 40 deletions.
19 changes: 11 additions & 8 deletions ...timeseries/public/application/components/lib/check_if_series_have_same_formatters.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap)', () => {
expect(result).toBe(true);
});

it('should return false for the different value_template series formatters', () => {
it('should return true for the different value_template series formatters', () => {
const seriesModel = [
{
formatter: DATA_FORMATTERS.PERCENT,
Expand All @@ -39,13 +39,13 @@ describe('checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap)', () => {
] as Series[];
const result = checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap);

expect(result).toBe(false);
expect(result).toBe(true);
});

it('should return true for the same field formatters', () => {
const seriesModel = [
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ field: 'someField' }] },
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ field: 'someField' }] },
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ type: 'avg', field: 'someField' }] },
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ type: 'avg', field: 'someField' }] },
] as Series[];
const result = checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap);

Expand All @@ -54,11 +54,11 @@ describe('checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap)', () => {

it('should return false for the different field formatters', () => {
const seriesModel = [
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ field: 'someField' }] },
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ type: 'avg', field: 'someField' }] },
{
formatter: DATA_FORMATTERS.DEFAULT,

metrics: [{ field: 'anotherField' }],
metrics: [{ id: 'avg', field: 'anotherField' }],
},
] as Series[];
const result = checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap);
Expand All @@ -71,9 +71,12 @@ describe('checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap)', () => {
{
formatter: DATA_FORMATTERS.DEFAULT,

metrics: [{ field: 'someField' }, { field: 'field' }],
metrics: [
{ type: 'avg', field: 'someField' },
{ type: 'avg', field: 'field' },
],
},
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ field: 'someField' }] },
{ formatter: DATA_FORMATTERS.DEFAULT, metrics: [{ type: 'avg', field: 'someField' }] },
] as Series[];
const result = checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap);

Expand Down
39 changes: 24 additions & 15 deletions ...ypes/timeseries/public/application/components/lib/check_if_series_have_same_formatters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,37 @@
* Side Public License, v 1.
*/

import { last, isEqual } from 'lodash';
import { DATA_FORMATTERS } from '../../../../common/enums';
import { aggs } from '../../../../common/agg_utils';
import type { Series } from '../../../../common/types';
import type { FieldFormatMap } from '../../../../../../data/common';

export const checkIfSeriesHaveSameFormatters = (
seriesModel: Series[],
fieldFormatMap?: FieldFormatMap
) => {
const allSeriesHaveDefaultFormatting = seriesModel.every(
(seriesGroup) => seriesGroup.formatter === DATA_FORMATTERS.DEFAULT
);
const uniqFormatters = new Set();

return allSeriesHaveDefaultFormatting && fieldFormatMap
? seriesModel
.map(({ metrics }) => fieldFormatMap[last(metrics)?.field ?? ''])
.every((fieldFormat, index, [firstSeriesFieldFormat]) =>
isEqual(fieldFormat, firstSeriesFieldFormat)
)
: seriesModel.every(
(series) =>
series.formatter === seriesModel[0].formatter &&
series.value_template === seriesModel[0].value_template
);
seriesModel.forEach((seriesGroup) => {
if (seriesGroup.formatter === DATA_FORMATTERS.DEFAULT) {
const activeMetric = seriesGroup.metrics[seriesGroup.metrics.length - 1];
const aggMeta = aggs.find((agg) => agg.id === activeMetric.type);

if (
activeMetric.field &&
aggMeta?.meta.isFieldRequired &&
fieldFormatMap?.[activeMetric.field]
) {
return uniqFormatters.add(JSON.stringify(fieldFormatMap[activeMetric.field]));
}
}
uniqFormatters.add(
JSON.stringify({
// requirement: in the case of using TSVB formatters, we do not need to check the value_template, just formatter!
formatter: seriesGroup.formatter,
})
);
});

return uniqFormatters.size === 1;
};
2 changes: 1 addition & 1 deletion src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ class TimeseriesVisualization extends Component {
} else if (!mainDomainAdded) {
const tickFormatter = checkIfSeriesHaveSameFormatters(seriesModel, fieldFormatMap)
? seriesGroupTickFormatter
: (val) => val;
: createTickFormatter(undefined, undefined, getConfig);

TimeseriesVisualization.addYAxis(yAxis, {
tickFormatter,
Expand Down
20 changes: 4 additions & 16 deletions ...ugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ describe('TimeseriesVisualization', () => {

const yAxisFormattedValue = timeSeriesProps.yAxis[0].tickFormatter(value);

expect(yAxisFormattedValue).toBe(value);
expect(yAxisFormattedValue).toBe(`${value}`);
});

test('should return the same stringified number from yAxis formatter for byte and percent series', () => {
Expand All @@ -119,18 +119,6 @@ describe('TimeseriesVisualization', () => {
expect(yAxis[0].tickFormatter(value)).toBe('500B');
});

test('should return simple number from yAxis formatter and different values from the same byte formatters, but with different value templates', () => {
const timeSeriesProps = setupTimeSeriesProps(
['byte', 'byte'],
['{{value}}', '{{value}} value']
);
const { series, yAxis } = timeSeriesProps;

expect(series[0].tickFormat(value)).toBe('500B');
expect(series[1].tickFormat(value)).toBe('500B value');
expect(yAxis[0].tickFormatter(value)).toBe(value);
});

test('should return percent formatted value from yAxis formatter and three percent formatted series with the same value templates', () => {
const timeSeriesProps = setupTimeSeriesProps(['percent', 'percent', 'percent']);

Expand All @@ -150,7 +138,7 @@ describe('TimeseriesVisualization', () => {

expect(series[0].tickFormat(value)).toBe('500 template');
expect(series[1].tickFormat(value)).toBe('500B template');
expect(yAxis[0].tickFormatter(value)).toBe(value);
expect(yAxis[0].tickFormatter(value)).toBe(`${value}`);
});

test('should return field formatted value for yAxis and single series with default formatter', () => {
Expand Down Expand Up @@ -178,7 +166,7 @@ describe('TimeseriesVisualization', () => {
expect(series[1].tickFormat(value)).toBe('500 years');
expect(series[2].tickFormat(value)).toBe('42 years');
expect(series[3].tickFormat(value)).toBe('$500');
expect(yAxis[0].tickFormatter(value)).toBe(value);
expect(yAxis[0].tickFormatter(value)).toBe(`${value}`);
});

test('should return simple number from yAxis formatter and correctly formatted series values', () => {
Expand All @@ -189,7 +177,7 @@ describe('TimeseriesVisualization', () => {
expect(series[1].tickFormat(value)).toBe('500B');
expect(series[2].tickFormat(value)).toBe('50000%');
expect(series[3].tickFormat(value)).toBe('$500');
expect(yAxis[0].tickFormatter(value)).toBe(value);
expect(yAxis[0].tickFormatter(value)).toBe(`${value}`);
});
});
});

0 comments on commit f1a4f21

Please sign in to comment.