@gravity-ui/chartkit 4.4.1 → 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,11 +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;
 // 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) {
@@ -46,17 +46,7 @@ export const AxisX = ({ axis, width, height, scale }) => {
             // Remove tick that has the same x coordinate like domain
             svgElement.select('.tick').remove();
         }
-        if (axis.title.text) {
-            const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
-            svgElement
-                .append('text')
-                .attr('class', b('title'))
-                .attr('text-anchor', 'middle')
-                .attr('x', width / 2)
-                .attr('y', textY)
-                .attr('font-size', axis.title.style.fontSize)
-                .text(axis.title.text);
-        }
+        // remove overlapping labels
         let elementX = 0;
         svgElement
             .selectAll('.tick')
@@ -70,6 +60,28 @@ export const AxisX = ({ axis, width, height, scale }) => {
             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
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('x', width / 2)
+                .attr('y', textY)
+                .attr('font-size', axis.title.style.fontSize)
+                .text(axis.title.text)
+                .call(setEllipsisForOverflowText, width);
+        }
     }, [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

@@ -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/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.

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.1",
+  "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"