@gravity-ui/chartkit 4.20.1 → 5.0.0

package/build/plugins/shared/format-number/format-number.d.ts

@@ -1,4 +1,4 @@
-import type { FormatOptions, FormatNumberOptions } from './types';
+import type { FormatNumberOptions, FormatOptions } from './types';
 export declare const formatBytes: (value: number, options?: FormatOptions) => string;
 export declare const formatDuration: (value: number, options?: FormatOptions) => string;
 export declare const getNumberUnitRate: (value: number) => number;

package/build/plugins/shared/format-number/format-number.js

@@ -1,6 +1,6 @@
-import ru from './i18n/ru.json';
-import en from './i18n/en.json';
 import { i18nInstance, makeInstance } from './i18n/i18n';
+import en from './i18n/en.json';
+import ru from './i18n/ru.json';
 const i18n = makeInstance('chartkit-units', { ru, en });
 function getUnitRate(value, exponent, unitsI18nKeys) {
     let resultUnitRate = 1;

package/build/plugins/shared/format-number/format-number.test.js

@@ -1,5 +1,5 @@
-import { i18nInstance } from './i18n/i18n';
 import { formatNumber } from './format-number';
+import { i18nInstance } from './i18n/i18n';
 i18nInstance.setLang('en');
 describe('plugins/shared', () => {
     test.each([

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

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

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

@@ -1,14 +1,16 @@
 import React from 'react';
-import isEmpty from 'lodash/isEmpty';
 import YagrComponent from '@gravity-ui/yagr/react';
+import isEmpty from 'lodash/isEmpty';
 import { i18n } from '../../../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
+import './polyfills';
 import { useWidgetData } from './useWidgetData';
 import { checkFocus, detectClickOutside, synchronizeTooltipTablesCellsWidth } from './utils';
-import './polyfills';
 import '@gravity-ui/yagr/dist/index.css';
+// We need to save order in such state
+// eslint-disable-next-line import/order
 import './YagrWidget.css';
-const YagrWidget = React.forwardRef((props, forwardedRef) => {
+const YagrWidget = React.forwardRef(function YagrWidget(props, forwardedRef) {
     const { id, data: { data }, onLoad, onRender, onChartLoad, tooltip, } = props;
     const yagrRef = React.useRef(null);
     const [yagr, setYagr] = React.useState();

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

@@ -4,26 +4,26 @@
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
-  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
-  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
-  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
-  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
 }
 
 ._tooltip {
   border-radius: 5px;
-  background: var(--yc-color-infographics-tooltip-bg);
-  background-color: var(--yc-color-infographics-tooltip-bg);
-  color: var(--yc-color-text-primary);
+  background: var(--g-color-infographics-tooltip-bg);
+  background-color: var(--g-color-infographics-tooltip-bg);
+  color: var(--g-color-text-primary);
   font-size: 12px;
   overflow: hidden;
   box-sizing: border-box;
@@ -150,13 +150,12 @@
 ._tooltip-rows__table thead._tooltip-header tr:not(._tooltip-fake-row):first-child td {
   padding-top: 6px;
   padding-bottom: 6px;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 
 ._tooltip-rows__table tbody {
   display: block;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
 }
 
 ._tooltip-rows__table tbody._tooltip-footer {
@@ -169,11 +168,11 @@
 }
 
 ._tooltip-rows__table tbody._tooltip-list ._tooltip-row-dark-bg {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 
 ._tooltip-rows__table tbody ._hidden-rows-sum._hidden-rows-sum-dark-bg {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 
 ._tooltip-rows__table tbody ._hidden-rows-sum td {
@@ -281,9 +280,9 @@
 
 ._tooltip-rows__summ-td {
   padding: 6px 0 6px 3px;
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-secondary);
   font-size: 12px;
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 
 ._tooltip-rows__summ-td-value {
@@ -308,7 +307,7 @@
 ._tooltip-right__td {
   vertical-align: top;
   opacity: 0.9;
-  border-left: 1px solid var(--yc-color-line-generic);
+  border-left: 1px solid var(--g-color-line-generic);
   white-space: normal;
   font-size: 8pt;
   position: relative;
@@ -348,7 +347,7 @@
 }
 
 ._tooltip-right__traf-div_for-split-tooltip {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   padding-left: 8px;
   border-top: none;
   border-left: 2px solid;

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

@@ -1,4 +1,4 @@
-import type { Yagr, YagrWidgetData, YagrTheme, YagrChartOptions, MinimalValidConfig } from '../types';
+import type { MinimalValidConfig, Yagr, YagrChartOptions, YagrTheme, YagrWidgetData } from '../types';
 type ShapeYagrConfigArgs = {
     data: YagrWidgetData['data'];
     libraryConfig: YagrWidgetData['libraryConfig'];

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

@@ -1,6 +1,6 @@
-import merge from 'lodash/merge';
 import { dateTime } from '@gravity-ui/date-utils';
 import { defaults } from '@gravity-ui/yagr';
+import merge from 'lodash/merge';
 import { settings } from '../../../libs';
 import { getRenderTooltip } from './tooltip';
 const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';

package/build/types/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { ChartKitWidget } from './widget';
 import { ChartKitError } from '../libs';
+import type { ChartKitWidget } from './widget';
 export type { ChartKitHolidays } from './misc';
 export * from './widget-data';
 export type ChartKitLang = 'ru' | 'en';

package/build/types/widget-data/bar-x.d.ts

@@ -1,7 +1,7 @@
 import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartKitWidgetSeriesOptions } from './series';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { ChartKitWidgetSeriesOptions } from './series';
 export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:

package/build/types/widget-data/bar-y.d.ts

@@ -1,7 +1,7 @@
 import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartKitWidgetSeriesOptions } from './series';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { ChartKitWidgetSeriesOptions } from './series';
 export type BarYSeriesData<T = any> = BaseSeriesData<T> & {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:

package/build/types/widget-data/line.d.ts

@@ -1,7 +1,7 @@
+import { DashStyle, LineCap, SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
-import { DashStyle, LineCap, SeriesType } from '../../constants';
 export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /**
      * The `x` value of the point. Depending on the context , it may represents:

package/build/types/widget-data/series.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { PieSeries, PieSeriesData } from './pie';
-import type { ScatterSeries, ScatterSeriesData } from './scatter';
+import { DashStyle, LineCap } from '../../constants';
+import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
-import type { LineSeries, LineSeriesData } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
+import type { Halo } from './halo';
+import type { LineSeries, LineSeriesData } from './line';
 import type { PointMarkerOptions } from './marker';
-import type { AreaSeries, AreaSeriesData } from './area';
+import type { PieSeries, PieSeriesData } from './pie';
+import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
-import type { Halo } from './halo';
-import { DashStyle, LineCap } from '../../constants';
 export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T>;
 export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T>;
 export type DataLabelRendererData<T = any> = {

package/build/types/widget-data/tooltip.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
+import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
+import type { BarYSeries, BarYSeriesData } from './bar-y';
+import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
-import type { LineSeries, LineSeriesData } from './line';
-import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { AreaSeries, AreaSeriesData } from './area';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;

package/build/types/widget.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { CustomTooltipProps, Yagr, YagrWidgetData } from '../plugins/yagr/types';
-import type { IndicatorWidgetData } from '../plugins/indicator/types';
 import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
+import type { IndicatorWidgetData } from '../plugins/indicator/types';
+import type { CustomTooltipProps, Yagr, YagrWidgetData } from '../plugins/yagr/types';
 import type { ChartKitWidgetData } from './widget-data';
 export interface ChartKitWidget {
     yagr: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.20.1",
+  "version": "5.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",
@@ -47,7 +47,7 @@
   ],
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/date-utils": "^1.4.2",
+    "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/yagr": "^4.2.3",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
@@ -58,13 +58,15 @@
     "@babel/preset-env": "^7.22.6",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gravity-ui/eslint-config": "^1.0.2",
+    "@gravity-ui/eslint-config": "^3.1.1",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/prettier-config": "^1.0.1",
-    "@gravity-ui/stylelint-config": "^1.0.1",
+    "@gravity-ui/prettier-config": "^1.1.0",
+    "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.6.0",
+    "@gravity-ui/uikit": "^6.0.0",
+    "@jest/types": "^29.6.3",
     "@playwright/experimental-ct-react17": "^1.41.1",
+    "@storybook/addon-actions": "^7.6.14",
     "@storybook/addon-essentials": "^7.0.26",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/cli": "^7.0.26",
@@ -80,7 +82,7 @@
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
-    "eslint": "^8.11.0",
+    "eslint": "^8.56.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-dart-sass": "^1.0.2",
@@ -88,26 +90,26 @@
     "gulp-typescript": "^5.0.1",
     "highcharts": "^8.2.2",
     "husky": "^4.2.5",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^10.2.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.0",
+    "prettier": "^3.2.5",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.5",
     "sass": "^1.56.2",
     "sass-loader": "^10.2.1",
     "storybook": "^7.0.26",
     "style-loader": "^2.0.0",
-    "stylelint": "^14.6.0",
-    "ts-jest": "^28.0.5",
+    "stylelint": "^15.11.0",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.2.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^5.0.0",
+    "@gravity-ui/uikit": "^6.0.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
@@ -116,17 +118,14 @@
     "clean": "gulp clean",
     "start": "storybook dev -p 7007",
     "build": "gulp",
-    "lint:js": "eslint --quiet --ext .js,.jsx,.ts,.tsx .",
-    "lint:styles": "stylelint '{styles,src}/**/*.scss' --quiet",
-    "lint:prettier": "prettier --check --loglevel=error '**/*.{js,jsx,ts,tsx,scss}'",
+    "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint:styles": "cross-env stylelint '{styles,src}/**/*.scss'",
+    "lint:styles:fix": "cross-env npm run lint:styles -- --fix",
+    "lint:prettier": "cross-env prettier --check '**/*.md'",
+    "lint:prettier:fix": "cross-env prettier --write '**/*.md'",
     "lint": "run-p lint:*",
     "typecheck": "tsc --noEmit",
-    "docs:deps": "cd ./documentation && npm ci",
-    "docs:start": "cd ./documentation && npm run start",
-    "docs:start:ru": "cd ./documentation && npm run start:ru",
-    "docs:build": "cd ./documentation && npm run build",
-    "docs:serve": "cd ./documentation && npm run serve",
-    "docs:deploy": "cd ./documentation && npm run deploy",
     "prepublishOnly": "npm run build",
     "test:playwright": "playwright test -c tests/playwright.config.ts"
   },