@gravity-ui/charts 1.46.0 → 1.47.0

package/dist/cjs/core/series/prepare-x-range.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { getUniqId } from '../utils';
 import { DASH_STYLE, DEFAULT_DATALABELS_STYLE } from '../constants';
+import { getUniqId } from '../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareXRangeSeries(args) {

package/dist/cjs/core/series/prepareSeries.d.ts

@@ -1,6 +1,12 @@
 import type { ScaleOrdinal } from 'd3-scale';
-import type { ChartSeries, ChartSeriesOptions } from '../../types';
+import type { ChartData, ChartSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
+export declare const getPreparedSeries: ({ seriesData, seriesOptions, colors, preparedLegend, }: {
+    seriesData: ChartData["series"]["data"];
+    seriesOptions: ChartData["series"]["options"];
+    colors: string[];
+    preparedLegend?: PreparedLegend | null;
+}) => Promise<PreparedSeries[]>;
 export declare function prepareSeries(args: {
     type: ChartSeries['type'];
     series: ChartSeries[];

package/dist/cjs/core/series/prepareSeries.js

@@ -1,4 +1,7 @@
+import { group } from 'd3-array';
+import { scaleOrdinal } from 'd3-scale';
 import { ChartError } from '../../libs';
+import { getSeriesNames } from '../utils';
 import { prepareArea } from './prepare-area';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
@@ -12,6 +15,34 @@ import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
 import { prepareXRangeSeries } from './prepare-x-range';
+export const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
+    const seriesNames = getSeriesNames(seriesData);
+    const colorScale = scaleOrdinal(seriesNames, colors);
+    const groupedSeries = group(seriesData, (item, index) => {
+        if (item.type === 'line') {
+            return `${item.type}_${index}`;
+        }
+        return item.type;
+    });
+    const acc = [];
+    if (!preparedLegend) {
+        return acc;
+    }
+    const list = Array.from(groupedSeries);
+    for (let i = 0; i < list.length; i++) {
+        const [_groupId, seriesList] = list[i];
+        const seriesType = seriesList[0].type;
+        acc.push(...(await prepareSeries({
+            type: seriesType,
+            series: seriesList,
+            seriesOptions,
+            legend: preparedLegend,
+            colorScale,
+            colors,
+        })));
+    }
+    return acc;
+};
 export async function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colors, colorScale } = args;
     switch (type) {

package/dist/cjs/core/series/types.d.ts

@@ -16,6 +16,11 @@ export type PreparedAnnotation = {
         padding: [number, number];
     };
 };
+export type AnnotationAnchor = {
+    annotation: PreparedAnnotation;
+    x: number;
+    y: number;
+};
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;

package/dist/cjs/core/series/utils.d.ts

@@ -9,3 +9,7 @@ export declare function prepareLegendSymbol(series: {
     };
 }, symbolType?: `${SymbolType}`): PreparedLegendSymbol;
 export declare function getSeriesStackId(series: StackedSeries): string;
+export declare const getVisibleSeries: ({ preparedSeries, activeLegendItems, }: {
+    preparedSeries: PreparedSeries[];
+    activeLegendItems: string[];
+}) => PreparedSeries[];

package/dist/cjs/core/series/utils.js

@@ -1,6 +1,6 @@
 import memoize from 'lodash/memoize';
-import { getSymbolBBoxWidth } from '../utils';
 import { SymbolType } from '../constants';
+import { getSymbolBBoxWidth } from '../utils';
 import { getUniqId } from '../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -35,3 +35,11 @@ export function getSeriesStackId(series) {
     }
     return stackId;
 }
+export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
+    return preparedSeries.map((singleSeries) => {
+        if (singleSeries.legend.enabled) {
+            return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.legend.groupId) });
+        }
+        return singleSeries;
+    });
+};

package/dist/cjs/{hooks/useShapes/annotation/index.d.ts → core/shapes/annotation.d.ts}

@@ -1,11 +1,5 @@
 import type { Selection } from 'd3-selection';
-import type { PreparedAnnotation } from '../../../core/series/types';
-type AnnotationAnchor = {
-    annotation: PreparedAnnotation;
-    x: number;
-    y: number;
-};
-export { type AnnotationAnchor };
+import type { AnnotationAnchor } from '../series/types';
 export declare function renderAnnotations(args: {
     anchors: AnnotationAnchor[];
     container: Selection<SVGGElement, unknown, null, undefined>;

package/dist/cjs/{hooks/useShapes/annotation/index.js → core/shapes/annotation.js}

@@ -1,6 +1,6 @@
 import { select } from 'd3-selection';
-import { DESCENDER_RATIO } from '../../../core/utils/text';
-import { block } from '../../../utils';
+import { block } from '../../utils';
+import { DESCENDER_RATIO } from '../utils/text';
 const b = block('annotation');
 const ARROW_WIDTH = 18;
 const ARROW_HEIGHT = 9;

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

@@ -1,7 +1,7 @@
-import type { PreparedSplit } from '../../../core/layout/split-types';
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedAreaSeries, PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { PreparedSplit } from '../../layout/split-types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedAreaSeries, PreparedSeriesOptions } from '../../series/types';
 import type { PreparedAreaData } from './types';
 export declare const prepareAreaData: (args: {
     series: PreparedAreaSeries[];

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

@@ -1,10 +1,10 @@
 import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
-import { prepareAnnotation } from '../../../core/series/prepare-annotation';
-import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { getXValue, getYValue } from '../utils';
+import { prepareAnnotation } from '../../series/prepare-annotation';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../../shapes/utils';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
 function getXValues(series, xAxis, xScale) {
     const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
@@ -315,6 +315,11 @@ export const prepareAreaData = async (args) => {
                     }
                     return result;
                 }, []);
+                markHiddenPointsOutOfYRange({
+                    points,
+                    yScale: seriesYScale,
+                    yAxisTop,
+                });
                 seriesStackData.push({
                     annotations,
                     points,

package/dist/cjs/core/shapes/area/renderer.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedAreaData } from './types';
+export declare function renderArea(elements: {
+    plot: SVGGElement;
+    markers: SVGGElement;
+    hoverMarkers: SVGGElement;
+    annotations: SVGGElement;
+    boundsWidth: number;
+    boundsHeight: number;
+}, preparedData: PreparedAreaData[], seriesOptions: PreparedSeriesOptions, allowOverlapDataLabels: boolean, dispatcher?: Dispatch<object>): () => void;

package/dist/cjs/core/shapes/area/renderer.js

@@ -0,0 +1,175 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { area as areaGenerator, line as lineGenerator } from 'd3-shape';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { filterOverlappingLabels } from '../../utils';
+import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState } from '../utils';
+const b = block('area');
+export function renderArea(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
+    const plotSvgElement = select(elements.plot);
+    const markersSvgElement = select(elements.markers);
+    const hoverMarkersSvgElement = select(elements.hoverMarkers);
+    const annotationsSvgElement = select(elements.annotations);
+    const hoverOptions = get(seriesOptions, 'area.states.hover');
+    const inactiveOptions = get(seriesOptions, 'area.states.inactive');
+    const line = lineGenerator()
+        .x((d) => d.x)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
+        .y((d) => d.y);
+    plotSvgElement.selectAll('*').remove();
+    markersSvgElement.selectAll('*').remove();
+    const shapeSelection = plotSvgElement
+        .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()
+        .defined((d) => d.y !== null && !d.hiddenInLine)
+        .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.svgLabels);
+    }, []);
+    if (!allowOverlapDataLabels) {
+        dataLabels = filterOverlappingLabels(dataLabels);
+    }
+    const labelsSelection = renderDataLabels({
+        container: plotSvgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
+    const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+    const markerSelection = markersSvgElement
+        .selectAll('marker')
+        .data(markers)
+        .join('g')
+        .call(renderMarker);
+    renderAnnotations({
+        anchors: preparedData.flatMap((d) => d.annotations),
+        container: annotationsSvgElement,
+        plotHeight: elements.boundsHeight,
+        plotWidth: elements.boundsWidth,
+    });
+    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) {
+        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;
+        });
+        hoverMarkersSvgElement.selectAll('*').remove();
+        if (hoverEnabled && selected.length > 0) {
+            const hoverOnlyMarkers = [];
+            for (const chunk of selected) {
+                const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
+                if (!seriesData) {
+                    continue;
+                }
+                const { series } = seriesData;
+                if (series.marker.states.normal.enabled || !series.marker.states.hover.enabled) {
+                    continue;
+                }
+                const point = seriesData.points.find((p) => p.data === chunk.data);
+                if (!point || point.y === null) {
+                    continue;
+                }
+                hoverOnlyMarkers.push({
+                    point: point,
+                    active: true,
+                    hovered: true,
+                    clipped: false,
+                });
+            }
+            if (hoverOnlyMarkers.length > 0) {
+                hoverMarkersSvgElement
+                    .selectAll('g')
+                    .data(hoverOnlyMarkers)
+                    .join('g')
+                    .call(renderMarker)
+                    .each((_d, i, nodes) => {
+                    selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
+                });
+            }
+        }
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', null);
+    };
+}

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

@@ -1,15 +1,14 @@
-import type { PreparedAnnotation } from '../../../core/series/types';
 import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
-import type { PreparedAreaSeries } from '../../useSeries/types';
-import type { AnnotationAnchor } from '../annotation';
+import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
 export type PointData = {
-    y0: number;
-    x: number;
-    y: number | null;
-    data: AreaSeriesData;
-    series: PreparedAreaSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: AreaSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedAreaSeries;
+    x: number;
+    y: number | null;
+    y0: number;
 };
 export type MarkerPointData = PointData & {
     y: number;

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

@@ -1,7 +1,7 @@
-import type { PreparedSplit } from '../../../core/layout/split-types';
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { PreparedSplit } from '../../layout/split-types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../series/types';
 import type { PreparedBarXData } from './types';
 export declare const prepareBarXData: (args: {
     series: PreparedBarXSeries[];

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

@@ -1,11 +1,11 @@
 import { ascending, descending, max, min, reverse, sort } from 'd3-array';
 import get from 'lodash/get';
-import { prepareAnnotation } from '../../../core/series/prepare-annotation';
-import { getDataCategoryValue, getLabelsSize } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../constants';
-import { getSeriesStackId } from '../../useSeries/utils';
-import { getBandSize } from '../../utils/get-band-size';
+import { prepareAnnotation } from '../../series/prepare-annotation';
+import { getSeriesStackId } from '../../series/utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../shapes/bar-constants';
+import { getDataCategoryValue, getLabelsSize } from '../../utils';
+import { getBandSize } from '../../utils/band-size';
+import { getFormattedValue } from '../../utils/format';
 const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d, xMax) {
     var _a;

package/dist/cjs/core/shapes/bar-x/renderer.d.ts

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

package/dist/cjs/core/shapes/bar-x/renderer.js

@@ -0,0 +1,104 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { filterOverlappingLabels } from '../../utils';
+import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
+import { getRectPath } from '../utils';
+const b = block('bar-x');
+export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
+    const svgElement = select(elements.plot);
+    const annotationsSvgElement = select(elements.annotations);
+    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('path')
+        .attr('d', (d) => {
+        const borderRadius = d.isLastStackItem
+            ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+            : 0;
+        const p = getRectPath({
+            x: d.x,
+            y: d.y,
+            width: d.width,
+            height: d.height,
+            borderRadius: [borderRadius, borderRadius, 0, 0],
+        });
+        return p.toString();
+    })
+        .attr('class', b('segment'))
+        .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.svgLabels).flat();
+    if (!allowOverlapDataLabels) {
+        dataLabels = filterOverlappingLabels(dataLabels);
+    }
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
+    const annotationAnchors = [];
+    for (const d of preparedData) {
+        if (d.annotation) {
+            annotationAnchors.push({
+                annotation: d.annotation,
+                x: d.x + d.width / 2,
+                y: d.y,
+            });
+        }
+    }
+    renderAnnotations({
+        anchors: annotationAnchors,
+        container: annotationsSvgElement,
+        plotHeight: elements.boundsHeight,
+        plotWidth: elements.boundsWidth,
+    });
+    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) => 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;
+            });
+        }
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', null);
+    };
+}

package/dist/cjs/{hooks/useShapes → core/shapes}/bar-x/types.d.ts

@@ -1,6 +1,5 @@
-import type { PreparedAnnotation } from '../../../core/series/types';
 import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
-import type { PreparedBarXSeries } from '../../useSeries/types';
+import type { PreparedAnnotation, PreparedBarXSeries } from '../../series/types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     annotation?: PreparedAnnotation;
     x: number;

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

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../series/types';
 import type { BarYShapesArgs } from './types';
 export declare function prepareBarYData(args: {
     boundsHeight: number;

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

@@ -1,8 +1,8 @@
 import { ascending, descending, sort } from 'd3-array';
 import get from 'lodash/get';
-import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
+import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../utils';
+import { getBarYLayout, groupBarYDataByYValue } from '../../utils/bar-y';
+import { getFormattedValue } from '../../utils/format';
 export async function prepareBarYData(args) {
     var _a, _b;
     const { boundsHeight, boundsWidth, series, seriesOptions, xAxis, yAxis, xScale, yScale: [yScale], } = args;

package/dist/cjs/core/shapes/bar-y/renderer.d.ts

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

package/dist/cjs/core/shapes/bar-y/renderer.js

@@ -0,0 +1,74 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
+import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
+const b = block('bar-y');
+export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
+    const { shapes, labels: dataLabels } = preparedData;
+    const svgElement = select(elements.plot);
+    svgElement.selectAll('*').remove();
+    const segmentSelection = svgElement
+        .selectAll(`path.${b('segment')}`)
+        .data(shapes)
+        .join('path')
+        .attr('d', (d) => getAdjustedRectPath(d))
+        .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 borderSelection = svgElement
+        .selectAll(`path.${b('segment-border')}`)
+        .data(shapes.filter((d) => d.borderWidth > 0))
+        .join('path')
+        .attr('d', (d) => getAdjustedRectBorderPath(d))
+        .attr('class', b('segment-border'))
+        .attr('fill', (d) => d.borderColor)
+        .attr('fill-rule', 'evenodd')
+        .attr('opacity', (d) => d.data.opacity || null)
+        .attr('pointer-events', 'none');
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
+    const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
+    const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
+    function handleShapeHover(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());
+            segmentSelection.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;
+            };
+            segmentSelection.attr('opacity', newOpacity);
+            borderSelection.attr('opacity', newOpacity);
+            labelSelection.attr('opacity', newOpacity);
+        }
+    }
+    dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-y', handleShapeHover);
+    return () => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-y', null);
+    };
+}