[ML] Make swimlane annotation markers look less like a 0 (#99592)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Quynh Nguyen 2021-05-10 13:18:40 -05:00 committed by GitHub
parent baf11e8749
commit e9e7314c3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 15 deletions

View file

@ -17,9 +17,7 @@ export const Y_AXIS_LABEL_WIDTH = 170;
export const Y_AXIS_LABEL_PADDING = 8;
export const Y_AXIS_LABEL_FONT_COLOR = '#6a717d';
const ANNOTATION_CONTAINER_HEIGHT = 12;
const ANNOTATION_MARGIN = 2;
const ANNOTATION_MIN_WIDTH = 5;
const ANNOTATION_HEIGHT = ANNOTATION_CONTAINER_HEIGHT - 2 * ANNOTATION_MARGIN;
const ANNOTATION_MIN_WIDTH = 8;
interface SwimlaneAnnotationContainerProps {
chartWidth: number;
@ -93,11 +91,9 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
.append('rect')
.classed('mlAnnotationRect', true)
.attr('x', d.timestamp >= domain.min ? xScale(d.timestamp) : startingXPos)
.attr('y', ANNOTATION_MARGIN)
.attr('height', ANNOTATION_HEIGHT)
.attr('y', 0)
.attr('height', ANNOTATION_CONTAINER_HEIGHT)
.attr('width', Math.max(annotationWidth, ANNOTATION_MIN_WIDTH))
.attr('rx', ANNOTATION_MARGIN)
.attr('ry', ANNOTATION_MARGIN)
.on('mouseover', function () {
const startingTime = formatHumanReadableDateTimeSeconds(d.timestamp);
const endingTime =

View file

@ -1108,8 +1108,6 @@ class TimeseriesChartIntl extends Component {
ctxAnnotationRects
.enter()
.append('rect')
.attr('rx', ctxAnnotationMargin)
.attr('ry', ctxAnnotationMargin)
.on('mouseover', function (d) {
showFocusChartTooltip(d, this);
})

View file

@ -92,8 +92,7 @@ const ANNOTATION_DEFAULT_LEVEL = 1;
const ANNOTATION_LEVEL_HEIGHT = 28;
const ANNOTATION_UPPER_RECT_MARGIN = 0;
const ANNOTATION_UPPER_TEXT_MARGIN = -7;
export const ANNOTATION_MIN_WIDTH = 2;
const ANNOTATION_RECT_BORDER_RADIUS = 2;
export const ANNOTATION_MIN_WIDTH = 8;
const ANNOTATION_TEXT_VERTICAL_OFFSET = 26;
const ANNOTATION_TEXT_RECT_VERTICAL_OFFSET = 12;
const ANNOTATION_TEXT_RECT_WIDTH = 24;
@ -157,8 +156,6 @@ export function renderAnnotations(
rects
.enter()
.append('rect')
.attr('rx', ANNOTATION_RECT_BORDER_RADIUS)
.attr('ry', ANNOTATION_RECT_BORDER_RADIUS)
.classed('mlAnnotationRect', true)
.attr('mask', `url(#${ANNOTATION_MASK_ID})`)
.on('mouseover', onAnnotationMouseOver)
@ -199,8 +196,6 @@ export function renderAnnotations(
.classed('mlAnnotationTextRect', true)
.attr('width', ANNOTATION_TEXT_RECT_WIDTH)
.attr('height', ANNOTATION_TEXT_RECT_HEIGHT)
.attr('rx', ANNOTATION_RECT_BORDER_RADIUS)
.attr('ry', ANNOTATION_RECT_BORDER_RADIUS)
.on('mouseover', onAnnotationMouseOver)
.on('mouseout', hideFocusChartTooltip)
.on('click', onAnnotationClick);