@gravity-ui/charts 1.36.0 → 1.37.2

package/dist/esm/hooks/useChartDimensions/index.js

@@ -3,10 +3,11 @@ import { isAxisRelatedSeries } from '../../utils';
 import { getBoundsWidth } from './utils';
 export { getBoundsWidth } from './utils';
 const getBottomOffset = (args) => {
-    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
+    var _a;
+    const { hasAxisRelatedSeries, preparedLegend, legendConfig, preparedXAxis } = args;
     let result = 0;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'bottom') {
-        result += preparedLegend.height + preparedLegend.margin;
+        result += ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     if (!(preparedXAxis === null || preparedXAxis === void 0 ? void 0 : preparedXAxis.visible)) {
         return result;
@@ -24,26 +25,29 @@ const getBottomOffset = (args) => {
     }
     return result;
 };
-const getTopOffset = ({ preparedLegend }) => {
+const getTopOffset = ({ preparedLegend, legendConfig, }) => {
+    var _a;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top') {
-        return preparedLegend.height + preparedLegend.margin;
+        return ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     return 0;
 };
-const getRightOffset = ({ preparedLegend }) => {
+const getRightOffset = ({ preparedLegend, legendConfig, }) => {
+    var _a;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'right') {
-        return preparedLegend.width + preparedLegend.margin;
+        return ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.width) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     return 0;
 };
-const getLeftOffset = ({ preparedLegend }) => {
+const getLeftOffset = ({ preparedLegend, legendConfig, }) => {
+    var _a;
     if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left') {
-        return preparedLegend.width + preparedLegend.margin;
+        return ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.width) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin;
     }
     return 0;
 };
 export const useChartDimensions = (args) => {
-    const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width } = args;
+    const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width, legendConfig, } = args;
     return React.useMemo(() => {
         const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
         const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
@@ -51,12 +55,22 @@ export const useChartDimensions = (args) => {
             hasAxisRelatedSeries,
             preparedLegend,
             preparedXAxis,
+            legendConfig,
         });
-        const topOffset = getTopOffset({ preparedLegend });
-        const rightOffset = getRightOffset({ preparedLegend });
-        const leftOffset = getLeftOffset({ preparedLegend });
+        const topOffset = getTopOffset({ preparedLegend, legendConfig });
+        const rightOffset = getRightOffset({ preparedLegend, legendConfig });
+        const leftOffset = getLeftOffset({ preparedLegend, legendConfig });
         const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
         const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
         return { boundsWidth: adjustedBoundsWidth, boundsHeight };
-    }, [height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width]);
+    }, [
+        height,
+        margin,
+        preparedLegend,
+        legendConfig,
+        preparedSeries,
+        preparedXAxis,
+        preparedYAxis,
+        width,
+    ]);
 };

package/dist/esm/hooks/useRangeSlider/index.js

@@ -17,7 +17,7 @@ const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: true,
 };
 export function useRangeSlider(props) {
-    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
+    const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
     const filteredPreparedSeries = React.useMemo(() => {
         return preparedSeries.filter((s) => {
             if ('rangeSlider' in s && !s.rangeSlider.visible) {
@@ -31,6 +31,7 @@ export function useRangeSlider(props) {
         height,
         preparedChart,
         preparedLegend,
+        legendConfig,
         preparedSeries,
         preparedSeriesOptions,
         width,

package/dist/esm/hooks/useRangeSlider/types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis, LegendConfig } from '../../types';
 import type { PreparedRangeSlider, PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { BrushSelection, UseBrushProps } from '../useBrush/types';
@@ -16,6 +16,7 @@ export interface RangeSliderProps {
     onUpdate: (nextRangeSliderState?: RangeSliderState) => void;
     preparedChart: PreparedChart;
     preparedLegend: PreparedLegend | null;
+    legendConfig: LegendConfig | undefined;
     preparedRangeSlider: PreparedRangeSlider;
     preparedSeries: PreparedSeries[];
     preparedSeriesOptions: PreparedSeriesOptions;

package/dist/esm/hooks/useSeries/prepare-legend.d.ts

@@ -11,7 +11,7 @@ export declare function getLegendComponents(args: {
     chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
-}): {
+}): Promise<{
     legendConfig: {
         offset: {
             left: number;
@@ -24,6 +24,8 @@ export declare function getLegendComponents(args: {
             }[];
         } | undefined;
         maxWidth: number;
+        height: number;
+        width: number;
     };
     legendItems: LegendItem[][];
-};
+}>;

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -1,10 +1,9 @@
-import { select } from 'd3';
 import { groupBy } from 'lodash';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
-import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize } from '../../utils';
+import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize, getTextSizeFn, getTextWithElipsis, } from '../../utils';
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
@@ -87,68 +86,81 @@ function getFlattenLegendItems(series, preparedLegend) {
     return Object.values(grouped).reduce((acc, items) => {
         const s = items.find((item) => item.legend.enabled);
         if (s) {
-            acc.push(Object.assign(Object.assign({}, s), { id: s.legend.groupId, name: s.legend.itemText, height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
+            acc.push(Object.assign(Object.assign({}, s), { id: s.legend.groupId, name: s.legend.itemText, text: s.legend.itemText, height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
         }
         return acc;
     }, []);
 }
-function getGroupedLegendItems(args) {
+async function getGroupedLegendItems(args) {
     const { maxLegendWidth, items, preparedLegend } = args;
     const result = [[]];
-    const bodySelection = select(document.body);
     let textWidthsInLine = [0];
     let lineIndex = 0;
-    items.forEach((item) => {
-        const itemSelection = preparedLegend.html
-            ? bodySelection
-                .append('div')
-                .html(item.name)
-                .style('position', 'absolute')
-                .style('display', 'inline-block')
-                .style('white-space', 'nowrap')
-            : bodySelection.append('text').text(item.name).style('white-space', 'nowrap');
-        itemSelection
-            .style('font-size', preparedLegend.itemStyle.fontSize)
-            .each(function () {
-            const resultItem = clone(item);
-            const { height, width: textWidth } = this.getBoundingClientRect();
-            resultItem.height = height;
-            if (textWidth >
-                maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding) {
+    const getLegendItemTextSize = getTextSizeFn({ style: preparedLegend.itemStyle });
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const resultItem = clone(item);
+        resultItem.text = item.name;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        let textHeight = 0;
+        let textWidth = 0;
+        if (preparedLegend.html) {
+            const textSize = await getLabelsSize({
+                labels: [resultItem.text],
+                html: true,
+                style: preparedLegend.itemStyle,
+            });
+            textHeight = textSize.maxHeight;
+            textWidth = textSize.maxWidth;
+        }
+        else {
+            const textSize = await getLegendItemTextSize(resultItem.text);
+            textHeight = textSize.height;
+            textWidth = textSize.width;
+        }
+        resultItem.height = textHeight;
+        if (textWidth > maxTextWidth) {
+            if (preparedLegend.html) {
                 resultItem.overflowed = true;
-                resultItem.textWidth =
-                    maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+                resultItem.textWidth = maxTextWidth;
             }
             else {
-                resultItem.textWidth = textWidth;
-            }
-            textWidthsInLine.push(textWidth);
-            const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
-            if (!result[lineIndex]) {
-                result[lineIndex] = [];
+                resultItem.text = await getTextWithElipsis({
+                    text: resultItem.text,
+                    getTextWidth: async (s) => (await getLegendItemTextSize(s)).width,
+                    maxWidth: maxTextWidth,
+                });
+                resultItem.textWidth = (await getLegendItemTextSize(resultItem.text)).width;
             }
-            result[lineIndex].push(resultItem);
-            const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-                return acc + symbol.width + symbol.padding;
-            }, 0);
-            const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
-            const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;
-            const isCurrentLineOverMaxWidth = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
-            if (isOverflowedAsOnlyItemInLine) {
-                lineIndex += 1;
-                textWidthsInLine = [];
-            }
-            else if (isCurrentLineOverMaxWidth) {
-                result[lineIndex].pop();
-                lineIndex += 1;
-                textWidthsInLine = [textWidth];
-                const nextLineIndex = lineIndex;
-                result[nextLineIndex] = [];
-                result[nextLineIndex].push(resultItem);
-            }
-        })
-            .remove();
-    });
+        }
+        else {
+            resultItem.textWidth = textWidth;
+        }
+        textWidthsInLine.push(textWidth);
+        const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
+        if (!result[lineIndex]) {
+            result[lineIndex] = [];
+        }
+        result[lineIndex].push(resultItem);
+        const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
+            return acc + symbol.width + symbol.padding;
+        }, 0);
+        const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
+        const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;
+        const isCurrentLineOverMaxWidth = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
+        if (isOverflowedAsOnlyItemInLine) {
+            lineIndex += 1;
+            textWidthsInLine = [];
+        }
+        else if (isCurrentLineOverMaxWidth) {
+            result[lineIndex].pop();
+            lineIndex += 1;
+            textWidthsInLine = [textWidth];
+            const nextLineIndex = lineIndex;
+            result[nextLineIndex] = [];
+            result[nextLineIndex].push(resultItem);
+        }
+    }
     return result;
 }
 function getPagination(args) {
@@ -227,7 +239,7 @@ function getMaxLegendHeight(args) {
     }
     return (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
 }
-export function getLegendComponents(args) {
+export async function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
     const isVerticalPosition = preparedLegend.position === 'right' || preparedLegend.position === 'left';
     const maxLegendWidth = getMaxLegendWidth({
@@ -243,7 +255,7 @@ export function getLegendComponents(args) {
         isVerticalPosition,
     });
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
-    const items = getGroupedLegendItems({
+    const items = await getGroupedLegendItems({
         maxLegendWidth,
         items: flattenLegendItems,
         preparedLegend,
@@ -278,5 +290,14 @@ export function getLegendComponents(args) {
         legendWidth: preparedLegend.width,
         legendHeight: preparedLegend.height,
     });
-    return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
+    return {
+        legendConfig: {
+            offset,
+            pagination,
+            maxWidth: maxLegendWidth,
+            height: preparedLegend.height,
+            width: preparedLegend.width,
+        },
+        legendItems: items,
+    };
 }

package/dist/esm/hooks/useSeries/types.d.ts

@@ -44,25 +44,13 @@ export type LegendItem = {
     color: string;
     height: number;
     name: string;
+    text: string;
     symbol: PreparedLegendSymbol;
     textWidth: number;
     dashStyle?: DashStyle;
     overflowed?: boolean;
     visible?: boolean;
 };
-export type LegendConfig = {
-    offset: {
-        left: number;
-        top: number;
-    };
-    maxWidth: number;
-    pagination?: {
-        pages: {
-            start: number;
-            end: number;
-        }[];
-    };
-};
 export type PreparedHaloOptions = {
     enabled: boolean;
     opacity: number;

package/dist/esm/types/chart/tooltip.d.ts

@@ -97,6 +97,8 @@ export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     hoveredPlotBands?: AxisPlotBand[];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    /** Formatting settings for tooltip header row (includes computed default). */
+    headerFormat?: ValueFormat | CustomFormat;
 }
 export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends ChartTooltipRendererArgs<T> {
 }

package/dist/esm/types/chart-ui.d.ts

@@ -27,3 +27,18 @@ export interface HtmlItem {
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];
 }
+export type LegendConfig = {
+    offset: {
+        left: number;
+        top: number;
+    };
+    pagination?: {
+        pages: {
+            start: number;
+            end: number;
+        }[];
+    };
+    maxWidth: number;
+    height: number;
+    width: number;
+};

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

@@ -107,8 +107,10 @@ export const getDomainDataYBySeries = (series) => {
                 let yValue = 0;
                 const points = seriesList.map((s) => s.data).flat();
                 sortBy(points, (p) => p.index).forEach((d) => {
-                    yValue += Number(d.y) || 0;
-                    acc.push(yValue);
+                    if (!d.total) {
+                        yValue += Number(d.y) || 0;
+                        acc.push(yValue);
+                    }
                 });
                 break;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.36.0",
+  "version": "1.37.2",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",