@gravity-ui/charts 1.43.1 → 1.45.0

package/dist/esm/hooks/useShapes/x-range/prepare-data.js

@@ -0,0 +1,147 @@
+import get from 'lodash/get';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../core/utils';
+import { getFormattedValue } from '../../../core/utils/format';
+import { MIN_BAR_WIDTH } from '../../constants';
+import { getBandSize } from '../../utils/get-band-size';
+const DEFAULT_BAR_PADDING = 0.2;
+export async function prepareXRangeData(args) {
+    var _a;
+    const { series, xAxis, xScale, yAxis, yScale: [yScale], boundsWidth, isRangeSlider, } = args;
+    if (!yScale) {
+        return [];
+    }
+    // Collect unique y-domain values
+    const domain = [];
+    const seen = new Set();
+    const categories = get(yAxis[0], 'categories', []);
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const key = yAxis[0].type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
+                : d.y;
+            if (key !== undefined && !seen.has(key)) {
+                seen.add(key);
+                domain.push(key);
+            }
+        });
+    });
+    const bandSize = getBandSize({ domain, scale: yScale });
+    const barSize = Math.max(MIN_BAR_WIDTH, bandSize * (1 - DEFAULT_BAR_PADDING));
+    const result = [];
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            let center;
+            if (yAxis[0].type === 'category') {
+                const bandScale = yScale;
+                const yCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: d });
+                if (!bandScale.domain().includes(yCategory)) {
+                    return;
+                }
+                center = (bandScale(yCategory) || 0) + bandSize / 2;
+            }
+            else {
+                const linearScale = yScale;
+                if (d.y === undefined) {
+                    return;
+                }
+                center = linearScale(Number(d.y));
+            }
+            let xStart;
+            let xEnd;
+            if (xAxis.type === 'category') {
+                // x-range on a category x-axis is unusual but supported
+                const xBandScale = xScale;
+                const xCategories = get(xAxis, 'categories', []);
+                const startCategory = getDataCategoryValue({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    data: { x: d.x0 },
+                });
+                const endCategory = getDataCategoryValue({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    data: { x: d.x1 },
+                });
+                xStart = xBandScale(startCategory) || 0;
+                xEnd = (xBandScale(endCategory) || 0) + xBandScale.bandwidth();
+            }
+            else {
+                const linearScale = xScale;
+                xStart = linearScale(Number(d.x0));
+                xEnd = linearScale(Number(d.x1));
+            }
+            const width = xEnd - xStart;
+            if (width <= 0) {
+                return;
+            }
+            result.push({
+                x: xStart,
+                y: center - barSize / 2,
+                width,
+                height: barSize,
+                color: d.color || s.color,
+                data: d,
+                series: s,
+                htmlLabels: [],
+                svgLabels: [],
+            });
+        });
+    });
+    const textSizeFnCache = new Map();
+    for (let i = 0; i < result.length; i++) {
+        const item = result[i];
+        const { dataLabels } = item.series;
+        if (!dataLabels.enabled || item.data.label === null || isRangeSlider) {
+            continue;
+        }
+        const content = getFormattedValue(Object.assign({ value: item.data.label }, dataLabels));
+        const visibleStart = Math.max(0, item.x);
+        const visibleEnd = boundsWidth === undefined
+            ? item.x + item.width
+            : Math.min(boundsWidth, item.x + item.width);
+        const visibleWidth = visibleEnd - visibleStart;
+        const visibleCenterX = visibleStart + visibleWidth / 2;
+        if (dataLabels.html) {
+            const { maxHeight: height, maxWidth: width } = await getLabelsSize({
+                labels: [content],
+                style: dataLabels.style,
+                html: true,
+            });
+            const htmlItem = {
+                content,
+                size: { width, height },
+                style: dataLabels.style,
+                x: visibleCenterX - width / 2,
+                y: item.y + item.height / 2 - height / 2,
+            };
+            item.htmlLabels.push(htmlItem);
+        }
+        else {
+            if (!textSizeFnCache.has(dataLabels.style)) {
+                textSizeFnCache.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
+            }
+            const getTextSize = (_a = textSizeFnCache.get(dataLabels.style)) !== null && _a !== void 0 ? _a : getTextSizeFn({ style: dataLabels.style });
+            const availableWidth = Math.max(0, visibleWidth - 2 * dataLabels.padding);
+            const text = await getTextWithElipsis({
+                text: content,
+                getTextWidth: (s) => getTextSize(s).then((r) => r.width),
+                maxWidth: availableWidth,
+            });
+            if (!text) {
+                continue;
+            }
+            const { width, height, hangingOffset } = await getTextSize(text);
+            const svgItem = {
+                text,
+                size: { width, height, hangingOffset },
+                style: dataLabels.style,
+                textAnchor: 'middle',
+                x: visibleCenterX,
+                y: item.y + item.height / 2,
+                series: item.series,
+            };
+            item.svgLabels.push(svgItem);
+        }
+    }
+    return result;
+}

package/dist/esm/hooks/useShapes/x-range/types.d.ts

@@ -0,0 +1,12 @@
+import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { PreparedXRangeSeries } from '../../useSeries/types';
+export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    series: PreparedXRangeSeries;
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+};

package/dist/esm/hooks/useShapes/x-range/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.43.1",
+  "version": "1.45.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -96,7 +96,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.4.0",
+    "@gravity-ui/uikit": "^7.18.0",
     "@playwright/experimental-ct-react": "^1.56.1",
     "@playwright/test": "^1.56.1",
     "@storybook/addon-a11y": "^10.2.16",