@gravity-ui/charts 1.41.0 → 1.41.2

package/dist/cjs/hooks/useShapes/funnel/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { color, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
 import { block, getLineDashArray } from '../../../utils';
 export { prepareFunnelData } from './prepare-data';
 export * from './types';

package/dist/cjs/hooks/useShapes/funnel/prepare-data.js

@@ -1,4 +1,4 @@
-import { path } from 'd3';
+import { path } from 'd3-path';
 import { calculateNumericProperty, getFormattedValue, getTextSizeFn } from '../../../utils';
 function getLineConnectorPaths(args) {
     const { points } = args;

package/dist/cjs/hooks/useShapes/funnel/types.d.ts

@@ -1,4 +1,4 @@
-import type { Path } from 'd3';
+import type { Path } from 'd3-path';
 import type { DashStyle } from 'src/constants';
 import type { FunnelSeriesData, LabelData } from '../../../types';
 import type { PreparedFunnelSeries } from '../../useSeries/types';

package/dist/cjs/hooks/useShapes/heatmap/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedHeatmapData } from './types';
 export { prepareHeatmapData } from './prepare-data';

package/dist/cjs/hooks/useShapes/heatmap/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { color, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 export { prepareHeatmapData } from './prepare-data';

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { SeriesType } from '../../constants';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { group } from 'd3';
+import { group } from 'd3-array';
 import { SERIES_TYPE } from '../../constants';
 import { ChartError } from '../../libs';
 import { getOnlyVisibleSeries } from '../../utils';
@@ -119,7 +119,6 @@ export async function getShapes(args) {
                         xScale,
                         yAxis,
                         yScale,
-                        boundsHeight,
                         split,
                         isOutsideBounds,
                         isRangeSlider,

package/dist/cjs/hooks/useShapes/line/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedLineData } from './types';
 type Args = {

package/dist/cjs/hooks/useShapes/line/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { color, line as lineGenerator, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
 import { block, filterOverlappingLabels, getLineDashArray } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/marker.d.ts

@@ -1,4 +1,4 @@
-import type { BaseType, Selection } from 'd3';
+import type { BaseType, Selection } from 'd3-selection';
 import { SymbolType } from '../../constants';
 import type { MarkerData as AreaMarkerData } from './area/types';
 import type { MarkerData as LineMarkerData } from './line/types';

package/dist/cjs/hooks/useShapes/marker.js

@@ -1,4 +1,4 @@
-import { symbol } from 'd3';
+import { symbol } from 'd3-shape';
 import get from 'lodash/get';
 import { SymbolType } from '../../constants';
 import { block, getSymbol } from '../../utils';

package/dist/cjs/hooks/useShapes/pie/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { Dispatch, PieArcDatum } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
+import type { PieArcDatum } from 'd3-shape';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedPieData, SegmentData } from './types';
 type PreparePieSeriesArgs = {

package/dist/cjs/hooks/useShapes/pie/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { arc, color, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { arc } from 'd3-shape';
 import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/pie/prepare-data.js

@@ -1,4 +1,5 @@
-import { arc, group, line as lineGenerator, max } from 'd3';
+import { group, max } from 'd3-array';
+import { arc, line as lineGenerator } from 'd3-shape';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../../constants';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../../utils';

package/dist/cjs/hooks/useShapes/pie/types.d.ts

@@ -1,4 +1,4 @@
-import type { PieArcDatum } from 'd3';
+import type { PieArcDatum } from 'd3-shape';
 import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
 import type { PreparedPieSeries } from '../../useSeries/types';
 export type SegmentData = {

package/dist/cjs/hooks/useShapes/pie/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CurveFactory } from 'd3';
+import type { CurveFactory } from 'd3-shape';
 import type { PointPosition } from '../../../types';
 import type { PreparedPieData, SegmentData } from './types';
 export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;

package/dist/cjs/hooks/useShapes/pie/utils.js

@@ -1,4 +1,4 @@
-import { curveBasis, curveLinear, pie } from 'd3';
+import { curveBasis, curveLinear, pie } from 'd3-shape';
 export const pieGenerator = pie()
     .value((d) => d.value)
     .sort(null);

package/dist/cjs/hooks/useShapes/radar/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedRadarData } from './types';
 type PrepareRadarSeriesArgs = {

package/dist/cjs/hooks/useShapes/radar/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { color, line, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/radar/prepare-data.js

@@ -1,4 +1,6 @@
-import { curveLinearClosed, line, range, scaleLinear } from 'd3';
+import { range } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { curveLinearClosed, line } from 'd3-shape';
 import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 export async function prepareRadarData(args) {

package/dist/cjs/hooks/useShapes/sankey/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedSankeyData } from './types';
 type ShapeProps = {

package/dist/cjs/hooks/useShapes/sankey/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 const b = block('sankey');

package/dist/cjs/hooks/useShapes/scatter/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export { prepareScatterData } from './prepare-data';

package/dist/cjs/hooks/useShapes/scatter/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/treemap/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedTreemapData } from './types';
 type ShapeProps = {

package/dist/cjs/hooks/useShapes/treemap/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { color, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';

package/dist/cjs/hooks/useShapes/treemap/prepare-data.js

@@ -1,4 +1,5 @@
-import { ascending, descending, sort, stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
+import { ascending, descending, sort } from 'd3-array';
+import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
 import { LayoutAlgorithm } from '../../../constants';
 import { getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';

package/dist/cjs/hooks/useShapes/treemap/types.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from 'd3';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { HtmlItem, TreemapSeriesData } from '../../../types';
 import type { PreparedTreemapSeries } from '../../useSeries/types';
 export type TreemapLabelData = {

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

@@ -1,4 +1,4 @@
-import type { BaseType } from 'd3';
+import type { BaseType } from 'd3-selection';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';

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

@@ -1,4 +1,5 @@
-import { path, select } from 'd3';
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;

package/dist/cjs/hooks/useShapes/waterfall/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedWaterfallData } from './types';
 export { prepareWaterfallData } from './prepare-data';

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { color, line as lineGenerator, select } from 'd3';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
 import { DASH_STYLE } from '../../../constants';
 import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColor, } from '../../../utils';

package/dist/cjs/hooks/useTooltip/index.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import { useBrush } from '../useBrush';
 import { selectionToZoomBounds } from './utils';
 export function useZoom(props) {

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

@@ -1,4 +1,4 @@
-import type { BrushSelection } from 'd3';
+import type { BrushSelection } from 'd3-brush';
 import type { ZoomType } from '../../constants';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';

package/dist/cjs/hooks/utils/bar-y.js

@@ -1,4 +1,4 @@
-import { max } from 'd3';
+import { max } from 'd3-array';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';

package/dist/cjs/hooks/utils/get-band-size.d.ts

@@ -1,4 +1,4 @@
-import type { AxisDomain, AxisScale } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
 export declare function getBandSize({ domain, scale, }: {
     domain: AxisDomain[];
     scale: AxisScale<AxisDomain> | undefined;

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

@@ -1,4 +1,4 @@
-import type { BaseType } from 'd3';
+import type { BaseType } from 'd3-selection';
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';

package/dist/cjs/utils/chart/axis/common.d.ts

@@ -1,4 +1,5 @@
-import type { AxisDomain, AxisScale, ScaleBand, ScaleTime } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
+import type { ScaleBand, ScaleTime } from 'd3-scale';
 import type { ChartScale, PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../../hooks';
 import type { ChartAxis } from '../../../types';
 import type { AxisDirection } from '../types';

package/dist/cjs/utils/chart/axis/common.js

@@ -1,4 +1,4 @@
-import { ascending, descending, reverse, sort } from 'd3';
+import { ascending, descending, reverse, sort } from 'd3-array';
 import clamp from 'lodash/clamp';
 import { getScaleTicks } from '../ticks';
 export function getTicksCountByPixelInterval({ axis, axisWidth, }) {

package/dist/cjs/utils/chart/axis-generators/bottom.d.ts

@@ -1,4 +1,5 @@
-import type { AxisDomain, AxisScale, Selection } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
+import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../../types';
 interface AxisBottomArgs {
     domain: {

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -1,4 +1,5 @@
-import { path, select } from 'd3';
+import { path } from 'd3-path';
+import { select } from 'd3-selection';
 import { getAxisItems, getXAxisOffset, getXTickPosition } from '../axis/common';
 import { calculateCos, calculateSin } from '../math';
 import { getLabelsSize, setEllipsisForOverflowText } from '../text';

package/dist/cjs/utils/chart/color.js

@@ -1,4 +1,5 @@
-import { range, scaleLinear } from 'd3';
+import { range } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
 export function getDomainForContinuousColorScale(args) {
     const { series } = args;
     const values = series.reduce((acc, s) => {

package/dist/cjs/utils/chart/common.js

@@ -1,4 +1,5 @@
-import { group, select } from 'd3';
+import { group } from 'd3-array';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';

package/dist/cjs/utils/chart/format.d.ts

@@ -1,4 +1,4 @@
-import type { AxisDomain } from 'd3';
+import type { AxisDomain } from 'd3-axis';
 import type { PreparedAxis } from '../../hooks';
 import type { CustomFormat, ValueFormat } from '../../types';
 export declare function getFormattedValue(args: {

package/dist/cjs/utils/chart/get-closest-data.js

@@ -1,4 +1,5 @@
-import { Delaunay, bisector, sort } from 'd3';
+import { bisector, sort } from 'd3-array';
+import { Delaunay } from 'd3-delaunay';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
 function getClosestYIndex(items, y) {

package/dist/cjs/utils/chart/legend.d.ts

@@ -1,4 +1,4 @@
-import type { Selection } from 'd3';
+import type { Selection } from 'd3-selection';
 export declare function createGradientRect(container: Selection<SVGGElement, unknown, null, undefined>, args: {
     x?: number;
     y?: number;

package/dist/cjs/utils/chart/series/sorting.js

@@ -1,4 +1,4 @@
-import { sort } from 'd3';
+import { sort } from 'd3-array';
 import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 import { SERIES_TYPE } from '../../../constants';

package/dist/cjs/utils/chart/symbol.js

@@ -1,4 +1,4 @@
-import { symbolCircle, symbolDiamond2, symbolSquare, symbolTriangle2 } from 'd3';
+import { symbolCircle, symbolDiamond2, symbolSquare, symbolTriangle2 } from 'd3-shape';
 import { SymbolType } from '../../constants';
 export const getSymbolType = (index) => {
     const scatterStyles = Object.values(SymbolType);

package/dist/cjs/utils/chart/text.d.ts

@@ -1,4 +1,4 @@
-import type { Selection } from 'd3';
+import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
 export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number, textWidth?: number): void;
 export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number, textWidth?: number): void;

package/dist/cjs/utils/chart/ticks/datetime.js

@@ -1,4 +1,5 @@
-import { bisector, tickStep, utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3';
+import { bisector, tickStep } from 'd3-array';
+import { utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3-time';
 import { DAY, HOUR, MINUTE, MONTH, SECOND, WEEK, YEAR } from '../../../constants';
 const tickIntervals = [
     [utcSecond, 1, SECOND],

package/dist/cjs/utils/chart/ticks/index.d.ts

@@ -1,4 +1,4 @@
-import type { AxisDomain, AxisScale } from 'd3';
+import type { AxisDomain, AxisScale } from 'd3-axis';
 import type { ChartScale } from '../../../hooks';
 export declare function getScaleTicks({ scale, ticksCount, }: {
     scale: ChartScale | AxisScale<AxisDomain>;

package/dist/cjs/utils/dispatcher.js

@@ -1,4 +1,4 @@
-import { dispatch } from 'd3';
+import { dispatch } from 'd3-dispatch';
 export const EventType = {
     CLICK_CHART: 'click-chart',
     HOVER_SHAPE: 'hover-shape',

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { line, select } from 'd3';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
 import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 import { block, getLineDashArray } from '../../utils';
 import './styles.css';

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { line, select } from 'd3';
+import { select } from 'd3-selection';
+import { line } from 'd3-shape';
 import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 import { block, getLineDashArray } from '../../utils';
 import './styles.css';

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

@@ -61,7 +61,7 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
         rangeSliderState,
@@ -270,7 +270,7 @@ export const ChartInner = (props) => {
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
-            preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
+            preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
 import type { ChartScale } from '../../hooks/useAxisScales/types';
 import type { useChartInnerState } from './useChartInnerState';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { pointer } from 'd3';
+import { pointer } from 'd3-selection';
 import get from 'lodash/get';
 import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
 import type { PreparedChart } from '../../hooks/types';
 import type { LegendConfig } from '../../types';

package/dist/esm/components/ChartInner/useChartInnerState.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
 type Props = {
     dispatcher: Dispatch<object>;

package/dist/esm/components/ChartInner/useDefaultState.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
 import type { ChartScale } from '../../hooks/useAxisScales/types';
 type Props = {

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

@@ -16,7 +16,7 @@ export function useDefaultState(props) {
         // Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
         // listeners first; parent effects run before child effects in React.
         queueMicrotask(() => {
-            var _a;
+            var _a, _b;
             const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
             const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
             if (x === undefined || y === undefined) {
@@ -48,6 +48,9 @@ export function useDefaultState(props) {
                     clientX: rect.left + svgPointerX,
                     clientY: rect.top + svgPointerY,
                 });
+            if (syntheticEvent) {
+                (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.dispatchEvent(syntheticEvent);
+            }
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: closest,
                 xAxis,

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { scaleLinear, select, symbol } from 'd3';
+import { scaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import { symbol } from 'd3-shape';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, } from '../../utils';

package/dist/esm/components/RangeSlider/utils.js

@@ -1,4 +1,4 @@
-import { path } from 'd3';
+import { path } from 'd3-path';
 export function getFramedPath(args) {
     const { height, strokeWidth, width } = args;
     const p = path();

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch } from 'd3-dispatch';
 import type { PreparedTooltip, PreparedXAxis, PreparedYAxis } from '../../hooks';
 import './styles.css';
 type TooltipProps = {

package/dist/esm/components/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select } from 'd3-selection';
 import debounce from 'lodash/debounce';
 import { i18nFactory } from '../i18n';
 import { getUniqId } from '../utils';

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

@@ -1,6 +1,6 @@
 import { duration } from '@gravity-ui/date-utils';
-import { line as lineGenerator } from 'd3';
 import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
 import { getLineDashArray, isTimeScale } from '../../utils';
 export function getInitialRangeSliderState(args) {
     const { defaultRange, xScale } = args;

package/dist/esm/hooks/useAxis/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../../constants';
-import { TIME_UNITS, calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
@@ -49,7 +49,10 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
             html: axis.labels.html,
         })).maxHeight
         : axis.labels.lineHeight;
-    const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
+    const maxHeight = rotation
+        ? Math.abs(calculateSin(rotation)) * axis.labels.maxWidth +
+            Math.abs(calculateCos(rotation)) * axis.labels.lineHeight
+        : labelsHeight;
     axis.labels.height = Math.min(maxHeight, labelsHeight);
     axis.labels.rotation = rotation;
 }