@gravity-ui/chartkit 4.8.0 → 4.9.0

package/build/plugins/d3/renderer/D3Widget.js

@@ -1,28 +1,44 @@
 import React from 'react';
 import { select } from 'd3';
 import debounce from 'lodash/debounce';
-import { getRandomCKId } from '../../../utils';
+import afterFrame from 'afterframe';
+import { getRandomCKId, measurePerformance } from '../../../utils';
 import { Chart } from './components';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
-    const { data, onLoad, onRender } = props;
+    const { data, onLoad, onRender, onChartLoad } = props;
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
-    //FIXME: add chartPerfomance data to callbacks;
+    const performanceMeasure = React.useRef(measurePerformance());
     React.useLayoutEffect(() => {
-        if (onLoad) {
-            onLoad({});
+        if (onChartLoad) {
+            onChartLoad({});
         }
-        if (onRender) {
-            onRender({});
+    }, [onChartLoad]);
+    React.useLayoutEffect(() => {
+        if (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) {
+            if (!performanceMeasure.current) {
+                performanceMeasure.current = measurePerformance();
+            }
+            afterFrame(() => {
+                var _a;
+                const renderTime = (_a = performanceMeasure.current) === null || _a === void 0 ? void 0 : _a.end();
+                onRender === null || onRender === void 0 ? void 0 : onRender({
+                    renderTime,
+                });
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                    widgetRendering: renderTime,
+                });
+                performanceMeasure.current = null;
+            });
         }
-    }, []);
+    }, [data, onRender, onLoad, dimensions]);
     const handleResize = React.useCallback(() => {
         var _a;
         const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
         if (parentElement) {
-            const { top, left, width, height } = parentElement.getBoundingClientRect();
-            setDimensions({ top, left, width, height });
+            const { width, height } = parentElement.getBoundingClientRect();
+            setDimensions({ width, height });
         }
     }, []);
     const debuncedHandleResize = React.useMemo(() => {
@@ -54,6 +70,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: data }))));
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { width: dimensions.width, height: dimensions.height, data: data }))));
 });
 export default D3Widget;

package/build/plugins/d3/renderer/components/Chart.d.ts

@@ -2,8 +2,6 @@ import React from 'react';
 import type { ChartKitWidgetData } from '../../../../types';
 import './styles.css';
 type Props = {
-    top: number;
-    left: number;
     width: number;
     height: number;
     data: ChartKitWidgetData;

package/build/plugins/d3/renderer/components/Chart.js

@@ -14,8 +14,8 @@ import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
     // FIXME: add data validation
-    const { top, left, width, height, data } = props;
-    const svgRef = React.createRef();
+    const { width, height, data } = props;
+    const svgRef = React.useRef(null);
     const dispatcher = React.useMemo(() => {
         return getD3Dispatcher();
     }, []);
@@ -50,8 +50,6 @@ export const Chart = (props) => {
     });
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const { shapes, shapesData } = useShapes({
-        top,
-        left,
         boundsWidth,
         boundsHeight,
         dispatcher,
@@ -74,7 +72,7 @@ export const Chart = (props) => {
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
                 shapes,
-                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) && Boolean(shapesData.length) && (React.createElement(TooltipTriggerArea, { boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, offsetLeft: left, offsetTop: top, shapesData: shapesData, svgContainer: svgRef.current }))),
+                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) && Boolean(shapesData.length) && (React.createElement(TooltipTriggerArea, { boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, shapesData: shapesData, svgContainer: svgRef.current }))),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0], hovered: hovered, pointerPosition: pointerPosition })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], hovered: hovered, pointerPosition: pointerPosition })));
 };

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { TooltipDataChunk } from '../../../../../types';
 import type { PreparedAxis } from '../../hooks';
 type Props = {
-    hovered: TooltipDataChunk;
+    hovered: TooltipDataChunk[];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
 };
-export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element | null;
+export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -5,13 +5,16 @@ import { formatNumber } from '../../../../shared';
 import { getDataCategoryValue } from '../../utils';
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, axis, data) => {
-    const categories = get(axis, 'categories', []);
     switch (axis.type) {
         case 'category': {
+            const categories = get(axis, 'categories', []);
             return getDataCategoryValue({ axisDirection: fieldName, categories, data });
         }
         case 'datetime': {
             const value = get(data, fieldName);
+            if (!value) {
+                return undefined;
+            }
             return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
         }
         case 'linear':
@@ -24,40 +27,44 @@ const getRowData = (fieldName, axis, data) => {
 const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
 const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
-    const { data, series } = hovered;
-    switch (series.type) {
-        case 'scatter': {
-            const xRow = getXRowData(xAxis, data);
-            const yRow = getYRowData(yAxis, data);
-            return (React.createElement("div", null,
-                React.createElement("div", null,
-                    React.createElement("span", null, "X:\u00A0"),
-                    React.createElement("b", null, xRow)),
-                React.createElement("div", null,
-                    React.createElement("span", null, "Y:\u00A0"),
-                    React.createElement("b", null, yRow))));
-        }
-        case 'bar-x': {
-            const xRow = getXRowData(xAxis, data);
-            const yRow = getYRowData(yAxis, data);
-            return (React.createElement("div", null,
-                React.createElement("div", null, xRow),
-                React.createElement("div", null,
+    return (React.createElement(React.Fragment, null, hovered.map(({ data, series }, i) => {
+        const id = get(series, 'id', i);
+        switch (series.type) {
+            case 'scatter':
+            case 'line':
+            case 'bar-x': {
+                const xRow = getXRowData(xAxis, data);
+                const yRow = getYRowData(yAxis, data);
+                return (React.createElement("div", { key: id },
+                    React.createElement("div", null, xRow),
+                    React.createElement("div", null,
+                        React.createElement("span", null,
+                            React.createElement("b", null, series.name),
+                            ": ",
+                            yRow))));
+            }
+            case 'bar-y': {
+                const xRow = getXRowData(xAxis, data);
+                const yRow = getYRowData(yAxis, data);
+                return (React.createElement("div", { key: id },
+                    React.createElement("div", null, yRow),
+                    React.createElement("div", null,
+                        React.createElement("span", null,
+                            React.createElement("b", null, series.name),
+                            ": ",
+                            xRow))));
+            }
+            case 'pie': {
+                const pieSeries = series;
+                return (React.createElement("div", { key: id },
                     React.createElement("span", null,
-                        React.createElement("b", null, series.name),
-                        ": ",
-                        yRow))));
-        }
-        case 'pie': {
-            const pieSeries = series;
-            return (React.createElement("div", null,
-                React.createElement("span", null,
-                    pieSeries.name || pieSeries.id,
-                    "\u00A0"),
-                React.createElement("span", null, pieSeries.value)));
+                        pieSeries.name || pieSeries.id,
+                        "\u00A0"),
+                    React.createElement("span", null, pieSeries.value)));
+            }
+            default: {
+                return null;
+            }
         }
-        default: {
-            return null;
-        }
-    }
+    })));
 };

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.d.ts

@@ -5,8 +5,6 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
     dispatcher: Dispatch<object>;
-    offsetTop: number;
-    offsetLeft: number;
     shapesData: ShapeData[];
     svgContainer: SVGSVGElement | null;
 };

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.js

@@ -1,66 +1,136 @@
 import React from 'react';
 import throttle from 'lodash/throttle';
-import { bisector, pointer, sort } from 'd3';
+import { bisector, pointer, sort, group } from 'd3';
 import { extractD3DataFromNode, isNodeContainsD3Data } from '../../utils';
 const THROTTLE_DELAY = 50;
 const isNodeContainsData = (node) => {
     return isNodeContainsD3Data(node);
 };
-const getCalculationType = (shapesData) => {
-    if (shapesData.every((d) => d.series.type === 'bar-x')) {
-        return 'x-primary';
+function getBarXShapeData(args) {
+    var _a;
+    const { shapesData, point: [pointerX, pointerY], top, left, xData, container, } = args;
+    const barWidthOffset = shapesData[0].width / 2;
+    const xPosition = pointerX - left - barWidthOffset;
+    const xDataIndex = bisector((d) => d.x).center(xData, xPosition);
+    const xNodes = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(`[x="${(_a = xData[xDataIndex]) === null || _a === void 0 ? void 0 : _a.x}"]`)) || []);
+    if (xNodes.length === 1 && isNodeContainsData(xNodes[0])) {
+        return [extractD3DataFromNode(xNodes[0])];
     }
-    return 'none';
-};
+    if (xNodes.length > 1 && xNodes.every(isNodeContainsData)) {
+        const yPosition = pointerY - top;
+        const xyNode = xNodes.find((node, i) => {
+            const { y, height } = extractD3DataFromNode(node);
+            if (i === xNodes.length - 1) {
+                return yPosition <= y + height;
+            }
+            return yPosition >= y && yPosition <= y + height;
+        });
+        if (xyNode) {
+            return [extractD3DataFromNode(xyNode)];
+        }
+    }
+    return [];
+}
+function getLineShapesData(args) {
+    const { xData, point: [pointerX], } = args;
+    const xDataIndex = bisector((d) => d.x).center(xData, pointerX);
+    const selectedLineShape = xData[xDataIndex];
+    if (selectedLineShape) {
+        return [
+            {
+                series: selectedLineShape.series,
+                data: selectedLineShape.data,
+            },
+        ];
+    }
+    return [];
+}
+function getBarYData(args) {
+    var _a;
+    const { data, point: [pointerX, pointerY], } = args;
+    const yDataIndex = bisector((d) => d.y).center(data, pointerY);
+    const shapesByY = ((_a = data[yDataIndex]) === null || _a === void 0 ? void 0 : _a.items) || [];
+    const xDataIndex = bisector((d) => d.x).left(shapesByY, pointerX);
+    const result = shapesByY[Math.min(xDataIndex, shapesByY.length - 1)];
+    return result
+        ? [
+            {
+                series: result.series,
+                data: result.data,
+            },
+        ]
+        : [];
+}
 export const TooltipTriggerArea = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, offsetTop, offsetLeft, shapesData, svgContainer } = args;
+    const { boundsWidth, boundsHeight, dispatcher, shapesData, svgContainer } = args;
     const rectRef = React.useRef(null);
-    const calculationType = React.useMemo(() => {
-        return getCalculationType(shapesData);
+    const xBarData = React.useMemo(() => {
+        const result = shapesData
+            .filter((sd) => sd.series.type === 'bar-x')
+            .map((sd) => ({ x: sd.x, data: sd }));
+        return sort(result, (item) => item.x);
+    }, [shapesData]);
+    const xLineData = React.useMemo(() => {
+        const result = shapesData
+            .filter((sd) => sd.series.type === 'line')
+            .reduce((acc, sd) => {
+            return acc.concat(sd.points.map((d) => ({
+                x: d.x,
+                data: d.data,
+                series: sd.series,
+            })));
+        }, []);
+        return sort(result, (item) => item.x);
     }, [shapesData]);
-    const xData = React.useMemo(() => {
-        return calculationType === 'x-primary'
-            ? sort(new Set(shapesData.map((d) => d.x)))
-            : [];
-    }, [shapesData, calculationType]);
-    const handleXprimaryMouseMove = (e) => {
-        var _a, _b, _c;
-        const { left, top } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { left: 0, top: 0 };
+    const barYData = React.useMemo(() => {
+        const barYShapeData = shapesData.filter((sd) => sd.series.type === 'bar-y');
+        const result = Array.from(group(barYShapeData, (sd) => sd.y)).map(([y, shapes]) => {
+            const yValue = y + shapes[0].height / 2;
+            return {
+                y: yValue,
+                items: sort(shapes.map((shape) => {
+                    const preparedData = shape;
+                    return {
+                        x: preparedData.x + preparedData.width,
+                        data: preparedData.data,
+                        series: shape.series,
+                    };
+                }), (item) => item.x),
+            };
+        });
+        return sort(result, (item) => item.y);
+    }, [shapesData]);
+    const handleMouseMove = (e) => {
+        var _a, _b;
+        const { left: ownLeft, top: ownTop } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+            left: 0,
+            top: 0,
+        };
+        const { left: containerLeft, top: containerTop } = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || {
+            left: 0,
+            top: 0,
+        };
         const [pointerX, pointerY] = pointer(e, svgContainer);
-        const barWidthOffset = shapesData[0].width / 2;
-        const xPosition = pointerX - left - barWidthOffset - window.pageXOffset;
-        const xDataIndex = bisector((d) => d).center(xData, xPosition);
-        const xNodes = Array.from(((_c = (_b = rectRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.querySelectorAll(`[x="${xData[xDataIndex]}"]`)) || []);
-        let hoverShapeData;
-        if (xNodes.length === 1 && isNodeContainsData(xNodes[0])) {
-            hoverShapeData = [extractD3DataFromNode(xNodes[0])];
-        }
-        else if (xNodes.length > 1 && xNodes.every(isNodeContainsData)) {
-            const yPosition = pointerY - top - window.pageYOffset;
-            const xyNode = xNodes.find((node, i) => {
-                const { y, height } = extractD3DataFromNode(node);
-                if (i === xNodes.length - 1) {
-                    return yPosition <= y + height;
-                }
-                return yPosition >= y && yPosition <= y + height;
-            });
-            if (xyNode) {
-                hoverShapeData = [extractD3DataFromNode(xyNode)];
-            }
-        }
-        if (hoverShapeData) {
-            const position = [pointerX - offsetLeft, pointerY - offsetTop];
+        const hoverShapeData = [];
+        hoverShapeData === null || hoverShapeData === void 0 ? void 0 : hoverShapeData.push(...getBarXShapeData({
+            shapesData,
+            point: [pointerX, pointerY],
+            left: ownLeft - containerLeft,
+            top: ownTop - containerTop,
+            xData: xBarData,
+            container: (_b = rectRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
+        }), ...getLineShapesData({
+            xData: xLineData,
+            point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
+        }), ...getBarYData({
+            data: barYData,
+            point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
+        }));
+        if (hoverShapeData.length) {
+            const position = [pointerX, pointerY];
             dispatcher.call('hover-shape', e.target, hoverShapeData, position);
         }
     };
-    const handleMouseMove = (e) => {
-        switch (calculationType) {
-            case 'x-primary': {
-                handleXprimaryMouseMove(e);
-                return;
-            }
-        }
-    };
     const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
     const handleMouseLeave = () => {
         throttledHandleMouseMove.cancel();

package/build/plugins/d3/renderer/components/Tooltip/index.d.ts

@@ -6,6 +6,7 @@ export * from './TooltipTriggerArea';
 type TooltipProps = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
+    svgContainer: SVGSVGElement | null;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
     hovered?: TooltipDataChunk[];

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -6,7 +6,7 @@ export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
 const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
-    const { tooltip, xAxis, yAxis, hovered, pointerPosition } = props;
+    const { tooltip, svgContainer, xAxis, yAxis, hovered, pointerPosition } = props;
     const ref = React.useRef(null);
     const size = React.useMemo(() => {
         if (ref.current && hovered) {
@@ -20,8 +20,9 @@ export const Tooltip = (props) => {
         if (hovered && pointerPosition && size) {
             const { clientWidth } = document.documentElement;
             const { width, height } = size;
+            const rect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
             const [pointerLeft, pointetTop] = pointerPosition;
-            const outOfRightBoudary = pointerLeft + width + POINTER_OFFSET_X >= clientWidth;
+            const outOfRightBoudary = pointerLeft + width + rect.left + POINTER_OFFSET_X >= clientWidth;
             const outOfTopBoundary = pointetTop - height / 2 <= 0;
             const left = outOfRightBoudary
                 ? pointerLeft - width - POINTER_OFFSET_X
@@ -33,14 +34,14 @@ export const Tooltip = (props) => {
             return { left: -1000, top: -1000 };
         }
         return undefined;
-    }, [hovered, pointerPosition, size]);
+    }, [hovered, pointerPosition, size, svgContainer]);
     const content = React.useMemo(() => {
         var _a;
         if (!hovered) {
             return null;
         }
         const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
-        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered[0], xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
     }, [hovered, tooltip, xAxis, yAxis]);
     if (!position || !hovered) {
         return null;

package/build/plugins/d3/renderer/components/styles.css

@@ -79,4 +79,5 @@
   border-radius: 3px;
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
   z-index: 100001;
+  text-wrap: nowrap;
 }

package/build/plugins/d3/renderer/constants/defaults/series-options.d.ts

@@ -1,11 +1,18 @@
 import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
-type DefauleBarXSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> & {
+type DefaultBarXSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> & {
     'bar-x': {
         barMaxWidth: number;
         barPadding: number;
         groupPadding: number;
     };
 };
-export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefauleBarXSeriesOptions;
+type DefaultBarYSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> & {
+    'bar-y': {
+        barMaxWidth: number;
+        barPadding: number;
+        groupPadding: number;
+    };
+};
+export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions;
 export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
 export {};

package/build/plugins/d3/renderer/constants/defaults/series-options.js

@@ -14,6 +14,21 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    'bar-y': {
+        barMaxWidth: 50,
+        barPadding: 0.1,
+        groupPadding: 0.2,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
     pie: {
         states: {
             hover: {
@@ -38,4 +53,16 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    line: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
 };

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

@@ -62,13 +62,27 @@ export function createYScale(axis, series, boundsHeight) {
     }
     throw new Error('Failed to create yScale');
 }
+function calculateXAxisPadding(series) {
+    let result = 0;
+    series.forEach((s) => {
+        switch (s.type) {
+            case 'bar-y': {
+                // Since labels can be located to the right of the bar, need to add an additional space
+                const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
+                result = Math.max(result, labelsMaxWidth);
+                break;
+            }
+        }
+    });
+    return result;
+}
 export function createXScale(axis, series, boundsWidth) {
     const xMin = get(axis, 'min');
     const xType = get(axis, 'type', 'linear');
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
     const maxPadding = get(axis, 'maxPadding', 0);
-    const xAxisMinPadding = boundsWidth * maxPadding;
+    const xAxisMinPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const xRange = [0, boundsWidth - xAxisMinPadding];
     switch (xType) {
         case 'linear': {

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsMaxHeight, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
+import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const scale = createXScale(axis, series, width);
@@ -27,14 +27,14 @@ function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
     const rotation = axis.labels.rotation || defaultRotation;
     const labelsHeight = rotation
-        ? getLabelsMaxHeight({
+        ? getLabelsSize({
             labels,
             style: {
                 'font-size': axis.labels.style.fontSize,
                 'font-weight': axis.labels.style.fontWeight || 'normal',
             },
             rotation,
-        })
+        }).maxHeight
         : axis.labels.lineHeight;
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, yAxisTitleDefaults, } from '../../constants';
-import { getHorisontalSvgTextHeight, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getLabelsMaxWidth, } from '../../utils';
+import { getHorisontalSvgTextHeight, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getLabelsSize, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -16,14 +16,14 @@ const getAxisLabelMaxWidth = (args) => {
         value: tick,
         step,
     }));
-    return getLabelsMaxWidth({
+    return getLabelsSize({
         labels,
         style: {
             'font-size': axis.labels.style.fontSize,
             'font-weight': axis.labels.style.fontWeight || '',
         },
         rotation: axis.labels.rotation,
-    });
+    }).maxWidth;
 };
 export const getPreparedYAxis = ({ series, yAxis, }) => {
     // FIXME: add support for n axises

package/build/plugins/d3/renderer/hooks/useSeries/constants.d.ts

@@ -1 +1,4 @@
+import { BaseTextStyle } from '../../../../../types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export declare const DEFAULT_DATALABELS_PADDING = 5;
+export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;

package/build/plugins/d3/renderer/hooks/useSeries/constants.js

@@ -1 +1,6 @@
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export const DEFAULT_DATALABELS_PADDING = 5;
+export const DEFAULT_DATALABELS_STYLE = {
+    fontSize: '11px',
+    fontWeight: 'bold',
+};

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

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { PreparedSeries, OnLegendItemClick } from './types';
 type Args = {

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

@@ -17,12 +17,13 @@ export const useSeries = (args) => {
             acc.push(...prepareSeries({
                 type: seriesType,
                 series: seriesList,
+                seriesOptions,
                 legend: preparedLegend,
                 colorScale,
             }));
             return acc;
         }, []);
-    }, [series, preparedLegend]);
+    }, [series, seriesOptions, preparedLegend]);
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(seriesOptions);
     }, [seriesOptions]);