/
TimelineAxis.js
109 lines (98 loc) · 3.17 KB
/
TimelineAxis.js
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
106
107
108
109
/*
* 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 React from 'react';
import PropTypes from 'prop-types';
import { inRange } from 'lodash';
import { Sticky } from 'react-sticky';
import { XYPlot, XAxis } from 'react-vis';
import LastTickValue from './LastTickValue';
import AgentMarker from './AgentMarker';
import { px } from '../../../../style/variables';
import { getTimeFormatter } from '../../../../utils/formatters';
import theme from '@elastic/eui/dist/eui_theme_light.json';
// Remove any tick that is too close to topTraceDuration
const getXAxisTickValues = (tickValues, topTraceDuration) => {
if (topTraceDuration == null) {
return tickValues;
}
const padding = (tickValues[1] - tickValues[0]) / 2;
const lowerBound = topTraceDuration - padding;
const upperBound = topTraceDuration + padding;
return tickValues.filter(value => {
const isInRange = inRange(value, lowerBound, upperBound);
return !isInRange && value !== topTraceDuration;
});
};
function TimelineAxis({ plotValues, agentMarks, topTraceDuration }) {
const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues;
const tickFormat = getTimeFormatter(xMax);
const xAxisTickValues = getXAxisTickValues(tickValues, topTraceDuration);
return (
<Sticky disableCompensation>
{({ style }) => {
return (
<div
style={{
position: 'absolute',
borderBottom: `1px solid ${theme.euiColorMediumShade}`,
height: px(margins.top),
zIndex: 2,
width: '100%',
...style
}}
>
<XYPlot
dontCheckIfEmpty
width={width}
height={margins.top}
margin={{
top: margins.top,
left: margins.left,
right: margins.right
}}
xDomain={xDomain}
>
<XAxis
hideLine
orientation="top"
tickSize={0}
tickValues={xAxisTickValues}
tickFormat={tickFormat}
tickPadding={20}
style={{
text: { fill: theme.euiColorDarkShade }
}}
/>
{topTraceDuration > 0 && (
<LastTickValue
x={xScale(topTraceDuration)}
value={tickFormat(topTraceDuration)}
marginTop={28}
/>
)}
{agentMarks.map(agentMark => (
<AgentMarker
key={agentMark.name}
agentMark={agentMark}
x={xScale(agentMark.us)}
/>
))}
</XYPlot>
</div>
);
}}
</Sticky>
);
}
TimelineAxis.propTypes = {
header: PropTypes.node,
plotValues: PropTypes.object.isRequired,
agentMarks: PropTypes.array
};
TimelineAxis.defaultProps = {
agentMarks: []
};
export default TimelineAxis;