match visualization type to first series type when available (#119377)

elastic · Nov 30, 2021 · 57134d4 · 57134d4
1 parent 13e0310
commit 57134d4
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 3 deletions.
diff --git a/src/plugins/vis_types/xy/public/vis_types/area.ts b/src/plugins/vis_types/xy/public/vis_types/area.ts
@@ -26,6 +26,7 @@ import {
 import { toExpressionAst } from '../to_ast';
 import { ChartType } from '../../common';
 import { optionTabs } from '../editor/common_config';
+import { getVisTypeFromParams } from './get_vis_type_from_params';
 
 export const areaVisTypeDefinition = {
   name: 'area',
@@ -36,6 +37,7 @@ export const areaVisTypeDefinition = {
   }),
   toExpressionAst,
   getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  updateVisTypeOnParamsChange: getVisTypeFromParams,
   visConfig: {
     defaults: {
       type: ChartType.Area,

diff --git a/src/plugins/vis_types/xy/public/vis_types/get_vis_type_from_params.test.ts b/src/plugins/vis_types/xy/public/vis_types/get_vis_type_from_params.test.ts
@@ -0,0 +1,105 @@
+/*
+ * 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 { VisParams } from 'src/plugins/visualizations/common';
+import { getVisTypeFromParams } from './get_vis_type_from_params';
+
+describe('extracting visualization type from vis params', () => {
+  [
+    {
+      message: 'return undefined when no params',
+      params: undefined,
+      expectedType: undefined,
+    },
+    {
+      message: 'extract a line type',
+      params: {
+        seriesParams: [
+          {
+            type: 'line',
+          },
+        ],
+      } as VisParams,
+      expectedType: 'line',
+    },
+    {
+      message: 'extract an area type',
+      params: {
+        seriesParams: [
+          {
+            type: 'area',
+          },
+        ],
+      } as VisParams,
+      expectedType: 'area',
+    },
+    {
+      message: 'extract a histogram type when axes not defined',
+      params: {
+        seriesParams: [
+          {
+            type: 'histogram',
+          },
+        ],
+      } as VisParams,
+      expectedType: 'histogram',
+    },
+    {
+      message: 'extract a histogram type when first axis on bottom',
+      params: {
+        seriesParams: [
+          {
+            type: 'histogram',
+          },
+        ],
+        categoryAxes: [{ position: 'bottom' }],
+      } as VisParams,
+      expectedType: 'histogram',
+    },
+    {
+      message: 'extract a histogram type when first axis on top',
+      params: {
+        seriesParams: [
+          {
+            type: 'histogram',
+          },
+        ],
+        categoryAxes: [{ position: 'top' }],
+      } as VisParams,
+      expectedType: 'histogram',
+    },
+    {
+      message: 'extract a horizontal_bar type when first axis to left',
+      params: {
+        seriesParams: [
+          {
+            type: 'histogram',
+          },
+        ],
+        categoryAxes: [{ position: 'left' }],
+      } as VisParams,
+      expectedType: 'horizontal_bar',
+    },
+    {
+      message: 'extract a horizontal_bar type when first axis to right',
+      params: {
+        seriesParams: [
+          {
+            type: 'histogram',
+          },
+        ],
+        categoryAxes: [{ position: 'right' }],
+      } as VisParams,
+      expectedType: 'horizontal_bar',
+    },
+  ].forEach(({ message, params, expectedType }) =>
+    it(message, () => {
+      expect(getVisTypeFromParams(params)).toBe(expectedType);
+    })
+  );
+});
diff --git a/src/plugins/vis_types/xy/public/vis_types/get_vis_type_from_params.ts b/src/plugins/vis_types/xy/public/vis_types/get_vis_type_from_params.ts
@@ -0,0 +1,17 @@
+/*
+ * 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 { VisParams } from 'src/plugins/visualizations/common';
+
+export const getVisTypeFromParams = (params?: VisParams) => {
+  let type = params?.seriesParams?.[0]?.type;
+  if (type === 'histogram' && ['left', 'right'].includes(params?.categoryAxes?.[0]?.position)) {
+    type = 'horizontal_bar';
+  }
+  return type;
+};
diff --git a/src/plugins/vis_types/xy/public/vis_types/histogram.ts b/src/plugins/vis_types/xy/public/vis_types/histogram.ts
@@ -26,6 +26,7 @@ import { toExpressionAst } from '../to_ast';
 import { ChartType } from '../../common';
 import { optionTabs } from '../editor/common_config';
 import { defaultCountLabel, LabelRotation } from '../../../../charts/public';
+import { getVisTypeFromParams } from './get_vis_type_from_params';
 
 export const histogramVisTypeDefinition = {
   name: 'histogram',
@@ -38,6 +39,7 @@ export const histogramVisTypeDefinition = {
   }),
   toExpressionAst,
   getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  updateVisTypeOnParamsChange: getVisTypeFromParams,
   visConfig: {
     defaults: {
       type: ChartType.Histogram,

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
@@ -26,6 +26,7 @@ import { toExpressionAst } from '../to_ast';
 import { ChartType } from '../../common';
 import { optionTabs } from '../editor/common_config';
 import { defaultCountLabel, LabelRotation } from '../../../../charts/public';
+import { getVisTypeFromParams } from './get_vis_type_from_params';
 
 export const horizontalBarVisTypeDefinition = {
   name: 'horizontal_bar',
@@ -38,6 +39,7 @@ export const horizontalBarVisTypeDefinition = {
   }),
   toExpressionAst,
   getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  updateVisTypeOnParamsChange: getVisTypeFromParams,
   visConfig: {
     defaults: {
       type: ChartType.Histogram,

diff --git a/src/plugins/vis_types/xy/public/vis_types/line.ts b/src/plugins/vis_types/xy/public/vis_types/line.ts
@@ -26,6 +26,7 @@ import {
 import { toExpressionAst } from '../to_ast';
 import { ChartType } from '../../common';
 import { optionTabs } from '../editor/common_config';
+import { getVisTypeFromParams } from './get_vis_type_from_params';
 
 export const lineVisTypeDefinition = {
   name: 'line',
@@ -36,6 +37,7 @@ export const lineVisTypeDefinition = {
   }),
   toExpressionAst,
   getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  updateVisTypeOnParamsChange: getVisTypeFromParams,
   visConfig: {
     defaults: {
       type: ChartType.Line,

diff --git a/src/plugins/visualizations/public/utils/saved_visualize_utils.test.ts b/src/plugins/visualizations/public/utils/saved_visualize_utils.test.ts
@@ -43,10 +43,10 @@ jest.mock('../../../../plugins/data/public', () => ({
 }));
 
 const mockInjectReferences = jest.fn();
-const mockExtractReferences = jest.fn(() => ({ references: [], attributes: {} }));
+const mockExtractReferences = jest.fn((arg) => arg);
 jest.mock('./saved_visualization_references', () => ({
   injectReferences: jest.fn((...args) => mockInjectReferences(...args)),
-  extractReferences: jest.fn(() => mockExtractReferences()),
+  extractReferences: jest.fn((arg) => mockExtractReferences(arg)),
 }));
 
 let isTitleDuplicateConfirmed = true;
@@ -184,6 +184,7 @@ describe('saved_visualize_utils', () => {
       vis = {
         visState: {
           type: 'area',
+          params: {},
         },
         title: 'test',
         uiStateJSON: '{}',

diff --git a/src/plugins/visualizations/public/vis.ts b/src/plugins/visualizations/public/vis.ts
@@ -113,7 +113,19 @@ export class Vis<TVisParams = VisParams> {
     return defaults({}, cloneDeep(params ?? {}), cloneDeep(this.type.visConfig?.defaults ?? {}));
   }
 
-  async setState(state: PartialVisState) {
+  async setState(inState: PartialVisState) {
+    let state = inState;
+
+    const { updateVisTypeOnParamsChange } = this.type;
+    const newType = updateVisTypeOnParamsChange && updateVisTypeOnParamsChange(state.params);
+    if (newType) {
+      state = {
+        ...inState,
+        type: newType,
+        params: { ...inState.params, type: newType },
+      };
+    }
+
     let typeChanged = false;
     if (state.type && this.type.name !== state.type) {
       // @ts-ignore

diff --git a/src/plugins/visualizations/public/vis_types/base_vis_type.ts b/src/plugins/visualizations/public/vis_types/base_vis_type.ts
@@ -43,6 +43,7 @@ export class BaseVisType<TVisParams = VisParams> {
   public readonly inspectorAdapters;
   public readonly toExpressionAst;
   public readonly getInfoMessage;
+  public readonly updateVisTypeOnParamsChange;
   public readonly schemas;
 
   constructor(opts: VisTypeDefinition<TVisParams>) {
@@ -71,6 +72,7 @@ export class BaseVisType<TVisParams = VisParams> {
     this.inspectorAdapters = opts.inspectorAdapters;
     this.toExpressionAst = opts.toExpressionAst;
     this.getInfoMessage = opts.getInfoMessage;
+    this.updateVisTypeOnParamsChange = opts.updateVisTypeOnParamsChange;
 
     this.schemas = new Schemas(this.editorConfig?.schemas ?? []);
   }

diff --git a/src/plugins/visualizations/public/vis_types/types.ts b/src/plugins/visualizations/public/vis_types/types.ts
@@ -147,6 +147,12 @@ export interface VisTypeDefinition<TVisParams> {
    */
   readonly toExpressionAst: VisToExpressionAst<TVisParams>;
 
+  /**
+   * Should be defined when the visualization type should change
+   * when certain params are changed
+   */
+  readonly updateVisTypeOnParamsChange?: (params: VisParams) => string | undefined;
+
   readonly setup?: (vis: Vis<TVisParams>) => Promise<Vis<TVisParams>>;
   hidden?: boolean;