@gravity-ui/charts 1.18.0 → 1.18.1

package/dist/cjs/components/AxisY/prepare-axis-data.d.ts

@@ -1,10 +1,11 @@
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisYData } from './types';
-export declare function prepareAxisData({ axis, split, scale, top: topOffset, width, height, }: {
+export declare function prepareAxisData({ axis, split, scale, top: topOffset, width, height, series, }: {
     axis: PreparedAxis;
     split: PreparedSplit;
     scale: ChartScale;
     top: number;
     width: number;
     height: number;
+    series: PreparedSeries[];
 }): Promise<AxisYData>;

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -1,5 +1,5 @@
 import { getUniqId } from '@gravity-ui/uikit';
-import { calculateCos, calculateSin, getBandsPosition, getLabelFormatter, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
 import { getTickValues } from './utils';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, topOffset, }) {
     var _a;
@@ -81,7 +81,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     return svgLabel;
 }
 // eslint-disable-next-line complexity
-export async function prepareAxisData({ axis, split, scale, top: topOffset, width, height, }) {
+export async function prepareAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
     var _a, _b, _c;
     const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
@@ -94,9 +94,9 @@ export async function prepareAxisData({ axis, split, scale, top: topOffset, widt
     const ticks = [];
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
-    const values = getTickValues({ scale, axis, labelLineHeight });
+    const values = getTickValues({ scale, axis, labelLineHeight, series });
+    const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
     const labelMaxHeight = values.length > 1 ? values[0].y - values[1].y - axis.labels.padding * 2 : axisHeight;
-    const labelFormatter = getLabelFormatter({ axis, scale });
     for (let i = 0; i < values.length; i++) {
         const tickValue = values[i];
         const y = axisPlotTopPosition + tickValue.y;
@@ -125,7 +125,7 @@ export async function prepareAxisData({ axis, split, scale, top: topOffset, widt
                 };
             }
             else {
-                const text = labelFormatter(tickValue.value);
+                const text = formatAxisTickLabel({ value: tickValue.value, axis, step: tickStep });
                 svgLabel = await getSvgAxisLabel({
                     getTextSize,
                     text,

package/dist/cjs/components/AxisY/utils.d.ts

@@ -1,8 +1,10 @@
-import type { ChartScale, PreparedAxis } from '../../hooks';
-export declare function getTickValues({ scale, axis, labelLineHeight, }: {
+import type { ChartScale, PreparedAxis, PreparedSeries } from '../../hooks';
+import type { ChartSeries } from '../../types';
+export declare function getTickValues({ scale, axis, labelLineHeight, series, }: {
     scale: ChartScale;
     axis: PreparedAxis;
     labelLineHeight: number;
+    series: PreparedSeries[] | ChartSeries[];
 }): {
     y: number;
     value: number | Date;

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

@@ -1,4 +1,4 @@
-import { getMinSpaceBetween, getTicksCount, isBandScale } from '../../utils';
+import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCount, isBandScale } from '../../utils';
 function thinOut(items, delta) {
     const arr = [];
     for (let i = 0; i < items.length; i = i + delta) {
@@ -6,30 +6,63 @@ function thinOut(items, delta) {
     }
     return arr;
 }
-export function getTickValues({ scale, axis, labelLineHeight, }) {
+export function getTickValues({ scale, axis, labelLineHeight, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();
         const height = Math.abs(range[0] - range[1]);
         if (!height) {
             return [];
         }
-        let ticksCount = getTicksCount({ axis, range: height });
-        let result = scale.ticks(ticksCount).map((t) => ({
+        const getScaleTicks = () => {
+            var _a;
+            if (series.some((s) => s.type === 'bar-y')) {
+                const domainData = getDomainDataYBySeries(series);
+                if (domainData.length < 3) {
+                    return domainData;
+                }
+                const ticksCount = (_a = getTicksCount({ axis, range: height })) !== null && _a !== void 0 ? _a : domainData.length;
+                return scale.ticks(Math.min(ticksCount, domainData.length));
+            }
+            const ticksCount = getTicksCount({ axis, range: height });
+            return scale.ticks(ticksCount);
+        };
+        const scaleTicks = getScaleTicks();
+        const originalTickValues = scaleTicks.map((t) => ({
             y: scale(t),
             value: t,
         }));
-        if (result.length <= 1) {
-            return result;
+        if (originalTickValues.length <= 1) {
+            return originalTickValues;
         }
-        let labelHeight = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
-        ticksCount = result.length - 1;
-        while (labelHeight < labelLineHeight && result.length > 1) {
+        // first, we try to draw "beautiful" tick values
+        let result = originalTickValues;
+        let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+        let ticksCount = result.length - 1;
+        while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
-            result = scale.ticks(ticksCount).map((t) => ({
+            const newScaleTicks = scale.ticks(ticksCount);
+            result = newScaleTicks.map((t) => ({
                 y: scale(t),
                 value: t,
             }));
-            labelHeight = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+            availableSpaceForLabel =
+                getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+        }
+        // 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;
+            availableSpaceForLabel =
+                getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+            let delta = 2;
+            while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
+                result = thinOut(result, delta);
+                if (result.length > 1) {
+                    delta += 1;
+                    availableSpaceForLabel =
+                        getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+                }
+            }
         }
         return result;
     }
@@ -47,13 +80,13 @@ export function getTickValues({ scale, axis, labelLineHeight, }) {
             return items;
         }
         let result = [...items];
-        let labelHeight = result[0].y - result[1].y - axis.labels.padding * 2;
+        let availableSpaceForLabel = Math.abs(result[0].y - result[1].y) - axis.labels.padding * 2;
         let delta = 2;
-        while (labelHeight < labelLineHeight && result.length > 1) {
+        while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             result = thinOut(items, delta);
             if (result.length > 1) {
                 delta += 1;
-                labelHeight = result[0].y - result[1].y - axis.labels.padding * 2;
+                availableSpaceForLabel = result[0].y - result[1].y - axis.labels.padding * 2;
             }
         }
         return result;

package/dist/cjs/components/ChartInner/index.js

@@ -100,6 +100,7 @@ export const ChartInner = (props) => {
                         width: boundsWidth,
                         height: boundsHeight,
                         split: preparedSplit,
+                        series: preparedSeries,
                     });
                     items.push(axisData);
                 }
@@ -108,7 +109,7 @@ export const ChartInner = (props) => {
                 setYAxisDataItems(items);
             }
         })();
-    }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSplit, yAxis, yScale]);
+    }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -66,10 +66,9 @@ export function useChartInnerProps(props) {
             boundsHeight: estimatedBoundsHeight,
             width,
             seriesData: zoomedSeriesData,
-            seriesOptions: preparedSeriesOptions,
             yAxis: data.yAxis,
         }).then((val) => setYAxis(val));
-    }, [data.yAxis, estimatedBoundsHeight, height, preparedSeriesOptions, width, zoomedSeriesData]);
+    }, [data.yAxis, estimatedBoundsHeight, height, width, zoomedSeriesData]);
     const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -23,7 +23,6 @@ export declare function createYScale(args: {
     axis: PreparedAxis;
     boundsHeight: number;
     series: (PreparedSeries | ChartSeries)[];
-    seriesOptions: PreparedSeriesOptions;
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;

package/dist/cjs/hooks/useAxisScales/index.js

@@ -3,7 +3,7 @@ import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
-import { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
+import { getBandSize } from '../utils';
 import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function validateArrayData(data) {
@@ -40,25 +40,12 @@ function filterCategoriesByVisibleSeries(args) {
 // axis is validated in `validation/index.ts`, so the value of `axis.type` is definitely valid.
 // eslint-disable-next-line consistent-return
 function getYScaleRange(args) {
-    const { axis, boundsHeight, series, seriesOptions } = args;
+    const { axis, boundsHeight } = args;
     switch (axis.type) {
         case 'datetime':
         case 'linear':
         case 'logarithmic': {
-            let range = [boundsHeight, boundsHeight * axis.maxPadding];
-            const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
-            if (barYSeries.length) {
-                const groupedData = groupBarYDataByYValue(barYSeries, [axis]);
-                if (Object.keys(groupedData).length > 1) {
-                    const { bandSize } = getBarYLayoutForNumericScale({
-                        plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
-                        groupedData,
-                        seriesOptions: seriesOptions,
-                    });
-                    const offset = bandSize / 2;
-                    range = [range[0] - offset, range[1] + offset];
-                }
-            }
+            const range = [boundsHeight, 0];
             switch (axis.order) {
                 case 'sortDesc':
                 case 'reverse': {
@@ -74,12 +61,12 @@ function getYScaleRange(args) {
 }
 // eslint-disable-next-line complexity
 export function createYScale(args) {
-    const { axis, boundsHeight, series, seriesOptions } = args;
+    const { axis, boundsHeight, series } = args;
     const yMinProps = get(axis, 'min');
     const yMaxProps = get(axis, 'max');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
-    const range = getYScaleRange({ axis, boundsHeight, series, seriesOptions });
+    const range = getYScaleRange({ axis, boundsHeight });
     switch (axis.type) {
         case 'linear':
         case 'logarithmic': {
@@ -100,7 +87,23 @@ export function createYScale(args) {
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([yMin, yMax]).range(range).nice();
+                const scale = scaleFn().domain([yMin, yMax]).range(range);
+                let offsetMin = 0;
+                let offsetMax = boundsHeight * axis.maxPadding;
+                const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
+                if (barYSeries.length) {
+                    if (domain.length > 1) {
+                        const bandWidth = getBandSize({
+                            scale: scale,
+                            domain: domain,
+                        });
+                        offsetMin += bandWidth / 2;
+                        offsetMax += bandWidth / 2;
+                    }
+                }
+                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
             }
             break;
         }
@@ -132,7 +135,23 @@ export function createYScale(args) {
                     const [yMinTimestamp, yMaxTimestamp] = extent(domain);
                     const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
                     const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
-                    return scaleUtc().domain([yMin, yMax]).range(range).nice();
+                    const scale = scaleUtc().domain([yMin, yMax]).range(range);
+                    let offsetMin = 0;
+                    let offsetMax = boundsHeight * axis.maxPadding;
+                    const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
+                    if (barYSeries.length) {
+                        if (Object.keys(domain).length > 1) {
+                            const bandWidth = getBandSize({
+                                scale: scale,
+                                domain: domain,
+                            });
+                            offsetMin += bandWidth / 2;
+                            offsetMax += bandWidth / 2;
+                        }
+                    }
+                    const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                    const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                    return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
                 }
             }
         }
@@ -207,6 +226,9 @@ export function createXScale(args) {
             if (hasOnlyNullValues || domainData.length === 0) {
                 return undefined;
             }
+            if (series.some((s) => s.stacking === 'percent')) {
+                return scaleLinear().domain([0, 100]).range(range);
+            }
             if (hasNumberAndNullValues) {
                 const [xMinDomain, xMaxDomain] = extent(domainData);
                 let xMin;
@@ -304,7 +326,6 @@ const createScales = (args) => {
                 axis,
                 boundsHeight: axisHeight,
                 series: visibleAxisSeries.length ? visibleAxisSeries : axisSeries,
-                seriesOptions,
             });
         }),
     };

package/dist/cjs/hooks/useChartOptions/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlot, ChartYAxis } from '../../types';
+import type { AxisPlot, ChartAxis } from '../../types';
 export declare function prepareAxisPlotLabel(d: AxisPlot): {
     text: string;
     style: {
@@ -8,4 +8,7 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     };
     padding: number;
 };
-export declare function getAxisCategories(axis?: ChartYAxis): string[] | undefined;
+export declare function getAxisCategories({ categories, order, }?: {
+    categories?: string[];
+    order?: ChartAxis['order'];
+}): string[] | undefined;

package/dist/cjs/hooks/useChartOptions/utils.js

@@ -8,10 +8,9 @@ export function prepareAxisPlotLabel(d) {
         padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
     };
 }
-export function getAxisCategories(axis) {
-    const categories = axis === null || axis === void 0 ? void 0 : axis.categories;
+export function getAxisCategories({ categories, order, } = {}) {
     if (categories) {
-        switch (axis.order) {
+        switch (order) {
             case 'reverse': {
                 return reverse(categories);
             }

package/dist/cjs/hooks/useChartOptions/y-axis.d.ts

@@ -1,11 +1,9 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
-import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }: {
+export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, yAxis, }: {
     height: number;
     boundsHeight: number;
     width: number;
     seriesData: ChartSeries[];
-    seriesOptions: PreparedSeriesOptions;
     yAxis: ChartYAxis[] | undefined;
 }) => Promise<PreparedAxis[]>;

package/dist/cjs/hooks/useChartOptions/y-axis.js

@@ -5,7 +5,7 @@ import { calculateNumericProperty, formatAxisTickLabel, getClosestPointsRange, g
 import { createYScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
-    const { axis, seriesData, seriesOptions, height } = args;
+    const { axis, seriesData, height } = args;
     if (!axis.labels.enabled) {
         return { height: 0, width: 0 };
     }
@@ -13,14 +13,13 @@ const getAxisLabelMaxWidth = async (args) => {
         axis,
         boundsHeight: height,
         series: seriesData,
-        seriesOptions,
     });
     if (!scale) {
         return { height: 0, width: 0 };
     }
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
-    const tickValues = getTickValues({ axis, scale, labelLineHeight });
+    const tickValues = getTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const ticks = getScaleTicks(scale);
     const tickStep = getClosestPointsRange(axis, ticks);
     if (axis.type === 'datetime' && !axis.labels.dateFormat) {
@@ -39,7 +38,7 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return { height: size.maxHeight, width: size.maxWidth };
 };
-export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }) => {
+export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
@@ -153,7 +152,6 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seri
             const { height: labelsHeight, width: labelsWidth } = await getAxisLabelMaxWidth({
                 axis: preparedAxis,
                 seriesData,
-                seriesOptions,
                 height: boundsHeight,
             });
             preparedAxis.labels.height = labelsHeight;

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -9,7 +9,9 @@ async function prepareDataLabels(series) {
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
     const html = get(series, 'dataLabels.html', false);
     const labels = enabled
-        ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.x || d.label }, series.dataLabels)))
+        ? series.data
+            .filter((d) => Boolean(d.x || d.label))
+            .map((d) => getFormattedValue(Object.assign({ value: d.x || d.label }, series.dataLabels)))
         : [];
     const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
         labels,

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.d.ts

@@ -2,11 +2,13 @@ import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
 import type { BarYShapesArgs } from './types';
-export declare const prepareBarYData: (args: {
+export declare function prepareBarYData(args: {
+    boundsHeight: number;
+    boundsWidth: number;
     series: PreparedBarYSeries[];
     seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: (ChartScale | undefined)[];
-}) => Promise<BarYShapesArgs>;
+}): Promise<BarYShapesArgs>;

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -1,12 +1,12 @@
 import { ascending, descending, sort } from 'd3';
 import get from 'lodash/get';
-import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../utils';
+import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { getBarYLayoutForCategoryScale, getBarYLayoutForNumericScale, groupBarYDataByYValue, } from '../../utils';
+import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
 const DEFAULT_LABEL_PADDING = 7;
-export const prepareBarYData = async (args) => {
+export async function prepareBarYData(args) {
     var _a;
-    const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
+    const { boundsHeight, boundsWidth, series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
@@ -18,7 +18,6 @@ export const prepareBarYData = async (args) => {
         };
     }
     const yScaleRange = yLinearScale.range();
-    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -35,13 +34,13 @@ export const prepareBarYData = async (args) => {
         }
     })();
     const groupedData = groupBarYDataByYValue(series, yAxis);
-    const { bandSize, barGap, barSize } = yAxis[0].type === 'category'
-        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale: yLinearScale })
-        : getBarYLayoutForNumericScale({
-            groupedData,
-            seriesOptions,
-            plotHeight: plotHeight - plotHeight * yAxis[0].maxPadding,
-        });
+    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
+    const { bandSize, barGap, barSize } = getBarYLayout({
+        groupedData,
+        seriesOptions,
+        plotHeight,
+        scale: yScale,
+    });
     const result = [];
     const baseRangeValue = xLinearScale.range()[0];
     Object.entries(groupedData).forEach(([yValue, val]) => {
@@ -106,7 +105,7 @@ export const prepareBarYData = async (args) => {
         });
     });
     let labels = [];
-    const htmlElements = [];
+    let htmlElements = [];
     const map = new Map();
     for (let i = 0; i < result.length; i++) {
         const prepared = result[i];
@@ -124,12 +123,20 @@ export const prepareBarYData = async (args) => {
                     style: dataLabels.style,
                     html: dataLabels.html,
                 });
-                htmlElements.push({
+                const constrainedPosition = getHtmlLabelConstraintedPosition({
+                    boundsHeight,
+                    boundsWidth,
+                    height,
+                    width,
                     x,
                     y: y - height / 2,
+                });
+                htmlElements.push({
                     content,
                     size: { width, height },
                     style: dataLabels.style,
+                    x: constrainedPosition.x,
+                    y: constrainedPosition.y,
                 });
             }
             else {
@@ -138,24 +145,36 @@ export const prepareBarYData = async (args) => {
                 }
                 const getTextSize = map.get(dataLabels.style);
                 const { width, height } = await getTextSize(content);
-                labels.push({
+                const constrainedPosition = getSvgLabelConstraintedPosition({
+                    boundsHeight,
+                    boundsWidth,
+                    height,
+                    width,
                     x,
                     y: y + height / 2,
+                });
+                labels.push({
+                    size: { width, height },
+                    series: prepared.series,
+                    style: dataLabels.style,
                     text: content,
                     textAnchor: dataLabels.inside ? 'middle' : 'right',
-                    style: dataLabels.style,
-                    series: prepared.series,
-                    size: { width, height },
+                    x: constrainedPosition.x,
+                    y: constrainedPosition.y,
                 });
             }
         }
     }
-    if (!((_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+    const allowOverlap = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap;
+    if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }
+    else if (htmlElements.length && !allowOverlap) {
+        htmlElements = filterOverlappingLabels(htmlElements);
+    }
     return {
         shapes: result,
         labels,
         htmlElements,
     };
-};
+}

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

@@ -56,6 +56,8 @@ export const useShapes = (args) => {
                     case 'bar-y': {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareBarYData({
+                                boundsHeight,
+                                boundsWidth,
                                 series: chartSeries,
                                 seriesOptions,
                                 xAxis,

package/dist/cjs/hooks/useZoom/utils.js

@@ -95,6 +95,22 @@ function selectionXToZoomBounds(args) {
         }
     }
 }
+function getYMinMaxFromSelection(args) {
+    const { selection, yAxis } = args;
+    let yMin;
+    let yMax;
+    switch (yAxis.order) {
+        case 'reverse':
+        case 'sortDesc': {
+            [yMin, yMax] = selection;
+            break;
+        }
+        default: {
+            [yMax, yMin] = selection;
+        }
+    }
+    return [yMin, yMax];
+}
 function selectionYToZoomBounds(args) {
     const { yAxis, yScale, selection } = args;
     switch (yAxis.type) {
@@ -104,8 +120,8 @@ function selectionYToZoomBounds(args) {
             const categories = yAxis.categories || [];
             const currentDomain = bandScale.domain();
             const step = bandScale.step();
-            let startIndex = currentDomain.length - 1 - Math.floor(y0 / step);
-            let endIndex = currentDomain.length - 1 - Math.floor(y1 / step);
+            let startIndex = Math.max(0, currentDomain.length - 1 - Math.floor(y0 / step));
+            let endIndex = Math.min(currentDomain.length - 1, currentDomain.length - 1 - Math.floor(y1 / step));
             const startCategory = currentDomain[startIndex];
             const endCategory = currentDomain[endIndex];
             startIndex = categories.indexOf(startCategory);
@@ -119,18 +135,18 @@ function selectionYToZoomBounds(args) {
             return [startIndex, endIndex];
         }
         case 'datetime': {
-            const [y1, y0] = selection;
+            const [yMin, yMax] = getYMinMaxFromSelection({ selection, yAxis });
             const timeScale = yScale;
-            const minTimestamp = timeScale.invert(y0).getTime();
-            const maxTimestamp = timeScale.invert(y1).getTime();
+            const minTimestamp = timeScale.invert(yMin).getTime();
+            const maxTimestamp = timeScale.invert(yMax).getTime();
             return [minTimestamp, maxTimestamp];
         }
         case 'linear':
         case 'logarithmic': {
-            const [y1, y0] = selection;
+            const [yMin, yMax] = getYMinMaxFromSelection({ selection, yAxis });
             const linearScale = yScale;
-            const minValue = linearScale.invert(y0);
-            const maxValue = linearScale.invert(y1);
+            const minValue = linearScale.invert(yMin);
+            const maxValue = linearScale.invert(yMax);
             return [minValue, maxValue];
         }
         default: {