github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] Cleanup bar value labels configuration (#106231)

Browse source 
* 🐛 Rework value labels config

* 📷 Update snapshots
This commit is contained in:
Marco Liberati 2021-07-29 10:22:23 +02:00 • committed by GitHub
parent 12271f3f5c
commit d3e4dcf367
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

24
x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap generated
View file

@ -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],

11
x-pack/plugins/lens/public/xy_visualization/expression.tsx
View file

@ -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} />;