@gravity-ui/charts 1.7.1 → 1.8.0

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

@@ -71,7 +71,7 @@ export const ChartInner = (props) => {
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -20,8 +20,10 @@ export declare function useChartInnerProps(props: Props): {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: import("../../hooks").LegendItem[][];

package/dist/cjs/components/Legend/index.d.ts

@@ -7,6 +7,7 @@ type Props = {
     legend: PreparedLegend;
     items: LegendItem[][];
     config: LegendConfig;
+    htmlLayout: HTMLElement | null;
     onItemClick: OnLegendItemClick;
     onUpdate?: () => void;
 };

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

@@ -18,27 +18,28 @@ const getLegendPosition = (args) => {
     return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
-    const { container, offset, maxPage, legend, transform, onArrowClick } = args;
+    const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
     const paginationLine = container.append('g').attr('class', b('pagination'));
+    const maxPage = pages.length;
     let computedWidth = 0;
     paginationLine
         .append('text')
         .text('▲')
         .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === 0 });
+        return b('pagination-arrow', { inactive: pageIndex === 0 });
     })
         .style('font-size', legend.itemStyle.fontSize)
         .each(function () {
         computedWidth += this.getComputedTextLength();
     })
         .on('click', function () {
-        if (offset - 1 >= 0) {
-            onArrowClick(offset - 1);
+        if (pageIndex - 1 >= 0) {
+            onArrowClick(pageIndex - 1);
         }
     });
     paginationLine
         .append('text')
-        .text(`${offset + 1}/${maxPage}`)
+        .text(`${pageIndex + 1}/${maxPage}`)
         .attr('class', b('pagination-counter'))
         .attr('x', computedWidth)
         .style('font-size', legend.itemStyle.fontSize)
@@ -49,13 +50,13 @@ const appendPaginator = (args) => {
         .append('text')
         .text('▼')
         .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === maxPage - 1 });
+        return b('pagination-arrow', { inactive: pageIndex === maxPage - 1 });
     })
         .attr('x', computedWidth)
         .style('font-size', legend.itemStyle.fontSize)
         .on('click', function () {
-        if (offset + 1 < maxPage) {
-            onArrowClick(offset + 1);
+        if (pageIndex + 1 < maxPage) {
+            onArrowClick(pageIndex + 1);
         }
     });
     paginationLine.attr('transform', transform);
@@ -64,7 +65,7 @@ const legendSymbolGenerator = lineGenerator()
     .x((d) => d.x)
     .y((d) => d.y);
 function renderLegendSymbol(args) {
-    const { selection, legend } = args;
+    const { selection, legend, legendLineHeight } = args;
     const line = selection.data();
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
@@ -82,7 +83,7 @@ function renderLegendSymbol(args) {
         const color = d.visible ? d.color : '';
         switch (d.symbol.shape) {
             case 'path': {
-                const y = legend.lineHeight / 2;
+                const y = legendLineHeight / 2;
                 const points = [
                     { x: x, y },
                     { x: x + d.symbol.width, y },
@@ -100,7 +101,7 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'rect': {
-                const y = (legend.lineHeight - d.symbol.height) / 2;
+                const y = (legendLineHeight - d.symbol.height) / 2;
                 element
                     .append('rect')
                     .attr('x', x)
@@ -113,7 +114,7 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
-                const y = legend.lineHeight / 2;
+                const y = legendLineHeight / 2;
                 const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
@@ -134,28 +135,36 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, onItemClick, onUpdate } = props;
+    const { boundsWidth, chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
-    const [paginationOffset, setPaginationOffset] = React.useState(0);
+    const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {
-        setPaginationOffset(0);
+        setPageIndex(0);
     }, [boundsWidth]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (!ref.current) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!ref.current || !htmlLayout) {
             return;
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const htmlElement = select(htmlLayout);
+        htmlElement.selectAll('[data-legend]').remove();
+        const htmlContainer = legend.html
+            ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
+            : null;
         let legendWidth = 0;
         if (legend.type === 'discrete') {
-            const limit = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.limit;
-            const pageItems = typeof limit === 'number'
-                ? items.slice(paginationOffset * limit, paginationOffset * limit + limit)
+            const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
+            const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
+            const pageItems = typeof start === 'number' && typeof end === 'number'
+                ? items.slice(start, end)
                 : items;
-            pageItems.forEach((line, lineIndex) => {
+            const legendLineHeights = [];
+            pageItems.forEach((line) => {
                 var _a;
                 const legendLine = svgElement.append('g').attr('class', b('line'));
+                const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
                 const legendItemTemplate = legendLine
                     .selectAll('legend-history')
                     .data(line)
@@ -175,22 +184,57 @@ export const Legend = (props) => {
                             legend.itemDistance);
                     }, 0);
                 };
-                renderLegendSymbol({ selection: legendItemTemplate, legend });
-                legendItemTemplate
-                    .append('text')
-                    .attr('x', function (legendItem, i) {
-                    return (getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding);
-                })
-                    .attr('height', legend.lineHeight)
-                    .attr('class', function (d) {
-                    const mods = { selected: d.visible, unselected: !d.visible };
-                    return b('item-text', mods);
-                })
-                    .html(function (d) {
-                    return ('name' in d && d.name);
-                })
-                    .style('font-size', legend.itemStyle.fontSize);
-                const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+                const legendLineHeight = Math.max(...line.map((l) => l.height));
+                renderLegendSymbol({ selection: legendItemTemplate, legend, legendLineHeight });
+                if (htmlLegendLine) {
+                    htmlLegendLine
+                        .selectAll('legend-item')
+                        .data(line)
+                        .enter()
+                        .append('div')
+                        .attr('class', function (d) {
+                        const mods = { selected: d.visible, unselected: !d.visible };
+                        return b('item-text-html', mods);
+                    })
+                        .style('font-size', legend.itemStyle.fontSize)
+                        .style('position', 'absolute')
+                        .style('left', function (d, i) {
+                        return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                    })
+                        .style('top', function (d) {
+                        if (d.height < legendLineHeight) {
+                            return `${(legendLineHeight - d.height) / 2}px`;
+                        }
+                        return '0px';
+                    })
+                        .on('click', function (e, d) {
+                        onItemClick({ name: d.name, metaKey: e.metaKey });
+                        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
+                    })[legend.html ? 'html' : 'text'](function (d) {
+                        return d.name;
+                    });
+                }
+                else {
+                    legendItemTemplate
+                        .append('text')
+                        .attr('x', function (legendItem, i) {
+                        return (getXPosition(i) +
+                            legendItem.symbol.width +
+                            legendItem.symbol.padding);
+                    })
+                        .attr('height', legend.height)
+                        .attr('class', function (d) {
+                        const mods = { selected: d.visible, unselected: !d.visible };
+                        return b('item-text', mods);
+                    })
+                        .html(function (d) {
+                        return ('name' in d && d.name);
+                    })
+                        .style('font-size', legend.itemStyle.fontSize);
+                }
+                const contentWidth = (legend.html
+                    ? getXPosition(line.length) - legend.itemDistance
+                    : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
                 let left = 0;
                 switch (legend.justifyContent) {
                     case 'center': {
@@ -209,27 +253,26 @@ export const Legend = (props) => {
                         break;
                     }
                 }
-                const top = legend.lineHeight * lineIndex;
+                const top = legendLineHeights.reduce((acc, h) => acc + h, 0);
+                legendLineHeights.push(legendLineHeight);
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
+                htmlLegendLine === null || htmlLegendLine === void 0 ? void 0 : htmlLegendLine.style('transform', `translate(${left}px, ${top}px)`);
             });
             if (config.pagination) {
-                const transform = `translate(${[
-                    0,
-                    legend.lineHeight * config.pagination.limit + legend.lineHeight / 2,
-                ].join(',')})`;
+                const transform = `translate(${[0, legend.height - legend.lineHeight / 2].join(',')})`;
                 appendPaginator({
                     container: svgElement,
-                    offset: paginationOffset,
-                    maxPage: config.pagination.maxPage,
+                    pageIndex: pageIndex,
                     legend,
                     transform,
-                    onArrowClick: setPaginationOffset,
+                    pages: config.pagination.pages,
+                    onArrowClick: setPageIndex,
                 });
             }
         }
         else {
             // gradient rect
-            const domain = (_b = legend.colorScale.domain) !== null && _b !== void 0 ? _b : [];
+            const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
             const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
             svgElement.call(createGradientRect, {
                 y: legend.title.height + legend.title.margin,
@@ -291,9 +334,9 @@ export const Legend = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('dx', dx)
-                .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
-                .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
-                .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
+                .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                 .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
@@ -304,6 +347,17 @@ export const Legend = (props) => {
             contentWidth: legendWidth,
         });
         svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
-    }, [boundsWidth, chartSeries, onItemClick, onUpdate, legend, items, config, paginationOffset]);
+        htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+    }, [
+        boundsWidth,
+        chartSeries,
+        onItemClick,
+        onUpdate,
+        legend,
+        items,
+        config,
+        pageIndex,
+        htmlLayout,
+    ]);
     return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
 };

package/dist/cjs/components/Legend/styles.css

@@ -27,6 +27,17 @@
 .gcharts-legend__item-text:hover {
   fill: var(--g-color-text-complementary);
 }
+.gcharts-legend__item-text-html {
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.gcharts-legend__item-text-html_unselected {
+  color: var(--g-color-text-hint);
+}
+.gcharts-legend__item-text-html:hover {
+  color: var(--g-color-text-complementary);
+}
 .gcharts-legend__pagination {
   user-select: none;
   fill: var(--g-color-text-primary);

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -135,9 +135,12 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("span", null,
-                            seriesData.name || seriesData.id,
-                            "\u00A0"),
+                        React.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: [seriesData.name || seriesData.id]
+                                    .flat()
+                                    .join('\n'),
+                            } }),
+                        "\u00A0",
                         React.createElement("span", null, formattedValue)));
                 }
                 case 'sankey': {

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

@@ -18,8 +18,10 @@ export declare const useSeries: (args: Args) => {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     preparedLegend: import("./types").PreparedLegend;

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

@@ -1,26 +1,28 @@
 import type { ChartData } from '../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
-export declare const getPreparedLegend: (args: {
-    legend: ChartData["legend"];
-    series: ChartData["series"]["data"];
-}) => PreparedLegend;
-export declare const getLegendComponents: (args: {
+export declare function getPreparedLegend(args: {
+    legend: ChartData['legend'];
+    series: ChartData['series']['data'];
+}): PreparedLegend;
+export declare function getLegendComponents(args: {
     chartWidth: number;
     chartHeight: number;
-    chartMargin: PreparedChart["margin"];
+    chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
     preparedYAxis: PreparedAxis[];
-}) => {
+}): {
     legendConfig: {
         offset: {
             left: number;
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: LegendItem[][];

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

@@ -6,7 +6,7 @@ import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getHorisontalSvgTextHeight, getLabelsSize, } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
 import { getYAxisWidth } from '../useChartDimensions/utils';
-export const getPreparedLegend = (args) => {
+export function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
     const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
@@ -69,30 +69,38 @@ export const getPreparedLegend = (args) => {
         width: legendWidth,
         ticks,
         colorScale,
+        html: get(legend, 'html', false),
     };
-};
-const getFlattenLegendItems = (series) => {
+}
+function getFlattenLegendItems(series, preparedLegend) {
     return series.reduce((acc, s) => {
         const legendEnabled = get(s, 'legend.enabled', true);
         if (legendEnabled) {
-            acc.push(Object.assign(Object.assign({}, s), { symbol: s.legend.symbol }));
+            acc.push(Object.assign(Object.assign({}, s), { height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
         }
         return acc;
     }, []);
-};
-const getGroupedLegendItems = (args) => {
+}
+function getGroupedLegendItems(args) {
     const { maxLegendWidth, items, preparedLegend } = args;
     const result = [[]];
+    const bodySelection = select(document.body);
     let textWidthsInLine = [0];
     let lineIndex = 0;
     items.forEach((item) => {
-        select(document.body)
-            .append('text')
-            .text(item.name)
+        const itemSelection = preparedLegend.html
+            ? bodySelection
+                .append('div')
+                .html(item.name)
+                .style('position', 'absolute')
+                .style('display', 'inline-block')
+            : bodySelection.append('text').text(item.name);
+        itemSelection
             .style('font-size', preparedLegend.itemStyle.fontSize)
             .each(function () {
             const resultItem = clone(item);
-            const textWidth = this.getBoundingClientRect().width;
+            const { height, width: textWidth } = this.getBoundingClientRect();
+            resultItem.height = height;
             resultItem.textWidth = textWidth;
             textWidthsInLine.push(textWidth);
             const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
@@ -114,12 +122,36 @@ const getGroupedLegendItems = (args) => {
             .remove();
     });
     return result;
-};
-export const getLegendComponents = (args) => {
+}
+function getPagination(args) {
+    const { items, maxLegendHeight, paginatorHeight } = args;
+    const pages = [];
+    let currentPageIndex = 0;
+    let currentHeight = 0;
+    items.forEach((item, i) => {
+        if (!pages[currentPageIndex]) {
+            pages[currentPageIndex] = { start: i, end: i };
+        }
+        const legendLineHeight = Math.max(...item.map((item) => item.height));
+        currentHeight += legendLineHeight;
+        if (currentHeight > maxLegendHeight - paginatorHeight) {
+            pages[currentPageIndex].end = i;
+            currentPageIndex += 1;
+            currentHeight = legendLineHeight;
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#end
+            pages[currentPageIndex] = { start: i, end: i + (i === items.length - 1 ? 1 : 0) };
+        }
+        else if (i === items.length - 1) {
+            pages[currentPageIndex].end = i + 1;
+        }
+    });
+    return { pages };
+}
+export function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
     const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
     const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
-    const flattenLegendItems = getFlattenLegendItems(series);
+    const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
         maxLegendWidth,
         items: flattenLegendItems,
@@ -127,13 +159,19 @@ export const getLegendComponents = (args) => {
     });
     let pagination;
     if (preparedLegend.type === 'discrete') {
-        let legendHeight = preparedLegend.lineHeight * items.length;
+        const lineHeights = items.reduce((acc, item) => {
+            acc.push(Math.max(...item.map((item) => item.height)));
+            return acc;
+        }, []);
+        let legendHeight = lineHeights.reduce((acc, height) => acc + height, 0);
         if (maxLegendHeight < legendHeight) {
-            // extra line for paginator
-            const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
-            const maxPage = Math.ceil(items.length / limit);
-            pagination = { limit, maxPage };
-            legendHeight = preparedLegend.lineHeight * (limit + 1);
+            const lines = Math.floor(maxLegendHeight / preparedLegend.lineHeight);
+            legendHeight = preparedLegend.lineHeight * lines;
+            pagination = getPagination({
+                items,
+                maxLegendHeight: legendHeight,
+                paginatorHeight: preparedLegend.lineHeight,
+            });
         }
         preparedLegend.height = legendHeight;
     }
@@ -143,4 +181,4 @@ export const getLegendComponents = (args) => {
         top,
     };
     return { legendConfig: { offset, pagination }, legendItems: items };
-};
+}

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

@@ -39,6 +39,7 @@ export type OnLegendItemClick = (data: {
 }) => void;
 export type LegendItem = {
     color: string;
+    height: number;
     name: string;
     symbol: PreparedLegendSymbol;
     textWidth: number;
@@ -51,8 +52,10 @@ export type LegendConfig = {
         top: number;
     };
     pagination?: {
-        limit: number;
-        maxPage: number;
+        pages: {
+            start: number;
+            end: number;
+        }[];
     };
 };
 export type PreparedHaloOptions = {

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

@@ -53,6 +53,12 @@ export interface ChartLegend {
         domain?: number[];
     };
     width?: number;
+    /**
+     * Allows to use any html-tags to display the content.
+     *
+     * @default false
+     * */
+    html?: boolean;
 }
 export interface BaseLegendSymbol {
     /**

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

@@ -71,7 +71,7 @@ export const ChartInner = (props) => {
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -20,8 +20,10 @@ export declare function useChartInnerProps(props: Props): {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: import("../../hooks").LegendItem[][];

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

@@ -7,6 +7,7 @@ type Props = {
     legend: PreparedLegend;
     items: LegendItem[][];
     config: LegendConfig;
+    htmlLayout: HTMLElement | null;
     onItemClick: OnLegendItemClick;
     onUpdate?: () => void;
 };

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

@@ -18,27 +18,28 @@ const getLegendPosition = (args) => {
     return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
-    const { container, offset, maxPage, legend, transform, onArrowClick } = args;
+    const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
     const paginationLine = container.append('g').attr('class', b('pagination'));
+    const maxPage = pages.length;
     let computedWidth = 0;
     paginationLine
         .append('text')
         .text('▲')
         .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === 0 });
+        return b('pagination-arrow', { inactive: pageIndex === 0 });
     })
         .style('font-size', legend.itemStyle.fontSize)
         .each(function () {
         computedWidth += this.getComputedTextLength();
     })
         .on('click', function () {
-        if (offset - 1 >= 0) {
-            onArrowClick(offset - 1);
+        if (pageIndex - 1 >= 0) {
+            onArrowClick(pageIndex - 1);
         }
     });
     paginationLine
         .append('text')
-        .text(`${offset + 1}/${maxPage}`)
+        .text(`${pageIndex + 1}/${maxPage}`)
         .attr('class', b('pagination-counter'))
         .attr('x', computedWidth)
         .style('font-size', legend.itemStyle.fontSize)
@@ -49,13 +50,13 @@ const appendPaginator = (args) => {
         .append('text')
         .text('▼')
         .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === maxPage - 1 });
+        return b('pagination-arrow', { inactive: pageIndex === maxPage - 1 });
     })
         .attr('x', computedWidth)
         .style('font-size', legend.itemStyle.fontSize)
         .on('click', function () {
-        if (offset + 1 < maxPage) {
-            onArrowClick(offset + 1);
+        if (pageIndex + 1 < maxPage) {
+            onArrowClick(pageIndex + 1);
         }
     });
     paginationLine.attr('transform', transform);
@@ -64,7 +65,7 @@ const legendSymbolGenerator = lineGenerator()
     .x((d) => d.x)
     .y((d) => d.y);
 function renderLegendSymbol(args) {
-    const { selection, legend } = args;
+    const { selection, legend, legendLineHeight } = args;
     const line = selection.data();
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
@@ -82,7 +83,7 @@ function renderLegendSymbol(args) {
         const color = d.visible ? d.color : '';
         switch (d.symbol.shape) {
             case 'path': {
-                const y = legend.lineHeight / 2;
+                const y = legendLineHeight / 2;
                 const points = [
                     { x: x, y },
                     { x: x + d.symbol.width, y },
@@ -100,7 +101,7 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'rect': {
-                const y = (legend.lineHeight - d.symbol.height) / 2;
+                const y = (legendLineHeight - d.symbol.height) / 2;
                 element
                     .append('rect')
                     .attr('x', x)
@@ -113,7 +114,7 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
-                const y = legend.lineHeight / 2;
+                const y = legendLineHeight / 2;
                 const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
@@ -134,28 +135,36 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, onItemClick, onUpdate } = props;
+    const { boundsWidth, chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
-    const [paginationOffset, setPaginationOffset] = React.useState(0);
+    const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {
-        setPaginationOffset(0);
+        setPageIndex(0);
     }, [boundsWidth]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (!ref.current) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!ref.current || !htmlLayout) {
             return;
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const htmlElement = select(htmlLayout);
+        htmlElement.selectAll('[data-legend]').remove();
+        const htmlContainer = legend.html
+            ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
+            : null;
         let legendWidth = 0;
         if (legend.type === 'discrete') {
-            const limit = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.limit;
-            const pageItems = typeof limit === 'number'
-                ? items.slice(paginationOffset * limit, paginationOffset * limit + limit)
+            const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
+            const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
+            const pageItems = typeof start === 'number' && typeof end === 'number'
+                ? items.slice(start, end)
                 : items;
-            pageItems.forEach((line, lineIndex) => {
+            const legendLineHeights = [];
+            pageItems.forEach((line) => {
                 var _a;
                 const legendLine = svgElement.append('g').attr('class', b('line'));
+                const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
                 const legendItemTemplate = legendLine
                     .selectAll('legend-history')
                     .data(line)
@@ -175,22 +184,57 @@ export const Legend = (props) => {
                             legend.itemDistance);
                     }, 0);
                 };
-                renderLegendSymbol({ selection: legendItemTemplate, legend });
-                legendItemTemplate
-                    .append('text')
-                    .attr('x', function (legendItem, i) {
-                    return (getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding);
-                })
-                    .attr('height', legend.lineHeight)
-                    .attr('class', function (d) {
-                    const mods = { selected: d.visible, unselected: !d.visible };
-                    return b('item-text', mods);
-                })
-                    .html(function (d) {
-                    return ('name' in d && d.name);
-                })
-                    .style('font-size', legend.itemStyle.fontSize);
-                const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+                const legendLineHeight = Math.max(...line.map((l) => l.height));
+                renderLegendSymbol({ selection: legendItemTemplate, legend, legendLineHeight });
+                if (htmlLegendLine) {
+                    htmlLegendLine
+                        .selectAll('legend-item')
+                        .data(line)
+                        .enter()
+                        .append('div')
+                        .attr('class', function (d) {
+                        const mods = { selected: d.visible, unselected: !d.visible };
+                        return b('item-text-html', mods);
+                    })
+                        .style('font-size', legend.itemStyle.fontSize)
+                        .style('position', 'absolute')
+                        .style('left', function (d, i) {
+                        return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                    })
+                        .style('top', function (d) {
+                        if (d.height < legendLineHeight) {
+                            return `${(legendLineHeight - d.height) / 2}px`;
+                        }
+                        return '0px';
+                    })
+                        .on('click', function (e, d) {
+                        onItemClick({ name: d.name, metaKey: e.metaKey });
+                        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
+                    })[legend.html ? 'html' : 'text'](function (d) {
+                        return d.name;
+                    });
+                }
+                else {
+                    legendItemTemplate
+                        .append('text')
+                        .attr('x', function (legendItem, i) {
+                        return (getXPosition(i) +
+                            legendItem.symbol.width +
+                            legendItem.symbol.padding);
+                    })
+                        .attr('height', legend.height)
+                        .attr('class', function (d) {
+                        const mods = { selected: d.visible, unselected: !d.visible };
+                        return b('item-text', mods);
+                    })
+                        .html(function (d) {
+                        return ('name' in d && d.name);
+                    })
+                        .style('font-size', legend.itemStyle.fontSize);
+                }
+                const contentWidth = (legend.html
+                    ? getXPosition(line.length) - legend.itemDistance
+                    : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
                 let left = 0;
                 switch (legend.justifyContent) {
                     case 'center': {
@@ -209,27 +253,26 @@ export const Legend = (props) => {
                         break;
                     }
                 }
-                const top = legend.lineHeight * lineIndex;
+                const top = legendLineHeights.reduce((acc, h) => acc + h, 0);
+                legendLineHeights.push(legendLineHeight);
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
+                htmlLegendLine === null || htmlLegendLine === void 0 ? void 0 : htmlLegendLine.style('transform', `translate(${left}px, ${top}px)`);
             });
             if (config.pagination) {
-                const transform = `translate(${[
-                    0,
-                    legend.lineHeight * config.pagination.limit + legend.lineHeight / 2,
-                ].join(',')})`;
+                const transform = `translate(${[0, legend.height - legend.lineHeight / 2].join(',')})`;
                 appendPaginator({
                     container: svgElement,
-                    offset: paginationOffset,
-                    maxPage: config.pagination.maxPage,
+                    pageIndex: pageIndex,
                     legend,
                     transform,
-                    onArrowClick: setPaginationOffset,
+                    pages: config.pagination.pages,
+                    onArrowClick: setPageIndex,
                 });
             }
         }
         else {
             // gradient rect
-            const domain = (_b = legend.colorScale.domain) !== null && _b !== void 0 ? _b : [];
+            const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
             const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
             svgElement.call(createGradientRect, {
                 y: legend.title.height + legend.title.margin,
@@ -291,9 +334,9 @@ export const Legend = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('dx', dx)
-                .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
-                .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
-                .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
+                .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                 .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
@@ -304,6 +347,17 @@ export const Legend = (props) => {
             contentWidth: legendWidth,
         });
         svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
-    }, [boundsWidth, chartSeries, onItemClick, onUpdate, legend, items, config, paginationOffset]);
+        htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+    }, [
+        boundsWidth,
+        chartSeries,
+        onItemClick,
+        onUpdate,
+        legend,
+        items,
+        config,
+        pageIndex,
+        htmlLayout,
+    ]);
     return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
 };

package/dist/esm/components/Legend/styles.css

@@ -27,6 +27,17 @@
 .gcharts-legend__item-text:hover {
   fill: var(--g-color-text-complementary);
 }
+.gcharts-legend__item-text-html {
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.gcharts-legend__item-text-html_unselected {
+  color: var(--g-color-text-hint);
+}
+.gcharts-legend__item-text-html:hover {
+  color: var(--g-color-text-complementary);
+}
 .gcharts-legend__pagination {
   user-select: none;
   fill: var(--g-color-text-primary);

package/dist/esm/components/Tooltip/DefaultContent.js

@@ -135,9 +135,12 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("span", null,
-                            seriesData.name || seriesData.id,
-                            "\u00A0"),
+                        React.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: [seriesData.name || seriesData.id]
+                                    .flat()
+                                    .join('\n'),
+                            } }),
+                        "\u00A0",
                         React.createElement("span", null, formattedValue)));
                 }
                 case 'sankey': {

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

@@ -18,8 +18,10 @@ export declare const useSeries: (args: Args) => {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     preparedLegend: import("./types").PreparedLegend;

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

@@ -1,26 +1,28 @@
 import type { ChartData } from '../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
-export declare const getPreparedLegend: (args: {
-    legend: ChartData["legend"];
-    series: ChartData["series"]["data"];
-}) => PreparedLegend;
-export declare const getLegendComponents: (args: {
+export declare function getPreparedLegend(args: {
+    legend: ChartData['legend'];
+    series: ChartData['series']['data'];
+}): PreparedLegend;
+export declare function getLegendComponents(args: {
     chartWidth: number;
     chartHeight: number;
-    chartMargin: PreparedChart["margin"];
+    chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
     preparedYAxis: PreparedAxis[];
-}) => {
+}): {
     legendConfig: {
         offset: {
             left: number;
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: LegendItem[][];

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

@@ -6,7 +6,7 @@ import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getHorisontalSvgTextHeight, getLabelsSize, } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
 import { getYAxisWidth } from '../useChartDimensions/utils';
-export const getPreparedLegend = (args) => {
+export function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
     const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
@@ -69,30 +69,38 @@ export const getPreparedLegend = (args) => {
         width: legendWidth,
         ticks,
         colorScale,
+        html: get(legend, 'html', false),
     };
-};
-const getFlattenLegendItems = (series) => {
+}
+function getFlattenLegendItems(series, preparedLegend) {
     return series.reduce((acc, s) => {
         const legendEnabled = get(s, 'legend.enabled', true);
         if (legendEnabled) {
-            acc.push(Object.assign(Object.assign({}, s), { symbol: s.legend.symbol }));
+            acc.push(Object.assign(Object.assign({}, s), { height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
         }
         return acc;
     }, []);
-};
-const getGroupedLegendItems = (args) => {
+}
+function getGroupedLegendItems(args) {
     const { maxLegendWidth, items, preparedLegend } = args;
     const result = [[]];
+    const bodySelection = select(document.body);
     let textWidthsInLine = [0];
     let lineIndex = 0;
     items.forEach((item) => {
-        select(document.body)
-            .append('text')
-            .text(item.name)
+        const itemSelection = preparedLegend.html
+            ? bodySelection
+                .append('div')
+                .html(item.name)
+                .style('position', 'absolute')
+                .style('display', 'inline-block')
+            : bodySelection.append('text').text(item.name);
+        itemSelection
             .style('font-size', preparedLegend.itemStyle.fontSize)
             .each(function () {
             const resultItem = clone(item);
-            const textWidth = this.getBoundingClientRect().width;
+            const { height, width: textWidth } = this.getBoundingClientRect();
+            resultItem.height = height;
             resultItem.textWidth = textWidth;
             textWidthsInLine.push(textWidth);
             const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
@@ -114,12 +122,36 @@ const getGroupedLegendItems = (args) => {
             .remove();
     });
     return result;
-};
-export const getLegendComponents = (args) => {
+}
+function getPagination(args) {
+    const { items, maxLegendHeight, paginatorHeight } = args;
+    const pages = [];
+    let currentPageIndex = 0;
+    let currentHeight = 0;
+    items.forEach((item, i) => {
+        if (!pages[currentPageIndex]) {
+            pages[currentPageIndex] = { start: i, end: i };
+        }
+        const legendLineHeight = Math.max(...item.map((item) => item.height));
+        currentHeight += legendLineHeight;
+        if (currentHeight > maxLegendHeight - paginatorHeight) {
+            pages[currentPageIndex].end = i;
+            currentPageIndex += 1;
+            currentHeight = legendLineHeight;
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#end
+            pages[currentPageIndex] = { start: i, end: i + (i === items.length - 1 ? 1 : 0) };
+        }
+        else if (i === items.length - 1) {
+            pages[currentPageIndex].end = i + 1;
+        }
+    });
+    return { pages };
+}
+export function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
     const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
     const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
-    const flattenLegendItems = getFlattenLegendItems(series);
+    const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
         maxLegendWidth,
         items: flattenLegendItems,
@@ -127,13 +159,19 @@ export const getLegendComponents = (args) => {
     });
     let pagination;
     if (preparedLegend.type === 'discrete') {
-        let legendHeight = preparedLegend.lineHeight * items.length;
+        const lineHeights = items.reduce((acc, item) => {
+            acc.push(Math.max(...item.map((item) => item.height)));
+            return acc;
+        }, []);
+        let legendHeight = lineHeights.reduce((acc, height) => acc + height, 0);
         if (maxLegendHeight < legendHeight) {
-            // extra line for paginator
-            const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
-            const maxPage = Math.ceil(items.length / limit);
-            pagination = { limit, maxPage };
-            legendHeight = preparedLegend.lineHeight * (limit + 1);
+            const lines = Math.floor(maxLegendHeight / preparedLegend.lineHeight);
+            legendHeight = preparedLegend.lineHeight * lines;
+            pagination = getPagination({
+                items,
+                maxLegendHeight: legendHeight,
+                paginatorHeight: preparedLegend.lineHeight,
+            });
         }
         preparedLegend.height = legendHeight;
     }
@@ -143,4 +181,4 @@ export const getLegendComponents = (args) => {
         top,
     };
     return { legendConfig: { offset, pagination }, legendItems: items };
-};
+}

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

@@ -39,6 +39,7 @@ export type OnLegendItemClick = (data: {
 }) => void;
 export type LegendItem = {
     color: string;
+    height: number;
     name: string;
     symbol: PreparedLegendSymbol;
     textWidth: number;
@@ -51,8 +52,10 @@ export type LegendConfig = {
         top: number;
     };
     pagination?: {
-        limit: number;
-        maxPage: number;
+        pages: {
+            start: number;
+            end: number;
+        }[];
     };
 };
 export type PreparedHaloOptions = {

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

@@ -53,6 +53,12 @@ export interface ChartLegend {
         domain?: number[];
     };
     width?: number;
+    /**
+     * Allows to use any html-tags to display the content.
+     *
+     * @default false
+     * */
+    html?: boolean;
 }
 export interface BaseLegendSymbol {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",