@gravity-ui/chartkit 7.43.1 → 7.44.1

package/README.md

@@ -1,73 +1,198 @@
-# @gravity-ui/chartkit · [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE) [![npm package](https://img.shields.io/npm/v/@gravity-ui/chartkit)](https://www.npmjs.com/package/@gravity-ui/chartkit) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/chartkit/)
+# Gravity UI ChartKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/chartkit)](https://www.npmjs.com/package/@gravity-ui/chartkit) [![License](https://img.shields.io/github/license/gravity-ui/ChartKit)](LICENSE) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/ChartKit/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/ChartKit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/chartkit/)
 
-React component used to render charts based on any sources you need
+Plugin-based React component that provides a unified rendering interface for multiple charting libraries. You register one or more plugins and render charts via `<ChartKit type="..." data={...} />` — ChartKit dispatches to the correct renderer automatically.
 
-## Install
+Each plugin renderer is lazy-loaded, so the underlying library code is only downloaded when ChartKit is actually rendered in the UI. ChartKit also handles mobile-friendly tooltip display out of the box. You can use the built-in plugins or implement your own.
+
+**When to use:**
+
+- You need modern declarative charts (`gravity-charts`) or time-series / monitoring charts (`yagr`)
+- You need multiple chart types under a single consistent API
+- You're building in the Gravity UI ecosystem
+
+**When not to use:**
+
+- You only need one specific chart library — prefer using [@gravity-ui/charts](https://github.com/gravity-ui/charts) directly
+
+## Table of contents
+
+- [Get started](#get-started)
+- [Development](#development)
+
+## Get started
+
+### Requirements
+
+- React 16, 17, or 18
+- `[@gravity-ui/uikit](https://github.com/gravity-ui/uikit)` — required peer dependency (provides theming and UI primitives)
+
+### Install
 
 ```shell
-npm i --save-dev @gravity-ui/chartkit @gravity-ui/uikit
+npm install @gravity-ui/chartkit @gravity-ui/uikit
 ```
 
-Make sure you have `@gravity-ui/uikit` styles enabled in your project.
+### Styles
 
-```typescript
-import '@gravity-ui/uikit/styles/styles.scss';
+Import the styles from `@gravity-ui/uikit` in your entry point:
+
+```tsx
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
+```
+
+For full setup details see the [uikit styles guide](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles).
+
+### Basic usage
+
+ChartKit uses a global plugin registry. Call `settings.set` once at your app entry point to register the plugins you need. When `<ChartKit type="..." />` renders, it looks up the matching plugin — if none is found, an error is thrown. Each plugin's renderer is a `React.lazy` component, so its code is fetched only when ChartKit first appears in the UI.
+
+You can register multiple plugins at once:
+
+```ts
+settings.set({plugins: [GravityChartsPlugin, YagrPlugin]});
 ```
 
-## Usage
+Or call `settings.set` multiple times — it merges the plugin list rather than replacing it.
+
+**Basic example:**
 
-```typescript
+```tsx
 import {ThemeProvider} from '@gravity-ui/uikit';
 import ChartKit, {settings} from '@gravity-ui/chartkit';
-import {YagrPlugin} from '@gravity-ui/chartkit/yagr';
-import type {YagrWidgetData} from '@gravity-ui/chartkit/yagr';
+import {GravityChartsPlugin} from '@gravity-ui/chartkit/gravity-charts';
 
-import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
 
-settings.set({plugins: [YagrPlugin]});
+settings.set({plugins: [GravityChartsPlugin]});
 
-const data: YagrWidgetData = {
-  data: {
-    timeline: [
-      1636838612441, 1636925012441, 1637011412441, 1637097812441, 1637184212441, 1637270612441,
-      1637357012441, 1637443412441, 1637529812441, 1637616212441,
-    ],
-    graphs: [
-      {
-        id: '0',
-        name: 'Serie 1',
-        color: '#6c59c2',
-        data: [25, 52, 89, 72, 39, 49, 82, 59, 36, 5],
-      },
+const data = {
+  series: {
+    data: [
       {
-        id: '1',
-        name: 'Serie 2',
-        color: '#6e8188',
-        data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
-      },
-    ],
-  },
-  libraryConfig: {
-    chart: {
-      series: {
         type: 'line',
+        name: 'Series',
+        data: [
+          {x: 0, y: 10},
+          {x: 1, y: 25},
+          {x: 2, y: 18},
+          {x: 3, y: 30},
+        ],
       },
-    },
-    title: {
-      text: 'line: random 10 pts',
-    },
+    ],
   },
 };
 
-function App() {
+export default function App() {
   return (
-    <ThemeProvider>
-      <div className="app" style={{height: 500}}>
-        <ChartKit type="yagr" data={data} />
+    <ThemeProvider theme="light">
+      <div style={{height: 300}}>
+        <ChartKit type="gravity-charts" data={data} />
       </div>
     </ThemeProvider>
   );
 }
+```
+
+`ChartKit` adapts to its parent's size — make sure the container has an explicit height.
+
+## Development
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) 22 (see [.nvmrc](https://github.com/gravity-ui/ChartKit/blob/main/.nvmrc))
+- [npm](https://www.npmjs.com/) 10 or later
 
-export default App;
+### Setup
+
+Clone the repository and install dependencies:
+
+```shell
+git clone https://github.com/gravity-ui/ChartKit.git
+cd ChartKit
+npm ci
+```
+
+### Running Storybook
+
+```shell
+npm run start
 ```
+
+Storybook will be available at `http://localhost:7007`.
+
+### Developing with a local dependency
+
+To work on a dependency (e.g. `@gravity-ui/charts`) and see your changes live in Storybook without publishing to npm:
+
+**1. Link the local package**
+
+```shell
+# In your local clone of @gravity-ui/charts:
+git clone https://github.com/gravity-ui/charts.git
+cd charts
+npm ci
+# make your changes
+npm run build
+npm link
+
+# In ChartKit:
+npm link @gravity-ui/charts
+```
+
+**2. Configure local package watching**
+
+Create a `.env.local` file in the ChartKit root (it is gitignored):
+
+```shell
+LOCAL_PKG=@gravity-ui/charts
+```
+
+This tells Vite to watch that package in `node_modules` and skip pre-bundling it. After rebuilding `@gravity-ui/charts`, Storybook will hot-reload automatically.
+
+For multiple packages, use a comma-separated list:
+
+```shell
+LOCAL_PKG=@gravity-ui/charts,@gravity-ui/uikit
+```
+
+**3. Start Storybook**
+
+```shell
+npm run start
+```
+
+**4. Restore the original package**
+
+When you're done:
+
+1. Comment out `LOCAL_PKG` in `.env.local`
+2. Run `npm install` in ChartKit — it replaces the symlink with the registry version
+
+```shell
+# In ChartKit:
+npm ci
+```
+
+### Running tests
+
+```shell
+npm test
+```
+
+Visual regression tests run in Docker to ensure consistent screenshots across environments:
+
+```shell
+npm run test:docker
+```
+
+To update the reference screenshots after intentional UI changes:
+
+```shell
+npm run test:docker:update
+```
+
+### Contributing
+
+Please refer to the [contributing guide](CONTRIBUTING.md) before submitting a pull request.

package/build/components/SplitPane/StyledSplitPane.css

@@ -1,5 +1,5 @@
 .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;
@@ -41,10 +41,12 @@
   height: 100%;
   width: 1px;
   min-width: 1px;
-  background: var(--data-table-border-color);
 }
 
 .styled-split-pane .Pane {
   height: 100%;
-  background: var(--ck-split-pane-background);
+}
+
+.styled-split-pane .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));
 }

package/build/plugins/gravity-charts/renderer/withSplitPane/withSplitPane.js

@@ -11,7 +11,7 @@ import { TooltipContent } from './TooltipContent';
 import { RESIZER_HEIGHT, getVerticalSize, useWithSplitPaneState } from './useWithSplitPaneState';
 const tooltipPaneStyles = { overflow: 'auto' };
 const SplitPaneContent = (props) => {
-    var _a, _b;
+    var _a;
     const { data, height, ChartComponent } = props, restProps = __rest(props, ["data", "height", "ChartComponent"]);
     const tooltipContainerRef = React.useRef(null);
     const chartRef = React.useRef(null);
@@ -31,7 +31,10 @@ const SplitPaneContent = (props) => {
         const containerHeight = height;
         if (containerHeight - RESIZER_HEIGHT === size) {
             setSize(containerHeight - RESIZER_HEIGHT - tooltipHeight);
-            (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
+            queueMicrotask(() => {
+                var _a;
+                (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow({ immediate: true });
+            });
         }
     }
     const handleTooltipContentResize = React.useCallback(() => {
@@ -52,7 +55,7 @@ const SplitPaneContent = (props) => {
             yAxes: data.yAxis,
             xAxis: data.xAxis,
         }));
-    }, [(_b = data.tooltip) === null || _b === void 0 ? void 0 : _b.headerFormat, data.series.data, data.yAxis, data.xAxis]);
+    }, [(_a = data.tooltip) === null || _a === void 0 ? void 0 : _a.headerFormat, data.series.data, data.yAxis, data.xAxis]);
     const resultData = React.useMemo(() => {
         var _a, _b, _c;
         const userPointerMoveHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.pointermove;
@@ -64,7 +67,9 @@ const SplitPaneContent = (props) => {
             }
             userPointerMoveHandler === null || userPointerMoveHandler === void 0 ? void 0 : userPointerMoveHandler(pointerMoveData, event);
         };
-        return Object.assign(Object.assign({}, data), { chart: Object.assign(Object.assign({}, data.chart), { events: Object.assign(Object.assign({}, (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events), { pointermove: pointerMoveHandler }) }), tooltip: Object.assign(Object.assign({}, data.tooltip), { enabled: false }) });
+        return Object.assign(Object.assign({ defaultState: {
+                hoveredPosition: { x: 0, y: 0 },
+            } }, data), { chart: Object.assign(Object.assign({}, data.chart), { events: Object.assign(Object.assign({}, (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events), { pointermove: pointerMoveHandler }) }), tooltip: Object.assign(Object.assign({}, data.tooltip), { enabled: false }) });
     }, [data]);
     const handleOrientationChange = React.useCallback(() => {
         const deviceWidth = window.innerWidth;

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

@@ -1074,7 +1074,7 @@ function drillOnClick(event, { options, chartType }) {
             const point = event.point;
             const series = point.series;
             if (isColorDrillDown) {
-                return series.name;
+                return series.drillDownFilterValue || series.name;
             }
             let drillDownFilter = point.options.drillDownFilterValue || point.category || point.name;
             const isDateTime = chartType !== 'pie' &&

package/build/plugins/highcharts/renderer/helpers/config/utils/index.d.ts

@@ -49,13 +49,13 @@ export declare const getSortedData: <T extends Record<string, any>>(data: T[], s
     [Symbol.iterator]?: boolean | undefined;
     readonly [Symbol.unscopables]?: boolean | undefined;
     at?: boolean | undefined;
-} | ((start?: number, end?: number) => T[]) | (() => string) | {
+} | (() => string) | {
     (): string;
     (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
 } | (() => T | undefined) | ((...items: T[]) => number) | {
     (...items: ConcatArray<T>[]): T[];
     (...items: (T | ConcatArray<T>)[]): T[];
-} | ((separator?: string) => string) | (() => T[]) | (() => T | undefined) | ((compareFn?: ((a: T, b: T) => number) | undefined) => T[]) | {
+} | ((separator?: string) => string) | (() => T[]) | (() => T | undefined) | ((start?: number, end?: number) => T[]) | ((compareFn?: ((a: T, b: T) => number) | undefined) => T[]) | {
     (start: number, deleteCount?: number): T[];
     (start: number, deleteCount: number, ...items: T[]): T[];
 } | ((...items: T[]) => number) | ((searchElement: T, fromIndex?: number) => number) | ((searchElement: T, fromIndex?: number) => number) | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "7.43.1",
+  "version": "7.44.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -47,7 +47,7 @@
   ],
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/charts": "^1.41.1",
+    "@gravity-ui/charts": "^1.42.2",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/yagr": "^4.11.0",