Untitled
unknown
plain_text
2 years ago
1.6 kB
5
Indexable
import React from 'react'; import { Colors, View, Text } from 'react-native-ui-lib'; const HeatMap = ({ memoized }) => { return ( <View flex-1 padding-20> <View center marginB-5 row> <View flex-0> {memoized?.xLabels.map((hour, index) => ( <View key={index} padding-2> <Text grey30>{hour}</Text> </View> ))} </View> <View paddingL-10 center /> {memoized?.finalData.map((row, index) => ( <View key={index} padding-1 flex-1> <View> {row.map((value, subIndex) => ( <View key={subIndex} center padding-2 backgroundColor={getColor(value)}> <Text>{value}</Text> </View> ))} </View> </View> ))} </View> <View center marginB-5 row> <View paddingL-25 center /> {memoized?.yLabels.map((day, index) => ( <View key={index} flex-1 center row> <Text grey30 textBO80>{day}</Text> </View> ))} </View> <View center flex> <Text grey30 text80BO>DAYS</Text> </View> </View> ); }; const getColor = (value) => { if (value < 30) { return Colors.orange80; } else if (value < 40) { return Colors.orange70 } else if (value < 50) { return Colors.orange60 } else if (value < 60) { return Colors.orange50; } else if (value < 70) { return Colors.orange40 } else if (value < 80) { return Colors.orange30 } else { return Colors.orange20; } }; export default HeatMap;
Editor is loading...