@gravity-ui/charts 1.45.0 → 1.46.1

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

@@ -0,0 +1,50 @@
+import { select } from 'd3-selection';
+import { block } from '../../../utils';
+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
+    svgElement
+        .append('g')
+        .selectAll()
+        .data(preparedData.labels)
+        .join('text')
+        .html((d) => d.text)
+        .attr('class', b('label'))
+        .attr('x', (d) => d.x)
+        .attr('y', (d) => d.y)
+        .attr('dy', '0.35em')
+        .attr('text-anchor', (d) => d.textAnchor)
+        .attr('fill', (d) => { var _a; return (_a = d.style.fontColor) !== null && _a !== void 0 ? _a : null; });
+    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/esm/{hooks/useShapes → 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/{cjs/hooks/useShapes → esm/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/{cjs/hooks/useShapes → esm/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/esm/{hooks/useShapes → 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/{cjs/hooks/useShapes → esm/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/utils.d.ts

@@ -0,0 +1,52 @@
+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;
+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;

package/dist/esm/core/shapes/utils.js

@@ -0,0 +1,138 @@
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../utils';
+const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;
+export function getXValue(args) {
+    const { point, points, xAxis, xScale } = args;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        const categories = get(xAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
+        return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
+    }
+    let xLinearScale = xScale;
+    const [xMinDomain, xMaxDomain] = xLinearScale.domain();
+    if (Number(xMinDomain) === Number(xMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const x1 = Number(points[0].x);
+        const xTarget = Number(points[1].x);
+        const x3 = Number(points[2].x);
+        if (!Number.isNaN(x1) && !Number.isNaN(xTarget) && !Number.isNaN(x3)) {
+            const xMin = Math.min(x1, xTarget, x3);
+            const xMax = Math.max(x1, xTarget, x3);
+            xLinearScale = xLinearScale
+                .copy()
+                .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+        }
+    }
+    return point.x === null ? null : xLinearScale(point.x);
+}
+export function getYValue(args) {
+    const { point, points, yAxis, yScale } = args;
+    if (yAxis.type === 'category') {
+        const yBandScale = yScale;
+        const categories = get(yAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
+        return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
+    }
+    let yLinearScale = yScale;
+    const [yMinDomain, yMaxDomain] = yLinearScale.domain();
+    if (Number(yMinDomain) === Number(yMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const y1 = Number(points[0].y);
+        const yTarget = Number(points[1].y);
+        const y3 = Number(points[2].y);
+        if (!Number.isNaN(y1) && !Number.isNaN(yTarget) && !Number.isNaN(y3)) {
+            const yMin = Math.min(y1, yTarget, y3);
+            const yMax = Math.max(y1, yTarget, y3);
+            yLinearScale = yLinearScale
+                .copy()
+                .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+        }
+    }
+    return point.y === null ? null : yLinearScale(point.y);
+}
+export function shapeKey(d) {
+    return d.id || -1;
+}
+export function setActiveState(args) {
+    const { element, datum, state, active } = args;
+    const elementSelection = select(element);
+    if (datum.active !== active) {
+        datum.active = active;
+        const opacity = datum.active ? null : state === null || state === void 0 ? void 0 : state.opacity;
+        elementSelection.attr('opacity', opacity || null);
+    }
+    return datum;
+}
+export function getRectPath(args) {
+    const { x, y, width, height, borderRadius = 0 } = args;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const p = path();
+    let startAngle = -Math.PI / 2;
+    const angle = Math.PI / 2;
+    p.moveTo(x + borderRadiusTopLeft, y);
+    p.lineTo(x + width - borderRadiusTopRight, y);
+    p.arc(x + width - borderRadiusTopRight, y + borderRadiusTopRight, borderRadiusTopRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + width, y + height - borderRadiusBottomRight);
+    p.arc(x + width - borderRadiusBottomRight, y + height - borderRadiusBottomRight, borderRadiusBottomRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + borderRadiusBottomLeft, y + height);
+    p.arc(x + borderRadiusBottomLeft, y + height - borderRadiusBottomLeft, borderRadiusBottomLeft, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x, y + borderRadiusTopLeft);
+    p.arc(x + borderRadiusTopLeft, y + borderRadiusTopLeft, borderRadiusTopLeft, startAngle, startAngle + angle);
+    p.closePath();
+    return p;
+}
+export function getRectBorderPath(args) {
+    const { x, y, width, height, borderWidth, borderRadius = 0 } = args;
+    if (!borderWidth) {
+        return '';
+    }
+    const halfWidth = borderWidth / 2;
+    const expandedWidth = width + borderWidth;
+    const expandedHeight = height + borderWidth;
+    const innerWidth = width - borderWidth;
+    const innerHeight = height - borderWidth;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const adjustOuterRadius = (radius) => (radius ? radius + halfWidth : 0);
+    const outerBorderRadius = [
+        adjustOuterRadius(borderRadiusTopLeft),
+        adjustOuterRadius(borderRadiusTopRight),
+        adjustOuterRadius(borderRadiusBottomRight),
+        adjustOuterRadius(borderRadiusBottomLeft),
+    ];
+    const outerPath = getRectPath({
+        x: x - halfWidth,
+        y: y - halfWidth,
+        width: expandedWidth,
+        height: expandedHeight,
+        borderRadius: outerBorderRadius,
+    }).toString();
+    if (innerWidth <= 0 || innerHeight <= 0) {
+        return outerPath;
+    }
+    const innerBorderRadius = [
+        Math.max(borderRadiusTopLeft - halfWidth, 0),
+        Math.max(borderRadiusTopRight - halfWidth, 0),
+        Math.max(borderRadiusBottomRight - halfWidth, 0),
+        Math.max(borderRadiusBottomLeft - halfWidth, 0),
+    ];
+    const innerPath = getRectPath({
+        x: x + halfWidth,
+        y: y + halfWidth,
+        width: innerWidth,
+        height: innerHeight,
+        borderRadius: innerBorderRadius,
+    }).toString();
+    return `${outerPath} ${innerPath}`;
+}
+export function getClipPathIdByBounds(args) {
+    const { bounds, clipPathId } = args;
+    return bounds ? `${clipPathId}-${bounds}` : clipPathId;
+}

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

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../series/types';
 import type { PreparedWaterfallData } from './types';
 export declare const prepareWaterfallData: (args: {
     series: PreparedWaterfallSeries[];

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

@@ -1,9 +1,9 @@
 import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
-import { getLabelsSize } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../../constants';
-import { getXValue, getYValue } from '../utils';
+import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../../shapes/bar-constants';
+import { getXValue, getYValue } from '../../shapes/utils';
+import { getLabelsSize } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
 async function getLabelData(d, plotHeight) {
     var _a, _b;
     if (!d.series.dataLabels.enabled) {

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

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

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

@@ -0,0 +1,115 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { DASH_STYLE } from '../../constants';
+import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../utils';
+const b = block('waterfall');
+export function renderWaterfall(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
+    const svgElement = select(elements.plot);
+    const connectorSelector = `.${b('connector')}`;
+    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) {
+        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;
+            });
+        }
+    }
+    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);
+    };
+}

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

@@ -1,5 +1,5 @@
 import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
-import type { PreparedWaterfallSeries } from '../../useSeries/types';
+import type { PreparedWaterfallSeries } from '../../series/types';
 export type PreparedWaterfallData = {
     x: number;
     y: number;

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

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedXRangeSeries } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedXRangeSeries } from '../../series/types';
 import type { PreparedXRangeData } from './types';
 type PrepareXRangeDataArgs = {
     series: PreparedXRangeSeries[];

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

@@ -1,8 +1,8 @@
 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';
+import { MIN_BAR_WIDTH } from '../../shapes/bar-constants';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../utils';
+import { getBandSize } from '../../utils/band-size';
+import { getFormattedValue } from '../../utils/format';
 const DEFAULT_BAR_PADDING = 0.2;
 export async function prepareXRangeData(args) {
     var _a;