Untitled

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;