Skip to content

Commit 5b90129

Browse files
jamesremuscatjamesremuscat
committed
Extend data series to current timestamp.
1 parent b61dc6d commit 5b90129

2 files changed

Lines changed: 115 additions & 98 deletions

File tree

‎src/modules/analysis/components/trackData/components/Chart.js‎

Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ResponsiveLine } from "@nivo/line";
22
import { dayjs } from '@timing71/common';
33
import { theme as chartTheme } from '../../../charts';
44
import styled from 'styled-components';
5+
import { observer } from 'mobx-react-lite';
56

67
const Header = styled.div`
78
display: flex;
@@ -40,104 +41,106 @@ const makeTooltip = (unit) => ({ point }) => {
4041
);
4142
};
4243

43-
export const Chart = ({ color='#54FFFF', minTime, maxTime, series }) => {
44+
export const Chart = observer(
45+
({ color='#54FFFF', minTime, maxTime, series }) => {
4446

45-
const chartData = [{
46-
id: series.label,
47-
data: series.data.map(d => ({ x: d.timestamp, y: d.value }))
48-
}];
47+
const chartData = [{
48+
id: series.label,
49+
data: series.data.map(d => ({ x: d.timestamp, y: d.value }))
50+
}];
4951

5052

5153

52-
const minValue = chartData[0].data.reduce(
53-
(prev, next) => {
54-
if (!prev.value || next.y < prev.value) {
55-
return { value: next.y, timestamp: next.x };
56-
}
57-
return prev;
58-
},
59-
{ value: null }
60-
);
54+
const minValue = chartData[0].data.reduce(
55+
(prev, next) => {
56+
if (!prev.value || next.y < prev.value) {
57+
return { value: next.y, timestamp: next.x };
58+
}
59+
return prev;
60+
},
61+
{ value: null }
62+
);
6163

62-
const maxValue = chartData[0].data.reduce(
63-
(prev, next) => {
64-
if (!prev.value || next.y > prev.value) {
65-
return { value: next.y, timestamp: next.x };
66-
}
67-
return prev;
68-
},
69-
{ value: null }
70-
);
64+
const maxValue = chartData[0].data.reduce(
65+
(prev, next) => {
66+
if (!prev.value || next.y > prev.value) {
67+
return { value: next.y, timestamp: next.x };
68+
}
69+
return prev;
70+
},
71+
{ value: null }
72+
);
7173

72-
const minAxisValue = Math.floor(minValue.value / 10) * 10;
73-
const maxAxisValue = Math.ceil(maxValue.value / 10) * 10;
74-
const minComesFirst = maxValue.timestamp > minValue.timestamp;
74+
const minAxisValue = Math.floor(minValue.value / 10) * 10;
75+
const maxAxisValue = Math.ceil(maxValue.value / 10) * 10;
76+
const minComesFirst = maxValue.timestamp > minValue.timestamp;
7577

76-
return (
77-
<div>
78-
<Header>
79-
<h2>
80-
{series.label} ({series.unit.trim()})
81-
</h2>
82-
<MinMax>
83-
<span className='heading heading-max'>Max:</span>
84-
<span>{maxValue.value}{series.unit}</span>
85-
<span>({ dayjs(maxValue.timestamp).format('HH:mm') })</span>
86-
<span className='heading heading-min'>Min:</span>
87-
<span>{minValue.value}{series.unit}</span>
88-
<span>({ dayjs(minValue.timestamp).format('HH:mm') })</span>
89-
</MinMax>
90-
</Header>
91-
<ResponsiveLine
92-
axisBottom={{
93-
tickRotation: -60,
94-
format: formatTime
95-
}}
96-
axisLeft={{
97-
tickCount: 5
98-
}}
99-
colors={[ color ]}
100-
curve='stepAfter'
101-
data={chartData}
102-
enablePoints={false}
103-
margin={{ top: 10, bottom: 90, left: 30, right: 10 }}
104-
markers={[
105-
{
106-
axis: 'x',
107-
value: maxValue.timestamp,
108-
lineStyle: { stroke: '#ffa600', strokeWidth: 1 },
109-
textStyle: { fill: '#ffa600', fontSize: 12 },
110-
legend: 'Max',
111-
legendOrientation: 'horizontal',
112-
legendPosition: minComesFirst ? 'top-right' : 'top-left'
113-
},
114-
{
115-
axis: 'x',
116-
value: minValue.timestamp,
117-
lineStyle: { stroke: '#54f8cf', strokeWidth: 1 },
118-
textStyle: { fill: '#54f8cf', fontSize: 12 },
119-
legend: 'Min',
120-
legendOrientation: 'horizontal',
121-
legendPosition: minComesFirst ? 'top-left' : 'top-right',
122-
},
123-
]}
124-
theme={chartTheme}
125-
tooltip={makeTooltip(series.unit.trim())}
126-
useMesh
127-
xFormat={formatTime}
128-
xScale={{
129-
type: 'time',
130-
nice: true,
131-
min: minTime,
132-
max: maxTime
133-
}}
134-
yScale={{
135-
max: Math.max(maxAxisValue, minAxisValue + 1),
136-
min: minAxisValue,
137-
type: 'linear',
138-
nice: true
139-
}}
140-
/>
141-
</div>
142-
);
143-
};
78+
return (
79+
<div>
80+
<Header>
81+
<h2>
82+
{series.label} ({series.unit.trim()})
83+
</h2>
84+
<MinMax>
85+
<span className='heading heading-max'>Max:</span>
86+
<span>{maxValue.value}{series.unit}</span>
87+
<span>({ dayjs(maxValue.timestamp).format('HH:mm') })</span>
88+
<span className='heading heading-min'>Min:</span>
89+
<span>{minValue.value}{series.unit}</span>
90+
<span>({ dayjs(minValue.timestamp).format('HH:mm') })</span>
91+
</MinMax>
92+
</Header>
93+
<ResponsiveLine
94+
axisBottom={{
95+
tickRotation: -60,
96+
format: formatTime
97+
}}
98+
axisLeft={{
99+
tickCount: 5
100+
}}
101+
colors={[ color ]}
102+
curve='stepAfter'
103+
data={chartData}
104+
enablePoints={false}
105+
margin={{ top: 10, bottom: 90, left: 30, right: 10 }}
106+
markers={[
107+
{
108+
axis: 'x',
109+
value: maxValue.timestamp,
110+
lineStyle: { stroke: '#ffa600', strokeWidth: 1 },
111+
textStyle: { fill: '#ffa600', fontSize: 12 },
112+
legend: 'Max',
113+
legendOrientation: 'horizontal',
114+
legendPosition: minComesFirst ? 'top-right' : 'top-left'
115+
},
116+
{
117+
axis: 'x',
118+
value: minValue.timestamp,
119+
lineStyle: { stroke: '#54f8cf', strokeWidth: 1 },
120+
textStyle: { fill: '#54f8cf', fontSize: 12 },
121+
legend: 'Min',
122+
legendOrientation: 'horizontal',
123+
legendPosition: minComesFirst ? 'top-left' : 'top-right',
124+
},
125+
]}
126+
theme={chartTheme}
127+
tooltip={makeTooltip(series.unit.trim())}
128+
useMesh
129+
xFormat={formatTime}
130+
xScale={{
131+
type: 'time',
132+
nice: true,
133+
min: minTime,
134+
max: maxTime
135+
}}
136+
yScale={{
137+
max: Math.max(maxAxisValue, minAxisValue + 1),
138+
min: minAxisValue,
139+
type: 'linear',
140+
nice: true
141+
}}
142+
/>
143+
</div>
144+
);
145+
}
146+
);

‎src/modules/analysis/components/trackData/components/TrackData.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from "styled-components";
22
import { useAnalysis } from "../../context";
33
import { Chart } from "./Chart";
4+
import { observer } from 'mobx-react-lite';
45

56
const Grid = styled.div`
67
display: grid;
@@ -11,9 +12,22 @@ const Grid = styled.div`
1112

1213
const COLORS = ['#54ffff', '#ffa600', '#008000', '#a8dc5b', '#54f8cf', '#7cec96', '#d4c523'];
1314

14-
export const TrackData = () => {
15+
const extendSeries = (series, referenceTimestamp) => {
16+
const mostRecent = series.data[series.data.length - 1];
17+
18+
return {
19+
...series,
20+
data: [
21+
...series.data,
22+
{ ...mostRecent, timestamp: referenceTimestamp }
23+
]
24+
} ;
25+
};
26+
27+
export const TrackData = observer(() => {
1528

1629
const analysis = useAnalysis();
30+
const ts = analysis.referenceTimestamp();
1731

1832
return (
1933
<Grid>
@@ -23,13 +37,13 @@ export const TrackData = () => {
2337
<Chart
2438
color={COLORS[idx % COLORS.length]}
2539
key={s.label}
26-
maxTime={analysis.referenceTimestamp()}
40+
maxTime={ts}
2741
minTime={analysis.manifest.startTime}
28-
series={s}
42+
series={extendSeries(s, ts)}
2943
/>
3044
)
3145
)
3246
}
3347
</Grid>
3448
);
35-
};
49+
});

0 commit comments

Comments
 (0)