Skip to content

Commit

Permalink
[ML] Fix layout of anomaly chart tooltip for long field values (elast…
Browse files Browse the repository at this point in the history
  • Loading branch information
peteharverson authored Jul 22, 2020
1 parent 47eaf60 commit a93c327
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
})}
Expand Down

0 comments on commit a93c327

Please sign in to comment.