From 8bb98f6c4c41089859cb38f16ea47b735c2f0284 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Mon, 11 Jul 2022 12:53:40 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D1=81=20=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=D0=BC=D0=B8=20=D0=BD=D0=B0=20D3Chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/D3Chart.tsx | 45 ++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx
index 6462601..4ed1f24 100644
--- a/src/components/d3/D3Chart.tsx
+++ b/src/components/d3/D3Chart.tsx
@@ -8,6 +8,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { isDev, usePartialProps } from '@utils'
 
 import D3MouseZone from './D3MouseZone'
+import { getChartClass } from './functions'
 import {
     renderArea,
     renderLine,
@@ -43,8 +44,6 @@ const defaultOffsets: ChartOffset = {
     right: 10,
 }
 
-export const getGroupClass = (key: string | number) => `chart-id-${key}`
-
 export const getByAccessor = <DataType extends Record<any, any>, R>(accessor: keyof DataType | ((d: DataType) => R)): ((d: DataType) => R) => {
     if (typeof accessor === 'function')
         return accessor
@@ -184,29 +183,53 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
         return yAxis
     }, [charts, data, domain, height, offset])
 
+    const nTicks = {
+        color: 'lightgray',
+        ...ticks,
+        x: {
+            visible: false,
+            format: (d: any) => String(d),
+            count: 10,
+            ...ticks?.x,
+        }
+    }
+
     useEffect(() => { // Рисуем ось X
         if (!xAxis) return
         xAxisArea().transition()
             .duration(animDurationMs)
             .call(d3.axisBottom(xAxis)
-                .tickSize((ticks?.x?.visible ?? false) ? -height + offset.bottom : 0)
-                .tickFormat((d) => ticks?.x?.format?.(d) ?? String(d))
-                .ticks(ticks?.x?.count ?? 10) as any // TODO: Исправить тип
+                .tickSize(nTicks.x.visible ? -height + offset.bottom : 0)
+                .tickFormat((d, i) => nTicks.x.format(d, i))
+                .ticks(nTicks.x.count) as any // TODO: Исправить тип
             )
 
-        xAxisArea().selectAll('.tick line').attr('stroke', ticks?.color || 'lightgray')
+        xAxisArea().selectAll('.tick line').attr('stroke', nTicks.x.color || nTicks.color)
     }, [xAxisArea, xAxis, animDurationMs, height, offset, ticks])
 
     useEffect(() => { // Рисуем ось Y
         if (!yAxis) return 
+
+        const nTicks = {
+            color: 'lightgray',
+            ...ticks,
+            y: {
+                visible: false,
+                format: (d: any) => String(d),
+                count: 10,
+                ...ticks?.y,
+            }
+        }
+
         yAxisArea().transition()
             .duration(animDurationMs)
             .call(d3.axisLeft(yAxis)
-                .tickSize((ticks?.y?.visible ?? false) ? -width + offset.left + offset.right : 0)
-                .ticks(ticks?.y?.count ?? 10) as any // TODO: Исправить тип
+                .tickSize(nTicks.y.visible ? -width + offset.left + offset.right : 0)
+                .tickFormat((d, i) => nTicks.y.format(d, i))
+                .ticks(nTicks.y.count) as any // TODO: Исправить тип
             )
         
-        yAxisArea().selectAll('.tick line').attr('stroke', ticks?.color || 'lightgray')
+        yAxisArea().selectAll('.tick line').attr('stroke', nTicks.y.color || nTicks.color)
     }, [yAxisArea, yAxis, animDurationMs, width, offset, ticks])
 
     useEffect(() => {
@@ -232,7 +255,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
                     chartIdx = charts.length
 
                 const newChart: ChartRegistry<DataType> = Object.assign(
-                    () => chartArea().select('.' + getGroupClass(dataset.key)) as d3.Selection<SVGGElement, DataType, any, unknown>,
+                    () => chartArea().select('.' + getChartClass(dataset.key)) as d3.Selection<SVGGElement, DataType, any, unknown>,
                     {
                         width: 1,
                         opacity: 1,
@@ -252,7 +275,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
                 if (!newChart().node())
                     chartArea()
                         .append('g')
-                        .attr('class', getGroupClass(newChart.key))
+                        .attr('class', getChartClass(newChart.key))
 
                 charts[chartIdx] = newChart
             })