feat: useWidgetData fixes

jest.config.ts

@@ -5,6 +5,10 @@ const cfg: Config.InitialOptions = {
     preset: 'ts-jest',
     testEnvironment: 'jsdom',
     modulePathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
+    moduleNameMapper: {
+        '^.+\\.(css|scss)$': '<rootDir>/test-utils/style.mock.ts',
+    },
+    setupFiles: ['<rootDir>/test-utils/globals.mock.ts'],
 };
 
 export default cfg;

src/plugins/index.ts

@@ -1,5 +1,5 @@
 export {YagrPlugin} from './yagr';
-export type {Yagr, YagrWidgetData} from './yagr/types';
+export * from './yagr/types';
 export {IndicatorPlugin} from './indicator';
 export type {IndicatorWidgetData} from './indicator/types';
 export {HighchartsPlugin} from './highcharts';

src/plugins/yagr/__stories__/mocks/line10.ts

@@ -57,9 +57,7 @@ export const line10: YagrWidgetData = {
         },
         tooltip: {
             show: true,
-            boundClassName: '.wrapper',
             tracking: 'sticky',
-            className: 'chartkit-theme_common',
         },
         legend: {},
         processing: {},

src/plugins/yagr/__tests__/utils.test.ts

@@ -0,0 +1,29 @@
+import {shapeYagrConfig} from '../renderer/utils';
+import type {YagrWidgetData, MinimalValidConfig} from '../types';
+
+const DATA: YagrWidgetData['data'] = {
+    timeline: [1],
+    graphs: [{data: [45]}],
+};
+
+describe('plugins/yagr/utils', () => {
+    describe('shapeYagrConfig > check chart property', () => {
+        test.each<[Partial<MinimalValidConfig['chart']>, Partial<MinimalValidConfig['chart']>]>([
+            [{}, {appereance: {locale: 'en', theme: 'dark'}}],
+            [{appereance: {locale: 'ru'}}, {appereance: {locale: 'ru', theme: 'dark'}}],
+            [{appereance: {theme: 'light'}}, {appereance: {locale: 'en', theme: 'light'}}],
+            [
+                {series: {type: 'dots'}, select: {zoom: false}, timeMultiplier: 1},
+                {
+                    appereance: {locale: 'en', theme: 'dark'},
+                    series: {type: 'dots'},
+                    select: {zoom: false},
+                    timeMultiplier: 1,
+                },
+            ],
+        ])('(args: %j)', (chart, expected) => {
+            const config = shapeYagrConfig({data: DATA, libraryConfig: {chart}, theme: 'dark'});
+            expect(config.chart).toEqual(expected);
+        });
+    });
+});

src/plugins/yagr/renderer/tooltip/renderTooltip.ts

@@ -1,7 +1,7 @@
 import moment from 'moment';
-import {TooltipRow, TooltipRenderOptions, ValueFormatter} from 'yagr';
-import {formatTooltip} from './tooltip';
+import type {TooltipRow, TooltipRenderOptions, ValueFormatter} from '../../types';
 import type {TooltipData, TooltipLine} from './types';
+import {formatTooltip} from './tooltip';
 
 const calcOption = <T>(d: T | {[key in string]: T} | undefined) => {
     return typeof d === 'object'

src/plugins/yagr/renderer/useWidgetData.ts

@@ -1,54 +1,18 @@
 import React from 'react';
 import {useThemeType} from '@gravity-ui/uikit';
-import {defaults} from 'yagr';
-import type {YagrConfig, YagrTheme, MinimalValidConfig} from 'yagr';
 import type {YagrChartProps} from 'yagr/dist/react';
-import {settings} from '../../../libs';
-import type {YagrWidgetData} from '../types';
-import {renderTooltip} from './tooltip';
-import {getXAxisFormatter} from './utils';
+import type {YagrWidgetData, YagrTheme, MinimalValidConfig} from '../types';
+import {shapeYagrConfig} from './utils';
 
 export const useWidgetData = (
     args: YagrWidgetData & {id: string},
 ): {config: MinimalValidConfig; debug: YagrChartProps['debug']} => {
     const {id, data, sources, libraryConfig} = args;
     const theme = useThemeType() as YagrTheme;
-    const config: Partial<YagrConfig> & MinimalValidConfig = React.useMemo(() => {
-        const result: Partial<YagrConfig> & MinimalValidConfig = {
-            ...libraryConfig,
-            timeline: data.timeline,
-            series: data.graphs,
-        };
-
-        result.chart = {
-            appereance: {
-                locale: settings.get('lang'),
-                theme,
-                ...result.chart?.appereance,
-            },
-            ...result.chart,
-        };
-
-        if (result.tooltip?.show !== false) {
-            result.tooltip = result.tooltip || {};
-            result.tooltip.render = result.tooltip?.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 config: MinimalValidConfig = React.useMemo(
+        () => shapeYagrConfig({data, libraryConfig, theme}),
+        [data, libraryConfig, theme],
+    );
     const debug: YagrChartProps['debug'] = React.useMemo(() => {
         const filename = sources
             ? Object.values(sources)

src/plugins/yagr/renderer/utils.ts

@@ -1,9 +1,19 @@
 import moment from 'moment';
-import type {default as Yagr} from 'yagr';
+import merge from 'lodash/merge';
+import {defaults} from 'yagr';
+import {settings} from '../../../libs';
+import type {Yagr, YagrWidgetData, YagrTheme, YagrChartOptions, MinimalValidConfig} from '../types';
+import {renderTooltip} from './tooltip';
 
 const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
 const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
 
+type ShapeYagrConfigArgs = {
+    data: YagrWidgetData['data'];
+    libraryConfig: YagrWidgetData['libraryConfig'];
+    theme: YagrTheme;
+};
+
 export const synchronizeTooltipTablesCellsWidth = (tooltipContainer: HTMLElement) => {
     const tHeadNode = tooltipContainer.querySelector(`.${TOOLTIP_HEADER_CLASS_NAME}`);
     const tBodyNode = tooltipContainer.querySelector(`.${TOOLTIP_LIST_CLASS_NAME}`);
@@ -105,7 +115,7 @@ export const detectClickOutside =
         }
     };
 
-export const getXAxisFormatter =
+const getXAxisFormatter =
     (msm = 1) =>
     (_: unknown, ticks: number[]) => {
         const range = (ticks[ticks.length - 1] - ticks[0]) / msm;
@@ -119,3 +129,48 @@ export const getXAxisFormatter =
             return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');
         });
     };
+
+export const shapeYagrConfig = (args: ShapeYagrConfigArgs): MinimalValidConfig => {
+    const {data, libraryConfig, theme} = args;
+    const config: MinimalValidConfig = {
+        ...libraryConfig,
+        timeline: data.timeline,
+        series: data.graphs,
+    };
+
+    const chart: YagrChartOptions = {
+        appereance: {
+            locale: settings.get('lang'),
+            theme,
+        },
+    };
+
+    merge(chart, config.chart);
+
+    config.chart = chart;
+
+    if (config.tooltip?.show) {
+        config.tooltip = config.tooltip || {};
+        config.tooltip.render = config.tooltip?.render || renderTooltip;
+
+        if (!config.tooltip.className) {
+            // "className" property prevent default yagr styles adding
+            config.tooltip.className = 'chartkit-yagr-tooltip';
+        }
+    }
+
+    config.axes = config.axes || {};
+    const xAxis = config.axes[defaults.DEFAULT_X_SCALE];
+
+    if (xAxis && !xAxis.values) {
+        xAxis.values = getXAxisFormatter(config.chart.timeMultiplier);
+    }
+
+    if (!xAxis) {
+        config.axes[defaults.DEFAULT_X_SCALE] = {
+            values: getXAxisFormatter(config.chart.timeMultiplier),
+        };
+    }
+
+    return config;
+};

src/plugins/yagr/types.ts

@@ -1,6 +1,7 @@
-import type {default as YagrLib, RawSerieData, YagrConfig} from 'yagr';
+import type {RawSerieData, YagrConfig} from 'yagr';
 
-export type Yagr = YagrLib;
+export type {default as Yagr} from 'yagr';
+export * from 'yagr/dist/types';
 
 export type YagrWidgetData = {
     data: {

src/types/widget.ts

@@ -1,5 +1,4 @@
-import type Yagr from 'yagr';
-import type {YagrWidgetData} from '../plugins/yagr/types';
+import type {Yagr, YagrWidgetData} from '../plugins/yagr/types';
 import type {IndicatorWidgetData} from '../plugins/indicator/types';
 import type {Highcharts, HighchartsWidgetData, StringParams} from '../plugins/highcharts/types';
 

test-utils/globals.mock.ts

@@ -0,0 +1,12 @@
+// https://stackoverflow.com/a/42685938
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});

test-utils/style.mock.ts

@@ -0,0 +1 @@
+module.exports = {};