[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:
parent
baf11e8749
commit
e9e7314c3b
|
@ -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 =
|
||||
|
|
|
@ -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);
|
||||
})
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue