@gravity-ui/charts 0.1.0

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

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

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { color, select } from 'd3';
+import get from 'lodash/get';
+import { block, filterOverlappingLabels } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+export { prepareBarXData } from './prepare-data';
+export * from './types';
+const b = block('d3-bar-x');
+export const BarXSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'bar-x.states.hover');
+        const inactiveOptions = get(seriesOptions, 'bar-x.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) => d.data.color || d.series.color)
+            .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);
+        dispatcher.on('hover-shape.bar-x', (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) => d.data.color || d.series.color);
+                }
+                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 = d.data.color || d.series.color;
+                    if (hoveredValues.includes(d.data.x)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.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.bar-x', 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/esm/hooks/useShapes/bar-x/prepare-data.d.ts

@@ -0,0 +1,13 @@
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedBarXData } from './types';
+export declare const prepareBarXData: (args: {
+    series: PreparedBarXSeries[];
+    seriesOptions: PreparedSeriesOptions;
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
+    boundsHeight: number;
+}) => PreparedBarXData[];

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -0,0 +1,160 @@
+import { ascending, descending, max, sort } from 'd3';
+import get from 'lodash/get';
+import { getDataCategoryValue, getLabelsSize } from '../../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+function getLabelData(d) {
+    if (!d.series.dataLabels.enabled) {
+        return undefined;
+    }
+    const text = String(d.data.label || d.data.y);
+    const style = d.series.dataLabels.style;
+    const html = d.series.dataLabels.html;
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({
+        labels: [text],
+        style,
+        html,
+    });
+    let y = Math.max(height, d.y - d.series.dataLabels.padding);
+    if (d.series.dataLabels.inside) {
+        y = d.y + d.height / 2;
+    }
+    const x = d.x + d.width / 2;
+    return {
+        text,
+        x: html ? x - width / 2 : x,
+        y: html ? y - height : y,
+        style,
+        size: { width, height },
+        textAnchor: 'middle',
+        series: d.series,
+    };
+}
+export const prepareBarXData = (args) => {
+    const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
+    const categories = get(xAxis, 'categories', []);
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-x.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
+    const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
+    const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
+    const sortKey = (() => {
+        switch (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.key) {
+            case 'y': {
+                return 'data.y';
+            }
+            case 'name': {
+                return 'series.name';
+            }
+            default: {
+                return undefined;
+            }
+        }
+    })();
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const xValue = xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x;
+            if (xValue) {
+                if (!data[xValue]) {
+                    data[xValue] = {};
+                }
+                const xGroup = data[xValue];
+                if (!xGroup[s.stackId]) {
+                    xGroup[s.stackId] = [];
+                }
+                xGroup[s.stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    let bandWidth = Infinity;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        bandWidth = xBandScale.bandwidth();
+    }
+    else {
+        const xLinearScale = xScale;
+        const xValues = series.reduce((acc, s) => {
+            s.data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+            return acc;
+        }, []);
+        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;
+                }
+            }
+        });
+    }
+    const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
+    const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupWidth = bandWidth - groupGap;
+    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
+    const result = [];
+    Object.entries(data).forEach(([xValue, val]) => {
+        const stacks = Object.values(val);
+        const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
+        stacks.forEach((yValues, groupItemIndex) => {
+            let stackHeight = 0;
+            const stackItems = [];
+            const sortedData = sortKey
+                ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
+                : yValues;
+            sortedData.forEach((yValue) => {
+                const yAxisIndex = yValue.series.yAxis;
+                const seriesYScale = yScale[yAxisIndex];
+                let xCenter;
+                if (xAxis.type === 'category') {
+                    const xBandScale = xScale;
+                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
+                }
+                else {
+                    const xLinearScale = xScale;
+                    xCenter = xLinearScale(Number(xValue));
+                }
+                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
+                const yDataValue = yValue.data.y;
+                const y = seriesYScale(yDataValue);
+                const base = seriesYScale(0);
+                const height = yDataValue > 0 ? base - y : y - base;
+                const barData = {
+                    x,
+                    y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
+                    width: rectWidth,
+                    height,
+                    opacity: get(yValue.data, 'opacity', null),
+                    data: yValue.data,
+                    series: yValue.series,
+                    htmlElements: [],
+                };
+                const label = getLabelData(barData);
+                if (yValue.series.dataLabels.html && label) {
+                    barData.htmlElements.push({
+                        x: label.x,
+                        y: label.y,
+                        content: label.text,
+                    });
+                }
+                else {
+                    barData.label = getLabelData(barData);
+                }
+                stackItems.push(barData);
+                stackHeight += height + 1;
+            });
+            if (series.some((s) => s.stacking === 'percent')) {
+                let acc = 0;
+                const ratio = plotHeight / (stackHeight - stackItems.length);
+                stackItems.forEach((item) => {
+                    item.height = item.height * ratio;
+                    item.y = plotHeight - item.height - acc;
+                    acc += item.height + 1;
+                });
+            }
+            result.push(...stackItems);
+        });
+    });
+    return result;
+};

package/dist/esm/hooks/useShapes/bar-x/types.d.ts

@@ -0,0 +1,12 @@
+import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
+import type { PreparedBarXSeries } from '../../useSeries/types';
+export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number | null;
+    series: PreparedBarXSeries;
+    label?: LabelData;
+    htmlElements: HtmlItem[];
+};

package/dist/esm/hooks/useShapes/bar-x/types.js

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

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

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

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { color, select } from 'd3';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+export { prepareBarYData } from './prepare-data';
+const b = block('d3-bar-y');
+export const BarYSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const rectSelection = svgElement
+            .selectAll('rect')
+            .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) => d.color)
+            .attr('opacity', (d) => d.data.opacity || null)
+            .attr('cursor', (d) => d.series.cursor);
+        const dataLabels = preparedData.reduce((acc, d) => {
+            if (d.label) {
+                acc.push(d.label);
+            }
+            return acc;
+        }, []);
+        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);
+        const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
+        const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
+        dispatcher.on('hover-shape.bar-y', (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());
+                rectSelection.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;
+                };
+                rectSelection.attr('opacity', newOpacity);
+                labelSelection.attr('opacity', newOpacity);
+            }
+        });
+        return () => {
+            dispatcher.on('hover-shape.bar-y', 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/esm/hooks/useShapes/bar-y/prepare-data.d.ts

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

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -0,0 +1,169 @@
+import { ascending, descending, max, sort } from 'd3';
+import get from 'lodash/get';
+import { getDataCategoryValue, getLabelsSize } from '../../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+const DEFAULT_LABEL_PADDING = 7;
+function groupByYValue(series, yAxis) {
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const axisIndex = get(s, 'yAxis', 0);
+            const seriesYAxis = yAxis[axisIndex];
+            const categories = get(seriesYAxis, 'categories', []);
+            const key = seriesYAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
+                : d.y;
+            if (key) {
+                if (!data[key]) {
+                    data[key] = {};
+                }
+                if (!data[key][s.stackId]) {
+                    data[key][s.stackId] = [];
+                }
+                data[key][s.stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    return data;
+}
+function getBandWidth(series, yAxis, yScale) {
+    let bandWidth = Infinity;
+    if (yAxis[0].type === 'category') {
+        bandWidth = yScale.bandwidth();
+    }
+    else {
+        const scale = yScale;
+        const axisValues = series.reduce((acc, s) => {
+            s.data.forEach((dataItem) => acc.push(Number(dataItem.y)));
+            return acc;
+        }, []);
+        axisValues.sort().forEach((value, index) => {
+            if (index > 0 && value !== axisValues[index - 1]) {
+                const dist = scale(value) - scale(axisValues[index - 1]);
+                if (dist < bandWidth) {
+                    bandWidth = dist;
+                }
+            }
+        });
+    }
+    return bandWidth;
+}
+function setLabel(prepared) {
+    const dataLabels = prepared.series.dataLabels;
+    if (!dataLabels.enabled) {
+        return;
+    }
+    const data = prepared.data;
+    const content = String(data.label || data.x);
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({
+        labels: [content],
+        style: dataLabels.style,
+        html: dataLabels.html,
+    });
+    const x = dataLabels.inside
+        ? prepared.x + prepared.width / 2
+        : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
+    const y = prepared.y + prepared.height / 2;
+    if (dataLabels.html) {
+        prepared.htmlElements.push({
+            x,
+            y: y - height / 2,
+            content,
+        });
+    }
+    else {
+        prepared.label = {
+            x,
+            y: y + height / 2,
+            text: content,
+            textAnchor: dataLabels.inside ? 'middle' : 'right',
+            style: dataLabels.style,
+            series: prepared.series,
+            size: { width, height },
+        };
+    }
+}
+export const prepareBarYData = (args) => {
+    const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
+    const xLinearScale = xScale;
+    const plotWidth = xLinearScale(xLinearScale.domain()[1]);
+    const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-y.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
+    const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
+    const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
+    const sortKey = (() => {
+        switch (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.key) {
+            case 'x': {
+                return 'data.x';
+            }
+            case 'name': {
+                return 'series.name';
+            }
+            default: {
+                return undefined;
+            }
+        }
+    })();
+    const groupedData = groupByYValue(series, yAxis);
+    const bandWidth = getBandWidth(series, yAxis, yScale);
+    const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
+    const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupWidth = bandWidth - groupGap;
+    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+    const barHeight = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
+    const result = [];
+    Object.entries(groupedData).forEach(([yValue, val]) => {
+        const stacks = Object.values(val);
+        const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
+        stacks.forEach((measureValues, groupItemIndex) => {
+            const base = xLinearScale(0);
+            let stackSum = base;
+            const stackItems = [];
+            const sortedData = sortKey
+                ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
+                : measureValues;
+            sortedData.forEach(({ data, series: s }) => {
+                let center;
+                if (yAxis[0].type === 'category') {
+                    const bandScale = yScale;
+                    center = (bandScale(yValue) || 0) + bandWidth / 2;
+                }
+                else {
+                    const scale = yScale;
+                    center = scale(Number(yValue));
+                }
+                const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
+                const xValue = Number(data.x);
+                const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
+                const item = {
+                    x: xValue > 0 ? stackSum : stackSum - width,
+                    y,
+                    width,
+                    height: barHeight,
+                    color: data.color || s.color,
+                    opacity: get(data, 'opacity', null),
+                    data,
+                    series: s,
+                    htmlElements: [],
+                };
+                stackItems.push(item);
+                stackSum += width + 1;
+            });
+            if (series.some((s) => s.stacking === 'percent')) {
+                let acc = 0;
+                const ratio = plotWidth / (stackSum - stackItems.length);
+                stackItems.forEach((item) => {
+                    item.width = item.width * ratio;
+                    item.x = acc;
+                    acc += item.width;
+                });
+            }
+            result.push(...stackItems);
+        });
+    });
+    result.forEach((d) => {
+        setLabel(d);
+    });
+    return result;
+};

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

@@ -0,0 +1,13 @@
+import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
+import type { PreparedBarYSeries } from '../../useSeries/types';
+export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number | null;
+    series: PreparedBarYSeries;
+    label?: LabelData;
+    htmlElements: HtmlItem[];
+};

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

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

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

@@ -0,0 +1,3 @@
+export declare const MIN_BAR_WIDTH = 1;
+export declare const MIN_BAR_GAP = 1;
+export declare const MIN_BAR_GROUP_GAP = 1;

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

@@ -0,0 +1,3 @@
+export const MIN_BAR_WIDTH = 1;
+export const MIN_BAR_GAP = 1;
+export const MIN_BAR_GROUP_GAP = 1;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeries, PreparedSeriesOptions, PreparedSplit } from '../';
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedAreaData } from './area/types';
+import type { PreparedBarXData } from './bar-x';
+import type { PreparedBarYData } from './bar-y/types';
+import type { PreparedLineData } from './line/types';
+import type { PreparedPieData } from './pie/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 './styles.css';
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData;
+type Args = {
+    boundsWidth: number;
+    boundsHeight: number;
+    dispatcher: Dispatch<object>;
+    series: PreparedSeries[];
+    seriesOptions: PreparedSeriesOptions;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
+    xScale?: ChartScale;
+    yScale?: ChartScale[];
+    split: PreparedSplit;
+    htmlLayout: HTMLElement | null;
+};
+export declare const useShapes: (args: Args) => {
+    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    shapesData: ShapeData[];
+};