@gravity-ui/charts 1.40.0 → 1.41.0

package/README.md

@@ -1,31 +1,11 @@
-# Gravity UI Charts
+# Gravity UI Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![License](https://img.shields.io/github/license/gravity-ui/charts)](LICENSE) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
-A flexible JavaScript library for data visualization and chart rendering using React.
-
-[![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
+React charting library with 10+ chart types: area, bar, line, pie, scatter, treemap, and more.
 
 ## Documentation
 
 - [Overview](https://gravity-ui.github.io/charts/pages/overview.html)
+- [Get started](https://gravity-ui.github.io/charts/pages/get-started.html)
+- [Development](https://gravity-ui.github.io/charts/pages/development.html)
 - [API](https://gravity-ui.github.io/charts/pages/api/overview.html)
 - [Guides](https://gravity-ui.github.io/charts/pages/guides/tooltip.html)
-
-## Get started
-
-### Install
-
-```shell
-npm install @gravity-ui/uikit @gravity-ui/charts
-```
-
-### Development
-
-To start the development server with storybook run the following:
-
-```shell
-npm run start
-```
-
-## Contributing
-
-Please refer to the [contributing document](https://github.com/gravity-ui/charts/blob/main/CONTRIBUTING.md) if you wish to make pull requests.

package/dist/cjs/components/Tooltip/DefaultTooltipContent/Row.js

@@ -12,8 +12,8 @@ export function Row(props) {
         }
         return null;
     }, [color, colorSymbol]);
-    return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
-        colorItem,
-        React.createElement("span", { className: b('content-row-label') }, label),
-        value && React.createElement("span", { className: b('content-row-value') }, value)));
+    return (React.createElement("tr", { className: b('content-row', { active, striped }, className), style: style },
+        colorItem && React.createElement("td", { className: b('content-row-color-cell') }, colorItem),
+        React.createElement("td", { className: b('content-row-label-cell') }, label),
+        value && React.createElement("td", { className: b('content-row-value-cell') }, value)));
 }

package/dist/cjs/components/Tooltip/DefaultTooltipContent/RowWithAggregation.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { block } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { Row } from './Row';
 import { getBuiltInAggregatedValue, getBuiltInAggregationLabel } from './utils';
 const b = block('tooltip');
 export function RowWithAggregation(props) {
@@ -19,5 +18,7 @@ export function RowWithAggregation(props) {
             format: valueFormat || { type: 'number' },
         })
         : resultValue;
-    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, style: style, value: formattedResultValue }));
+    return (React.createElement("div", { className: b('content-row', { totals: true }), style: style },
+        React.createElement("span", { className: b('content-row-totals-label') }, resultLabel),
+        formattedResultValue && (React.createElement("span", { className: b('content-row-totals-value') }, formattedResultValue))));
 }

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Divider } from '@gravity-ui/uikit';
+import parse from 'html-react-parser';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { usePrevious } from '../../../hooks';
@@ -35,7 +36,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                 hovered,
             });
             if (typeof result === 'string') {
-                return React.createElement("div", { key: id, dangerouslySetInnerHTML: { __html: result } });
+                return React.createElement(React.Fragment, { key: id }, parse(result));
             }
             return result;
         }
@@ -75,127 +76,136 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
             setScrollBarWidth(0);
         }
     }, [pinned]);
+    const rowsContent = (React.createElement(React.Fragment, null, visibleHovered.map((seriesItem, i) => {
+        var _a;
+        const { data, series, closest } = seriesItem;
+        const id = `${get(series, 'id')}_${i}`;
+        const color = get(data, 'color') || get(series, 'color');
+        // TODO: improve active item display https://github.com/gravity-ui/charts/issues/208
+        const active = closest && hovered.length > 1;
+        const striped = (i + 1) % 2 === 0;
+        const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
+        switch (series.type) {
+            case 'scatter':
+            case 'line':
+            case 'area':
+            case 'bar-x': {
+                const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue,
+                    series,
+                });
+            }
+            case 'waterfall': {
+                const isTotal = get(data, 'total', false);
+                const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
+                const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                const subTotal = getFormattedValue({
+                    value: subTotalValue,
+                    format,
+                });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return (React.createElement(React.Fragment, { key: id },
+                    !isTotal && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
+                        React.createElement(Row, { label: series.name, value: formattedValue }))),
+                    React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
+            }
+            case 'bar-y': {
+                const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'pie':
+            case 'heatmap':
+            case 'treemap':
+            case 'funnel': {
+                const seriesData = data;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    name: [seriesData.name || seriesData.id].flat().join('\n'),
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'sankey': {
+                const { target, data: source } = seriesItem;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'radar': {
+                const radarSeries = series;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    active,
+                    name: radarSeries.name || radarSeries.id,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            default: {
+                return null;
+            }
+        }
+    })));
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name') },
             React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: pinned ? { maxHeight: maxContentRowsHeight } : undefined },
-            visibleHovered.map((seriesItem, i) => {
-                var _a;
-                const { data, series, closest } = seriesItem;
-                const id = `${get(series, 'id')}_${i}`;
-                const color = get(data, 'color') || get(series, 'color');
-                // TODO: improve action item display https://github.com/gravity-ui/charts/issues/208
-                const active = closest && hovered.length > 1;
-                const striped = (i + 1) % 2 === 0;
-                const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
-                switch (series.type) {
-                    case 'scatter':
-                    case 'line':
-                    case 'area':
-                    case 'bar-x': {
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return renderRow({
-                            id,
-                            active,
-                            color,
-                            name: series.name,
-                            striped,
-                            value: hoveredValues[i],
-                            formattedValue,
-                            series,
-                        });
-                    }
-                    case 'waterfall': {
-                        const isTotal = get(data, 'total', false);
-                        const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
-                        const subTotal = getFormattedValue({
-                            value: subTotalValue,
-                            format,
-                        });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return (React.createElement(React.Fragment, { key: id },
-                            !isTotal && (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
-                                React.createElement(Row, { label: series.name, value: formattedValue }))),
-                            React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
-                    }
-                    case 'bar-y': {
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return renderRow({
-                            id,
-                            active,
-                            color,
-                            name: series.name,
-                            striped,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'pie':
-                    case 'heatmap':
-                    case 'treemap':
-                    case 'funnel': {
-                        const seriesData = data;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            name: [seriesData.name || seriesData.id].flat().join('\n'),
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'sankey': {
-                        const { target, data: source } = seriesItem;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'radar': {
-                        const radarSeries = series;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            active,
-                            name: radarSeries.name || radarSeries.id,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    default: {
-                        return null;
-                    }
-                }
-            }),
-            Boolean(restHoveredValues.length) && (React.createElement(Row, { label: i18n('tooltip', 'label_more', { count: restHoveredValues.length }), striped: (visibleHovered.length + 1) % 2 === 0 }))),
+            React.createElement("table", { className: b('content-rows-table') },
+                React.createElement("tbody", null, rowsContent))),
+        Boolean(restHoveredValues.length) && (React.createElement("div", { className: b('content-row', {
+                striped: (visibleHovered.length + 1) % 2 === 0,
+            }) }, i18n('tooltip', 'label_more', { count: restHoveredValues.length }))),
         (totals === null || totals === void 0 ? void 0 : totals.enabled) && hovered.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(Divider, { className: b('content-row-totals-divider') }),
-            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
+            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({
+                    hovered,
+                    totals,
+                    xAxis,
+                    yAxis,
+                }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
 };

package/dist/cjs/components/Tooltip/styles.css

@@ -3,8 +3,12 @@
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
+tr.gcharts-tooltip__content-row {
+  display: table-row;
+  padding: 0;
+}
+
 .gcharts-tooltip__popup-content {
-  max-width: 450px;
   text-wrap: nowrap;
   border-radius: 4px;
 }
@@ -20,7 +24,13 @@
 .gcharts-tooltip__content-rows_pinned {
   overflow: auto;
 }
+.gcharts-tooltip__content-rows-table {
+  width: 100%;
+  padding: 0;
+  border-collapse: collapse;
+}
 .gcharts-tooltip__series-name {
+  max-width: 450px;
   padding: 2px 14px 6px;
   font-size: 13px;
   font-weight: 600;
@@ -45,8 +55,23 @@
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
-.gcharts-tooltip__content-row-label {
+.gcharts-tooltip__content-row_totals {
+  color: var(--g-color-text-complementary);
+}
+.gcharts-tooltip__content-row-totals-label {
   overflow: hidden;
+  max-width: 400px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.gcharts-tooltip__content-row-totals-value {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.gcharts-tooltip__content-row-label-cell {
+  overflow: hidden;
+  max-width: 400px;
+  padding: 2px 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -58,12 +83,13 @@
   border-radius: 2px;
   background-color: #dddddd;
 }
-.gcharts-tooltip__content-row-value {
-  flex-shrink: 0;
-  margin-inline-start: auto;
+.gcharts-tooltip__content-row-color-cell {
+  width: 16px;
+  padding: 2px 4px 2px 14px;
 }
-.gcharts-tooltip__content-row-totals {
-  color: var(--g-color-text-complementary);
+.gcharts-tooltip__content-row-value-cell {
+  padding: 2px 14px 2px 4px;
+  text-align: end;
 }
 .gcharts-tooltip__content-row-totals-divider {
   margin-block: 5px 5px;

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ChartData } from '../types';
 export * from './Tooltip/ChartTooltipContent';
+export interface ChartReflowOptions {
+    immediate?: boolean;
+}
 export interface ChartRef {
-    reflow: () => void;
+    reflow: (options?: ChartReflowOptions) => void;
 }
 export interface ChartDimentions {
     height: number;

package/dist/cjs/components/index.js

@@ -30,10 +30,15 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
         return debounced.current;
     }, [handleResize]);
     React.useImperativeHandle(forwardedRef, () => ({
-        reflow() {
-            debuncedHandleResize();
+        reflow(options) {
+            if (options === null || options === void 0 ? void 0 : options.immediate) {
+                handleResize();
+            }
+            else {
+                debuncedHandleResize();
+            }
         },
-    }), [debuncedHandleResize]);
+    }), [debuncedHandleResize, handleResize]);
     React.useEffect(() => {
         // dimensions initialize
         handleResize();

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

@@ -162,6 +162,7 @@ export const prepareBarXData = async (args) => {
                             : yAxisTop + base + negativeStackHeight,
                         width: rectWidth,
                         height: shapeHeight,
+                        _height: height,
                         opacity: get(yValue.data, 'opacity', null),
                         data: yValue.data,
                         series: yValue.series,
@@ -178,9 +179,9 @@ export const prepareBarXData = async (args) => {
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (positiveStackHeight - (stackItems.length - 1) * stackGap);
+                    const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
-                        item.height = item.height * ratio;
+                        item.height = item._height * ratio;
                         item.y = plotHeight - item.height - acc;
                         acc += item.height + 1;
                     });

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

@@ -10,4 +10,9 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     label?: LabelData;
     htmlElements: HtmlItem[];
     isLastStackItem: boolean;
+    /**
+     * the utility field for storing the original height (for recalculations, etc.)
+     * should not be used for displaying
+     */
+    _height: number;
 };

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

@@ -113,6 +113,10 @@ export type ChartTooltipRowRendererArgs = {
     value: string | number | null | undefined;
     formattedValue?: string;
     hovered?: TooltipDataChunk<unknown>[];
+    /**
+     * CSS class name pre-built with active/striped modifiers.
+     * Apply it to the root `<tr>` element of the returned row: `<tr className={className}>`.
+     */
     className?: string;
 };
 export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk<T>, b: TooltipDataChunk<T>) => number;
@@ -123,7 +127,26 @@ export interface ChartTooltip<T = MeaningfulAny> {
     /**
      * Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
      * It is useful in cases where you need to display additional information, but keep the general format of the tooltip.
-     * If a string is returned, it will be interpreted as raw HTML and inserted without escaping.
+     *
+     * The returned React element must be a `<tr>` so that it fits into the table layout used by the tooltip.
+     * Apply the `className` arg to the root `<tr>` to get the correct active/striped styles.
+     *
+     * If a string is returned, it will be parsed as HTML and rendered as-is — the string must be a complete
+     * `<tr>...</tr>` element.
+     * @example React element
+     * ```tsx
+     * rowRenderer: ({id, name, value, className}) => (
+     *   <tr key={id} className={className}>
+     *     <td>{name}</td>
+     *     <td>{value}</td>
+     *   </tr>
+     * )
+     * ```
+     * @example Raw HTML string
+     * ```ts
+     * rowRenderer: ({name, value, className}) =>
+     *   `<tr class="${className}"><td>${name}</td><td>${value}</td></tr>`
+     * ```
      */
     rowRenderer?: ((args: ChartTooltipRowRendererArgs) => React.ReactElement | string) | null;
     pin?: {

package/dist/esm/components/Tooltip/DefaultTooltipContent/Row.js

@@ -12,8 +12,8 @@ export function Row(props) {
         }
         return null;
     }, [color, colorSymbol]);
-    return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
-        colorItem,
-        React.createElement("span", { className: b('content-row-label') }, label),
-        value && React.createElement("span", { className: b('content-row-value') }, value)));
+    return (React.createElement("tr", { className: b('content-row', { active, striped }, className), style: style },
+        colorItem && React.createElement("td", { className: b('content-row-color-cell') }, colorItem),
+        React.createElement("td", { className: b('content-row-label-cell') }, label),
+        value && React.createElement("td", { className: b('content-row-value-cell') }, value)));
 }

package/dist/esm/components/Tooltip/DefaultTooltipContent/RowWithAggregation.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { block } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { Row } from './Row';
 import { getBuiltInAggregatedValue, getBuiltInAggregationLabel } from './utils';
 const b = block('tooltip');
 export function RowWithAggregation(props) {
@@ -19,5 +18,7 @@ export function RowWithAggregation(props) {
             format: valueFormat || { type: 'number' },
         })
         : resultValue;
-    return (React.createElement(Row, { className: b('content-row-totals'), label: resultLabel, style: style, value: formattedResultValue }));
+    return (React.createElement("div", { className: b('content-row', { totals: true }), style: style },
+        React.createElement("span", { className: b('content-row-totals-label') }, resultLabel),
+        formattedResultValue && (React.createElement("span", { className: b('content-row-totals-value') }, formattedResultValue))));
 }

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Divider } from '@gravity-ui/uikit';
+import parse from 'html-react-parser';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import { usePrevious } from '../../../hooks';
@@ -35,7 +36,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                 hovered,
             });
             if (typeof result === 'string') {
-                return React.createElement("div", { key: id, dangerouslySetInnerHTML: { __html: result } });
+                return React.createElement(React.Fragment, { key: id }, parse(result));
             }
             return result;
         }
@@ -75,127 +76,136 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
             setScrollBarWidth(0);
         }
     }, [pinned]);
+    const rowsContent = (React.createElement(React.Fragment, null, visibleHovered.map((seriesItem, i) => {
+        var _a;
+        const { data, series, closest } = seriesItem;
+        const id = `${get(series, 'id')}_${i}`;
+        const color = get(data, 'color') || get(series, 'color');
+        // TODO: improve active item display https://github.com/gravity-ui/charts/issues/208
+        const active = closest && hovered.length > 1;
+        const striped = (i + 1) % 2 === 0;
+        const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
+        switch (series.type) {
+            case 'scatter':
+            case 'line':
+            case 'area':
+            case 'bar-x': {
+                const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue,
+                    series,
+                });
+            }
+            case 'waterfall': {
+                const isTotal = get(data, 'total', false);
+                const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
+                const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
+                const subTotal = getFormattedValue({
+                    value: subTotalValue,
+                    format,
+                });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return (React.createElement(React.Fragment, { key: id },
+                    !isTotal && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
+                        React.createElement(Row, { label: series.name, value: formattedValue }))),
+                    React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
+            }
+            case 'bar-y': {
+                const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format,
+                });
+                return renderRow({
+                    id,
+                    active,
+                    color,
+                    name: series.name,
+                    striped,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'pie':
+            case 'heatmap':
+            case 'treemap':
+            case 'funnel': {
+                const seriesData = data;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    name: [seriesData.name || seriesData.id].flat().join('\n'),
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'sankey': {
+                const { target, data: source } = seriesItem;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            case 'radar': {
+                const radarSeries = series;
+                const formattedValue = getFormattedValue({
+                    value: hoveredValues[i],
+                    format: rowValueFormat || { type: 'number' },
+                });
+                return renderRow({
+                    id,
+                    color,
+                    active,
+                    name: radarSeries.name || radarSeries.id,
+                    value: hoveredValues[i],
+                    formattedValue,
+                });
+            }
+            default: {
+                return null;
+            }
+        }
+    })));
     return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name') },
             React.createElement("div", { className: b('series-name-text'), dangerouslySetInnerHTML: { __html: formattedHeadValue } }))),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: pinned ? { maxHeight: maxContentRowsHeight } : undefined },
-            visibleHovered.map((seriesItem, i) => {
-                var _a;
-                const { data, series, closest } = seriesItem;
-                const id = `${get(series, 'id')}_${i}`;
-                const color = get(data, 'color') || get(series, 'color');
-                // TODO: improve action item display https://github.com/gravity-ui/charts/issues/208
-                const active = closest && hovered.length > 1;
-                const striped = (i + 1) % 2 === 0;
-                const rowValueFormat = get(series, 'tooltip.valueFormat', valueFormat);
-                switch (series.type) {
-                    case 'scatter':
-                    case 'line':
-                    case 'area':
-                    case 'bar-x': {
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return renderRow({
-                            id,
-                            active,
-                            color,
-                            name: series.name,
-                            striped,
-                            value: hoveredValues[i],
-                            formattedValue,
-                            series,
-                        });
-                    }
-                    case 'waterfall': {
-                        const isTotal = get(data, 'total', false);
-                        const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: yAxis });
-                        const subTotal = getFormattedValue({
-                            value: subTotalValue,
-                            format,
-                        });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return (React.createElement(React.Fragment, { key: id },
-                            !isTotal && (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: b('series-name') }, getXRowData(data, xAxis)),
-                                React.createElement(Row, { label: series.name, value: formattedValue }))),
-                            React.createElement(Row, { label: isTotal ? 'Total' : 'Subtotal', value: subTotal })));
-                    }
-                    case 'bar-y': {
-                        const format = rowValueFormat || getDefaultValueFormat({ axis: xAxis });
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format,
-                        });
-                        return renderRow({
-                            id,
-                            active,
-                            color,
-                            name: series.name,
-                            striped,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'pie':
-                    case 'heatmap':
-                    case 'treemap':
-                    case 'funnel': {
-                        const seriesData = data;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            name: [seriesData.name || seriesData.id].flat().join('\n'),
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'sankey': {
-                        const { target, data: source } = seriesItem;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            name: `${source.name} → ${target === null || target === void 0 ? void 0 : target.name}`,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    case 'radar': {
-                        const radarSeries = series;
-                        const formattedValue = getFormattedValue({
-                            value: hoveredValues[i],
-                            format: rowValueFormat || { type: 'number' },
-                        });
-                        return renderRow({
-                            id,
-                            color,
-                            active,
-                            name: radarSeries.name || radarSeries.id,
-                            value: hoveredValues[i],
-                            formattedValue,
-                        });
-                    }
-                    default: {
-                        return null;
-                    }
-                }
-            }),
-            Boolean(restHoveredValues.length) && (React.createElement(Row, { label: i18n('tooltip', 'label_more', { count: restHoveredValues.length }), striped: (visibleHovered.length + 1) % 2 === 0 }))),
+            React.createElement("table", { className: b('content-rows-table') },
+                React.createElement("tbody", null, rowsContent))),
+        Boolean(restHoveredValues.length) && (React.createElement("div", { className: b('content-row', {
+                striped: (visibleHovered.length + 1) % 2 === 0,
+            }) }, i18n('tooltip', 'label_more', { count: restHoveredValues.length }))),
         (totals === null || totals === void 0 ? void 0 : totals.enabled) && hovered.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(Divider, { className: b('content-row-totals-divider') }),
-            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({ hovered, totals, xAxis, yAxis }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
+            React.createElement(RowWithAggregation, { aggregation: getPreparedAggregation({
+                    hovered,
+                    totals,
+                    xAxis,
+                    yAxis,
+                }), label: totals.label, style: { marginRight: scrollBarWidth }, values: hoveredValues, valueFormat: (_a = totals.valueFormat) !== null && _a !== void 0 ? _a : valueFormat })))));
 };

package/dist/esm/components/Tooltip/styles.css

@@ -3,8 +3,12 @@
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
+tr.gcharts-tooltip__content-row {
+  display: table-row;
+  padding: 0;
+}
+
 .gcharts-tooltip__popup-content {
-  max-width: 450px;
   text-wrap: nowrap;
   border-radius: 4px;
 }
@@ -20,7 +24,13 @@
 .gcharts-tooltip__content-rows_pinned {
   overflow: auto;
 }
+.gcharts-tooltip__content-rows-table {
+  width: 100%;
+  padding: 0;
+  border-collapse: collapse;
+}
 .gcharts-tooltip__series-name {
+  max-width: 450px;
   padding: 2px 14px 6px;
   font-size: 13px;
   font-weight: 600;
@@ -45,8 +55,23 @@
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
-.gcharts-tooltip__content-row-label {
+.gcharts-tooltip__content-row_totals {
+  color: var(--g-color-text-complementary);
+}
+.gcharts-tooltip__content-row-totals-label {
   overflow: hidden;
+  max-width: 400px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.gcharts-tooltip__content-row-totals-value {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.gcharts-tooltip__content-row-label-cell {
+  overflow: hidden;
+  max-width: 400px;
+  padding: 2px 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -58,12 +83,13 @@
   border-radius: 2px;
   background-color: #dddddd;
 }
-.gcharts-tooltip__content-row-value {
-  flex-shrink: 0;
-  margin-inline-start: auto;
+.gcharts-tooltip__content-row-color-cell {
+  width: 16px;
+  padding: 2px 4px 2px 14px;
 }
-.gcharts-tooltip__content-row-totals {
-  color: var(--g-color-text-complementary);
+.gcharts-tooltip__content-row-value-cell {
+  padding: 2px 14px 2px 4px;
+  text-align: end;
 }
 .gcharts-tooltip__content-row-totals-divider {
   margin-block: 5px 5px;

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ChartData } from '../types';
 export * from './Tooltip/ChartTooltipContent';
+export interface ChartReflowOptions {
+    immediate?: boolean;
+}
 export interface ChartRef {
-    reflow: () => void;
+    reflow: (options?: ChartReflowOptions) => void;
 }
 export interface ChartDimentions {
     height: number;

package/dist/esm/components/index.js

@@ -30,10 +30,15 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
         return debounced.current;
     }, [handleResize]);
     React.useImperativeHandle(forwardedRef, () => ({
-        reflow() {
-            debuncedHandleResize();
+        reflow(options) {
+            if (options === null || options === void 0 ? void 0 : options.immediate) {
+                handleResize();
+            }
+            else {
+                debuncedHandleResize();
+            }
         },
-    }), [debuncedHandleResize]);
+    }), [debuncedHandleResize, handleResize]);
     React.useEffect(() => {
         // dimensions initialize
         handleResize();

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

@@ -162,6 +162,7 @@ export const prepareBarXData = async (args) => {
                             : yAxisTop + base + negativeStackHeight,
                         width: rectWidth,
                         height: shapeHeight,
+                        _height: height,
                         opacity: get(yValue.data, 'opacity', null),
                         data: yValue.data,
                         series: yValue.series,
@@ -178,9 +179,9 @@ export const prepareBarXData = async (args) => {
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (positiveStackHeight - (stackItems.length - 1) * stackGap);
+                    const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
-                        item.height = item.height * ratio;
+                        item.height = item._height * ratio;
                         item.y = plotHeight - item.height - acc;
                         acc += item.height + 1;
                     });

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

@@ -10,4 +10,9 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     label?: LabelData;
     htmlElements: HtmlItem[];
     isLastStackItem: boolean;
+    /**
+     * the utility field for storing the original height (for recalculations, etc.)
+     * should not be used for displaying
+     */
+    _height: number;
 };

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

@@ -113,6 +113,10 @@ export type ChartTooltipRowRendererArgs = {
     value: string | number | null | undefined;
     formattedValue?: string;
     hovered?: TooltipDataChunk<unknown>[];
+    /**
+     * CSS class name pre-built with active/striped modifiers.
+     * Apply it to the root `<tr>` element of the returned row: `<tr className={className}>`.
+     */
     className?: string;
 };
 export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk<T>, b: TooltipDataChunk<T>) => number;
@@ -123,7 +127,26 @@ export interface ChartTooltip<T = MeaningfulAny> {
     /**
      * Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
      * It is useful in cases where you need to display additional information, but keep the general format of the tooltip.
-     * If a string is returned, it will be interpreted as raw HTML and inserted without escaping.
+     *
+     * The returned React element must be a `<tr>` so that it fits into the table layout used by the tooltip.
+     * Apply the `className` arg to the root `<tr>` to get the correct active/striped styles.
+     *
+     * If a string is returned, it will be parsed as HTML and rendered as-is — the string must be a complete
+     * `<tr>...</tr>` element.
+     * @example React element
+     * ```tsx
+     * rowRenderer: ({id, name, value, className}) => (
+     *   <tr key={id} className={className}>
+     *     <td>{name}</td>
+     *     <td>{value}</td>
+     *   </tr>
+     * )
+     * ```
+     * @example Raw HTML string
+     * ```ts
+     * rowRenderer: ({name, value, className}) =>
+     *   `<tr class="${className}"><td>${name}</td><td>${value}</td></tr>`
+     * ```
      */
     rowRenderer?: ((args: ChartTooltipRowRendererArgs) => React.ReactElement | string) | null;
     pin?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -73,6 +73,7 @@
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "d3-selection": "^3.0.0",
+    "html-react-parser": "^5.2.17",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"
   },