feat(gravity-charts): improve split tooltip UX

scripts/playwright-docker.sh

@@ -1,4 +1,7 @@
 #!/usr/bin/env bash
+# Usage:
+#   npm run test:docker:update                         - run all visual tests with --update
+#   npm run test:docker:update -- <file-pattern>        - run only matching files (e.g. Base.visual, SplitTooltip)
 
 set -euo pipefail
 

src/components/SplitPane/StyledSplitPane.scss

@@ -3,7 +3,16 @@
 
 .styled-split-pane {
     &__pane-resizer {
-        background: var(--g-color-base-generic);
+        background: linear-gradient(
+                to right,
+                var(--g-color-base-generic),
+                var(--g-color-base-generic)
+            ),
+            linear-gradient(
+                to right,
+                var(--g-color-base-background),
+                var(--g-color-base-background)
+            );
         z-index: 1;
         box-sizing: border-box;
         position: relative;
@@ -44,12 +53,23 @@
             height: 100%;
             width: 1px;
             min-width: 1px;
-            background: var(--data-table-border-color);
         }
     }
 
     .Pane {
         height: 100%;
-        background: var(--ck-split-pane-background);
+    }
+
+    .Pane2 {
+        background: linear-gradient(
+                to right,
+                var(--g-color-infographics-tooltip-bg),
+                var(--g-color-infographics-tooltip-bg)
+            ),
+            linear-gradient(
+                to right,
+                var(--g-color-base-background),
+                var(--g-color-base-background)
+            );
     }
 }

src/plugins/gravity-charts/__tests__/Base.visual.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type {ChartData} from '@gravity-ui/charts';
+
+import {render} from '../../../../test-utils/utils.js';
+import {settings} from '../../../libs/index.js';
+import {GravityChartsPlugin} from '../index.js';
+
+import {CHART_TEST_STORY_DATA_QA, ChartTestStory} from './ChartTestStory.js';
+
+describe('GravityCharts base tests', () => {
+    beforeAll(() => {
+        settings.set({plugins: [GravityChartsPlugin]});
+    });
+
+    test('should render chart with valid data', async () => {
+        const data: ChartData = {
+            series: {
+                data: [
+                    {
+                        type: 'line',
+                        name: 'Line 1',
+                        data: [
+                            {x: 0, y: 100},
+                            {x: 2, y: 80},
+                            {x: 3, y: 120},
+                        ],
+                    },
+                ],
+            },
+        };
+        const screen = await render(<ChartTestStory data={data} />);
+        await expect(screen.getByTestId(CHART_TEST_STORY_DATA_QA)).toMatchScreenshot();
+    });
+
+    test('should display "No data" when series is empty', async () => {
+        const data: ChartData = {series: {data: []}};
+        const screen = await render(<ChartTestStory data={data} />);
+        await expect.element(screen.getByText('No data')).toBeVisible();
+    });
+});

src/plugins/gravity-charts/__tests__/ChartTestStory.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type {ChartData} from '@gravity-ui/charts';
+
+import {ChartKit} from '../../../components/ChartKit.js';
+
+export const CHART_TEST_STORY_DATA_QA = 'chart-test-story-data-qa';
+
+type Props = {
+    data: ChartData;
+    styles?: React.CSSProperties;
+    tooltip?: {splitted?: boolean};
+};
+
+export const ChartTestStory = ({data, styles, tooltip}: Props) => {
+    const containerStyle: React.CSSProperties = {
+        height: '100vh',
+        width: '100vw',
+        ...styles,
+    };
+
+    return (
+        <div style={containerStyle} data-qa={CHART_TEST_STORY_DATA_QA}>
+            <ChartKit type="gravity-charts" data={data} tooltip={tooltip} />
+        </div>
+    );
+};

src/plugins/gravity-charts/__tests__/SplitTooltip.visual.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import type {ChartData} from '@gravity-ui/charts';
+import {page} from 'vitest/browser';
+
+import {render} from '../../../../test-utils/utils.js';
+import {settings} from '../../../libs/index.js';
+import {GravityChartsPlugin} from '../index.js';
+
+import {CHART_TEST_STORY_DATA_QA, ChartTestStory} from './ChartTestStory.js';
+
+const SPLIT_TOOLTIP_DATA: ChartData = {
+    series: {
+        data: [
+            {
+                type: 'bar-x',
+                name: 'Series 1',
+                data: [
+                    {x: 0, y: 40},
+                    {x: 1, y: 55},
+                ],
+            },
+        ],
+    },
+    xAxis: {type: 'category', categories: ['A', 'B']},
+};
+
+describe('Split tooltip visual tests', () => {
+    beforeAll(() => {
+        settings.set({plugins: [GravityChartsPlugin]});
+    });
+
+    test('should render tooltip in album orientation', async () => {
+        await page.viewport(600, 280);
+        const screen = await render(
+            <ChartTestStory data={SPLIT_TOOLTIP_DATA} tooltip={{splitted: true}} />,
+            {providers: {theme: 'dark'}},
+        );
+        await expect(screen.getByTestId(CHART_TEST_STORY_DATA_QA)).toMatchScreenshot();
+    });
+
+    test('should render tooltip in portrait orientation', async () => {
+        await page.viewport(280, 400);
+        const screen = await render(
+            <ChartTestStory data={SPLIT_TOOLTIP_DATA} tooltip={{splitted: true}} />,
+            {providers: {theme: 'dark'}},
+        );
+        await expect(screen.getByTestId(CHART_TEST_STORY_DATA_QA)).toMatchScreenshot();
+    });
+});

src/plugins/gravity-charts/renderer/__stories__/SplitTooltip.stories.tsx

@@ -6,39 +6,63 @@ import {ChartKit} from '../../../../components/ChartKit';
 
 import {StoryWrapper} from './StoryWrapper';
 
-function getPieSegmentData(name: string, color: string, index: number) {
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function generateBarXData() {
+    const categories = MONTHS;
+    const revenue = categories.map((_, i) => ({
+        x: i,
+        y: 40 + Math.sin(i * 0.5) * 25 + (i % 5) * 2,
+    }));
+    const expenses = categories.map((_, i) => ({
+        x: i,
+        y: 25 + Math.cos(i * 0.3) * 15 + (i % 3) * 3,
+    }));
+    const profit = categories.map((_, i) => ({
+        x: i,
+        y: (revenue[i].y as number) - (expenses[i].y as number),
+    }));
+
     return {
-        name,
-        value: index * 10,
-        label: name,
-        color: color,
+        categories,
+        series: [
+            {name: 'Revenue', color: '#4DA2F1', data: revenue},
+            {name: 'Expenses', color: '#FF3D64', data: expenses},
+            {name: 'Profit', color: '#8AD554', data: profit},
+        ],
     };
 }
 
-export const SplitTooltipBasic: StoryObj = {
-    name: 'Basic',
+const barXData = generateBarXData();
+
+export const SplitTooltipBarX: StoryObj = {
+    name: 'Bar-X with crosshair',
     render: () => {
         return (
-            <StoryWrapper>
+            <StoryWrapper style={{height: 400}}>
                 <ChartKit
                     type="gravity-charts"
                     data={{
                         series: {
-                            data: [
-                                {
-                                    type: 'pie',
-                                    dataLabels: {
-                                        enabled: true,
-                                        html: true,
-                                        connectorPadding: 8,
-                                    },
-                                    data: [
-                                        getPieSegmentData('One', '#4fc4b7', 1),
-                                        getPieSegmentData('Two', '#59abc9', 2),
-                                        getPieSegmentData('Three', '#8ccce3', 3),
-                                    ],
-                                },
-                            ],
+                            data: barXData.series.map((s) => ({
+                                type: 'bar-x' as const,
+                                name: s.name,
+                                color: s.color,
+                                stacking: 'normal',
+                                data: s.data,
+                            })),
+                        },
+                        legend: {enabled: false},
+                        xAxis: {
+                            type: 'category',
+                            categories: barXData.categories,
+                            crosshair: {enabled: true},
+                        },
+                        tooltip: {
+                            valueFormat: {
+                                precision: 2,
+                                type: 'number',
+                            },
                         },
                     }}
                     tooltip={{splitted: true}}

src/plugins/gravity-charts/renderer/withSplitPane/withSplitPane.tsx

@@ -63,7 +63,9 @@ const SplitPaneContent = (
         const containerHeight = height;
         if (containerHeight - RESIZER_HEIGHT === size) {
             setSize(containerHeight - RESIZER_HEIGHT - tooltipHeight);
-            chartRef.current?.reflow();
+            queueMicrotask(() => {
+                chartRef.current?.reflow({immediate: true});
+            });
         }
     }
 
@@ -104,6 +106,9 @@ const SplitPaneContent = (
         };
 
         return {
+            defaultState: {
+                hoveredPosition: {x: 0, y: 0},
+            },
             ...data,
             chart: {
                 ...data.chart,
@@ -116,7 +121,7 @@ const SplitPaneContent = (
                 ...data.tooltip,
                 enabled: false,
             },
-        };
+        } satisfies ChartData;
     }, [data]);
 
     const handleOrientationChange = React.useCallback(() => {

test-utils/utils.tsx

@@ -4,6 +4,8 @@ import {MobileProvider, ThemeProvider} from '@gravity-ui/uikit';
 import {render, renderHook} from 'vitest-browser-react';
 import type {ComponentRenderOptions} from 'vitest-browser-react';
 
+const DEFAULT_PROVIDERS: ProvidersProps = {theme: 'light'};
+
 interface ProvidersProps {
     theme?: string;
     mobile?: boolean;
@@ -43,7 +45,8 @@ function customRender(
         providers?: {theme?: string; mobile?: boolean};
     } = {},
 ) {
-    const wrapper = createWrapper(providers, options.wrapper);
+    const mergedProviders = {...DEFAULT_PROVIDERS, ...providers};
+    const wrapper = createWrapper(mergedProviders, options.wrapper);
     return render(ui, {...options, wrapper});
 }
 

vitest.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
             instances: [
                 {
                     browser: 'chromium',
-                    viewport: {width: 1280, height: 720},
+                    viewport: {height: 280, width: 400},
                 },
             ],
             locators: {testIdAttribute: 'data-qa'},