@gravity-ui/chartkit 3.3.0 → 3.4.1

package/build/plugins/indicator/__stories__/Indicator.stories.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { withKnobs, boolean, color as colorKnob, radios, text } from '@storybook/addon-knobs';
-import { cloneDeep } from 'lodash';
-import { Button } from '@gravity-ui/uikit';
-import { settings } from '../../../libs';
-import { ChartKit } from '../../../components/ChartKit';
-import { IndicatorPlugin } from '../';
-const data = {
-    data: [
-        {
-            content: {
-                current: {
-                    value: 1539577973,
-                },
-            },
-        },
-    ],
-};
-const Template = () => {
-    const [shown, setShown] = React.useState(false);
-    const chartkitRef = React.useRef();
-    const color = colorKnob('color', '#4da2f1');
-    const size = radios('size', { s: 's', m: 'm', l: 'l', xl: 'xl' }, 'm');
-    const title = text('title', 'Value title');
-    const nowrap = boolean('nowrap', false);
-    const resultData = cloneDeep(data);
-    if (resultData.data) {
-        resultData.data[0].size = size;
-        resultData.data[0].color = color;
-        resultData.data[0].title = title;
-        resultData.data[0].nowrap = nowrap;
-    }
-    if (!shown) {
-        settings.set({ plugins: [IndicatorPlugin] });
-        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: "indicator", data: resultData })));
-};
-export const Showcase = Template.bind({});
-const meta = {
-    title: 'Plugins/Indicator',
-    decorators: [withKnobs],
-};
-export default meta;

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

@@ -1,6 +0,0 @@
-import '@gravity-ui/yagr/dist/index.css';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const Line: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const Updates: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const CustomTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

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

@@ -1,90 +0,0 @@
-import React, { useEffect, useState } from 'react';
-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 placement from '@gravity-ui/yagr/dist/YagrCore/plugins/tooltip/placement';
-import { dateTime } from '@gravity-ui/date-utils';
-export default {
-    title: 'Plugins/Yagr',
-    component: ChartKit,
-};
-const LineTemplate = () => {
-    const [shown, setShown] = React.useState(false);
-    const chartkitRef = React.useRef();
-    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: 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")));
-};
-function Tooltip({ yagr }) {
-    const [x, setX] = useState(null);
-    const [visible, setVisible] = useState(false);
-    const tooltipRef = React.useRef(null);
-    useEffect(() => {
-        var _a, _b, _c;
-        if (!yagr) {
-            return;
-        }
-        const onChange = (_, data) => {
-            var _a, _b;
-            setX((_a = data.data) === null || _a === void 0 ? void 0 : _a.x);
-            setVisible(data.state.visible);
-            if (data.state.visible && tooltipRef.current && ((_b = data.data) === null || _b === void 0 ? void 0 : _b.anchor)) {
-                placement(tooltipRef.current, data.data.anchor, 'right', {
-                    xOffset: 24,
-                    yOffset: 24,
-                });
-            }
-        };
-        (_a = yagr.plugins.tooltip) === null || _a === void 0 ? void 0 : _a.on('render', onChange);
-        (_b = yagr.plugins.tooltip) === null || _b === void 0 ? void 0 : _b.on('show', onChange);
-        (_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('hide', onChange);
-    }, [yagr]);
-    if (!visible) {
-        return null;
-    }
-    return (React.createElement("div", { style: {
-            zIndex: 1000,
-            backgroundColor: 'white',
-            padding: 8,
-            pointerEvents: 'none',
-        }, ref: tooltipRef }, dateTime({ input: x !== null && x !== void 0 ? x : 0 }).format('DD MMMM YYYY HH:mm:ss')));
-}
-const CustomTooltipImpl = () => {
-    const [shown, setShown] = React.useState(false);
-    const chartkitRef = React.useRef();
-    const [state, setState] = React.useState(line10);
-    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, tooltip: (props) => React.createElement(Tooltip, Object.assign({}, props)) }),
-        React.createElement(Button, { onClick: () => setState(getNewConfig()) }, "Change data")));
-};
-export const Line = LineTemplate.bind({});
-export const Updates = UpdatesTemplate.bind({});
-export const CustomTooltip = CustomTooltipImpl.bind({});

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

@@ -1,53 +0,0 @@
-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;
-            title?: string | ((sIdx: number) => string) | 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;
-            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

@@ -1,78 +0,0 @@
-export const line10 = {
-    data: {
-        timeline: [
-            1636838612441, 1636925012441, 1637011412441, 1637097812441, 1637184212441,
-            1637270612441, 1637357012441, 1637443412441, 1637529812441, 1637616212441,
-        ],
-        graphs: [
-            {
-                id: '0',
-                name: 'Serie 1',
-                color: '#6c59c2',
-                data: [45, 52, 89, 72, 39, 49, 82, 59, 36, 5],
-            },
-            {
-                id: '1',
-                name: 'Serie 2',
-                color: '#6e8188',
-                data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
-            },
-            {
-                id: '2',
-                name: 'Serie 3',
-                color: '#e21576',
-                data: [26, 54, 15, 40, 43, 18, 65, 46, 51, 33],
-            },
-        ],
-    },
-    libraryConfig: {
-        chart: {
-            series: {
-                type: 'line',
-            },
-            select: {
-                zoom: false,
-            },
-        },
-        title: {
-            text: 'line: random 10 pts',
-        },
-        axes: {
-            x: {},
-        },
-        scales: {
-            x: {},
-            y: {
-                type: 'linear',
-                range: 'nice',
-            },
-        },
-        cursor: {
-            x: {
-                visible: true,
-                style: 'solid 2px rgba(230, 2, 7, 0.3)',
-            },
-        },
-        tooltip: {
-            show: true,
-            tracking: 'sticky',
-        },
-        legend: {},
-        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.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,26 +0,0 @@
-import { shapeYagrConfig } from '../renderer/utils';
-const DATA = {
-    timeline: [1],
-    graphs: [{ data: [45] }],
-};
-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' } }],
-            [
-                { series: { type: 'dots' }, select: { zoom: false }, timeMultiplier: 1 },
-                {
-                    appearance: { locale: 'en', theme: 'dark' },
-                    series: { type: 'dots' },
-                    select: { zoom: false },
-                    timeMultiplier: 1,
-                },
-            ],
-        ])('(args: %j)', (chart, expected) => {
-            const config = shapeYagrConfig({ data: DATA, libraryConfig: { chart }, theme: 'dark' });
-            expect(config.chart).toEqual(expected);
-        });
-    });
-});

package/build/utils/__tests__/common.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/utils/__tests__/common.test.js

@@ -1,9 +0,0 @@
-import { getRandomCKId } from '../common';
-// length of "ck." + 10 random symbols
-const ID_LENGTH = 13;
-describe('utils/getRandomCKId', () => {
-    it('Id should have 13 symbols', () => {
-        const result = getRandomCKId();
-        expect(result.length).toBe(ID_LENGTH);
-    });
-});