Untitled

import React from 'react';
import { useColors } from '../../hooks/useColors';
import { View, Text } from 'react-native-ui-lib';

export function HeatMap() {
  const { colors }: any = useColors();

  const data = [
    { name: 'KCHOL', y: 100, x: 23 },
    { name: 'FROTO', y: 90, x: 15 },
    { name: 'ENKAI', y: 80, x: 34 },
    { name: 'EREGL', y: 70, x: 65 },
    { name: 'ISDMR', y: 60, x: 23 },
    { name: 'SAHOL', y: 50, x: 53 },
    { name: 'BIMAS', y: 40, x: 12 },
    { name: 'TCELL', y: 30, x: 54 },
    { name: 'TOASO', y: 20, x: 12 },
    { name: 'CCOLA', y: 10, x: 44 },
    { name: 'AEFES', y: 5, x: 22 },
    { name: 'ENJSA', y: 4, x: 64 },
    { name: 'FROTO', y: 2, x: 32 },
    { name: 'OTKAR', y: 1, x: 23 },
  ];
  const getBackgroundColor = x => {
    if (x >= 20 && x < 30) {
      return colors.middleGreenDarkCl;
    } else if (x >= 30 && x < 60) {
      return colors.lavenderDarkCl;
    } else if (x >= 60 && x <= 80) {
      return colors.malibuDarkCl;
    } else if (x >= 80 && x <= 100) {
      return 'red';
    } else {
      return colors.action; 
    }
  };
  return (
    <>
      <View flex-1 width={400} height={700}>
        {data.map(item => (
          <View
            key={item.name}
            style={{
              backgroundColor: getBackgroundColor(item.x),
              width: 1.5 * item.y,
              height: 1.5 * item.y,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text center>{item.name}</Text>
            <Text center>{item.x}</Text>
          </View>
        ))}
      </View>
    </>
  );
}