Untitled

import React, { memo, useMemo, useState } from 'react';
import { View } from 'react-native-ui-lib';
import { ITimeEntry, TimeHeatMap } from "react-time-heatmap";

type Props = {
  report: any;
  company?: any;
};

const VisitorsOverTime = ({ report, company }: Props) => {
  const memozied: any = useMemo(() => {
    let xLabels = [];
    let yLabels = [];
    let finalData = [];
    let yLabelsVisibility = [];
    let xLabelsVisibility = [];
    const dayNames = [];
    const finalArray = [];
    const fArray = [];
    const parseDate = (date: any) => {
      const y = date.toString().substr(0, 4);
      const m = date.toString().substr(4, 2);
      const d = date.toString().substr(6, 2);
      return new Date(y, m - 1, d);
    };
    const getDayName = (date: any) => {
      const y = date.toString().substr(0, 4);
      const m = date.toString().substr(4, 2);
      const d = date.toString().substr(6, 2);
      return new Date(y, m - 1, d).toString().split(' ')[0];
    };
    const getDay = (date: any) => {
      return date.substr(6, 2);
    };
    const getHour = (date: any) => {
      return date.substr(8, 2);
    };
    const connectionCheck = (connectList: any, type: any) => {
      let isConnection = false;

      if (connectList && connectList.length > 0) {
        connectList.forEach((item: any) => {
          if (item.type === type) {
            isConnection = item.connect;
          }
        });
      }

      return isConnection;
    };

    const gaData = report && report?.data?.analytics;
    const connectList = report && report?.data?.connectList;



    const isConnectionError = !connectionCheck(connectList, 'GOOGLE');
    let isError = false;
    let isNoDataError = false;
    let errorMessageType;
    let isAnalyticsError = false;

    if (!report) {
      isError = true;
      errorMessageType = 'errorMessage';
    } else if (isConnectionError || !gaData) {
      isAnalyticsError = true;
      errorMessageType = 'googleErrorMessage';
    }

    if (!isError && !isConnectionError && !isAnalyticsError) {
      const userDateHourData =
        report &&
        report?.data?.analytics &&
        report?.data?.analytics?.userDateHour;

      if (!userDateHourData || userDateHourData.length === 0) {
        isNoDataError = true;
        errorMessageType = 'noDataErrorMessage';
      }

      if (!isNoDataError) {
        const newData: any = [];
        userDateHourData.map((item: any) => {
          newData.push({
            date: item.name,
            dateNum: parseInt(item.name, 10),
            dateFormat: parseDate(item.name),
            session: item.sessions,
          });
          return null;
        });
        const len = newData.length;
        for (let i = len - 1; i >= 0; i -= 1) {
          for (let j = 1; j <= i; j += 1) {
            if (newData[j - 1].dateNum > newData[j].dateNum) {
              const temp = newData[j - 1];
              newData[j - 1] = newData[j];
              newData[j] = temp;
            }
          }
        }
        let day = getDay(newData[0].date);
        const arr = [];

        dayNames.push(getDayName(newData[0].date));

        for (let i = 0; i < 7; i += 1) {
          const singleArr = [];
          for (let k = 0; k < newData.length; k += 1) {
            const newDataDay = getDay(newData[k].date);
            if (newDataDay === 'a' || newDataDay === '') {
              // eslint-disable-next-line no-continue
              continue;
            } else if (newDataDay === day) {
              singleArr.push({
                hour: getHour(newData[k].date),
                sessions: newData[k].session,
              });
              newData[k].date = 'a';
            } else {
              day = newDataDay;
              dayNames.push(getDayName(newData[k].date));
              break;
            }
          }
          arr.push(singleArr);
        }
        dayNames.pop();

        let h;
        for (let m = 0; m < 7; m += 1) {
          for (let n = 0; n < 24; n += 1) {
            if (arr[m][n]) {
              h = parseInt(arr[m][n].hour, 10);
              if (h !== n) {
                arr[m].splice(n, 0, { hour: n, sessions: 0 });

              }
            } else {
              arr[m].push({ hour: n, sessions: 0 });
            }
            finalArray.push(arr[m][n].sessions);
          }
          fArray.push(arr[m]);
        }

        const rotatedArray: any[] = [];
        for (let t = 0; t < 24; t += 1) {
          for (let f = 6; f >= 0; f -= 1) {
            rotatedArray.push(fArray[f][t].sessions);
          }
        }
        yLabels = new Array(24).fill(0).map((_, i) => `${i}`);
        yLabelsVisibility = new Array(24).fill(0).map((_, i) => true);
        xLabels = dayNames;
        finalData = new Array(yLabels.length).fill(0).map((key, index) => {
          const count = index;
          return new Array(xLabels.length)
            .fill(0)
            .map((_key, index) => rotatedArray[index + count * 7]);
        });
      }
    }

    if (!isError && !isConnectionError && !isNoDataError && !isAnalyticsError) {
      xLabels = new Array(24).fill(0).map((_, i) => `${i}`);
      xLabelsVisibility = new Array(24).fill(0).map((_, i) => true);
      yLabels = dayNames;
      finalData = new Array(yLabels.length).fill(0).map((key, index) => {
        const count = index;
        return new Array(xLabels.length)
          .fill(0)
          .map((_key, index) => finalArray[index + count * 24]);
      });
    }
    return { finalData, finalArray, dayNames, yLabels, yLabelsVisibility, xLabels, xLabelsVisibility }
  }, [report]);


  return (
    <View flex-1>
      <TimeHeatMap
        xLabels={memozied?.xLabels}
        yLabels={memozied?.yLabels}
        yLabelsVisibility={memozied?.yLabelsVisibility}
        timeEntries={memozied?.xLabels}
        showCounts={true}
        data={memozied?.finalData}
        numberOfGroups={7}
      />
    </View>
  );

};

export default VisitorsOverTime;