From 268bd095438751ec1f2e92585868927f450d68cd Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Thu, 12 Nov 2020 09:09:28 +0100
Subject: [PATCH] [Lens] Remove background from lens embeddable (#83061)

---
 .../pie_visualization/render_function.tsx     |  7 ++-
 .../__snapshots__/expression.test.tsx.snap    | 63 ++++++++++++++++---
 .../public/xy_visualization/expression.tsx    | 53 +++++++---------
 3 files changed, 85 insertions(+), 38 deletions(-)

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
index eec351cfbb27e..39743a355fd78 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -253,7 +253,12 @@ export function PieComponent(
 
             onClickValue(desanitizeFilterContext(context));
           }}
-          theme={chartTheme}
+          theme={{
+            ...chartTheme,
+            background: {
+              color: undefined, // removes background for embeddables
+            },
+          }}
           baseTheme={chartBaseTheme}
         />
         <Partition
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
index 365bf8f4d6328..c41cd41cd30d5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
@@ -12,7 +12,14 @@ exports[`xy_expression XYChart component it renders area 1`] = `
     rotation={0}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
@@ -200,7 +207,14 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
     rotation={0}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
@@ -396,7 +410,14 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
     rotation={90}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
@@ -592,7 +613,14 @@ exports[`xy_expression XYChart component it renders line 1`] = `
     rotation={0}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
@@ -780,7 +808,14 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
     rotation={0}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
@@ -976,7 +1011,14 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
     rotation={0}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
@@ -1180,7 +1222,14 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
     rotation={90}
     showLegend={false}
     showLegendExtra={false}
-    theme={Object {}}
+    theme={
+      Object {
+        "background": Object {
+          "color": undefined,
+        },
+        "barSeriesStyle": Object {},
+      }
+    }
     tooltip={
       Object {
         "headerFormatter": [Function],
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index 730f8508e2889..8713e3989a1b6 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -20,8 +20,6 @@ import {
   GeometryValue,
   XYChartSeriesIdentifier,
   StackMode,
-  RecursivePartial,
-  Theme,
   VerticalAlignment,
   HorizontalAlignment,
 } from '@elastic/charts';
@@ -222,36 +220,23 @@ export const getXyChartRenderer = (dependencies: {
   },
 });
 
-function mergeThemeWithValueLabelsStyling(
-  theme: RecursivePartial<Theme>,
-  valuesLabelMode: string = 'hide',
-  isHorizontal: boolean
-) {
+function getValueLabelsStyling(isHorizontal: boolean) {
   const VALUE_LABELS_MAX_FONTSIZE = 15;
   const VALUE_LABELS_MIN_FONTSIZE = 10;
   const VALUE_LABELS_VERTICAL_OFFSET = -10;
   const VALUE_LABELS_HORIZONTAL_OFFSET = 10;
 
-  if (valuesLabelMode === 'hide') {
-    return theme;
-  }
   return {
-    ...theme,
-    ...{
-      barSeriesStyle: {
-        ...theme.barSeriesStyle,
-        displayValue: {
-          fontSize: { min: VALUE_LABELS_MIN_FONTSIZE, max: VALUE_LABELS_MAX_FONTSIZE },
-          fill: { textInverted: true, textBorder: 2 },
-          alignment: isHorizontal
-            ? {
-                vertical: VerticalAlignment.Middle,
-              }
-            : { horizontal: HorizontalAlignment.Center },
-          offsetX: isHorizontal ? VALUE_LABELS_HORIZONTAL_OFFSET : 0,
-          offsetY: isHorizontal ? 0 : VALUE_LABELS_VERTICAL_OFFSET,
-        },
-      },
+    displayValue: {
+      fontSize: { min: VALUE_LABELS_MIN_FONTSIZE, max: VALUE_LABELS_MAX_FONTSIZE },
+      fill: { textInverted: true, textBorder: 2 },
+      alignment: isHorizontal
+        ? {
+            vertical: VerticalAlignment.Middle,
+          }
+        : { horizontal: HorizontalAlignment.Center },
+      offsetX: isHorizontal ? VALUE_LABELS_HORIZONTAL_OFFSET : 0,
+      offsetY: isHorizontal ? 0 : VALUE_LABELS_VERTICAL_OFFSET,
     },
   };
 }
@@ -445,9 +430,8 @@ export function XYChart({
     // No histogram charts
     !isHistogramViz;
 
-  const baseThemeWithMaybeValueLabels = !shouldShowValueLabels
-    ? chartTheme
-    : mergeThemeWithValueLabelsStyling(chartTheme, valueLabels, shouldRotate);
+  const valueLabelsStyling =
+    shouldShowValueLabels && valueLabels !== 'hide' && getValueLabelsStyling(shouldRotate);
 
   const colorAssignments = getColorAssignments(args.layers, data, formatFactory);
 
@@ -461,7 +445,16 @@ export function XYChart({
         }
         legendPosition={legend.position}
         showLegendExtra={false}
-        theme={baseThemeWithMaybeValueLabels}
+        theme={{
+          ...chartTheme,
+          barSeriesStyle: {
+            ...chartTheme.barSeriesStyle,
+            ...valueLabelsStyling,
+          },
+          background: {
+            color: undefined, // removes background for embeddables
+          },
+        }}
         baseTheme={chartBaseTheme}
         tooltip={{
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),