[8.7] [Lens] Fix reference line label rendering (#151162) (#151259)

# Backport This will backport the following commits from `main` to `8.7`: - [[Lens] Fix reference line label rendering (#151162)](#151162)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Marco Liberati <[email protected]>
elastic · Feb 15, 2023 · d4d43e8 · d4d43e8
1 parent 360bc05
commit d4d43e8
Show file tree

Hide file tree

Showing 9 changed files with 174 additions and 33 deletions.
diff --git a/...lugins/chart_expressions/expression_xy/common/expression_functions/reference_line.test.ts b/...lugins/chart_expressions/expression_xy/common/expression_functions/reference_line.test.ts
@@ -16,6 +16,7 @@ describe('referenceLine', () => {
       value: 100,
       fill: 'above',
       position: 'bottom',
+      forAccessor: '',
     };
 
     const result = referenceLineFunction.fn(null, args, createMockExecutionContext());
@@ -47,6 +48,7 @@ describe('referenceLine', () => {
       color: '#fff',
       fill: 'below',
       textVisibility: true,
+      forAccessor: '',
     };
 
     const result = referenceLineFunction.fn(null, args, createMockExecutionContext());
@@ -71,6 +73,7 @@ describe('referenceLine', () => {
       value: 100,
       fill: 'none',
       position: 'bottom',
+      forAccessor: '',
     };
 
     const result = referenceLineFunction.fn(null, args, createMockExecutionContext());
@@ -96,6 +99,7 @@ describe('referenceLine', () => {
       textVisibility: true,
       fill: 'none',
       position: 'bottom',
+      forAccessor: '',
     };
 
     const result = referenceLineFunction.fn(null, args, createMockExecutionContext());
@@ -123,6 +127,7 @@ describe('referenceLine', () => {
         textVisibility,
         fill: 'none',
         position: 'bottom',
+        forAccessor: '',
       };
 
       const result = referenceLineFunction.fn(null, args, createMockExecutionContext());

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/reference_line.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/reference_line.ts
@@ -105,6 +105,11 @@ export const referenceLineFunction: ReferenceLineFn = {
       default: FillStyles.NONE,
       strict: true,
     },
+    forAccessor: {
+      types: ['string'],
+      help: '',
+      default: '',
+    },
   },
   fn(table, args) {
     const textVisibility =

diff --git a/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts
@@ -329,8 +329,7 @@ export type ExtendedAnnotationLayerConfigResult = ExtendedAnnotationLayerArgs &
   layerType: typeof LayerTypes.ANNOTATIONS;
 };
 
-export interface ReferenceLineArgs
-  extends Omit<ReferenceLineDecorationConfig, 'forAccessor' | 'fill'> {
+export interface ReferenceLineArgs extends Omit<ReferenceLineDecorationConfig, 'fill'> {
   name?: string;
   value: number;
   fill: FillStyle;
@@ -365,6 +364,7 @@ export interface ReferenceLineConfigResult {
   type: typeof REFERENCE_LINE;
   layerType: typeof LayerTypes.REFERENCELINE;
   lineLength: number;
+  columnToLabel?: string;
   decorations: [ExtendedReferenceLineDecorationConfig];
 }
 

diff --git a/...gins/chart_expressions/expression_xy/public/components/reference_lines/reference_line.tsx b/...gins/chart_expressions/expression_xy/public/components/reference_lines/reference_line.tsx
@@ -35,22 +35,27 @@ export const ReferenceLine: FC<ReferenceLineProps> = ({
 }) => {
   const {
     decorations: [decorationConfig],
+    columnToLabel,
   } = layer;
 
   if (!decorationConfig) {
     return null;
   }
 
   const { value } = decorationConfig;
+  const columnToLabelMap: Record<string, string> = columnToLabel ? JSON.parse(columnToLabel) : {};
 
   const axisGroup = getAxisGroupForReferenceLine(axesConfiguration, decorationConfig, isHorizontal);
 
   const formatter = axisGroup?.formatter || xAxisFormatter;
   const id = `${layer.layerId}-${value}`;
+  const name = decorationConfig.textVisibility
+    ? columnToLabelMap[decorationConfig.forAccessor]
+    : undefined;
 
   return (
     <ReferenceLineAnnotations
-      config={{ id, ...decorationConfig, nextValue, axisGroup }}
+      config={{ id, ...decorationConfig, name, nextValue, axisGroup }}
       paddingMap={paddingMap}
       axesMap={yAxesMap}
       formatter={formatter}

diff --git a/...xpressions/expression_xy/public/components/reference_lines/reference_line_annotations.tsx b/...xpressions/expression_xy/public/components/reference_lines/reference_line_annotations.tsx
@@ -75,7 +75,7 @@ export const ReferenceLineAnnotations: FC<Props> = ({
   paddingMap,
   isHorizontal,
 }) => {
-  const { id, axisGroup, iconPosition, name, textVisibility, value, fill, color } = config;
+  const { id, axisGroup, iconPosition, name, value, fill, color } = config;
 
   const defaultColor = euiLightVars.euiColorDarkShade;
   // get the position for vertical chart
@@ -85,18 +85,9 @@ export const ReferenceLineAnnotations: FC<Props> = ({
     getOriginalAxisPosition(axisGroup?.position ?? Position.Bottom, isHorizontal)
   );
   // the padding map is built for vertical chart
-  const hasReducedPadding = paddingMap[markerPositionVertical] === LINES_MARKER_SIZE;
+  const isTextOnlyMarker = paddingMap[markerPositionVertical] === LINES_MARKER_SIZE;
 
-  const props = getLineAnnotationProps(
-    config,
-    {
-      markerLabel: name,
-      markerBodyLabel: textVisibility && !hasReducedPadding ? name : undefined,
-    },
-    axesMap,
-    paddingMap,
-    isHorizontal
-  );
+  const props = getLineAnnotationProps(config, name, axesMap, isHorizontal, isTextOnlyMarker);
 
   const sharedStyle = getSharedStyle(config);
 

diff --git a/...hart_expressions/expression_xy/public/components/reference_lines/reference_lines.test.tsx b/...hart_expressions/expression_xy/public/components/reference_lines/reference_lines.test.tsx
@@ -536,6 +536,7 @@ describe('ReferenceLines', () => {
                 lineStyle: 'solid',
                 fill,
                 value,
+                forAccessor: '',
               }),
             ]}
           />
@@ -576,6 +577,7 @@ describe('ReferenceLines', () => {
                 lineStyle: 'solid',
                 fill,
                 value,
+                forAccessor: '',
               }),
             ]}
           />
@@ -617,12 +619,14 @@ describe('ReferenceLines', () => {
                 lineStyle: 'solid',
                 fill,
                 value,
+                forAccessor: '',
               }),
               createReferenceLine(layerPrefix, 10, {
                 position,
                 lineStyle: 'solid',
                 fill,
                 value,
+                forAccessor: '',
               }),
             ]}
           />
@@ -667,12 +671,14 @@ describe('ReferenceLines', () => {
                 lineStyle: 'solid',
                 fill,
                 value,
+                forAccessor: '',
               }),
               createReferenceLine(layerPrefix, 10, {
                 position: 'bottom',
                 lineStyle: 'solid',
                 fill,
                 value,
+                forAccessor: '',
               }),
             ]}
           />
@@ -720,12 +726,14 @@ describe('ReferenceLines', () => {
                 lineStyle: 'solid',
                 fill: 'above',
                 value: value1,
+                forAccessor: '',
               }),
               createReferenceLine(layerPrefix, 10, {
                 position,
                 lineStyle: 'solid',
                 fill: 'below',
                 value: value2,
+                forAccessor: '',
               }),
             ]}
           />

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/reference_lines/utils.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/reference_lines/utils.test.tsx
@@ -7,8 +7,11 @@
  */
 
 import { AxisTypeId, computeInputCombinations, PosType } from './_mocks';
-import { computeChartMargins } from './utils';
-import { AxisConfiguration } from '../../helpers';
+import { computeChartMargins, getLineAnnotationProps } from './utils';
+import { AxesMap, AxisConfiguration, Marker, MarkerBody } from '../../helpers';
+import { ReferenceLineAnnotationConfig } from './reference_line_annotations';
+import { Position } from '@elastic/charts';
+import React from 'react';
 
 describe('reference lines helpers', () => {
   describe('computeChartMargins', () => {
@@ -36,4 +39,122 @@ describe('reference lines helpers', () => {
       }
     );
   });
+
+  describe('getLineAnnotationProps', () => {
+    function getAxesMap({ left, right }: Partial<AxesMap> = {}): AxesMap {
+      return {
+        left: { groupId: 'yLeft', position: Position.Left, series: [], ...left },
+        right: { groupId: 'yRight', position: Position.Right, series: [], ...right },
+      };
+    }
+    function getConfig(
+      customPartialConfig: Partial<ReferenceLineAnnotationConfig> = {}
+    ): ReferenceLineAnnotationConfig {
+      return {
+        id: 'id',
+        value: 3,
+        lineWidth: 5,
+        textVisibility: false,
+        iconPosition: 'auto',
+        axisGroup: getAxesMap().left,
+        ...customPartialConfig,
+      };
+    }
+
+    it('should render only the line with no marker', () => {
+      const config = getConfig();
+      expect(getLineAnnotationProps(config, 'myLabel', getAxesMap(), false, false)).toEqual(
+        expect.objectContaining({
+          groupId: 'yLeft',
+          markerPosition: Position.Left,
+          marker: (
+            <Marker
+              config={config}
+              label={'myLabel'}
+              isHorizontal={false}
+              hasReducedPadding={false}
+            />
+          ),
+          markerBody: <MarkerBody label={undefined} isHorizontal={false} />,
+        })
+      );
+    });
+    it('should render an icon marker', () => {
+      const config = getConfig({ icon: 'triangle' });
+      expect(getLineAnnotationProps(config, 'myLabel', getAxesMap(), false, false)).toEqual(
+        expect.objectContaining({
+          groupId: 'yLeft',
+          markerPosition: Position.Left,
+          marker: (
+            <Marker
+              config={config}
+              label={'myLabel'}
+              isHorizontal={false}
+              hasReducedPadding={false}
+            />
+          ),
+          markerBody: <MarkerBody label={undefined} isHorizontal={false} />,
+        })
+      );
+    });
+    it('should render only the label', () => {
+      const config = getConfig({ textVisibility: true });
+      expect(getLineAnnotationProps(config, 'myLabel', getAxesMap(), false, true)).toEqual(
+        expect.objectContaining({
+          groupId: 'yLeft',
+          markerPosition: Position.Left,
+          marker: (
+            <Marker
+              config={config}
+              label={'myLabel'}
+              isHorizontal={false}
+              hasReducedPadding={true}
+            />
+          ),
+          markerBody: <MarkerBody label={undefined} isHorizontal={false} />,
+        })
+      );
+    });
+    it('should render both icon and text', () => {
+      const config = getConfig({ icon: 'triangle', textVisibility: true });
+      expect(getLineAnnotationProps(config, 'myLabel', getAxesMap(), false, false)).toEqual(
+        expect.objectContaining({
+          groupId: 'yLeft',
+          markerPosition: Position.Left,
+          marker: (
+            <Marker
+              config={config}
+              label={'myLabel'}
+              isHorizontal={false}
+              hasReducedPadding={false}
+            />
+          ),
+          markerBody: <MarkerBody label={'myLabel'} isHorizontal={false} />,
+        })
+      );
+    });
+
+    it('should handle marker rotated label', () => {
+      const config = getConfig({
+        icon: 'triangle',
+        textVisibility: true,
+        axisGroup: { groupId: 'x', position: Position.Bottom, series: [] },
+      });
+      expect(getLineAnnotationProps(config, 'myLabel', getAxesMap(), false, false)).toEqual(
+        expect.objectContaining({
+          groupId: 'x',
+          markerPosition: Position.Top,
+          marker: (
+            <Marker
+              config={config}
+              label={'myLabel'}
+              isHorizontal={true}
+              hasReducedPadding={false}
+            />
+          ),
+          markerBody: <MarkerBody label={'myLabel'} isHorizontal={true} />,
+        })
+      );
+    });
+  });
 });
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/reference_lines/utils.tsx b/src/plugins/chart_expressions/expression_xy/public/components/reference_lines/utils.tsx
@@ -21,15 +21,14 @@ import {
 import { FillStyles } from '../../../common/constants';
 import {
   GroupsConfiguration,
-  LINES_MARKER_SIZE,
   mapVerticalToHorizontalPlacement,
   Marker,
   MarkerBody,
   getAxisPosition,
   getOriginalAxisPosition,
   AxesMap,
 } from '../../helpers';
-import { ReferenceLineAnnotationConfig } from './reference_line_annotations';
+import type { ReferenceLineAnnotationConfig } from './reference_line_annotations';
 
 // if there's just one axis, put it on the other one
 // otherwise use the same axis
@@ -84,10 +83,10 @@ export const getSharedStyle = (config: ReferenceLineAnnotationConfig) => ({
 
 export const getLineAnnotationProps = (
   config: ReferenceLineAnnotationConfig,
-  labels: { markerLabel?: string; markerBodyLabel?: string },
+  label: string | undefined,
   axesMap: AxesMap,
-  paddingMap: Partial<Record<Position, number>>,
-  isHorizontal: boolean
+  isHorizontal: boolean,
+  isTextOnlyMarker: boolean
 ) => {
   // get the position for vertical chart
   const markerPositionVertical = getBaseIconPlacement(
@@ -96,27 +95,27 @@ export const getLineAnnotationProps = (
     getOriginalAxisPosition(config.axisGroup?.position ?? Position.Bottom, isHorizontal)
   );
 
-  // the padding map is built for vertical chart
-  const hasReducedPadding = paddingMap[markerPositionVertical] === LINES_MARKER_SIZE;
-
   const markerPosition = isHorizontal
     ? mapVerticalToHorizontalPlacement(markerPositionVertical)
     : markerPositionVertical;
 
+  const isMarkerLabelHorizontal =
+    markerPosition === Position.Bottom || markerPosition === Position.Top;
+
   return {
     groupId: config.axisGroup?.groupId || 'bottom',
     marker: (
       <Marker
         config={config}
-        label={labels.markerLabel}
-        isHorizontal={isHorizontal}
-        hasReducedPadding={hasReducedPadding}
+        label={label}
+        isHorizontal={isMarkerLabelHorizontal}
+        hasReducedPadding={isTextOnlyMarker}
       />
     ),
     markerBody: (
       <MarkerBody
-        label={labels.markerBodyLabel}
-        isHorizontal={markerPosition === Position.Bottom || markerPosition === Position.Top}
+        label={config.textVisibility && !isTextOnlyMarker ? label : undefined}
+        isHorizontal={isMarkerLabelHorizontal}
       />
     ),
     // rotate the position if required