@gravity-ui/charts 1.18.0 → 1.18.1

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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: {

package/dist/esm/hooks/utils/bar-y.d.ts

@@ -1,3 +1,4 @@
+import type { AxisDomain, AxisScale } from 'd3';
 import type { BarYSeries, BarYSeriesData } from '../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
@@ -6,19 +7,15 @@ export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBar
     data: BarYSeriesData;
     series: T;
 }[]>>;
-export declare function getBarYLayoutForNumericScale(args: {
+export declare function getBandSize({ domain, scale, }: {
+    domain: AxisDomain[];
+    scale: AxisScale<AxisDomain> | undefined;
+}): number;
+export declare function getBarYLayout(args: {
     plotHeight: number;
     seriesOptions: PreparedSeriesOptions;
     groupedData: ReturnType<typeof groupBarYDataByYValue>;
-}): {
-    bandSize: number;
-    barGap: number;
-    barSize: number;
-};
-export declare function getBarYLayoutForCategoryScale(args: {
-    groupedData: ReturnType<typeof groupBarYDataByYValue>;
-    seriesOptions: PreparedSeriesOptions;
-    yScale: ChartScale;
+    scale: ChartScale | undefined;
 }): {
     bandSize: number;
     barGap: number;

package/dist/esm/hooks/utils/bar-y.js

@@ -1,6 +1,6 @@
 import { max } from 'd3';
 import get from 'lodash/get';
-import { getDataCategoryValue } from '../../utils';
+import { getDataCategoryValue, isBandScale } from '../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getSeriesStackId } from '../useSeries/utils';
 export function groupBarYDataByYValue(series, yAxis) {
@@ -27,28 +27,43 @@ export function groupBarYDataByYValue(series, yAxis) {
     });
     return data;
 }
-export function getBarYLayoutForNumericScale(args) {
-    const { plotHeight, groupedData, seriesOptions } = args;
-    const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
-    const barPadding = get(seriesOptions, 'bar-y.barPadding');
-    const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
-    const groups = Object.values(groupedData);
-    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
-    const bandSize = plotHeight / groups.length;
-    const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
-    const groupSize = bandSize - groupGap;
-    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
-    return { bandSize, barGap, barSize };
+export function getBandSize({ domain, scale, }) {
+    if (!scale || !domain.length) {
+        return 0;
+    }
+    if (isBandScale(scale)) {
+        return scale.bandwidth();
+    }
+    const range = scale.range();
+    const plotHeight = Math.abs(range[0] - range[1]);
+    if (domain.length === 1) {
+        return plotHeight;
+    }
+    // for the numeric or datetime axes, you first need to count domain.length + 1,
+    // since the extreme points are located not in the center of the bar, but along the edges of the axes
+    let bandWidth = plotHeight / (domain.length - 1);
+    domain.forEach((current, index) => {
+        if (index > 0) {
+            const prev = domain[index - 1];
+            const prevY = scale(prev);
+            const currentY = scale(current);
+            if (typeof prevY === 'number' && typeof currentY === 'number') {
+                const distance = Math.abs(prevY - currentY);
+                bandWidth = Math.min(bandWidth, distance);
+            }
+        }
+    });
+    return bandWidth;
 }
-export function getBarYLayoutForCategoryScale(args) {
-    const { groupedData, seriesOptions, yScale } = args;
+export function getBarYLayout(args) {
+    const { groupedData, seriesOptions, scale } = args;
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-y.barPadding');
     const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
-    const bandSize = yScale.bandwidth();
-    const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
+    const domain = Object.keys(groupedData);
+    const bandSize = getBandSize({ domain, scale: scale });
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
     const groupSize = bandSize - groupGap;
     const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
     const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - barGap, barMaxWidth));

package/dist/esm/utils/chart/array.js

@@ -1,4 +1,7 @@
 export function getMinSpaceBetween(arr, iterator) {
+    if (arr.length < 2) {
+        return 0;
+    }
     return arr.reduce((acc, item, index) => {
         const prev = arr[index - 1];
         if (prev) {

package/dist/esm/utils/chart/format.js

@@ -1,4 +1,4 @@
-import { dateTime } from '@gravity-ui/date-utils';
+import { dateTimeUtc } from '@gravity-ui/date-utils';
 import capitalize from 'lodash/capitalize';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import { formatNumber, getDefaultUnit } from '../../libs';
@@ -6,7 +6,7 @@ import { getDefaultDateFormat } from './time';
 const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
 function getFormattedDate(args) {
     const { value, format = DEFAULT_DATE_FORMAT } = args;
-    const date = dateTime({ input: value });
+    const date = dateTimeUtc({ input: value });
     if (date === null || date === void 0 ? void 0 : date.isValid()) {
         const formattedDate = date.format(format);
         if (LETTER_MOUNTH_AT_START_FORMAT_REGEXP.test(format)) {

package/dist/esm/utils/chart/index.js

@@ -128,7 +128,7 @@ export function getDefaultMinYAxisValue(series) {
 }
 export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
-    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+    const items = Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         switch (type) {
             case 'area':
             case 'bar-x': {
@@ -152,6 +152,7 @@ export const getDomainDataYBySeries = (series) => {
         }
         return acc;
     }, []);
+    return Array.from(new Set(items));
 };
 // Uses to get all series names array (except `pie` charts)
 export const getSeriesNames = (series) => {

package/dist/esm/utils/chart/labels.d.ts

@@ -1,6 +1,28 @@
-import type { LabelData } from '../../types';
+import type { HtmlItem, LabelData } from '../../types';
 export declare function getLeftPosition(label: LabelData): number;
-export declare function getOverlappingByX(rect1: LabelData, rect2: LabelData, gap?: number): number;
-export declare function getOverlappingByY(rect1: LabelData, rect2: LabelData, gap?: number): number;
-export declare function isLabelsOverlapping<T extends LabelData>(label1: T, label2: T, padding?: number): boolean;
-export declare function filterOverlappingLabels<T extends LabelData>(labels: T[]): T[];
+export declare function getOverlappingByX(rect1: LabelData | HtmlItem, rect2: LabelData | HtmlItem, gap?: number): number;
+export declare function getOverlappingByY(rect1: LabelData | HtmlItem, rect2: LabelData | HtmlItem, gap?: number): number;
+export declare function isLabelsOverlapping<T extends LabelData | HtmlItem>(label1: T, label2: T, padding?: number): boolean;
+export declare function filterOverlappingLabels<T extends LabelData | HtmlItem>(labels: T[]): T[];
+export declare function getSvgLabelConstraintedPosition(args: {
+    boundsHeight: number;
+    boundsWidth: number;
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};
+export declare function getHtmlLabelConstraintedPosition(args: {
+    boundsHeight: number;
+    boundsWidth: number;
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};

package/dist/esm/utils/chart/labels.js

@@ -16,9 +16,9 @@ export function getLeftPosition(label) {
     }
 }
 export function getOverlappingByX(rect1, rect2, gap = 0) {
-    const left1 = getLeftPosition(rect1);
+    const left1 = 'textAnchor' in rect1 ? getLeftPosition(rect1) : rect1.x;
     const right1 = left1 + rect1.size.width;
-    const left2 = getLeftPosition(rect2);
+    const left2 = 'textAnchor' in rect2 ? getLeftPosition(rect2) : rect2.x;
     const right2 = left2 + rect2.size.width;
     return Math.max(0, Math.min(right1, right2) - Math.max(left1, left2) + gap);
 }
@@ -34,7 +34,7 @@ export function isLabelsOverlapping(label1, label2, padding = 0) {
 }
 export function filterOverlappingLabels(labels) {
     const result = [];
-    const sorted = sortBy(labels, (d) => d.y, getLeftPosition);
+    const sorted = sortBy(labels, (d) => d.y, (d) => ('textAnchor' in d ? getLeftPosition(d) : d.x));
     sorted.forEach((label) => {
         if (!result.some((l) => isLabelsOverlapping(label, l))) {
             result.push(label);
@@ -42,3 +42,39 @@ export function filterOverlappingLabels(labels) {
     });
     return result;
 }
+export function getSvgLabelConstraintedPosition(args) {
+    const { boundsHeight, boundsWidth, height, width, x, y } = args;
+    let resultX = x;
+    let resultY = y;
+    if (x < 0) {
+        resultX = 0;
+    }
+    if (x + width > boundsWidth) {
+        resultX = boundsWidth - width;
+    }
+    if (y - height < 0) {
+        resultY = 0;
+    }
+    if (y > boundsHeight) {
+        resultY = boundsHeight;
+    }
+    return { x: resultX, y: resultY };
+}
+export function getHtmlLabelConstraintedPosition(args) {
+    const { boundsHeight, boundsWidth, height, width, x, y } = args;
+    let resultX = x;
+    let resultY = y;
+    if (x < 0) {
+        resultX = 0;
+    }
+    if (x + width > boundsWidth) {
+        resultX = boundsWidth - width;
+    }
+    if (y < 0) {
+        resultY = 0;
+    }
+    if (y + height > boundsHeight) {
+        resultY = boundsHeight - height;
+    }
+    return { x: resultX, y: resultY };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",