@gravity-ui/charts 1.31.0 → 1.32.0

package/dist/cjs/components/ChartInner/index.js

@@ -26,7 +26,7 @@ const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
 export const ChartInner = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    const { width, height, data } = props;
+    const { width, height, data, onReady } = props;
     const svgRef = React.useRef(null);
     const resetZoomButtonRef = React.useRef(null);
     const [htmlLayout, setHtmlLayout] = React.useState(null);
@@ -206,6 +206,12 @@ export const ChartInner = (props) => {
         updateRangeSliderState,
         xScale,
     ]);
+    const areShapesReady = shapes.length > 0;
+    React.useEffect(() => {
+        if (areShapesReady) {
+            onReady === null || onReady === void 0 ? void 0 : onReady({ dimensions: { width, height } });
+        }
+    }, [height, areShapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
             React.createElement("clipPath", { id: clipPathId },

package/dist/cjs/components/ChartInner/types.d.ts

@@ -3,4 +3,10 @@ export type ChartInnerProps = {
     width: number;
     height: number;
     data: ChartData;
+    onReady?: (args: {
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    }) => void;
 };

package/dist/cjs/components/index.d.ts

@@ -15,5 +15,6 @@ export interface ChartProps {
     data: ChartData;
     lang?: string;
     onResize?: ChartOnResize;
+    onReady?: ChartOnResize;
 }
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;

package/dist/cjs/components/index.js

@@ -7,7 +7,7 @@ import { validateData } from '../validation';
 import { ChartInner } from './ChartInner';
 export * from './Tooltip/ChartTooltipContent';
 export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
-    const { data, lang, onResize } = props;
+    const { data, lang, onResize, onReady } = props;
     const validatedData = React.useRef();
     const ref = React.useRef(null);
     const debounced = React.useRef();
@@ -36,8 +36,8 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
     }), [debuncedHandleResize]);
     React.useEffect(() => {
         // dimensions initialize
-        debuncedHandleResize();
-    }, [debuncedHandleResize]);
+        handleResize();
+    }, [handleResize]);
     React.useEffect(() => {
         const selection = select(window);
         // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
@@ -62,5 +62,5 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data }))));
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data, onReady: onReady }))));
 });

package/dist/cjs/constants/line-styles.d.ts

@@ -18,3 +18,9 @@ export declare enum LineCap {
     Square = "square",
     None = "none"
 }
+export declare enum LineJoin {
+    Round = "round",
+    Bevel = "bevel",
+    Miter = "miter",
+    None = "unset"
+}

package/dist/cjs/constants/line-styles.js

@@ -18,3 +18,10 @@ export var LineCap;
     LineCap["Square"] = "square";
     LineCap["None"] = "none";
 })(LineCap || (LineCap = {}));
+export var LineJoin;
+(function (LineJoin) {
+    LineJoin["Round"] = "round";
+    LineJoin["Bevel"] = "bevel";
+    LineJoin["Miter"] = "miter";
+    LineJoin["None"] = "unset";
+})(LineJoin || (LineJoin = {}));

package/dist/cjs/hooks/useSeries/prepare-line.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DASH_STYLE, DEFAULT_DATALABELS_STYLE, LineCap, seriesRangeSliderOptionsDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_DATALABELS_STYLE, LineCap, LineJoin, seriesRangeSliderOptionsDefaults, } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
@@ -12,6 +12,12 @@ function prepareLinecap(dashStyle, series, seriesOptions) {
     const lineCapFromSeriesOptions = get(seriesOptions, 'line.linecap', defaultLineCap);
     return get(series, 'linecap', lineCapFromSeriesOptions);
 }
+function prepareLinejoin(dashStyle, series, seriesOptions) {
+    var _a, _b, _c;
+    const defaultLinejoin = dashStyle === DASH_STYLE.Solid ? LineJoin.Round : LineJoin.None;
+    const linejoinFromSeriesOptions = (_b = (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.line) === null || _a === void 0 ? void 0 : _a.linejoin) !== null && _b !== void 0 ? _b : defaultLinejoin;
+    return ((_c = series === null || series === void 0 ? void 0 : series.linejoin) !== null && _c !== void 0 ? _c : linejoinFromSeriesOptions);
+}
 function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
@@ -90,6 +96,7 @@ export function prepareLineSeries(args) {
             marker: prepareMarker(series, seriesOptions),
             dashStyle: dashStyle,
             linecap: prepareLinecap(dashStyle, series, seriesOptions),
+            linejoin: prepareLinejoin(dashStyle, series, seriesOptions),
             opacity: get(series, 'opacity', null),
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),

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

@@ -1,4 +1,4 @@
-import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
+import type { DashStyle, LayoutAlgorithm, LineCap, LineJoin, SeriesOptionsDefaults, SymbolType } from '../../constants';
 import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -222,6 +222,7 @@ export type PreparedLineSeries = {
     };
     dashStyle: DashStyle;
     linecap: LineCap;
+    linejoin: LineJoin;
     opacity: number | null;
     yAxis: number;
 } & BasePreparedSeries & BasePreparedAxisRelatedSeries;

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

@@ -12,4 +12,5 @@ export declare const prepareAreaData: (args: {
     boundsHeight: number;
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
 }) => Promise<PreparedAreaData[]>;

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

@@ -74,7 +74,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
 }
 export const prepareAreaData = async (args) => {
     var _a, _b;
-    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, } = args;
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, isRangeSlider, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const result = [];
@@ -147,7 +147,7 @@ export const prepareAreaData = async (args) => {
                 }, []);
                 const labels = [];
                 const htmlElements = [];
-                if (s.dataLabels.enabled) {
+                if (s.dataLabels.enabled && !isRangeSlider) {
                     const labelsData = await prepareDataLabels({ series: s, points, xMax, yAxisTop });
                     labels.push(...labelsData.svgLabels);
                     htmlElements.push(...labelsData.htmlLabels);

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

@@ -12,4 +12,5 @@ export declare const prepareBarXData: (args: {
     yScale: (ChartScale | undefined)[];
     boundsHeight: number;
     split: PreparedSplit;
+    isRangeSlider?: boolean;
 }) => Promise<PreparedBarXData[]>;

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

@@ -35,7 +35,7 @@ async function getLabelData(d) {
 // eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
     var _a, _b, _c, _d;
-    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, } = args;
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
     const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
@@ -99,7 +99,8 @@ export const prepareBarXData = async (args) => {
             const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
             for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
                 const yValues = stacks[groupItemIndex];
-                let stackHeight = 0;
+                let positiveStackHeight = 0;
+                let negativeStackHeight = 0;
                 const stackItems = [];
                 const sortedData = sortKey
                     ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
@@ -117,6 +118,7 @@ export const prepareBarXData = async (args) => {
                     if (xAxis.type === 'category') {
                         const xBandScale = xScale;
                         const xBandScaleDomain = xBandScale.domain();
+                        // eslint-disable-next-line max-depth
                         if (xBandScaleDomain.indexOf(xValue) === -1) {
                             continue;
                         }
@@ -141,7 +143,9 @@ export const prepareBarXData = async (args) => {
                     }
                     const barData = {
                         x,
-                        y: yAxisTop + (yDataValue > 0 ? y - stackHeight : base),
+                        y: yDataValue > 0
+                            ? yAxisTop + y - positiveStackHeight
+                            : yAxisTop + base + negativeStackHeight,
                         width: rectWidth,
                         height: shapeHeight,
                         opacity: get(yValue.data, 'opacity', null),
@@ -151,11 +155,16 @@ export const prepareBarXData = async (args) => {
                         isLastStackItem,
                     };
                     stackItems.push(barData);
-                    stackHeight += height;
+                    if (yDataValue > 0) {
+                        positiveStackHeight += height;
+                    }
+                    else {
+                        negativeStackHeight += height;
+                    }
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (stackHeight - stackItems.length);
+                    const ratio = plotHeight / (positiveStackHeight - stackItems.length);
                     stackItems.forEach((item) => {
                         item.height = item.height * ratio;
                         item.y = plotHeight - item.height - acc;
@@ -168,7 +177,7 @@ export const prepareBarXData = async (args) => {
     }
     for (let i = 0; i < result.length; i++) {
         const barData = result[i];
-        if (barData.series.dataLabels.enabled) {
+        if (barData.series.dataLabels.enabled && !isRangeSlider) {
             const label = await getLabelData(barData);
             if (barData.series.dataLabels.html && label) {
                 barData.htmlElements.push({

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

@@ -58,6 +58,7 @@ export const useShapes = (args) => {
                                 yScale,
                                 boundsHeight,
                                 split,
+                                isRangeSlider,
                             });
                             shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
@@ -124,6 +125,7 @@ export const useShapes = (args) => {
                                 boundsHeight,
                                 split,
                                 isOutsideBounds,
+                                isRangeSlider,
                             });
                             shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);

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

@@ -34,7 +34,7 @@ export const LineSeriesShapes = (args) => {
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
             .attr('stroke-width', (d) => d.lineWidth)
-            .attr('stroke-linejoin', (d) => d.linecap)
+            .attr('stroke-linejoin', (d) => d.linejoin)
             .attr('stroke-linecap', (d) => d.linecap)
             .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
             .attr('opacity', (d) => d.opacity)

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

@@ -44,7 +44,7 @@ export const prepareLineData = async (args) => {
         });
         const htmlElements = [];
         const labels = [];
-        if (s.dataLabels.enabled) {
+        if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
                     if (p.y === null) {
@@ -108,6 +108,7 @@ export const prepareLineData = async (args) => {
             lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
+            linejoin: s.linejoin,
             opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
         };
         acc.push(result);

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

@@ -1,4 +1,4 @@
-import type { DashStyle, LineCap } from '../../../constants';
+import type { DashStyle, LineCap, LineJoin } from '../../../constants';
 import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
@@ -30,4 +30,5 @@ export type PreparedLineData = {
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
+    linejoin: LineJoin;
 } & Required<LineSeriesLineBaseStyle>;

package/dist/cjs/types/chart/line.d.ts

@@ -1,4 +1,4 @@
-import type { DashStyle, LineCap, SERIES_TYPE } from '../../constants';
+import type { DashStyle, LineCap, LineJoin, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
 import type { RectLegendSymbolOptions } from './legend';
@@ -53,6 +53,8 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries, LineSeriesLin
     dashStyle?: DashStyle;
     /** Option for line cap style */
     linecap?: `${LineCap}`;
+    /** Defines the shape to be used at the corners of the line */
+    linejoin?: `${LineJoin}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { DashStyle, LineCap } from '../../constants';
+import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
@@ -211,6 +211,11 @@ export interface ChartSeriesOptions {
          * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'
          * */
         linecap?: `${LineCap}`;
+        /** Defines the shape to be used at the corners of the line
+         *
+         * @default 'round' when dashStyle is not 'solid', 'unset' when dashStyle is not 'solid'
+         * */
+        linejoin?: `${LineJoin}`;
     };
     area?: {
         /** Pixel width of the graph line.

package/dist/cjs/utils/chart/index.d.ts

@@ -46,8 +46,8 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
 export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;
-export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;
 export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
+export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;
 export declare const getSeriesNames: (series: ChartSeries[]) => string[];
 export declare const getOnlyVisibleSeries: <T extends {
     visible: boolean;

package/dist/cjs/utils/chart/index.js

@@ -46,7 +46,8 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
     const acc = [];
     const stackedSeries = group(seriesList, getSeriesStackId);
     Array.from(stackedSeries).forEach(([_stackId, seriesStack]) => {
-        const values = {};
+        const positiveValues = {};
+        const negativeValues = {};
         seriesStack.forEach((singleSeries) => {
             const data = new Map();
             singleSeries.data.forEach((point) => {
@@ -65,10 +66,15 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
                 data.set(key, value);
             });
             Array.from(data).forEach(([key, value]) => {
-                values[key] = (values[key] || 0) + value;
+                if (value >= 0) {
+                    positiveValues[key] = (positiveValues[key] || 0) + value;
+                }
+                if (value < 0) {
+                    negativeValues[key] = (negativeValues[key] || 0) + value;
+                }
             });
         });
-        acc.push(...Object.values(values));
+        acc.push(...Object.values(negativeValues), ...Object.values(positiveValues));
     });
     return acc;
 }
@@ -107,22 +113,6 @@ export function getDefaultMinXAxisValue(series) {
     }
     return undefined;
 }
-export function getDefaultMinYAxisValue(series) {
-    if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
-        if (series.some((s) => s.type === SERIES_TYPE.Waterfall)) {
-            const seriesData = series.map((s) => s.data).flat();
-            const minSubTotal = seriesData.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, seriesData) || 0), 0);
-            return Math.min(0, minSubTotal);
-        }
-        return series.reduce((minValue, s) => {
-            // https://github.com/gravity-ui/charts/issues/160
-            // @ts-expect-error
-            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-            return Math.min(minValue, minYValue);
-        }, 0);
-    }
-    return undefined;
-}
 export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     const items = Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
@@ -151,6 +141,20 @@ export const getDomainDataYBySeries = (series) => {
     }, []);
     return Array.from(new Set(items));
 };
+export function getDefaultMinYAxisValue(series) {
+    if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
+        if (series.some((s) => s.type === SERIES_TYPE.Waterfall)) {
+            const seriesData = series.map((s) => s.data).flat();
+            const minSubTotal = seriesData.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, seriesData) || 0), 0);
+            return Math.min(0, minSubTotal);
+        }
+        const domainData = getDomainDataYBySeries(series);
+        return domainData.reduce((minValue, d) => {
+            return Math.min(minValue, d);
+        }, 0);
+    }
+    return undefined;
+}
 // Uses to get all series names array (except `pie` charts)
 export const getSeriesNames = (series) => {
     return series.reduce((acc, s) => {

package/dist/esm/components/ChartInner/index.js

@@ -26,7 +26,7 @@ const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
 export const ChartInner = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    const { width, height, data } = props;
+    const { width, height, data, onReady } = props;
     const svgRef = React.useRef(null);
     const resetZoomButtonRef = React.useRef(null);
     const [htmlLayout, setHtmlLayout] = React.useState(null);
@@ -206,6 +206,12 @@ export const ChartInner = (props) => {
         updateRangeSliderState,
         xScale,
     ]);
+    const areShapesReady = shapes.length > 0;
+    React.useEffect(() => {
+        if (areShapesReady) {
+            onReady === null || onReady === void 0 ? void 0 : onReady({ dimensions: { width, height } });
+        }
+    }, [height, areShapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
             React.createElement("clipPath", { id: clipPathId },

package/dist/esm/components/ChartInner/types.d.ts

@@ -3,4 +3,10 @@ export type ChartInnerProps = {
     width: number;
     height: number;
     data: ChartData;
+    onReady?: (args: {
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    }) => void;
 };

package/dist/esm/components/index.d.ts

@@ -15,5 +15,6 @@ export interface ChartProps {
     data: ChartData;
     lang?: string;
     onResize?: ChartOnResize;
+    onReady?: ChartOnResize;
 }
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;

package/dist/esm/components/index.js

@@ -7,7 +7,7 @@ import { validateData } from '../validation';
 import { ChartInner } from './ChartInner';
 export * from './Tooltip/ChartTooltipContent';
 export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
-    const { data, lang, onResize } = props;
+    const { data, lang, onResize, onReady } = props;
     const validatedData = React.useRef();
     const ref = React.useRef(null);
     const debounced = React.useRef();
@@ -36,8 +36,8 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
     }), [debuncedHandleResize]);
     React.useEffect(() => {
         // dimensions initialize
-        debuncedHandleResize();
-    }, [debuncedHandleResize]);
+        handleResize();
+    }, [handleResize]);
     React.useEffect(() => {
         const selection = select(window);
         // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
@@ -62,5 +62,5 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data }))));
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data, onReady: onReady }))));
 });

package/dist/esm/constants/line-styles.d.ts

@@ -18,3 +18,9 @@ export declare enum LineCap {
     Square = "square",
     None = "none"
 }
+export declare enum LineJoin {
+    Round = "round",
+    Bevel = "bevel",
+    Miter = "miter",
+    None = "unset"
+}

package/dist/esm/constants/line-styles.js

@@ -18,3 +18,10 @@ export var LineCap;
     LineCap["Square"] = "square";
     LineCap["None"] = "none";
 })(LineCap || (LineCap = {}));
+export var LineJoin;
+(function (LineJoin) {
+    LineJoin["Round"] = "round";
+    LineJoin["Bevel"] = "bevel";
+    LineJoin["Miter"] = "miter";
+    LineJoin["None"] = "unset";
+})(LineJoin || (LineJoin = {}));

package/dist/esm/hooks/useSeries/prepare-line.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DASH_STYLE, DEFAULT_DATALABELS_STYLE, LineCap, seriesRangeSliderOptionsDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_DATALABELS_STYLE, LineCap, LineJoin, seriesRangeSliderOptionsDefaults, } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
@@ -12,6 +12,12 @@ function prepareLinecap(dashStyle, series, seriesOptions) {
     const lineCapFromSeriesOptions = get(seriesOptions, 'line.linecap', defaultLineCap);
     return get(series, 'linecap', lineCapFromSeriesOptions);
 }
+function prepareLinejoin(dashStyle, series, seriesOptions) {
+    var _a, _b, _c;
+    const defaultLinejoin = dashStyle === DASH_STYLE.Solid ? LineJoin.Round : LineJoin.None;
+    const linejoinFromSeriesOptions = (_b = (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.line) === null || _a === void 0 ? void 0 : _a.linejoin) !== null && _b !== void 0 ? _b : defaultLinejoin;
+    return ((_c = series === null || series === void 0 ? void 0 : series.linejoin) !== null && _c !== void 0 ? _c : linejoinFromSeriesOptions);
+}
 function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
@@ -90,6 +96,7 @@ export function prepareLineSeries(args) {
             marker: prepareMarker(series, seriesOptions),
             dashStyle: dashStyle,
             linecap: prepareLinecap(dashStyle, series, seriesOptions),
+            linejoin: prepareLinejoin(dashStyle, series, seriesOptions),
             opacity: get(series, 'opacity', null),
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),

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

@@ -1,4 +1,4 @@
-import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
+import type { DashStyle, LayoutAlgorithm, LineCap, LineJoin, SeriesOptionsDefaults, SymbolType } from '../../constants';
 import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -222,6 +222,7 @@ export type PreparedLineSeries = {
     };
     dashStyle: DashStyle;
     linecap: LineCap;
+    linejoin: LineJoin;
     opacity: number | null;
     yAxis: number;
 } & BasePreparedSeries & BasePreparedAxisRelatedSeries;

package/dist/esm/hooks/useShapes/area/prepare-data.d.ts

@@ -12,4 +12,5 @@ export declare const prepareAreaData: (args: {
     boundsHeight: number;
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
 }) => Promise<PreparedAreaData[]>;

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

@@ -74,7 +74,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
 }
 export const prepareAreaData = async (args) => {
     var _a, _b;
-    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, } = args;
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, isRangeSlider, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const result = [];
@@ -147,7 +147,7 @@ export const prepareAreaData = async (args) => {
                 }, []);
                 const labels = [];
                 const htmlElements = [];
-                if (s.dataLabels.enabled) {
+                if (s.dataLabels.enabled && !isRangeSlider) {
                     const labelsData = await prepareDataLabels({ series: s, points, xMax, yAxisTop });
                     labels.push(...labelsData.svgLabels);
                     htmlElements.push(...labelsData.htmlLabels);

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

@@ -12,4 +12,5 @@ export declare const prepareBarXData: (args: {
     yScale: (ChartScale | undefined)[];
     boundsHeight: number;
     split: PreparedSplit;
+    isRangeSlider?: boolean;
 }) => Promise<PreparedBarXData[]>;

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

@@ -35,7 +35,7 @@ async function getLabelData(d) {
 // eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
     var _a, _b, _c, _d;
-    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, } = args;
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
     const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
@@ -99,7 +99,8 @@ export const prepareBarXData = async (args) => {
             const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
             for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
                 const yValues = stacks[groupItemIndex];
-                let stackHeight = 0;
+                let positiveStackHeight = 0;
+                let negativeStackHeight = 0;
                 const stackItems = [];
                 const sortedData = sortKey
                     ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
@@ -117,6 +118,7 @@ export const prepareBarXData = async (args) => {
                     if (xAxis.type === 'category') {
                         const xBandScale = xScale;
                         const xBandScaleDomain = xBandScale.domain();
+                        // eslint-disable-next-line max-depth
                         if (xBandScaleDomain.indexOf(xValue) === -1) {
                             continue;
                         }
@@ -141,7 +143,9 @@ export const prepareBarXData = async (args) => {
                     }
                     const barData = {
                         x,
-                        y: yAxisTop + (yDataValue > 0 ? y - stackHeight : base),
+                        y: yDataValue > 0
+                            ? yAxisTop + y - positiveStackHeight
+                            : yAxisTop + base + negativeStackHeight,
                         width: rectWidth,
                         height: shapeHeight,
                         opacity: get(yValue.data, 'opacity', null),
@@ -151,11 +155,16 @@ export const prepareBarXData = async (args) => {
                         isLastStackItem,
                     };
                     stackItems.push(barData);
-                    stackHeight += height;
+                    if (yDataValue > 0) {
+                        positiveStackHeight += height;
+                    }
+                    else {
+                        negativeStackHeight += height;
+                    }
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (stackHeight - stackItems.length);
+                    const ratio = plotHeight / (positiveStackHeight - stackItems.length);
                     stackItems.forEach((item) => {
                         item.height = item.height * ratio;
                         item.y = plotHeight - item.height - acc;
@@ -168,7 +177,7 @@ export const prepareBarXData = async (args) => {
     }
     for (let i = 0; i < result.length; i++) {
         const barData = result[i];
-        if (barData.series.dataLabels.enabled) {
+        if (barData.series.dataLabels.enabled && !isRangeSlider) {
             const label = await getLabelData(barData);
             if (barData.series.dataLabels.html && label) {
                 barData.htmlElements.push({

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

@@ -58,6 +58,7 @@ export const useShapes = (args) => {
                                 yScale,
                                 boundsHeight,
                                 split,
+                                isRangeSlider,
                             });
                             shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
@@ -124,6 +125,7 @@ export const useShapes = (args) => {
                                 boundsHeight,
                                 split,
                                 isOutsideBounds,
+                                isRangeSlider,
                             });
                             shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);

package/dist/esm/hooks/useShapes/line/index.js

@@ -34,7 +34,7 @@ export const LineSeriesShapes = (args) => {
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
             .attr('stroke-width', (d) => d.lineWidth)
-            .attr('stroke-linejoin', (d) => d.linecap)
+            .attr('stroke-linejoin', (d) => d.linejoin)
             .attr('stroke-linecap', (d) => d.linecap)
             .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
             .attr('opacity', (d) => d.opacity)

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -44,7 +44,7 @@ export const prepareLineData = async (args) => {
         });
         const htmlElements = [];
         const labels = [];
-        if (s.dataLabels.enabled) {
+        if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
                     if (p.y === null) {
@@ -108,6 +108,7 @@ export const prepareLineData = async (args) => {
             lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
+            linejoin: s.linejoin,
             opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
         };
         acc.push(result);

package/dist/esm/hooks/useShapes/line/types.d.ts

@@ -1,4 +1,4 @@
-import type { DashStyle, LineCap } from '../../../constants';
+import type { DashStyle, LineCap, LineJoin } from '../../../constants';
 import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
@@ -30,4 +30,5 @@ export type PreparedLineData = {
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
+    linejoin: LineJoin;
 } & Required<LineSeriesLineBaseStyle>;

package/dist/esm/types/chart/line.d.ts

@@ -1,4 +1,4 @@
-import type { DashStyle, LineCap, SERIES_TYPE } from '../../constants';
+import type { DashStyle, LineCap, LineJoin, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
 import type { RectLegendSymbolOptions } from './legend';
@@ -53,6 +53,8 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries, LineSeriesLin
     dashStyle?: DashStyle;
     /** Option for line cap style */
     linecap?: `${LineCap}`;
+    /** Defines the shape to be used at the corners of the line */
+    linejoin?: `${LineJoin}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;

package/dist/esm/types/chart/series.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { DashStyle, LineCap } from '../../constants';
+import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
@@ -211,6 +211,11 @@ export interface ChartSeriesOptions {
          * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'
          * */
         linecap?: `${LineCap}`;
+        /** Defines the shape to be used at the corners of the line
+         *
+         * @default 'round' when dashStyle is not 'solid', 'unset' when dashStyle is not 'solid'
+         * */
+        linejoin?: `${LineJoin}`;
     };
     area?: {
         /** Pixel width of the graph line.

package/dist/esm/utils/chart/index.d.ts

@@ -46,8 +46,8 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
 export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;
-export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;
 export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
+export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;
 export declare const getSeriesNames: (series: ChartSeries[]) => string[];
 export declare const getOnlyVisibleSeries: <T extends {
     visible: boolean;

package/dist/esm/utils/chart/index.js

@@ -46,7 +46,8 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
     const acc = [];
     const stackedSeries = group(seriesList, getSeriesStackId);
     Array.from(stackedSeries).forEach(([_stackId, seriesStack]) => {
-        const values = {};
+        const positiveValues = {};
+        const negativeValues = {};
         seriesStack.forEach((singleSeries) => {
             const data = new Map();
             singleSeries.data.forEach((point) => {
@@ -65,10 +66,15 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
                 data.set(key, value);
             });
             Array.from(data).forEach(([key, value]) => {
-                values[key] = (values[key] || 0) + value;
+                if (value >= 0) {
+                    positiveValues[key] = (positiveValues[key] || 0) + value;
+                }
+                if (value < 0) {
+                    negativeValues[key] = (negativeValues[key] || 0) + value;
+                }
             });
         });
-        acc.push(...Object.values(values));
+        acc.push(...Object.values(negativeValues), ...Object.values(positiveValues));
     });
     return acc;
 }
@@ -107,22 +113,6 @@ export function getDefaultMinXAxisValue(series) {
     }
     return undefined;
 }
-export function getDefaultMinYAxisValue(series) {
-    if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
-        if (series.some((s) => s.type === SERIES_TYPE.Waterfall)) {
-            const seriesData = series.map((s) => s.data).flat();
-            const minSubTotal = seriesData.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, seriesData) || 0), 0);
-            return Math.min(0, minSubTotal);
-        }
-        return series.reduce((minValue, s) => {
-            // https://github.com/gravity-ui/charts/issues/160
-            // @ts-expect-error
-            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-            return Math.min(minValue, minYValue);
-        }, 0);
-    }
-    return undefined;
-}
 export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     const items = Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
@@ -151,6 +141,20 @@ export const getDomainDataYBySeries = (series) => {
     }, []);
     return Array.from(new Set(items));
 };
+export function getDefaultMinYAxisValue(series) {
+    if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
+        if (series.some((s) => s.type === SERIES_TYPE.Waterfall)) {
+            const seriesData = series.map((s) => s.data).flat();
+            const minSubTotal = seriesData.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, seriesData) || 0), 0);
+            return Math.min(0, minSubTotal);
+        }
+        const domainData = getDomainDataYBySeries(series);
+        return domainData.reduce((minValue, d) => {
+            return Math.min(minValue, d);
+        }, 0);
+    }
+    return undefined;
+}
 // Uses to get all series names array (except `pie` charts)
 export const getSeriesNames = (series) => {
     return series.reduce((acc, s) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",