e0d9b4d335
* Fiddle around with everything, WIP FR charts * Implement numeric chart * Reorganize everything into neat little files * Add `AreaWithTopStroke` helper * Tidying, don't gratuitously use d3.format * Remove duplicate code * Better tooltip bisection * `NumericPoint` -> `DistributionPoint` * Add numeric market tooltip * Make numeric chart bucket points less wrong * Clean up numeric bucket computation * Clean up a bunch of tooltip stuff, add FR legend tooltips * Fix a dumb bug * Implement basic time selection * Fix fishy Date.now inconsistency bugs * Might as well show all the FR outcomes now * Make tooltips accurate on curveStepAfter charts * Make log scale PN charts work properly * Adjust x-axis tick count * Display tooltip on charts only for mouse * Fix up deps * Tighter chart tooltips * Adjustments to chart time range management * Better date formatting * Continue tweaking time selection handling to be perfect * Make FR charts taller by default
18 lines
514 B
TypeScript
18 lines
514 B
TypeScript
import { RefObject, useState, useEffect } from 'react'
|
|
|
|
// todo: consider consolidation with use-measure-size
|
|
export const useElementWidth = <T extends Element>(ref: RefObject<T>) => {
|
|
const [width, setWidth] = useState<number>()
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setWidth(ref.current?.clientWidth)
|
|
}
|
|
handleResize()
|
|
window.addEventListener('resize', handleResize)
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize)
|
|
}
|
|
}, [ref])
|
|
return width
|
|
}
|