Untitled
plain_text
2 months ago
3.8 kB
1
Indexable
Never
import React from 'react'; import { Dimensions } from 'react-native'; import * as d3 from 'd3'; import * as SvgC from 'react-native-svg'; import { View } from 'react-native-ui-lib'; import { useColors } from '../../hooks/useColors'; const { Rect, G, Svg, Text } = SvgC; export function TreeMap() { const { colors }: any = useColors(); const data = { name: 'Root', children: [ { name: 'A', children: [ { category: 'A', name: 'TCELL', value: 20.4, }, { category: 'A', name: 'TOASO', value: 12.9, }, { category: 'A', name: 'AEFES', value: 6.9, }, { category: 'A', name: 'ENJSA', value: 3.6, }, { category: 'A', name: 'OTKAR', value: 3.3, }, { category: 'A', name: 'ECILC', value: 10.5, }, ], }, { name: 'B', children: [ { category: 'B', name: 'KCHOL', value: 20.4, }, { category: 'B', name: 'FROTO', value: 18, }, { category: 'B', name: 'ENKAI', value: 13.3, }, { category: 'B', name: 'EREGL', value: 18.4, }, ], }, { name: 'C', children: [ { category: 'C', name: 'NUHCM', value: 9.2, }, { category: 'C', name: 'CCOLA', value: 8.1, }, { category: 'C', name: 'ISMEN', value: 5.2, }, { category: 'C', name: 'EGEEN', value: 13.3, }, ], }, ], }; const windowWidth = Dimensions.get('window').width; const windowHeight = 640; const root: any = d3 .hierarchy(data) .sum((d: any) => d.value) .sort((a: any, b: any) => b.value - a.value); const treemapRoot = d3.treemap().size([windowWidth, windowHeight]).padding(1)(root); const mapColors = [ colors.treeMapGrBg30, colors.treeMapWh30, colors.treeMapGrBg50, colors.treeMapRdBg70, colors.treeMapRdBg30, colors.treeMapRdBg55, ]; return data ? ( <View center> <Svg height={windowHeight} width={windowWidth} viewBox={`0 0 ${windowWidth} ${windowHeight}`}> {treemapRoot.leaves().map((leave: any, index: any) => { const color = mapColors[index % mapColors.length]; return ( <G key={`${leave.data.name}_${leave.x0}_${leave.y0}`} transform={`translate(${leave.x0},${leave.y0})`} onPress={() => console.log('hello')}> <Rect width={leave.x1 - leave.x0} height={leave.y1 - leave.y0} fill={color} /> <Text x={(leave.x1 - leave.x0) / 2} y={(leave.y1 - leave.y0) / 2} fontSize="18" textAnchor="middle" alignmentBaseline="middle" fill="#ffff"> {leave.data.name} </Text> <Text x={(leave.x1 - leave.x0) / 2} y={(leave.y1 - leave.y0) / 2 + 16} fontSize="18" textAnchor="middle" alignmentBaseline="middle" fill={colors.primaryText}> {`${leave.data.value}%`} </Text> </G> ); })} </Svg> </View> ) : null; } export default TreeMap;