leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.51k stars 371 forks source link

.u-over needs an inner clipping region #876

Open leeoniya opened 7 months ago

leeoniya commented 7 months ago

.u-over is currently overflow: visible, while .u-under is overflow: hidden.

https://github.com/leeoniya/uPlot/blob/c629511d9c2d6dbba5bc799c823b120ac55e722a/src/uPlot.css#L25-L32

this is done because the hover points in the dom are inside .u-over and should not be clipped at the edges of the plotting area. the cursor is also inside .u-over, but it should be clipped, because hiding it can simply be setting its coordinates to -10,-10. this is currently not possible so, there's extra code that actually applies or removes a .u-off class with display: none:

https://github.com/leeoniya/uPlot/blob/c629511d9c2d6dbba5bc799c823b120ac55e722a/src/dom.js#L79-L82

so, the broader issue is that sometimes we want to put things into .u-over for the benefits of using relative positioning, but sometimes need clipping at the edges (large hover points) and other times not (tooltips / menus):

image

for this to be possible we a additional div within .u-over that has position: absolute; overflow: hidden; width: 100%; height: 100%. maybe called .u-clipped or .u-inner and a uPlot option that instructs where to put the hover points, and provide a place to put unclipped dom things, like tooltips.