forked from ddrilling/asb_cloud_front
Добавлены ограничения для размещения тултипа графика ЕСО
This commit is contained in:
parent
fc6646eb80
commit
15333510fd
@ -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>
|
||||||
|
@ -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])
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user