stabilize annotation code (#137101)

elastic · Jul 26, 2022 · 7aad7b4 · 7aad7b4
1 parent d642f8f
commit 7aad7b4
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
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
@@ -33,7 +33,7 @@ import {
 export interface ReferenceLineAnnotationConfig {
   id: string;
   name?: string;
-  value: number;
+  value?: number;
   nextValue?: number;
   icon?: AvailableReferenceLineIcon;
   lineWidth?: number;
@@ -103,7 +103,7 @@ export const ReferenceLineAnnotations: FC<Props> = ({
   const dataValues = {
     dataValue: value,
     header: name,
-    details: formatter?.convert(value) || value.toString(),
+    details: formatter?.convert(value) || value?.toString(),
   };
 
   const line = (

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
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { LineAnnotation, RectAnnotation } from '@elastic/charts';
-import { shallow } from 'enzyme';
+import { Chart, LineAnnotation, RectAnnotation } from '@elastic/charts';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { Datatable } from '@kbn/expressions-plugin/common';
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
@@ -131,6 +131,38 @@ describe('ReferenceLines', () => {
       };
     });
 
+    it('should not throw on null data', () => {
+      const position = getAxisFromId('yAccessorLeft');
+      const [layer] = createLayers([
+        {
+          forAccessor: `yAccessorLeftFirstId`,
+          position,
+          lineStyle: 'solid',
+          fill: 'above',
+          type: 'referenceLineDecorationConfig',
+        },
+      ]);
+      expect(() =>
+        mount(
+          <Chart>
+            <ReferenceLines
+              {...defaultProps}
+              layers={[
+                {
+                  ...layer,
+                  table: {
+                    ...layer.table,
+                    rows: [{}],
+                    columns: [{ ...layer.table.columns[0], meta: { type: 'number' } }],
+                  },
+                },
+              ]}
+            />
+          </Chart>
+        )
+      ).not.toThrow();
+    });
+
     it.each([
       ['yAccessorLeft', 'above'],
       ['yAccessorLeft', 'below'],

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
@@ -121,7 +121,7 @@ export const getBottomRect = (
   headerLabel: string | undefined,
   isFillAbove: boolean,
   formatter: FieldFormat | undefined,
-  currentValue: number,
+  currentValue?: number,
   nextValue?: number
 ) => ({
   coordinates: {
@@ -131,14 +131,14 @@ export const getBottomRect = (
     y1: undefined,
   },
   header: headerLabel,
-  details: formatter?.convert(currentValue) || currentValue.toString(),
+  details: formatter?.convert(currentValue) || currentValue?.toString(),
 });
 
 export const getHorizontalRect = (
   headerLabel: string | undefined,
   isFillAbove: boolean,
   formatter: FieldFormat | undefined,
-  currentValue: number,
+  currentValue?: number,
   nextValue?: number
 ) => ({
   coordinates: {
@@ -148,7 +148,7 @@ export const getHorizontalRect = (
     y1: isFillAbove ? nextValue : currentValue,
   },
   header: headerLabel,
-  details: formatter?.convert(currentValue) || currentValue.toString(),
+  details: formatter?.convert(currentValue) || currentValue?.toString(),
 });
 
 const sortReferenceLinesByGroup = (referenceLines: ReferenceLineConfig[], group: FillStyle) => {