Newer
Older
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
import React, { Component } from 'react'
import { ScrollView } from 'react-native'
import { temperatureDaysSortedByDate } from './db'
import range from 'date-range'
import Svg,{
G,
Polyline,
Rect,
Text,
} from 'react-native-svg'
import { LocalDate } from 'js-joda'
const right = 350
const top = 10
const bottom = 350
const columnWidth = 30
const dateRow = {
height: 30,
width: right
}
function makeDayColumn(labelInfo) {
return (
<G>
<Rect
x={labelInfo.rightOffset}
y={top}
width={columnWidth}
height={bottom - top - dateRow.height}
fill="lightgrey"
strokeWidth="1"
stroke="grey"
/>
<Text
stroke="purple"
fontSize="10"
x={labelInfo.rightOffset}
y={bottom - top - dateRow.height}
>{labelInfo.label.split('-')[2]}</Text>
</G>
)
}
function getPreviousDays(n) {
const today = new Date()
today.setHours(0); today.setMinutes(0); today.setSeconds(0); today.setMilliseconds(0)
const twoWeeksAgo = new Date(today - (range.DAY * n))
return range(twoWeeksAgo, today).reverse()
}
const xAxisDates = getPreviousDays(14).map(jsDate => {
return LocalDate.of(
jsDate.getFullYear(),
jsDate.getMonth() + 1,
jsDate.getDate()
).toString()
})
const xAxisDatesWithRightOffset = xAxisDates.map((datestring, columnIndex) => {
const rightOffset = right - (columnWidth * (columnIndex + 1))
return {
label: datestring,
rightOffset
}
})
function determineCurvePoints(temperatureDaysSortedByDate, xAxisDatesWithRightOffset) {
return temperatureDaysSortedByDate.map(cycleDay => {
const x = xAxisDatesWithRightOffset.find(tick => tick.label === cycleDay.date).rightOffset
const y = normalizeToScale(cycleDay.temperature.value)
return [x,y].join()
}).join(' ')
}
function normalizeToScale(temp) {
const scale = {
low: 33,
high: 40
}
const tempInScaleDecs = (scale.high - temp) / (scale.high - scale.low)
const scaleHeight = bottom - top
return scaleHeight * tempInScaleDecs
}
export default class SvgExample extends Component {
render() {
return (
<ScrollView horizontal={true}>
<Svg
height="350"
width="2000"
>
{xAxisDatesWithRightOffset.map(makeDayColumn)}
<Polyline
points={determineCurvePoints(temperatureDaysSortedByDate, xAxisDatesWithRightOffset)}
fill="none"
stroke="black"
strokeWidth="2"
/>
</Svg>
</ScrollView>
)
}
}