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

package/CHANGELOG.md

@@ -1,19 +1,5 @@
 # Changelog
 
-## [2.13.0](https://github.com/gravity-ui/chartkit/compare/v2.12.0...v2.13.0) (2023-06-30)
-
-
-### Features
-
-* **Yagr plugin:** update to v 2.2.6 ([#186](https://github.com/gravity-ui/chartkit/issues/186)) ([bddd692](https://github.com/gravity-ui/chartkit/commit/bddd6920742b398b35ce4ef6d8b78d87d50148db))
-
-## [2.12.0](https://github.com/gravity-ui/chartkit/compare/v2.11.0...v2.12.0) (2023-06-30)
-
-
-### Features
-
-* add renderPluginLoader property ([#184](https://github.com/gravity-ui/chartkit/issues/184)) ([3955d2f](https://github.com/gravity-ui/chartkit/commit/3955d2f1995fb204c16cda53e96b4eca50c2ef0e))
-
 ## [2.11.0](https://github.com/gravity-ui/chartkit/compare/v2.10.1...v2.11.0) (2023-06-20)
 
 

package/build/components/ChartKit.d.ts

@@ -13,9 +13,8 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     onLoad?: ((data?: import("../types").ChartKitOnLoadData<T> | undefined) => void) | undefined;
     onRender?: ((data: import("../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../types").ChartKitOnChartLoad<T>) => void) | undefined;
-    onError?: import("../types").ChartKitOnError | undefined;
     renderError?: import("../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    onError?: import("../types").ChartKitOnError | undefined;
 } & { [key in keyof Omit<import("../types").ChartKitWidget[T], "widget" | "data">]: import("../types").ChartKitWidget[T][key]; } & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;
 }) => ReturnType<typeof ChartKitComponent>;

package/build/components/ChartKit.js

@@ -10,7 +10,7 @@ import './ChartKit.css';
 const b = block('chartkit');
 const ChartKitComponent = (props) => {
     const widgetRef = React.useRef();
-    const { instanceRef, id: propsId, type, isMobile, renderPluginLoader } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile", "renderPluginLoader"]);
+    const { instanceRef, id: propsId, type, isMobile } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile"]);
     const ckId = React.useMemo(() => getRandomCKId(), []);
     const id = propsId || ckId;
     const lang = settings.get('lang');
@@ -31,7 +31,7 @@ const ChartKitComponent = (props) => {
             }
         },
     }), []);
-    return (React.createElement(React.Suspense, { fallback: (renderPluginLoader === null || renderPluginLoader === void 0 ? void 0 : renderPluginLoader()) || React.createElement(Loader, null) },
+    return (React.createElement(React.Suspense, { fallback: React.createElement(Loader, null) },
         React.createElement("div", { className: b({ mobile: isMobile }, 'chartkit-theme_common') },
             React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang }, restProps)))));
 };

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -8,9 +8,8 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"highcharts"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"highcharts">) => void) | undefined;
-    onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     hoistConfigError?: boolean | undefined;
     nonBodyScroll?: boolean | undefined;

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -43,6 +43,9 @@ function getPointsForInitialRefresh(chart) {
 }
 function forceHoverState(chart, activePoints) {
     const chartType = get(chart, 'userOptions.chart.type');
+    if (!chartType) {
+        return;
+    }
     if (chartType === 'pie') {
         chart.tooltip.refresh(activePoints);
         chart.pointsForInitialRefresh = activePoints;
@@ -205,6 +208,6 @@ export const withSplitPane = (ComposedComponent) => {
         }
     }
     return React.forwardRef((props, ref) => {
-        return React.createElement(WithSplitPane, Object.assign({ forwardedRef: ref }, props));
+        return React.createElement(WithSplitPane, Object.assign({}, props, { forwardedRef: ref }));
     });
 };

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -9,9 +9,8 @@ declare const IndicatorWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"indicator"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"indicator">) => void) | undefined;
-    onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;

package/build/plugins/yagr/__stories__/Yagr.stories.d.ts

@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react';
+import '@gravity-ui/yagr/dist/index.css';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Line: Story<any>;
+export declare const Updates: Story<any>;

package/build/plugins/yagr/__stories__/Yagr.stories.js

@@ -3,12 +3,13 @@ import { Button } from '@gravity-ui/uikit';
 import { settings } from '../../../libs';
 import { YagrPlugin } from '../../../plugins';
 import { ChartKit } from '../../../components/ChartKit';
-import { line10 } from './mocks/line10';
+import { getNewConfig, line10 } from './mocks/line10';
+import '@gravity-ui/yagr/dist/index.css';
 export default {
     title: 'Plugins/Yagr',
     component: ChartKit,
 };
-const Template = () => {
+const LineTemplate = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef();
     if (!shown) {
@@ -18,4 +19,23 @@ const Template = () => {
     return (React.createElement("div", { style: { height: 300, width: '100%' } },
         React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10 })));
 };
-export const Line = Template.bind({});
+const UpdatesTemplate = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const [state, setState] = React.useState(line10);
+    const onStartUpdates = React.useCallback(() => {
+        setInterval(() => {
+            setState(getNewConfig());
+        }, 1000);
+    }, []);
+    if (!shown) {
+        settings.set({ plugins: [YagrPlugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: 300, width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: state }),
+        React.createElement(Button, { onClick: onStartUpdates }, "Start Updates"),
+        React.createElement(Button, { onClick: () => setState(getNewConfig()) }, "Once")));
+};
+export const Line = LineTemplate.bind({});
+export const Updates = UpdatesTemplate.bind({});

package/build/plugins/yagr/__stories__/mocks/line10.d.ts

@@ -1,2 +1,53 @@
 import type { YagrWidgetData } from '../../types';
 export declare const line10: YagrWidgetData;
+export declare const getNewConfig: () => {
+    libraryConfig: {
+        title: {
+            text: string;
+        };
+        chart?: import("@gravity-ui/yagr/dist/YagrCore/types").YagrChartOptions | undefined;
+        legend?: import("@gravity-ui/yagr/dist/YagrCore/plugins/legend/legend").LegendOptions | undefined;
+        axes?: Record<string, import("@gravity-ui/yagr/dist/YagrCore/types").AxisOptions> | undefined;
+        cursor?: import("@gravity-ui/yagr/dist/YagrCore/plugins/cursor/cursor").CursorOptions | undefined;
+        timeline?: number[] | undefined;
+        tooltip?: Partial<import("@gravity-ui/yagr/dist/YagrCore/plugins/tooltip/types").TooltipOptions> | undefined;
+        grid?: import("uplot").Axis.Grid | undefined;
+        markers?: import("@gravity-ui/yagr/dist/YagrCore/types").MarkersOptions | undefined;
+        scales?: Record<string, import("@gravity-ui/yagr/dist/YagrCore/types").Scale> | undefined;
+        series?: import("@gravity-ui/yagr/dist/YagrCore/types").RawSerieData<Omit<import("@gravity-ui/yagr/dist/YagrCore/types").SeriesOptions, "type"> & {
+            type?: import("@gravity-ui/yagr/dist/YagrCore/types").ChartType | undefined;
+        }>[] | undefined;
+        hooks?: import("@gravity-ui/yagr/dist/YagrCore/types").YagrHooks | undefined;
+        processing?: import("@gravity-ui/yagr/dist/YagrCore/types").ProcessingSettings | undefined;
+        editUplotOptions?: ((opts: import("uplot").Options) => import("uplot").Options) | undefined;
+        plugins?: Record<string, import("@gravity-ui/yagr/dist/YagrCore/types").YagrPlugin<{}, []>> | undefined;
+    };
+    data: {
+        timeline: number[];
+        graphs: {
+            data: number[];
+            name?: string | undefined;
+            id?: string | undefined;
+            scale?: string | undefined;
+            focus?: boolean | undefined;
+            show?: boolean | undefined;
+            color?: string | undefined;
+            spanGaps?: boolean | undefined;
+            cursorOptions?: Pick<import("@gravity-ui/yagr/dist/YagrCore/plugins/cursor/cursor").CursorOptions, "snapToValues" | "markersSize"> | undefined;
+            formatter?: ((value: string | number | null, serie: import("uplot").Series) => string) | undefined;
+            precision?: number | undefined;
+            snapToValues?: false | import("@gravity-ui/yagr/dist/YagrCore/types").SnapToValue | undefined;
+            stackGroup?: number | undefined;
+            title?: string | ((sIdx: number) => string) | undefined;
+            transform?: ((val: string | number | null, series: import("@gravity-ui/yagr/dist/YagrCore/types").DataSeries[], idx: number) => number | null) | undefined;
+            showInTooltip?: boolean | undefined;
+            postProcess?: ((data: (number | null)[], idx: number, y: import("@gravity-ui/yagr/dist/YagrCore").default<import("@gravity-ui/yagr/dist/YagrCore/types").MinimalValidConfig>) => (number | null)[]) | undefined;
+            type?: import("@gravity-ui/yagr/dist/YagrCore/types").ChartType | undefined;
+        }[];
+    };
+    sources?: Record<number, {
+        data: {
+            program: string;
+        };
+    }> | undefined;
+};

package/build/plugins/yagr/__stories__/mocks/line10.js

@@ -61,3 +61,18 @@ export const line10 = {
         processing: {},
     },
 };
+export const getNewConfig = () => {
+    const startPoint = (Math.random() * 10 ** 5) >> 0; // eslint-disable-line no-bitwise
+    return Object.assign(Object.assign({}, line10), { libraryConfig: Object.assign(Object.assign({}, line10.libraryConfig), { title: {
+                text: 'line: random 100 pts',
+            } }), data: {
+            timeline: new Array(100).fill(0).map((_, i) => {
+                return startPoint + i * 1000;
+            }),
+            graphs: line10.data.graphs.map((graph) => {
+                return Object.assign(Object.assign({}, graph), { data: new Array(100).fill(0).map(() => {
+                        return (Math.random() * 100) >> 0; // eslint-disable-line no-bitwise
+                    }) });
+            }),
+        } });
+};

package/build/plugins/yagr/__tests__/utils.test.js

@@ -6,13 +6,13 @@ const DATA = {
 describe('plugins/yagr/utils', () => {
     describe('shapeYagrConfig > check chart property', () => {
         test.each([
-            [{}, { appereance: { locale: 'en', theme: 'dark' } }],
-            [{ appereance: { locale: 'ru' } }, { appereance: { locale: 'ru', theme: 'dark' } }],
-            [{ appereance: { theme: 'light' } }, { appereance: { locale: 'en', theme: 'light' } }],
+            [{}, { appearance: { locale: 'en', theme: 'dark' } }],
+            [{ appearance: { locale: 'ru' } }, { appearance: { locale: 'ru', theme: 'dark' } }],
+            [{ appearance: { theme: 'light' } }, { appearance: { locale: 'en', theme: 'light' } }],
             [
                 { series: { type: 'dots' }, select: { zoom: false }, timeMultiplier: 1 },
                 {
-                    appereance: { locale: 'en', theme: 'dark' },
+                    appearance: { locale: 'en', theme: 'dark' },
                     series: { type: 'dots' },
                     select: { zoom: false },
                     timeMultiplier: 1,

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

@@ -11,9 +11,8 @@ declare const YagrWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"yagr"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"yagr">) => void) | undefined;
-    onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
 } & {} & {
     id: string;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;

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

@@ -23,9 +23,11 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
     }, [onLoad, data]);
     const onWindowResize = React.useCallback(() => {
-        var _a;
-        if ((_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart) {
-            const chart = yagrRef.current.chart;
+        if (yagrRef.current) {
+            const chart = yagrRef.current.yagr();
+            if (!chart) {
+                return;
+            }
             const root = chart.root;
             const height = root.offsetHeight;
             const width = root.offsetWidth;
@@ -38,9 +40,9 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
             onWindowResize();
         },
     }), [onWindowResize]);
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
         var _a, _b, _c, _d;
-        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
+        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr();
         if (!yagr) {
             return;
         }
@@ -67,11 +69,11 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
                 handlers.mouseDown = null;
             }
         });
-    });
+    }, []);
     React.useLayoutEffect(() => {
         var _a;
-        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart });
-    }, []);
+        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 }));
 });
 export default YagrWidget;

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

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { formatTooltip } from './tooltip';
 const calcOption = (d) => {
-    return typeof d === 'object'
+    return typeof d === 'object' && d !== null
         ? Object.values(d).reduce((_, t) => {
             return t;
         })
@@ -16,7 +16,7 @@ export const renderTooltip = (data) => {
     const cfg = data.yagr.config;
     const timeMultiplier = cfg.chart.timeMultiplier || 1;
     const opts = data.options;
-    const { x, pinned } = data;
+    const { x, state } = data;
     let sumTotal = 0;
     const rows = Object.values(data.scales).reduce((acc, scale) => {
         sumTotal += scale.sum || 0;
@@ -27,7 +27,7 @@ export const renderTooltip = (data) => {
     const maxLines = calcOption(opts.maxLines);
     const valueFormatter = calcOption(opts.value);
     // eslint-disable-next-line no-nested-ternary
-    const hiddenRowsNumber = pinned
+    const hiddenRowsNumber = state.pinned
         ? undefined
         : lines > maxLines
             ? Math.abs(maxLines - lines)
@@ -50,6 +50,6 @@ export const renderTooltip = (data) => {
         tooltipFormatOptions.sum = valueFormatter(sumTotal);
     }
     return formatTooltip(tooltipFormatOptions, {
-        lastVisibleRowIndex: pinned ? rows.length - 1 : maxLines - 1,
+        lastVisibleRowIndex: state.pinned ? rows.length - 1 : maxLines - 1,
     });
 };

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

@@ -87,7 +87,7 @@ export const shapeYagrConfig = (args) => {
     const { data, libraryConfig, theme } = args;
     const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
     const chart = {
-        appereance: {
+        appearance: {
             locale: settings.get('lang'),
             theme,
         },

package/build/types/index.d.ts

@@ -29,16 +29,18 @@ export declare type ChartKitProps<T extends ChartKitType> = {
     id?: string;
     isMobile?: boolean;
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
-    /** Fires on each chartkit plugin's component render */
+    /**
+     * called on each render
+     * @param data
+     */
     onRender?: (data: ChartKitOnRenderData) => void;
-    /** Fires on chartkit plugin's component mount */
+    /**
+     * called on chart mount
+     * @param data
+     */
     onChartLoad?: (data: ChartKitOnChartLoad<T>) => void;
-    /** 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;
+    onError?: ChartKitOnError;
 } & {
     [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.13.0",
+  "version": "3.0.0-beta.1",
   "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,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@gravity-ui/yagr": "^2.2.6",
+    "@gravity-ui/yagr": "^3.3.0",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
     "highcharts-react-official": "^3.0.0",
@@ -65,9 +65,9 @@
     "typescript": "^4.2.3"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@gravity-ui/uikit": "^4.0.0",
     "moment": "^2.19.3",
-    "@gravity-ui/uikit": "^4.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "test": "jest",