From 83666424adb23293e2ea10978c10b829e8feae1e Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Wed, 12 Oct 2022 17:37:45 +0400
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82=D1=8B=20?=
 =?UTF-8?q?=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF=D1=80=D0=B8=20?=
 =?UTF-8?q?=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/D3HorizontalPercentChart.tsx           | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx
index 224fa52..2a532db 100644
--- a/src/components/d3/D3HorizontalPercentChart.tsx
+++ b/src/components/d3/D3HorizontalPercentChart.tsx
@@ -20,7 +20,7 @@ export type D3HorizontalChartProps = {
     height?: Property.Height
     data: PercentChartDataType[]
     offset?: Partial<ChartOffset>
-    afterDraw?: (d: d3.Selection<d3.BaseType, PercentChartDataType, d3.BaseType, unknown>) => void
+    afterDraw?: (d: d3.Selection<SVGRectElement, PercentChartDataType, SVGGElement, unknown>) => void
 }
 
 const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 }
@@ -37,7 +37,8 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const [divRef, { width, height }] = useElementSize()
     const rootRef = useRef<SVGGElement | null>(null)
 
-    const root = useCallback(() => d3.select(rootRef.current), [rootRef.current])
+    const selectedRootRef = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
+    const root = selectedRootRef()
 
     const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
     const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
@@ -50,15 +51,15 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
         const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
         const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
 
-        root().selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
-        root().selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
+        root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
+        root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
             .selectAll('.tick')
             .attr('class', 'tick grid-line')
     }, [root, width, height, xScale, inlineHeight])
 
     useEffect(() => { /// Отрисовываем ось Y слева
         if (width < 100 || height < 100 || !root) return
-        root().selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
+        root.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
     }, [root, width, height, yScale])
 
     useEffect(() => {
@@ -66,18 +67,20 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 
         const delay = d3.transition().duration(500).ease(d3.easeLinear)
 
-        const rects = root().selectChild('.data').selectAll('rect').data(data)
+        const rects = root.selectChild('.data').selectAll('rect').data(data)
         rects.enter().append('rect')
         rects.exit().remove()
-        root().selectChild<SVGGElement>('.data')
-            .selectAll<SVGRectElement, PercentChartDataType>('rect')
-            .attr('fill', (d) => d.color || 'black')
-            .attr('y', (d) => yScale(d.name) ?? null)
-            .attr('height', yScale.bandwidth())
-            .transition(delay)
-            .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
 
-        afterDraw?.(root().selectChild('.data').selectAll('rect'))
+        const selectedRects = root.selectChild<SVGGElement>('.data')
+                                  .selectAll<SVGRectElement, PercentChartDataType>('rect')
+
+        selectedRects.attr('fill', (d) => d.color || 'black')
+                     .attr('y', (d) => yScale(d.name) ?? null)
+                     .attr('height', yScale.bandwidth())
+                     .transition(delay)
+                     .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
+
+        afterDraw?.(selectedRects)
 
     }, [data, width, height, root, yScale, xScale, afterDraw])