mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
e9aa8a3c2f
* 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
22 lines
662 B
TypeScript
22 lines
662 B
TypeScript
import { useToken } from '@chakra-ui/react';
|
|
import * as d3 from 'd3';
|
|
import React from 'react';
|
|
|
|
const ChartTooltipLine = () => {
|
|
const lineColor = useToken('colors', 'gray.400');
|
|
return <line className="ChartTooltip__line" stroke={ lineColor } strokeDasharray="3"/>;
|
|
};
|
|
|
|
export default React.memo(ChartTooltipLine);
|
|
|
|
export function useRenderLine(ref: React.RefObject<SVGGElement>, chartHeight: number | undefined) {
|
|
return React.useCallback((x: number) => {
|
|
d3.select(ref.current)
|
|
.select('.ChartTooltip__line')
|
|
.attr('x1', x)
|
|
.attr('x2', x)
|
|
.attr('y1', 0)
|
|
.attr('y2', chartHeight || 0);
|
|
}, [ ref, chartHeight ]);
|
|
}
|