@gravity-ui/charts 1.30.0 → 1.31.0

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

@@ -112,7 +112,7 @@ export const AxisX = (props) => {
                     .attr('fill', (d) => d.color)
                     .attr('opacity', (d) => d.opacity);
                 plotBandsSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const plotBandSelection = select(this);
                     const band = plotBandSelection.datum();
                     const label = band.label;
@@ -125,7 +125,8 @@ export const AxisX = (props) => {
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
                             .style('text-anchor', 'start')
-                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`);
+                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
                     }
                 });
             };
@@ -153,7 +154,7 @@ export const AxisX = (props) => {
                     .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
                     .attr('opacity', (d) => d.opacity);
                 plotLinesSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const itemSelection = select(this);
                     const plotLine = itemSelection.datum();
                     const label = plotLine.label;
@@ -166,7 +167,8 @@ export const AxisX = (props) => {
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
                             .style('text-anchor', 'start')
-                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`);
+                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
                     }
                 });
             };

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,
@@ -263,6 +263,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
                         x: plotBand.label.padding,
                         y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
                         rotate: -90,
+                        qa: plotBand.label.qa,
                     }
                     : null,
             });
@@ -289,12 +290,13 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
                     x: plotLineValue - plotLine.label.padding - size.height,
                     y: plotLine.label.padding + size.width,
                     rotate: -90,
+                    qa: plotLine.label.qa,
                 };
             }
             plotLines.push({
                 layerPlacement: plotLine.layerPlacement,
                 x: 0,
-                y: 0,
+                y: axisTop,
                 width: axisWidth,
                 color: plotLine.color,
                 opacity: plotLine.opacity,

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

@@ -47,6 +47,7 @@ export type AxisPlotLineLabel = {
     style: BaseTextStyle;
     x: number;
     y: number;
+    qa?: string;
 };
 export type AxisPlotLineData = {
     layerPlacement: PlotLayerPlacement;

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

@@ -118,7 +118,7 @@ export const AxisY = (props) => {
                     .attr('fill', (d) => d.color)
                     .attr('opacity', (d) => d.opacity);
                 plotBandsSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const plotBandSelection = select(this);
                     const band = plotBandSelection.datum();
                     const label = band.label;
@@ -130,6 +130,7 @@ export const AxisY = (props) => {
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
                     }
@@ -159,7 +160,7 @@ export const AxisY = (props) => {
                     .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
                     .attr('opacity', (d) => d.opacity);
                 plotLinesSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const itemSelection = select(this);
                     const plotLine = itemSelection.datum();
                     const label = plotLine.label;
@@ -171,6 +172,7 @@ export const AxisY = (props) => {
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
                     }

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -229,6 +229,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                     style: plotBand.label.style,
                     x: plotBand.label.padding,
                     y: plotBand.label.padding,
+                    qa: plotBand.label.qa,
                 }
                 : null,
         });
@@ -254,6 +255,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                 style: plotLine.label.style,
                 x: plotLine.label.padding,
                 y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
+                qa: plotLine.label.qa,
             };
         }
         plotLines.push({

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

@@ -58,6 +58,7 @@ export type AxisPlotLineLabel = {
     style: BaseTextStyle;
     x: number;
     y: number;
+    qa?: string;
 };
 export type AxisPlotLineData = {
     layerPlacement: PlotLayerPlacement;

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('stroke', color !== null && color !== void 0 ? color : '')
+        .attr('class', className !== null && className !== void 0 ? className : null);
+    if (dashStyle) {
+        pathElement.attr('stroke-dasharray', getLineDashArray(dashStyle, lineWidth));
+    }
+    return rootELementSelection;
+}

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

@@ -13,6 +13,7 @@ export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
         text: string;
         style: BaseTextStyle;
         padding: number;
+        qa?: string;
     };
 };
 type PreparedAxisCrosshair = Required<AxisCrosshair>;
@@ -27,6 +28,7 @@ export type PreparedAxisPlotLine = {
         text: string;
         style: BaseTextStyle;
         padding: number;
+        qa?: string;
     };
 };
 export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {

package/dist/cjs/hooks/useAxis/utils.d.ts

@@ -7,4 +7,5 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
         fontColor: string;
     };
     padding: number;
+    qa: string | undefined;
 };

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

@@ -1,9 +1,10 @@
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 export function prepareAxisPlotLabel(d) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     return {
         text: (_b = (_a = d.label) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
         style: Object.assign({ fontSize: DEFAULT_AXIS_LABEL_FONT_SIZE, fontColor: 'var(--g-color-text-secondary)' }, (_c = d.label) === null || _c === void 0 ? void 0 : _c.style),
         padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
+        qa: (_f = d.label) === null || _f === void 0 ? void 0 : _f.qa,
     };
 }

package/dist/cjs/hooks/useChartOptions/title.js

@@ -14,7 +14,7 @@ export const getPreparedTitle = ({ title, }) => {
         ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
         : 0;
     const preparedTitle = titleText
-        ? { text: titleText, style: titleStyle, height: titleHeight }
+        ? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }
         : undefined;
     return preparedTitle;
 };

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

@@ -194,6 +194,9 @@ export interface AxisPlot {
          * @default 5
          */
         padding?: number;
+        /** Can be used for the UI automated test.
+         * It is assigned as a data-qa attribute to an element. */
+        qa?: string;
     };
 }
 export interface AxisPlotLine extends AxisPlot {

package/dist/esm/components/AxisX/AxisX.js

@@ -112,7 +112,7 @@ export const AxisX = (props) => {
                     .attr('fill', (d) => d.color)
                     .attr('opacity', (d) => d.opacity);
                 plotBandsSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const plotBandSelection = select(this);
                     const band = plotBandSelection.datum();
                     const label = band.label;
@@ -125,7 +125,8 @@ export const AxisX = (props) => {
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
                             .style('text-anchor', 'start')
-                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`);
+                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
                     }
                 });
             };
@@ -153,7 +154,7 @@ export const AxisX = (props) => {
                     .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
                     .attr('opacity', (d) => d.opacity);
                 plotLinesSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const itemSelection = select(this);
                     const plotLine = itemSelection.datum();
                     const label = plotLine.label;
@@ -166,7 +167,8 @@ export const AxisX = (props) => {
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
                             .style('text-anchor', 'start')
-                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`);
+                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
                     }
                 });
             };

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,
@@ -263,6 +263,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
                         x: plotBand.label.padding,
                         y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
                         rotate: -90,
+                        qa: plotBand.label.qa,
                     }
                     : null,
             });
@@ -289,12 +290,13 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
                     x: plotLineValue - plotLine.label.padding - size.height,
                     y: plotLine.label.padding + size.width,
                     rotate: -90,
+                    qa: plotLine.label.qa,
                 };
             }
             plotLines.push({
                 layerPlacement: plotLine.layerPlacement,
                 x: 0,
-                y: 0,
+                y: axisTop,
                 width: axisWidth,
                 color: plotLine.color,
                 opacity: plotLine.opacity,

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

@@ -47,6 +47,7 @@ export type AxisPlotLineLabel = {
     style: BaseTextStyle;
     x: number;
     y: number;
+    qa?: string;
 };
 export type AxisPlotLineData = {
     layerPlacement: PlotLayerPlacement;

package/dist/esm/components/AxisY/AxisY.js

@@ -118,7 +118,7 @@ export const AxisY = (props) => {
                     .attr('fill', (d) => d.color)
                     .attr('opacity', (d) => d.opacity);
                 plotBandsSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const plotBandSelection = select(this);
                     const band = plotBandSelection.datum();
                     const label = band.label;
@@ -130,6 +130,7 @@ export const AxisY = (props) => {
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
                     }
@@ -159,7 +160,7 @@ export const AxisY = (props) => {
                     .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
                     .attr('opacity', (d) => d.opacity);
                 plotLinesSelection.each(function () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const itemSelection = select(this);
                     const plotLine = itemSelection.datum();
                     const label = plotLine.label;
@@ -171,6 +172,7 @@ export const AxisY = (props) => {
                             .style('font-size', label.style.fontSize)
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
+                            .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null)
                             .attr('x', label.x)
                             .attr('y', label.y);
                     }

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

@@ -229,6 +229,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                     style: plotBand.label.style,
                     x: plotBand.label.padding,
                     y: plotBand.label.padding,
+                    qa: plotBand.label.qa,
                 }
                 : null,
         });
@@ -254,6 +255,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                 style: plotLine.label.style,
                 x: plotLine.label.padding,
                 y: Math.max(0, plotLineValue - size.height - plotLine.label.padding),
+                qa: plotLine.label.qa,
             };
         }
         plotLines.push({

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

@@ -58,6 +58,7 @@ export type AxisPlotLineLabel = {
     style: BaseTextStyle;
     x: number;
     y: number;
+    qa?: string;
 };
 export type AxisPlotLineData = {
     layerPlacement: PlotLayerPlacement;

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('stroke', color !== null && color !== void 0 ? color : '')
+        .attr('class', className !== null && className !== void 0 ? className : null);
+    if (dashStyle) {
+        pathElement.attr('stroke-dasharray', getLineDashArray(dashStyle, lineWidth));
+    }
+    return rootELementSelection;
+}

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

@@ -13,6 +13,7 @@ export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
         text: string;
         style: BaseTextStyle;
         padding: number;
+        qa?: string;
     };
 };
 type PreparedAxisCrosshair = Required<AxisCrosshair>;
@@ -27,6 +28,7 @@ export type PreparedAxisPlotLine = {
         text: string;
         style: BaseTextStyle;
         padding: number;
+        qa?: string;
     };
 };
 export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {

package/dist/esm/hooks/useAxis/utils.d.ts

@@ -7,4 +7,5 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
         fontColor: string;
     };
     padding: number;
+    qa: string | undefined;
 };

package/dist/esm/hooks/useAxis/utils.js

@@ -1,9 +1,10 @@
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 export function prepareAxisPlotLabel(d) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     return {
         text: (_b = (_a = d.label) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
         style: Object.assign({ fontSize: DEFAULT_AXIS_LABEL_FONT_SIZE, fontColor: 'var(--g-color-text-secondary)' }, (_c = d.label) === null || _c === void 0 ? void 0 : _c.style),
         padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
+        qa: (_f = d.label) === null || _f === void 0 ? void 0 : _f.qa,
     };
 }

package/dist/esm/hooks/useChartOptions/title.js

@@ -14,7 +14,7 @@ export const getPreparedTitle = ({ title, }) => {
         ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
         : 0;
     const preparedTitle = titleText
-        ? { text: titleText, style: titleStyle, height: titleHeight }
+        ? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }
         : undefined;
     return preparedTitle;
 };

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

@@ -194,6 +194,9 @@ export interface AxisPlot {
          * @default 5
          */
         padding?: number;
+        /** Can be used for the UI automated test.
+         * It is assigned as a data-qa attribute to an element. */
+        qa?: string;
     };
 }
 export interface AxisPlotLine extends AxisPlot {

package/package.json

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