maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Fix layout of anomaly chart tooltip for long field values (#72689)

Browse source
This commit is contained in:
Pete Harverson 2020-07-22 09:30:13 +01:00 committed by GitHub
parent 47eaf604bb
commit a93c327e9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
View file

@ -25,15 +25,10 @@
}
&__label {
overflow-wrap: break-word;
word-wrap: break-word;
min-width: 1px;
flex: 1 1 auto;
}
&__value {
overflow-wrap: break-word;
word-wrap: break-word;
font-weight: $euiFontWeightBold;
text-align: right;
font-feature-settings: 'tnum';

14
x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
View file

@ -7,6 +7,7 @@
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import classNames from 'classnames';
import TooltipTrigger from 'react-popper-tooltip';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { TooltipValueFormatter } from '@elastic/charts';
import './_index.scss';
@ -79,8 +80,17 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
borderLeftColor: color,
}}
>
<span className="mlChartTooltip__label">{label}</span>
<span className="mlChartTooltip__value">{value}</span>
<EuiFlexGroup>
<EuiFlexItem
className="eui-textBreakWord mlChartTooltip__label"
grow={false}
>
{label}
</EuiFlexItem>
<EuiFlexItem className="eui-textBreakAll mlChartTooltip__value">
{value}
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
})}