From f272c01b08cacde47af3afb993f68fe6a843d450 Mon Sep 17 00:00:00 2001 From: dej611 Date: Tue, 20 Jul 2021 13:49:49 +0200 Subject: [PATCH 1/2] :bug: Rework value labels config --- .../lens/public/xy_visualization/expression.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index 404608f9da43..94f102e413c2 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -302,7 +302,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; @@ -310,7 +310,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, @@ -908,9 +908,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 ; From dd9c52fe5092bd7dd3a22730ff8eaba0b8065198 Mon Sep 17 00:00:00 2001 From: dej611 Date: Tue, 20 Jul 2021 15:50:05 +0200 Subject: [PATCH 2/2] :camera: Update snapshots --- .../__snapshots__/expression.test.tsx.snap | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 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 26fe4dc72921..ffce77235572 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 @@ -336,9 +336,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], @@ -402,9 +403,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], @@ -563,9 +565,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], @@ -629,9 +632,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], @@ -1228,9 +1232,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], @@ -1298,9 +1303,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], @@ -1463,9 +1469,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], @@ -1533,9 +1540,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],