67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import ReactModal from "react-modal";
|
|
import TDRPopup from "./LoopTDRChartActionBar";
|
|
|
|
interface ChartModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
chartRef: React.RefObject<HTMLCanvasElement>;
|
|
}
|
|
|
|
const ChartModal: React.FC<ChartModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
chartRef,
|
|
}) => {
|
|
return (
|
|
<ReactModal
|
|
isOpen={isOpen}
|
|
onRequestClose={onClose}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "80%",
|
|
maxWidth: "50rem",
|
|
height: "30rem",
|
|
padding: "1rem",
|
|
overflow: "hidden",
|
|
},
|
|
}}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
position: "absolute",
|
|
top: "0.625rem",
|
|
right: "0.625rem",
|
|
background: "transparent",
|
|
border: "none",
|
|
fontSize: "1.5rem",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>
|
|
</button>
|
|
|
|
<div style={{ maxHeight: "100%", overflow: "auto" }}>
|
|
<TDRPopup />
|
|
</div>
|
|
|
|
<canvas
|
|
id="myChart"
|
|
ref={chartRef}
|
|
style={{ width: "100%", height: "20rem" }}
|
|
></canvas>
|
|
</ReactModal>
|
|
);
|
|
};
|
|
|
|
export default ChartModal;
|