export const CandleChart = ({

}: CandleChartProps) => {
  const chart = useRef<Chart|null>(null);

  const openOrdersEl = {
    "30443150224": {
      apiKeyId: "2",
      apiKeyName: "Test",
      id: "30443150224",
      symbol: "BTCUSDT",
      type: "LIMIT",
      price:  0.0634,
      quantity: 100,
      side: "long",
      status: "NEW",
    },
    "30443151724": {
      apiKeyId: "2",
      apiKeyName: "Test",
      id: "30443151724",
      symbol: "BTCUSDT",
      type: "LIMIT",
      price:  0.0636,
      quantity: 102,
      side: "short",
      status: "NEW",
    },
    "35678150224": {
      apiKeyId: "2",
      apiKeyName: "Test",
      id: "35678150224",
      symbol: "BTCUSDT",
      type: "LIMIT",
      price:  0.0632,
      quantity: 100,
      side: "long",
      status: "NEW",
    },
    "31234560224": {
      apiKeyId: "2",
      apiKeyName: "Test",
      id: "31234560224",
      symbol: "BTCUSDT",
      type: "LIMIT",
      price:  0.06338,
      quantity: 102,
      side: "long",
      status: "NEW",
    },
  };

  return (<>
          <Box
            ref={ref}
            id={`chart-${uniqueId}`}
            width={!showToolbar ? "calc(100% - 5px)" : "calc(100% - 55px)"}
            height="100%"
            position="relative"
            sx={{borderLeft: theme => `2px solid ${theme.palette.grey[50]}`}}
          >
          </Box>
  </>);
};

import {MutableRefObject} from "react";
import React, {useEffect} from "react";
import {Chart, registerOverlay} from "klinecharts";
import {IconButton} from "@mui/material";

interface BarTradeEntity {
  id: string
  symbol: string
  price: number;
  side: string;
  quantity: number;
}

interface OpenordersProps {
  chart: MutableRefObject<Chart | null | undefined>,
  paneId: MutableRefObject<string>,
  settingOpenOrder: BarTradeEntity,
  priceClose: number,
}

const Openorders = ({chart, paneId, settingOpenOrder, priceClose}: OpenordersProps) => {
  const {id, price, quantity, side, symbol} = settingOpenOrder;
  const color = side === "long" ? "#006943" : "#B41C18";
  console.log("Openorders");

  const customizeChart = () => {
    registerOverlay({
      name: "customOverlay",
      needDefaultXAxisFigure: true,
      totalStep: 1,
      createPointFigures: function({overlay, coordinates}) {
        const percent = ((price / priceClose) * 100) - 100;
        const text = `$${price} | ${quantity} | ${`${percent.toFixed(2)}`}% |   .`;
        const w = (text.length * 5.8);
        const crossSize = 8;
        const crossX = 100 + w - (crossSize * 3) - 3;
        const crossY = coordinates[0].y - crossSize / 2 - 2;

        return [
          {
            type: "line",
            attrs: {
              coordinates: [
                {x: 0, y: coordinates[0].y},
                {x: 100, y: coordinates[0].y},
              ],
            },
            styles: {
              style: "solid",
              // color: "#006943",
            },
          },
          {
            type: "line",
            attrs: {
              width: 2,
              coordinates: [
                {x: crossX, y: crossY},
                {x: crossX + crossSize, y: crossY + crossSize},
              ],
            },
            styles: {
              style: "solid",
              color: "#B41C18",
            },
          },
          {
            type: "line",
            attrs: {
              width: 2,
              coordinates: [
                {x: crossX, y: crossY + crossSize},
                {x: crossX + crossSize, y: crossY},
              ],
            },
            styles: {
              style: "solid",
              color: "#B41C18",
            },
          },
          {
            type: "line",
            attrs: {
              coordinates: [
                {x: 100 + w - 14, y: coordinates[0].y},
                {x: 10000, y: coordinates[0].y},
              ],
            },
            styles: {
              style: "solid",
              // color: "#006943",
            },
          },
          {
            type: "rectText",
            attrs: {
              x: 100,
              y: coordinates[0].y - 12,
              text: text,
              baseline: "top",
            },
            styles: {
              style: "stroke_fill",
              color: color,
              backgroundColor: side === "long" ? "#0069431a" : "#B41C181a",
              borderColor: color,
            },
          },
        ];
      },
    });
  };

  const onClickHandler = () => {
    chart.current?.createOverlay({
      name: "customOverlay",
      styles: {
        rect: {
          color: color,
          borderColor: color,
        },
        text: {
          color: color,
        },
        line: {
          color: color,
        },
      },
      points: [{
        value: price,
      }],
      onClick: function(event) {
        console.log(event.overlay.id);
        console.log(symbol, id);

        return false;
      },
    });
  };

  useEffect(() => {
    customizeChart();
  }, []);
  useEffect(() => {
    console.log("onClickHandler");
    onClickHandler();
  }, [customizeChart]);

  return <>
    <IconButton onClick={onClickHandler} sx={{borderRadius: 2, color: "#677294"}}>
      ord
    </IconButton>
  </>;
};

export default Openorders;

Openorders не отрисовывается, как мне его отрисовывать?