@gravity-ui/chartkit 4.6.0 → 4.7.0

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

@@ -1,8 +1,13 @@
 import React from 'react';
-import { arc, pie, select } from 'd3';
+import get from 'lodash/get';
+import kebabCase from 'lodash/kebabCase';
+import { arc, color, pie, pointer, select } from 'd3';
 import { block } from '../../../../../utils/cn';
-import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
+import { calculateNumericProperty, extractD3DataFromNode, getHorisontalSvgTextHeight, isNodeContainsD3Data, } from '../../utils';
 const b = block('d3-pie');
+const preparePieData = (series) => {
+    return series.map((s) => ({ series: s, data: s.data }));
+};
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
     const defaultX = boundsWidth * 0.5;
@@ -15,17 +20,29 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
     const resultY = (_b = calculateNumericProperty({ value: y, base: boundsHeight })) !== null && _b !== void 0 ? _b : defaultY;
     return [resultX, resultY];
 };
+const getOpacity = (args) => {
+    const { data, hoveredData, opacity } = args;
+    if (data.series.id !== (hoveredData === null || hoveredData === void 0 ? void 0 : hoveredData.series.id)) {
+        return opacity || null;
+    }
+    return null;
+};
+const isNodeContainsPieData = (node) => {
+    return isNodeContainsD3Data(node);
+};
 export function PieSeriesComponent(args) {
     var _a;
-    const { boundsWidth, boundsHeight, series, onSeriesMouseMove, onSeriesMouseLeave, svgContainer } = args;
+    const { boundsWidth, boundsHeight, dispatcher, top, left, series, seriesOptions, svgContainer } = args;
     const ref = React.useRef(null);
     const [x, y] = getCenter(boundsWidth, boundsHeight, (_a = series[0]) === null || _a === void 0 ? void 0 : _a.center);
     React.useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!ref.current) {
-            return;
+            return () => { };
         }
         const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'pie.states.hover');
+        const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
         const isLabelsEnabled = (_b = (_a = series[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.enabled;
         let radiusRelatedToChart = Math.min(boundsWidth, boundsHeight) / 2;
         if (isLabelsEnabled) {
@@ -39,41 +56,46 @@ export function PieSeriesComponent(args) {
             radius *= 0.9;
         }
         const innerRadius = (_f = calculateNumericProperty({ value: series[0].innerRadius, base: radius })) !== null && _f !== void 0 ? _f : 0;
-        const pieGenerator = pie().value((d) => d.data);
-        const visibleData = series.filter((d) => d.visible);
+        const preparedData = preparePieData(series);
+        const pieGenerator = pie().value((d) => d.data.value);
+        const visibleData = preparedData.filter((d) => d.series.visible);
         const dataReady = pieGenerator(visibleData);
         const arcGenerator = arc()
             .innerRadius(innerRadius)
             .outerRadius(radius)
-            .cornerRadius((d) => d.data.borderRadius);
+            .cornerRadius((d) => d.data.series.borderRadius);
         svgElement.selectAll('*').remove();
-        svgElement
-            .selectAll('allSlices')
+        const segmentSelection = svgElement
+            .selectAll('segments')
             .data(dataReady)
             .enter()
             .append('path')
             .attr('d', arcGenerator)
             .attr('class', b('segment'))
-            .attr('fill', (d) => d.data.color || '')
+            .attr('fill', (d) => d.data.series.color)
             .style('stroke', ((_g = series[0]) === null || _g === void 0 ? void 0 : _g.borderColor) || '')
             .style('stroke-width', (_j = (_h = series[0]) === null || _h === void 0 ? void 0 : _h.borderWidth) !== null && _j !== void 0 ? _j : 1);
+        let polylineSelection;
+        let labelSelection;
         if ((_l = (_k = series[0]) === null || _k === void 0 ? void 0 : _k.dataLabels) === null || _l === void 0 ? void 0 : _l.enabled) {
             const labelHeight = getHorisontalSvgTextHeight({ text: 'tmp' });
             const outerArc = arc()
                 .innerRadius(labelsArcRadius)
                 .outerRadius(labelsArcRadius);
+            const polylineArc = arc()
+                .innerRadius(radius)
+                .outerRadius(radius);
             // Add the polylines between chart and labels
-            svgElement
-                .selectAll('allPolylines')
+            polylineSelection = svgElement
+                .selectAll('polylines')
                 .data(dataReady)
                 .enter()
                 .append('polyline')
-                .attr('stroke', (d) => d.data.color || '')
-                .style('fill', 'none')
+                .attr('stroke', (d) => d.data.series.color || '')
                 .attr('stroke-width', 1)
                 .attr('points', (d) => {
                 // Line insertion in the slice
-                const posA = arcGenerator.centroid(d);
+                const posA = polylineArc.centroid(d);
                 // Line break: we use the other arc generator that has been built only for that
                 const posB = outerArc.centroid(d);
                 const posC = outerArc.centroid(d);
@@ -101,13 +123,15 @@ export function PieSeriesComponent(args) {
                     }
                 }
                 return result.join(' ');
-            });
+            })
+                .attr('pointer-events', 'none')
+                .style('fill', 'none');
             // Add the polylines between chart and labels
-            svgElement
-                .selectAll('allLabels')
+            labelSelection = svgElement
+                .selectAll('labels')
                 .data(dataReady)
                 .join('text')
-                .text((d) => d.data.label || d.value)
+                .text((d) => d.data.series.label || d.value)
                 .attr('class', b('label'))
                 .attr('transform', (d) => {
                 const pos = outerArc.centroid(d);
@@ -116,11 +140,65 @@ export function PieSeriesComponent(args) {
                 pos[1] += labelHeight / 4;
                 return `translate(${pos})`;
             })
+                .attr('pointer-events', 'none')
                 .style('text-anchor', (d) => {
                 const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
                 return midangle < Math.PI ? 'start' : 'end';
             });
         }
-    }, [boundsWidth, boundsHeight, series, onSeriesMouseMove, onSeriesMouseLeave, svgContainer]);
+        svgElement
+            .on('mousemove', (e) => {
+            const segment = e.target;
+            if (!isNodeContainsPieData(segment)) {
+                return;
+            }
+            const [pointerX, pointerY] = pointer(e, svgContainer);
+            const segmentData = extractD3DataFromNode(segment).data;
+            dispatcher.call('hover-shape', {}, [segmentData], [pointerX - left, pointerY - top]);
+        })
+            .on('mouseleave', () => {
+            dispatcher.call('hover-shape', {}, undefined);
+        });
+        const eventName = `hover-shape.pie-${kebabCase(preparedData[0].series.id)}`;
+        dispatcher.on(eventName, (datas) => {
+            const data = datas === null || datas === void 0 ? void 0 : datas[0];
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            if (hoverEnabled && data) {
+                segmentSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.data.series.color;
+                    if (d.data.series.id === data.series.id) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+            else if (hoverEnabled) {
+                segmentSelection.attr('fill', (d) => d.data.series.color);
+            }
+            if (inactiveEnabled && data) {
+                const opacity = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity;
+                segmentSelection.attr('opacity', (d) => {
+                    return getOpacity({ data: d.data, hoveredData: data, opacity });
+                });
+                polylineSelection === null || polylineSelection === void 0 ? void 0 : polylineSelection.attr('opacity', (d) => {
+                    return getOpacity({ data: d.data, hoveredData: data, opacity });
+                });
+                labelSelection === null || labelSelection === void 0 ? void 0 : labelSelection.attr('opacity', (d) => {
+                    return getOpacity({ data: d.data, hoveredData: data, opacity });
+                });
+            }
+            else if (inactiveEnabled) {
+                segmentSelection.attr('opacity', null);
+                polylineSelection === null || polylineSelection === void 0 ? void 0 : polylineSelection.attr('opacity', null);
+                labelSelection === null || labelSelection === void 0 ? void 0 : labelSelection.attr('opacity', null);
+            }
+        });
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [boundsWidth, boundsHeight, dispatcher, top, left, series, seriesOptions, svgContainer]);
     return React.createElement("g", { ref: ref, className: b(), transform: `translate(${x}, ${y})` });
 }

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedScatterData } from './prepare-data';
+export { prepareScatterData } from './prepare-data';
+export type { PreparedScatterData } from './prepare-data';
+type ScatterSeriesShapeProps = {
+    dispatcher: Dispatch<object>;
+    top: number;
+    left: number;
+    preparedData: PreparedScatterData[];
+    seriesOptions: PreparedSeriesOptions;
+    svgContainer: SVGSVGElement | null;
+};
+export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import get from 'lodash/get';
+import { color, pointer, select } from 'd3';
+import { block } from '../../../../../../utils/cn';
+import { extractD3DataFromNode, isNodeContainsD3Data } from '../../../utils';
+export { prepareScatterData } from './prepare-data';
+const b = block('d3-scatter');
+const DEFAULT_SCATTER_POINT_RADIUS = 4;
+const EMPTY_SELECTION = null;
+const key = (d) => d.id || -1;
+const isNodeContainsScatterData = (node) => {
+    return isNodeContainsD3Data(node);
+};
+export function ScatterSeriesShape(props) {
+    const { dispatcher, top, left, preparedData, seriesOptions, svgContainer } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'scatter.states.hover');
+        const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
+        const selection = svgElement
+            .selectAll(`circle`)
+            .data(preparedData, key)
+            .join((enter) => enter.append('circle').attr('class', b('point')), (update) => update, (exit) => exit.remove())
+            .attr('fill', (d) => d.data.color || d.series.color || '')
+            .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
+            .attr('cx', (d) => d.cx)
+            .attr('cy', (d) => d.cy);
+        svgElement
+            .on('mousemove', (e) => {
+            const point = e.target;
+            if (!isNodeContainsScatterData(point)) {
+                return;
+            }
+            const [pointerX, pointerY] = pointer(e, svgContainer);
+            const segmentData = extractD3DataFromNode(point);
+            dispatcher.call('hover-shape', {}, [segmentData], [pointerX - left, pointerY - top]);
+        })
+            .on('mouseleave', () => {
+            dispatcher.call('hover-shape', {}, undefined);
+        });
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        dispatcher.on('hover-shape.scatter', (data) => {
+            const selectedPoint = data === null || data === void 0 ? void 0 : data[0];
+            const updates = [];
+            preparedData.forEach((p) => {
+                const hovered = Boolean(hoverEnabled &&
+                    selectedPoint &&
+                    p.cx === selectedPoint.cx &&
+                    p.cy === selectedPoint.cy);
+                if (p.hovered !== hovered) {
+                    p.hovered = hovered;
+                    updates.push(p);
+                }
+                const active = Boolean(!inactiveEnabled || !selectedPoint || selectedPoint.series.id === p.series.id);
+                if (p.active !== active) {
+                    p.active = active;
+                    updates.push(p);
+                }
+            });
+            selection.data(updates, key).join(() => EMPTY_SELECTION, (update) => {
+                update
+                    .attr('fill', (d) => {
+                    var _a;
+                    const initialColor = d.data.color || d.series.color || '';
+                    if (d.hovered) {
+                        return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                    }
+                    return initialColor;
+                })
+                    .attr('opacity', function (d) {
+                    if (!d.active) {
+                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                    }
+                    return null;
+                });
+                return update;
+            }, (exit) => exit);
+        });
+        return () => {
+            dispatcher.on('hover-shape.scatter', null);
+        };
+    }, [dispatcher, top, left, preparedData, seriesOptions, svgContainer]);
+    return React.createElement("g", { ref: ref, className: b() });
+}

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.d.ts

@@ -0,0 +1,19 @@
+import type { TooltipDataChunkScatter } from '../../../../../../types/widget-data';
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import { PreparedScatterSeries } from '../../useSeries/types';
+export type PreparedScatterData = Omit<TooltipDataChunkScatter, 'series'> & {
+    cx: number;
+    cy: number;
+    series: PreparedScatterSeries;
+    hovered: boolean;
+    active: boolean;
+    id: number;
+};
+export declare const prepareScatterData: (args: {
+    series: PreparedScatterSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis;
+    yScale: ChartScale;
+}) => PreparedScatterData[];

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.js

@@ -0,0 +1,55 @@
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../../utils';
+const getCxAttr = (args) => {
+    const { point, xAxis, xScale } = args;
+    let cx;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        const categories = get(xAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
+        cx = (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
+    }
+    else {
+        const xLinearScale = xScale;
+        cx = xLinearScale(point.x);
+    }
+    return cx;
+};
+const getCyAttr = (args) => {
+    const { point, yAxis, yScale } = args;
+    let cy;
+    if (yAxis.type === 'category') {
+        const yBandScale = yScale;
+        const categories = get(yAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
+        cy = (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
+    }
+    else {
+        const yLinearScale = yScale;
+        cy = yLinearScale(point.y);
+    }
+    return cy;
+};
+const getFilteredLinearScatterData = (data) => {
+    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
+};
+export const prepareScatterData = (args) => {
+    const { series, xAxis, xScale, yAxis, yScale } = args;
+    return series.reduce((acc, s) => {
+        const filteredData = xAxis.type === 'category' || yAxis.type === 'category'
+            ? s.data
+            : getFilteredLinearScatterData(s.data);
+        filteredData.forEach((d) => {
+            acc.push({
+                data: d,
+                series: s,
+                cx: getCxAttr({ point: d, xAxis, xScale }),
+                cy: getCyAttr({ point: d, yAxis, yScale }),
+                hovered: false,
+                active: true,
+                id: acc.length - 1,
+            });
+        });
+        return acc;
+    }, []);
+};

package/build/plugins/d3/renderer/hooks/useShapes/styles.css

@@ -2,15 +2,6 @@
   stroke-width: 1px;
 }
 
-.chartkit-d3_hovered .chartkit-d3-scatter__point {
-  opacity: 0.5;
-}
-
-.chartkit-d3-scatter__point:hover {
-  stroke: #fff;
-  opacity: 1;
-}
-
 .chartkit-d3-pie__segment {
   stroke: var(--g-color-base-background);
 }
@@ -23,4 +14,5 @@
 
 .chartkit-d3-bar-x__label {
   fill: var(--g-color-text-complementary);
+  user-select: none;
 }

package/build/plugins/d3/renderer/hooks/useTooltip/index.d.ts

@@ -1,13 +1,13 @@
-import type { TooltipHoveredData } from '../../../../../types/widget-data';
+import type { Dispatch } from 'd3';
+import type { TooltipDataChunk } from '../../../../../types/widget-data';
 import { PreparedTooltip } from '../useChartOptions/types';
-import type { PointerPosition, OnSeriesMouseMove, OnSeriesMouseLeave } from './types';
+import type { PointerPosition } from './types';
 type Args = {
+    dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
 };
-export declare const useTooltip: ({ tooltip }: Args) => {
-    hovered: TooltipHoveredData<any> | undefined;
+export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
+    hovered: TooltipDataChunk<any>[] | undefined;
     pointerPosition: PointerPosition | undefined;
-    handleSeriesMouseMove: OnSeriesMouseMove | undefined;
-    handleSeriesMouseLeave: OnSeriesMouseLeave | undefined;
 };
 export {};

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

@@ -1,19 +1,17 @@
 import React from 'react';
-export const useTooltip = ({ tooltip }) => {
-    const [hovered, setTooltipHoveredData] = React.useState();
-    const [pointerPosition, setPointerPosition] = React.useState();
-    const handleSeriesMouseMove = React.useCallback(({ pointerPosition: nextPointerPosition, hovered: nextHovered }) => {
-        setTooltipHoveredData(nextHovered);
-        setPointerPosition(nextPointerPosition);
-    }, []);
-    const handleSeriesMouseLeave = React.useCallback(() => {
-        setTooltipHoveredData(undefined);
-        setPointerPosition(undefined);
-    }, []);
-    return {
-        hovered,
-        pointerPosition,
-        handleSeriesMouseMove: tooltip.enabled ? handleSeriesMouseMove : undefined,
-        handleSeriesMouseLeave: tooltip.enabled ? handleSeriesMouseLeave : undefined,
-    };
+export const useTooltip = ({ dispatcher, tooltip }) => {
+    const [{ hovered, pointerPosition }, setTooltipState] = React.useState({});
+    React.useEffect(() => {
+        if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
+            dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition) => {
+                setTooltipState({ hovered: nextHovered, pointerPosition: nextPointerPosition });
+            });
+        }
+        return () => {
+            if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
+                dispatcher.on('hover-shape.tooltip', null);
+            }
+        };
+    }, [dispatcher, tooltip]);
+    return { hovered, pointerPosition };
 };

package/build/plugins/d3/renderer/hooks/useTooltip/types.d.ts

@@ -1,7 +1 @@
-import type { TooltipHoveredData } from '../../../../../types/widget-data';
 export type PointerPosition = [number, number];
-export type OnSeriesMouseMove = (args: {
-    hovered: TooltipHoveredData;
-    pointerPosition?: PointerPosition;
-}) => void;
-export type OnSeriesMouseLeave = () => void;

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

@@ -9,8 +9,10 @@ type AxisBottomArgs = {
         labelsPaddings?: number;
         labelsMargin?: number;
         labelsStyle?: BaseTextStyle;
+        labelsMaxWidth?: number;
+        labelsLineHeight: number;
         size: number;
-        autoRotation?: boolean;
+        rotation: number;
     };
     domain: {
         size: number;

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

@@ -1,5 +1,7 @@
+import { select } from 'd3';
 import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
-import { hasOverlappingLabels } from '../text';
+import { getLabelsMaxHeight, setEllipsisForOverflowText } from '../text';
+import { calculateCos, calculateSin } from '../math';
 function addDomain(selection, options) {
     const { size, color } = options;
     selection
@@ -12,13 +14,27 @@ function addDomain(selection, options) {
         .attr('d', `M0,0V0H${size}`);
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsStyle, size: tickSize, count: ticksCount, maxTickCount, autoRotation = true, }, domain: { size: domainSize, color: domainColor }, } = args;
+    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, size: tickSize, count: ticksCount, maxTickCount, rotation, }, domain: { size: domainSize, color: domainColor }, } = args;
     const offset = getXAxisOffset();
-    const spacing = Math.max(tickSize, 0) + labelsMargin;
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
+    const labelHeight = getLabelsMaxHeight({
+        labels: values,
+        style: { 'font-size': (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '' },
+    });
     return function (selection) {
         var _a, _b;
+        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;
+        let transform = `translate(0, ${labelHeight + labelsMargin}px)`;
+        if (rotation) {
+            const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin;
+            let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
+            if (Math.abs(rotation) % 360 === 90) {
+                labelsOffsetLeft += ((rotation > 0 ? -1 : 1) * labelHeight) / 2;
+            }
+            transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
+        }
         selection
             .selectAll('.tick')
             .data(values)
@@ -27,49 +43,72 @@ export function axisBottom(args) {
             const tick = el.append('g').attr('class', 'tick');
             tick.append('line').attr('stroke', 'currentColor').attr('y2', tickSize);
             tick.append('text')
+                .text(labelFormat)
                 .attr('fill', 'currentColor')
-                .attr('y', spacing)
-                .attr('dy', '0.71em')
-                .text(labelFormat);
+                .attr('text-anchor', () => {
+                if (rotation) {
+                    return rotation > 0 ? 'start' : 'end';
+                }
+                return 'middle';
+            })
+                .style('transform', transform)
+                .style('alignment-baseline', 'after-edge');
             return tick;
         })
             .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({
-            width: domainSize,
-            labels: values.map(labelFormat),
-            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;
+        // FIXME: handle rotated overlapping labels (with a smarter approach)
+        if (rotation) {
+            const maxWidth = labelsMaxWidth * calculateCos(rotation) + labelsLineHeight * calculateSin(rotation);
+            labels.each(function () {
+                setEllipsisForOverflowText(select(this), maxWidth);
+            });
+        }
+        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 })
+            .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 }) {