Untitled
unknown
plain_text
2 years ago
1.6 kB
9
Indexable
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> </> ); }
Editor is loading...