[XY] xyVis and layeredXyVis. (#128255)

* Added extended layers expressions.

* Added support of tables at layers.

* Added annotations to layeredXyVIs.

* Refactored the implementation to be reusable.

* Fixed undefined layers.

* Fixed empty arrays problems.

* Fixed input translations and removed not used arguments.

* Fixed missing required args error, and added required to arguments.

* Simplified expression configuration.

* Added strict to all the expressions.

* Moved dataLayer to the separate component.

* Refactored dataLayers helpers and xy_chart.

* fillOpacity usage validation is added.

* Fixed valueLabels argument options. Removed not used. Added validation for usage.

* Added validation to the layeredXyVis.

* Fixed extent validation.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>

x-pack/plugins/lens/server/embeddable/make_lens_embeddable_factory.ts

@@ -14,6 +14,7 @@ import {
 import { DOC_TYPE } from '../../common';
 import {
   commonEnhanceTableRowHeight,
+  commonFixValueLabelsInXY,
   commonLockOldMetricVisSettings,
   commonMakeReversePaletteAsCustom,
   commonRemoveTimezoneDateHistogramParam,
@@ -34,7 +35,9 @@ import {
   LensDocShapePre712,
   VisState716,
   VisState810,
+  VisState820,
   VisStatePre715,
+  VisStatePre830,
 } from '../migrations/types';
 import { extract, inject } from '../../common/embeddable_factory';
 
@@ -95,18 +98,26 @@ export const makeLensEmbeddableFactory =
               } as unknown as SerializableRecord;
             },
             '8.2.0': (state) => {
-              const lensState = state as unknown as { attributes: LensDocShape810<VisState810> };
+              const lensState = state as unknown as {
+                attributes: LensDocShape810<VisState810>;
+              };
               let migratedLensState = commonSetLastValueShowArrayValues(lensState.attributes);
-              migratedLensState = commonEnhanceTableRowHeight(migratedLensState);
+              migratedLensState = commonEnhanceTableRowHeight(
+                migratedLensState as LensDocShape810<VisState810>
+              );
               migratedLensState = commonSetIncludeEmptyRowsDateHistogram(migratedLensState);
+
               return {
                 ...lensState,
                 attributes: migratedLensState,
               } as unknown as SerializableRecord;
             },
             '8.3.0': (state) => {
-              const lensState = state as unknown as { attributes: LensDocShape810<VisState810> };
-              const migratedLensState = commonLockOldMetricVisSettings(lensState.attributes);
+              const lensState = state as unknown as { attributes: LensDocShape810<VisState820> };
+              let migratedLensState = commonLockOldMetricVisSettings(lensState.attributes);
+              migratedLensState = commonFixValueLabelsInXY(
+                migratedLensState as LensDocShape810<VisStatePre830>
+              );
               return {
                 ...lensState,
                 attributes: migratedLensState,

x-pack/plugins/lens/server/migrations/common_migrations.ts

@@ -25,8 +25,11 @@ import {
   VisState716,
   VisState810,
   VisState820,
+  VisState830,
   CustomVisualizationMigrations,
   LensDocShape810,
+  LensDocShape830,
+  VisStatePre830,
 } from './types';
 import { DOCUMENT_FIELD_NAME, layerTypes, MetricState } from '../../common';
 import { LensDocShape } from './saved_object_migrations';
@@ -194,9 +197,7 @@ export const commonRenameFilterReferences = (attributes: LensDocShape715): LensD
   return newAttributes as LensDocShape810;
 };
 
-export const commonSetLastValueShowArrayValues = (
-  attributes: LensDocShape810
-): LensDocShape810<VisState820> => {
+export const commonSetLastValueShowArrayValues = (attributes: LensDocShape810): LensDocShape810 => {
   const newAttributes = cloneDeep(attributes);
   for (const layer of Object.values(newAttributes.state.datasourceStates.indexpattern.layers)) {
     for (const column of Object.values(layer.columns)) {
@@ -215,19 +216,19 @@ export const commonEnhanceTableRowHeight = (
   attributes: LensDocShape810<VisState810>
 ): LensDocShape810<VisState820> => {
   if (attributes.visualizationType !== 'lnsDatatable') {
-    return attributes;
+    return attributes as LensDocShape810<VisState820>;
   }
   const visState810 = attributes.state.visualization as VisState810;
   const newAttributes = cloneDeep(attributes);
   const vizState = newAttributes.state.visualization as VisState820;
   vizState.rowHeight = visState810.fitRowToContent ? 'auto' : 'single';
   vizState.rowHeightLines = visState810.fitRowToContent ? 2 : 1;
-  return newAttributes;
+  return newAttributes as LensDocShape810<VisState820>;
 };
 
 export const commonSetIncludeEmptyRowsDateHistogram = (
   attributes: LensDocShape810
-): LensDocShape810<VisState820> => {
+): LensDocShape810 => {
   const newAttributes = cloneDeep(attributes);
   for (const layer of Object.values(newAttributes.state.datasourceStates.indexpattern.layers)) {
     for (const column of Object.values(layer.columns)) {
@@ -241,17 +242,17 @@ export const commonSetIncludeEmptyRowsDateHistogram = (
 
 export const commonLockOldMetricVisSettings = (
   attributes: LensDocShape810
-): LensDocShape810<VisState820> => {
+): LensDocShape830<VisState830> => {
   const newAttributes = cloneDeep(attributes);
   if (newAttributes.visualizationType !== 'lnsMetric') {
-    return newAttributes;
+    return newAttributes as LensDocShape830<VisState830>;
   }
 
   const visState = newAttributes.state.visualization as MetricState;
   visState.textAlign = visState.textAlign ?? 'center';
   visState.titlePosition = visState.titlePosition ?? 'bottom';
   visState.size = visState.size ?? 'xl';
-  return newAttributes;
+  return newAttributes as LensDocShape830<VisState830>;
 };
 
 const getApplyCustomVisualizationMigrationToLens = (id: string, migration: MigrateFunction) => {
@@ -343,3 +344,25 @@ export const fixLensTopValuesCustomFormatting = (attributes: LensDocShape810): L
     );
   return newAttributes as LensDocShape810;
 };
+
+export const commonFixValueLabelsInXY = (
+  attributes: LensDocShape830<VisStatePre830>
+): LensDocShape830<VisState830> => {
+  if (attributes.visualizationType !== 'lnsXY') {
+    return attributes as LensDocShape830<VisState830>;
+  }
+
+  const newAttributes: LensDocShape830<VisStatePre830> = cloneDeep(attributes);
+  const { visualization } = newAttributes.state;
+  const { valueLabels } = visualization;
+  return {
+    ...newAttributes,
+    state: {
+      ...newAttributes.state,
+      visualization: {
+        ...visualization,
+        valueLabels: valueLabels && valueLabels !== 'hide' ? 'show' : valueLabels,
+      },
+    },
+  };
+};

x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts

@@ -21,6 +21,7 @@ import {
   VisStatePre715,
   VisState810,
   VisState820,
+  VisState830,
 } from './types';
 import { layerTypes, MetricState } from '../../common';
 import { Filter } from '@kbn/es-query';
@@ -2113,4 +2114,52 @@ describe('Lens migrations', () => {
       expect(visState.size).toBe('s');
     });
   });
+
+  describe('8.3.0 valueLabels in XY', () => {
+    const context = { log: { warning: () => {} } } as unknown as SavedObjectMigrationContext;
+    const example = {
+      type: 'lens',
+      id: 'mocked-saved-object-id',
+      attributes: {
+        savedObjectId: '1',
+        title: 'MyRenamedOps',
+        description: '',
+        visualizationType: 'lnsXY',
+        state: {
+          visualization: {
+            valueLabels: 'inside',
+          },
+        },
+      },
+    } as unknown as SavedObjectUnsanitizedDoc<LensDocShape810>;
+
+    it('migrates valueLabels from `inside` to `show`', () => {
+      const result = migrations['8.3.0'](example, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      const visState = result.attributes.state.visualization as VisState830;
+      expect(visState.valueLabels).toBe('show');
+    });
+
+    it("doesn't migrate valueLabels with `hide` value", () => {
+      const result = migrations['8.3.0'](
+        {
+          ...example,
+          attributes: {
+            ...example.attributes,
+            state: {
+              ...example.attributes.state,
+              visualization: {
+                ...(example.attributes.state.visualization as Record<string, unknown>),
+                valueLabels: 'hide',
+              },
+            },
+          },
+        },
+        context
+      ) as ReturnType<SavedObjectMigrationFn<LensDocShape, LensDocShape>>;
+      const visState = result.attributes.state.visualization as VisState830;
+      expect(visState.valueLabels).toBe('hide');
+    });
+  });
 });

x-pack/plugins/lens/server/migrations/saved_object_migrations.ts

@@ -28,6 +28,11 @@ import {
   VisState716,
   CustomVisualizationMigrations,
   LensDocShape810,
+  LensDocShape830,
+  XYVisualizationStatePre830,
+  XYVisualizationState830,
+  VisState810,
+  VisState820,
 } from './types';
 import {
   commonRenameOperationsForFormula,
@@ -42,6 +47,7 @@ import {
   commonSetLastValueShowArrayValues,
   commonEnhanceTableRowHeight,
   commonSetIncludeEmptyRowsDateHistogram,
+  commonFixValueLabelsInXY,
   commonLockOldMetricVisSettings,
 } from './common_migrations';
 
@@ -473,7 +479,10 @@ const setLastValueShowArrayValues: SavedObjectMigrationFn<LensDocShape810, LensD
   return { ...doc, attributes: commonSetLastValueShowArrayValues(doc.attributes) };
 };
 
-const enhanceTableRowHeight: SavedObjectMigrationFn<LensDocShape810, LensDocShape810> = (doc) => {
+const enhanceTableRowHeight: SavedObjectMigrationFn<
+  LensDocShape810<VisState810>,
+  LensDocShape810<VisState820>
+> = (doc) => {
   const newDoc = cloneDeep(doc);
   return { ...newDoc, attributes: commonEnhanceTableRowHeight(newDoc.attributes) };
 };
@@ -484,6 +493,14 @@ const setIncludeEmptyRowsDateHistogram: SavedObjectMigrationFn<LensDocShape810,
   return { ...doc, attributes: commonSetIncludeEmptyRowsDateHistogram(doc.attributes) };
 };
 
+const fixValueLabelsInXY: SavedObjectMigrationFn<
+  LensDocShape830<XYVisualizationStatePre830>,
+  LensDocShape830<XYVisualizationState830 | unknown>
+> = (doc) => {
+  const newDoc = cloneDeep(doc);
+  return { ...newDoc, attributes: commonFixValueLabelsInXY(newDoc.attributes) };
+};
+
 const lockOldMetricVisSettings: SavedObjectMigrationFn<LensDocShape810, LensDocShape810> = (
   doc
 ) => ({ ...doc, attributes: commonLockOldMetricVisSettings(doc.attributes) });
@@ -507,7 +524,7 @@ const lensMigrations: SavedObjectMigrationMap = {
     setIncludeEmptyRowsDateHistogram,
     enhanceTableRowHeight
   ),
-  '8.3.0': lockOldMetricVisSettings,
+  '8.3.0': flow(lockOldMetricVisSettings, fixValueLabelsInXY),
 };
 
 export const getAllMigrations = (

x-pack/plugins/lens/server/migrations/types.ts

@@ -8,7 +8,7 @@
 import type { PaletteOutput, CustomPaletteParams } from '@kbn/coloring';
 import type { Query, Filter } from '@kbn/es-query';
 import type { MigrateFunctionsObject } from '@kbn/kibana-utils-plugin/common';
-import type { LayerType, PersistableFilter } from '../../common';
+import type { LayerType, PersistableFilter, ValueLabelConfig } from '../../common';
 
 export type CustomVisualizationMigrations = Record<string, () => MigrateFunctionsObject>;
 
@@ -202,7 +202,7 @@ export type LensDocShape810<VisualizationState = unknown> = Omit<
   'filters' | 'state'
 > & {
   filters: Filter[];
-  state: Omit<LensDocShape715['state'], 'datasourceStates'> & {
+  state: Omit<LensDocShape715<VisualizationState>['state'], 'datasourceStates'> & {
     datasourceStates: {
       indexpattern: Omit<LensDocShape715['state']['datasourceStates']['indexpattern'], 'layers'> & {
         layers: Record<
@@ -256,3 +256,16 @@ export interface VisState820 {
   rowHeight: 'auto' | 'single' | 'custom';
   rowHeightLines: number;
 }
+
+export type LensDocShape830<VisualizationState = unknown> = LensDocShape810<VisualizationState>;
+
+export interface XYVisualizationStatePre830 extends VisState820 {
+  valueLabels: 'hide' | 'inside' | 'outside';
+}
+
+export interface XYVisualizationState830 extends VisState820 {
+  valueLabels: ValueLabelConfig;
+}
+
+export type VisStatePre830 = XYVisualizationStatePre830;
+export type VisState830 = XYVisualizationState830;