Улучшена отрисовка точек на графике. Добавлена группировка и вынесение общих значений

src/components/d3/D3Chart.tsx

@@ -293,7 +293,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
             }
 
             if (chart.point)
-                renderPoint<DataType>(xAxis, yAxis, chart, chartData)
+                renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
 
             chart.afterDraw?.(chart)
         })

src/components/d3/renders/points.ts

@@ -4,7 +4,8 @@ export const renderPoint = <DataType extends Record<string, unknown>>(
     xAxis: (value: any) => number,
     yAxis: (value: any) => number,
     chart: ChartRegistry<DataType>,
-    data: DataType[]
+    data: DataType[],
+    embeded: boolean = false,
 ): DataType[] => {
     let config: Required<Omit<PointChartDataset, 'type'>> = {
         radius: 3,
@@ -16,40 +17,57 @@ export const renderPoint = <DataType extends Record<string, unknown>>(
         fillOpacity: 1,
     }
 
-    if (chart.type === 'point')
-        config = { ...config, ...chart }
-    else if (!chart.point)
-        return data
-    else
+    if (embeded)
         config = { ...config, ...chart.point }
+    else if (chart.type === 'point')
+        config = { ...config, ...chart }
+    else return data
 
-    const currentPoints = chart()
+    const getPointsRoot = (): d3.Selection<any, any, any, any> => {
+        let root = chart()
+        if (embeded) {
+            if (root.select('.points').empty())
+                root.append('g').attr('class', 'points')
+            root = root.select('.points')
+        }
+        return root
+    }
+
+    getPointsRoot()
+        .transition()
+        .duration(chart.animDurationMs ?? 0)
+        .attr('stroke-width', config.strokeWidth)
+        .attr('fill-opacity', config.fillOpacity)
+        .attr('fill', config.fillColor)
+        .attr('stroke', config.strokeColor)
+        .attr('stroke-opacity', config.strokeOpacity)
+
+    const currentPoints = getPointsRoot()
         .selectAll(config.shape)
         .data(data.filter(chart.y))
 
     currentPoints.exit().remove()
     currentPoints.enter().append(config.shape)
 
-    const newPoints = chart()
+    const newPoints = getPointsRoot()
         .selectAll(config.shape)
         .transition()
         .duration(chart.animDurationMs ?? 0)
 
-    if (config.shape === 'circle')
-        newPoints.attr('r', config.radius)
-        .attr('cx', (d: any) => xAxis(chart.x(d)))
-        .attr('cy', (d: any) => yAxis(chart.y(d)))
-    else
-        newPoints.attr('x1', (d: any) => xAxis(chart.x(d)))
-            .attr('x2', (d: any) => xAxis(chart.x(d)))
-            .attr('y1', (d: any) => yAxis(chart.y(d)) - config.radius)
-            .attr('y2', (d: any) => yAxis(chart.y(d)) + config.radius)
-
-    newPoints.attr('stroke-width', config.strokeWidth)
-        .attr('fill-opacity', config.fillOpacity)
-        .attr('fill', config.fillColor)
-        .attr('stroke', config.strokeColor)
-        .attr('stroke-opacity', config.strokeOpacity)
+    switch (config.shape) {
+        default:
+        case 'circle':
+            newPoints.attr('r', config.radius)
+                .attr('cx', (d: any) => xAxis(chart.x(d)))
+                .attr('cy', (d: any) => yAxis(chart.y(d)))
+            break
+        case 'line':
+            newPoints.attr('x1', (d: any) => xAxis(chart.x(d)))
+                .attr('x2', (d: any) => xAxis(chart.x(d)))
+                .attr('y1', (d: any) => yAxis(chart.y(d)) - config.radius)
+                .attr('y2', (d: any) => yAxis(chart.y(d)) + config.radius)
+            break
+    }
 
     return data
 }