@gravity-ui/chartkit 5.19.0 → 5.19.2

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -13,7 +13,7 @@ import { i18n } from '../../../../../i18n';
 import { block } from '../../../../../utils/cn';
 import { formatNumber } from '../../../../shared';
 import { drawComments, drawOnlyRendererComments, getCommentsOnLine, hideComments, } from '../comments/drawing';
-import formatTooltip, { SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
+import formatTooltip, { SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NAME, } from '../tooltip';
 import { handleLegendItemClick } from './handleLegendItemClick';
 import defaultOptions from './options';
 import { addShowInNavigatorToSeries, buildNavigatorFallback, calculatePrecision, checkTooltipPinningAvailability, concatStrings, getFormatOptionsFromLine, getSortedData, isSafari, isTooltipShared, mergeArrayWithObject, numberFormat, setNavigatorDefaultPeriod, } from './utils';
@@ -121,7 +121,7 @@ export function synchronizeTooltipTablesCellsWidth(tooltipContainer, isMobile) {
         cell.setAttribute('style', `width: ${nodeWithWidesRowsCellsWidth[j]}px`);
     }
     if (isMobile && tooltipOverflowsViewport) {
-        const rowNamesNodes = tooltipContainer.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NANE}`);
+        const rowNamesNodes = tooltipContainer.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NAME}`);
         for (let i = 0; i < rowNamesNodes.length; i++) {
             const node = rowNamesNodes[i];
             node.setAttribute('style', `max-width: ${nodeWithWidesRowsCellsWidth[1]}px`);

package/build/plugins/highcharts/renderer/helpers/highcharts/highcharts.js

@@ -3,7 +3,7 @@ import Highcharts from 'highcharts';
 import get from 'lodash/get';
 import { i18n } from '../../../../../i18n';
 import { getTooltipPositioner, handleScroll, hideFixedTooltip, synchronizeTooltipTablesCellsWidth, } from '../config/config';
-import { TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
+import { TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NAME, } from '../tooltip';
 import colors from './colors';
 import { calculateClosestPointManually } from './utils';
 function formatQ(timestamp) {
@@ -276,7 +276,7 @@ function initHighcharts({ isMobile }) {
                 synchronizeTooltipTablesCellsWidth(this.container, isMobile);
             }
             if (isFixation) {
-                const rowNames = this.container.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NANE}`);
+                const rowNames = this.container.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NAME}`);
                 for (let i = 0; i < rowNames.length; i++) {
                     const rowNameNode = rowNames[i];
                     if (rowNameNode.scrollWidth > rowNameNode.clientWidth) {

package/build/plugins/highcharts/renderer/helpers/tooltip/index.d.ts

@@ -4,7 +4,7 @@ import './tooltip.css';
 export declare const SERIES_NAME_DATA_ATTRIBUTE = "data-series-name";
 export declare const SERIES_IDX_DATA_ATTRIBUTE = "data-series-idx";
 export declare const TOOLTIP_CONTAINER_CLASS_NAME = "_tooltip";
-export declare const TOOLTIP_ROW_NAME_CLASS_NANE = "_tooltip-rows__name-td";
+export declare const TOOLTIP_ROW_NAME_CLASS_NAME = "_tooltip-rows__name-td";
 export declare const TOOLTIP_ROW_CLASS_NAME = "_tooltip-row";
 export declare const TOOLTIP_HEADER_CLASS_NAME = "_tooltip-header";
 export declare const TOOLTIP_LIST_CLASS_NAME = "_tooltip-list";

package/build/plugins/highcharts/renderer/helpers/tooltip/index.js

@@ -7,7 +7,7 @@ import './tooltip.css';
 export const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
 export const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
 export const TOOLTIP_CONTAINER_CLASS_NAME = '_tooltip';
-export const TOOLTIP_ROW_NAME_CLASS_NANE = '_tooltip-rows__name-td';
+export const TOOLTIP_ROW_NAME_CLASS_NAME = '_tooltip-rows__name-td';
 export const TOOLTIP_ROW_CLASS_NAME = '_tooltip-row';
 export const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
 export const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
@@ -22,9 +22,18 @@ const renderLineShapeCell = (line) => `<td class="_tooltip-rows__shape-td">
            ${renderShapeIcon({ type: line.seriesShape })}
         </div>
     </td>`;
-const renderNameCell = (line) => `<td class="${TOOLTIP_ROW_NAME_CLASS_NANE}">
-        ${line.hideSeriesName ? '' : escapeHTML(line.seriesName)}
+const renderNameCell = (line, options) => {
+    let value = '';
+    if (!line.hideSeriesName) {
+        value = line.seriesName;
+        if (!(options === null || options === void 0 ? void 0 : options.unsafe)) {
+            value = escapeHTML(value);
+        }
+    }
+    return `<td class="${TOOLTIP_ROW_NAME_CLASS_NAME}">
+        ${value}
     </td>`;
+};
 const renderPercentCell = (line) => `<td class="_tooltip-rows__percent-td">
         ${line.percentValue ? line.percentValue + '%' : ''}
     </td>`;
@@ -61,7 +70,7 @@ const renderAdditionalSection = (data, splitTooltip = false, colspanNumber = 1)
         : ''}
         </td>`;
 };
-const renderRow = (line, { isSelectedLine, cellsRenderers, isSingleLine, allowComment, withDarkBackground, rowIndex, }) => {
+const renderRow = (line, { isSelectedLine, cellsRenderers, isSingleLine, allowComment, withDarkBackground, rowIndex, unsafe, }) => {
     const hasComment = line.commentText || line.xyCommentText;
     const needRenderComment = allowComment && hasComment;
     const fullCellsRenderers = cellsRenderers.slice();
@@ -106,7 +115,7 @@ const renderRow = (line, { isSelectedLine, cellsRenderers, isSingleLine, allowCo
                 : line.insertCellAt[index](line);
         }
         else {
-            return render(line);
+            return render(line, { unsafe });
         }
     })
         .join('')}
@@ -155,6 +164,7 @@ export const formatTooltip = (data, tooltip, isMobile) => {
     const rowRenderingConfig = {
         isSingleLine: lines.length === 1,
         cellsRenderers,
+        unsafe,
     };
     const rowRenderingConfigForSelectedLine = {
         cellsRenderers,

package/build/plugins/highcharts/renderer/helpers/tooltip/types.d.ts

@@ -76,10 +76,13 @@ export type TooltipLine = {
     chartKitUnit?: FormatNumberOptions['unit'];
 };
 export type RowRenderingConfig = {
-    cellsRenderers: Array<(line: TooltipLine) => string>;
+    cellsRenderers: Array<(line: TooltipLine, options?: {
+        unsafe?: boolean;
+    }) => string>;
     isSelectedLine?: boolean;
     allowComment?: boolean;
     withDarkBackground?: boolean;
     isSingleLine?: boolean;
     rowIndex?: number;
+    unsafe?: boolean;
 };

package/build/plugins/yagr/renderer/tooltip/tooltip.js

@@ -5,7 +5,7 @@ import './tooltip.css';
 const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
 const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
 const TOOLTIP_CONTAINER_CLASS_NAME = '_tooltip';
-const TOOLTIP_ROW_NAME_CLASS_NANE = '_tooltip-rows__name-td';
+const TOOLTIP_ROW_NAME_CLASS_NAME = '_tooltip-rows__name-td';
 const TOOLTIP_ROW_CLASS_NAME = '_tooltip-row';
 const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
 const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
@@ -14,7 +14,7 @@ const renderEmptyCell = () => '<td />';
 const renderColorCell = (line) => `<td class="_tooltip-rows__bubble-td">
         <div class="_tooltip-rows__bubble-div" style="background-color:${line.seriesColor};"></div>
     </td>`;
-const renderNameCell = (line) => `<td class="${TOOLTIP_ROW_NAME_CLASS_NANE}">
+const renderNameCell = (line) => `<td class="${TOOLTIP_ROW_NAME_CLASS_NAME}">
         ${line.hideSeriesName ? '' : escapeHTML(line.seriesName)}
     </td>`;
 const renderPercentCell = (line) => `<td class="_tooltip-rows__percent-td">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.19.0",
+  "version": "5.19.2",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -50,7 +50,7 @@
     "@gravity-ui/charts": "^0.5.0",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/yagr": "^4.3.4",
+    "@gravity-ui/yagr": "^4.4.0",
     "afterframe": "^1.0.2",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"