@gravity-ui/charts 1.43.0 → 1.44.0

package/dist/esm/hooks/useShapes/line/prepare-data.d.ts

@@ -1,5 +1,6 @@
 import type { PreparedSplit } from '../../../core/layout/split-types';
 import type { ChartScale } from '../../../core/scales/types';
+import type { ShapeDataWithLabels } from '../../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 import type { PreparedLineData } from './types';
@@ -12,4 +13,5 @@ export declare const prepareLineData: (args: {
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
     isRangeSlider?: boolean;
+    otherLayers: ShapeDataWithLabels[];
 }) => Promise<PreparedLineData[]>;

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -1,4 +1,4 @@
-import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
+import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { getXValue, getYValue } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
@@ -16,7 +16,7 @@ async function getHtmlLabel(point, series, xMax) {
 }
 export const prepareLineData = async (args) => {
     var _a, _b, _c, _d;
-    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const acc = [];
@@ -44,8 +44,8 @@ export const prepareLineData = async (args) => {
                 series: s,
             };
         });
-        const htmlElements = [];
-        const labels = [];
+        let htmlElements = [];
+        let svgLabels = [];
         if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
@@ -83,11 +83,15 @@ export const prepareLineData = async (args) => {
                             series: s,
                             active: true,
                         };
-                        labels.push(labelData);
+                        svgLabels.push(labelData);
                     }
                 }
             }
         }
+        if (!s.dataLabels.allowOverlap) {
+            svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
+            htmlElements = filterOverlappingLabels(htmlElements, otherLayers.map((l) => l.htmlLabels).flat());
+        }
         let markers = [];
         const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
         if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
@@ -111,12 +115,12 @@ export const prepareLineData = async (args) => {
         const result = {
             points,
             markers,
-            labels,
+            svgLabels: svgLabels,
             series: s,
             hovered: false,
             active: true,
             id: s.id,
-            htmlElements,
+            htmlLabels: htmlElements,
             color: s.color,
             lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
             dashStyle: s.dashStyle,

package/dist/esm/hooks/useShapes/line/types.d.ts

@@ -25,8 +25,8 @@ export type PreparedLineData = {
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;
-    labels: LabelData[];
-    htmlElements: HtmlItem[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+export { prepareXRangeData } from './prepare-data';
+export type { PreparedXRangeData } from './types';
+import type { PreparedXRangeData } from './types';
+type Args = {
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
+    preparedData: PreparedXRangeData[];
+    seriesOptions: PreparedSeriesOptions;
+    dispatcher?: Dispatch<object>;
+};
+export declare function XRangeSeriesShapes(args: Args): React.JSX.Element;

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { getLineDashArray } from '../../../core/utils';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getRectPath } from '../utils';
+export { prepareXRangeData } from './prepare-data';
+const b = block('x-range');
+export function XRangeSeriesShapes(args) {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const segmentSelection = svgElement
+            .selectAll(`path.${b('segment')}`)
+            .data(preparedData)
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+            return getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius,
+            }).toString();
+        })
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+            .attr('cursor', (d) => d.series.cursor);
+        svgElement
+            .selectAll(`path.${b('segment-border')}`)
+            .data(preparedData.filter((d) => d.series.borderWidth > 0))
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+            return getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius,
+            }).toString();
+        })
+            .attr('class', b('segment-border'))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.series.borderColor)
+            .attr('stroke-width', (d) => d.series.borderWidth)
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.series.borderDashStyle, d.series.borderWidth))
+            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+            .attr('pointer-events', 'none');
+        const svgLabels = preparedData.flatMap((d) => d.svgLabels);
+        svgElement
+            .selectAll(`text.${b('label')}`)
+            .data(svgLabels)
+            .join('text')
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .attr('dominant-baseline', 'central')
+            .attr('pointer-events', 'none')
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null)
+            .html((d) => d.text);
+        const hoverOptions = get(seriesOptions, 'x-range.states.hover');
+        const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
+                const hoveredSet = new Set(data === null || data === void 0 ? void 0 : data.map((d) => d.data));
+                segmentSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.color;
+                    if (hoveredSet.has(d.data)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
+                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
+                segmentSelection.attr('opacity', (d) => {
+                    var _a, _b;
+                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
+                        return inactiveOptions.opacity || null;
+                    }
+                    return (_b = (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity) !== null && _b !== void 0 ? _b : null;
+                });
+            }
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover((_a = hoveredDataRef.current) !== null && _a !== void 0 ? _a : undefined);
+        }
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', handleShapeHover);
+        return () => {
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
+}

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

@@ -0,0 +1,15 @@
+import type { ChartScale } from '../../../core/scales/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
+import type { PreparedXRangeSeries } from '../../useSeries/types';
+import type { PreparedXRangeData } from './types';
+type PrepareXRangeDataArgs = {
+    series: PreparedXRangeSeries[];
+    xAxis: PreparedXAxis;
+    xScale: ChartScale;
+    yAxis: PreparedYAxis[];
+    yScale: (ChartScale | undefined)[];
+    boundsWidth?: number;
+    isRangeSlider?: boolean;
+};
+export declare function prepareXRangeData(args: PrepareXRangeDataArgs): Promise<PreparedXRangeData[]>;
+export {};

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/dist/esm/types/chart-ui.d.ts

@@ -25,6 +25,10 @@ export interface HtmlItem {
     };
     style?: BaseTextStyle & React.CSSProperties;
 }
+export interface ShapeDataWithLabels {
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+}
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];
 }

package/package.json

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

package/dist/cjs/core/constants/misc.d.ts

@@ -1 +0,0 @@
-export declare const IS_TOUCH_ENABLED: boolean;

package/dist/cjs/core/constants/misc.js

@@ -1,7 +0,0 @@
-function isTouchEnabled() {
-    if (typeof window !== 'object') {
-        return false;
-    }
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-}
-export const IS_TOUCH_ENABLED = isTouchEnabled();

package/dist/esm/core/constants/misc.d.ts

@@ -1 +0,0 @@
-export declare const IS_TOUCH_ENABLED: boolean;

package/dist/esm/core/constants/misc.js

@@ -1,7 +0,0 @@
-function isTouchEnabled() {
-    if (typeof window !== 'object') {
-        return false;
-    }
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-}
-export const IS_TOUCH_ENABLED = isTouchEnabled();