Добавлены ограничения для размещения тултипа графика ЕСО

This commit is contained in:
goodmice 2022-08-10 14:39:03 +05:00
parent fc6646eb80
commit 15333510fd
2 changed files with 7 additions and 8 deletions

View File

@ -31,7 +31,7 @@ const defaultProps: WellIconProps = {
} }
export const WellIcon = React.memo(({ width, height, state, online, colors, ...other } : WellIconProps = defaultProps) => { export const WellIcon = React.memo(({ width, height, state, online, colors, ...other } : WellIconProps = defaultProps) => {
colors = {...defaultColors, ...colors} colors = { ...defaultColors, ...colors }
return ( return (
<svg <svg
@ -59,9 +59,9 @@ export const WellIcon = React.memo(({ width, height, state, online, colors, ...o
</g> </g>
{online && ( // Полоски, показывающие наличие свежей телеметрии {online && ( // Полоски, показывающие наличие свежей телеметрии
<g stroke={colors.online}> <g stroke={colors.online}>
<path d="m18.4 0.0662a2 2 0 0 1 0.141 1.7 2 2 0 0 1-1.22 1.19"/> <path d={'m18.4 0.0662a2 2 0 0 1 0.141 1.7 2 2 0 0 1-1.22 1.19'} />
<path d="m19.5 0.0402a3 3 0 0 1-1.79 3.85"/> <path d={'m19.5 0.0402a3 3 0 0 1-1.79 3.85'} />
<path d="m20.5 0.031a4 4 0 0 1-2.5 4.79"/> <path d={'m20.5 0.031a4 4 0 0 1-2.5 4.79'} />
</g> </g>
)} )}
</svg> </svg>

View File

@ -137,8 +137,7 @@ export const TLChart = memo(({
.selectAll('rect') .selectAll('rect')
.filter((d) => d.idCategory === data.idCategory) .filter((d) => d.idCategory === data.idCategory)
.attr('stroke-width', '2px') .attr('stroke-width', '2px')
const rect = e.target.getBoundingClientRect() setTooltipPos(e.target.getBoundingClientRect())
setTooltipPos({ x: rect.x, y: rect.y })
setSelected(data) setSelected(data)
}) })
.on('mouseout', (e, data) => { .on('mouseout', (e, data) => {
@ -153,8 +152,8 @@ export const TLChart = memo(({
const tooltipStyle = useMemo(() => { const tooltipStyle = useMemo(() => {
return { return {
...tooltipSize, ...tooltipSize,
left: tooltipPos.x - tooltipSize.width - 8, left: Math.min(tooltipPos.x, screen.width) - tooltipSize.width - 8,
top: tooltipPos.y - tooltipSize.height / 2 + barHeight / 2, top: Math.min(tooltipPos.y - tooltipSize.height / 2 + barHeight / 2, screen.height - tooltipSize.height - 160),
} }
}, [tooltipPos, tooltipSize, barHeight]) }, [tooltipPos, tooltipSize, barHeight])