@gravity-ui/chartkit 2.11.0 → 3.0.0-beta.0

package/CHANGELOG.md

@@ -6,12 +6,11 @@
 ### Features
 
 * add renderError property ([#175](https://github.com/gravity-ui/chartkit/issues/175)) ([84c03a9](https://github.com/gravity-ui/chartkit/commit/84c03a9f8516e9fb846e25a920aa82b00c660a02))
-* **main:** Add renderErrorView prop for custom render and handle errors ([15e314f](https://github.com/gravity-ui/chartkit/commit/15e314f40c378aa65c4d83055760f49fb56af539))
 
 
 ### Bug Fixes
 
-* **main:** reset "No data" error on change data ([ac0da94](https://github.com/gravity-ui/chartkit/commit/ac0da94fd21ff558a739c00b8904645d5ba006ef))
+* reset "No data" error on change data ([ac0da94](https://github.com/gravity-ui/chartkit/commit/ac0da94fd21ff558a739c00b8904645d5ba006ef))
 
 ## [2.10.1](https://github.com/gravity-ui/chartkit/compare/v2.10.0...v2.10.1) (2023-06-19)
 

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/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,52 @@
 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,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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.11.0",
+  "version": "3.0.0-beta.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": "^2.2.5",
+    "@gravity-ui/yagr": "^3.1.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",