@gravity-ui/chartkit 5.17.1 → 5.18.0

package/build/components/ChartKit.css

@@ -28,5 +28,4 @@
   --highcharts-tooltip-alternate-bg: var(--g-color-base-generic);
   --highcharts-tooltip-text-complementary: var(--g-color-text-secondary);
   --highcharts-holiday-band: var(--g-color-base-generic);
-  --d3-data-labels: var(--g-color-text-secondary);
 }

package/build/components/SplitPane/Pane.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SplitLayoutType } from './types';
+type Props = {
+    className?: string;
+    children?: React.ReactNode;
+    size?: number | string;
+    split?: SplitLayoutType;
+    style?: React.CSSProperties;
+    eleRef?: (node: HTMLDivElement) => void;
+};
+export declare class Pane extends React.PureComponent<Props> {
+    render(): React.JSX.Element;
+}
+export {};

package/build/components/SplitPane/Pane.js

@@ -0,0 +1,26 @@
+// Copyright 2015 tomkp
+// Copyright 2022 YANDEX LLC
+import React from 'react';
+export class Pane extends React.PureComponent {
+    render() {
+        const { children, className, split, style: styleProps, size, eleRef } = this.props;
+        const classes = ['Pane', split, className];
+        let style = {
+            flex: 1,
+            position: 'relative',
+            outline: 'none',
+        };
+        if (size !== undefined) {
+            if (split === 'vertical') {
+                style.width = size;
+            }
+            else {
+                style.height = size;
+                style.display = 'flex';
+            }
+            style.flex = 'none';
+        }
+        style = Object.assign({}, style, styleProps || {});
+        return (React.createElement("div", { ref: eleRef, className: classes.join(' '), style: style }, children));
+    }
+}

package/build/components/SplitPane/Resizer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SplitLayoutType } from './types';
+export declare const RESIZER_DEFAULT_CLASSNAME = "Resizer";
+type Props = {
+    onMouseDown: React.MouseEventHandler;
+    onTouchStart: React.TouchEventHandler;
+    onTouchEnd: React.TouchEventHandler;
+    className?: string;
+    split?: SplitLayoutType;
+    style?: React.CSSProperties;
+    resizerClassName?: string;
+    onClick?: React.MouseEventHandler;
+    onDoubleClick?: React.MouseEventHandler;
+};
+export declare class Resizer extends React.Component<Props> {
+    render(): React.JSX.Element;
+}
+export {};

package/build/components/SplitPane/Resizer.js

@@ -0,0 +1,26 @@
+// Copyright 2015 tomkp
+// Copyright 2022 YANDEX LLC
+import React from 'react';
+export const RESIZER_DEFAULT_CLASSNAME = 'Resizer';
+export class Resizer extends React.Component {
+    render() {
+        const { className, onClick, onDoubleClick, onMouseDown, onTouchEnd, onTouchStart, resizerClassName = RESIZER_DEFAULT_CLASSNAME, split, style, } = this.props;
+        const classes = [resizerClassName, split, className];
+        return (React.createElement("span", { role: "presentation", className: classes.join(' '), style: style, onMouseDown: (event) => onMouseDown(event), onTouchStart: (event) => {
+                onTouchStart(event);
+            }, onTouchEnd: (event) => {
+                event.preventDefault();
+                onTouchEnd(event);
+            }, onClick: (event) => {
+                if (onClick) {
+                    event.preventDefault();
+                    onClick(event);
+                }
+            }, onDoubleClick: (event) => {
+                if (onDoubleClick) {
+                    event.preventDefault();
+                    onDoubleClick(event);
+                }
+            } }));
+    }
+}

package/build/components/SplitPane/SplitPane.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { SplitLayoutType } from './types';
+export type SplitPaneProps = {
+    allowResize?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    primary?: 'first' | 'second';
+    minSize?: number;
+    maxSize?: number;
+    defaultSize?: number;
+    size?: number | string;
+    split?: SplitLayoutType;
+    onDragStarted?: () => void;
+    onDragFinished?: (size?: number | string) => void;
+    onChange?: (size: number) => void;
+    onResizerClick?: React.MouseEventHandler;
+    onResizerDoubleClick?: React.MouseEventHandler;
+    style?: React.CSSProperties;
+    resizerStyle?: React.CSSProperties;
+    paneClassName?: string;
+    pane1ClassName?: string;
+    pane2ClassName?: string;
+    paneStyle?: React.CSSProperties;
+    pane1Style?: React.CSSProperties;
+    pane2Style?: React.CSSProperties;
+    resizerClassName?: string;
+    step?: number;
+};
+type DefaultProps = Required<Pick<SplitPaneProps, 'allowResize' | 'minSize' | 'primary' | 'split' | 'paneClassName' | 'pane1ClassName' | 'pane2ClassName'>>;
+type Props = Omit<SplitPaneProps, 'allowResize' | 'minSize' | 'primary' | 'split' | 'paneClassName' | 'pane1ClassName' | 'pane2ClassName'> & DefaultProps;
+type State = {
+    active: boolean;
+    position: number;
+    resized: boolean;
+    draggedSize?: number | string;
+    pane1Size?: number | string;
+    pane2Size?: number | string;
+    instanceProps: {
+        size?: number | string;
+    };
+};
+export declare class SplitPane extends React.Component<Props, State> {
+    static defaultProps: DefaultProps;
+    static getDerivedStateFromProps(nextProps: Props, prevState: State): {};
+    static getSizeUpdate(props: Props, state: State): {};
+    splitPane: HTMLDivElement | null;
+    private pane1;
+    private pane2;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    private onMouseDown;
+    private onTouchStart;
+    private onMouseMove;
+    private onTouchMove;
+    private onMouseUp;
+}
+export {};

package/build/components/SplitPane/SplitPane.js

@@ -0,0 +1,235 @@
+// Copyright 2015 tomkp
+// Copyright 2022 YANDEX LLC
+/* eslint-disable radix */
+/* eslint-disable complexity */
+import React from 'react';
+import { Pane } from './Pane';
+import { RESIZER_DEFAULT_CLASSNAME, Resizer } from './Resizer';
+function unFocus() {
+    var _a;
+    (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+}
+function getDefaultSize(defaultSize, minSize, maxSize, draggedSize) {
+    if (typeof draggedSize === 'number') {
+        const min = typeof minSize === 'number' ? minSize : 0;
+        const max = typeof maxSize === 'number' && maxSize >= 0 ? maxSize : Infinity;
+        return Math.max(min, Math.min(max, draggedSize));
+    }
+    if (defaultSize !== undefined) {
+        return defaultSize;
+    }
+    return minSize;
+}
+function removeNullChildren(children) {
+    return React.Children.toArray(children).filter((c) => c);
+}
+// TODO: https://github.com/gravity-ui/charts/issues/14
+export class SplitPane extends React.Component {
+    static getDerivedStateFromProps(nextProps, prevState) {
+        return SplitPane.getSizeUpdate(nextProps, prevState);
+    }
+    // we have to check values since gDSFP is called on every render and more in StrictMode
+    static getSizeUpdate(props, state) {
+        const newState = {};
+        const { instanceProps } = state;
+        if (instanceProps.size === props.size && props.size !== undefined) {
+            return {};
+        }
+        const newSize = props.size === undefined
+            ? getDefaultSize(props.defaultSize, props.minSize, props.maxSize, state.draggedSize)
+            : props.size;
+        if (props.size !== undefined) {
+            newState.draggedSize = newSize;
+        }
+        const isPanel1Primary = props.primary === 'first';
+        newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+        newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
+        newState.instanceProps = { size: props.size };
+        return newState;
+    }
+    constructor(props) {
+        super(props);
+        this.splitPane = null;
+        this.pane1 = null;
+        this.pane2 = null;
+        this.onMouseDown = (event) => {
+            const eventWithTouches = Object.assign({}, event, {
+                touches: [{ clientX: event.clientX, clientY: event.clientY }],
+            });
+            this.onTouchStart(eventWithTouches);
+        };
+        this.onTouchStart = (event) => {
+            const { allowResize, onDragStarted, split } = this.props;
+            if (allowResize) {
+                unFocus();
+                const position = split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
+                if (typeof onDragStarted === 'function') {
+                    onDragStarted();
+                }
+                this.setState({
+                    active: true,
+                    position,
+                });
+            }
+        };
+        this.onMouseMove = (event) => {
+            const eventWithTouches = Object.assign({}, event, {
+                touches: [{ clientX: event.clientX, clientY: event.clientY }],
+            });
+            this.onTouchMove(eventWithTouches);
+        };
+        this.onTouchMove = (event) => {
+            const { allowResize, maxSize, minSize, onChange, split, step } = this.props;
+            const { active, position } = this.state;
+            if (allowResize && active) {
+                unFocus();
+                const isPrimaryFirst = this.props.primary === 'first';
+                const ref = isPrimaryFirst ? this.pane1 : this.pane2;
+                const ref2 = isPrimaryFirst ? this.pane2 : this.pane1;
+                if (ref) {
+                    const node = ref;
+                    const node2 = ref2;
+                    if (node.getBoundingClientRect) {
+                        const width = node.getBoundingClientRect().width;
+                        const height = node.getBoundingClientRect().height;
+                        const current = split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
+                        const size = split === 'vertical' ? width : height;
+                        let positionDelta = position - current;
+                        if (step) {
+                            if (Math.abs(positionDelta) < step) {
+                                return;
+                            }
+                            // Integer division
+                            // eslint-disable-next-line no-bitwise
+                            positionDelta = ~~(positionDelta / step) * step;
+                        }
+                        let sizeDelta = isPrimaryFirst ? positionDelta : -positionDelta;
+                        const pane1Order = parseInt(window.getComputedStyle(node).order);
+                        const pane2Order = parseInt(window.getComputedStyle(node2).order);
+                        if (pane1Order > pane2Order) {
+                            sizeDelta = -sizeDelta;
+                        }
+                        let newMaxSize = maxSize;
+                        if (maxSize !== undefined && maxSize <= 0) {
+                            const splitPane = this.splitPane;
+                            if (split === 'vertical') {
+                                newMaxSize = splitPane.getBoundingClientRect().width + maxSize;
+                            }
+                            else {
+                                newMaxSize = splitPane.getBoundingClientRect().height + maxSize;
+                            }
+                        }
+                        let newSize = size - sizeDelta;
+                        const newPosition = position - positionDelta;
+                        if (newSize < minSize) {
+                            newSize = minSize;
+                        }
+                        else if (maxSize !== undefined && newSize > newMaxSize) {
+                            newSize = newMaxSize;
+                        }
+                        else {
+                            this.setState({
+                                position: newPosition,
+                                resized: true,
+                            });
+                        }
+                        if (onChange)
+                            onChange(newSize);
+                        this.setState({
+                            draggedSize: newSize,
+                            [isPrimaryFirst ? 'pane1Size' : 'pane2Size']: newSize,
+                        });
+                    }
+                }
+            }
+        };
+        this.onMouseUp = () => {
+            const { allowResize, onDragFinished } = this.props;
+            const { active, draggedSize } = this.state;
+            if (allowResize && active) {
+                if (typeof onDragFinished === 'function') {
+                    onDragFinished(draggedSize);
+                }
+                this.setState({ active: false });
+            }
+        };
+        // order of setting panel sizes.
+        // 1. size
+        // 2. getDefaultSize(defaultSize, minsize, maxSize)
+        const { size, defaultSize, minSize, maxSize, primary } = props;
+        const initialSize = size === undefined ? getDefaultSize(defaultSize, minSize, maxSize) : size;
+        this.state = {
+            active: false,
+            resized: false,
+            position: 0,
+            draggedSize: 0,
+            pane1Size: primary === 'first' ? initialSize : undefined,
+            pane2Size: primary === 'second' ? initialSize : undefined,
+            // these are props that are needed in static functions. ie: gDSFP
+            instanceProps: {
+                size,
+            },
+        };
+    }
+    componentDidMount() {
+        document.addEventListener('mouseup', this.onMouseUp);
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('touchmove', this.onTouchMove);
+        this.setState(SplitPane.getSizeUpdate(this.props, this.state));
+    }
+    componentWillUnmount() {
+        document.removeEventListener('mouseup', this.onMouseUp);
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('touchmove', this.onTouchMove);
+    }
+    render() {
+        const { allowResize, children, className, onResizerClick, onResizerDoubleClick, paneClassName, pane1ClassName, pane2ClassName, paneStyle, pane1Style: pane1StyleProps, pane2Style: pane2StyleProps, resizerClassName, resizerStyle, split, style: styleProps, } = this.props;
+        const { pane1Size, pane2Size } = this.state;
+        const disabledClass = allowResize ? '' : 'disabled';
+        const resizerClassNamesIncludingDefault = resizerClassName
+            ? `${resizerClassName} ${RESIZER_DEFAULT_CLASSNAME}`
+            : resizerClassName;
+        const notNullChildren = removeNullChildren(children);
+        const style = Object.assign({ display: 'flex', flex: 1, height: '100%', position: 'absolute', outline: 'none', overflow: 'hidden', MozUserSelect: 'text', WebkitUserSelect: 'text', msUserSelect: 'text', userSelect: 'text' }, styleProps);
+        if (split === 'vertical') {
+            Object.assign(style, {
+                flexDirection: 'row',
+                left: 0,
+                right: 0,
+            });
+        }
+        else {
+            Object.assign(style, {
+                bottom: 0,
+                flexDirection: 'column',
+                minHeight: '100%',
+                top: 0,
+                width: '100%',
+            });
+        }
+        const classes = ['SplitPane', className, split, disabledClass];
+        const pane1Style = Object.assign(Object.assign({}, paneStyle), pane1StyleProps);
+        const pane2Style = Object.assign(Object.assign({}, paneStyle), pane2StyleProps);
+        const pane1Classes = ['Pane1', paneClassName, pane1ClassName].join(' ');
+        const pane2Classes = ['Pane2', paneClassName, pane2ClassName].join(' ');
+        return (React.createElement("div", { className: classes.join(' '), ref: (node) => {
+                this.splitPane = node;
+            }, style: style },
+            React.createElement(Pane, { className: pane1Classes, key: "pane1", eleRef: (node) => {
+                    this.pane1 = node;
+                }, size: pane1Size, split: split, style: pane1Style }, notNullChildren[0]),
+            React.createElement(Resizer, { className: disabledClass, onClick: onResizerClick, onDoubleClick: onResizerDoubleClick, onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, onTouchEnd: this.onMouseUp, key: "resizer", resizerClassName: resizerClassNamesIncludingDefault, split: split, style: resizerStyle || {} }),
+            React.createElement(Pane, { className: pane2Classes, key: "pane2", eleRef: (node) => {
+                    this.pane2 = node;
+                }, size: pane2Size, split: split, style: pane2Style }, notNullChildren[1])));
+    }
+}
+SplitPane.defaultProps = {
+    allowResize: true,
+    minSize: 50,
+    primary: 'first',
+    split: 'vertical',
+    paneClassName: '',
+    pane1ClassName: '',
+    pane2ClassName: '',
+};

package/build/{plugins/highcharts/renderer/components/StyledSplitPane → components/SplitPane}/StyledSplitPane.css

@@ -45,6 +45,5 @@
 }
 
 .styled-split-pane .Pane {
-  overflow: auto;
   height: 100%;
 }

package/build/{plugins/highcharts/renderer/components/StyledSplitPane → components/SplitPane}/StyledSplitPane.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitPaneProps } from 'react-split-pane';
+import type { SplitPaneProps } from './SplitPane';
 import './StyledSplitPane.css';
 type Props = SplitPaneProps & {
     paneOneRender: () => React.ReactNode;

package/build/{plugins/highcharts/renderer/components/StyledSplitPane → components/SplitPane}/StyledSplitPane.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import React from 'react';
-import SplitPane, { Pane } from 'react-split-pane';
-import { cn } from '../../../../../utils/cn';
+import { cn } from '../../utils/cn';
+import { Pane } from './Pane';
+import { SplitPane } from './SplitPane';
 import './StyledSplitPane.css';
 const b = cn('styled-split-pane');
 const resizerClassName = b('pane-resizer');
 export const StyledSplitPane = (_a) => {
     var { paneOneRender, paneTwoRender } = _a, splitPaneProps = __rest(_a, ["paneOneRender", "paneTwoRender"]);
-    // https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L307
     const splitPaneRef = React.useRef(null);
     React.useEffect(() => {
         var _a, _b;

package/build/components/SplitPane/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SplitLayout: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};

package/build/components/SplitPane/constants.js

@@ -0,0 +1,4 @@
+export const SplitLayout = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};

package/build/components/SplitPane/index.d.ts

@@ -0,0 +1,8 @@
+import { ScreenOrientationType } from '../../constants';
+import { SplitLayoutType } from './types';
+export { SplitLayout } from './constants';
+export * from './Pane';
+export * from './SplitPane';
+export * from './StyledSplitPane';
+export * from './types';
+export declare function mapScreenOrientationTypeToSplitLayout(type: ScreenOrientationType): SplitLayoutType;

package/build/components/SplitPane/index.js

@@ -0,0 +1,18 @@
+export { SplitLayout } from './constants';
+export * from './Pane';
+export * from './SplitPane';
+export * from './StyledSplitPane';
+export * from './types';
+export function mapScreenOrientationTypeToSplitLayout(type) {
+    switch (type) {
+        case 'landscape-primary':
+        case 'landscape-secondary': {
+            return 'vertical';
+        }
+        case 'portrait-primary':
+        case 'portrait-secondary':
+        default: {
+            return 'horizontal';
+        }
+    }
+}

package/build/components/SplitPane/types.d.ts

@@ -0,0 +1,2 @@
+import type { SplitLayout } from './constants';
+export type SplitLayoutType = (typeof SplitLayout)[keyof typeof SplitLayout];

package/build/constants/index.d.ts

@@ -1,2 +1,3 @@
 export { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from './common';
 export * from './widget-data';
+export * from './misc';

package/build/constants/index.js

@@ -1,2 +1,3 @@
 export { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from './common';
 export * from './widget-data';
+export * from './misc';

package/build/constants/misc.d.ts

@@ -0,0 +1,10 @@
+export declare const IS_WINDOW_AVAILABLE: boolean;
+export declare const IS_SCREEN_ORIENTATION_AVAILABLE: boolean;
+export declare const ScreenOrientation: {
+    readonly PORTRAIT_PRIMARY: "portrait-primary";
+    readonly PORTRAIT_SECONDARY: "portrait-secondary";
+    readonly LANDSCAPE_PRIMARY: "landscape-primary";
+    readonly LANDSCAPE_SECONDARY: "landscape-secondary";
+};
+export type ScreenOrientationType = (typeof ScreenOrientation)[keyof typeof ScreenOrientation];
+export declare const AVAILABLE_SCREEN_ORIENTATIONS: ("landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary")[];

package/build/constants/misc.js

@@ -0,0 +1,19 @@
+function checkWindowAvailability() {
+    return typeof window === 'object';
+}
+export const IS_WINDOW_AVAILABLE = checkWindowAvailability();
+function checkScreenOrientationAvailability() {
+    // W3C spec implementation
+    return (IS_WINDOW_AVAILABLE &&
+        typeof window.ScreenOrientation === 'function' &&
+        typeof screen.orientation.addEventListener === 'function' &&
+        typeof screen.orientation.type === 'string');
+}
+export const IS_SCREEN_ORIENTATION_AVAILABLE = checkScreenOrientationAvailability();
+export const ScreenOrientation = {
+    PORTRAIT_PRIMARY: 'portrait-primary',
+    PORTRAIT_SECONDARY: 'portrait-secondary',
+    LANDSCAPE_PRIMARY: 'landscape-primary',
+    LANDSCAPE_SECONDARY: 'landscape-secondary',
+};
+export const AVAILABLE_SCREEN_ORIENTATIONS = Object.values(ScreenOrientation);

package/build/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './misc';

package/build/hooks/index.js

@@ -0,0 +1 @@
+export * from './misc';

package/build/hooks/misc.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

package/build/hooks/misc.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/build/plugins/d3/index.d.ts

@@ -1,6 +1,6 @@
 import { ChartKitPlugin } from '../../types';
+export { CustomShapeRenderer } from '@gravity-ui/charts';
 export * from './types';
-export * from './utils';
 /**
  * It is an experemental plugin
  *

package/build/plugins/d3/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
+export { CustomShapeRenderer } from '@gravity-ui/charts';
 export * from './types';
-export * from './utils';
 /**
  * It is an experemental plugin
  *
  * DO NOT USE IT IN YOUR PRODUCTION
  * */
 export const D3Plugin = {
+    // TODO: rename to 'gravity-chart' in the next major
     type: 'd3',
     renderer: React.lazy(() => import('./renderer/D3Widget')),
 };

package/build/plugins/d3/renderer/D3Widget.d.ts

@@ -11,5 +11,9 @@ declare const D3Widget: React.ForwardRefExoticComponent<{
     onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
     renderPluginLoader?: import("../../../types").ChartKitRenderPluginLoader | undefined;
-} & {} & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+} & {
+    tooltip?: {
+        splitted?: boolean | undefined;
+    } | undefined;
+} & React.RefAttributes<ChartKitWidgetRef | undefined>>;
 export default D3Widget;