@gravity-ui/chartkit 4.6.0 → 4.6.1

package/build/plugins/d3/renderer/D3Widget.js

@@ -4,9 +4,19 @@ import debounce from 'lodash/debounce';
 import { getRandomCKId } from '../../../utils';
 import { Chart } from './components';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
+    const { data, onLoad, onRender } = props;
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
+    //FIXME: add chartPerfomance data to callbacks;
+    React.useLayoutEffect(() => {
+        if (onLoad) {
+            onLoad({});
+        }
+        if (onRender) {
+            onRender({});
+        }
+    }, []);
     const handleResize = React.useCallback(() => {
         var _a;
         const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -44,6 +54,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: data }))));
 });
 export default D3Widget;

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

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

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

@@ -18,14 +18,12 @@ function getLabelFormatter({ axis, scale }) {
         });
     };
 }
-export const AxisX = React.memo(({ axis, width, height, scale, chartWidth }) => {
+export const AxisX = React.memo(({ axis, width, height, scale }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
         const xAxisGenerator = axisBottom({
             scale: scale,
             ticks: {
@@ -43,22 +41,12 @@ export const AxisX = React.memo(({ axis, width, height, scale, chartWidth }) =>
                 color: axis.lineColor,
             },
         });
-        svgElement.call(xAxisGenerator).attr('class', b());
-        if (axis.labels.enabled) {
-            svgElement.style('font-size', axis.labels.style.fontSize);
-        }
-        // add an ellipsis to the labels on the right that go beyond the boundaries of the chart
-        svgElement.selectAll('.tick text').each(function () {
-            var _a;
-            const node = this;
-            const textRect = node.getBBox();
-            const matrix = ((_a = node.transform.baseVal.consolidate()) === null || _a === void 0 ? void 0 : _a.matrix) || {};
-            const right = matrix.a * textRect.right + matrix.c * textRect.bottom + matrix.e;
-            if (right > chartWidth) {
-                const maxWidth = textRect.width - (right - chartWidth) * 2;
-                select(node).call(setEllipsisForOverflowText, maxWidth);
-            }
-        });
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        svgElement
+            .call(xAxisGenerator)
+            .attr('class', b())
+            .style('font-size', axis.labels.style.fontSize);
         // add an axis header if necessary
         if (axis.title.text) {
             const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;

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

@@ -65,7 +65,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, chartWidth: width })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
         React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
 import { getDataCategoryValue } from '../../utils';
 import { DEFAULT_BAR_X_SERIES_OPTIONS } from './defaults';
+const MIN_RECT_WIDTH = 1;
 const MIN_RECT_GAP = 1;
 const MIN_GROUP_GAP = 1;
 const DEFAULT_LABEL_PADDING = 7;
@@ -72,7 +73,7 @@ function prepareData(args) {
     const groupGap = Math.max(bandWidth * groupPadding, MIN_GROUP_GAP);
     const groupWidth = bandWidth - groupGap;
     const rectGap = Math.max(bandWidth * barPadding, MIN_RECT_GAP);
-    const rectWidth = Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth);
+    const rectWidth = Math.max(MIN_RECT_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
     Object.entries(data).forEach(([xValue, val]) => {
         const stacks = Object.values(val);

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -1,5 +1,6 @@
+import { select } from 'd3';
 import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
-import { hasOverlappingLabels } from '../text';
+import { hasOverlappingLabels, setEllipsisForOverflowText } from '../text';
 function addDomain(selection, options) {
     const { size, color } = options;
     selection
@@ -18,7 +19,9 @@ export function axisBottom(args) {
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
     return function (selection) {
-        var _a, _b;
+        var _a, _b, _c, _e;
+        const x = ((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.x) || 0;
+        const right = x + domainSize;
         selection
             .selectAll('.tick')
             .data(values)
@@ -36,6 +39,14 @@ export function axisBottom(args) {
             .attr('transform', function (d) {
             return `translate(${position(d) + offset},0)`;
         });
+        // Remove tick that has the same x coordinate like domain
+        selection
+            .select('.tick')
+            .filter((d) => {
+            return position(d) === 0;
+        })
+            .select('line')
+            .remove();
         const labels = selection.selectAll('.tick text');
         const labelNodes = labels.nodes();
         const overlapping = hasOverlappingLabels({
@@ -44,32 +55,50 @@ export function axisBottom(args) {
             padding: labelsPaddings,
             style: labelsStyle,
         });
-        if (overlapping) {
-            if (autoRotation) {
-                const labelHeight = (_b = (_a = labelNodes[0]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height;
-                const labelOffset = (labelHeight / 2 + labelsMargin) / 2;
-                labels
-                    .attr('text-anchor', 'end')
-                    .attr('transform', `rotate(-45) translate(-${labelOffset}, -${labelOffset})`);
-            }
-            else {
-                // remove overlapping labels
-                let elementX = 0;
-                selection
-                    .selectAll('.tick')
-                    .filter(function () {
-                    const node = this;
-                    const r = node.getBoundingClientRect();
-                    if (r.left < elementX) {
-                        return true;
+        const rotationAngle = overlapping && autoRotation ? '-45' : undefined;
+        if (rotationAngle) {
+            const labelHeight = (_e = (_c = labelNodes[0]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.height;
+            const labelOffset = (labelHeight / 2 + labelsMargin) / 2;
+            labels
+                .attr('text-anchor', 'end')
+                .attr('transform', `rotate(${rotationAngle}) translate(-${labelOffset}, -${labelOffset})`);
+        }
+        else {
+            // remove overlapping labels
+            let elementX = 0;
+            selection
+                .selectAll('.tick')
+                .filter(function () {
+                const node = this;
+                const r = node.getBoundingClientRect();
+                if (r.left < elementX) {
+                    return true;
+                }
+                elementX = r.right + labelsPaddings;
+                return false;
+            })
+                .remove();
+            // add an ellipsis to the labels that go beyond the boundaries of the chart
+            labels.each(function (_d, i, nodes) {
+                if (i === nodes.length - 1) {
+                    const currentElement = this;
+                    const prevElement = nodes[i - 1];
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                    const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                    if (lackingSpace) {
+                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
+                        const translateX = currentElementPosition.width / 2 - lackingSpace;
+                        text.attr('text-anchor', 'end').attr('transform', `translate(${translateX},0)`);
+                        setEllipsisForOverflowText(text, remainSpace);
                     }
-                    elementX = r.right + labelsPaddings;
-                    return false;
-                })
-                    .remove();
-            }
+                }
+            });
         }
-        selection.call(addDomain, { size: domainSize, color: domainColor });
-        selection.attr('text-anchor', 'middle').style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');
+        selection
+            .call(addDomain, { size: domainSize, color: domainColor })
+            .attr('text-anchor', 'middle')
+            .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');
     };
 }

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

@@ -30,17 +30,11 @@ export function getXTickPosition({ scale, offset }) {
     return isBandScale(scale) ? center(scale.copy(), offset) : number(scale.copy());
 }
 export function getXAxisItems({ scale, count, maxCount, }) {
-    const offset = getXAxisOffset();
     let values = getScaleTicks(scale, count);
-    const position = getXTickPosition({ scale, offset });
     if (values.length > maxCount) {
         const step = Math.ceil(values.length / maxCount);
         values = values.filter((_, i) => i % step === 0);
     }
-    // Remove tick that has the same x coordinate like domain
-    if (values.length && position(values[0]) === 0) {
-        values = values.slice(1);
-    }
     return values;
 }
 export function getMaxTickCount({ axis, width }) {

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

@@ -2,7 +2,7 @@ import { select } from 'd3';
 export function setEllipsisForOverflowText(selection, maxWidth) {
     var _a, _b;
     let text = selection.text();
-    selection.text(null).attr('text-anchor', 'left').append('title').text(text);
+    selection.text(null).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) {

package/package.json

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