@gravity-ui/charts 1.46.0 → 1.47.0

package/dist/esm/core/shapes/radar/renderer.js

@@ -0,0 +1,122 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { renderDataLabels } from '../../shapes/data-labels';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
+import { setActiveState } from '../../shapes/utils';
+const b = block('radar');
+export function renderRadar(elements, preparedData, seriesOptions, dispatcher) {
+    const svgElement = select(elements.plot);
+    svgElement.selectAll('*').remove();
+    const areaSelector = `.${b('area')}`;
+    const radarSelection = svgElement
+        .selectAll('radar')
+        .data(preparedData)
+        .join('g')
+        .attr('id', (radarData) => radarData.id)
+        .attr('class', b('item'))
+        .attr('cursor', (radarData) => radarData.cursor);
+    // render axes
+    radarSelection
+        .selectAll(`.${b('axis')}`)
+        .data((radarData) => radarData.axes)
+        .join('line')
+        .attr('class', b('axis'))
+        .attr('x1', (d) => d.radar.center[0])
+        .attr('y1', (d) => d.radar.center[1])
+        .attr('x2', (d) => d.point[0])
+        .attr('y2', (d) => d.point[1])
+        .attr('stroke', (d) => d.strokeColor)
+        .attr('stroke-width', (d) => d.strokeWidth);
+    // render grid lines
+    radarSelection
+        .selectAll(`.${b('grid')}`)
+        .data((radarData) => radarData.grid)
+        .join('path')
+        .attr('class', b('grid'))
+        .attr('d', (d) => `${line()(d.path)} Z`)
+        .attr('fill', 'none')
+        .attr('stroke', (d) => d.strokeColor)
+        .attr('stroke-width', (d) => d.strokeWidth);
+    // render radar area
+    const shapesSelection = radarSelection
+        .selectAll(areaSelector)
+        .data((radarData) => radarData.shapes)
+        .join('g')
+        .attr('class', b('area'));
+    shapesSelection
+        .append('path')
+        .attr('d', (d) => d.path)
+        .attr('fill', (d) => d.color)
+        .attr('fill-opacity', (d) => d.fillOpacity)
+        .attr('stroke', (d) => d.borderColor)
+        .attr('stroke-width', (d) => d.borderWidth);
+    // render markers
+    const markerSelection = shapesSelection
+        .selectAll('marker')
+        .data((radarData) => radarData.points)
+        .join('g')
+        .call(renderMarker);
+    // Render labels
+    radarSelection.each(function (radarData) {
+        renderDataLabels({
+            container: select(this),
+            data: radarData.labels,
+            className: b('label'),
+        });
+    });
+    // Handle hover events
+    const eventName = `hover-shape.radar`;
+    const hoverOptions = get(seriesOptions, 'radar.states.hover');
+    const inactiveOptions = get(seriesOptions, 'radar.states.inactive');
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
+        const closest = data === null || data === void 0 ? void 0 : data.find((d) => d.closest);
+        const selectedSeries = closest === null || closest === void 0 ? void 0 : closest.series;
+        const selectedSeriesData = closest === null || closest === void 0 ? void 0 : closest.data;
+        const selectedSeriesId = selectedSeries === null || selectedSeries === void 0 ? void 0 : selectedSeries.id;
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        shapesSelection.datum((d, i, elements) => {
+            var _a;
+            const hovered = Boolean(hoverEnabled && ((_a = d.series) === null || _a === void 0 ? void 0 : _a.id) === selectedSeriesId);
+            if (d.hovered !== hovered) {
+                d.hovered = hovered;
+                select(elements[i]).attr('fill', () => {
+                    var _a;
+                    const initialColor = d.color;
+                    if (d.hovered) {
+                        return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                            initialColor);
+                    }
+                    return initialColor;
+                });
+                if (hovered) {
+                    select(elements[i]).raise();
+                }
+            }
+            setActiveState({
+                element: elements[i],
+                state: inactiveOptions,
+                active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                datum: d,
+            });
+            markerSelection.datum((markerData, index, markers) => {
+                const hoveredState = Boolean(hoverEnabled && markerData.data === selectedSeriesData);
+                if (markerData.hovered !== hoveredState) {
+                    markerData.hovered = hoveredState;
+                    const elementSelection = select(markers[index]);
+                    elementSelection.attr('visibility', getMarkerVisibility(markerData));
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hoveredState ? 'hover' : 'normal');
+                }
+                return markerData;
+            });
+            return d;
+        });
+    });
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
+    };
+}

package/dist/esm/{hooks/useShapes → core/shapes}/radar/types.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlItem, LabelData, RadarSeriesData } from '../../../types';
-import type { PreparedRadarSeries } from '../../useSeries/types';
+import type { PreparedRadarSeries } from '../../series/types';
 export type RadarLabelData = LabelData & {
     maxWidth: number;
 };

package/dist/esm/{hooks/useShapes → core/shapes}/sankey/prepare-data.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedSankeySeries } from '../../useSeries/types';
+import type { PreparedSankeySeries } from '../../series/types';
 import type { PreparedSankeyData } from './types';
 export declare function prepareSankeyData(args: {
     series: PreparedSankeySeries;

package/dist/esm/{hooks/useShapes → core/shapes}/sankey/prepare-data.js

@@ -1,4 +1,4 @@
-import { getFormattedValue } from '../../../core/utils/format';
+import { getFormattedValue } from '../../utils/format';
 import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;

package/dist/esm/core/shapes/sankey/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedSankeyData } from './types';
+export declare function renderSankey(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedSankeyData, _seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/sankey/renderer.js

@@ -0,0 +1,44 @@
+import { select } from 'd3-selection';
+import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
+const b = block('sankey');
+export function renderSankey(elements, preparedData, _seriesOptions, dispatcher) {
+    const svgElement = select(elements.plot);
+    svgElement.selectAll('*').remove();
+    // nodes
+    svgElement
+        .append('g')
+        .selectAll()
+        .data(preparedData.nodes)
+        .join('rect')
+        .attr('x', (d) => d.x0)
+        .attr('y', (d) => d.y0)
+        .attr('height', (d) => d.y1 - d.y0)
+        .attr('width', (d) => d.x1 - d.x0)
+        .attr('fill', (d) => d.color);
+    // links
+    svgElement
+        .append('g')
+        .attr('fill', 'none')
+        .selectAll()
+        .data(preparedData.links)
+        .join('g')
+        .append('path')
+        .attr('stroke-opacity', (d) => d.opacity)
+        .attr('d', (d) => d.path)
+        .attr('stroke', (d) => d.color)
+        .attr('stroke-width', (d) => d.strokeWidth);
+    // dataLabels
+    renderDataLabels({
+        container: svgElement.append('g'),
+        data: preparedData.labels,
+        className: b('label'),
+    }).attr('dy', '0.35em');
+    const eventName = `hover-shape.sankey`;
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (_data) => {
+        // no-op hover handler
+    });
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
+    };
+}

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/sankey/types.d.ts

@@ -1,5 +1,5 @@
 import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
-import type { PreparedSankeySeries } from '../../useSeries/types';
+import type { PreparedSankeySeries } from '../../series/types';
 export type SankeyDataLabel = {
     text: string;
     x: number;

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/scatter/prepare-data.d.ts

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedScatterSeries } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedScatterSeries } from '../../series/types';
 import type { PreparedScatterData } from './types';
 export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];

package/dist/esm/{hooks/useShapes → core/shapes}/scatter/prepare-data.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { getDataCategoryValue } from '../../../core/utils';
-import { getXValue, getYValue } from '../utils';
+import { getXValue, getYValue } from '../../shapes/utils';
+import { getDataCategoryValue } from '../../utils';
 function getFilteredLinearScatterData(data) {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 }

package/dist/esm/core/shapes/scatter/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedScatterData } from './types';
+export declare function renderScatter(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedScatterData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/scatter/renderer.js

@@ -0,0 +1,52 @@
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
+import { setActiveState, shapeKey } from '../../shapes/utils';
+export function renderScatter(elements, preparedData, seriesOptions, dispatcher) {
+    const svgElement = select(elements.plot);
+    const hoverOptions = get(seriesOptions, 'scatter.states.hover');
+    const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
+    svgElement.selectAll('*').remove();
+    const selection = svgElement
+        .selectAll('path')
+        .data(preparedData, shapeKey)
+        .join('g')
+        .call(renderMarker)
+        .attr('opacity', (d) => d.point.opacity)
+        .attr('cursor', (d) => d.point.series.cursor);
+    const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+    const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+    function handleShapeHover(data) {
+        var _a;
+        const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
+        const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+        const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+        selection.datum((d, index, list) => {
+            const elementSelection = select(list[index]);
+            const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+            if (d.hovered !== hovered) {
+                d.hovered = hovered;
+                elementSelection.attr('z-index', hovered ? 999 : null);
+                selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
+            }
+            if (hovered) {
+                elementSelection.raise();
+            }
+            if (d.point.series.marker.states.normal.enabled) {
+                const isActive = Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.point.series.id);
+                setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: isActive,
+                    datum: d,
+                });
+            }
+            return d;
+        });
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', null);
+    };
+}

package/dist/esm/{hooks/useShapes → core/shapes}/scatter/types.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlItem, ScatterSeriesData } from '../../../types';
-import type { PreparedScatterSeries } from '../../useSeries/types';
+import type { PreparedScatterSeries } from '../../series/types';
 type PointData = {
     x: number;
     y: number;

package/dist/esm/{hooks/useShapes → core/shapes}/treemap/prepare-data.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedTreemapSeries } from '../../useSeries/types';
+import type { PreparedTreemapSeries } from '../../series/types';
 import type { PreparedTreemapData } from './types';
 export declare function prepareTreemapData(args: {
     series: PreparedTreemapSeries;

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/treemap/prepare-data.js

@@ -1,8 +1,8 @@
 import { ascending, descending, sort } from 'd3-array';
 import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
-import { LayoutAlgorithm } from '../../../core/constants';
-import { getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
+import { LayoutAlgorithm } from '../../constants';
+import { getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
 const DEFAULT_PADDING = 1;
 async function getLabels(args) {
     var _a;

package/dist/esm/core/shapes/treemap/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedTreemapData } from './types';
+export declare function renderTreemap(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedTreemapData, seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/treemap/renderer.js

@@ -0,0 +1,88 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+const b = block('treemap');
+export function renderTreemap(elements, preparedData, seriesOptions, dispatcher) {
+    const svgElement = select(elements.plot);
+    svgElement.selectAll('*').remove();
+    const { labelData, leaves, series } = preparedData;
+    const leaf = svgElement
+        .selectAll('g')
+        .data(leaves)
+        .join('g')
+        .attr('transform', (d) => `translate(${d.x0},${d.y0})`)
+        .attr('cursor', series.cursor);
+    const rectSelection = leaf
+        .append('rect')
+        .attr('id', (d) => d.id || d.name)
+        .attr('fill', (d) => {
+        var _a;
+        if (d.data.color) {
+            return d.data.color;
+        }
+        const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth);
+        return (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || series.color;
+    })
+        .attr('width', (d) => d.x1 - d.x0)
+        .attr('height', (d) => d.y1 - d.y0);
+    const labelSelection = svgElement
+        .selectAll('tspan')
+        .data(labelData)
+        .join('text')
+        .html((d) => d.text)
+        .attr('class', b('label'))
+        .attr('x', (d) => d.x)
+        .attr('y', (d) => d.y)
+        .style('font-size', () => series.dataLabels.style.fontSize)
+        .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
+        .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; });
+    const eventName = `hover-shape.treemap`;
+    const hoverOptions = get(seriesOptions, 'treemap.states.hover');
+    const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
+    function handleShapeHover(data) {
+        var _a;
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
+        rectSelection.datum((d, index, list) => {
+            const currentRect = select(list[index]);
+            const hovered = Boolean(hoverEnabled && hoveredData === d.data);
+            const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
+            currentRect
+                .attr('fill', (currentD) => {
+                var _a, _b;
+                const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === currentD.depth);
+                const initialColor = (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || d.data.color || series.color;
+                if (hovered) {
+                    return (((_b = color(initialColor)) === null || _b === void 0 ? void 0 : _b.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                        initialColor);
+                }
+                return initialColor;
+            })
+                .attr('opacity', () => {
+                if (inactive) {
+                    return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                }
+                return null;
+            });
+            return d;
+        });
+        labelSelection.datum((d, index, list) => {
+            const currentLabel = select(list[index]);
+            const hovered = Boolean(hoverEnabled && hoveredData === d.nodeData);
+            const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
+            currentLabel.attr('opacity', () => {
+                if (inactive) {
+                    return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                }
+                return null;
+            });
+            return d;
+        });
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
+    };
+}

package/dist/esm/{hooks/useShapes → core/shapes}/treemap/types.d.ts

@@ -1,6 +1,6 @@
 import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { HtmlItem, TreemapSeriesData } from '../../../types';
-import type { PreparedTreemapSeries } from '../../useSeries/types';
+import type { PreparedTreemapSeries } from '../../series/types';
 export type TreemapLabelData = {
     text: string;
     x: number;

package/dist/esm/core/shapes/treemap/types.js

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

package/dist/esm/core/shapes/utils.d.ts

@@ -0,0 +1,76 @@
+import type { BaseType } from 'd3-selection';
+import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
+import type { ChartScale } from '../scales/types';
+import type { BasicInactiveState } from '../types';
+export declare function getXValue(args: {
+    point: {
+        x?: number | string | null;
+    };
+    points?: {
+        x?: number | string | null;
+    }[];
+    xAxis: PreparedXAxis;
+    xScale: ChartScale;
+}): number | null;
+export declare function getYValue(args: {
+    point: {
+        y?: number | string | null;
+    };
+    points?: {
+        y?: number | string | null;
+    }[];
+    yAxis: PreparedYAxis;
+    yScale: ChartScale;
+}): number | null;
+/**
+ * Hides out-of-range points from line/area path generators via `hiddenInLine`.
+ * Neighbors of in-range points are kept as anchors so the path retains its
+ * slope at the plot edges instead of stopping abruptly at the visible point.
+ *
+ * Pixel check alone is not enough: a degenerate/clamped scale domain (see the
+ * y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
+ * phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
+ * points whose raw value is outside the user's intended range.
+ *
+ * Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
+ * value and doesn't reflect where the point actually lands on the plot.
+ */
+export declare function markHiddenPointsOutOfYRange<P extends {
+    y: number | null;
+    hiddenInLine?: boolean;
+}>(args: {
+    points: P[];
+    yScale: ChartScale;
+    yAxisTop: number;
+    axisMin?: number;
+    axisMax?: number;
+    getDataY?: (point: P) => unknown;
+}): void;
+export declare function shapeKey(d: unknown): string | number;
+export declare function setActiveState<T extends {
+    active?: boolean;
+}>(args: {
+    element: BaseType;
+    datum: T;
+    state: BasicInactiveState | undefined;
+    active: boolean;
+}): T;
+export declare function getRectPath(args: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius?: number | number[];
+}): import("d3-path").Path;
+export declare function getRectBorderPath(args: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderWidth: number;
+    borderRadius?: number | number[];
+}): string;
+export declare function getClipPathIdByBounds(args: {
+    clipPathId: string;
+    bounds?: 'horizontal';
+}): string;