fa22-sustainability-water/Launder/components/GraphSVG.js at master · bengordon-dev/fa22-sustainability-water · GitHub

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
import { View } from "react-native";
import Svg, { Rect, Circle, Line } from "react-native-svg";
import { Text as SVGText } from "react-native-svg";

export default function GraphSVG(props) {
  const hourRange = 24 - props.startHour
  const displayChosenTime = props.chosenTime && ((props.day === "currentDay" && props.chosenTime.day === 0)
        || (props.day === "nextDay" && props.chosenTime.day === 1))
  return (
    <View width="100%" height={props.height} style={{alignItems: "center", justifyContent: "center"}}>
      <Svg height="100%" width={props.width} viewBox="0 0 180 140" >
        <SVGText fontFamily="nunito-semibold" x="90" y="10" fontSize="10" fill="black" textAnchor="middle" fontWeight="bold">{props.title}</SVGText>
        <Line x1="19" y1="120" x2="170" y2="120" stroke="black" strokeWidth="2" />
        <Line x1="20" y1="20" x2="20" y2="120" stroke="black" strokeWidth="2" />
        {props.points.length > 0 && props.points.map((point, i) => {
          return (<Circle cx={20 + (point[props.timeField] - props.startHour)/hourRange*150}
                  cy={120-(point[props.valField])/(props.maxVal)*100}
                  r={.5} key={i} fill="red">
                  </Circle>)
          }
        )}
        {props.points.length > 1 && [...Array(props.points.length - 1).keys()].map(i => <Line
          x1={20 + (props.points[i][props.timeField] - props.startHour)/hourRange*150}
          y1={120-(props.points[i][props.valField])/(props.maxVal)*100}
          x2={20 + (props.points[i + 1][props.timeField] - props.startHour)/hourRange*150}
          y2={120-(props.points[i + 1][props.valField])/(props.maxVal)*100}
          stroke="red"
          strokeWidth=".5"
          key={i}
        />)}
        {props.points.length >= 1 && <Line
          x1={20 + (props.points[props.points.length - 1][props.timeField] - props.startHour)/hourRange*150}
          x2={170}
          y1={120-(props.points[props.points.length - 1][props.valField])/(props.maxVal)*100}
          y2={120-(props.points[props.points.length - 1][props.valField])/(props.maxVal)*100}
          stroke="red"
          strokeWidth=".5"
        />}
        {props.points.length >= 1 && <Line
          x2={20 + (props.points[0][props.timeField] - props.startHour)/hourRange*150}
          x1={20}
          y1={120-(props.points[0][props.valField])/(props.maxVal)*100}
          y2={120-(props.points[0][props.valField])/(props.maxVal)*100}
          stroke="red"
          strokeWidth=".5"
        />}
        {[...Array(5).keys()].map(e => {
          const hours = props.startHour + e*hourRange/4
          const mins = Math.round((hours - Math.floor(hours))*60)
          return (
            <SVGText key={e} x={20 + e*150/4 } y={130} fontFamily="nunito-regular" fill="black" fontSize="6" textAnchor="middle">{`${Math.floor(hours)}:${mins < 10 ? "0" : ""}${mins}`}</SVGText>
        )})}
        <SVGText x={13.5} y={120} fill="black" fontFamily="nunito-regular" fontSize="6">{0}</SVGText>
        <SVGText fontFamily="nunito-regular" x={17 - 3.5*(Math.floor(props.maxVal/2)).toString().length} y={70} fill="black" fontSize="6">
          {Math.floor(props.maxVal/2)}
        </SVGText>
        <SVGText fontFamily="nunito-regular" x={17 - 3.5*(Math.floor(props.maxVal)).toString().length} y={25} fill="black" fontSize="6">
          {Math.floor(props.maxVal)}
        </SVGText>
        {props.availability.length > 0 &&
          props.availability.map((interval, i) => <Rect
            x={20 + (interval[0] - props.startHour*60)/(hourRange*60)*150}
            y={20} height={100} fill="blue" opacity=".1" width={interval[1]/(hourRange*60)*150} key={i}
          />)
        }
        {props.chosenTime && displayChosenTime && <Rect
            x={20 + (props.chosenTime.startTime - props.startHour*60)/(hourRange*60)*150}
            y={20} height={100} fill="orange" opacity=".1" width={props.chosenTime.width/(hourRange*60)*150}
          >
        </Rect>}

      </Svg>
    </View>
  )
}