From 81368c400531494ac85ef8933799c5563e951383 Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Thu, 29 Jul 2021 10:22:23 +0200
Subject: [PATCH] [Lens] Cleanup bar value labels configuration (#106231)

* :bug: Rework value labels config

* :camera: Update snapshots
---
 .../__snapshots__/expression.test.tsx.snap    | 24 ++++++++++++-------
 .../public/xy_visualization/expression.tsx    | 11 +++++----
 2 files changed, 23 insertions(+), 12 deletions(-)

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 54bb3efd75b39..c17eeec91dc2b 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
@@ -340,9 +340,10 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -406,9 +407,10 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -569,9 +571,10 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -635,9 +638,10 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -1240,9 +1244,10 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -1310,9 +1315,10 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -1477,9 +1483,10 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
@@ -1547,9 +1554,10 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
     displayValueSettings={
       Object {
         "isAlternatingValueLabel": false,
-        "isValueContainedInElement": true,
+        "isValueContainedInElement": false,
         "overflowConstraints": Array [
           "chartEdges",
+          "barGeometry",
         ],
         "showValueLabel": false,
         "valueFormatter": [Function],
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index 56867c625bb6f..8eb7ec1e0f623 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -167,7 +167,7 @@ export const getXyChartRenderer = (dependencies: {
 });
 
 function getValueLabelsStyling(isHorizontal: boolean) {
-  const VALUE_LABELS_MAX_FONTSIZE = 15;
+  const VALUE_LABELS_MAX_FONTSIZE = 12;
   const VALUE_LABELS_MIN_FONTSIZE = 10;
   const VALUE_LABELS_VERTICAL_OFFSET = -10;
   const VALUE_LABELS_HORIZONTAL_OFFSET = 10;
@@ -175,7 +175,7 @@ function getValueLabelsStyling(isHorizontal: boolean) {
   return {
     displayValue: {
       fontSize: { min: VALUE_LABELS_MIN_FONTSIZE, max: VALUE_LABELS_MAX_FONTSIZE },
-      fill: { textInverted: true, textBorder: 2 },
+      fill: { textContrast: true, textInverted: false, textBorder: 0 },
       alignment: isHorizontal
         ? {
             vertical: VerticalAlignment.Middle,
@@ -792,9 +792,12 @@ export function XYChart({
                   // * in some scenarios value labels are not strings, and this breaks the elastic-chart lib
                   valueFormatter: (d: unknown) => yAxis?.formatter?.convert(d) || '',
                   showValueLabel: shouldShowValueLabels && valueLabels !== 'hide',
+                  isValueContainedInElement: false,
                   isAlternatingValueLabel: false,
-                  isValueContainedInElement: true,
-                  overflowConstraints: [LabelOverflowConstraint.ChartEdges],
+                  overflowConstraints: [
+                    LabelOverflowConstraint.ChartEdges,
+                    LabelOverflowConstraint.BarGeometry,
+                  ],
                 },
               };
               return <BarSeries key={index} {...seriesProps} {...valueLabelsSettings} />;