[XY Chart] Fix "No data to display" error when using IP range aggrega…

…tion to split series (#93024)

* Visualize: Can't use ip range to split series in xy chart

* Refactor accessors.tsx

* Revert "Refactor accessors.tsx"

This reverts commit f2b088e.

* Add accessors.test to cover getComplexAccessor function

src/plugins/vis_type_xy/public/utils/accessors.test.ts

@@ -0,0 +1,101 @@
+/*
+ * 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 { COMPLEX_SPLIT_ACCESSOR, getComplexAccessor } from './accessors';
+import { BUCKET_TYPES } from '../../../data/common';
+import { AccessorFn, Datum } from '@elastic/charts';
+
+describe('XY chart datum accessors', () => {
+ const aspectBase = {
+ accessor: 'col-0-2',
+ formatter: (value: Datum) => value,
+ aggId: '',
+ title: '',
+ params: {},
+ };
+
+ it('should return complex accessor for IP range aggregation', () => {
+ const aspect = {
+ aggType: BUCKET_TYPES.IP_RANGE,
+ ...aspectBase,
+ };
+ const accessor = getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(aspect);
+ const datum = {
+ 'col-0-2': { type: 'range', from: '0.0.0.0', to: '127.255.255.255' },
+ };
+
+ expect(typeof accessor).toBe('function');
+ expect((accessor as AccessorFn)(datum)).toStrictEqual({
+ type: 'range',
+ from: '0.0.0.0',
+ to: '127.255.255.255',
+ });
+ });
+
+ it('should return complex accessor for date range aggregation', () => {
+ const aspect = {
+ aggType: BUCKET_TYPES.DATE_RANGE,
+ ...aspectBase,
+ };
+ const accessor = getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(aspect);
+ const datum = {
+ 'col-0-2': { from: '1613941200000', to: '1614685113537' },
+ };
+
+ expect(typeof accessor).toBe('function');
+ expect((accessor as AccessorFn)(datum)).toStrictEqual({
+ from: '1613941200000',
+ to: '1614685113537',
+ });
+ });
+
+ it('should return complex accessor when isComplex option set to true', () => {
+ const aspect = {
+ aggType: BUCKET_TYPES.TERMS,
+ ...aspectBase,
+ };
+ const accessor = getComplexAccessor(COMPLEX_SPLIT_ACCESSOR, true)(aspect);
+
+ expect(typeof accessor).toBe('function');
+ expect((accessor as AccessorFn)({ 'col-0-2': 'some value' })).toBe('some value');
+ });
+
+ it('should return simple string accessor for not range (date histogram) aggregation', () => {
+ const aspect = {
+ aggType: BUCKET_TYPES.DATE_HISTOGRAM,
+ ...aspectBase,
+ };
+ const accessor = getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(aspect);
+
+ expect(typeof accessor).toBe('string');
+ expect(accessor).toBe('col-0-2');
+ });
+
+ it('should return simple string accessor when aspect has no formatter', () => {
+ const aspect = {
+ aggType: BUCKET_TYPES.RANGE,
+ ...aspectBase,
+ formatter: undefined,
+ };
+ const accessor = getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(aspect);
+
+ expect(typeof accessor).toBe('string');
+ expect(accessor).toBe('col-0-2');
+ });
+
+ it('should return undefined when aspect has no accessor', () => {
+ const aspect = {
+ aggType: BUCKET_TYPES.RANGE,
+ ...aspectBase,
+ accessor: null,
+ };
+ const accessor = getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(aspect);
+
+ expect(accessor).toBeUndefined();
+ });
+});

src/plugins/vis_type_xy/public/utils/accessors.tsx

@@ -27,7 +27,7 @@ const getFieldName = (fieldName: string, index?: number) => {
 };
 
 export const isRangeAggType = (type: string | null) =>
- type === BUCKET_TYPES.DATE_RANGE || type === BUCKET_TYPES.RANGE;
+ type === BUCKET_TYPES.DATE_RANGE || type === BUCKET_TYPES.RANGE || type === BUCKET_TYPES.IP_RANGE;
 
 /**
  * Returns accessor function for complex accessor types