@gravity-ui/chartkit 4.4.0 → 4.5.0

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -5,6 +5,7 @@ type Props = {
     width: number;
     height: number;
     scale: ChartScale;
+    chartWidth: number;
 };
-export declare const AxisX: ({ axis, width, height, scale }: Props) => React.JSX.Element;
+export declare const AxisX: ({ axis, width, height, scale, chartWidth }: Props) => React.JSX.Element;
 export {};

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

@@ -1,29 +1,11 @@
 import React from 'react';
 import { axisBottom, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, parseTransformStyle } from '../utils';
+import { formatAxisTickLabel, parseTransformStyle, setEllipsisForOverflowText } 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 }) => {
+export const AxisX = ({ axis, width, height, scale, chartWidth }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -64,6 +46,30 @@ export const AxisX = ({ axis, width, height, scale }) => {
             // Remove tick that has the same x coordinate like domain
             svgElement.select('.tick').remove();
         }
+        // remove overlapping labels
+        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();
+        // add an ellipsis to the labels on the right that go beyond the boundaries of the chart
+        svgElement.selectAll('.tick text').each(function () {
+            const node = this;
+            const textRect = node.getBoundingClientRect();
+            if (textRect.right > chartWidth) {
+                const maxWidth = textRect.width - (textRect.right - chartWidth) * 2;
+                select(node).call(setEllipsisForOverflowText, maxWidth);
+            }
+        });
+        // add an axis header if necessary
         if (axis.title.text) {
             const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
             svgElement
@@ -73,9 +79,9 @@ export const AxisX = ({ axis, width, height, scale }) => {
                 .attr('x', width / 2)
                 .attr('y', textY)
                 .attr('font-size', axis.title.style.fontSize)
-                .text(axis.title.text);
+                .text(axis.title.text)
+                .call(setEllipsisForOverflowText, width);
         }
-        removeOverlappingXTicks(svgElement);
     }, [axis, width, height, scale]);
     return React.createElement("g", { ref: ref });
 };

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

@@ -53,7 +53,7 @@ export const Chart = (props) => {
                 xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, chartWidth: width })))),
                 shapes),
             legend.enabled && (React.createElement(Legend, { width: boundsWidth, offsetWidth: chart.margin.left, height: legend.height, legend: legend, offsetHeight: height - legend.height / 2, chartSeries: preparedSeries, onItemClick: handleLegendItemClick }))),
         React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));

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;
@@ -33,14 +33,15 @@ const createScales = (args) => {
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     let xScale;
     let yScale;
+    const xAxisMinPadding = boundsWidth * xAxis.maxPadding;
+    const xRange = [0, boundsWidth - xAxisMinPadding];
     switch (xType) {
         case 'linear': {
             const domain = getDomainDataXBySeries(visibleSeries);
-            const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
             if (isNumericalArrayData(domain)) {
                 const [domainXMin, xMax] = extent(domain);
                 const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
+                xScale = scaleLinear().domain([xMinValue, xMax]).range(xRange).nice();
             }
             break;
         }
@@ -52,20 +53,22 @@ const createScales = (args) => {
                     series: visibleSeries,
                 });
                 xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
+                if (xScale.step() / 2 < xAxisMinPadding) {
+                    xScale.range(xRange);
+                }
             }
             break;
         }
         case 'datetime': {
-            const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
             if (xTimestamps) {
                 const [xMin, xMax] = extent(xTimestamps);
-                xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
+                xScale = scaleUtc().domain([xMin, xMax]).range(xRange).nice();
             }
             else {
                 const domain = getDomainDataXBySeries(visibleSeries);
                 if (isNumericalArrayData(domain)) {
                     const [xMin, xMax] = extent(domain);
-                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
+                    xScale = scaleUtc().domain([xMin, xMax]).range(xRange).nice();
                 }
             }
             break;

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -80,12 +80,8 @@ const getMarginLeft = (args) => {
     return marginLeft;
 };
 const getMarginRight = (args) => {
-    const { chart, hasAxisRelatedSeries, series, preparedXAxis } = args;
-    let marginRight = get(chart, 'margin.right', 0);
-    if (hasAxisRelatedSeries) {
-        marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
-    }
-    return marginRight;
+    const { chart } = args;
+    return get(chart, 'margin.right', 0);
 };
 export const getPreparedChart = (args) => {
     const { chart, series, preparedLegend, preparedXAxis, preparedY1Axis, preparedTitle } = args;
@@ -98,7 +94,7 @@ export const getPreparedChart = (args) => {
         preparedXAxis,
     });
     const marginLeft = getMarginLeft({ chart, hasAxisRelatedSeries, series, preparedY1Axis });
-    const marginRight = getMarginRight({ chart, hasAxisRelatedSeries, series, preparedXAxis });
+    const marginRight = getMarginRight({ chart });
     return {
         margin: {
             top: marginTop,

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.d.ts

@@ -1,6 +1,7 @@
 import { AxisDomain } from 'd3';
 import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
 export * from './math';
+export * from './text';
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];

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

@@ -5,6 +5,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 export * from './math';
+export * from './text';
 const CHARTS_WITHOUT_AXIS = ['pie'];
 /**
  * Checks whether the series should be drawn with axes.
@@ -150,8 +151,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/build/plugins/d3/renderer/utils/text.d.ts

@@ -0,0 +1,2 @@
+import { Selection } from 'd3-selection';
+export declare function setEllipsisForOverflowText(selection: Selection<SVGTextElement, any, null, undefined>, maxWidth: number): void;

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

@@ -0,0 +1,12 @@
+export function setEllipsisForOverflowText(selection, maxWidth) {
+    var _a, _b;
+    let text = selection.text();
+    selection.text(null).attr('text-anchor', 'left').append('title').text(text);
+    const tSpan = selection.append('tspan').text(text);
+    let textLength = ((_a = tSpan.node()) === null || _a === void 0 ? void 0 : _a.getComputedTextLength()) || 0;
+    while (textLength > maxWidth && text.length > 1) {
+        text = text.slice(0, -1);
+        tSpan.text(text + '…');
+        textLength = ((_b = tSpan.node()) === null || _b === void 0 ? void 0 : _b.getComputedTextLength()) || 0;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.7.13",
+    "@gravity-ui/yagr": "^3.8.0",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"