@gravity-ui/charts 1.46.0 → 1.47.0

package/dist/esm/hooks/useShapes/bar-y/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { BarYShapesArgs } from './types';
-export { prepareBarYData } from './prepare-data';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { BarYShapesArgs } from '../../../core/shapes/bar-y/types';
+export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 type Args = {
     clipPathId: string;
     htmlLayout: HTMLElement | null;

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -1,97 +1,18 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
+import { renderBarY } from '../../../core/shapes/bar-y/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
-export { prepareBarYData } from './prepare-data';
+export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 const b = block('bar-y');
 export function BarYSeriesShapes(args) {
-    const { dispatcher, preparedData: { shapes: preparedData, labels: dataLabels, htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
-    const hoveredDataRef = React.useRef(null);
+    const { dispatcher, preparedData: { htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         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) => getAdjustedRectPath(d))
-            .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) => d.color)
-            .attr('opacity', (d) => d.data.opacity || null)
-            .attr('cursor', (d) => d.series.cursor);
-        const borderSelection = svgElement
-            .selectAll(`path.${b('segment-border')}`)
-            .data(preparedData.filter((d) => d.borderWidth > 0))
-            .join('path')
-            .attr('d', (d) => getAdjustedRectBorderPath(d))
-            .attr('class', b('segment-border'))
-            .attr('fill', (d) => d.borderColor)
-            .attr('fill-rule', 'evenodd')
-            .attr('opacity', (d) => d.data.opacity || null)
-            .attr('pointer-events', 'none');
-        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);
-        const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
-        const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
-                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
-                    acc.add(d.data.y);
-                    return acc;
-                }, new Set());
-                segmentSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data.y)) {
-                        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);
-                const newOpacity = (d) => {
-                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
-                        return inactiveOptions.opacity || null;
-                    }
-                    return null;
-                };
-                segmentSelection.attr('opacity', newOpacity);
-                borderSelection.attr('opacity', newOpacity);
-                labelSelection.attr('opacity', newOpacity);
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-y', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-y', null);
-        };
-    }, [dataLabels, dispatcher, preparedData, seriesOptions]);
+        return renderBarY({ plot: ref.current }, args.preparedData, seriesOptions, dispatcher);
+    }, [args.preparedData, dispatcher, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));

package/dist/esm/hooks/useShapes/funnel/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedFunnelData } from './types';
-export { prepareFunnelData } from './prepare-data';
-export * from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedFunnelData } from '../../../core/shapes/funnel/types';
+export { prepareFunnelData } from '../../../core/shapes/funnel/prepare-data';
+export * from '../../../core/shapes/funnel/types';
 type Args = {
     dispatcher?: Dispatch<object>;
     preparedData: PreparedFunnelData;

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

@@ -1,96 +1,17 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { getLineDashArray } from '../../../core/utils';
+import { renderFunnel } from '../../../core/shapes/funnel/renderer';
 import { block } from '../../../utils';
-export { prepareFunnelData } from './prepare-data';
-export * from './types';
+export { prepareFunnelData } from '../../../core/shapes/funnel/prepare-data';
+export * from '../../../core/shapes/funnel/types';
 const b = block('funnel');
 export const FunnelSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
-        var _a, _b;
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        const hoverOptions = (_b = (_a = seriesOptions.funnel) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.hover;
-        svgElement.selectAll('*').remove();
-        // funnel levels
-        const cellsSelection = svgElement
-            .selectAll('rect')
-            .data(preparedData.items)
-            .join('rect')
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.color)
-            .attr('stroke', (d) => d.borderColor)
-            .attr('stroke-width', (d) => d.borderWidth);
-        // connectors
-        const connectorAreaClassName = b('connector-area');
-        svgElement
-            .selectAll(`.${connectorAreaClassName}`)
-            .data(preparedData.connectors)
-            .join('path')
-            .attr('d', (d) => d.areaPath.toString())
-            .attr('class', connectorAreaClassName)
-            .attr('fill', (d) => d.areaColor)
-            .attr('opacity', (d) => d.areaOpacity);
-        const connectorLineClassName = b('connector-line');
-        const connectorLines = svgElement
-            .selectAll(`.${connectorLineClassName}`)
-            .data(preparedData.connectors)
-            .join('g')
-            .attr('class', connectorLineClassName)
-            .attr('stroke', (d) => d.lineColor)
-            .attr('stroke-width', (d) => d.lineWidth)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
-            .attr('fill', 'none')
-            .attr('opacity', (d) => d.lineOpacity);
-        connectorLines.append('path').attr('d', (d) => d.linePath[0].toString());
-        connectorLines.append('path').attr('d', (d) => d.linePath[1].toString());
-        // dataLabels
-        svgElement
-            .selectAll('text')
-            .data(preparedData.svgLabels)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null);
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            if (hoverEnabled) {
-                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
-                    acc.add(d.data);
-                    return acc;
-                }, new Set());
-                cellsSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.funnel', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.funnel', null);
-        };
+        return renderFunnel({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() })));

package/dist/esm/hooks/useShapes/heatmap/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedHeatmapData } from './types';
-export { prepareHeatmapData } from './prepare-data';
-export * from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedHeatmapData } from '../../../core/shapes/heatmap/types';
+export { prepareHeatmapData } from '../../../core/shapes/heatmap/prepare-data';
+export * from '../../../core/shapes/heatmap/types';
 type Args = {
     htmlLayout: HTMLElement | null;
     preparedData: PreparedHeatmapData;

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

@@ -1,73 +1,18 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
+import { renderHeatmap } from '../../../core/shapes/heatmap/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-export { prepareHeatmapData } from './prepare-data';
-export * from './types';
+export { prepareHeatmapData } from '../../../core/shapes/heatmap/prepare-data';
+export * from '../../../core/shapes/heatmap/types';
 const b = block('heatmap');
 export const HeatmapSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
-        var _a, _b;
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        const hoverOptions = (_b = (_a = seriesOptions.heatmap) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.hover;
-        svgElement.selectAll('*').remove();
-        // heatmap cells
-        const cellsSelection = svgElement
-            .selectAll('rect')
-            .data(preparedData.items)
-            .join('rect')
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.color)
-            .attr('stroke', (d) => d.borderColor)
-            .attr('stroke-width', (d) => d.borderWidth);
-        // dataLabels
-        svgElement
-            .selectAll('text')
-            .data(preparedData.labels)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null);
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            if (hoverEnabled) {
-                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
-                    acc.add(d.data);
-                    return acc;
-                }, new Set());
-                cellsSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.heatmap', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.heatmap', null);
-        };
+        return renderHeatmap({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),

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

@@ -3,23 +3,21 @@ import type { Dispatch } from 'd3-dispatch';
 import type { SeriesType } from '../../core/constants';
 import type { PreparedSplit } from '../../core/layout/split-types';
 import type { ChartScale } from '../../core/scales/types';
+import type { PreparedSeries, PreparedSeriesOptions } from '../../core/series/types';
+import type { PreparedAreaData } from '../../core/shapes/area/types';
+import type { PreparedBarXData } from '../../core/shapes/bar-x/types';
+import type { PreparedBarYData } from '../../core/shapes/bar-y/types';
+import type { PreparedFunnelData } from '../../core/shapes/funnel/types';
+import type { PreparedHeatmapData } from '../../core/shapes/heatmap/types';
+import type { PreparedLineData } from '../../core/shapes/line/types';
+import type { PreparedPieData } from '../../core/shapes/pie/types';
+import type { PreparedRadarData } from '../../core/shapes/radar/types';
+import type { PreparedSankeyData } from '../../core/shapes/sankey/types';
+import type { PreparedScatterData } from '../../core/shapes/scatter/types';
+import type { PreparedWaterfallData } from '../../core/shapes/waterfall/types';
+import type { PreparedXRangeData } from '../../core/shapes/x-range/types';
+import type { ZoomState } from '../../core/zoom/types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
-import type { ZoomState } from '../useZoom/types';
-import type { PreparedAreaData } from './area/types';
-import type { PreparedBarXData } from './bar-x';
-import type { PreparedBarYData } from './bar-y/types';
-import type { PreparedFunnelData } from './funnel';
-import type { PreparedHeatmapData } from './heatmap';
-import type { PreparedLineData } from './line/types';
-import type { PreparedPieData } from './pie/types';
-import type { PreparedRadarData } from './radar/types';
-import type { PreparedSankeyData } from './sankey/types';
-import type { PreparedScatterData } from './scatter/types';
-export type { PreparedBarXData } from './bar-x';
-export type { PreparedScatterData } from './scatter/types';
-import type { PreparedWaterfallData } from './waterfall';
-import type { PreparedXRangeData } from './x-range';
 import './styles.css';
 export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
 export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
@@ -50,3 +48,4 @@ export declare const useShapes: (args: Args) => {
     shapesData: ShapeData[];
     shapesReady: boolean;
 };
+export {};

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

@@ -1,25 +1,25 @@
 import React from 'react';
 import { group } from 'd3-array';
 import { SERIES_TYPE } from '../../core/constants';
+import { prepareAreaData } from '../../core/shapes/area/prepare-data';
+import { prepareLineData } from '../../core/shapes/line/prepare-data';
+import { preparePieData } from '../../core/shapes/pie/prepare-data';
+import { prepareRadarData } from '../../core/shapes/radar/prepare-data';
+import { prepareSankeyData } from '../../core/shapes/sankey/prepare-data';
+import { prepareTreemapData } from '../../core/shapes/treemap/prepare-data';
 import { getOnlyVisibleSeries } from '../../core/utils';
 import { ChartError } from '../../libs';
 import { AreaSeriesShapes } from './area';
-import { prepareAreaData } from './area/prepare-data';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
 import { FunnelSeriesShapes, prepareFunnelData } from './funnel';
 import { HeatmapSeriesShapes, prepareHeatmapData } from './heatmap';
 import { LineSeriesShapes } from './line';
-import { prepareLineData } from './line/prepare-data';
 import { PieSeriesShapes } from './pie';
-import { preparePieData } from './pie/prepare-data';
 import { RadarSeriesShapes } from './radar';
-import { prepareRadarData } from './radar/prepare-data';
 import { SankeySeriesShape } from './sankey';
-import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 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';
@@ -217,13 +217,13 @@ export async function getShapes(args) {
                 }
                 break;
             }
-            case 'funnel': {
+            case SERIES_TYPE.Funnel: {
                 const preparedData = await prepareFunnelData({
                     series: chartSeries,
                     boundsWidth,
                     boundsHeight,
                 });
-                shapes[index] = (React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapes[index] = (React.createElement(FunnelSeriesShapes, { key: SERIES_TYPE.Funnel, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
@@ -254,8 +254,8 @@ export async function getShapes(args) {
 }
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
-    const [shapesElemens, setShapesElements] = React.useState([]);
-    const [shapesElemensData, setShapesElemensData] = React.useState([]);
+    const [shapesElements, setShapesElements] = React.useState([]);
+    const [shapesElementsData, setShapesElementsData] = React.useState([]);
     const shapesReadyRef = React.useRef(false);
     const countedRef = React.useRef(0);
     React.useEffect(() => {
@@ -286,7 +286,7 @@ export const useShapes = (args) => {
             if (countedRef.current === currentRun) {
                 shapesReadyRef.current = true;
                 setShapesElements(shapes);
-                setShapesElemensData(shapesData);
+                setShapesElementsData(shapesData);
             }
         })();
     }, [
@@ -308,8 +308,8 @@ export const useShapes = (args) => {
         zoomState,
     ]);
     return {
-        shapes: shapesElemens,
-        shapesData: shapesElemensData,
+        shapes: shapesElements,
+        shapesData: shapesElementsData,
         shapesReady: shapesReadyRef.current,
     };
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedLineData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedLineData } from '../../../core/shapes/line/types';
 type Args = {
     boundsHeight: number;
     boundsWidth: number;