ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merged in feature/edit-tooltips-on-graphic (pull request #7)

Browse Source 
Исправлено отображение подсказок для графика TVD - статистика

Approved-by: Александр Васильевич Сироткин
This commit is contained in:
Салихов Тимур 2022-09-05 11:39:19 +00:00 committed by Александр Васильевич Сироткин
commit 2dbc9720bb
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/WellOperations/Tvd/TLPie.jsx
View File

@ -27,7 +27,7 @@ export const TLPie = memo(({ well }) => {
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [svgRef, setSvgRef] = useState() const [svgRef, setSvgRef] = useState()
const [stats, setStats] = useState([]) const [stats, setStats] = useState([])
const [selected, setSelected] = useState([]) const [selected, setSelected] = useState(null)
const [rootRef, { width, height }] = useElementSize() const [rootRef, { width, height }] = useElementSize()
@ -52,18 +52,20 @@ export const TLPie = memo(({ well }) => {
const onRow = useCallback((record) => { const onRow = useCallback((record) => {
const out = { const out = {
onMouseEnter: () => { onMouseEnter: () => {
setSelected(record.idCategory)
d3.selectAll('.tl-pie-part') d3.selectAll('.tl-pie-part')
.filter((d) => d.data.idCategory === record.idCategory) .filter((d) => d.data.idCategory === record.idCategory)
.attr('transform', 'scale(1.05)') .attr('transform', 'scale(1.05)')
}, },
onMouseLeave: () => { onMouseLeave: () => {
setSelected(null)
d3.selectAll('.tl-pie-part') d3.selectAll('.tl-pie-part')
.filter((d) => d.data.idCategory === record.idCategory) .filter((d) => d.data.idCategory === record.idCategory)
.attr('transform', 'scale(1)') .attr('transform', 'scale(1)')
} }
} }
if (record.idCategory === selected) if (record.idCategory === selected)
out.style = { background: '#FAFAFA' } out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600' }
return out return out
}, [selected]) }, [selected])
@ -125,6 +127,7 @@ export const TLPie = memo(({ well }) => {
const abovePi = (d) => (d.startAngle + d.endAngle) / 2 < Math.PI const abovePi = (d) => (d.startAngle + d.endAngle) / 2 < Math.PI
lines.merge(newLines) lines.merge(newLines)
.style('display', (d) => d.data.idCategory !== selected ? 'none' : 'block')
.attr('points', (d) => { .attr('points', (d) => {
const pos = outerArc.centroid(d) const pos = outerArc.centroid(d)
pos[0] = radius * 0.95 * (abovePi(d) ? 1 : -1) pos[0] = radius * 0.95 * (abovePi(d) ? 1 : -1)
@ -148,10 +151,11 @@ export const TLPie = memo(({ well }) => {
return `translate(${pos})` return `translate(${pos})`
}) })
.style('text-anchor', (d) => abovePi(d) ? 'start' : 'end') .style('text-anchor', (d) => abovePi(d) ? 'start' : 'end')
.style('display', (d) => d.data.idCategory !== selected ? 'none' : 'block')
.attr('width', radius * 0.4) .attr('width', radius * 0.4)
.text((d) => `${d.data.percent.toFixed(2)}% (${d.data.minutesTotal.toFixed(2)} мин)`) .text((d) => `${d.data.percent.toFixed(2)}% (${d.data.minutesTotal.toFixed(2)} мин)`)
}, [svgRef, data, radius]) }, [svgRef, data, radius, selected])
return ( return (
<div className={'tvd-right'}> <div className={'tvd-right'}>