forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
105 lines (98 loc) · 2.99 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiTitle } from '@elastic/eui';
import React from 'react';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { GenericMetricsChart } from '../../../../../../../../plugins/apm/server/lib/metrics/transform_metrics_chart';
// @ts-ignore
import CustomPlot from '../CustomPlot';
import {
asDecimal,
asPercent,
asInteger,
asDynamicBytes,
getFixedByteFormatter,
asDuration
} from '../../../../utils/formatters';
import { Coordinate } from '../../../../../../../../plugins/apm/typings/timeseries';
import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
import { useChartsSync } from '../../../../hooks/useChartsSync';
import { Maybe } from '../../../../../../../../plugins/apm/typings/common';
interface Props {
start: Maybe<number | string>;
end: Maybe<number | string>;
chart: GenericMetricsChart;
}
export function MetricsChart({ chart }: Props) {
const formatYValue = getYTickFormatter(chart);
const formatTooltip = getTooltipFormatter(chart);
const transformedSeries = chart.series.map(series => ({
...series,
legendValue: formatYValue(series.overallValue)
}));
const syncedChartProps = useChartsSync();
return (
<React.Fragment>
<EuiTitle size="xs">
<span>{chart.title}</span>
</EuiTitle>
<CustomPlot
{...syncedChartProps}
series={transformedSeries}
tickFormatY={formatYValue}
formatTooltipValue={formatTooltip}
yMax={chart.yUnit === 'percent' ? 1 : 'max'}
/>
</React.Fragment>
);
}
function getYTickFormatter(chart: GenericMetricsChart) {
switch (chart.yUnit) {
case 'bytes': {
const max = Math.max(
...chart.series.map(({ data }) =>
Math.max(...data.map(({ y }: { y: number }) => y || 0))
)
);
return getFixedByteFormatter(max);
}
case 'percent': {
return (y: Maybe<number>) => asPercent(y || 0, 1);
}
case 'time': {
return (y: Maybe<number>) => asDuration(y);
}
case 'integer': {
return (y: Maybe<number>) =>
isValidCoordinateValue(y) ? asInteger(y) : y;
}
default: {
return (y: Maybe<number>) =>
isValidCoordinateValue(y) ? asDecimal(y) : y;
}
}
}
function getTooltipFormatter({ yUnit }: GenericMetricsChart) {
switch (yUnit) {
case 'bytes': {
return (c: Coordinate) => asDynamicBytes(c.y);
}
case 'percent': {
return (c: Coordinate) => asPercent(c.y || 0, 1);
}
case 'time': {
return (c: Coordinate) => asDuration(c.y);
}
case 'integer': {
return (c: Coordinate) =>
isValidCoordinateValue(c.y) ? asInteger(c.y) : c.y;
}
default: {
return (c: Coordinate) =>
isValidCoordinateValue(c.y) ? asDecimal(c.y) : c.y;
}
}
}