From 0942bcea0431053c7346a436aef6cf6cfc4e836f Mon Sep 17 00:00:00 2001
From: Maryam Saeidi <maryam.saeidi@elastic.co>
Date: Mon, 27 Nov 2023 13:11:57 +0100
Subject: [PATCH] [Custom threshold] Fix not showing threshold line in lens
 preview (#171970)

Closes #171843

## Summary

This PR fixes not showing the threshold line in the following case:

<img
src="https://github.com/elastic/kibana/assets/12370520/fa0af167-b7f1-499a-a703-b336d4f2414c"
width=500 />
---
 .../preview_chart/preview_chart.test.tsx        | 17 ++++++++++++++++-
 .../components/preview_chart/preview_chart.tsx  |  5 ++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.test.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.test.tsx
index 3adc5975e91a8..bc478e54135ba 100644
--- a/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.test.tsx
+++ b/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.test.tsx
@@ -13,7 +13,7 @@ import { Comparator, Aggregators } from '../../../../../common/custom_threshold_
 import { useKibana } from '../../../../utils/kibana_react';
 import { kibanaStartMock } from '../../../../utils/kibana_react.mock';
 import { MetricExpression } from '../../types';
-import { PreviewChart } from './preview_chart';
+import { getBufferThreshold, PreviewChart } from './preview_chart';
 
 jest.mock('../../../../utils/kibana_react');
 
@@ -70,3 +70,18 @@ describe('Preview chart', () => {
     expect(wrapper.find('[data-test-subj="thresholdRuleNoChartData"]').exists()).toBeTruthy();
   });
 });
+
+describe('getBufferThreshold', () => {
+  const testData = [
+    { threshold: undefined, buffer: '0.00' },
+    { threshold: 0.1, buffer: '0.12' },
+    { threshold: 0.01, buffer: '0.02' },
+    { threshold: 0.001, buffer: '0.01' },
+    { threshold: 0.00098, buffer: '0.01' },
+    { threshold: 130, buffer: '143.00' },
+  ];
+
+  it.each(testData)('getBufferThreshold($threshold) = $buffer', ({ threshold, buffer }) => {
+    expect(getBufferThreshold(threshold)).toBe(buffer);
+  });
+});
diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.tsx
index 23d27a554a77c..1c25d22b3a595 100644
--- a/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.tsx
+++ b/x-pack/plugins/observability/public/components/custom_threshold/components/preview_chart/preview_chart.tsx
@@ -44,6 +44,9 @@ const getOperationTypeFromRuleAggType = (aggType: AggType): OperationType => {
   return aggType;
 };
 
+export const getBufferThreshold = (threshold?: number): string =>
+  (Math.ceil((threshold || 0) * 1.1 * 100) / 100).toFixed(2).toString();
+
 export function PreviewChart({
   metricExpression,
   dataView,
@@ -147,7 +150,7 @@ export function PreviewChart({
       const bufferRefLine = new XYReferenceLinesLayer({
         data: [
           {
-            value: Math.round((threshold[0] || 0) * 1.1).toString(),
+            value: getBufferThreshold(threshold[0]),
             color: 'transparent',
             fill,
             format,