@gravity-ui/charts 1.30.0 → 1.30.1

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/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/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/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/package.json

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