@gravity-ui/charts 1.40.0 → 1.41.1

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/types/chart/tooltip.d.ts

@@ -113,6 +113,10 @@ export type ChartTooltipRowRendererArgs = {
     value: string | number | null | undefined;
     formattedValue?: string;
     hovered?: TooltipDataChunk<unknown>[];
+    /**
+     * CSS class name pre-built with active/striped modifiers.
+     * Apply it to the root `<tr>` element of the returned row: `<tr className={className}>`.
+     */
     className?: string;
 };
 export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk<T>, b: TooltipDataChunk<T>) => number;
@@ -123,7 +127,26 @@ export interface ChartTooltip<T = MeaningfulAny> {
     /**
      * Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
      * It is useful in cases where you need to display additional information, but keep the general format of the tooltip.
-     * If a string is returned, it will be interpreted as raw HTML and inserted without escaping.
+     *
+     * The returned React element must be a `<tr>` so that it fits into the table layout used by the tooltip.
+     * Apply the `className` arg to the root `<tr>` to get the correct active/striped styles.
+     *
+     * If a string is returned, it will be parsed as HTML and rendered as-is — the string must be a complete
+     * `<tr>...</tr>` element.
+     * @example React element
+     * ```tsx
+     * rowRenderer: ({id, name, value, className}) => (
+     *   <tr key={id} className={className}>
+     *     <td>{name}</td>
+     *     <td>{value}</td>
+     *   </tr>
+     * )
+     * ```
+     * @example Raw HTML string
+     * ```ts
+     * rowRenderer: ({name, value, className}) =>
+     *   `<tr class="${className}"><td>${name}</td><td>${value}</td></tr>`
+     * ```
      */
     rowRenderer?: ((args: ChartTooltipRowRendererArgs) => React.ReactElement | string) | null;
     pin?: {

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

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.40.0",
+  "version": "1.41.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -70,9 +70,22 @@
     "@gravity-ui/date-utils": "^2.5.4",
     "@gravity-ui/i18n": "^1.6.0",
     "@gravity-ui/icons": "^2.15.0",
-    "d3": "^7.9.0",
+    "d3-array": "^3.2.4",
+    "d3-axis": "^3.0.0",
+    "d3-brush": "^3.0.0",
+    "d3-color": "^3.1.0",
+    "d3-delaunay": "^6.0.4",
+    "d3-dispatch": "^3.0.1",
+    "d3-hierarchy": "^3.1.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-path": "^3.1.0",
+    "d3-random": "^3.0.1",
     "d3-sankey": "^0.12.3",
+    "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-time": "^3.1.0",
+    "html-react-parser": "^5.2.17",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"
   },