@gravity-ui/charts 0.1.0

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -0,0 +1,253 @@
+import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
+export type RectLegendSymbol = {
+    shape: 'rect';
+} & Required<RectLegendSymbolOptions>;
+export type PathLegendSymbol = {
+    shape: 'path';
+    strokeWidth: number;
+} & Required<PathLegendSymbolOptions>;
+export type SymbolLegendSymbol = {
+    shape: 'symbol';
+    symbolType: `${SymbolType}`;
+} & Required<SymbolLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
+    height: number;
+    lineHeight: number;
+    title: {
+        enable: boolean;
+        text: string;
+        margin: number;
+        style: BaseTextStyle;
+        height: number;
+    };
+    ticks: {
+        labelsMargin: number;
+        labelsLineHeight: number;
+    };
+    colorScale: {
+        colors: string[];
+        domain: number[];
+        stops: number[];
+    };
+};
+export type OnLegendItemClick = (data: {
+    name: string;
+    metaKey: boolean;
+}) => void;
+export type LegendItem = {
+    color: string;
+    name: string;
+    symbol: PreparedLegendSymbol;
+    textWidth: number;
+    visible?: boolean;
+    dashStyle?: DashStyle;
+};
+export type LegendConfig = {
+    offset: {
+        left: number;
+        top: number;
+    };
+    pagination?: {
+        limit: number;
+        maxPage: number;
+    };
+};
+export type PreparedHaloOptions = {
+    enabled: boolean;
+    opacity: number;
+    size: number;
+};
+type BasePreparedSeries = {
+    color: string;
+    name: string;
+    id: string;
+    visible: boolean;
+    legend: {
+        enabled: boolean;
+        symbol: PreparedLegendSymbol;
+    };
+    cursor: string | null;
+};
+export type PreparedScatterSeries = {
+    type: ScatterSeries['type'];
+    data: ScatterSeriesData[];
+    marker: {
+        states: {
+            normal: {
+                symbol: `${SymbolType}`;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
+    yAxis: number;
+} & BasePreparedSeries;
+export type PreparedBarXSeries = {
+    type: BarXSeries['type'];
+    data: BarXSeriesData[];
+    stackId: string;
+    stacking: BarXSeries['stacking'];
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: BaseTextStyle;
+        allowOverlap: boolean;
+        padding: number;
+        html: boolean;
+    };
+    yAxis: number;
+} & BasePreparedSeries;
+export type PreparedBarYSeries = {
+    type: BarYSeries['type'];
+    data: BarYSeriesData[];
+    stackId: string;
+    stacking: BarYSeries['stacking'];
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: BaseTextStyle;
+        maxHeight: number;
+        maxWidth: number;
+        html: boolean;
+    };
+} & BasePreparedSeries;
+export type PreparedPieSeries = {
+    type: PieSeries['type'];
+    data: PieSeriesData;
+    value: PieSeriesData['value'];
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    center?: [string | number | null, string | number | null];
+    radius?: string | number;
+    innerRadius?: string | number;
+    stackId: string;
+    label?: PieSeriesData['label'];
+    dataLabels: {
+        enabled: boolean;
+        padding: number;
+        style: BaseTextStyle;
+        allowOverlap: boolean;
+        connectorPadding: number;
+        connectorShape: ConnectorShape;
+        distance: number;
+        connectorCurve: ConnectorCurve;
+        html: boolean;
+    };
+    states: {
+        hover: {
+            halo: PreparedHaloOptions;
+        };
+    };
+    renderCustomShape?: PieSeries['renderCustomShape'];
+    opacity: number | null;
+} & BasePreparedSeries;
+export type PreparedLineSeries = {
+    type: LineSeries['type'];
+    data: LineSeriesData[];
+    lineWidth: number;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+        html: boolean;
+    };
+    marker: {
+        states: {
+            normal: {
+                symbol: `${SymbolType}`;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
+    dashStyle: DashStyle;
+    linecap: LineCap;
+    opacity: number | null;
+    yAxis: number;
+} & BasePreparedSeries;
+export type PreparedAreaSeries = {
+    type: AreaSeries['type'];
+    data: AreaSeriesData[];
+    stacking: AreaSeries['stacking'];
+    stackId: string;
+    lineWidth: number;
+    opacity: number;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+        html: boolean;
+    };
+    marker: {
+        states: {
+            normal: {
+                symbol: `${SymbolType}`;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
+    yAxis: number;
+} & BasePreparedSeries;
+export type PreparedTreemapSeries = {
+    type: TreemapSeries['type'];
+    data: TreemapSeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+        html: boolean;
+        align: Required<Required<TreemapSeries>['dataLabels']>['align'];
+    };
+    layoutAlgorithm: `${LayoutAlgorithm}`;
+} & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+export type PreparedWaterfallSeries = {
+    type: WaterfallSeries['type'];
+    data: WaterfallSeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        allowOverlap: boolean;
+        padding: number;
+        html: boolean;
+    };
+    positiveColor: string;
+    negativeColor: string;
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries;
+export type PreparedSeriesOptions = SeriesOptionsDefaults;
+export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
+export {};

package/dist/cjs/hooks/useSeries/types.js

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

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

@@ -0,0 +1,7 @@
+import { SymbolType } from '../../constants';
+import type { ChartSeries } from '../../types';
+import type { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
+export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
+export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
+export declare function prepareLegendSymbol(series: ChartSeries, symbolType?: `${SymbolType}`): PreparedLegendSymbol;
+export declare function getSeriesStackId(series: StackedSeries): string;

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

@@ -0,0 +1,33 @@
+import memoize from 'lodash/memoize';
+import { SymbolType } from '../../constants';
+import { getUniqId } from '../../utils';
+import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+export const getActiveLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        if (s.legend.enabled && s.visible) {
+            acc.push(s.name);
+        }
+        return acc;
+    }, []);
+};
+export const getAllLegendItems = (series) => {
+    return series.map((s) => s.name);
+};
+export function prepareLegendSymbol(series, symbolType) {
+    var _a;
+    const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    return {
+        shape: 'symbol',
+        symbolType: symbolType || SymbolType.Circle,
+        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
+    };
+}
+const getCommonStackId = memoize(getUniqId);
+export function getSeriesStackId(series) {
+    let stackId = series.stackId;
+    if (!stackId) {
+        stackId = series.stacking ? getCommonStackId() : getUniqId();
+    }
+    return stackId;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ShapeDataWithHtmlItems } from '../../types';
+type Props = {
+    htmlLayout: HTMLElement | null;
+    preparedData: ShapeDataWithHtmlItems | ShapeDataWithHtmlItems[];
+};
+export declare const HtmlLayer: (props: Props) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Portal } from '@gravity-ui/uikit';
+export const HtmlLayer = (props) => {
+    const { htmlLayout, preparedData } = props;
+    const items = React.useMemo(() => {
+        if (Array.isArray(preparedData)) {
+            return preparedData.reduce((result, d) => {
+                result.push(...d.htmlElements);
+                return result;
+            }, []);
+        }
+        else {
+            return preparedData.htmlElements;
+        }
+    }, [preparedData]);
+    if (!htmlLayout) {
+        return null;
+    }
+    return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
+        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: { position: 'absolute', left: item.x, top: item.y } }));
+    })));
+};

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

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

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import { area as areaGenerator, color, line as lineGenerator, select } from 'd3';
+import get from 'lodash/get';
+import { block, filterOverlappingLabels } from '../../..//utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState } from '../utils';
+const b = block('d3-area');
+export const AreaSeriesShapes = (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, 'area.states.hover');
+        const inactiveOptions = get(seriesOptions, 'area.states.inactive');
+        const line = lineGenerator()
+            .x((d) => d.x)
+            .y((d) => d.y);
+        svgElement.selectAll('*').remove();
+        const shapeSelection = svgElement
+            .selectAll('shape')
+            .data(preparedData)
+            .join('g')
+            .attr('class', b('series'))
+            .attr('cursor', (d) => d.series.cursor);
+        shapeSelection
+            .append('path')
+            .attr('class', b('line'))
+            .attr('d', (d) => line(d.points))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round');
+        const area = areaGenerator()
+            .x((d) => d.x)
+            .y0((d) => d.y0)
+            .y1((d) => d.y);
+        shapeSelection
+            .append('path')
+            .attr('class', b('region'))
+            .attr('d', (d) => area(d.points))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => d.opacity);
+        let dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.labels);
+        }, []);
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelsSelection = 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 markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+        const markerSelection = svgElement
+            .selectAll('marker')
+            .data(markers)
+            .join('g')
+            .call(renderMarker);
+        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        dispatcher.on('hover-shape.area', (data) => {
+            const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
+            const selectedDataItems = selected.map((d) => d.data);
+            const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
+            shapeSelection.datum((d, index, list) => {
+                var _a;
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    let strokeColor = d.color || '';
+                    if (d.hovered) {
+                        strokeColor =
+                            ((_a = color(strokeColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                                strokeColor;
+                    }
+                    elementSelection.selectAll(`.${b('line')}`).attr('stroke', strokeColor);
+                    elementSelection.selectAll(`.${b('region')}`).attr('fill', strokeColor);
+                }
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.id)),
+                    datum: d,
+                });
+            });
+            labelsSelection.datum((d, index, list) => {
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.series.id)),
+                    datum: d,
+                });
+            });
+            markerSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('visibility', getMarkerVisibility(d));
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
+                }
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.point.series.id));
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
+                }
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on('hover-shape.area', 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/area/prepare-data.d.ts

@@ -0,0 +1,12 @@
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedAreaData } from './types';
+export declare const prepareAreaData: (args: {
+    series: PreparedAreaSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
+    boundsHeight: number;
+}) => PreparedAreaData[];

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

@@ -0,0 +1,158 @@
+import { group, sort } from 'd3';
+import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
+import { getXValue, getYValue } from '../utils';
+function getLabelData(point, series, xMax) {
+    const text = String(point.data.label || point.data.y);
+    const style = series.dataLabels.style;
+    const size = getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
+    const labelData = {
+        text,
+        x: point.x,
+        y: point.y - series.dataLabels.padding,
+        style,
+        size: { width: size.maxWidth, height: size.maxHeight },
+        textAnchor: 'middle',
+        series: series,
+        active: true,
+    };
+    const left = getLeftPosition(labelData);
+    if (left < 0) {
+        labelData.x = labelData.x + Math.abs(left);
+    }
+    else {
+        const right = left + labelData.size.width;
+        if (right > xMax) {
+            labelData.x = labelData.x - (right - xMax);
+        }
+    }
+    return labelData;
+}
+function getXValues(series, xAxis, xScale) {
+    const categories = xAxis.categories || [];
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((d) => {
+            const key = String(xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x);
+            if (!acc.has(key)) {
+                acc.set(key, getXValue({ point: d, xAxis, xScale }));
+            }
+        });
+        return acc;
+    }, new Map());
+    if (xAxis.type === 'category') {
+        return categories.reduce((acc, category) => {
+            const xValue = xValues.get(category);
+            if (typeof xValue === 'number') {
+                acc.push([category, xValue]);
+            }
+            return acc;
+        }, []);
+    }
+    return sort(Array.from(xValues), ([_x, xValue]) => xValue);
+}
+export const prepareAreaData = (args) => {
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight } = args;
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
+        const xValues = getXValues(seriesStack, xAxis, xScale);
+        const accumulatedYValues = new Map();
+        xValues.forEach(([key]) => {
+            accumulatedYValues.set(key, 0);
+        });
+        const seriesStackData = seriesStack.reduce((acc, s) => {
+            const yAxisIndex = s.yAxis;
+            const seriesYAxis = yAxis[yAxisIndex];
+            const seriesYScale = yScale[yAxisIndex];
+            const yMin = getYValue({ point: { y: 0 }, yAxis: seriesYAxis, yScale: seriesYScale });
+            const seriesData = s.data.reduce((m, d) => {
+                const key = String(xAxis.type === 'category'
+                    ? getDataCategoryValue({
+                        axisDirection: 'x',
+                        categories: xAxis.categories || [],
+                        data: d,
+                    })
+                    : d.x);
+                return m.set(key, d);
+            }, new Map());
+            const points = xValues.reduce((pointsAcc, [x, xValue]) => {
+                const accumulatedYValue = accumulatedYValues.get(x) || 0;
+                const d = seriesData.get(x) ||
+                    {
+                        x,
+                        // FIXME: think about how to break the series into separate areas(null Y values)
+                        y: 0,
+                    };
+                const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }) -
+                    accumulatedYValue;
+                accumulatedYValues.set(x, yMin - yValue);
+                pointsAcc.push({
+                    y0: yMin - accumulatedYValue,
+                    x: xValue,
+                    y: yValue,
+                    data: d,
+                    series: s,
+                });
+                return pointsAcc;
+            }, []);
+            let labels = [];
+            const htmlElements = [];
+            if (s.dataLabels.enabled) {
+                const labelItems = points.map((p) => getLabelData(p, s, xMax));
+                if (s.dataLabels.html) {
+                    const htmlLabels = labelItems.map((l) => {
+                        return {
+                            x: l.x - l.size.width / 2,
+                            y: l.y,
+                            content: l.text,
+                        };
+                    });
+                    htmlElements.push(...htmlLabels);
+                }
+                else {
+                    labels = labelItems;
+                }
+            }
+            let markers = [];
+            if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+                markers = points.map((p) => ({
+                    point: p,
+                    active: true,
+                    hovered: false,
+                }));
+            }
+            acc.push({
+                points,
+                markers,
+                labels,
+                color: s.color,
+                opacity: s.opacity,
+                width: s.lineWidth,
+                series: s,
+                hovered: false,
+                active: true,
+                id: s.id,
+                htmlElements,
+            });
+            return acc;
+        }, []);
+        if (series.some((s) => s.stacking === 'percent')) {
+            xValues.forEach(([x], index) => {
+                const stackHeight = accumulatedYValues.get(x) || 0;
+                let acc = 0;
+                const ratio = plotHeight / stackHeight;
+                seriesStackData.forEach((item) => {
+                    const point = item.points[index];
+                    if (point) {
+                        const height = (point.y0 - point.y) * ratio;
+                        point.y0 = plotHeight - height - acc;
+                        point.y = point.y0 + height;
+                        acc += height;
+                    }
+                });
+            });
+        }
+        return result.concat(seriesStackData);
+    }, []);
+};

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

@@ -0,0 +1,27 @@
+import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
+import type { PreparedAreaSeries } from '../../useSeries/types';
+export type PointData = {
+    y0: number;
+    x: number;
+    y: number;
+    data: AreaSeriesData;
+    series: PreparedAreaSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+};
+export type PreparedAreaData = {
+    id: string;
+    points: PointData[];
+    markers: MarkerData[];
+    color: string;
+    opacity: number;
+    width: number;
+    series: PreparedAreaSeries;
+    hovered: boolean;
+    active: boolean;
+    labels: LabelData[];
+    htmlElements: HtmlItem[];
+};

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

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