@gravity-ui/charts 0.7.0 → 0.9.0

package/README.md

@@ -1,7 +1,4 @@
-# @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/)
-
-> [!WARNING]
-> The library may have major changes in minor releases while it is on version `0.*.*`.
+# Gravity 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/)
 
 ## Install
 

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

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

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { line, select } from 'd3';
+import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
-const b = block('d3-axis');
+const b = block('axis');
 function getLabelFormatter({ axis, scale }) {
     const ticks = getScaleTicks(scale);
     const tickStep = getClosestPointsRange(axis, ticks);
@@ -42,7 +42,7 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split } = props;
+    const { axis, width, height: totalHeight, scale, split, plotRef } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -57,8 +57,9 @@ export const AxisX = React.memo(function AxisX(props) {
                 return [-top, -(top + height)];
             });
         }
+        const axisScale = scale;
         const xAxisGenerator = axisBottom({
-            scale: scale,
+            scale: axisScale,
             ticks: {
                 items: tickItems,
                 labelFormat: getLabelFormatter({ axis, scale }),
@@ -103,6 +104,42 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
-    }, [axis, width, totalHeight, scale, split]);
+        // add plot lines
+        if (plotRef && axis.plotLines.length > 0) {
+            const plotLineClassName = b('plotLine');
+            const plotLineContainer = select(plotRef.current);
+            plotLineContainer.selectAll(`.${plotLineClassName}-x`).remove();
+            const plotLinesSelection = plotLineContainer
+                .selectAll(`.${plotLineClassName}-x`)
+                .data(axis.plotLines)
+                .join('g')
+                .attr('class', `${plotLineClassName}-x`);
+            const lineGenerator = line();
+            plotLinesSelection
+                .append('path')
+                .attr('d', (plotLine) => {
+                const plotLineValue = Number(axisScale(plotLine.value));
+                const points = [
+                    [plotLineValue, 0],
+                    [plotLineValue, totalHeight],
+                ];
+                return lineGenerator(points);
+            })
+                .attr('stroke', (plotLine) => plotLine.color)
+                .attr('stroke-width', (plotLine) => plotLine.width)
+                .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                .attr('opacity', (plotLine) => plotLine.opacity);
+            // set layer placement
+            plotLinesSelection.each((plotLineData, i, nodes) => {
+                const plotLineSelection = select(nodes[i]);
+                if (plotLineData.layerPlacement === 'before') {
+                    plotLineSelection.lower();
+                }
+                else {
+                    plotLineSelection.raise();
+                }
+            });
+        }
+    }, [axis, width, totalHeight, scale, split, plotRef]);
     return React.createElement("g", { ref: ref });
 });

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

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

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
-const b = block('d3-axis');
+const b = block('axis');
 function transformLabel(args) {
     const { node, axis } = args;
     let topOffset = axis.labels.lineHeight / 2;
@@ -56,11 +56,14 @@ function getTitlePosition(args) {
     if (rowCount < 1) {
         return { x: 0, y: 0 };
     }
-    const x = -(axis.title.height -
+    let x = axis.title.height -
         axis.title.height / rowCount +
         axis.title.margin +
         axis.labels.margin +
-        axis.labels.width);
+        axis.labels.width;
+    if (axis.position === 'left') {
+        x = x * -1;
+    }
     let y;
     switch (axis.title.align) {
         case 'left': {
@@ -79,35 +82,44 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split } = props;
+    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
+    const lineGenerator = line();
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const getAxisPosition = (axis) => {
+            var _a;
+            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (axis.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        };
+        const plotLines = axes.reduce((acc, axis) => {
+            if (axis.plotLines.length) {
+                acc.push(...axis.plotLines.map((plotLine) => {
+                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
+                }));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => {
-            var _a;
-            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (d.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        });
+            .style('transform', (d) => getAxisPosition(d));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
+            const axisScale = seriesScale;
             const yAxisGenerator = getAxisGenerator({
-                axisGenerator: d.position === 'left'
-                    ? axisLeft(seriesScale)
-                    : axisRight(seriesScale),
+                axisGenerator: d.position === 'left' ? axisLeft(axisScale) : axisRight(axisScale),
                 preparedAxis: d,
                 height,
                 width,
@@ -148,6 +160,40 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
+            if (plotRef && d.plotLines.length > 0) {
+                const plotLineClassName = b('plotLine');
+                const plotLineContainer = select(plotRef.current);
+                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
+                const plotLinesSelection = plotLineContainer
+                    .selectAll(`.${plotLineClassName}`)
+                    .data(plotLines)
+                    .join('g')
+                    .attr('class', plotLineClassName)
+                    .style('transform', (plotLine) => plotLine.transform);
+                plotLinesSelection
+                    .append('path')
+                    .attr('d', (plotLine) => {
+                    const plotLineValue = Number(axisScale(plotLine.value));
+                    const points = [
+                        [0, plotLineValue],
+                        [width, plotLineValue],
+                    ];
+                    return lineGenerator(points);
+                })
+                    .attr('stroke', (plotLine) => plotLine.color)
+                    .attr('stroke-width', (plotLine) => plotLine.width)
+                    .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                    .attr('opacity', (plotLine) => plotLine.opacity);
+                plotLinesSelection.each((plotLineData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotLineData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
             return axisItem;
         });
         axisSelection
@@ -157,7 +203,7 @@ export const AxisY = (props) => {
                 [0, 0],
                 [0, height],
             ];
-            return line()(points);
+            return lineGenerator(points);
         })
             .style('stroke', (d) => d.lineColor || '');
         svgElement.selectAll('.tick').each((_d, index, nodes) => {

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

@@ -1,17 +1,17 @@
-.gcharts-d3-axis .domain {
+.gcharts-axis .domain {
   stroke: var(--g-color-line-generic-active);
 }
-.gcharts-d3-axis .tick text {
+.gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
   alignment-baseline: after-edge;
 }
-.gcharts-d3-axis .tick line, .gcharts-d3-axis .tick path {
+.gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
-.gcharts-d3-axis__title {
+.gcharts-axis__title {
   alignment-baseline: after-edge;
   fill: var(--g-color-text-secondary);
 }
-.gcharts-d3-axis__title tspan {
+.gcharts-axis__title tspan {
   alignment-baseline: after-edge;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventType, block, getD3Dispatcher } from '../../utils';
+import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
@@ -9,13 +9,14 @@ import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
 import './styles.css';
-const b = block('d3');
+const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
-    const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
+    const plotRef = React.useRef(null);
+    const dispatcher = React.useMemo(() => getDispatcher(), []);
     const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
@@ -34,6 +35,7 @@ export const ChartInner = (props) => {
         unpinTooltip,
         xAxis,
         yAxis,
+        tooltipThrottle: tooltip.throttle,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -63,11 +65,11 @@ export const ChartInner = (props) => {
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {

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

@@ -1,10 +1,10 @@
-.gcharts-d3 {
-  --d3-data-labels: var(--g-color-text-secondary);
+.gcharts-chart {
+  --gcharts-data-labels: var(--g-color-text-secondary);
   position: absolute;
 }
-.gcharts-d3__html-layer {
+.gcharts-chart__html-layer {
   display: contents;
 }
-.gcharts-d3__html-layer > * {
+.gcharts-chart__html-layer > * {
   transform: inherit;
 }

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

@@ -16,6 +16,7 @@ type Props = {
     unpinTooltip: ChartInnerState['unpinTooltip'];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
+    tooltipThrottle: number;
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;

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

@@ -4,9 +4,8 @@ import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
-const THROTTLE_DELAY = 50;
 export function useChartInnerHandlers(props) {
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, } = props;
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, tooltipThrottle, } = props;
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
@@ -24,6 +23,8 @@ export function useChartInnerHandlers(props) {
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
@@ -38,7 +39,7 @@ export function useChartInnerHandlers(props) {
     };
     const throttledHandleMouseMove = IS_TOUCH_ENABLED
         ? undefined
-        : throttle(handleMouseMove, THROTTLE_DELAY);
+        : throttle(handleMouseMove, tooltipThrottle);
     const handleMouseLeave = (event) => {
         if (tooltipPinned) {
             return;
@@ -53,7 +54,7 @@ export function useChartInnerHandlers(props) {
         handleMove([pointerX, pointerY], event);
     };
     const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, THROTTLE_DELAY)
+        ? throttle(handleTouchMove, tooltipThrottle)
         : undefined;
     const handleChartClick = (event) => {
         const [pointerX, pointerY] = pointer(event, svgContainer);
@@ -65,6 +66,8 @@ export function useChartInnerHandlers(props) {
         const items = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
         if (!selected) {

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

@@ -29,11 +29,12 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
-    title: (import("../../types").ChartTitle & {
+    title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../../types").ChartTooltip<any> & {
+    tooltip: import("../..").ChartTooltip<any> & {
         enabled: boolean;
+        throttle: number;
     };
     xAxis: import("../../hooks").PreparedAxis;
     xScale: import("../../hooks").ChartScale | undefined;

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
-import { getLineDashArray } from '../../hooks/useShapes/utils';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
-const b = block('d3-legend');
+const b = block('legend');
 const getLegendPosition = (args) => {
     const { align, offsetWidth = 0, width, contentWidth } = args;
     const top = 0;

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

@@ -1,47 +1,47 @@
-.gcharts-d3-legend {
+.gcharts-legend {
   color: var(--g-color-text-secondary);
 }
-.gcharts-d3-legend__title {
+.gcharts-legend__title {
   fill: var(--g-color-text-secondary);
 }
-.gcharts-d3-legend__item {
+.gcharts-legend__item {
   cursor: pointer;
   user-select: none;
 }
-.gcharts-d3-legend__item-symbol_shape_rect.gcharts-d3-legend__item-symbol_unselected {
+.gcharts-legend__item-symbol_shape_rect.gcharts-legend__item-symbol_unselected {
   fill: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-symbol_shape_path.gcharts-d3-legend__item-symbol_unselected {
+.gcharts-legend__item-symbol_shape_path.gcharts-legend__item-symbol_unselected {
   stroke: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-symbol_shape_symbol.gcharts-d3-legend__item-symbol_unselected {
+.gcharts-legend__item-symbol_shape_symbol.gcharts-legend__item-symbol_unselected {
   fill: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-text {
+.gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
   alignment-baseline: before-edge;
 }
-.gcharts-d3-legend__item-text_unselected {
+.gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-text:hover {
+.gcharts-legend__item-text:hover {
   fill: var(--g-color-text-complementary);
 }
-.gcharts-d3-legend__pagination {
+.gcharts-legend__pagination {
   user-select: none;
   fill: var(--g-color-text-primary);
 }
-.gcharts-d3-legend__pagination-counter, .gcharts-d3-legend__pagination-arrow {
+.gcharts-legend__pagination-counter, .gcharts-legend__pagination-arrow {
   alignment-baseline: middle;
 }
-.gcharts-d3-legend__pagination-arrow {
+.gcharts-legend__pagination-arrow {
   cursor: pointer;
   fill: var(--g-color-text-brand);
 }
-.gcharts-d3-legend__pagination-arrow_inactive {
+.gcharts-legend__pagination-arrow_inactive {
   cursor: inherit;
   fill: var(--g-color-base-generic-accent-disabled);
 }
-.gcharts-d3-legend__pagination-arrow:hover:not(.gcharts-d3-legend__pagination-arrow_inactive) {
+.gcharts-legend__pagination-arrow:hover:not(.gcharts-legend__pagination-arrow_inactive) {
   fill: var(--g-color-base-brand-hover);
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import './styles.css';
-const b = block('d3-plot-title');
+const b = block('plot-title');
 export const PlotTitle = (props) => {
     const { title } = props;
     if (!title) {

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

@@ -1,4 +1,4 @@
-.chartkit-d3-plot-title {
+.gcharts-plot-title {
   font-size: var(--g-text-subheader-3-font-size);
   font-weight: var(--g-text-subheader-font-weight);
   fill: var(--g-color-text-secondary);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import './styles.css';
-const b = block('d3-title');
+const b = block('title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
     return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },

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

@@ -1,4 +1,4 @@
-.gcharts-d3-title {
+.gcharts-title {
   font-size: var(--g-text-subheader-2-font-size);
   font-weight: var(--g-text-subheader-font-weight);
   fill: var(--g-color-text-primary);

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

@@ -3,7 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
 import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, data, axis) => {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
@@ -29,7 +29,7 @@ const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
@@ -41,7 +41,9 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
-        hovered.map(({ data, series, closest }, i) => {
+        hovered.map((seriesItem, i) => {
+            var _a;
+            const { data, series, closest } = seriesItem;
             const id = `${get(series, 'id')}_${i}`;
             const color = get(series, 'color');
             switch (series.type) {
@@ -93,6 +95,20 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             "\u00A0"),
                         React.createElement("span", null, seriesData.value)));
                 }
+                case 'sankey': {
+                    const { target, data: source } = seriesItem;
+                    const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
+                        React.createElement("div", { style: { display: 'flex', gap: 8, verticalAlign: 'center' } },
+                            source.name,
+                            " ",
+                            React.createElement("span", null, "\u2192"),
+                            " ", target === null || target === void 0 ? void 0 :
+                            target.name,
+                            ": ",
+                            value)));
+                }
                 default: {
                     return null;
                 }

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

@@ -9,6 +9,7 @@ export declare const SeriesType: {
     readonly Scatter: "scatter";
     readonly Treemap: "treemap";
     readonly Waterfall: "waterfall";
+    readonly Sankey: "sankey";
 };
 export declare enum DashStyle {
     Dash = "Dash",

package/dist/cjs/constants/index.js

@@ -9,6 +9,7 @@ export const SeriesType = {
     Scatter: 'scatter',
     Treemap: 'treemap',
     Waterfall: 'waterfall',
+    Sankey: 'sankey',
 };
 export var DashStyle;
 (function (DashStyle) {

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

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 export const getPreparedTooltip = (args) => {
+    var _a;
     const { tooltip } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true) });
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0 });
 };

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

@@ -1,4 +1,5 @@
-import type { BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
+import type { DashStyle } from 'src/constants';
+import type { AxisPlotLine, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -10,7 +11,15 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
 export type PreparedChart = {
     margin: ChartMargin;
 };
-export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
+export type PreparedAxisPlotLine = {
+    value: number;
+    color: string;
+    width: number;
+    dashStyle: DashStyle;
+    opacity: number;
+    layerPlacement: AxisPlotLine['layerPlacement'];
+};
+export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
     title: {
@@ -32,12 +41,14 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
     };
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
+    plotLines: PreparedAxisPlotLine[];
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;
+    throttle: number;
 };
 export type ChartOptions = {
     chart: PreparedChart;

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

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DashStyle, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
@@ -102,6 +102,14 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         },
         position: 'bottom',
         plotIndex: 0,
+        plotLines: get(xAxis, 'plotLines', []).map((d) => ({
+            value: get(d, 'value', 0),
+            color: get(d, 'color', 'var(--g-color-base-brand)'),
+            width: get(d, 'width', 1),
+            dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+            opacity: get(d, 'opacity', 1),
+            layerPlacement: get(d, 'layerPlacement', 'before'),
+        })),
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,