@gravity-ui/charts 0.12.0 → 1.1.0

package/dist/cjs/components/Axis/AxisX.d.ts

@@ -8,6 +8,7 @@ type Props = {
     scale: ChartScale;
     split: PreparedSplit;
     plotRef?: React.MutableRefObject<SVGGElement | null>;
+    leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;

package/dist/cjs/components/Axis/AxisX.js

@@ -42,12 +42,23 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotRef } = props;
+    const { axis, width, height: totalHeight, scale, split, plotRef, leftmostLimit } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const plotClassName = b('plot-x');
+        let plotContainer = null;
+        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
+            plotContainer = select(plotRef.current);
+            plotContainer.selectAll(`.${plotClassName}`).remove();
+        }
+        if (!axis.visible) {
+            return;
+        }
         let tickItems = [];
         if (axis.grid.enabled) {
             tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
@@ -59,6 +70,7 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         const axisScale = scale;
         const xAxisGenerator = axisBottom({
+            leftmostLimit,
             scale: axisScale,
             ticks: {
                 items: tickItems,
@@ -77,8 +89,6 @@ export const AxisX = React.memo(function AxisX(props) {
                 color: axis.lineColor,
             },
         });
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
         svgElement.call(xAxisGenerator).attr('class', b());
         // add an axis header if necessary
         if (axis.title.text) {
@@ -105,15 +115,13 @@ export const AxisX = React.memo(function AxisX(props) {
             });
         }
         // add plot lines
-        if (plotRef && axis.plotLines.length > 0) {
+        if (plotContainer && axis.plotLines.length > 0) {
             const plotLineClassName = b('plotLine');
-            const plotLineContainer = select(plotRef.current);
-            plotLineContainer.selectAll(`.${plotLineClassName}-x`).remove();
-            const plotLinesSelection = plotLineContainer
+            const plotLinesSelection = plotContainer
                 .selectAll(`.${plotLineClassName}-x`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotLineClassName}-x`);
+                .attr('class', `${plotClassName} ${plotLineClassName}-x`);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -8,6 +8,7 @@ type Props = {
     height: number;
     split: PreparedSplit;
     plotRef?: React.MutableRefObject<SVGGElement | null>;
+    lowerLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Axis/AxisY.js

@@ -4,8 +4,11 @@ import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight,
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
-    const { node, axis } = args;
+    const { node, axis, isTopOffsetOverload = false } = args;
     let topOffset = axis.labels.lineHeight / 2;
+    if (isTopOffsetOverload) {
+        topOffset = 0;
+    }
     let leftOffset = axis.labels.margin;
     if (axis.position === 'left') {
         leftOffset = leftOffset * -1;
@@ -82,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, lowerLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -90,8 +93,15 @@ export const AxisY = (props) => {
         if (!ref.current) {
             return;
         }
+        const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        let plotContainer = null;
+        const plotClassName = b('plot-y');
+        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
+            plotContainer = select(plotRef.current);
+            plotContainer.selectAll(`.${plotClassName}`).remove();
+        }
         const getAxisPosition = (axis) => {
             var _a;
             const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
@@ -127,8 +137,8 @@ export const AxisY = (props) => {
             });
             yAxisGenerator(axisItem);
             if (d.labels.enabled) {
-                const tickTexts = axisItem
-                    .selectAll('.tick text')
+                const labels = axisItem.selectAll('.tick text');
+                const tickTexts = labels
                     // The offset must be applied before the labels are rotated.
                     // Therefore, we reset the values and make an offset in transform  attribute.
                     // FIXME: give up axisLeft(d3) and switch to our own generation method
@@ -138,6 +148,26 @@ export const AxisY = (props) => {
                     .style('transform', function () {
                     return transformLabel({ node: this, axis: d });
                 });
+                labels.each(function (_d, i) {
+                    if (i === 0) {
+                        const currentElement = this;
+                        const currentElementPosition = currentElement.getBoundingClientRect();
+                        const text = select(currentElement);
+                        if (currentElementPosition.bottom > lowerLimit) {
+                            const transform = transformLabel({
+                                node: this,
+                                axis: d,
+                                isTopOffsetOverload: true,
+                            });
+                            text.style('transform', transform);
+                            if (d.labels.rotation) {
+                                text.attr('text-anchor', () => {
+                                    return d.labels.rotation < 0 ? 'start' : 'end';
+                                });
+                            }
+                        }
+                    }
+                });
                 const textMaxWidth = !d.labels.rotation || Math.abs(d.labels.rotation) % 360 !== 90
                     ? d.labels.maxWidth
                     : (height - d.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
@@ -160,15 +190,13 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
-            if (plotRef && d.plotLines.length > 0) {
+            if (plotContainer && d.plotLines.length > 0) {
                 const plotLineClassName = b('plotLine');
-                const plotLineContainer = select(plotRef.current);
-                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
-                const plotLinesSelection = plotLineContainer
+                const plotLinesSelection = plotContainer
                     .selectAll(`.${plotLineClassName}`)
                     .data(plotLines)
                     .join('g')
-                    .attr('class', plotLineClassName)
+                    .attr('class', `${plotClassName} ${plotLineClassName}`)
                     .style('transform', (plotLine) => plotLine.transform);
                 plotLinesSelection
                     .append('path')
@@ -240,6 +268,6 @@ export const AxisY = (props) => {
                 handleOverflowingText(nodes[index], height);
             }
         });
-    }, [axes, width, height, scale, split]);
+    }, [allAxes, width, height, scale, split]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -17,7 +17,7 @@ export const ChartInner = (props) => {
     const htmlLayerRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current, svgContainer: svgRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -67,9 +67,9 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
+                    React.createElement(AxisY, { lowerLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
+                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {

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

@@ -4,8 +4,11 @@ import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
+    svgContainer: SVGGElement | null;
 };
 export declare function useChartInnerProps(props: Props): {
+    svgBottomPos: number | undefined;
+    svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;

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

@@ -4,7 +4,8 @@ import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
 export function useChartInnerProps(props) {
-    const { width, height, data, dispatcher, htmlLayout } = props;
+    var _a;
+    const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const { chart, title, tooltip } = useChartOptions({ data });
@@ -54,9 +55,19 @@ export function useChartInnerProps(props) {
         htmlLayout,
     });
     const boundsOffsetTop = chart.margin.top;
-    // We only need to consider the width of the first left axis
-    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    // We need to calculate the width of each axis because the first axis can be hidden
+    const boundsOffsetLeft = chart.margin.left +
+        yAxis.reduce((acc, axis) => {
+            const width = getYAxisWidth(axis);
+            if (acc < width) {
+                acc = width;
+            }
+            return acc;
+        }, 0);
+    const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
+        svgBottomPos: bottom,
+        svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
-import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 const b = block('tooltip');
@@ -12,23 +10,14 @@ const getRowData = (fieldName, data, axis) => {
             const categories = get(axis, 'categories', []);
             return getDataCategoryValue({ axisDirection: fieldName, categories, data });
         }
-        case 'datetime': {
-            const value = get(data, fieldName);
-            if (!value) {
-                return undefined;
-            }
-            return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
-        }
-        case 'linear':
         default: {
-            const value = get(data, fieldName);
-            return formatNumber(value);
+            return get(data, fieldName);
         }
     }
 };
 const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
-const getMeasureValue = (data, xAxis, yAxis) => {
+const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
     var _a, _b, _c, _d;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
@@ -37,12 +26,38 @@ const getMeasureValue = (data, xAxis, yAxis) => {
         return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
+        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
+        return getFormattedValue({
+            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
+            format,
+        });
     }
-    return getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis);
+    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
+    return getFormattedValue({
+        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
+        format,
+    });
 };
+function getDefaultValueFormat({ axis }) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'linear':
+        case 'logarithmic': {
+            return {
+                type: 'number',
+            };
+        }
+        case 'datetime': {
+            return {
+                type: 'date',
+                format: DEFAULT_DATE_FORMAT,
+            };
+        }
+        default:
+            return undefined;
+    }
+}
 export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
-    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
+    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
         hovered.map((seriesItem, i) => {
@@ -55,9 +70,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 case 'line':
                 case 'area':
                 case 'bar-x': {
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const formattedValue = getFormattedValue({
                         value: getYRowData(data, yAxis),
-                        format: valueFormat,
+                        format,
                     });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
@@ -70,13 +86,14 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
                     const subTotalValue = getWaterfallPointSubtotal(data, series);
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const subTotal = getFormattedValue({
                         value: subTotalValue,
-                        format: valueFormat,
+                        format,
                     });
                     const formattedValue = getFormattedValue({
                         value: getYRowData(data, yAxis),
-                        format: valueFormat,
+                        format,
                     });
                     return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
                         !isTotal && (React.createElement(React.Fragment, null,
@@ -93,9 +110,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             subTotal)));
                 }
                 case 'bar-y': {
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
                     const formattedValue = getFormattedValue({
                         value: getXRowData(data, xAxis),
-                        format: valueFormat,
+                        format,
                     });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
@@ -110,7 +128,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const seriesData = data;
                     const formattedValue = getFormattedValue({
                         value: seriesData.value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
@@ -124,7 +142,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
                     const formattedValue = getFormattedValue({
                         value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
@@ -142,7 +160,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const seriesData = data;
                     const formattedValue = getFormattedValue({
                         value: seriesData.value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     const value = (React.createElement(React.Fragment, null,
                         React.createElement("span", null,

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

@@ -8,6 +8,9 @@ const getBottomOffset = (args) => {
     if (preparedLegend.enabled) {
         result += preparedLegend.height + preparedLegend.margin;
     }
+    if (!preparedXAxis.visible) {
+        return result;
+    }
     if (hasAxisRelatedSeries) {
         if (preparedXAxis.title.text) {
             result += preparedXAxis.title.height + preparedXAxis.title.margin;

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

@@ -6,6 +6,9 @@ export const getBoundsWidth = (args) => {
         getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }));
 };
 export function getYAxisWidth(axis) {
+    if (!(axis === null || axis === void 0 ? void 0 : axis.visible)) {
+        return 0;
+    }
     let result = 0;
     if (axis === null || axis === void 0 ? void 0 : axis.title.text) {
         result += axis.title.height + axis.title.margin;

package/dist/cjs/hooks/useChartOptions/x-axis.js

@@ -110,6 +110,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
+        visible: get(xAxis, 'visible', true),
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/dist/cjs/hooks/useChartOptions/y-axis.js

@@ -116,6 +116,7 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
             })),
+            visible: get(axisItem, 'visible', true),
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });

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

@@ -4,35 +4,47 @@ import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareWaterfallSeries(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colorScale, series: seriesList, legend } = args;
     const [, negativeColor, positiveColor] = DEFAULT_PALETTE;
-    return seriesList.map((series) => {
-        var _a, _b, _c, _d;
-        const name = series.name || '';
-        const color = series.color || colorScale(name);
-        const prepared = {
-            type: series.type,
-            color,
-            positiveColor: positiveColor,
-            negativeColor: negativeColor,
-            name,
-            id: getUniqId(),
-            visible: get(series, 'visible', true),
-            legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
-            },
-            data: series.data,
-            dataLabels: {
-                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
-                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
-                allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
-                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
-                html: get(series, 'dataLabels.html', false),
-                format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
-            },
-            cursor: get(series, 'cursor', null),
-        };
-        return prepared;
+    const series = seriesList[0];
+    const common = {
+        id: '',
+        color: seriesList[0].color || colorScale(seriesList[0].name),
+        type: series.type,
+        name: series.name,
+        visible: get(series, 'visible', true),
+        legend: {
+            enabled: get(series, 'legend.enabled', legend.enabled),
+            symbol: prepareLegendSymbol(series),
+        },
+        dataLabels: {
+            enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || true,
+            style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
+            allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
+            padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+            html: get(series, 'dataLabels.html', false),
+            format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
+        },
+        cursor: get(series, 'cursor', null),
+        data: [],
+    };
+    const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
+    const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
+    const totals = Object.assign(Object.assign({}, common), { name: (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.totals) !== null && _o !== void 0 ? _o : series.name, id: getUniqId(), data: [] });
+    series.data.forEach((d, index) => {
+        var _a;
+        const value = (_a = d === null || d === void 0 ? void 0 : d.y) !== null && _a !== void 0 ? _a : 0;
+        const dataItem = Object.assign(Object.assign({}, d), { index });
+        if (d === null || d === void 0 ? void 0 : d.total) {
+            totals.data.push(dataItem);
+        }
+        else if (value > 0) {
+            positive.data.push(dataItem);
+        }
+        else if (value < 0) {
+            negative.data.push(dataItem);
+        }
     }, []);
+    return [positive, negative, totals];
 }

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

@@ -243,9 +243,12 @@ export type PreparedTreemapSeries = {
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+export type PreparedWaterfallSeriesData = WaterfallSeriesData & {
+    index: number;
+};
 export type PreparedWaterfallSeries = {
     type: WaterfallSeries['type'];
-    data: WaterfallSeriesData[];
+    data: PreparedWaterfallSeriesData[];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;
@@ -254,8 +257,6 @@ export type PreparedWaterfallSeries = {
         html: boolean;
         format?: ValueFormat;
     };
-    positiveColor: string;
-    negativeColor: string;
 } & BasePreparedSeries;
 export type PreparedSankeySeries = {
     type: SankeySeries['type'];

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

@@ -5,10 +5,12 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(d, plotHeight) {
+    var _a, _b;
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = getFormattedValue(Object.assign({ value: d.data.label || d.subTotal }, d.series.dataLabels));
+    const labelValue = (_b = (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y) !== null && _b !== void 0 ? _b : d.subTotal;
+    const text = getFormattedValue(Object.assign({ value: labelValue }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
     let y;
@@ -60,7 +62,7 @@ export const prepareWaterfallData = (args) => {
         acc.push(...s.data.map((d) => ({ data: d, series: s })));
         return acc;
     }, []);
-    const data = sortBy(flattenData, (d) => d.data.x);
+    const data = sortBy(flattenData, (d) => d.data.index);
     const bandWidth = getBandWidth({
         series,
         xAxis,

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

@@ -75,6 +75,8 @@ export interface ChartAxis {
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
+    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    visible?: boolean;
 }
 export interface ChartXAxis extends ChartAxis {
 }

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

@@ -36,5 +36,14 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     /** Individual series legend options. Has higher priority than legend options in widget data. */
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
+        /** The legend item text for positive, negative values and totals. */
+        itemText?: {
+            /** The legend item text for positive values. */
+            positive?: string;
+            /** The legend item text for negative values. */
+            negative?: string;
+            /** The legend item text for totals. */
+            totals?: string;
+        };
     };
 }

package/dist/cjs/utils/chart/axis-generators/bottom.d.ts

@@ -19,6 +19,7 @@ type AxisBottomArgs = {
         size: number;
         color?: string;
     };
+    leftmostLimit?: number;
 };
 export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
 export {};

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -16,7 +16,7 @@ function addDomain(selection, options) {
     }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
+    const { leftmostLimit = 0, scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -103,6 +103,21 @@ export function axisBottom(args) {
                 .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
             labels.each(function (_d, i, nodes) {
+                if (i === 0) {
+                    const currentElement = this;
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const nextElement = nodes[i + 1];
+                    const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
+                    if (currentElementPosition.left < leftmostLimit) {
+                        const remainSpace = nextElementPosition.left -
+                            currentElementPosition.right +
+                            x -
+                            labelsMargin;
+                        text.attr('text-anchor', 'start');
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
                 if (i === nodes.length - 1) {
                     const currentElement = this;
                     const prevElement = nodes[i - 1];