add timestamp header to rect annotation tooltip (#120702) (#120835)

This commit is contained in:
Melissa Alvarez 2021-12-08 16:46:14 -05:00 committed by GitHub
parent b3b613a1d5
commit 7c4ff8af82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 1 deletions

View file

@ -11,10 +11,14 @@ import { LineAnnotationDatum, RectAnnotationDatum } from '@elastic/charts';
export interface GetStoppedPartitionResult {
jobs: string[] | Record<string, string[]>;
}
export interface MLRectAnnotationDatum extends RectAnnotationDatum {
header: number;
}
export interface GetDatafeedResultsChartDataResult {
bucketResults: number[][];
datafeedResults: number[][];
annotationResultsRect: RectAnnotationDatum[];
annotationResultsRect: MLRectAnnotationDatum[];
annotationResultsLine: LineAnnotationDatum[];
modelSnapshotResultsLine: LineAnnotationDatum[];
}

View file

@ -32,6 +32,7 @@ import {
Axis,
Chart,
CurveType,
CustomAnnotationTooltip,
LineAnnotation,
LineSeries,
LineAnnotationDatum,
@ -69,6 +70,14 @@ function setLineAnnotationHeader(lineDatum: LineAnnotationDatum) {
return lineDatum;
}
const customTooltip: CustomAnnotationTooltip = ({ details, datum }) => (
<div className="echAnnotation__tooltip">
{/* @ts-ignore 'header does not exist on type RectAnnotationDatum' */}
<p className="echAnnotation__header">{dateFormatter(datum.header)}</p>
<div className="echAnnotation__details">{details}</div>
</div>
);
export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end, onClose }) => {
const [data, setData] = useState<{
datafeedConfig: CombinedJobWithStats['datafeed_config'] | undefined;
@ -385,6 +394,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end,
/>
<RectAnnotation
key="annotation-results-rect"
customTooltip={customTooltip}
dataValues={annotationData.rect}
id={i18n.translate(
'xpack.ml.jobsList.datafeedChart.annotationRectSeriesId',

View file

@ -746,6 +746,8 @@ export function resultsServiceProvider(mlClient: MlClient, client?: IScopedClust
x1: endTimestamp,
},
details: annotation.annotation,
// Added for custom RectAnnotation tooltip with formatted timestamp
header: timestamp,
});
}
});