@gravity-ui/charts 0.1.0

package/dist/cjs/hooks/useShapes/treemap/index.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { color, select } from 'd3';
+import get from 'lodash/get';
+import { block, setEllipsisForOverflowTexts } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+const b = block('d3-treemap');
+export const TreemapSeriesShape = (props) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        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')
+            .text((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; })
+            .call(setEllipsisForOverflowTexts, (d) => d.width);
+        const eventName = `hover-shape.treemap`;
+        const hoverOptions = get(seriesOptions, 'treemap.states.hover');
+        const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
+        dispatcher.on(eventName, (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;
+            });
+        });
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+};

package/dist/cjs/hooks/useShapes/treemap/prepare-data.d.ts

@@ -0,0 +1,7 @@
+import type { PreparedTreemapSeries } from '../../useSeries/types';
+import type { PreparedTreemapData } from './types';
+export declare function prepareTreemapData(args: {
+    series: PreparedTreemapSeries;
+    width: number;
+    height: number;
+}): PreparedTreemapData;

package/dist/cjs/hooks/useShapes/treemap/prepare-data.js

@@ -0,0 +1,114 @@
+import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
+import { LayoutAlgorithm } from '../../../constants';
+import { getLabelsSize } from '../../../utils';
+const DEFAULT_PADDING = 1;
+function getLabels(args) {
+    const { data, html, padding, align } = args;
+    return data.reduce((acc, d) => {
+        const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
+        texts.forEach((text, index) => {
+            var _a;
+            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [text], html })) !== null && _a !== void 0 ? _a : {};
+            const left = d.x0 + padding;
+            const right = d.x1 - padding;
+            const width = Math.max(0, right - left);
+            let x = left;
+            const y = index * lineHeight + d.y0 + padding;
+            switch (align) {
+                case 'left': {
+                    x = left;
+                    break;
+                }
+                case 'center': {
+                    x = Math.max(left, left + (width - labelWidth) / 2);
+                    break;
+                }
+                case 'right': {
+                    x = Math.max(left, right - labelWidth);
+                    break;
+                }
+            }
+            const item = html
+                ? {
+                    content: text,
+                    x,
+                    y,
+                }
+                : {
+                    text,
+                    x,
+                    y,
+                    width,
+                    nodeData: d.data,
+                };
+            acc.push(item);
+        });
+        return acc;
+    }, []);
+}
+export function prepareTreemapData(args) {
+    var _a;
+    const { series, width, height } = args;
+    const dataWithRootNode = getSeriesDataWithRootNode(series);
+    const hierarchy = stratify()
+        .id((d) => {
+        if (d.id) {
+            return d.id;
+        }
+        return Array.isArray(d.name) ? d.name.join() : d.name;
+    })
+        .parentId((d) => d.parentId)(dataWithRootNode)
+        .sum((d) => d.value || 0);
+    const treemapInstance = treemap();
+    switch (series.layoutAlgorithm) {
+        case LayoutAlgorithm.Binary: {
+            treemapInstance.tile(treemapBinary);
+            break;
+        }
+        case LayoutAlgorithm.Dice: {
+            treemapInstance.tile(treemapDice);
+            break;
+        }
+        case LayoutAlgorithm.Slice: {
+            treemapInstance.tile(treemapSlice);
+            break;
+        }
+        case LayoutAlgorithm.SliceDice: {
+            treemapInstance.tile(treemapSliceDice);
+            break;
+        }
+        case LayoutAlgorithm.Squarify: {
+            treemapInstance.tile(treemapSquarify);
+            break;
+        }
+    }
+    const root = treemapInstance.size([width, height]).paddingInner((d) => {
+        var _a, _b;
+        const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth + 1);
+        return (_b = levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.padding) !== null && _b !== void 0 ? _b : DEFAULT_PADDING;
+    })(hierarchy);
+    const leaves = root.leaves();
+    let labelData = [];
+    const htmlElements = [];
+    if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
+        const { html, padding, align } = series.dataLabels;
+        const labels = getLabels({ html, padding, align, data: leaves });
+        if (html) {
+            htmlElements.push(...labels);
+        }
+        else {
+            labelData = labels;
+        }
+    }
+    return { labelData, leaves, series, htmlElements };
+}
+function getSeriesDataWithRootNode(series) {
+    return series.data.reduce((acc, d) => {
+        const dataChunk = Object.assign({}, d);
+        if (!dataChunk.parentId) {
+            dataChunk.parentId = series.id;
+        }
+        acc.push(dataChunk);
+        return acc;
+    }, [{ name: series.name, id: series.id }]);
+}

package/dist/cjs/hooks/useShapes/treemap/types.d.ts

@@ -0,0 +1,16 @@
+import type { HierarchyRectangularNode } from 'd3';
+import type { HtmlItem, TreemapSeriesData } from '../../../types';
+import type { PreparedTreemapSeries } from '../../useSeries/types';
+export type TreemapLabelData = {
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    nodeData: TreemapSeriesData;
+};
+export type PreparedTreemapData = {
+    labelData: TreemapLabelData[];
+    leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
+    series: PreparedTreemapSeries;
+    htmlElements: HtmlItem[];
+};

package/dist/cjs/hooks/useShapes/treemap/types.js

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

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

@@ -0,0 +1,29 @@
+import type { BaseType } from 'd3';
+import type { DashStyle } from '../../constants';
+import type { BasicInactiveState } from '../../types';
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis } from '../useChartOptions/types';
+export declare function getXValue(args: {
+    point: {
+        x?: number | string;
+    };
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+}): number;
+export declare function getYValue(args: {
+    point: {
+        y?: number | string;
+    };
+    yAxis: PreparedAxis;
+    yScale: ChartScale;
+}): number;
+export declare const shapeKey: (d: unknown) => string | -1;
+export declare function setActiveState<T extends {
+    active?: boolean;
+}>(args: {
+    element: BaseType;
+    datum: T;
+    state: BasicInactiveState | undefined;
+    active: boolean;
+}): T;
+export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;

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

@@ -0,0 +1,53 @@
+import { select } from 'd3';
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../utils';
+export function getXValue(args) {
+    const { point, 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;
+    }
+    const xLinearScale = xScale;
+    return xLinearScale(point.x);
+}
+export function getYValue(args) {
+    const { point, 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;
+    }
+    const yLinearScale = yScale;
+    return yLinearScale(point.y);
+}
+export const shapeKey = (d) => 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 const getLineDashArray = (dashStyle, strokeWidth = 2) => {
+    const value = dashStyle.toLowerCase();
+    const arrayValue = value
+        .replace('shortdashdotdot', '3,1,1,1,1,1,')
+        .replace('shortdashdot', '3,1,1,1')
+        .replace('shortdot', '1,1,')
+        .replace('shortdash', '3,1,')
+        .replace('longdash', '8,3,')
+        .replace(/dot/g, '1,3,')
+        .replace('dash', '4,3,')
+        .replace(/,$/, '')
+        .split(',')
+        .map((part) => {
+        return `${parseInt(part, 10) * strokeWidth}`;
+    });
+    return arrayValue.join(',').replace(/NaN/g, 'none');
+};

package/dist/cjs/hooks/useShapes/waterfall/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedWaterfallData } from './types';
+export { prepareWaterfallData } from './prepare-data';
+export * from './types';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedWaterfallData[];
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import { color, line as lineGenerator, select } from 'd3';
+import get from 'lodash/get';
+import { DashStyle } from '../../../constants';
+import { block, filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getLineDashArray } from '../utils';
+export { prepareWaterfallData } from './prepare-data';
+export * from './types';
+const b = block('d3-waterfall');
+export const WaterfallSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const ref = React.useRef(null);
+    const connectorSelector = `.${b('connector')}`;
+    React.useEffect(() => {
+        var _a;
+        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 (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelSelection = svgElement
+            .selectAll('text')
+            .data(dataLabels)
+            .join('text')
+            .text((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(DashStyle.Dash, 1));
+        dispatcher.on('hover-shape.waterfall', (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;
+                });
+            }
+        });
+        return () => {
+            dispatcher.on('hover-shape.waterfall', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+};

package/dist/cjs/hooks/useShapes/waterfall/prepare-data.d.ts

@@ -0,0 +1,12 @@
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../useSeries/types';
+import type { PreparedWaterfallData } from './types';
+export declare const prepareWaterfallData: (args: {
+    series: PreparedWaterfallSeries[];
+    seriesOptions: PreparedSeriesOptions;
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
+}) => PreparedWaterfallData[];

package/dist/cjs/hooks/useShapes/waterfall/prepare-data.js

@@ -0,0 +1,133 @@
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+import { getLabelsSize } from '../../../utils';
+import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getXValue, getYValue } from '../utils';
+function getLabelData(d, plotHeight) {
+    if (!d.series.dataLabels.enabled) {
+        return undefined;
+    }
+    const text = String(d.data.label || d.subTotal);
+    const style = d.series.dataLabels.style;
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
+    let y;
+    if (Number(d.data.y) > 0 || d.data.total) {
+        y = Math.max(height, d.y - d.series.dataLabels.padding);
+    }
+    else {
+        y = Math.min(plotHeight - d.series.dataLabels.padding, d.y + d.height + d.series.dataLabels.padding + height);
+    }
+    return {
+        text,
+        x: d.x + d.width / 2,
+        y,
+        style,
+        size: { width, height },
+        textAnchor: 'middle',
+        series: d.series,
+    };
+}
+function getBandWidth(args) {
+    const { series, xAxis, xScale } = args;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        return xBandScale.bandwidth();
+    }
+    const xLinearScale = xScale;
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+        return acc;
+    }, []);
+    let bandWidth = Infinity;
+    xValues.sort().forEach((xValue, index) => {
+        if (index > 0 && xValue !== xValues[index - 1]) {
+            const dist = xLinearScale(xValue) - xLinearScale(xValues[index - 1]);
+            if (dist < bandWidth) {
+                bandWidth = dist;
+            }
+        }
+    });
+    return bandWidth;
+}
+export const prepareWaterfallData = (args) => {
+    const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
+    const yLinearScale = yScale;
+    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
+    const barMaxWidth = get(seriesOptions, 'waterfall.barMaxWidth');
+    const barPadding = get(seriesOptions, 'waterfall.barPadding');
+    const flattenData = series.reduce((acc, s) => {
+        acc.push(...s.data.map((d) => ({ data: d, series: s })));
+        return acc;
+    }, []);
+    const data = sortBy(flattenData, (d) => d.data.x);
+    const bandWidth = getBandWidth({
+        series,
+        xAxis,
+        xScale,
+    });
+    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
+    const yZero = getYValue({
+        point: { y: 0 },
+        yScale,
+        yAxis,
+    });
+    let totalValue = 0;
+    const result = [];
+    data.forEach((item, _index) => {
+        if (typeof item.data.y !== 'number' && !item.data.total) {
+            return;
+        }
+        if (!item.data.total) {
+            totalValue += Number(item.data.y);
+        }
+        const prevPoint = result[result.length - 1];
+        const xCenter = getXValue({ point: item.data, xAxis, xScale });
+        const x = xCenter - rectWidth / 2;
+        const yValue = Number(item.data.total ? totalValue : item.data.y);
+        const height = yZero -
+            getYValue({
+                point: { y: Math.abs(yValue) },
+                yScale,
+                yAxis,
+            });
+        let y;
+        if (!prevPoint || item.data.total) {
+            y = getYValue({
+                point: {
+                    y: yValue > 0 ? yValue : 0,
+                },
+                yScale,
+                yAxis,
+            });
+        }
+        else if (Number(prevPoint.data.y) < 0) {
+            if (Number(item.data.y) > 0) {
+                y = prevPoint.y + prevPoint.height - height;
+            }
+            else {
+                y = prevPoint.y + prevPoint.height;
+            }
+        }
+        else if (Number(item.data.y) < 0) {
+            y = prevPoint.y;
+        }
+        else {
+            y = prevPoint.y - height;
+        }
+        const preparedData = {
+            x,
+            y,
+            width: rectWidth,
+            height,
+            opacity: get(item.data, 'opacity', null),
+            data: item.data,
+            series: item.series,
+            subTotal: totalValue,
+            htmlElements: [],
+        };
+        preparedData.label = getLabelData(preparedData, plotHeight);
+        result.push(preparedData);
+    });
+    return result;
+};

package/dist/cjs/hooks/useShapes/waterfall/types.d.ts

@@ -0,0 +1,14 @@
+import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
+import type { PreparedWaterfallSeries } from '../../useSeries/types';
+export type PreparedWaterfallData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number | null;
+    series: PreparedWaterfallSeries;
+    data: WaterfallSeriesData;
+    label?: LabelData;
+    subTotal: number;
+    htmlElements: HtmlItem[];
+};

package/dist/cjs/hooks/useShapes/waterfall/types.js

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

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

@@ -0,0 +1,14 @@
+import type { ChartSplit } from '../../types';
+import type { PreparedSplit } from './types';
+type UseSplitArgs = {
+    split?: ChartSplit;
+    boundsHeight: number;
+    chartWidth: number;
+};
+export declare function getPlotHeight(args: {
+    split: ChartSplit | undefined;
+    boundsHeight: number;
+    gap: number;
+}): number;
+export declare const useSplit: (args: UseSplitArgs) => PreparedSplit;
+export {};