@gravity-ui/chartkit 4.6.0 → 4.7.0

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -6,6 +6,9 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export type AxisDirection = 'x' | 'y';
+export type NodeWithD3Data<T = unknown> = Element & {
+    __data__: T;
+};
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
     data: unknown;
@@ -68,3 +71,5 @@ export declare const getDataCategoryValue: (args: {
     data: ChartKitWidgetSeriesData;
 }) => string;
 export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
+export declare const isNodeContainsD3Data: (node?: Element | null) => node is NodeWithD3Data<unknown>;
+export declare const extractD3DataFromNode: <T extends unknown>(node: NodeWithD3Data<T>) => T;

package/build/plugins/d3/renderer/utils/index.js

@@ -120,18 +120,16 @@ export const formatAxisTickLabel = (args) => {
  * @return {number} The height of the text element.
  */
 export const getHorisontalSvgTextHeight = (args) => {
+    var _a;
     const { text, style } = args;
-    const textSelection = select(document.body).append('text').text(text);
+    const container = select(document.body).append('svg');
+    const textSelection = container.append('text').text(text);
     const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
-    let height = 0;
     if (fontSize) {
-        textSelection.style('font-size', fontSize);
+        textSelection.style('font-size', fontSize).style('alignment-baseline', 'after-edge');
     }
-    textSelection
-        .each(function () {
-        height = this.getBoundingClientRect().height;
-    })
-        .remove();
+    const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+    container.remove();
     return height;
 };
 const extractCategoryValue = (args) => {
@@ -163,3 +161,10 @@ export function getClosestPointsRange(axis, points) {
     }
     return points[1] - points[0];
 }
+// https://d3js.org/d3-selection/joining#selection_data
+export const isNodeContainsD3Data = (node) => {
+    return Boolean(node && '__data__' in node);
+};
+export const extractD3DataFromNode = (node) => {
+    return node.__data__;
+};

package/build/plugins/d3/renderer/utils/math.d.ts

@@ -21,3 +21,5 @@ export declare const calculateNumericProperty: (args: {
     value?: string | number | null;
     base?: number;
 }) => number | undefined;
+export declare function calculateCos(deg: number, precision?: number): number;
+export declare function calculateSin(deg: number, precision?: number): number;

package/build/plugins/d3/renderer/utils/math.js

@@ -41,3 +41,11 @@ export const calculateNumericProperty = (args) => {
     }
     return value;
 };
+export function calculateCos(deg, precision = 2) {
+    const factor = Math.pow(10, precision);
+    return Math.floor(Math.cos((Math.PI / 180) * deg) * factor) / factor;
+}
+export function calculateSin(deg, precision = 2) {
+    const factor = Math.pow(10, precision);
+    return Math.floor(Math.sin((Math.PI / 180) * deg) * factor) / factor;
+}

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -8,13 +8,13 @@ export declare function hasOverlappingLabels({ width, labels, padding, style, }:
     style?: BaseTextStyle;
     padding?: number;
 }): boolean;
-export declare function getLabelsMaxWidth({ labels, style, transform, }: {
+export declare function getLabelsMaxWidth({ labels, style, rotation, }: {
     labels: string[];
-    style?: BaseTextStyle;
-    transform?: string;
+    style?: Record<string, string>;
+    rotation?: number;
 }): number;
-export declare function getLabelsMaxHeight({ labels, style, transform, }: {
+export declare function getLabelsMaxHeight({ labels, style, rotation, }: {
     labels: string[];
-    style?: BaseTextStyle;
-    transform?: string;
+    style?: Record<string, string>;
+    rotation?: number;
 }): number;

package/build/plugins/d3/renderer/utils/text.js

@@ -1,14 +1,14 @@
 import { select } from 'd3';
 export function setEllipsisForOverflowText(selection, maxWidth) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     let text = selection.text();
-    selection.text(null).attr('text-anchor', 'left').append('title').text(text);
-    const tSpan = selection.append('tspan').text(text);
-    let textLength = ((_a = tSpan.node()) === null || _a === void 0 ? void 0 : _a.getComputedTextLength()) || 0;
+    selection.text(null).append('title').text(text);
+    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
+    let textLength = ((_b = (_a = tSpan.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
     while (textLength > maxWidth && text.length > 1) {
         text = text.slice(0, -1);
         tSpan.text(text + '…');
-        textLength = ((_b = tSpan.node()) === null || _b === void 0 ? void 0 : _b.getComputedTextLength()) || 0;
+        textLength = ((_d = (_c = tSpan.node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width) || 0;
     }
 }
 export function setEllipsisForOverflowTexts(selection, maxWidth) {
@@ -29,12 +29,14 @@ export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
     textElement.remove();
     return result;
 }
-function renderLabels(selection, { labels, style, transform, }) {
-    const text = selection
-        .append('g')
-        .append('text')
-        .attr('transform', transform || '')
-        .style('font-size', (style === null || style === void 0 ? void 0 : style.fontSize) || '');
+function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
+    const text = selection.append('g').append('text');
+    Object.entries(style).forEach(([name, value]) => {
+        text.style(name, value);
+    });
+    Object.entries(attrs).forEach(([name, value]) => {
+        text.attr(name, value);
+    });
     text.selectAll('tspan')
         .data(labels)
         .enter()
@@ -44,18 +46,26 @@ function renderLabels(selection, { labels, style, transform, }) {
         .text((d) => d);
     return text;
 }
-export function getLabelsMaxWidth({ labels, style, transform, }) {
+export function getLabelsMaxWidth({ labels, style, rotation, }) {
     var _a, _b;
     const svg = select(document.body).append('svg');
-    svg.call(renderLabels, { labels, style, transform });
+    const textSelection = renderLabels(svg, { labels, style });
+    if (rotation) {
+        textSelection.attr('text-anchor', 'end').style('transform', `rotate(${rotation}deg)`);
+    }
     const maxWidth = ((_b = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
     svg.remove();
     return maxWidth;
 }
-export function getLabelsMaxHeight({ labels, style, transform, }) {
+export function getLabelsMaxHeight({ labels, style, rotation, }) {
     var _a, _b;
     const svg = select(document.body).append('svg');
-    svg.call(renderLabels, { labels, style, transform });
+    const textSelection = renderLabels(svg, { labels, style });
+    if (rotation) {
+        textSelection
+            .attr('text-anchor', rotation > 0 ? 'start' : 'end')
+            .style('transform', `rotate(${rotation}deg)`);
+    }
     const maxHeight = ((_b = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0;
     svg.remove();
     return maxHeight;

package/build/types/widget-data/axis.d.ts

@@ -21,6 +21,11 @@ export type ChartKitWidgetAxisLabels = {
      * If there is enough space, labels are not rotated.
      * As the chart gets narrower, it will start rotating the labels -45 degrees. */
     autoRotation?: boolean;
+    /** Rotation of the labels in degrees.
+     *
+     * @default: 0
+     */
+    rotation?: number;
 };
 export type ChartKitWidgetAxis = {
     categories?: string[];
@@ -32,6 +37,11 @@ export type ChartKitWidgetAxis = {
     lineColor?: string;
     title?: {
         text?: string;
+        /** The pixel distance between the axis labels or line and the title.
+         *
+         * Defaults to 4 for horizontal axes, 8 for vertical.
+         * */
+        margin?: number;
     };
     /** The minimum value of the axis. If undefined the min value is automatically calculate. */
     min?: number;

package/build/types/widget-data/series.d.ts

@@ -7,6 +7,37 @@ export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeries
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
+type BasicHoverState = {
+    /**
+     * Enable separate styles for the hovered series.
+     *
+     * @default true
+     * */
+    enabled?: boolean;
+    /**
+     * How much to brighten/darken the point on hover. Use positive to brighten, negative to darken.
+     * The behavior of this property is dependent on the implementing color space ([more details](https://d3js.org/d3-color#color_brighter)).
+     * For example in case of using rgb color you can use floating point number from `-5.0` to `5.0`.
+     * Rgb color space is used by default.
+     *
+     * @default 0.3
+     */
+    brightness?: number;
+};
+type BasicInactiveState = {
+    /**
+     * Enable separate styles for the inactive series.
+     *
+     * @default true
+     * */
+    enabled?: boolean;
+    /**
+     * Opacity of series elements (bars, data labels)
+     *
+     * @default 0.5
+     * */
+    opacity?: number;
+};
 export type ChartKitWidgetSeriesOptions = {
     /** Individual data label for each point. */
     dataLabels?: {
@@ -45,5 +76,25 @@ export type ChartKitWidgetSeriesOptions = {
              * */
             direction?: 'asc' | 'desc';
         };
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
+    pie?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
+    scatter?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
     };
 };
+export {};

package/build/types/widget-data/tooltip.d.ts

@@ -1,13 +1,24 @@
 /// <reference types="react" />
-import type { ChartKitWidgetSeries, ChartKitWidgetSeriesData } from './series';
-export type TooltipHoveredData<T = any> = {
-    data: ChartKitWidgetSeriesData<T>;
-    series: ChartKitWidgetSeries;
+import type { BarXSeries, BarXSeriesData } from './bar-x';
+import type { PieSeries, PieSeriesData } from './pie';
+import type { ScatterSeries, ScatterSeriesData } from './scatter';
+export type TooltipDataChunkBarX<T = any> = {
+    data: BarXSeriesData<T>;
+    series: BarXSeries<T>;
 };
+export type TooltipDataChunkPie<T = any> = {
+    data: PieSeriesData<T>;
+    series: Omit<PieSeries<T>, 'data'>;
+};
+export type TooltipDataChunkScatter<T = any> = {
+    data: ScatterSeriesData<T>;
+    series: ScatterSeries<T>;
+};
+export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T>;
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
-    renderer?: (data: {
-        hovered: TooltipHoveredData<T>;
-    }) => React.ReactElement;
+    renderer?: (args: {
+        hovered: TooltipDataChunk<T>[];
+    }) => React.ReactElement | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.8.0",
+    "@gravity-ui/yagr": "^3.10.0",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"

package/build/plugins/d3/renderer/hooks/useChartEvents/index.d.ts

@@ -1,5 +0,0 @@
-export declare const useChartEvents: () => {
-    chartHovered: boolean;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
-};

package/build/plugins/d3/renderer/hooks/useChartEvents/index.js

@@ -1,15 +0,0 @@
-import React from 'react';
-export const useChartEvents = () => {
-    const [chartHovered, setChartHovered] = React.useState(false);
-    const handleMouseEnter = React.useCallback(() => {
-        setChartHovered(true);
-    }, []);
-    const handleMouseLeave = React.useCallback(() => {
-        setChartHovered(false);
-    }, []);
-    return {
-        chartHovered,
-        handleMouseEnter,
-        handleMouseLeave,
-    };
-};

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
-import type { ChartScale } from '../useAxisScales';
-import type { ChartOptions } from '../useChartOptions/types';
-import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-import type { PreparedBarXSeries } from '../useSeries/types';
-type Args = {
-    top: number;
-    left: number;
-    series: PreparedBarXSeries[];
-    seriesOptions?: ChartKitWidgetSeriesOptions;
-    xAxis: ChartOptions['xAxis'];
-    xScale: ChartScale;
-    yAxis: ChartOptions['yAxis'];
-    yScale: ChartScale;
-    onSeriesMouseMove?: OnSeriesMouseMove;
-    onSeriesMouseLeave?: OnSeriesMouseLeave;
-    svgContainer: SVGSVGElement | null;
-};
-export declare function BarXSeriesShapes(args: Args): React.JSX.Element;
-export {};

package/build/plugins/d3/renderer/hooks/useShapes/defaults.d.ts

@@ -1,5 +0,0 @@
-export declare const DEFAULT_BAR_X_SERIES_OPTIONS: {
-    barMaxWidth: number;
-    barPadding: number;
-    groupPadding: number;
-};

package/build/plugins/d3/renderer/hooks/useShapes/defaults.js

@@ -1,5 +0,0 @@
-export const DEFAULT_BAR_X_SERIES_OPTIONS = {
-    barMaxWidth: 50,
-    barPadding: 0.1,
-    groupPadding: 0.2,
-};

package/build/plugins/d3/renderer/hooks/useShapes/scatter.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { ScatterSeries } from '../../../../../types/widget-data';
-import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
-import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-type ScatterSeriesShapeProps = {
-    top: number;
-    left: number;
-    series: ScatterSeries;
-    xAxis: PreparedAxis;
-    xScale: ChartScale;
-    yAxis: PreparedAxis[];
-    yScale: ChartScale;
-    svgContainer: SVGSVGElement | null;
-    onSeriesMouseMove?: OnSeriesMouseMove;
-    onSeriesMouseLeave?: OnSeriesMouseLeave;
-};
-export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;
-export {};

package/build/plugins/d3/renderer/hooks/useShapes/scatter.js

@@ -1,89 +0,0 @@
-import React from 'react';
-import { pointer, select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../utils/cn';
-import { getDataCategoryValue } from '../../utils';
-const b = block('d3-scatter');
-const DEFAULT_SCATTER_POINT_RADIUS = 4;
-const prepareLinearScatterData = (data) => {
-    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
-};
-const getCxAttr = (args) => {
-    const { point, xAxis, xScale } = args;
-    let cx;
-    if (xAxis.type === 'category') {
-        const xBandScale = xScale;
-        const categories = get(xAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
-        cx = (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
-    }
-    else {
-        const xLinearScale = xScale;
-        cx = xLinearScale(point.x);
-    }
-    return cx;
-};
-const getCyAttr = (args) => {
-    const { point, yAxis, yScale } = args;
-    let cy;
-    if (yAxis.type === 'category') {
-        const yBandScale = yScale;
-        const categories = get(yAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
-        cy = (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
-    }
-    else {
-        const yLinearScale = yScale;
-        cy = yLinearScale(point.y);
-    }
-    return cy;
-};
-export function ScatterSeriesShape(props) {
-    const { series, xAxis, xScale, yAxis, yScale, svgContainer, left, top, onSeriesMouseMove, onSeriesMouseLeave, } = props;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        var _a;
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
-            ? series.data
-            : prepareLinearScatterData(series.data);
-        svgElement
-            .selectAll('circle')
-            .data(preparedData)
-            .join((enter) => enter.append('circle').attr('class', b('point')), (update) => update, (exit) => exit.remove())
-            .attr('fill', (d) => d.color || series.color || '')
-            .attr('r', (d) => d.radius || DEFAULT_SCATTER_POINT_RADIUS)
-            .attr('cx', (d) => getCxAttr({ point: d, xAxis, xScale }))
-            .attr('cy', (d) => getCyAttr({ point: d, yAxis: yAxis[0], yScale }))
-            .on('mousemove', (e, d) => {
-            const [x, y] = pointer(e, svgContainer);
-            onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
-                hovered: {
-                    data: d,
-                    series,
-                },
-                pointerPosition: [x - left, y - top],
-            });
-        })
-            .on('mouseleave', () => {
-            if (onSeriesMouseLeave) {
-                onSeriesMouseLeave();
-            }
-        });
-    }, [
-        series,
-        xAxis,
-        xScale,
-        yAxis,
-        yScale,
-        svgContainer,
-        left,
-        top,
-        onSeriesMouseMove,
-        onSeriesMouseLeave,
-    ]);
-    return React.createElement("g", { ref: ref, className: b() });
-}