@gravity-ui/charts 1.29.0 → 1.30.1

package/README.md

@@ -1,15 +1,31 @@
-# Gravity UI Charts · [![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/)
+# Gravity UI Charts
 
-## Install
+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/)
+
+## Documentation
+
+- [Overview](https://gravity-ui.github.io/charts/pages/overview.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
+### 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/AxisX/prepare-axis-data.js

@@ -251,7 +251,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
-                y: 0,
+                y: axisTop,
                 width: plotBandWidth,
                 height: axisHeight,
                 color: plotBand.color,
@@ -294,7 +294,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             plotLines.push({
                 layerPlacement: plotLine.layerPlacement,
                 x: 0,
-                y: 0,
+                y: axisTop,
                 width: axisWidth,
                 color: plotLine.color,
                 opacity: plotLine.opacity,

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

@@ -1,4 +1,5 @@
 import { pointer } from 'd3';
+import get from 'lodash/get';
 import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
@@ -16,9 +17,10 @@ export function useChartInnerHandlers(props) {
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
             return;
         }
+        const shapesDataWithTooltipEnabled = shapesData.filter((d) => get(d, 'series.tooltip.enabled', true));
         const closest = getClosestPoints({
             position: [x, y],
-            shapesData,
+            shapesData: shapesDataWithTooltipEnabled,
             boundsHeight,
             boundsWidth,
         });

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
+import { scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
+import { appendLinePathElement } from '../utils';
 import './styles.css';
 const b = block('legend');
 const getLegendItemLeftPosition = (args) => {
@@ -64,9 +65,6 @@ const appendPaginator = (args) => {
     });
     paginationLine.attr('transform', transform);
 };
-const legendSymbolGenerator = lineGenerator()
-    .x((d) => d.x)
-    .y((d) => d.y);
 function renderLegendSymbol(args) {
     const { selection, legend, legendLineHeight } = args;
     const line = selection.data();
@@ -86,21 +84,16 @@ function renderLegendSymbol(args) {
         const color = d.visible ? d.color : '';
         switch (d.symbol.shape) {
             case 'path': {
-                const y = legendLineHeight / 2;
-                const points = [
-                    { x, y },
-                    { x: x + d.symbol.width, y },
-                ];
-                element
-                    .append('path')
-                    .attr('d', legendSymbolGenerator(points))
-                    .attr('fill', 'none')
-                    .attr('stroke-width', d.symbol.strokeWidth)
-                    .attr('class', className)
-                    .style('stroke', color);
-                if (d.dashStyle) {
-                    element.attr('stroke-dasharray', getLineDashArray(d.dashStyle, d.symbol.strokeWidth));
-                }
+                appendLinePathElement({
+                    svgRootElement: element.node(),
+                    x,
+                    height: legendLineHeight,
+                    width: d.symbol.width,
+                    color,
+                    className,
+                    dashStyle: d.dashStyle,
+                    lineWidth: d.symbol.strokeWidth,
+                });
                 break;
             }
             case 'rect': {

package/dist/cjs/components/Tooltip/DefaultTooltipContent/Row.d.ts

@@ -4,6 +4,7 @@ export declare function Row(props: {
     active?: boolean;
     className?: string;
     color?: string;
+    colorSymbol?: React.ReactNode;
     striped?: boolean;
     style?: React.CSSProperties;
     value?: React.ReactNode;

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

@@ -2,9 +2,18 @@ import React from 'react';
 import { block } from '../../../utils';
 const b = block('tooltip');
 export function Row(props) {
-    const { label, value, active, color, className, striped, style } = props;
+    const { label, value, active, color, colorSymbol, className, striped, style } = props;
+    const colorItem = React.useMemo(() => {
+        if (colorSymbol) {
+            return colorSymbol;
+        }
+        if (color) {
+            return React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } });
+        }
+        return null;
+    }, [color, colorSymbol]);
     return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
-        color && React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } }),
+        colorItem,
         label,
         value && React.createElement("span", { className: b('content-row-value') }, value)));
 }

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

@@ -8,7 +8,7 @@ import { block, hasVerticalScrollbar } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
 import { RowWithAggregation } from './RowWithAggregation';
-import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
+import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getTooltipRowColorSymbol, getXRowData, } from './utils';
 const b = block('tooltip');
 export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, qa, }) => {
     var _a;
@@ -21,7 +21,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
     const prevHoveredValues = usePrevious(hoveredValues);
     const visibleHovered = pinned || !visibleRows ? hovered : hovered.slice(0, visibleRows);
     const restHoveredValues = pinned || !visibleRows ? [] : hoveredValues.slice(visibleRows);
-    const renderRow = ({ id, name, color, active, striped, value, formattedValue, }) => {
+    const renderRow = ({ id, name, color, active, striped, value, formattedValue, series, }) => {
         if (typeof rowRenderer === 'function') {
             return rowRenderer({
                 id,
@@ -35,7 +35,8 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                 hovered,
             });
         }
-        return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
+        const colorSymbol = getTooltipRowColorSymbol({ series, color });
+        return (React.createElement(Row, { key: id, active: active, color: color, colorSymbol: colorSymbol ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: colorSymbol.outerHTML } })) : undefined, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
     };
     const formattedHeadValue = headerFormat
         ? getFormattedValue({
@@ -113,6 +114,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                             striped,
                             value: hoveredValues[i],
                             formattedValue,
+                            series,
                         });
                     }
                     case 'waterfall': {

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -35,3 +35,9 @@ export declare function getPreparedAggregation(args: {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);
+export declare function getTooltipRowColorSymbol({ series, color, height, width, }: {
+    color?: string;
+    series?: TooltipDataChunk['series'];
+    height?: number;
+    width?: number;
+}): SVGSVGElement | null;

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

@@ -1,7 +1,9 @@
+import { create } from 'd3-selection';
 import get from 'lodash/get';
 import { i18n } from '../../../i18n';
 import { getDataCategoryValue, getDefaultDateFormat } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
+import { appendLinePathElement } from '../../utils';
 function getRowData(fieldName, data, axis) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'category': {
@@ -128,3 +130,19 @@ export function getPreparedAggregation(args) {
     }
     return 'sum';
 }
+export function getTooltipRowColorSymbol({ series, color, height = 8, width = 16, }) {
+    if ((series === null || series === void 0 ? void 0 : series.type) === 'line') {
+        const colorSymbol = create('svg').attr('height', height).attr('width', width);
+        const g = colorSymbol.append('g');
+        appendLinePathElement({
+            svgRootElement: g.node(),
+            height,
+            width,
+            color,
+            dashStyle: get(series, 'dashStyle'),
+            lineWidth: get(series, 'lineWidth'),
+        });
+        return colorSymbol.node();
+    }
+    return null;
+}

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

@@ -1,3 +1,4 @@
+import type { DashStyle } from '../constants';
 import type { ChartScaleLinear, ChartScaleTime } from '../hooks';
 import type { ChartAxisRangeSlider } from '../types';
 export declare function getInitialRangeSliderState(args: {
@@ -7,3 +8,13 @@ export declare function getInitialRangeSliderState(args: {
     min: number;
     max: number;
 };
+export declare function appendLinePathElement({ svgRootElement, height, width, x, lineWidth, dashStyle, className, color, }: {
+    svgRootElement: SVGGElement | null;
+    height: number;
+    width: number;
+    x?: number;
+    lineWidth?: number;
+    dashStyle?: DashStyle;
+    className?: string;
+    color?: string;
+}): import("d3-selection").Selection<SVGGElement | null, unknown, null, undefined>;

package/dist/cjs/components/utils.js

@@ -1,5 +1,7 @@
 import { duration } from '@gravity-ui/date-utils';
-import { isTimeScale } from '../utils';
+import { line as lineGenerator } from 'd3';
+import { select } from 'd3-selection';
+import { getLineDashArray, isTimeScale } from '../utils';
 export function getInitialRangeSliderState(args) {
     const { defaultRange, xScale } = args;
     let minRange;
@@ -32,3 +34,25 @@ export function getInitialRangeSliderState(args) {
     }
     return { min: minRange, max: maxRange };
 }
+const legendSymbolGenerator = lineGenerator()
+    .x((d) => d.x)
+    .y((d) => d.y);
+export function appendLinePathElement({ svgRootElement, height, width, x = 0, lineWidth = 1, dashStyle, className, color, }) {
+    const rootELementSelection = select(svgRootElement);
+    const y = height / 2;
+    const points = [
+        { x, y },
+        { x: x + width, y },
+    ];
+    const pathElement = rootELementSelection
+        .append('path')
+        .attr('d', legendSymbolGenerator(points))
+        .attr('fill', 'none')
+        .attr('stroke-width', lineWidth)
+        .attr('class', className !== null && className !== void 0 ? className : null)
+        .style('stroke', color !== null && color !== void 0 ? color : '');
+    if (dashStyle) {
+        pathElement.attr('stroke-dasharray', getLineDashArray(dashStyle, lineWidth));
+    }
+    return rootELementSelection;
+}

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

@@ -116,8 +116,14 @@ export function createYScale(args) {
                         offsetMax += bandWidth / 2;
                     }
                 }
-                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
-                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
+                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
+                const domainOffsetMin = isMinSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = isMaxSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMax) - scale.invert(0));
                 return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
             }
             break;
@@ -185,8 +191,14 @@ export function createYScale(args) {
                             offsetMax += bandWidth / 2;
                         }
                     }
-                    const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
-                    const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                    const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
+                    const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
+                    const domainOffsetMin = isMinSpecified
+                        ? 0
+                        : Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                    const domainOffsetMax = isMaxSpecified
+                        ? 0
+                        : Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
                     return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
                 }
             }
@@ -307,8 +319,14 @@ export function createXScale(args) {
                         offsetMax += bandWidth / 2;
                     }
                 }
-                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
-                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
+                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
+                const domainOffsetMin = isMinSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = isMaxSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMax) - scale.invert(0));
                 // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                 const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
                 scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
@@ -374,8 +392,14 @@ export function createXScale(args) {
                         offsetMax += bandWidth / 2;
                     }
                 }
-                const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
-                const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
+                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
+                const domainOffsetMin = isMinSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                const domainOffsetMax = isMaxSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
                 // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                 const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
                 scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);

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

@@ -56,6 +56,12 @@ export interface BaseSeries {
     tooltip?: {
         /** Formatting settings for tooltip value. */
         valueFormat?: ValueFormat;
+        /**
+         * Enable or disable the visibility of this series in the tooltip.
+         *
+         * @default true
+         */
+        enabled?: boolean;
     };
 }
 export interface BaseSeriesData<T = MeaningfulAny> {

package/dist/esm/components/AxisX/prepare-axis-data.js

@@ -251,7 +251,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
-                y: 0,
+                y: axisTop,
                 width: plotBandWidth,
                 height: axisHeight,
                 color: plotBand.color,
@@ -294,7 +294,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
             plotLines.push({
                 layerPlacement: plotLine.layerPlacement,
                 x: 0,
-                y: 0,
+                y: axisTop,
                 width: axisWidth,
                 color: plotLine.color,
                 opacity: plotLine.opacity,

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

@@ -1,4 +1,5 @@
 import { pointer } from 'd3';
+import get from 'lodash/get';
 import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
@@ -16,9 +17,10 @@ export function useChartInnerHandlers(props) {
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
             return;
         }
+        const shapesDataWithTooltipEnabled = shapesData.filter((d) => get(d, 'series.tooltip.enabled', true));
         const closest = getClosestPoints({
             position: [x, y],
-            shapesData,
+            shapesData: shapesDataWithTooltipEnabled,
             boundsHeight,
             boundsWidth,
         });

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
+import { scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
+import { appendLinePathElement } from '../utils';
 import './styles.css';
 const b = block('legend');
 const getLegendItemLeftPosition = (args) => {
@@ -64,9 +65,6 @@ const appendPaginator = (args) => {
     });
     paginationLine.attr('transform', transform);
 };
-const legendSymbolGenerator = lineGenerator()
-    .x((d) => d.x)
-    .y((d) => d.y);
 function renderLegendSymbol(args) {
     const { selection, legend, legendLineHeight } = args;
     const line = selection.data();
@@ -86,21 +84,16 @@ function renderLegendSymbol(args) {
         const color = d.visible ? d.color : '';
         switch (d.symbol.shape) {
             case 'path': {
-                const y = legendLineHeight / 2;
-                const points = [
-                    { x, y },
-                    { x: x + d.symbol.width, y },
-                ];
-                element
-                    .append('path')
-                    .attr('d', legendSymbolGenerator(points))
-                    .attr('fill', 'none')
-                    .attr('stroke-width', d.symbol.strokeWidth)
-                    .attr('class', className)
-                    .style('stroke', color);
-                if (d.dashStyle) {
-                    element.attr('stroke-dasharray', getLineDashArray(d.dashStyle, d.symbol.strokeWidth));
-                }
+                appendLinePathElement({
+                    svgRootElement: element.node(),
+                    x,
+                    height: legendLineHeight,
+                    width: d.symbol.width,
+                    color,
+                    className,
+                    dashStyle: d.dashStyle,
+                    lineWidth: d.symbol.strokeWidth,
+                });
                 break;
             }
             case 'rect': {

package/dist/esm/components/Tooltip/DefaultTooltipContent/Row.d.ts

@@ -4,6 +4,7 @@ export declare function Row(props: {
     active?: boolean;
     className?: string;
     color?: string;
+    colorSymbol?: React.ReactNode;
     striped?: boolean;
     style?: React.CSSProperties;
     value?: React.ReactNode;

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

@@ -2,9 +2,18 @@ import React from 'react';
 import { block } from '../../../utils';
 const b = block('tooltip');
 export function Row(props) {
-    const { label, value, active, color, className, striped, style } = props;
+    const { label, value, active, color, colorSymbol, className, striped, style } = props;
+    const colorItem = React.useMemo(() => {
+        if (colorSymbol) {
+            return colorSymbol;
+        }
+        if (color) {
+            return React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } });
+        }
+        return null;
+    }, [color, colorSymbol]);
     return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
-        color && React.createElement("div", { className: b('content-row-color'), style: { backgroundColor: color } }),
+        colorItem,
         label,
         value && React.createElement("span", { className: b('content-row-value') }, value)));
 }

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

@@ -8,7 +8,7 @@ import { block, hasVerticalScrollbar } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { Row } from './Row';
 import { RowWithAggregation } from './RowWithAggregation';
-import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
+import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getTooltipRowColorSymbol, getXRowData, } from './utils';
 const b = block('tooltip');
 export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, qa, }) => {
     var _a;
@@ -21,7 +21,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
     const prevHoveredValues = usePrevious(hoveredValues);
     const visibleHovered = pinned || !visibleRows ? hovered : hovered.slice(0, visibleRows);
     const restHoveredValues = pinned || !visibleRows ? [] : hoveredValues.slice(visibleRows);
-    const renderRow = ({ id, name, color, active, striped, value, formattedValue, }) => {
+    const renderRow = ({ id, name, color, active, striped, value, formattedValue, series, }) => {
         if (typeof rowRenderer === 'function') {
             return rowRenderer({
                 id,
@@ -35,7 +35,8 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                 hovered,
             });
         }
-        return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
+        const colorSymbol = getTooltipRowColorSymbol({ series, color });
+        return (React.createElement(Row, { key: id, active: active, color: color, colorSymbol: colorSymbol ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: colorSymbol.outerHTML } })) : undefined, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: name } }), striped: striped, value: formattedValue }));
     };
     const formattedHeadValue = headerFormat
         ? getFormattedValue({
@@ -113,6 +114,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
                             striped,
                             value: hoveredValues[i],
                             formattedValue,
+                            series,
                         });
                     }
                     case 'waterfall': {

package/dist/esm/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -35,3 +35,9 @@ export declare function getPreparedAggregation(args: {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);
+export declare function getTooltipRowColorSymbol({ series, color, height, width, }: {
+    color?: string;
+    series?: TooltipDataChunk['series'];
+    height?: number;
+    width?: number;
+}): SVGSVGElement | null;

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

@@ -1,7 +1,9 @@
+import { create } from 'd3-selection';
 import get from 'lodash/get';
 import { i18n } from '../../../i18n';
 import { getDataCategoryValue, getDefaultDateFormat } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
+import { appendLinePathElement } from '../../utils';
 function getRowData(fieldName, data, axis) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'category': {
@@ -128,3 +130,19 @@ export function getPreparedAggregation(args) {
     }
     return 'sum';
 }
+export function getTooltipRowColorSymbol({ series, color, height = 8, width = 16, }) {
+    if ((series === null || series === void 0 ? void 0 : series.type) === 'line') {
+        const colorSymbol = create('svg').attr('height', height).attr('width', width);
+        const g = colorSymbol.append('g');
+        appendLinePathElement({
+            svgRootElement: g.node(),
+            height,
+            width,
+            color,
+            dashStyle: get(series, 'dashStyle'),
+            lineWidth: get(series, 'lineWidth'),
+        });
+        return colorSymbol.node();
+    }
+    return null;
+}

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

@@ -1,3 +1,4 @@
+import type { DashStyle } from '../constants';
 import type { ChartScaleLinear, ChartScaleTime } from '../hooks';
 import type { ChartAxisRangeSlider } from '../types';
 export declare function getInitialRangeSliderState(args: {
@@ -7,3 +8,13 @@ export declare function getInitialRangeSliderState(args: {
     min: number;
     max: number;
 };
+export declare function appendLinePathElement({ svgRootElement, height, width, x, lineWidth, dashStyle, className, color, }: {
+    svgRootElement: SVGGElement | null;
+    height: number;
+    width: number;
+    x?: number;
+    lineWidth?: number;
+    dashStyle?: DashStyle;
+    className?: string;
+    color?: string;
+}): import("d3-selection").Selection<SVGGElement | null, unknown, null, undefined>;

package/dist/esm/components/utils.js

@@ -1,5 +1,7 @@
 import { duration } from '@gravity-ui/date-utils';
-import { isTimeScale } from '../utils';
+import { line as lineGenerator } from 'd3';
+import { select } from 'd3-selection';
+import { getLineDashArray, isTimeScale } from '../utils';
 export function getInitialRangeSliderState(args) {
     const { defaultRange, xScale } = args;
     let minRange;
@@ -32,3 +34,25 @@ export function getInitialRangeSliderState(args) {
     }
     return { min: minRange, max: maxRange };
 }
+const legendSymbolGenerator = lineGenerator()
+    .x((d) => d.x)
+    .y((d) => d.y);
+export function appendLinePathElement({ svgRootElement, height, width, x = 0, lineWidth = 1, dashStyle, className, color, }) {
+    const rootELementSelection = select(svgRootElement);
+    const y = height / 2;
+    const points = [
+        { x, y },
+        { x: x + width, y },
+    ];
+    const pathElement = rootELementSelection
+        .append('path')
+        .attr('d', legendSymbolGenerator(points))
+        .attr('fill', 'none')
+        .attr('stroke-width', lineWidth)
+        .attr('class', className !== null && className !== void 0 ? className : null)
+        .style('stroke', color !== null && color !== void 0 ? color : '');
+    if (dashStyle) {
+        pathElement.attr('stroke-dasharray', getLineDashArray(dashStyle, lineWidth));
+    }
+    return rootELementSelection;
+}

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

@@ -116,8 +116,14 @@ export function createYScale(args) {
                         offsetMax += bandWidth / 2;
                     }
                 }
-                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
-                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
+                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
+                const domainOffsetMin = isMinSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = isMaxSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMax) - scale.invert(0));
                 return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
             }
             break;
@@ -185,8 +191,14 @@ export function createYScale(args) {
                             offsetMax += bandWidth / 2;
                         }
                     }
-                    const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
-                    const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                    const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
+                    const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
+                    const domainOffsetMin = isMinSpecified
+                        ? 0
+                        : Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                    const domainOffsetMax = isMaxSpecified
+                        ? 0
+                        : Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
                     return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
                 }
             }
@@ -307,8 +319,14 @@ export function createXScale(args) {
                         offsetMax += bandWidth / 2;
                     }
                 }
-                const domainOffsetMin = Math.abs(scale.invert(offsetMin) - scale.invert(0));
-                const domainOffsetMax = Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
+                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
+                const domainOffsetMin = isMinSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                const domainOffsetMax = isMaxSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMax) - scale.invert(0));
                 // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                 const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
                 scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
@@ -374,8 +392,14 @@ export function createXScale(args) {
                         offsetMax += bandWidth / 2;
                     }
                 }
-                const domainOffsetMin = Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
-                const domainOffsetMax = Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
+                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateX;
+                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateX;
+                const domainOffsetMin = isMinSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMin).getTime() - scale.invert(0).getTime());
+                const domainOffsetMax = isMaxSpecified
+                    ? 0
+                    : Math.abs(scale.invert(offsetMax).getTime() - scale.invert(0).getTime());
                 // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                 const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
                 scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);

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

@@ -56,6 +56,12 @@ export interface BaseSeries {
     tooltip?: {
         /** Formatting settings for tooltip value. */
         valueFormat?: ValueFormat;
+        /**
+         * Enable or disable the visibility of this series in the tooltip.
+         *
+         * @default true
+         */
+        enabled?: boolean;
     };
 }
 export interface BaseSeriesData<T = MeaningfulAny> {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.29.0",
-  "description": "React component used to render charts",
+  "version": "1.30.1",
+  "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "./dist/esm/index.js",