forked from xivanalysis/xivanalysis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
TimeLineChart.tsx
47 lines (43 loc) · 1.14 KB
/
TimeLineChart.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
import type {ChartData as PureChartData, ChartOptions} from 'chart.js'
import _ from 'lodash'
import * as PropTypes from 'prop-types'
import React, {PureComponent} from 'react'
import {ChartData, Line} from 'react-chartjs-2'
const DEFAULT_OPTIONS: ChartOptions = {
aspectRatio: 3,
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'm:ss',
second: 'm:ss',
millisecond: 'm:ss.SS',
},
// This tooltip format displays similar to a "relative" timestamp,
// since react assumes UNIX epoch timestamps for the data.
tooltipFormat: 'mm:ss.SSS',
},
}],
},
}
interface TimeLineChartProps {
data: ChartData<PureChartData>
options?: ChartOptions
}
export default class TimeLineChart extends PureComponent<TimeLineChartProps> {
static propTypes = {
data: PropTypes.object.isRequired,
options: PropTypes.object,
}
override render() {
const options = _.merge({}, DEFAULT_OPTIONS, this.props.options || {})
return <Line
data={this.props.data}
options={options}
// Using this trash 'cus aspectRatio doesn't work with the react wrapper
width={options.aspectRatio}
height={1}
/>
}
}