@gravity-ui/chartkit 4.4.0 → 4.4.1

package/build/plugins/d3/renderer/components/AxisX.js

@@ -4,24 +4,6 @@ import { block } from '../../../../utils/cn';
 import { formatAxisTickLabel, parseTransformStyle } from '../utils';
 const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
-// Note: this method do not prepared for rotated labels
-const removeOverlappingXTicks = (axis) => {
-    var _a;
-    const a = axis.selectAll('g.tick').nodes();
-    if (a.length <= 1) {
-        return;
-    }
-    for (let i = 0, x = 0; i < a.length; i++) {
-        const node = a[i];
-        const r = node.getBoundingClientRect();
-        if (r.left < x) {
-            (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-        }
-        else {
-            x = r.right + EMPTY_SPACE_BETWEEN_LABELS;
-        }
-    }
-};
 // FIXME: add overflow ellipsis for the labels that out of boundaries
 export const AxisX = ({ axis, width, height, scale }) => {
     const ref = React.useRef(null);
@@ -75,7 +57,19 @@ export const AxisX = ({ axis, width, height, scale }) => {
                 .attr('font-size', axis.title.style.fontSize)
                 .text(axis.title.text);
         }
-        removeOverlappingXTicks(svgElement);
+        let elementX = 0;
+        svgElement
+            .selectAll('.tick')
+            .filter(function () {
+            const node = this;
+            const r = node.getBoundingClientRect();
+            if (r.left < elementX) {
+                return true;
+            }
+            elementX = r.right + EMPTY_SPACE_BETWEEN_LABELS;
+            return false;
+        })
+            .remove();
     }, [axis, width, height, scale]);
     return React.createElement("g", { ref: ref });
 };

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -7,15 +7,15 @@ const isNumericalArrayData = (data) => {
 };
 const filterCategoriesByVisibleSeries = (args) => {
     const { axisDirection, categories, series } = args;
-    return categories.filter((category) => {
-        return series.some((s) => {
-            return (isSeriesWithCategoryValues(s) &&
-                s.data.some((d) => {
-                    const dataCategory = getDataCategoryValue({ axisDirection, categories, data: d });
-                    return dataCategory === category;
-                }));
-        });
+    const visibleCategories = new Set();
+    series.forEach((s) => {
+        if (isSeriesWithCategoryValues(s)) {
+            s.data.forEach((d) => {
+                visibleCategories.add(getDataCategoryValue({ axisDirection, categories, data: d }));
+            });
+        }
     });
+    return categories.filter((c) => visibleCategories.has(c));
 };
 const createScales = (args) => {
     const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { group } from 'd3';
-import { getRandomCKId } from '../../../../../utils';
 import { getOnlyVisibleSeries } from '../../utils';
 import { BarXSeriesShapes } from './bar-x';
 import { ScatterSeriesShape } from './scatter';
@@ -23,8 +22,7 @@ export const useShapes = (args) => {
                 case 'scatter': {
                     if (xScale && yScale) {
                         const scatterShapes = chartSeries.map((scatterSeries, i) => {
-                            const id = getRandomCKId();
-                            return (React.createElement(ScatterSeriesShape, { key: `${i}-${id}`, top: top, left: left, series: scatterSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
+                            return (React.createElement(ScatterSeriesShape, { key: i, top: top, left: left, series: scatterSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
                         });
                         acc.push(...scatterShapes);
                     }

package/build/plugins/d3/renderer/hooks/useShapes/scatter.js

@@ -47,16 +47,13 @@ export function ScatterSeriesShape(props) {
             return;
         }
         const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
         const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
             ? series.data
             : prepareLinearScatterData(series.data);
         svgElement
-            .selectAll('allPoints')
+            .selectAll('circle')
             .data(preparedData)
-            .enter()
-            .append('circle')
-            .attr('class', b('point'))
+            .join((enter) => enter.append('circle').attr('class', b('point')), (update) => update, (exit) => exit.remove())
             .attr('fill', (d) => d.color || series.color || '')
             .attr('r', (d) => d.radius || DEFAULT_SCATTER_POINT_RADIUS)
             .attr('cx', (d) => getCxAttr({ point: d, xAxis, xScale }))

package/build/plugins/d3/renderer/utils/index.js

@@ -150,8 +150,5 @@ const extractCategoryValue = (args) => {
 export const getDataCategoryValue = (args) => {
     const { axisDirection, categories, data } = args;
     const categoryValue = extractCategoryValue({ axisDirection, categories, data });
-    if (!categories.includes(categoryValue)) {
-        throw new Error('It seems you are trying to use category value that is not in categories array');
-    }
     return categoryValue;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",