@gravity-ui/charts 1.46.0 → 1.46.1

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

@@ -1,20 +1,14 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { line as lineGenerator } from 'd3-shape';
-import get from 'lodash/get';
-import { DASH_STYLE } from '../../../core/constants';
-import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../../core/utils';
+import { renderWaterfall } from '../../../core/shapes/waterfall/renderer';
+import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-export { prepareWaterfallData } from './prepare-data';
-export * from './types';
+export { prepareWaterfallData } from '../../../core/shapes/waterfall/prepare-data';
+export * from '../../../core/shapes/waterfall/types';
 const b = block('waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
-    const connectorSelector = `.${b('connector')}`;
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -22,115 +16,8 @@ export const WaterfallSeriesShapes = (args) => {
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'waterfall.states.hover');
-        const inactiveOptions = get(seriesOptions, 'waterfall.states.inactive');
-        svgElement.selectAll('*').remove();
-        const rectSelection = svgElement
-            .selectAll('allRects')
-            .data(preparedData)
-            .join('rect')
-            .attr('class', b('segment'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => getWaterfallPointColor(d.data, d.series))
-            .attr('opacity', (d) => d.opacity)
-            .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!allowOverlapDataLabels) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
-        const labelSelection = svgElement
-            .selectAll('text')
-            .data(dataLabels)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('text-anchor', (d) => d.textAnchor)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null);
-        // Add the connector line between bars
-        svgElement
-            .selectAll(connectorSelector)
-            .data(preparedData)
-            .join('path')
-            .attr('class', b('connector'))
-            .attr('d', (d, index) => {
-            const line = lineGenerator();
-            const prev = preparedData[index - 1];
-            if (!prev) {
-                return null;
-            }
-            const points = [];
-            if (Number(prev.data.y) > 0) {
-                points.push([prev.x, prev.y]);
-            }
-            else {
-                points.push([prev.x, prev.y + prev.height]);
-            }
-            if (Number(d.data.y) > 0 && !d.data.total) {
-                points.push([d.x + d.width, d.y + d.height]);
-            }
-            else {
-                points.push([d.x + d.width, d.y]);
-            }
-            return line(points);
-        })
-            .attr('stroke-width', 1)
-            .attr('stroke-dasharray', () => getLineDashArray(DASH_STYLE.Dash, 1));
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            if (!data) {
-                if (hoverEnabled) {
-                    rectSelection.attr('fill', (d) => getWaterfallPointColor(d.data, d.series));
-                }
-                if (inactiveEnabled) {
-                    rectSelection.attr('opacity', null);
-                    labelSelection.attr('opacity', null);
-                }
-                return;
-            }
-            if (hoverEnabled) {
-                const hoveredValues = data.map((d) => d.data.x);
-                rectSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = getWaterfallPointColor(d.data, d.series);
-                    if (hoveredValues.includes(d.data.x)) {
-                        const brightness = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness;
-                        return ((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(brightness).toString()) || fillColor;
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveEnabled) {
-                const hoveredSeries = data.map((d) => d.series.id);
-                rectSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-                labelSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
-        };
-    }, [allowOverlapDataLabels, connectorSelector, dispatcher, preparedData, seriesOptions]);
+        return renderWaterfall({ plot: ref.current }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
         const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
         if (allowOverlapDataLabels) {

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

@@ -1,9 +1,9 @@
 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';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedXRangeData } from '../../../core/shapes/x-range/types';
+export { prepareXRangeData } from '../../../core/shapes/x-range/prepare-data';
+export type { PreparedXRangeData } from '../../../core/shapes/x-range/types';
 type Args = {
     clipPathId: string;
     htmlLayout: HTMLElement | null;

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

@@ -1,112 +1,17 @@
 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 { renderXRange } from '../../../core/shapes/x-range/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getRectPath } from '../utils';
-export { prepareXRangeData } from './prepare-data';
+export { prepareXRangeData } from '../../../core/shapes/x-range/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);
-        };
+        return renderXRange({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
     return (React.createElement(React.Fragment, null,

package/dist/esm/setup-jsdom.js

@@ -10,6 +10,13 @@ if (typeof document !== 'undefined') {
         });
     }
 }
+if (typeof ResizeObserver === 'undefined') {
+    global.ResizeObserver = class ResizeObserver {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+}
 if (typeof HTMLCanvasElement !== 'undefined') {
     // jsdom does not implement HTMLCanvasElement.prototype.getContext (used for text measurement)
     HTMLCanvasElement.prototype.getContext = (() => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.46.0",
+  "version": "1.46.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -54,7 +54,8 @@
     "prepublishOnly": "npm run build",
     "docs:deps": "cd ./docs && npm ci",
     "docs:dev": "cd ./docs && npm run docs:dev",
-    "docs:build": "cd ./docs && npm run docs:build",
+    "docs:build-examples": "vite build --config docs/examples/vite.config.ts",
+    "docs:build": "npm run docs:build-examples && cd ./docs && npm run docs:build",
     "playwright:install": "playwright install chromium webkit --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:visual": "playwright test --project=chromium --project=webkit --config=playwright/playwright.config.ts",
@@ -113,6 +114,7 @@
     "@types/lodash": "^4.17.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^9.39.4",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-storybook": "^10.2.16",
@@ -127,6 +129,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-css": "^6.0.1",
+    "monaco-editor": "^0.55.1",
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.8.1",

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

@@ -1,12 +0,0 @@
-import type { PreparedLegend, PreparedSeries } from '../../core/series/types';
-import type { ChartData } from '../../types';
-export declare const getVisibleSeries: ({ preparedSeries, activeLegendItems, }: {
-    preparedSeries: PreparedSeries[];
-    activeLegendItems: string[];
-}) => PreparedSeries[];
-export declare const getPreparedSeries: ({ seriesData, seriesOptions, colors, preparedLegend, }: {
-    seriesData: ChartData["series"]["data"];
-    seriesOptions: ChartData["series"]["options"];
-    colors: string[];
-    preparedLegend?: PreparedLegend | null;
-}) => Promise<PreparedSeries[]>;

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

@@ -1,40 +0,0 @@
-import { group } from 'd3-array';
-import { scaleOrdinal } from 'd3-scale';
-import { prepareSeries } from '../../core/series/prepareSeries';
-import { getSeriesNames } from '../../core/utils';
-export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
-    return preparedSeries.map((singleSeries) => {
-        if (singleSeries.legend.enabled) {
-            return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.legend.groupId) });
-        }
-        return singleSeries;
-    });
-};
-export const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
-    const seriesNames = getSeriesNames(seriesData);
-    const colorScale = scaleOrdinal(seriesNames, colors);
-    const groupedSeries = group(seriesData, (item, index) => {
-        if (item.type === 'line') {
-            return `${item.type}_${index}`;
-        }
-        return item.type;
-    });
-    const acc = [];
-    if (!preparedLegend) {
-        return acc;
-    }
-    const list = Array.from(groupedSeries);
-    for (let i = 0; i < list.length; i++) {
-        const [_groupId, seriesList] = list[i];
-        const seriesType = seriesList[0].type;
-        acc.push(...(await prepareSeries({
-            type: seriesType,
-            series: seriesList,
-            seriesOptions,
-            legend: preparedLegend,
-            colorScale,
-            colors,
-        })));
-    }
-    return acc;
-};

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -1 +0,0 @@
-export * from '../../core/series/types';

package/dist/cjs/hooks/useSeries/types.js

@@ -1 +0,0 @@
-export * from '../../core/series/types';

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

@@ -1 +0,0 @@
-export * from '../../core/series/utils';

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

@@ -1 +0,0 @@
-export * from '../../core/series/utils';

package/dist/cjs/hooks/useShapes/marker.d.ts

@@ -1,15 +0,0 @@
-import type { BaseType, Selection } from 'd3-selection';
-import { SymbolType } from '../../core/constants';
-import type { MarkerData as AreaMarkerData } from './area/types';
-import type { MarkerData as LineMarkerData } from './line/types';
-import type { RadarMarkerData } from './radar/types';
-import type { MarkerData as ScatterMarkerData } from './scatter/types';
-type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData | RadarMarkerData;
-export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType, T, BaseType, unknown>): Selection<BaseType, T, BaseType, unknown>;
-export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
-export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
-export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
-export declare function getMarkerSymbol(type: `${SymbolType}` | undefined, radius: number): string | null;
-export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
-export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
-export {};

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

@@ -1 +0,0 @@
-export * from './bar-y';

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

@@ -1 +0,0 @@
-export * from './bar-y';

package/dist/esm/hooks/useSeries/index.d.ts

@@ -1,12 +0,0 @@
-import type { PreparedLegend, PreparedSeries } from '../../core/series/types';
-import type { ChartData } from '../../types';
-export declare const getVisibleSeries: ({ preparedSeries, activeLegendItems, }: {
-    preparedSeries: PreparedSeries[];
-    activeLegendItems: string[];
-}) => PreparedSeries[];
-export declare const getPreparedSeries: ({ seriesData, seriesOptions, colors, preparedLegend, }: {
-    seriesData: ChartData["series"]["data"];
-    seriesOptions: ChartData["series"]["options"];
-    colors: string[];
-    preparedLegend?: PreparedLegend | null;
-}) => Promise<PreparedSeries[]>;

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

@@ -1,40 +0,0 @@
-import { group } from 'd3-array';
-import { scaleOrdinal } from 'd3-scale';
-import { prepareSeries } from '../../core/series/prepareSeries';
-import { getSeriesNames } from '../../core/utils';
-export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
-    return preparedSeries.map((singleSeries) => {
-        if (singleSeries.legend.enabled) {
-            return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.legend.groupId) });
-        }
-        return singleSeries;
-    });
-};
-export const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
-    const seriesNames = getSeriesNames(seriesData);
-    const colorScale = scaleOrdinal(seriesNames, colors);
-    const groupedSeries = group(seriesData, (item, index) => {
-        if (item.type === 'line') {
-            return `${item.type}_${index}`;
-        }
-        return item.type;
-    });
-    const acc = [];
-    if (!preparedLegend) {
-        return acc;
-    }
-    const list = Array.from(groupedSeries);
-    for (let i = 0; i < list.length; i++) {
-        const [_groupId, seriesList] = list[i];
-        const seriesType = seriesList[0].type;
-        acc.push(...(await prepareSeries({
-            type: seriesType,
-            series: seriesList,
-            seriesOptions,
-            legend: preparedLegend,
-            colorScale,
-            colors,
-        })));
-    }
-    return acc;
-};

package/dist/esm/hooks/useSeries/types.d.ts

@@ -1 +0,0 @@
-export * from '../../core/series/types';

package/dist/esm/hooks/useSeries/types.js

@@ -1 +0,0 @@
-export * from '../../core/series/types';

package/dist/esm/hooks/useSeries/utils.d.ts

@@ -1 +0,0 @@
-export * from '../../core/series/utils';

package/dist/esm/hooks/useSeries/utils.js

@@ -1 +0,0 @@
-export * from '../../core/series/utils';

package/dist/esm/hooks/useShapes/marker.d.ts

@@ -1,15 +0,0 @@
-import type { BaseType, Selection } from 'd3-selection';
-import { SymbolType } from '../../core/constants';
-import type { MarkerData as AreaMarkerData } from './area/types';
-import type { MarkerData as LineMarkerData } from './line/types';
-import type { RadarMarkerData } from './radar/types';
-import type { MarkerData as ScatterMarkerData } from './scatter/types';
-type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData | RadarMarkerData;
-export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType, T, BaseType, unknown>): Selection<BaseType, T, BaseType, unknown>;
-export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
-export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
-export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
-export declare function getMarkerSymbol(type: `${SymbolType}` | undefined, radius: number): string | null;
-export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
-export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
-export {};

package/dist/esm/hooks/utils/index.d.ts

@@ -1 +0,0 @@
-export * from './bar-y';

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

@@ -1 +0,0 @@
-export * from './bar-y';