@gravity-ui/chartkit 0.13.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.0.0](https://github.com/gravity-ui/chartkit/compare/v0.13.0...v1.0.0) (2022-12-07)
+
+
+### ⚠ BREAKING CHANGES
+
+* update yagr to v2 ([#82](https://github.com/gravity-ui/chartkit/issues/82))
+
+### Features
+
+* update yagr to v2 ([#82](https://github.com/gravity-ui/chartkit/issues/82)) ([ae3c347](https://github.com/gravity-ui/chartkit/commit/ae3c3471bc7bb0d4a2d5af850bac1ecb4eb8e3bb))
+
+
+### chore
+
+* bump major ([966c40b](https://github.com/gravity-ui/chartkit/commit/966c40b89d4795acbadb798fcd1e2031481d76a2))
+
 ## [0.13.0](https://github.com/gravity-ui/chartkit/compare/v0.12.3...v0.13.0) (2022-12-05)
 
 

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

@@ -9,28 +9,30 @@ export const line10 = {
                 id: '0',
                 name: 'Serie 1',
                 color: '#6c59c2',
-                visible: true,
-                data: [25, 52, 89, 72, 39, 49, 82, 59, 36, 5],
+                data: [45, 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',
+            series: {
+                type: 'line',
+            },
+            select: {
+                zoom: false,
+            },
         },
         title: {
             text: 'line: random 10 pts',
@@ -51,11 +53,8 @@ export const line10 = {
                 style: 'solid 2px rgba(230, 2, 7, 0.3)',
             },
         },
-        settings: {
-            adaptive: true,
-        },
         tooltip: {
-            enabled: true,
+            show: true,
             boundClassName: '.wrapper',
             tracking: 'sticky',
             className: 'chartkit-theme_common',

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

@@ -1,179 +1,22 @@
 import React from 'react';
-import moment from 'moment';
-import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import { useThemeType } from '@gravity-ui/uikit';
 import YagrComponent from 'yagr/dist/react';
-import { defaults, } from 'yagr';
 import { i18n } from '../../../i18n';
-import { settings, CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
-import { formatTooltip } from './tooltip/tooltip';
-import { synchronizeTooltipTablesCellsWidth } from './synchronizeTooltipTablesCellsWidth';
+import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
+import { useWidgetData } from './useWidgetData';
+import { checkFocus, detectClickOutside, synchronizeTooltipTablesCellsWidth } from './utils';
 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 { id, data: { data }, onLoad, } = props;
     const yagrRef = React.useRef(null);
-    const { data, libraryConfig } = props.data;
-    const { id, onLoad } = props;
-    const theme = useThemeType();
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
             code: CHARTKIT_ERROR_CODE.NO_DATA,
             message: i18n('error', 'label_no-data'),
         });
     }
-    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: settings.get('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 { config, debug } = useWidgetData(Object.assign(Object.assign({}, props.data), { 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]);
@@ -193,13 +36,36 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
             onWindowResize();
         },
     }), [onWindowResize]);
-    React.useEffect(() => {
-        const debouncedOnWindowResize = debounce(onWindowResize, 50);
-        window.addEventListener('resize', debouncedOnWindowResize);
-        return () => {
-            window.removeEventListener('resize', debouncedOnWindowResize);
+    React.useLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
+        if (!yagr) {
+            return;
+        }
+        const handlers = {
+            mouseMove: null,
+            mouseDown: null,
         };
-    }, [onWindowResize]);
-    return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, onChartLoad: handleChartLoading, debug: { filename: debugFileName } }));
+        (_b = yagr.plugins.tooltip) === null || _b === void 0 ? void 0 : _b.on('render', (tooltip) => {
+            synchronizeTooltipTablesCellsWidth(tooltip);
+        });
+        (_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('pin', (tooltip, { actions }) => {
+            handlers.mouseMove = checkFocus({ tooltip, yagr });
+            handlers.mouseDown = detectClickOutside({ tooltip, actions, yagr });
+            document.addEventListener('mousemove', handlers.mouseMove);
+            document.addEventListener('mousedown', handlers.mouseDown);
+        });
+        (_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.on('unpin', () => {
+            if (handlers.mouseMove) {
+                document.removeEventListener('mousemove', handlers.mouseMove);
+                handlers.mouseMove = null;
+            }
+            if (handlers.mouseDown) {
+                document.removeEventListener('mousedown', handlers.mouseDown);
+                handlers.mouseDown = null;
+            }
+        });
+    });
+    return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
 });
 export default YagrWidget;

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

@@ -0,0 +1 @@
+export { renderTooltip } from './renderTooltip';

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

@@ -0,0 +1 @@
+export { renderTooltip } from './renderTooltip';

package/build/plugins/yagr/renderer/tooltip/renderTooltip.d.ts

@@ -0,0 +1,2 @@
+import { TooltipRenderOptions } from 'yagr';
+export declare const renderTooltip: (data: TooltipRenderOptions) => string;

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

@@ -0,0 +1,55 @@
+import moment from 'moment';
+import { formatTooltip } from './tooltip';
+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.
+ */
+export const renderTooltip = (data) => {
+    const cfg = data.yagr.config;
+    const timeMultiplier = cfg.chart.timeMultiplier || 1;
+    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((acc, { originalValue }) => acc + (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, {
+        lastVisibleRowIndex: pinned ? rows.length - 1 : maxLines - 1,
+    });
+};

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

@@ -1,141 +1,3 @@
+import type { TooltipData, TooltipExtraData } from './types';
 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_CLASS_NAME = "_tooltip-row";
-export declare const TOOLTIP_HEADER_CLASS_NAME = "_tooltip-header";
-export declare const TOOLTIP_LIST_CLASS_NAME = "_tooltip-list";
-export declare const TOOLTIP_FOOTER_CLASS_NAME = "_tooltip-footer";
-declare type Tooltip = any;
-export interface TooltipData {
-    /**
-     * Массив строк выводящихся в тултипе (см. TooltipLine)
-     */
-    lines: Array<TooltipLine>;
-    /**
-     * массив комментариев (задаются в диалоге комментариев)
-     */
-    xComments?: Array<{
-        /**
-         * текст комментария
-         */
-        text: string;
-        /**
-         * цвет отображающийся над комментарием
-         */
-        color: string;
-    }>;
-    /**
-     * текст комментария (задаётся через manageTooltipConfig)
-     */
-    commentDateText?: string;
-    /**
-     * флаг, указывающий что нужно всегда дублировать активную строку выводя её поверх основного списка (дефолтное
-     * поведение - активная строка выводится поверх основного списка только если "не поместилась" в тултип)
-     */
-    activeRowAlwaysFirstInTooltip?: boolean;
-    /**
-     *  флаг, указыващий что чарт отображается в режиме split tooltip
-     */
-    splitTooltip?: boolean;
-    /**
-     * текст хедера тултипа
-     */
-    tooltipHeader?: string;
-    /**
-     * флаг, указывающий, что в тултипе выводится колонка с названием строки
-     */
-    shared?: boolean;
-    /**
-     * флаг, указывающий, что в тултипе выводится колонка с процентным значением
-     */
-    withPercent?: boolean;
-    /**
-     * флаг, указывающий, что в тултипе выводится колонка с diff-ом
-     */
-    useCompareFrom?: boolean;
-    /**
-     * флаг, указывающий, что в тултипе выводится блок с информацией о праздничном дне
-     */
-    holiday?: boolean;
-    /**
-     * название праздничного дня
-     */
-    holidayText?: string;
-    /**
-     * регион для которого актуален праздничный день
-     */
-    region?: string;
-    /**
-     * сумма значений выводящихся в тултипе строк
-     */
-    sum?: number | string;
-    /**
-     * количество скрытых строк "не поместившихся" в тултип
-     */
-    hiddenRowsNumber: number;
-    /**
-     * сумма значений скрытых ("не поместившихся" в тултип) строк
-     */
-    hiddenRowsSum?: number | string;
-}
-export interface TooltipLine {
-    /**
-     * цвет выводящийся в соответсвующей ячейке
-     */
-    seriesColor: string;
-    /**
-     * название измерения выводящееся в соответсвующей ячейке
-     */
-    seriesName: string;
-    /**
-     * индекс линии
-     */
-    seriesIdx?: number;
-    /**
-     * флаг, указывающий, должно ли отображаться название строки
-     */
-    hideSeriesName?: boolean;
-    /**
-     * процентное значение выводящееся в соответвующей ячейке
-     */
-    percentValue?: number | string;
-    /**
-     * значение diff-а выводящееся в соответвующей ячейке
-     */
-    diff?: string;
-    /**
-     * отформатированное числовое значение для текущего измерения выводящееся в соответствующей ячейке
-     */
-    value: string;
-    /**
-     * Комментарий к строке (отображается под соответствующей строкой), задаётся через manageTooltipConfig
-     */
-    commentText?: string;
-    /**
-     * Комментарий к строке (отображается под соответствующей строкой), задаётся через диалог комментариев
-     */
-    xyCommentText?: string;
-    /**
-     * флаг, указывающий, что данная строка активна
-     */
-    selectedSeries?: boolean;
-    /**
-     * кастомный рендер соответсвующей строки (строка с текстом либо html разметкой)
-     */
-    customRender?: string;
-    /**
-     * объект, где ключи - индексы ячеек, контент которых должен быть заменён, значения - функции возвращающие
-     * строку (с текстом либо html разметкой) которая будет вставлена в ячейку на соответствующем индексе
-     */
-    replaceCellAt?: Record<number, (line: TooltipLine) => string>;
-    /**
-     * объект, где ключи - индексы на которые будут вставлены новые ячейки (ячейка ранее располагавшаяся на этом
-     * индексе и последующие за ней будут сдвинуты), значения - функции возвращающие строку (с текстом либо html
-     * разметкой) которая будет вставлена в добавившуюся ячейку
-     */
-    insertCellAt?: Record<number, (line: TooltipLine) => string>;
-}
-export declare const formatTooltip: (data: TooltipData, tooltip: Tooltip) => string;
-export {};
+export declare const formatTooltip: (data: TooltipData, tooltip: TooltipExtraData) => string;

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

@@ -1,14 +1,15 @@
+/* eslint complexity: 0 */
 import { i18n } from '../../../../i18n';
 import { escapeHTML } from './helpers/escapeHTML';
 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_CLASS_NAME = '_tooltip-row';
-export const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
-export const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
-export const TOOLTIP_FOOTER_CLASS_NAME = '_tooltip-footer';
+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_CLASS_NAME = '_tooltip-row';
+const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
+const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
+const TOOLTIP_FOOTER_CLASS_NAME = '_tooltip-footer';
 const renderEmptyCell = () => '<td />';
 const renderColorCell = (line) => `<td class="_tooltip-rows__bubble-td">
         <div class="_tooltip-rows__bubble-div" style="background-color:${line.seriesColor};"></div>
@@ -154,7 +155,7 @@ export const formatTooltip = (data, tooltip) => {
         tooltipContainerClassNames += ` ${TOOLTIP_CONTAINER_CLASS_NAME}_split-tooltip`;
     }
     return `
-<div class="${tooltipContainerClassNames}" style="${tooltip.preFixationHeight ? `height: ${tooltip.preFixationHeight}px; ` : ''}max-height: ${splitTooltip ? 'auto' : `${windowHeight}px`}">
+<div class="${tooltipContainerClassNames}" style="max-height: ${splitTooltip ? 'auto' : `${windowHeight}px`}">
     ${data.tooltipHeader
         ? `<div title="${(document.createRange().createContextualFragment(data.tooltipHeader).textContent ||
             '').trim()}" class="_tooltip-date">

package/build/plugins/yagr/renderer/tooltip/types.d.ts

@@ -0,0 +1,74 @@
+export declare type TooltipData = {
+    /** Tooltip lines data */
+    lines: Array<TooltipLine>;
+    /** Tooltip comments */
+    xComments?: Array<{
+        text: string;
+        color: string;
+    }>;
+    commentDateText?: string;
+    /**
+     * Indicating that active line duplicated by displaying it on top of the main list
+     * default behavior - the active line is displayed on top of the main list only if it"does not fit" in the tooltip
+     */
+    activeRowAlwaysFirstInTooltip?: boolean;
+    /** Indicating that the chart is displayed in "split tooltip" mode */
+    splitTooltip?: boolean;
+    /** Text of the header of the tooltip */
+    tooltipHeader?: string;
+    /** Indicating that a column with the line name is displayed in the tooltip */
+    shared?: boolean;
+    /** Indicating that a column with a percentage value is displayed in the tooltip */
+    withPercent?: boolean;
+    /** Indicating that a column with a diff is displayed in the tooltip */
+    useCompareFrom?: boolean;
+    /** Indicating that the tooltip displays a block with information about the holiday */
+    holiday?: boolean;
+    /** Name of the holiday */
+    holidayText?: string;
+    /** Region for which the holiday is relevant */
+    region?: string;
+    /** Sum of the values of the rows displayed in the tooltip */
+    sum?: number | string;
+    /** Number of hidden lines "not fit" in the tooltip */
+    hiddenRowsNumber: number;
+    /** Sum of the values of the hidden ("not fit" in the tooltip) rows */
+    hiddenRowsSum?: number | string;
+};
+export declare type TooltipExtraData = {
+    lastVisibleRowIndex: number;
+};
+export declare type TooltipLine = {
+    /** Color displayed in a separate cell */
+    seriesColor: string;
+    /** Series name */
+    seriesName: string;
+    /** Series index */
+    seriesIdx?: number;
+    /** Indicating whether the series name should be displayed */
+    hideSeriesName?: boolean;
+    /** Percentage value displayed in a separate cell */
+    percentValue?: number | string;
+    /** Diff value displayed in the separate cell */
+    diff?: string;
+    /** Formatted numeric value for the current series displayed in a separate cell */
+    value: string;
+    /** Comment to the line (displayed under the corresponding line), set via manageTooltipConfig */
+    commentText?: string;
+    /** Comment to the line (displayed under the corresponding line) */
+    xyCommentText?: string;
+    /** Indicating that line is active */
+    selectedSeries?: boolean;
+    /** Custom renderer of the line (a string with text or html markup) */
+    customRender?: string;
+    replaceCellAt?: Record<number, (line: TooltipLine) => string>;
+    insertCellAt?: Record<number, (line: TooltipLine) => string>;
+};
+export declare type RowRenderingConfig = {
+    cellsRenderers: Array<(line: TooltipLine) => string>;
+    isSelectedLine?: boolean;
+    allowComment?: boolean;
+    withDarkBackground?: boolean;
+    isSingleLine?: boolean;
+    rowIndex?: number;
+};

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

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

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

@@ -0,0 +1,9 @@
+import type { MinimalValidConfig } from 'yagr';
+import type { YagrChartProps } from 'yagr/dist/react';
+import type { YagrWidgetData } from '../types';
+export declare const useWidgetData: (args: YagrWidgetData & {
+    id: string;
+}) => {
+    config: MinimalValidConfig;
+    debug: YagrChartProps['debug'];
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useThemeType } from '@gravity-ui/uikit';
+import { defaults } from 'yagr';
+import { settings } from '../../../libs';
+import { renderTooltip } from './tooltip';
+import { getXAxisFormatter } from './utils';
+export const useWidgetData = (args) => {
+    const { id, data, sources, libraryConfig } = args;
+    const theme = useThemeType();
+    const config = React.useMemo(() => {
+        var _a, _b, _c;
+        const result = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
+        result.chart = Object.assign({ appereance: Object.assign({ locale: settings.get('lang'), theme }, (_a = result.chart) === null || _a === void 0 ? void 0 : _a.appereance) }, result.chart);
+        if (((_b = result.tooltip) === null || _b === void 0 ? void 0 : _b.show) !== false) {
+            result.tooltip = result.tooltip || {};
+            result.tooltip.render = ((_c = result.tooltip) === null || _c === void 0 ? void 0 : _c.render) || renderTooltip;
+        }
+        result.axes = result.axes || {};
+        const xAxis = result.axes[defaults.DEFAULT_X_SCALE];
+        if (xAxis && !xAxis.values) {
+            xAxis.values = getXAxisFormatter(result.chart.timeMultiplier);
+        }
+        if (!xAxis) {
+            result.axes[defaults.DEFAULT_X_SCALE] = {
+                values: getXAxisFormatter(result.chart.timeMultiplier),
+            };
+        }
+        return result;
+    }, [data, libraryConfig, theme]);
+    const debug = React.useMemo(() => {
+        const filename = sources
+            ? Object.values(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;
+        return { filename };
+    }, [id, sources]);
+    return { config, debug };
+};

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

@@ -0,0 +1,15 @@
+import type { default as Yagr } from 'yagr';
+export declare const synchronizeTooltipTablesCellsWidth: (tooltipContainer: HTMLElement) => void;
+export declare const checkFocus: (args: {
+    tooltip: HTMLElement;
+    yagr?: Yagr;
+}) => (event: MouseEvent) => void;
+export declare const detectClickOutside: (args: {
+    tooltip: HTMLElement;
+    actions: {
+        pin: (state: boolean) => void;
+        hide: () => void;
+    };
+    yagr?: Yagr<import("yagr").MinimalValidConfig> | undefined;
+}) => (event: MouseEvent) => void;
+export declare const getXAxisFormatter: (msm?: number) => (_: unknown, ticks: number[]) => string[];

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

@@ -0,0 +1,80 @@
+import moment from 'moment';
+const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
+const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
+export const synchronizeTooltipTablesCellsWidth = (tooltipContainer) => {
+    const tHeadNode = tooltipContainer.querySelector(`.${TOOLTIP_HEADER_CLASS_NAME}`);
+    const tBodyNode = tooltipContainer.querySelector(`.${TOOLTIP_LIST_CLASS_NAME}`);
+    if (!tHeadNode || !tBodyNode || !tHeadNode.children.length) {
+        return;
+    }
+    const tHeadNodeFirstRow = tHeadNode.children[0];
+    for (let j = 0; j < tHeadNodeFirstRow.children.length; j++) {
+        const cell = tHeadNodeFirstRow.children[j];
+        cell.removeAttribute('style');
+        if ((tBodyNode === null || tBodyNode === void 0 ? void 0 : 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) => {
+        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];
+        cell.setAttribute('style', `width: ${nodeWithWidesRowsCellsWidth[j]}px`);
+    }
+    if (tBodyNode.children.length === 1) {
+        for (const cell of tHeadNodeFirstRow.children) {
+            cell.innerHTML = '';
+        }
+    }
+};
+export const checkFocus = (args) => (event) => {
+    var _a;
+    const { tooltip, yagr } = args;
+    if (!yagr) {
+        return;
+    }
+    const target = event.target;
+    const seriesIdx = target && tooltip.contains(target) && target.tagName === 'TD'
+        ? (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.dataset['seriesIdx']
+        : undefined;
+    const serie = seriesIdx ? yagr.uplot.series[Number(seriesIdx)] : null;
+    yagr.setFocus(serie ? serie.id : null, true);
+};
+export const detectClickOutside = (args) => (event) => {
+    var _a;
+    const { tooltip, actions, yagr } = args;
+    if (!yagr) {
+        return;
+    }
+    const target = event.target;
+    if (target instanceof Element) {
+        const isClickInsideTooltip = target && tooltip.contains(target);
+        const isClickOnUplotOver = target && ((_a = yagr.root.querySelector('.u-over')) === null || _a === void 0 ? void 0 : _a.contains(target));
+        if (!isClickInsideTooltip && !isClickOnUplotOver) {
+            actions.pin(false);
+            actions.hide();
+        }
+    }
+};
+export 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');
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "0.13.0",
+  "version": "1.0.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -18,7 +18,7 @@
     "highcharts-react-official": "^3.0.0",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92",
-    "yagr": "1.3.7"
+    "yagr": "^2.0.1"
   },
   "devDependencies": {
     "@gravity-ui/eslint-config": "^1.0.2",

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

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

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

@@ -1,43 +0,0 @@
-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 = '';
-        }
-    }
-}