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: 'KCHOL',
            value: 20.4,
            persentage: +1.07,
          },
          {
            category: 'A',
            name: 'FROTO',
            value: 18,
            persentage: -0.18,
          },
          {
            category: 'A',
            name: 'ENKAI',
            value: 13.3,
            persentage: +0.51,
          },
          {
            category: 'A',
            name: 'EREGL',
            value: 18.4,
            persentage: +1.0,
          },
        ],
      },
      {
        name: 'B',
        children: [
          {
            category: 'B',
            name: 'TCELL',
            value: 9.4,
            persentage: +2.72,
          },
          {
            category: 'B',
            name: 'TOASO',
            value: 7.9,
            persentage: +1.04,
          },
          {
            category: 'B',
            name: 'AEFES',
            value: 6.9,
            persentage: 3.85,
          },
          {
            category: 'B',
            name: 'ENJSA',
            value: 6.6,
            persentage: +1.47,
          },
          {
            category: 'B',
            name: 'OTKAR',
            value: 3.3,
            persentage: +0.12,
          },
          {
            category: 'B',
            name: 'ECILC',
            value: 10.5,
            persentage: +2.46,
          },
          {
            category: 'B',
            name: 'NUHCM',
            value: 5.2,
            persentage: -2.33,
          },
          {
            category: 'B',
            name: 'CCOLA',
            value: 3.1,
            persentage: +1.66,
          },
          {
            category: 'B',
            name: 'ISMEN',
            value: 5.2,
            persentage: -0.31,
          },
          {
            category: 'B',
            name: 'EGEEN',
            value: 6.3,
            persentage: -3,
          },
          {
            category: 'B',
            name: 'RANDOM',
            value: 2.3,
            persentage: -1,
          },
          {
            category: 'B',
            name: 'RANDOM2',
            value: 2.3,
            persentage: -1.2,
          },
        ],
      },
    ],
  };

  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 colorScale = d3
    .scaleQuantize()
    .domain([-4, 4])
    .range([
      colors.treeMapRdBg70,
      colors.treeMapRdBg55,
      colors.treeMapRdBg30,
      colors.treeMapWh30,
      colors.treeMapGrBg30,
      colors.treeMapGrBg50,
      colors.treeMapGrBg70,
    ]);

  return data ? (
    <View center>
      <Svg height={windowHeight} width={windowWidth} viewBox={`0 0 ${windowWidth} ${windowHeight}`}>
        {treemapRoot.leaves().map((leave: any) => {
          const percentage = leave.data.persentage;
          const color = colorScale(percentage);
          return (
            <G key={`${leave.data.name}_${leave.x0}_${leave.y0}`} transform={`translate(${leave.x0},${leave.y0})`}>
              <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"
                fontWeight={600}
                textAnchor="middle"
                alignmentBaseline="middle"
                fill={colors.primaryText}>
                {leave.data.name}
              </Text>
              <Text
                x={(leave.x1 - leave.x0) / 2}
                y={(leave.y1 - leave.y0) / 2 + 16}
                fontSize="18"
                fontWeight={600}
                textAnchor="middle"
                alignmentBaseline="middle"
                fill={colors.primaryText}>
                {`${leave.data.persentage > 0 ? '+' : ''}${leave.data.persentage}%`}
              </Text>
            </G>
          );
        })}
      </Svg>
    </View>
  ) : null;
}

export default TreeMap;