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
import React, { useState, useEffect } from 'react'
import { ScaleBand } from 'd3-scale'
import { ITimePeriod } from 'services/dataConsumptionContracts'
import { DateTime } from 'luxon'
interface HashProps {
challengePeriod: ITimePeriod | null
multiFluid: boolean
xScale: ScaleBand<string>
padding: number
width: number
height: number
}
const Hash = (props: HashProps) => {
const { challengePeriod, multiFluid, xScale, padding, width, height } = props
/*
number array with
- the start position of the area
- the width of the area
*/
const [scale, setScale] = useState<number[]>([])
useEffect(() => {
function loadScale() {
if (challengePeriod) {
const startScale = xScale(
challengePeriod.startDate
.startOf('day')
.toLocaleString(DateTime.DATETIME_SHORT)
)
const endScale = xScale(
challengePeriod.endDate
.startOf('day')
.toLocaleString(DateTime.DATETIME_SHORT)
)
if (!startScale && !endScale) {
setScale([])
} else if (startScale && !endScale) {
setScale([startScale - padding, width - startScale])
} else if (!startScale && endScale) {
setScale([0, endScale - padding])
} else if (startScale && endScale) {
setScale([startScale - padding, endScale - startScale])
}
} else {
setScale([])
}
}
loadScale()
}, [xScale])
return (
<g>
{scale.length > 0 && multiFluid ? (
<g>
<g transform={`translate(${scale[0] + 1}, -40)`}>
<defs>
<pattern
id="hash"
width="8"
height="8"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)"
>
<rect width="3" height="8" fill="#255454"></rect>
</pattern>
</defs>
<rect
x="0"
y="0"
width={scale[1]}
height={height + 40}
fill="url(#hash)"
/>
</g>
<g transform={`translate(${scale[0] + 1}, ${height - 2})`}>
<rect x="0" y="0" width={scale[1]} height={2} fill="#61F0F2" />
</g>
</g>
) : null}
</g>
)
}
export default Hash