Untitled

import React, { useEffect, useState } from 'react';
import { useWindowDimensions } from 'react-native';
import * as d3 from 'd3';
import * as SvgC from 'react-native-svg';
import { useColors } from '../../hooks/useColors';
import { TreeMapItem } from '../TreeMapGItem';
import { ScrollView } from 'react-native-gesture-handler';
import { Matriks } from '../Matriks';
import { WatchlistDefaultList } from './Watchlist/WatchlistDefaultList';
import { GetMatriksIndicators } from '../../api/matriks';
import { isEmpty } from 'lodash';

const { Svg } = SvgC;

type Props = {
  symbolCode: string;
  list?: boolean;
};

function TreeMap({ symbolCode, list }: Props) {
  const { colors }: any = useColors();
  const { height, width } = useWindowDimensions();
  const { data: indicators } = GetMatriksIndicators();

  const [impactData, setImpactData] = useState<any[]>([]);
  const [symbolData, setSymbolData] = useState<any[]>([]);
  const [subscriptionData, setSubscriptionData] = useState<any>(null);

  const impactAnalysis = async () => {
    try {
      const response = await Matriks.getImpactAnalysis('XELKT');
      setImpactData(response?.list);
    } catch (error) {
      console.log('getImpactAnalysis error', error);
    }
  };
  const prepareSubscriptionData = (data: any[]) => {
    const symbols = data.map(item => item.symbol);
    return symbols;
  };
  useEffect(() => {
    impactAnalysis();
  }, [symbolCode]);

  useEffect(() => {
    setSubscriptionData(prepareSubscriptionData(impactData));
  }, [impactData]);

  useEffect(() => {
    if (subscriptionData) {
      async () => {
        try {
          await Matriks.subscribeSymbol(
            subscriptionData,
            (response: any) => {
              setSymbolData(response);
            },
            [],
          );
        } catch (error) {
          console.log('subscribeSymbol Error', error);
        }
      };
    }
  }, [symbolCode]);

  let VIEWABLE_ITEMS: any[] = [];

  const onViewableItemsChanged = ({ viewableItems }: any) => {
    const renew = async () => {
      Matriks.unsubscribe();

      if (!isEmpty(viewableItems)) {
        VIEWABLE_ITEMS = viewableItems;
        Matriks.subscribeSymbol(subscriptionData, () => {}, indicators || []);
      }
    };
    renew();
  };

  const data = {
    children: impactData.map(item => ({
      name: item.symbol,
      weight: item.weight,
      percentage: 0,
    })),
  };

  const root: any = d3
    .hierarchy(data)
    .sum((d: any) => d.weight)
    .sort((a: any, b: any) => b.weight - a.weight);
  const treemapRoot = d3.treemap().size([width, height]).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,
    ]);

  const hidePercent = 48;
  const hideHeigth = 24;
  const hideWidth = 40;
  const treeData = treemapRoot.leaves();

  return subscriptionData && data ? (
    <ScrollView style={{ maxHeight: height - 160 }}>
      {!list ? (
        <Svg height={height} width={width} viewBox={`0 0 ${width} ${height}`}>
          {treeData?.map((item: any) => (
            <TreeMapItem
              key={`${item?.data?.name}_${item?.x0}_${item?.y0}`}
              item={item}
              colorScale={colorScale}
              hidePercent={hidePercent}
              hideHeigth={hideHeigth}
              hideWidth={hideWidth}
              colors={colors}
            />
          ))}
        </Svg>
      ) : (
        <WatchlistDefaultList
          onViewableItemsChanged={onViewableItemsChanged}
          data={subscriptionData}
          viewAll
          notShowSecond
          showVolume={0}
          itemLimit={10}
          screenName={'marketSymbolDetail'}
        />
      )}
    </ScrollView>
  ) : null;
}

export default TreeMap;