@gravity-ui/charts 1.51.0 → 1.51.1

package/dist/cjs/components/AxisY/utils.js

@@ -31,8 +31,13 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = scale.ticks(ticksCount);
             result = newScaleTicks.map((t) => ({
                 y: scale(t),
@@ -40,16 +45,23 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

package/dist/cjs/core/shapes/area/types.d.ts

@@ -1,5 +1,6 @@
-import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
+import type { AreaSeriesData, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -31,5 +32,4 @@ export type PreparedAreaData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/bar-x/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
+import type { LabelData, TooltipDataChunkBarX } from '../../../types';
 import type { PreparedAnnotation, PreparedBarXSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     annotation?: PreparedAnnotation;
     x: number;
@@ -9,11 +10,10 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     opacity: number | null;
     series: PreparedBarXSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     isLastStackItem: boolean;
     /**
      * the utility field for storing the original height (for recalculations, etc.)
      * should not be used for displaying
      */
     _height: number;
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/bar-y/prepare-data.js

@@ -13,7 +13,7 @@ export async function prepareBarYData(args) {
         return {
             shapes: [],
             labels: [],
-            htmlElements: [],
+            htmlLabels: [],
         };
     }
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
@@ -134,7 +134,7 @@ export async function prepareBarYData(args) {
         });
     });
     let labels = [];
-    let htmlElements = [];
+    let htmlLabels = [];
     const map = new Map();
     for (let i = 0; i < result.length; i++) {
         const prepared = result[i];
@@ -160,7 +160,7 @@ export async function prepareBarYData(args) {
                     x,
                     y: y - height / 2,
                 });
-                htmlElements.push({
+                htmlLabels.push({
                     content,
                     size: { width, height },
                     style: dataLabels.style,
@@ -202,12 +202,12 @@ export async function prepareBarYData(args) {
     if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }
-    else if (htmlElements.length && !allowOverlap) {
-        htmlElements = filterOverlappingLabels(htmlElements);
+    else if (htmlLabels.length && !allowOverlap) {
+        htmlLabels = filterOverlappingLabels(htmlLabels);
     }
     return {
         shapes: result,
         labels,
-        htmlElements,
+        htmlLabels,
     };
 }

package/dist/cjs/core/shapes/bar-y/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarY } from '../../../types';
+import type { LabelData, TooltipDataChunkBarY } from '../../../types';
 import type { PreparedBarYSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
     x: number;
     y: number;
@@ -15,5 +16,4 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
 export type BarYShapesArgs = {
     shapes: PreparedBarYData[];
     labels: LabelData[];
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/funnel/types.d.ts

@@ -1,7 +1,8 @@
 import type { Path } from 'd3-path';
-import type { FunnelSeriesData, HtmlItem, LabelData } from '../../../types';
+import type { FunnelSeriesData, LabelData } from '../../../types';
 import type { DashStyle } from '../../constants';
 import type { PreparedFunnelSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type FunnelItemData = {
     x: number;
     y: number;
@@ -30,5 +31,4 @@ export type PreparedFunnelData = {
     items: FunnelItemData[];
     connectors: FunnelConnectorData[];
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/heatmap/prepare-data.js

@@ -94,7 +94,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
     }
     const preparedData = {
         series: series,
-        htmlElements: htmlDataLabels,
+        htmlLabels: htmlDataLabels,
         items: heatmapItems,
         labels: svgDataLabels,
     };

package/dist/cjs/core/shapes/heatmap/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HeatmapSeriesData, HtmlItem } from '../../../types';
+import type { BaseTextStyle, HeatmapSeriesData } from '../../../types';
 import type { PreparedHeatmapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type HeatmapItem = {
     x: number;
     y: number;
@@ -20,6 +21,5 @@ export type HeatmapLabel = {
 export type PreparedHeatmapData = {
     series: PreparedHeatmapSeries;
     items: HeatmapItem[];
-    htmlElements: HtmlItem[];
     labels: HeatmapLabel[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/line/types.d.ts

@@ -1,6 +1,7 @@
-import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
+import type { LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -29,9 +30,8 @@ export type PreparedLineData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
     linejoin: LineJoin;
-} & Required<LineSeriesLineBaseStyle>;
+} & Required<LineSeriesLineBaseStyle> & SeriesShapeData;

package/dist/cjs/core/shapes/pie/types.d.ts

@@ -1,6 +1,7 @@
 import type { PieArcDatum } from 'd3-shape';
-import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
+import type { ConnectorCurve, LabelData } from '../../../types';
 import type { PreparedPieSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SegmentData = {
     value: number;
     color: string;
@@ -37,5 +38,4 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/radar/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, RadarSeriesData } from '../../../types';
+import type { LabelData, RadarSeriesData } from '../../../types';
 import type { PreparedRadarSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type RadarLabelData = LabelData & {
     maxWidth: number;
 };
@@ -54,6 +55,5 @@ export type PreparedRadarData = {
     grid: RadarGridData[];
     center: [number, number];
     radius: number;
-    htmlLabels: HtmlItem[];
     cursor: string | null;
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/sankey/prepare-data.js

@@ -2,7 +2,7 @@ import { getFormattedValue } from '../../utils/format';
 import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
-    const htmlElements = [];
+    const htmlLabels = [];
     const sankeyGenerator = sankey()
         .nodeId((d) => d.name)
         .nodeSort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); })
@@ -70,5 +70,5 @@ export function prepareSankeyData(args) {
         });
         dataLabels.push(...labels);
     }
-    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlElements, labels: dataLabels };
+    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlLabels, labels: dataLabels };
 }

package/dist/cjs/core/shapes/sankey/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
+import type { BaseTextStyle, SankeySeriesData } from '../../../types';
 import type { PreparedSankeySeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SankeyDataLabel = {
     text: string;
     x: number;
@@ -26,8 +27,7 @@ export type SankeyLink = {
 };
 export type PreparedSankeyData = {
     series: PreparedSankeySeries;
-    htmlElements: HtmlItem[];
     nodes: SankeyNode[];
     links: SankeyLink[];
     labels: SankeyDataLabel[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/scatter/types.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlItem, LabelData, ScatterSeriesData } from '../../../types';
 import type { PreparedScatterSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 type PointData = {
     x: number;
     y: number;
@@ -19,6 +20,5 @@ export type PreparedScatterData = MarkerData;
 export type PreparedScatterShapeData = {
     markers: PreparedScatterData[];
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;
 export {};

package/dist/cjs/core/shapes/treemap/prepare-data.js

@@ -148,17 +148,17 @@ export async function prepareTreemapData(args) {
     })(hierarchy);
     const leaves = root.leaves();
     let labelData = [];
-    const htmlElements = [];
+    const htmlLabels = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = await getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
             const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
-            htmlElements.push(...htmlItems);
+            htmlLabels.push(...htmlItems);
         }
         else {
             labelData = labels;
         }
     }
-    return { labelData, leaves, series, htmlElements };
+    return { labelData, leaves, series, htmlLabels };
 }

package/dist/cjs/core/shapes/treemap/types.d.ts

@@ -1,6 +1,7 @@
 import type { HierarchyRectangularNode } from 'd3-hierarchy';
-import type { HtmlItem, TreemapSeriesData } from '../../../types';
+import type { TreemapSeriesData } from '../../../types';
 import type { PreparedTreemapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type TreemapLabelData = {
     text: string;
     x: number;
@@ -11,5 +12,4 @@ export type PreparedTreemapData = {
     labelData: TreemapLabelData[];
     leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
     series: PreparedTreemapSeries;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/types.d.ts

@@ -0,0 +1,4 @@
+import type { HtmlItem } from '../../types';
+export interface SeriesShapeData {
+    htmlLabels: HtmlItem[];
+}

package/dist/cjs/core/shapes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/core/shapes/waterfall/prepare-data.js

@@ -144,7 +144,7 @@ export const prepareWaterfallData = async (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
-            htmlElements: [],
+            htmlLabels: [],
         };
         preparedData.label = await getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/dist/cjs/core/shapes/waterfall/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
+import type { LabelData, WaterfallSeriesData } from '../../../types';
 import type { PreparedWaterfallSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedWaterfallData = {
     x: number;
     y: number;
@@ -10,5 +11,4 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/shapes/x-range/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { LabelData, TooltipDataChunkXRange } from '../../../types';
 import type { PreparedXRangeSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     x: number;
     y: number;
@@ -8,5 +9,4 @@ export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     color: string;
     series: PreparedXRangeSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/cjs/core/utils/axis/x-axis.js

@@ -55,8 +55,13 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = getScaleTicks({ scale, ticksCount, dateTimeLabelFormats });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
@@ -64,16 +69,23 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -5,7 +5,7 @@ import { HtmlLayer } from '../HtmlLayer';
 export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 const b = block('bar-y');
 export function BarYSeriesShapes(args) {
-    const { dispatcher, preparedData: { htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
+    const { dispatcher, preparedData: { htmlLabels: htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {

package/dist/cjs/hooks/useShapes/heatmap/index.js

@@ -16,5 +16,5 @@ export const HeatmapSeriesShapes = (args) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/sankey/index.js

@@ -14,5 +14,5 @@ export const SankeySeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/treemap/index.js

@@ -14,5 +14,5 @@ export const TreemapSeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -19,7 +19,7 @@ export const WaterfallSeriesShapes = (args) => {
         return renderWaterfall({ plot: ref.current }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
     }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
             return { htmlElements: items };
         }

package/dist/esm/components/AxisY/utils.js

@@ -31,8 +31,13 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = scale.ticks(ticksCount);
             result = newScaleTicks.map((t) => ({
                 y: scale(t),
@@ -40,16 +45,23 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

package/dist/esm/core/shapes/area/types.d.ts

@@ -1,5 +1,6 @@
-import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
+import type { AreaSeriesData, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -31,5 +32,4 @@ export type PreparedAreaData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/bar-x/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
+import type { LabelData, TooltipDataChunkBarX } from '../../../types';
 import type { PreparedAnnotation, PreparedBarXSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     annotation?: PreparedAnnotation;
     x: number;
@@ -9,11 +10,10 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     opacity: number | null;
     series: PreparedBarXSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     isLastStackItem: boolean;
     /**
      * the utility field for storing the original height (for recalculations, etc.)
      * should not be used for displaying
      */
     _height: number;
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/bar-y/prepare-data.js

@@ -13,7 +13,7 @@ export async function prepareBarYData(args) {
         return {
             shapes: [],
             labels: [],
-            htmlElements: [],
+            htmlLabels: [],
         };
     }
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
@@ -134,7 +134,7 @@ export async function prepareBarYData(args) {
         });
     });
     let labels = [];
-    let htmlElements = [];
+    let htmlLabels = [];
     const map = new Map();
     for (let i = 0; i < result.length; i++) {
         const prepared = result[i];
@@ -160,7 +160,7 @@ export async function prepareBarYData(args) {
                     x,
                     y: y - height / 2,
                 });
-                htmlElements.push({
+                htmlLabels.push({
                     content,
                     size: { width, height },
                     style: dataLabels.style,
@@ -202,12 +202,12 @@ export async function prepareBarYData(args) {
     if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }
-    else if (htmlElements.length && !allowOverlap) {
-        htmlElements = filterOverlappingLabels(htmlElements);
+    else if (htmlLabels.length && !allowOverlap) {
+        htmlLabels = filterOverlappingLabels(htmlLabels);
     }
     return {
         shapes: result,
         labels,
-        htmlElements,
+        htmlLabels,
     };
 }

package/dist/esm/core/shapes/bar-y/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarY } from '../../../types';
+import type { LabelData, TooltipDataChunkBarY } from '../../../types';
 import type { PreparedBarYSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
     x: number;
     y: number;
@@ -15,5 +16,4 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
 export type BarYShapesArgs = {
     shapes: PreparedBarYData[];
     labels: LabelData[];
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/funnel/types.d.ts

@@ -1,7 +1,8 @@
 import type { Path } from 'd3-path';
-import type { FunnelSeriesData, HtmlItem, LabelData } from '../../../types';
+import type { FunnelSeriesData, LabelData } from '../../../types';
 import type { DashStyle } from '../../constants';
 import type { PreparedFunnelSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type FunnelItemData = {
     x: number;
     y: number;
@@ -30,5 +31,4 @@ export type PreparedFunnelData = {
     items: FunnelItemData[];
     connectors: FunnelConnectorData[];
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/heatmap/prepare-data.js

@@ -94,7 +94,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
     }
     const preparedData = {
         series: series,
-        htmlElements: htmlDataLabels,
+        htmlLabels: htmlDataLabels,
         items: heatmapItems,
         labels: svgDataLabels,
     };

package/dist/esm/core/shapes/heatmap/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HeatmapSeriesData, HtmlItem } from '../../../types';
+import type { BaseTextStyle, HeatmapSeriesData } from '../../../types';
 import type { PreparedHeatmapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type HeatmapItem = {
     x: number;
     y: number;
@@ -20,6 +21,5 @@ export type HeatmapLabel = {
 export type PreparedHeatmapData = {
     series: PreparedHeatmapSeries;
     items: HeatmapItem[];
-    htmlElements: HtmlItem[];
     labels: HeatmapLabel[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/line/types.d.ts

@@ -1,6 +1,7 @@
-import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
+import type { LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -29,9 +30,8 @@ export type PreparedLineData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
     linejoin: LineJoin;
-} & Required<LineSeriesLineBaseStyle>;
+} & Required<LineSeriesLineBaseStyle> & SeriesShapeData;

package/dist/esm/core/shapes/pie/types.d.ts

@@ -1,6 +1,7 @@
 import type { PieArcDatum } from 'd3-shape';
-import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
+import type { ConnectorCurve, LabelData } from '../../../types';
 import type { PreparedPieSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SegmentData = {
     value: number;
     color: string;
@@ -37,5 +38,4 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/radar/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, RadarSeriesData } from '../../../types';
+import type { LabelData, RadarSeriesData } from '../../../types';
 import type { PreparedRadarSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type RadarLabelData = LabelData & {
     maxWidth: number;
 };
@@ -54,6 +55,5 @@ export type PreparedRadarData = {
     grid: RadarGridData[];
     center: [number, number];
     radius: number;
-    htmlLabels: HtmlItem[];
     cursor: string | null;
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/sankey/prepare-data.js

@@ -2,7 +2,7 @@ import { getFormattedValue } from '../../utils/format';
 import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
-    const htmlElements = [];
+    const htmlLabels = [];
     const sankeyGenerator = sankey()
         .nodeId((d) => d.name)
         .nodeSort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); })
@@ -70,5 +70,5 @@ export function prepareSankeyData(args) {
         });
         dataLabels.push(...labels);
     }
-    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlElements, labels: dataLabels };
+    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlLabels, labels: dataLabels };
 }

package/dist/esm/core/shapes/sankey/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
+import type { BaseTextStyle, SankeySeriesData } from '../../../types';
 import type { PreparedSankeySeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SankeyDataLabel = {
     text: string;
     x: number;
@@ -26,8 +27,7 @@ export type SankeyLink = {
 };
 export type PreparedSankeyData = {
     series: PreparedSankeySeries;
-    htmlElements: HtmlItem[];
     nodes: SankeyNode[];
     links: SankeyLink[];
     labels: SankeyDataLabel[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/scatter/types.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlItem, LabelData, ScatterSeriesData } from '../../../types';
 import type { PreparedScatterSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 type PointData = {
     x: number;
     y: number;
@@ -19,6 +20,5 @@ export type PreparedScatterData = MarkerData;
 export type PreparedScatterShapeData = {
     markers: PreparedScatterData[];
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;
 export {};

package/dist/esm/core/shapes/treemap/prepare-data.js

@@ -148,17 +148,17 @@ export async function prepareTreemapData(args) {
     })(hierarchy);
     const leaves = root.leaves();
     let labelData = [];
-    const htmlElements = [];
+    const htmlLabels = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = await getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
             const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
-            htmlElements.push(...htmlItems);
+            htmlLabels.push(...htmlItems);
         }
         else {
             labelData = labels;
         }
     }
-    return { labelData, leaves, series, htmlElements };
+    return { labelData, leaves, series, htmlLabels };
 }

package/dist/esm/core/shapes/treemap/types.d.ts

@@ -1,6 +1,7 @@
 import type { HierarchyRectangularNode } from 'd3-hierarchy';
-import type { HtmlItem, TreemapSeriesData } from '../../../types';
+import type { TreemapSeriesData } from '../../../types';
 import type { PreparedTreemapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type TreemapLabelData = {
     text: string;
     x: number;
@@ -11,5 +12,4 @@ export type PreparedTreemapData = {
     labelData: TreemapLabelData[];
     leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
     series: PreparedTreemapSeries;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/types.d.ts

@@ -0,0 +1,4 @@
+import type { HtmlItem } from '../../types';
+export interface SeriesShapeData {
+    htmlLabels: HtmlItem[];
+}

package/dist/esm/core/shapes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/shapes/waterfall/prepare-data.js

@@ -144,7 +144,7 @@ export const prepareWaterfallData = async (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
-            htmlElements: [],
+            htmlLabels: [],
         };
         preparedData.label = await getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/dist/esm/core/shapes/waterfall/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
+import type { LabelData, WaterfallSeriesData } from '../../../types';
 import type { PreparedWaterfallSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedWaterfallData = {
     x: number;
     y: number;
@@ -10,5 +11,4 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/x-range/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { LabelData, TooltipDataChunkXRange } from '../../../types';
 import type { PreparedXRangeSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     x: number;
     y: number;
@@ -8,5 +9,4 @@ export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     color: string;
     series: PreparedXRangeSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/utils/axis/x-axis.js

@@ -55,8 +55,13 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = getScaleTicks({ scale, ticksCount, dateTimeLabelFormats });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
@@ -64,16 +69,23 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -5,7 +5,7 @@ import { HtmlLayer } from '../HtmlLayer';
 export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 const b = block('bar-y');
 export function BarYSeriesShapes(args) {
-    const { dispatcher, preparedData: { htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
+    const { dispatcher, preparedData: { htmlLabels: htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {

package/dist/esm/hooks/useShapes/heatmap/index.js

@@ -16,5 +16,5 @@ export const HeatmapSeriesShapes = (args) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

package/dist/esm/hooks/useShapes/sankey/index.js

@@ -14,5 +14,5 @@ export const SankeySeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

package/dist/esm/hooks/useShapes/treemap/index.js

@@ -14,5 +14,5 @@ export const TreemapSeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

package/dist/esm/hooks/useShapes/waterfall/index.js

@@ -19,7 +19,7 @@ export const WaterfallSeriesShapes = (args) => {
         return renderWaterfall({ plot: ref.current }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
     }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
             return { htmlElements: items };
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.51.0",
+  "version": "1.51.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",