From d5f68eef4f391a2cf9efcf57e258bbf594cf5f0a Mon Sep 17 00:00:00 2001
From: Wylie Conlon <william.conlon@elastic.co>
Date: Thu, 24 Jun 2021 16:46:50 -0400
Subject: [PATCH] [Lens] Fix formula formatting in Metric visualization type
 (#103167)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../metric_visualization/expression.test.tsx  | 98 +++++++++++++++----
 .../metric_visualization/expression.tsx       |  2 +-
 2 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
index 2e189e094ef012..b31125a1912efb 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -20,17 +20,22 @@ function sampleArgs() {
       l1: {
         type: 'datatable',
         columns: [
-          { id: 'a', name: 'a', meta: { type: 'string' } },
+          // Simulating a calculated column like a formula
+          { id: 'a', name: 'a', meta: { type: 'string', params: { id: 'string' } } },
           { id: 'b', name: 'b', meta: { type: 'string' } },
-          { id: 'c', name: 'c', meta: { type: 'number' } },
+          {
+            id: 'c',
+            name: 'c',
+            meta: { type: 'number', params: { id: 'percent', params: { format: '0.000%' } } },
+          },
         ],
-        rows: [{ a: 10110, b: 2, c: 3 }],
+        rows: [{ a: 'last', b: 'last', c: 3 }],
       },
     },
   };
 
   const args: MetricConfig = {
-    accessor: 'a',
+    accessor: 'c',
     layerId: 'l1',
     title: 'My fanci metric chart',
     description: 'Fancy chart description',
@@ -39,7 +44,7 @@ function sampleArgs() {
   };
 
   const noAttributesArgs: MetricConfig = {
-    accessor: 'a',
+    accessor: 'c',
     layerId: 'l1',
     title: '',
     description: '',
@@ -65,11 +70,17 @@ describe('metric_expression', () => {
   });
 
   describe('MetricChart component', () => {
-    test('it renders the all attributes when passed (title, description, metricTitle, value)', () => {
+    test('it renders all attributes when passed (title, description, metricTitle, value)', () => {
       const { data, args } = sampleArgs();
 
       expect(
-        shallow(<MetricChart data={data} args={args} formatFactory={(x) => x as IFieldFormat} />)
+        shallow(
+          <MetricChart
+            data={data}
+            args={args}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
+          />
+        )
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
@@ -86,7 +97,52 @@ describe('metric_expression', () => {
                 }
               }
             >
-              10110
+              3
+            </div>
+            <div
+              data-test-subj="lns_metric_title"
+              style={
+                Object {
+                  "fontSize": "24pt",
+                }
+              }
+            >
+              My fanci metric chart
+            </div>
+          </AutoScale>
+        </VisualizationContainer>
+      `);
+    });
+
+    test('it renders strings', () => {
+      const { data, args } = sampleArgs();
+      args.accessor = 'a';
+
+      expect(
+        shallow(
+          <MetricChart
+            data={data}
+            args={args}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
+          />
+        )
+      ).toMatchInlineSnapshot(`
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportDescription="Fancy chart description"
+          reportTitle="My fanci metric chart"
+        >
+          <AutoScale>
+            <div
+              data-test-subj="lns_metric_value"
+              style={
+                Object {
+                  "fontSize": "60pt",
+                  "fontWeight": 600,
+                }
+              }
+            >
+              last
             </div>
             <div
               data-test-subj="lns_metric_title"
@@ -111,7 +167,7 @@ describe('metric_expression', () => {
           <MetricChart
             data={data}
             args={noAttributesArgs}
-            formatFactory={(x) => x as IFieldFormat}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
           />
         )
       ).toMatchInlineSnapshot(`
@@ -130,7 +186,7 @@ describe('metric_expression', () => {
                 }
               }
             >
-              10110
+              3
             </div>
             <div
               data-test-subj="lns_metric_title"
@@ -155,7 +211,7 @@ describe('metric_expression', () => {
           <MetricChart
             data={data}
             args={{ ...noAttributesArgs, mode: 'reduced' }}
-            formatFactory={(x) => x as IFieldFormat}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
           />
         )
       ).toMatchInlineSnapshot(`
@@ -174,7 +230,7 @@ describe('metric_expression', () => {
                 }
               }
             >
-              10110
+              3
             </div>
           </AutoScale>
         </VisualizationContainer>
@@ -189,7 +245,7 @@ describe('metric_expression', () => {
           <MetricChart
             data={{ ...data, tables: {} }}
             args={noAttributesArgs}
-            formatFactory={(x) => x as IFieldFormat}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
           />
         )
       ).toMatchInlineSnapshot(`
@@ -202,14 +258,14 @@ describe('metric_expression', () => {
     test('it renders an EmptyPlaceholder when null value is passed as data', () => {
       const { data, noAttributesArgs } = sampleArgs();
 
-      data.tables.l1.rows[0].a = null;
+      data.tables.l1.rows[0].c = null;
 
       expect(
         shallow(
           <MetricChart
             data={data}
             args={noAttributesArgs}
-            formatFactory={(x) => x as IFieldFormat}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
           />
         )
       ).toMatchInlineSnapshot(`
@@ -222,14 +278,14 @@ describe('metric_expression', () => {
     test('it renders 0 value', () => {
       const { data, noAttributesArgs } = sampleArgs();
 
-      data.tables.l1.rows[0].a = 0;
+      data.tables.l1.rows[0].c = 0;
 
       expect(
         shallow(
           <MetricChart
             data={data}
             args={noAttributesArgs}
-            formatFactory={(x) => x as IFieldFormat}
+            formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
           />
         )
       ).toMatchInlineSnapshot(`
@@ -264,5 +320,13 @@ describe('metric_expression', () => {
         </VisualizationContainer>
       `);
     });
+
+    test('it finds the right column to format', () => {
+      const { data, args } = sampleArgs();
+      const factory = jest.fn(() => ({ convert: (x) => x } as IFieldFormat));
+
+      shallow(<MetricChart data={data} args={args} formatFactory={factory} />);
+      expect(factory).toHaveBeenCalledWith({ id: 'percent', params: { format: '0.000%' } });
+    });
   });
 });
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
index 70b2cb17c7fe16..60d9d66bce9951 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -127,7 +127,7 @@ export function MetricChart({
     return <EmptyPlaceholder icon={LensIconChartMetric} />;
   }
 
-  const column = firstTable.columns[0];
+  const column = firstTable.columns.find(({ id }) => id === accessor)!;
   const row = firstTable.rows[0];
 
   // NOTE: Cardinality and Sum never receives "null" as value, but always 0, even for empty dataset.