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

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

Approved-by: Александр Васильевич Сироткин
This commit is contained in:
Салихов Тимур 2022-09-05 11:39:19 +00:00 committed by Александр Васильевич Сироткин
commit 2dbc9720bb

View File

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