@gravity-ui/chartkit 0.7.2

package/build/plugins/indicator/__stories__/Indicator.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { withKnobs, boolean, color as colorKnob, radios, text } from '@storybook/addon-knobs';
+import { cloneDeep } from 'lodash';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../libs';
+import { ChartKit } from '../../../components/ChartKit';
+import { IndicatorPlugin } from '../';
+const data = {
+    data: [
+        {
+            content: {
+                current: {
+                    value: 1539577973,
+                },
+            },
+        },
+    ],
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const color = colorKnob('color', '#4da2f1');
+    const size = radios('size', { s: 's', m: 'm', l: 'l', xl: 'xl' }, 'm');
+    const title = text('title', 'Value title');
+    const nowrap = boolean('nowrap', false);
+    const resultData = cloneDeep(data);
+    if (resultData.data) {
+        resultData.data[0].size = size;
+        resultData.data[0].color = color;
+        resultData.data[0].title = title;
+        resultData.data[0].nowrap = nowrap;
+    }
+    if (!shown) {
+        settings.set({ plugins: [IndicatorPlugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: 300, width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "indicator", data: resultData })));
+};
+export const Showcase = Template.bind({});
+const meta = {
+    title: 'Plugins/Indicator',
+    decorators: [withKnobs],
+};
+export default meta;

package/build/plugins/indicator/index.d.ts

@@ -0,0 +1,2 @@
+import { ChartKitPlugin } from '../../types';
+export declare const IndicatorPlugin: ChartKitPlugin;

package/build/plugins/indicator/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IndicatorPlugin = {
+    type: 'indicator',
+    renderer: React.lazy(() => import('./renderer/IndicatorWidget')),
+};

package/build/plugins/indicator/renderer/IndicatorItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IndicatorWidgetProps, IndicatorWidgetDataItem } from '../types';
+export declare const IndicatorItem: (props: IndicatorWidgetDataItem & {
+    defaultColor?: string;
+    formatNumber?: IndicatorWidgetProps['formatNumber'];
+}) => JSX.Element;

package/build/plugins/indicator/renderer/IndicatorItem.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+const b = block('chartkit-indicator');
+export const IndicatorItem = (props) => {
+    const { formatNumber, content, color, defaultColor, size, title, nowrap } = props;
+    const mods = { size, nowrap };
+    const style = { color: color || defaultColor };
+    let value = content.current.value;
+    if (formatNumber && typeof value === 'number') {
+        value = formatNumber(value, content.current);
+    }
+    return (React.createElement("div", { className: b('item', mods) },
+        title && (React.createElement("div", { className: b('item-title'), title: nowrap ? title : '' }, title)),
+        React.createElement("div", { className: b('item-value'), style: style }, value)));
+};

package/build/plugins/indicator/renderer/IndicatorWidget.css

@@ -0,0 +1,62 @@
+.chartkit-indicator {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chartkit-indicator__content {
+  width: 100%;
+  overflow: auto;
+}
+
+.chartkit-indicator__item {
+  padding: 15px;
+  font-size: inherit;
+  box-sizing: border-box;
+}
+
+.chartkit-indicator__item_nowrap .chartkit-indicator__item-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.chartkit-indicator__item_size_s .chartkit-indicator__item-title {
+  font-size: 13px;
+}
+
+.chartkit-indicator__item_size_s .chartkit-indicator__item-value {
+  font-size: 24px;
+}
+
+.chartkit-indicator__item_size_l .chartkit-indicator__item-title {
+  font-size: 20px;
+}
+
+.chartkit-indicator__item_size_l .chartkit-indicator__item-value {
+  font-size: 64px;
+}
+
+.chartkit-indicator__item_size_xl .chartkit-indicator__item-title {
+  font-size: 24px;
+}
+
+.chartkit-indicator__item_size_xl .chartkit-indicator__item-value {
+  font-size: 80px;
+}
+
+.chartkit-indicator__item-title {
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--yc-color-text-primary);
+  font-size: 16px;
+  padding-bottom: 0.125em;
+}
+
+.chartkit-indicator__item-value {
+  font-weight: 500;
+  line-height: 1.2;
+  font-size: 48px;
+  white-space: nowrap;
+}

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ChartKitWidgetRef } from '../../../types';
+import type { IndicatorWidgetProps } from '../types';
+import './IndicatorWidget.css';
+declare const IndicatorWidget: React.ForwardRefExoticComponent<IndicatorWidgetProps & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+export default IndicatorWidget;

package/build/plugins/indicator/renderer/IndicatorWidget.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { isEmpty } from 'lodash';
+import { i18n } from '../../../i18n';
+import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
+import { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from '../../../constants';
+import { IndicatorItem } from './IndicatorItem';
+import './IndicatorWidget.css';
+const b = block('chartkit-indicator');
+const IndicatorWidget = React.forwardRef(
+// _ref needs to avoid this React warning:
+// "forwardRef render functions accept exactly two parameters: props and ref"
+(props, _ref) => {
+    const { onLoad, formatNumber, data: { data = [], defaultColor }, } = props;
+    React.useLayoutEffect(() => {
+        // TODO: swap to onRender after https://github.com/gravity-ui/chartkit/issues/33
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+    });
+    if (isEmpty(data)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.NO_DATA,
+            message: i18n('error', 'label_no-data'),
+        });
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('content', CHARTKIT_SCROLLABLE_NODE_CLASSNAME) }, data.map((item, index) => (React.createElement(IndicatorItem, Object.assign({}, item, { key: `${index}-ck-indicator-item`, defaultColor: defaultColor, formatNumber: formatNumber })))))));
+});
+export default IndicatorWidget;

package/build/plugins/indicator/types.d.ts

@@ -0,0 +1,21 @@
+import type { ChartKitFormatNumber } from '../../types';
+export declare type IndicatorWidgetDataItem = {
+    content: {
+        current: {
+            value: string | number;
+        } & Record<string, unknown>;
+    };
+    color?: string;
+    size?: 's' | 'm' | 'l' | 'xl';
+    title?: string;
+    nowrap?: boolean;
+};
+export declare type IndicatorWidgetData = {
+    data?: IndicatorWidgetDataItem[];
+    defaultColor?: string;
+};
+export declare type IndicatorWidgetProps = {
+    data: IndicatorWidgetData;
+    onLoad?: () => void;
+    formatNumber?: ChartKitFormatNumber;
+};

package/build/plugins/indicator/types.js

@@ -0,0 +1 @@
+export {};

package/build/plugins/yagr/__stories__/Yagr.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Line: Story<any>;

package/build/plugins/yagr/__stories__/Yagr.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../libs';
+import { YagrPlugin } from '../../../plugins';
+import { ChartKit } from '../../../components/ChartKit';
+import { line10 } from './mocks/line10';
+export default {
+    title: 'Plugins/Yagr',
+    component: ChartKit,
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    if (!shown) {
+        settings.set({ plugins: [YagrPlugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: 300, width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10 })));
+};
+export const Line = Template.bind({});

package/build/plugins/yagr/__stories__/mocks/line10.d.ts

@@ -0,0 +1,2 @@
+import type { YagrWidgetData } from '../../types';
+export declare const line10: YagrWidgetData;

package/build/plugins/yagr/__stories__/mocks/line10.js

@@ -0,0 +1,66 @@
+export const line10 = {
+    data: {
+        timeline: [
+            1636838612441, 1636925012441, 1637011412441, 1637097812441, 1637184212441,
+            1637270612441, 1637357012441, 1637443412441, 1637529812441, 1637616212441,
+        ],
+        graphs: [
+            {
+                id: '0',
+                name: 'Serie 1',
+                color: '#6c59c2',
+                visible: true,
+                data: [25, 52, 89, 72, 39, 49, 82, 59, 36, 5],
+            },
+            {
+                id: '1',
+                name: 'Serie 2',
+                color: '#6e8188',
+                visible: true,
+                data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
+            },
+            {
+                id: '2',
+                name: 'Serie 3',
+                color: '#e21576',
+                visible: true,
+                data: [26, 54, 15, 40, 43, 18, 65, 46, 51, 33],
+            },
+        ],
+    },
+    libraryConfig: {
+        chart: {
+            type: 'line',
+        },
+        title: {
+            text: 'line: random 10 pts',
+        },
+        axes: {
+            x: {},
+        },
+        scales: {
+            x: {},
+            y: {
+                type: 'linear',
+                range: 'nice',
+            },
+        },
+        cursor: {
+            x: {
+                visible: true,
+                style: 'solid 2px rgba(230, 2, 7, 0.3)',
+            },
+        },
+        settings: {
+            adaptive: true,
+        },
+        tooltip: {
+            enabled: true,
+            boundClassName: '.wrapper',
+            tracking: 'sticky',
+            className: 'chartkit-theme_common',
+        },
+        legend: {},
+        processing: {},
+    },
+};

package/build/plugins/yagr/index.d.ts

@@ -0,0 +1,2 @@
+import { ChartKitPlugin } from '../../types';
+export declare const YagrPlugin: ChartKitPlugin;

package/build/plugins/yagr/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const YagrPlugin = {
+    type: 'yagr',
+    renderer: React.lazy(() => import('./renderer/YagrWidget')),
+};

package/build/plugins/yagr/renderer/YagrWidget.css

@@ -0,0 +1,4 @@
+.yagr-tooltip {
+  background-color: var(--yc-color-infographics-tooltip-bg);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ChartKitWidgetRef } from '../../../types';
+import type { YagrWidgetProps } from '../types';
+import './polyfills';
+import './YagrWidget.css';
+declare const YagrWidget: React.ForwardRefExoticComponent<YagrWidgetProps & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+export default YagrWidget;

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import moment from 'moment';
+import debounce from 'lodash/debounce';
+import { useThemeValue } from '@gravity-ui/uikit';
+import YagrComponent from 'yagr/dist/react';
+import { defaults, } from 'yagr';
+import { formatTooltip } from './tooltip/tooltip';
+import { synchronizeTooltipTablesCellsWidth } from './synchronizeTooltipTablesCellsWidth';
+import './polyfills';
+import './YagrWidget.css';
+const calcOption = (d) => {
+    return typeof d === 'object'
+        ? Object.values(d).reduce((_, t) => {
+            return t;
+        })
+        : d;
+};
+/*
+ * Default tooltip renderer.
+ * Adapter between native Yagr tooltip config and ChartKit
+ * tooltip renderer.
+ */
+const renderTooltip = (data) => {
+    var _a, _b;
+    const cfg = data.yagr.config;
+    const timeMultiplier = ((_a = cfg.settings) === null || _a === void 0 ? void 0 : _a.timeMultiplier) || 1;
+    const locale = (_b = cfg.settings) === null || _b === void 0 ? void 0 : _b.locale;
+    const opts = data.options;
+    const { x, pinned } = data;
+    let sumTotal = 0;
+    const rows = Object.values(data.scales).reduce((acc, scale) => {
+        sumTotal += scale.sum || 0;
+        return acc.concat(scale.rows);
+    }, []);
+    const lines = rows.length;
+    const sum = calcOption(opts.sum);
+    const maxLines = calcOption(opts.maxLines);
+    const valueFormatter = calcOption(opts.value);
+    // eslint-disable-next-line no-nested-ternary
+    const hiddenRowsNumber = pinned
+        ? undefined
+        : lines > maxLines
+            ? Math.abs(maxLines - lines)
+            : undefined;
+    const hiddenRowsSum = hiddenRowsNumber
+        ? valueFormatter(rows
+            .slice(-hiddenRowsNumber)
+            .reduce((sum, { originalValue }) => sum + (originalValue || 0), 0))
+        : undefined;
+    const tooltipFormatOptions = {
+        activeRowAlwaysFirstInTooltip: rows.length > 1,
+        tooltipHeader: moment(x / timeMultiplier).format('DD MMMM YYYY HH:mm:ss'),
+        shared: true,
+        lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: row.color, selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
+        withPercent: calcOption(opts.percent),
+        hiddenRowsNumber: hiddenRowsNumber,
+        hiddenRowsSum,
+    };
+    if (sum) {
+        tooltipFormatOptions.sum = valueFormatter(sumTotal);
+    }
+    return formatTooltip(tooltipFormatOptions, {
+        options: { locale },
+        lastVisibleRowIndex: pinned ? rows.length - 1 : maxLines - 1,
+    });
+};
+const getXAxisFormatter = (msm = 1) => (_, ticks) => {
+    const range = (ticks[ticks.length - 1] - ticks[0]) / msm;
+    return ticks.map((rawValue) => {
+        const d = moment(rawValue / msm);
+        if (d.hour() === 0 && d.minutes() === 0 && d.seconds() === 0) {
+            return d.format('DD.MM.YY');
+        }
+        return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');
+    });
+};
+const YagrWidget = React.forwardRef((props, forwardedRef) => {
+    var _a, _b;
+    const yagrRef = React.useRef(null);
+    const { data, libraryConfig } = props.data;
+    const { id, onLoad } = props;
+    const theme = useThemeValue();
+    const handlers = {
+        mouseMove: null,
+        mouseDown: null,
+    };
+    const checkFocus = (tooltip) => (event) => {
+        var _a, _b;
+        const yagr = (_a = yagrRef === null || yagrRef === void 0 ? void 0 : yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
+        if (!yagr) {
+            return;
+        }
+        const target = event.target;
+        const seriesIdx = target && tooltip.contains(target) && target.tagName === 'TD'
+            ? (_b = target.parentElement) === null || _b === void 0 ? void 0 : _b.dataset['seriesIdx']
+            : undefined;
+        const serie = seriesIdx ? yagr.uplot.series[Number(seriesIdx)] : null;
+        yagr.focus(serie ? serie.id : null, true);
+    };
+    const detectClickOutside = (tooltip, actions) => (event) => {
+        var _a, _b;
+        const yagr = (_a = yagrRef === null || yagrRef === void 0 ? void 0 : yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
+        if (!yagr) {
+            return;
+        }
+        const target = event.target;
+        if (target instanceof Element) {
+            const isClickInsideTooltip = target && tooltip.contains(target);
+            const isClickOnUplotOver = target && ((_b = yagr.root.querySelector('.u-over')) === null || _b === void 0 ? void 0 : _b.contains(target));
+            if (!isClickInsideTooltip && !isClickOnUplotOver) {
+                actions.pin(false);
+                actions.hide();
+            }
+        }
+    };
+    const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
+    config.settings = Object.assign({ locale: props.lang, theme }, (config.settings || {}));
+    if (((_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.enabled) !== false) {
+        config.tooltip = config.tooltip || {};
+        config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || renderTooltip;
+        // "className" property prevent default yagr styles adding
+        config.tooltip.className = 'chartkit-yagr-tooltip';
+        config.tooltip.onStateChange = (tooltip, { action, actions }) => {
+            switch (action) {
+                case 'pin': {
+                    handlers.mouseMove = checkFocus(tooltip);
+                    handlers.mouseDown = detectClickOutside(tooltip, actions);
+                    document.addEventListener('mousemove', handlers.mouseMove);
+                    document.addEventListener('mousedown', handlers.mouseDown);
+                    break;
+                }
+                case 'unpin': {
+                    if (handlers.mouseMove) {
+                        document.removeEventListener('mousemove', handlers.mouseMove);
+                        handlers.mouseMove = null;
+                    }
+                    if (handlers.mouseDown) {
+                        document.removeEventListener('mousedown', handlers.mouseDown);
+                        handlers.mouseDown = null;
+                    }
+                    break;
+                }
+                case 'render': {
+                    synchronizeTooltipTablesCellsWidth(tooltip);
+                }
+            }
+        };
+    }
+    config.axes = config.axes || {};
+    const xAxis = config.axes[defaults.DEFAULT_X_SCALE];
+    if (xAxis && !xAxis.values) {
+        xAxis.values = getXAxisFormatter(config.settings.timeMultiplier);
+    }
+    if (!xAxis) {
+        config.axes[defaults.DEFAULT_X_SCALE] = {
+            values: getXAxisFormatter(config.settings.timeMultiplier),
+        };
+    }
+    const debugFileName = props.data.sources
+        ? Object.values(props.data.sources)
+            .map((source) => {
+            var _a;
+            return (_a = source === null || source === void 0 ? void 0 : source.data) === null || _a === void 0 ? void 0 : _a.program;
+        })
+            .filter(Boolean)
+            .join(', ') || id
+        : id;
+    const handleChartLoading = React.useCallback((chart, { renderTime }) => {
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(Object.assign(Object.assign({}, data), { widget: chart, widgetRendering: renderTime }));
+    }, [onLoad, data]);
+    const onWindowResize = React.useCallback(() => {
+        var _a;
+        if ((_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart) {
+            const chart = yagrRef.current.chart;
+            const root = chart.root;
+            const height = root.offsetHeight;
+            const width = root.offsetWidth;
+            chart.uplot.setSize({ width, height });
+            chart.uplot.redraw();
+        }
+    }, []);
+    React.useImperativeHandle(forwardedRef, () => ({
+        reflow() {
+            onWindowResize();
+        },
+    }), [onWindowResize]);
+    React.useEffect(() => {
+        const debouncedOnWindowResize = debounce(onWindowResize, 50);
+        window.addEventListener('resize', debouncedOnWindowResize);
+        return () => {
+            window.removeEventListener('resize', debouncedOnWindowResize);
+        };
+    }, [onWindowResize]);
+    return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, onChartLoad: handleChartLoading, debug: { filename: debugFileName } }));
+});
+export default YagrWidget;

package/build/plugins/yagr/renderer/polyfills.d.ts

@@ -0,0 +1 @@
+declare const oMatchMedia: ((query: string) => MediaQueryList) & typeof matchMedia;

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

@@ -0,0 +1,17 @@
+"use strict";
+/* @see https://github.com/leeoniya/uPlot/issues/538#issuecomment-870711531 */
+// eslint-disable-next-line
+const oMatchMedia = window.matchMedia;
+// eslint-disable-next-line
+window.matchMedia = (query) => {
+    const mql = oMatchMedia(query);
+    if (!mql.addEventListener) {
+        mql.addEventListener = (_, handler) => {
+            mql.addListener(handler);
+        };
+        mql.removeEventListener = (_, handler) => {
+            mql.removeListener(handler);
+        };
+    }
+    return mql;
+};

package/build/plugins/yagr/renderer/synchronizeTooltipTablesCellsWidth.d.ts

@@ -0,0 +1 @@
+export declare function synchronizeTooltipTablesCellsWidth(tooltipContainer: any): false | undefined;

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

@@ -0,0 +1,43 @@
+const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
+const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
+// @ts-ignore
+export function synchronizeTooltipTablesCellsWidth(tooltipContainer) {
+    const tHeadNode = tooltipContainer.querySelector(`.${TOOLTIP_HEADER_CLASS_NAME}`);
+    const tBodyNode = tooltipContainer.querySelector(`.${TOOLTIP_LIST_CLASS_NAME}`);
+    if (!tHeadNode || !tHeadNode.children.length) {
+        return false;
+    }
+    const tHeadNodeFirstRow = tHeadNode.children[0];
+    for (let j = 0; j < tHeadNodeFirstRow.children.length; j++) {
+        const cell = tHeadNodeFirstRow.children[j];
+        cell.removeAttribute('style');
+        if (tBodyNode.children.length === 1) {
+            cell.innerHTML = '&nbsp;';
+        }
+    }
+    const tBodyNodeFirstRow = tBodyNode.children[0];
+    for (let j = 0; j < tBodyNodeFirstRow.children.length; j++) {
+        const cell = tBodyNodeFirstRow.children[j];
+        cell.removeAttribute('style');
+    }
+    const tHeadRowsWidth = tHeadNode.children[0].getBoundingClientRect().width;
+    const tBodyRowsWidth = tBodyNode.children[0].getBoundingClientRect().width;
+    const nodeWithWidesRows = tHeadRowsWidth > tBodyRowsWidth ? tHeadNode : tBodyNode;
+    const nodeWithWidesRowsCellsWidth = Array.prototype.reduce.call(nodeWithWidesRows.children[0].children, (accum, cellNode) => {
+        // @ts-ignore
+        accum.push(cellNode.getBoundingClientRect().width);
+        return accum;
+    }, []);
+    const nodeToSetCellsWidth = nodeWithWidesRows === tHeadNode ? tBodyNode : tHeadNode;
+    const nodeToSetCellsWidthFirstRow = nodeToSetCellsWidth.children[0];
+    for (let j = 0; j < nodeToSetCellsWidthFirstRow.children.length; j++) {
+        const cell = nodeToSetCellsWidthFirstRow.children[j];
+        // @ts-ignore
+        cell.setAttribute('style', `width: ${nodeWithWidesRowsCellsWidth[j]}px`);
+    }
+    if (tBodyNode.children.length === 1) {
+        for (const cell of tHeadNodeFirstRow.children) {
+            cell.innerHTML = '';
+        }
+    }
+}

package/build/plugins/yagr/renderer/tooltip/helpers/escapeHTML.d.ts

@@ -0,0 +1 @@
+export declare function escapeHTML(html: string): string;

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

@@ -0,0 +1,5 @@
+export function escapeHTML(html) {
+    const elem = document.createElement('span');
+    elem.innerText = html;
+    return elem.innerHTML;
+}