Untitled

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;