@gravity-ui/charts 1.43.1 → 1.44.0

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

@@ -22,6 +22,7 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
+import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
     return false;
@@ -224,6 +225,22 @@ export async function getShapes(args) {
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
+            case SERIES_TYPE.XRange: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareXRangeData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsWidth,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(XRangeSeriesShapes, { key: SERIES_TYPE.XRange, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
             default: {
                 throw new ChartError({
                     message: `The display method is not defined for a series with type "${seriesType}"`,

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/package.json

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