cally/components/pages/todos/family-chores/FamilyChart.tsx

import React, {useEffect, useState} from "react";
import { BarChart } from "react-native-gifted-charts";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import {chartDayMap} from "@/constants/common";

const FamilyChart = ({ children }: {
  children: Array<UserProfile>;
}) => {
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    let dayPointsMap = {
      Monday: {},
      Tuesday: {},
      Wednesday: {},
      Thursday: {},
      Friday: {},
      Saturday: {},
      Sunday: {},
    };
    children?.forEach((child) => {
      let weeklyDayPoints = child.weeklyDayPoints || {
        Monday: 0,
        Tuesday: 0,
        Wednesday: 0,
        Thursday: 0,
        Friday: 0,
        Saturday: 0,
        Sunday: 0,
      };

      Object.keys(weeklyDayPoints).forEach((day) => {
        dayPointsMap = {
          ...dayPointsMap,
          [day]: {
            ...dayPointsMap[day],
            [child.uid]: weeklyDayPoints[day]
          }
        }
      })
    })

    const data = Object.keys(dayPointsMap).map((day) => {
      const userMap = dayPointsMap[day];
      let stacks = Object.keys(userMap).map((userId) => {

        let userProfile = children?.find((child) => child.uid === userId);
        return {
          value: userMap[userId],
          color: userProfile.eventColor
        }
      });

      return {
        stacks: stacks,
        label: chartDayMap[day],
      }
    });
    setDataList(data);
  }, [children])

  return (
    <BarChart
      stackData={dataList}
      width={250}
      height={150} // Height of the chart
      barWidth={20} // Width of each bar
      noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
      maxValue={1000} // Max value on the chart
      stepValue={200} // Step size for horizontal lines
      yAxisThickness={0} // Hide the Y-axis line
      // yAxisLabelTexts={["0", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
      hideRules={false} // Show the horizontal lines
      rulesType="solid"
      rulesThickness={1.2}
      rulesColor="#DADADA" // Color for the horizontal lines
      stackBorderTopLeftRadius={5} // Round the bars
      stackBorderTopRightRadius={5} // Round the bars
      spacing={16}
      xAxisLabelTextStyle={{
        fontSize: 10.41,
        fontFamily: "Manrope_600SemiBold",
        color: "#7f7f7f",
      }}
      yAxisTextStyle={{
        fontSize: 9.61,
        fontFamily: "Manrope_400Regular",
        color: "#7f7f7f",
      }}
      disableScroll
    />
  );
};

export default FamilyChart;