From 0dae8c116613f799faf4e591e6bea3ab698bc385 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 4 Aug 2022 12:31:56 +0200 Subject: [PATCH 1/2] [ML] Fix badge overlap. --- .../src/dual_brush/dual_brush.tsx | 6 ++-- .../document_count_chart.tsx | 29 +++++++++++++++---- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx index b117d11909fd8..b4eb2e0809f4e 100644 --- a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx +++ b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx @@ -100,10 +100,10 @@ export function DualBrush({ const xMax = x(max) ?? 0; const minExtentPx = Math.round((xMax - xMin) / 100); - const baselineBrush = d3.select('#brush-baseline'); + const baselineBrush = d3.select('#aiops-brush-baseline'); const baselineSelection = d3.brushSelection(baselineBrush.node() as SVGGElement); - const deviationBrush = d3.select('#brush-deviation'); + const deviationBrush = d3.select('#aiops-brush-deviation'); const deviationSelection = d3.brushSelection(deviationBrush.node() as SVGGElement); if (!isBrushXSelection(deviationSelection) || !isBrushXSelection(baselineSelection)) { @@ -221,7 +221,7 @@ export function DualBrush({ .insert('g', '.brush') .attr('class', 'brush') .attr('id', (b: DualBrush) => { - return 'brush-' + b.id; + return 'aiops-brush-' + b.id; }) .each((brushObject: DualBrush, i, n) => { const x = d3.scaleLinear().domain([min, max]).rangeRound([0, widthRef.current]); diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx index 9069046bd884a..8b556f626c65b 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx @@ -51,6 +51,7 @@ interface DocumentCountChartProps { } const SPEC_ID = 'document_count'; +const BADGE_WIDTH = 75; enum VIEW_MODE { ZOOM = 'zoom', @@ -67,6 +68,19 @@ function getTimezone(uiSettings: IUiSettingsClient) { } } +function getBaselineBadgeOverflow( + windowParametersAsPixels: WindowParameters, + baselineBadgeWidth: number +) { + const { baselineMin, baselineMax, deviationMin } = windowParametersAsPixels; + + const baselineBrushWidth = baselineMax - baselineMin; + const baselineBadgeActualMax = baselineMin + baselineBadgeWidth; + return deviationMin < baselineBadgeActualMax + ? Math.max(0, baselineBadgeWidth - baselineBrushWidth) + : 0; +} + export const DocumentCountChart: FC = ({ brushSelectionUpdateHandler, width, @@ -241,6 +255,13 @@ export const DocumentCountChart: FC = ({ const isBrushVisible = originalWindowParameters && mlBrushMarginLeft && mlBrushWidth && mlBrushWidth > 0; + // Avoid overlap of brush badges when the brushes are quite narrow. + const baselineBadgeOverflow = windowParametersAsPixels + ? getBaselineBadgeOverflow(windowParametersAsPixels, BADGE_WIDTH) + : 0; + const baselineBadgeMarginLeft = + (mlBrushMarginLeft ?? 0) + (windowParametersAsPixels?.baselineMin ?? 0); + return ( <> {isBrushVisible && ( @@ -248,12 +269,10 @@ export const DocumentCountChart: FC = ({
- + = ({ }px`, }} > - + Date: Thu, 4 Aug 2022 13:38:57 +0200 Subject: [PATCH 2/2] [ML] Adds tooltips to badges. --- .../document_count_chart/brush_badge.tsx | 64 +++++++++++++++++++ .../document_count_chart.tsx | 61 ++++++++---------- 2 files changed, 92 insertions(+), 33 deletions(-) create mode 100644 x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/brush_badge.tsx diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/brush_badge.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/brush_badge.tsx new file mode 100644 index 0000000000000..3f1039a0365f3 --- /dev/null +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/brush_badge.tsx @@ -0,0 +1,64 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { FC } from 'react'; + +import { EuiBadge, EuiText, EuiToolTip } from '@elastic/eui'; +// @ts-ignore +import { formatDate } from '@elastic/eui/lib/services/format'; + +const DATE_FORMAT = 'YYYY-MM-DD'; +const TIME_FORMAT = 'HH:mm:ss'; + +interface BrushBadgeProps { + label: string; + marginLeft: number; + timestampFrom: number; + timestampTo: number; + width: number; +} + +export const BrushBadge: FC = ({ + label, + marginLeft, + timestampFrom, + timestampTo, + width, +}) => { + // If "from" and "to" are on the same day, we skip displaying the date twice. + const dateFrom = formatDate(timestampFrom, DATE_FORMAT); + const dateTo = formatDate(timestampTo, DATE_FORMAT); + const timeFrom = formatDate(timestampFrom, TIME_FORMAT); + const timeTo = formatDate(timestampTo, TIME_FORMAT); + + return ( +
+ + {dateFrom} {timeFrom} -{' '} + {dateFrom !== dateTo && ( + <> +
+ {dateTo}{' '} + + )} + {timeTo} + + } + position="top" + > + {label} + +
+ ); +}; diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx index 8b556f626c65b..79f5494b419ca 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx @@ -20,10 +20,8 @@ import { XYChartElementEvent, XYBrushEvent, } from '@elastic/charts'; -import { EuiBadge } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n-react'; import { IUiSettingsClient } from '@kbn/core/public'; import { DualBrush, DualBrushAnnotation } from '@kbn/aiops-components'; import { getSnappedWindowParameters, getWindowParameters } from '@kbn/aiops-utils'; @@ -33,6 +31,8 @@ import type { ChangePoint } from '@kbn/ml-agg-utils'; import { useAiOpsKibana } from '../../../kibana_context'; +import { BrushBadge } from './brush_badge'; + export interface DocumentCountChartPoint { time: number | string; value: number; @@ -51,6 +51,8 @@ interface DocumentCountChartProps { } const SPEC_ID = 'document_count'; + +const BADGE_HEIGHT = 20; const BADGE_WIDTH = 75; enum VIEW_MODE { @@ -253,7 +255,11 @@ export const DocumentCountChart: FC = ({ }, [viewMode]); const isBrushVisible = - originalWindowParameters && mlBrushMarginLeft && mlBrushWidth && mlBrushWidth > 0; + originalWindowParameters && + windowParameters && + mlBrushMarginLeft && + mlBrushWidth && + mlBrushWidth > 0; // Avoid overlap of brush badges when the brushes are quite narrow. const baselineBadgeOverflow = windowParametersAsPixels @@ -266,39 +272,28 @@ export const DocumentCountChart: FC = ({ <> {isBrushVisible && (
-
- - - -
-
- - - +
+ +