@gravity-ui/chartkit 3.0.0-beta.1 → 3.0.0-beta.11

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
+import { useForkRef } from '@gravity-ui/uikit';
 import YagrComponent from '@gravity-ui/yagr/dist/react';
 import { i18n } from '../../../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
@@ -9,8 +10,9 @@ import './polyfills';
 import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.css';
 const YagrWidget = React.forwardRef((props, forwardedRef) => {
-    const { id, data: { data }, onLoad, onRender, onChartLoad, } = props;
+    const { id, data: { data }, pluginRef, onLoad, onRender, onChartLoad, } = props;
     const yagrRef = React.useRef(null);
+    const handleRef = useForkRef(pluginRef, yagrRef);
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
             code: CHARTKIT_ERROR_CODE.NO_DATA,
@@ -21,18 +23,14 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
     const handleChartLoading = React.useCallback((chart, { renderTime }) => {
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(Object.assign(Object.assign({}, data), { widget: chart, widgetRendering: renderTime }));
         onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
-    }, [onLoad, data]);
+    }, [onLoad, onRender, data]);
     const onWindowResize = React.useCallback(() => {
         if (yagrRef.current) {
             const chart = yagrRef.current.yagr();
             if (!chart) {
                 return;
             }
-            const root = chart.root;
-            const height = root.offsetHeight;
-            const width = root.offsetWidth;
-            chart.uplot.setSize({ width, height });
-            chart.uplot.redraw();
+            chart.reflow();
         }
     }, []);
     React.useImperativeHandle(forwardedRef, () => ({
@@ -41,25 +39,28 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         },
     }), [onWindowResize]);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr();
         if (!yagr) {
             return;
         }
+        if ((_c = (_b = yagr.config) === null || _b === void 0 ? void 0 : _b.tooltip) === null || _c === void 0 ? void 0 : _c.virtual) {
+            return;
+        }
         const handlers = {
             mouseMove: null,
             mouseDown: null,
         };
-        (_b = yagr.plugins.tooltip) === null || _b === void 0 ? void 0 : _b.on('render', (tooltip) => {
+        (_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.on('render', (tooltip) => {
             synchronizeTooltipTablesCellsWidth(tooltip);
         });
-        (_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('pin', (tooltip, { actions }) => {
+        (_e = yagr.plugins.tooltip) === null || _e === void 0 ? void 0 : _e.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', () => {
+        (_f = yagr.plugins.tooltip) === null || _f === void 0 ? void 0 : _f.on('unpin', () => {
             if (handlers.mouseMove) {
                 document.removeEventListener('mousemove', handlers.mouseMove);
                 handlers.mouseMove = null;
@@ -74,6 +75,6 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         var _a;
         onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr() });
     }, [yagrRef, onChartLoad]);
-    return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
+    return (React.createElement(YagrComponent, { ref: handleRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
 });
 export default YagrWidget;

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

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import { dateTime } from '@gravity-ui/date-utils';
 import { formatTooltip } from './tooltip';
 const calcOption = (d) => {
     return typeof d === 'object' && d !== null
@@ -39,7 +39,7 @@ export const renderTooltip = (data) => {
         : undefined;
     const tooltipFormatOptions = {
         activeRowAlwaysFirstInTooltip: rows.length > 1,
-        tooltipHeader: moment(x / timeMultiplier).format('DD MMMM YYYY HH:mm:ss'),
+        tooltipHeader: dateTime({ input: 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),

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,7 +150,7 @@
 ._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 {
@@ -169,11 +169,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 +281,9 @@
 
 ._tooltip-rows__summ-td {
   padding: 6px 0 6px 3px;
-  color: var(--yc-color-text-complementary);
+  color: var(--g-color-text-complementary);
   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 +308,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 +348,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/tooltip/types.d.ts

@@ -1,4 +1,4 @@
-export declare type TooltipData = {
+export type TooltipData = {
     /** Tooltip lines data */
     lines: Array<TooltipLine>;
     /** Tooltip comments */
@@ -35,10 +35,10 @@ export declare type TooltipData = {
     /** Sum of the values of the hidden ("not fit" in the tooltip) rows */
     hiddenRowsSum?: number | string;
 };
-export declare type TooltipExtraData = {
+export type TooltipExtraData = {
     lastVisibleRowIndex: number;
 };
-export declare type TooltipLine = {
+export type TooltipLine = {
     /** Color displayed in a separate cell */
     seriesColor: string;
     /** Series name */
@@ -64,7 +64,7 @@ export declare type TooltipLine = {
     replaceCellAt?: Record<number, (line: TooltipLine) => string>;
     insertCellAt?: Record<number, (line: TooltipLine) => string>;
 };
-export declare type RowRenderingConfig = {
+export type RowRenderingConfig = {
     cellsRenderers: Array<(line: TooltipLine) => string>;
     isSelectedLine?: boolean;
     allowComment?: boolean;

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

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

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

@@ -1,5 +1,5 @@
-import moment from 'moment';
 import merge from 'lodash/merge';
+import { dateTime } from '@gravity-ui/date-utils';
 import { defaults } from '@gravity-ui/yagr';
 import { settings } from '../../../libs';
 import { renderTooltip } from './tooltip';
@@ -75,8 +75,8 @@ export const detectClickOutside = (args) => (event) => {
 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) {
+        const d = dateTime({ input: rawValue / msm });
+        if (d.hour() === 0 && d.minute() === 0 && d.second() === 0) {
             return d.format('DD.MM.YY');
         }
         return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');

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

@@ -1,7 +1,8 @@
 import type { RawSerieData, YagrConfig } from '@gravity-ui/yagr';
 export type { default as Yagr } from '@gravity-ui/yagr';
+export type { YagrReactRef } from '@gravity-ui/yagr/dist/react';
 export * from '@gravity-ui/yagr/dist/types';
-export declare type YagrWidgetData = {
+export type YagrWidgetData = {
     data: {
         graphs: RawSerieData[];
         timeline: number[];

package/build/types/index.d.ts

@@ -2,56 +2,56 @@ import React from 'react';
 import type { ChartKitWidget } from './widget';
 import { ChartKitError } from '../libs';
 export type { ChartKitHolidays } from './misc';
-export declare type ChartKitLang = 'ru' | 'en';
-export declare type ChartKitType = keyof ChartKitWidget;
-export declare type ChartKitRef = {
+export type ChartKitLang = 'ru' | 'en';
+export type ChartKitType = keyof ChartKitWidget;
+export type ChartKitRef = {
     reflow: (details?: unknown) => void;
 };
-export declare type ChartKitWidgetRef = {
+export type ChartKitWidgetRef = {
     reflow?: ChartKitRef['reflow'];
 };
-export declare type ChartKitOnLoadData<T extends ChartKitType> = {
+export type ChartKitOnLoadData<T extends ChartKitType> = {
     widget?: ChartKitWidget[T]['widget'];
     widgetRendering?: number;
 };
-export declare type ChartKitOnRenderData = {
+export type ChartKitOnRenderData = {
     renderTime?: number;
 };
-export declare type ChartKitOnChartLoad<T extends ChartKitType> = {
+export type ChartKitOnChartLoad<T extends ChartKitType> = {
     widget?: ChartKitWidget[T]['widget'] | null;
 };
-export declare type ChartKitOnError = (data: {
+export type ChartKitOnError = (data: {
     error: any;
 }) => void;
-export declare type ChartKitProps<T extends ChartKitType> = {
+export type ChartKitProps<T extends ChartKitType> = {
     type: T;
     data: ChartKitWidget[T]['data'];
+    /** Plugin component's react ref */
+    pluginRef?: ChartKitWidget[T]['pluginRef'];
     id?: string;
     isMobile?: boolean;
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
-    /**
-     * called on each render
-     * @param data
-     */
+    /** Fires on each chartkit plugin's component render */
     onRender?: (data: ChartKitOnRenderData) => void;
-    /**
-     * called on chart mount
-     * @param data
-     */
+    /** Fires on chartkit plugin's component mount */
     onChartLoad?: (data: ChartKitOnChartLoad<T>) => void;
-    renderError?: RenderError;
+    /** Fires in case of unhandled plugin's exception */
     onError?: ChartKitOnError;
+    /** Used to render user's error component */
+    renderError?: RenderError;
+    /** Used to render user's plugin loader component */
+    renderPluginLoader?: () => React.ReactNode;
 } & {
-    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];
+    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget' | 'pluginRef'>]: ChartKitWidget[T][key];
 };
-export declare type ChartKitPlugin = {
+export type ChartKitPlugin = {
     type: ChartKitType;
     renderer: React.LazyExoticComponent<any>;
 };
-export declare type RenderErrorOpts = {
+export type RenderErrorOpts = {
     message: string;
     error: ChartKitError | Error;
     resetError: () => void;
 };
-export declare type RenderError = (opts: RenderErrorOpts) => React.ReactNode;
+export type RenderError = (opts: RenderErrorOpts) => React.ReactNode;
 export type { ChartKitWidget };

package/build/types/misc.d.ts

@@ -1,4 +1,4 @@
-export declare type ChartKitHolidays = {
+export type ChartKitHolidays = {
     holiday: Record<string, Record<string, string>>;
     weekend: Record<string, Record<string, string>>;
 };

package/build/types/widget.d.ts

@@ -1,19 +1,23 @@
-import type { Yagr, YagrWidgetData } from '../plugins/yagr/types';
+/// <reference types="react" />
+import type { Yagr, YagrReactRef, YagrWidgetData } from '../plugins/yagr/types';
 import type { IndicatorWidgetData } from '../plugins/indicator/types';
 import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
 export interface ChartKitWidget {
     yagr: {
         data: YagrWidgetData;
         widget: Yagr;
+        pluginRef: React.MutableRefObject<YagrReactRef | null>;
     };
     indicator: {
         data: IndicatorWidgetData;
         widget: never;
+        pluginRef: never;
         formatNumber?: <T = any>(value: number, options?: T) => string;
     };
     highcharts: {
         data: HighchartsWidgetData;
         widget: Highcharts.Chart | null;
+        pluginRef: never;
         hoistConfigError?: boolean;
         nonBodyScroll?: boolean;
         splitTooltip?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -13,7 +13,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@gravity-ui/yagr": "^3.3.0",
+    "@gravity-ui/date-utils": "^1.4.1",
+    "@gravity-ui/yagr": "^3.4.0",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
     "highcharts-react-official": "^3.0.0",
@@ -21,16 +22,21 @@
     "react-split-pane": "^0.1.92"
   },
   "devDependencies": {
+    "@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/i18n": "^1.0.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^4.2.0",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-knobs": "^6.4.0",
+    "@gravity-ui/uikit": "^5.0.0-beta.1",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/cli": "^7.0.26",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.9",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-webpack5": "^7.0.26",
     "@types/jest": "^28.1.3",
     "@types/lodash": "^4.14.177",
     "@types/node": "^18.0.0",
@@ -49,7 +55,6 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.2",
     "lint-staged": "^10.2.7",
-    "moment": "^2.29.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.0",
     "react": "^17.0.2",
@@ -58,22 +63,22 @@
     "rimraf": "^3.0.2",
     "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",
     "ts-node": "^10.2.1",
-    "typescript": "^4.2.3"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^4.0.0",
-    "moment": "^2.19.3",
+    "@gravity-ui/uikit": "^5.0.0-beta.1",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watchAll",
     "clean": "gulp clean",
-    "start": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook -p 7007",
+    "start": "storybook dev -p 7007",
     "build": "gulp",
     "lint:js": "eslint --quiet --ext .js,.jsx,.ts,.tsx .",
     "lint:styles": "stylelint '{styles,src}/**/*.scss' --quiet",