export interface ProfitChartWidgetType {
  [key: string]: string | number;
}

interface CumulativeProfitChartProps {
  data: ProfitChartWidgetType;
}

const CumulativeProfitChart = ({data}: CumulativeProfitChartProps) => {
  const [profitData, setProfitData] = useState<ProfitChartWidgetType[]>([]);
  const darkTheme = useTheme().palette.mode === "dark";

  useEffect(() => {
    if (data.length === 0) {
      setProfitData([]);
    } else {
      setProfitData(parseProfitData(data));
    }
  }, [data]);

  if(Object.entries(data).length === 0) {
    return <></>;
  }

  return <>
    <TooltipMui title="прибыль" placement="top-start">
      <Typography pl={1} component="span" fontSize="xxx-large" fontWeight={600}>
        ${parseFloat(`${profitPercentage}`).toFixed(2)}
        {
          profitPercentage > 0 ?
            <span style={{paddingLeft: 10}} >
              <ArrowSircleIconForWidget htmlColor="#006943" />
            </span> : <></>
        }
      </Typography>
    </TooltipMui>

    <Box p={1} mt={-2.5} height="calc(100% - 110px)">
      <ResponsiveContainer
        minHeight={"100%"}
        height="100%"
        width="100%"
      >
        <LineChart margin={{
          top: 20,
          right: 0,
          left: 3,
          bottom: -5,
        }} width={500} data={profitData}>
          <CartesianGrid strokeDasharray="3 3" stroke={darkTheme ? "#5c5a57" : "#ccc"} />
          <XAxis
            dataKey="date"
            axisLine={false}
            tickLine={false}
            minTickGap={-20}
            tick={({x, y, payload}) => {
              const date = dayjs(payload.value);
              const weekday = date.locale("ru").format("dd");
              const day = date.format("DD");

              return (
                <text
                  x={x}
                  y={y + 10}
                  textAnchor="middle"
                  fill="#9E9B98"
                  fontSize={13}
                >
                  {`${weekday}, ${day}`}
                </text>
              );
            }}
          />
          <YAxis
            orientation="right"
            axisLine={false}
            tickLine={false}
            tick={({x, y, payload}) => {
              return (
                <text
                  x={x + 15}
                  y={y}
                  textAnchor="middle"
                  fill="#9E9B98"
                  fontSize={13}
                >
                  {
                    +payload.value >= 0 ? `$${Math.abs(+payload.value)}` : `-$${Math.abs(+payload.value)}`
                  }
                </text>
              );
            }}
          />
          <Tooltip content={<CustomTooltip />} />
          <Line
            type="linear"
            dataKey="profit"
            stroke="#006943"
            strokeWidth={3}
            dot={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </Box>
  </>;
};

const parseProfitData = (profitData: Record<string, string | number>): ProfitChartWidgetType[] => {
  const result: ProfitChartWidgetType[] = [];

  const dates: string[] = Object.keys(profitData).sort((a, b) => dayjs(a).isBefore(dayjs(b)) ? -1 : 1);
  let prevDate = dates[0];

  for (const date of dates) {
    if (Object.hasOwnProperty.call(profitData, date)) {
      const currentDate = dayjs(date);
      const prevDateValue = profitData[prevDate];
      const currentDateValue = typeof profitData[date] === "number" ? profitData[date] : parseFloat(profitData[date] as string);

      if (currentDate.diff(prevDate, "day") > 1) {
        const missingDates = findMissingDates(prevDate, currentDate);

        for (const missingDate of missingDates) {
          result.push({
            date: missingDate,
            profit: prevDateValue,
          });
        }
      }

      result.push({
        date: date,
        profit: currentDateValue,
      });

      prevDate = date;
    }
  }

  return result;
};

const findMissingDates = (prevDate: string, currentDate: dayjs.ConfigType): string[] => {
  const missingDates: string[] = [];
  let tempDate = dayjs(prevDate).add(1, "day");

  while (tempDate.isBefore(currentDate, "day")) {
    missingDates.push(tempDate.format("YYYY-MM-DD"));
    tempDate = tempDate.add(1, "day");
  }

  return missingDates;
};

const CustomTooltip = ({active, payload, label}: any) => {
  if (active && payload && payload.length) {
    const profitValue = parseFloat(`${Math.abs(+payload[0].payload.profit)}`).toFixed(2);

    return (
      <Box bgcolor="#21201F" px={2} height={32} display="flex" alignItems="center" borderRadius={5} >
        <text style={{color: "#fff", fontSize: "small"}}>
          {+payload[0].payload.profit >= 0 ? `$${profitValue}` : `-$${profitValue}`}
        </text>
      </Box>
    );
  }

  return null;
};

нужно те даты, которые мы добавляем новые missingDate делать dot true, у остальных, которые есть dot={false}