1import React, { useMemo } from 'react';
2import { css } from '@emotion/css';
3
4interface XYCanvasProps {
5  top: number; // css pxls
6  left: number; // css pxls
7}
8
9/**
10 * Renders absolutely positioned element on top of the uPlot's plotting area (axes are not included!).
11 * Useful when you want to render some overlay with canvas-independent elements on top of the plot.
12 */
13export const XYCanvas: React.FC<XYCanvasProps> = ({ children, left, top }) => {
14  const className = useMemo(() => {
15    return css`
16      position: absolute;
17      overflow: visible;
18      left: ${left}px;
19      top: ${top}px;
20    `;
21  }, [left, top]);
22
23  return <div className={className}>{children}</div>;
24};
25