@gravity-ui/chartkit 2.11.1-beta.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [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,8 +13,9 @@ 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;
-    renderError?: import("../types").RenderError | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
+    renderError?: import("../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | 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 } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile"]);
+    const { instanceRef, id: propsId, type, isMobile, renderPluginLoader } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile", "renderPluginLoader"]);
     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: React.createElement(Loader, null) },
+    return (React.createElement(React.Suspense, { fallback: (renderPluginLoader === null || renderPluginLoader === void 0 ? void 0 : renderPluginLoader()) || 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,8 +8,9 @@ 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;
-    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
 } & {
     hoistConfigError?: boolean | undefined;
     nonBodyScroll?: boolean | undefined;

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

@@ -43,9 +43,6 @@ 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;
@@ -208,6 +205,6 @@ export const withSplitPane = (ComposedComponent) => {
         }
     }
     return React.forwardRef((props, ref) => {
-        return React.createElement(WithSplitPane, Object.assign({}, props, { forwardedRef: ref }));
+        return React.createElement(WithSplitPane, Object.assign({ forwardedRef: ref }, props));
     });
 };

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

@@ -9,8 +9,9 @@ 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;
-    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | 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,6 +1,4 @@
 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,13 +3,12 @@ import { Button } from '@gravity-ui/uikit';
 import { settings } from '../../../libs';
 import { YagrPlugin } from '../../../plugins';
 import { ChartKit } from '../../../components/ChartKit';
-import { getNewConfig, line10 } from './mocks/line10';
-import '@gravity-ui/yagr/dist/index.css';
+import { line10 } from './mocks/line10';
 export default {
     title: 'Plugins/Yagr',
     component: ChartKit,
 };
-const LineTemplate = () => {
+const Template = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef();
     if (!shown) {
@@ -19,23 +18,4 @@ const LineTemplate = () => {
     return (React.createElement("div", { style: { height: 300, width: '100%' } },
         React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10 })));
 };
-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({});
+export const Line = Template.bind({});

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

@@ -1,52 +1,2 @@
 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;
-            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,18 +61,3 @@ 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([
-            [{}, { appearance: { locale: 'en', theme: 'dark' } }],
-            [{ appearance: { locale: 'ru' } }, { appearance: { locale: 'ru', theme: 'dark' } }],
-            [{ appearance: { theme: 'light' } }, { appearance: { locale: 'en', theme: 'light' } }],
+            [{}, { appereance: { locale: 'en', theme: 'dark' } }],
+            [{ appereance: { locale: 'ru' } }, { appereance: { locale: 'ru', theme: 'dark' } }],
+            [{ appereance: { theme: 'light' } }, { appereance: { locale: 'en', theme: 'light' } }],
             [
                 { series: { type: 'dots' }, select: { zoom: false }, timeMultiplier: 1 },
                 {
-                    appearance: { locale: 'en', theme: 'dark' },
+                    appereance: { locale: 'en', theme: 'dark' },
                     series: { type: 'dots' },
                     select: { zoom: false },
                     timeMultiplier: 1,

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

@@ -11,8 +11,9 @@ 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;
-    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
 } & {} & {
     id: string;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;

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

@@ -23,11 +23,9 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
     }, [onLoad, data]);
     const onWindowResize = React.useCallback(() => {
-        if (yagrRef.current) {
-            const chart = yagrRef.current.yagr();
-            if (!chart) {
-                return;
-            }
+        var _a;
+        if ((_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart) {
+            const chart = yagrRef.current.chart;
             const root = chart.root;
             const height = root.offsetHeight;
             const width = root.offsetWidth;
@@ -40,9 +38,9 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
             onWindowResize();
         },
     }), [onWindowResize]);
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         var _a, _b, _c, _d;
-        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr();
+        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
         if (!yagr) {
             return;
         }
@@ -69,11 +67,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.yagr() });
-    }, [yagrRef, onChartLoad]);
+        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart });
+    }, []);
     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' && d !== null
+    return typeof d === 'object'
         ? 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, state } = data;
+    const { x, pinned } = 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 = state.pinned
+    const hiddenRowsNumber = pinned
         ? undefined
         : lines > maxLines
             ? Math.abs(maxLines - lines)
@@ -50,6 +50,6 @@ export const renderTooltip = (data) => {
         tooltipFormatOptions.sum = valueFormatter(sumTotal);
     }
     return formatTooltip(tooltipFormatOptions, {
-        lastVisibleRowIndex: state.pinned ? rows.length - 1 : maxLines - 1,
+        lastVisibleRowIndex: 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 = {
-        appearance: {
+        appereance: {
             locale: settings.get('lang'),
             theme,
         },

package/build/types/index.d.ts

@@ -29,18 +29,16 @@ export declare type ChartKitProps<T extends ChartKitType> = {
     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];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.11.1-beta.0",
+  "version": "2.12.0",
   "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": "^3.1.0",
+    "@gravity-ui/yagr": "^2.2.5",
     "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": {
-    "@gravity-ui/uikit": "^4.0.0",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "moment": "^2.19.3",
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "@gravity-ui/uikit": "^4.0.0"
   },
   "scripts": {
     "test": "jest",