export const CandleChart = ({
  candles,
  uniqueId,
  symbolName,
  orders,
  amount,
  openPrice,
  closePrice,
  onScreenshotCreated,
  chartInterval,
  setChartInterval,
  waiting,
  setWaiting,
  height,
  showIntervalSelector,
}: CandleChartProps) => {
  const chart = useRef<Chart|null>(null);
  const paneId = useRef<string>("");
  const [figureId, setFigureId] = useState<string>("");
  const precision = useSelector((state: AppState) => state.binancePrecision.futures[symbolName.toUpperCase()]);
  const kline = useSelector((state: AppState) => state.binanceKline.futures[`${symbolName.toLocaleLowerCase()}@kline_${chartInterval}`]) || null;
  useEffect(() => {
    if (precision && null !== chart.current) {
      chart.current.setPriceVolumePrecision(precision?.price || 4, precision?.quantity || 2);
    }
  }, [chart.current, precision]);

  useEffect(() => {
    if (kline && null !== chart.current) {
      chart.current.updateData(kline);
    }
  }, [kline, chart.current]);

  useEffect(() => {
    // @ts-ignore
    chart.current = init(`chart-${uniqueId}`, {styles: chartStyles(theme)});

    return () => dispose(`chart-${uniqueId}`);
  }, [uniqueId]);


  useEffect(() => {
    chart.current?.applyNewData(candles);
    chart.current?.overrideIndicator({
      name: "VOL",
      shortName: "Объем",
      calcParams: [],
      figures: [
        {
          key: "volume",
          title: "",
          type: "bar",
          baseValue: 0,
          styles: (data: IndicatorFigureStylesCallbackData<Vol>, indicator: Indicator, defaultStyles: IndicatorStyle) => {
            const kLineData = data.current.kLineData as KLineData;
            let color: string;

            if (kLineData.close > kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].upColor", (defaultStyles.bars)[0].upColor) as string;
            } else if (kLineData.close < kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].downColor", (defaultStyles.bars)[0].downColor) as string;
            } else {
              color = utils.formatValue(indicator.styles, "bars[0].noChangeColor", (defaultStyles.bars)[0].noChangeColor) as string;
            }

            return {color};
          },
        },
      ],
    }, paneId.current);
    chart.current?.createIndicator("VOL", false, {id: paneId.current});
  }, [candles]);
  useEffect(() => {
    if (!orders || orders.length === 0 || candles.length === 0 || !amount || amount.length === 0) return;

    const minTime = orders[0].time;
    const maxTime = orders[orders.length - 1].time;
    const needleTime = minTime + (maxTime - minTime) / 2;

    chart.current?.scrollToTimestamp(needleTime + 50 * getMinutesTickSizeByInterval(chartInterval) * 60 * 1000);
    drawTrade(chart, paneId, orders, chartInterval, amount);

    if (openPrice && closePrice) {
      let openTime = Infinity;
      let closeTime = -Infinity;

      orders.forEach(order => {
        if (openTime > order.time) {
          openTime = order.time;
        }

        if (closeTime < order.time) {
          closeTime = order.time;
        }
      });

      drawTradeLines(
        chart,
        openPrice,
        openTime,
        closePrice,
        closeTime,
        orders[0].position,
        paneId,
        precision.price,
        precision.quantity,
      );
    }
  }, [orders, candles, uniqueId]);
  const removeFigure = () => {
    chart.current?.removeOverlay({
      id: figureId,
    });
    setFigureId("");
  };


  return (<>

        <Stack direction="row" height={height && !handle.active ? 550 : "100%" || "calc(100% - 140px)"} width="100%">
          <CandleChartToolbar
            setFigureId={setFigureId}
            chart={chart}
            paneId={paneId}
            handle={handle}
          />
          <Box
            ref={ref}
            id={`chart-${uniqueId}`}
            width="calc(100% - 55px)"
            height="100%"
            sx={{borderLeft: theme => `2px solid ${theme.palette.grey[50]}`}}
          >
            {
              figureId.length > 0 &&
              <Stack
                sx={{
                  backgroundColor: darkMode ? "#474747" : "#CBD4E3",
                  borderRadius: 1,
                  position: "absolute",
                  zIndex: 10,
                  right: 80,
                  top: 30,
                  border: theme => `2px solid ${theme.palette.grey[50]}`,
                }}
                spacing={2}
              >
                <IconButton sx={{borderRadius: 1}} onClick={removeFigure}>
                  <Icon component={BasketIcon} />
                </IconButton>
              </Stack>
            }
          </Box>
        </Stack>


  </>);
};

CandleChart.displayName = "CandleChart";

const CandleChartToolbar = ({chart, paneId, setFigureId, 
: CandleChartToolbarProps) => {

  const removeOverlay = () => {
    chart.current?.removeOverlay();
    setFigureId("");
  };


  return <>
    <Stack

      <PriceLineTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <HorizontalStraightLineTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <RayLineTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <SegmentTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <StraightLineTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <ParallelStraightLineTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <FibonacciLineTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <RulerTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>
      <RectTool chart={chart} paneId={paneId} setFigureId={setFigureId}/>

      <IconButton sx={{borderRadius: 2, "&:hover": {backgroundColor: darkMode ? "#2b2b2b !important" : ""}}} style={{height: 40}} onClick={fullScreenHandle}>
        <Icon component={FullScreenIcon} sx={{height: 18}} />
      </IconButton>

      <IconButton sx={{borderRadius: 2, "&:hover": {backgroundColor: darkMode ? "#2b2b2b !important" : ""}}} onClick={removeOverlay}>
        <Icon component={BasketIcon}/>
      </IconButton>
    </Stack>
  </>;
};

export default CandleChartToolbar;

import {ToolProps} from "./Tool.props";
import {Icon, IconButton, useTheme} from "@mui/material";
import React from "react";
import {StraightLineIcon} from "../../../icons";

const StraightLineTool = ({chart, paneId, setFigureId}: ToolProps) => {
  const darkMode = useTheme().palette.mode === "dark";

  const onClickHandler = () => {
    chart.current?.createOverlay({
      name: "straightLine",
      styles: {
        line: {
          color: darkMode ? "#fff" : "#1e293b",
        },
        rect: {
          color: darkMode ? "#fff3" : "#1e293b5e",
        },
        point: {
          color: darkMode ? "#fff" : "#1e293b",
          borderColor: darkMode ? "#fff" : "#1e293b",
          activeColor: darkMode ? "#fff" : "#1e293b",
          activeBorderColor: darkMode ? "#fff3" : "#1e293bd1",
        },
      },
      onSelected: function(event) {
        setFigureId(event.overlay.id);

        return false;
      },
      onDeselected: function() {
        setFigureId("");

        return false;
      },
      onDrawEnd: function(event) {
        console.log(event);

        return false;
      },
    });
  };

  return <>
    <IconButton onClick={onClickHandler} sx={{borderRadius: 2, color: darkMode ? "#fff" : "#677294", "&:hover": {backgroundColor: darkMode ? "#2b2b2b !important" : ""}}}>
      <Icon component={StraightLineIcon} />
    </IconButton>
  </>;
};

export default StraightLineTool;


1. Мы рисуем фигуры
2. Приведен один пример отрисвки фигуры StraightLineTool, остальные фигуры так же рисуются
3.  в onDrawEnd при отрисовке приходят все данные о фигуре.
4.  нужно сделать сохранение всех фигур в localStorage (Чтобы при перерисовки страницы, открытии графика потом, на нем отображались фигуры которые мы нарисовали.)
5. При отрисовке нужно доставать данные и рисовать эти фигуры. 
5. Проанализируй весь код, 
6. Напиши весь код,  что и куда мне надо написать, функции, пропсы все пропиши, все-все напиши чтобы условие работало.
7. напиши мне полностью  CandleChart и CandleChartToolbar и StraightLineTool
8. Обязательно должен быть typescript