mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
403bc9e882
* draw dotted line for incomplete data * add title to tooltip * refactor parts into separate components * move utils * refactor render logic of tooltip * more refactoring * fix issue in safari * tweaks * test * make an approximation as a straight line. * update screenshots * fix the tooltip hiding behavior. * add prop for disabling animation
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { useToken } from '@chakra-ui/react';
|
|
import * as d3 from 'd3';
|
|
import React from 'react';
|
|
|
|
import { calculateContainerHeight } from './utils';
|
|
|
|
const ChartTooltipBackdrop = () => {
|
|
const bgColor = useToken('colors', 'blackAlpha.900');
|
|
|
|
return (
|
|
<rect
|
|
className="ChartTooltip__backdrop"
|
|
rx={ 12 }
|
|
ry={ 12 }
|
|
fill={ bgColor }
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ChartTooltipBackdrop);
|
|
|
|
interface UseRenderBackdropParams {
|
|
seriesNum: number;
|
|
transitionDuration: number | null;
|
|
}
|
|
|
|
export function useRenderBackdrop(ref: React.RefObject<SVGGElement>, { seriesNum, transitionDuration }: UseRenderBackdropParams) {
|
|
return React.useCallback((width: number, isIncompleteData: boolean) => {
|
|
const height = calculateContainerHeight(seriesNum, isIncompleteData);
|
|
|
|
if (transitionDuration) {
|
|
d3.select(ref.current)
|
|
.select('.ChartTooltip__backdrop')
|
|
.transition()
|
|
.duration(transitionDuration)
|
|
.ease(d3.easeLinear)
|
|
.attr('width', width)
|
|
.attr('height', height);
|
|
} else {
|
|
d3.select(ref.current)
|
|
.select('.ChartTooltip__backdrop')
|
|
.attr('width', width)
|
|
.attr('height', height);
|
|
}
|
|
}, [ ref, seriesNum, transitionDuration ]);
|
|
}
|