From 11187fa9373573fea4e9513302facebb3e68f4c6 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Fri, 2 Sep 2022 14:53:59 +0400
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=BE=D0=BA=20=D0=B4=D0=BB=D1=8F=20=D0=B3=D1=80=D0=B0?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BA=D0=B0=20TVD=20-=20=D1=81=D1=82=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=B8=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WellOperations/Tvd/TLPie.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/WellOperations/Tvd/TLPie.jsx b/src/pages/WellOperations/Tvd/TLPie.jsx
index 6b94c3a..b86382f 100644
--- a/src/pages/WellOperations/Tvd/TLPie.jsx
+++ b/src/pages/WellOperations/Tvd/TLPie.jsx
@@ -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'}>