@gravity-ui/chartkit 0.9.0 → 0.10.0

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -0,0 +1,575 @@
+import React from 'react';
+import { ChartCallbackFunction, Options, Chart } from 'highcharts';
+import type { ChartKitProps } from '../../../../types';
+import type { HighchartsWidgetData, StringParams } from '../../types';
+import './HighchartsComponent.css';
+declare type Props = ChartKitProps<'highcharts'>;
+declare type State = {
+    prevData: HighchartsWidgetData | null;
+    options: (Options & {
+        useHighStock: boolean;
+    }) | null;
+    callback: ChartCallbackFunction | null;
+    isError: boolean;
+};
+export declare class HighchartsComponent extends React.PureComponent<Props, State> {
+    static defaultProps: Partial<Props>;
+    static getDerivedStateFromProps(nextProps: Props, prevState: State): {
+        prevData: HighchartsWidgetData;
+        options: {
+            chart: {
+                type: any;
+            } & {
+                zoomType: string;
+                backgroundColor: string;
+                className: string;
+            } & {
+                events: {
+                    render?: (() => void) | undefined;
+                    load: () => void;
+                    selection: () => void;
+                    drilldown: () => void;
+                    drillup: () => void;
+                    click: (event: any) => void;
+                    redraw: () => void;
+                };
+            };
+            plotOptions: {
+                [x: number]: {
+                    stacking: any;
+                };
+            } & {
+                series: {
+                    borderColor: string;
+                    label: {
+                        enabled: boolean;
+                    };
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                    dataLabels: {
+                        style: {
+                            textOutline: string;
+                            color: string;
+                        };
+                    };
+                    turboThreshold: number;
+                };
+                area: {
+                    boostThreshold: number;
+                    trackByArea: boolean;
+                    stickyTracking: boolean;
+                } & {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                } & {
+                    dataLabels: {
+                        formatter: () => any;
+                    };
+                } & {
+                    states: {
+                        hover: {
+                            animation: {
+                                duration: number;
+                                easing: string;
+                            };
+                            lineWidth: number;
+                            opacity: number;
+                        };
+                        inactive: {
+                            opacity: number;
+                        };
+                    };
+                };
+                areaspline: {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                };
+                bar: {
+                    borderWidth: number;
+                    pointWidth: number;
+                } & {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                } & {
+                    dataLabels: {
+                        formatter: () => any;
+                    };
+                } & {
+                    states: {
+                        inactive: {
+                            enabled: boolean;
+                        };
+                    };
+                };
+                column: {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                } & {
+                    dataLabels: {
+                        formatter: () => any;
+                    };
+                } & {
+                    states: {
+                        inactive: {
+                            enabled: boolean;
+                        };
+                    };
+                };
+                line: {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                } & {
+                    dataLabels: {
+                        formatter: () => any;
+                    };
+                } & {
+                    states: {
+                        hover: {
+                            animation: {
+                                duration: number;
+                                easing: string;
+                            };
+                            lineWidth: number;
+                            opacity: number;
+                        };
+                        inactive: {
+                            opacity: number;
+                        };
+                    };
+                };
+                spline: {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                };
+                arearange: {
+                    tooltip: {
+                        pointFormat: string;
+                    };
+                } & {
+                    states: {
+                        hover: {
+                            lineWidthPlus: number;
+                        };
+                    };
+                    dataGrouping: {
+                        approximation: string;
+                    };
+                    marker: {
+                        enabled: boolean;
+                        radius: number;
+                        states: {
+                            hover: {
+                                radiusPlus: number;
+                            };
+                        };
+                    };
+                };
+                scatter: {
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                };
+                bubble: {
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                };
+                sankey: {
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                };
+                heatmap: {
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                };
+                treemap: {
+                    tooltip: {
+                        headerFormat: null;
+                        pointFormat: string;
+                    };
+                };
+                timeline: {
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                };
+                variwide: {};
+                waterfall: {};
+                pie: {
+                    tooltip: {
+                        headerFormat: null;
+                        pointFormat: string;
+                    };
+                    dataLabels: {
+                        formatter: () => any;
+                    };
+                } & {
+                    allowPointSelect: boolean;
+                    slicedOffset: number;
+                    cursor: string;
+                    showInLegend: boolean;
+                } & {
+                    states: {
+                        inactive: {
+                            enabled: boolean;
+                        };
+                    };
+                };
+                histogram: {
+                    tooltip: {
+                        headerFormat: null;
+                        pointFormat: string;
+                    };
+                };
+                bellcurve: {};
+                streamgraph: {};
+                ohlc: {
+                    tooltip: {
+                        pointFormat: string;
+                    };
+                };
+                ema: {};
+                sma: {};
+                wordcloud: {
+                    tooltip: {
+                        pointFormat: string;
+                    };
+                };
+                xrange: {
+                    tooltip: {
+                        headerFormat: string;
+                        pointFormat: string;
+                    };
+                };
+                solidgauge: {
+                    allowPointSelect: boolean;
+                    slicedOffset: number;
+                    cursor: string;
+                    showInLegend: boolean;
+                };
+                funnel: {
+                    allowPointSelect: boolean;
+                    slicedOffset: number;
+                    cursor: string;
+                    showInLegend: boolean;
+                };
+                boxplot: {
+                    tooltip: {
+                        pointFormat: string;
+                    };
+                };
+            } & {
+                xrange: {
+                    stickyTracking: boolean;
+                };
+                series: {
+                    events: {
+                        legendItemClick: (event: any) => void;
+                        mouseOver: () => void;
+                        mouseOut: () => void;
+                        click: (event: any) => void;
+                    };
+                    point: {
+                        events: {
+                            click: (event: any) => boolean;
+                        };
+                    };
+                    marker: {
+                        states: {
+                            hover: {
+                                enabled: boolean;
+                            };
+                            select: {
+                                enabled: boolean;
+                            };
+                        };
+                    } | {
+                        states?: undefined;
+                    };
+                };
+                pie: {
+                    point: {
+                        events: {
+                            legendItemClick: (event: any) => void;
+                        };
+                    };
+                };
+                area: {
+                    trackByArea: boolean;
+                    stickyTracking: boolean;
+                } | {
+                    trackByArea?: undefined;
+                    stickyTracking?: undefined;
+                };
+            };
+            title: {
+                style: {
+                    color: string;
+                };
+            } & {
+                text: any;
+                floating: any;
+            };
+            tooltip: {
+                split: boolean;
+                shared: boolean;
+                outside: boolean;
+                followPointer: boolean;
+                dateTimeLabelFormats: {
+                    millisecond: string;
+                    second: string;
+                    minute: string;
+                    hour: string;
+                    day: string;
+                    week: string;
+                    quarter: string;
+                };
+            } & {
+                replaceCellAt?: any;
+                insertCellAt?: any;
+                positioner?: typeof import("../helpers/config/config").portraitOrientationTooltipPositioner | undefined;
+                shared: boolean;
+                splitTooltip: any;
+                distance: number;
+                style: {
+                    width: string;
+                };
+                className: string;
+                outside: boolean;
+            };
+            legend: {
+                itemStyle: {
+                    color: string;
+                };
+                itemHoverStyle: {
+                    color: string;
+                };
+                itemHiddenStyle: {
+                    color: string;
+                };
+            } & ({
+                alignColumns: boolean;
+                labelFormatter: () => any;
+                navigation: {
+                    activeColor: string;
+                    inactiveColor: string;
+                    style: {
+                        color: string;
+                    };
+                };
+            } | {
+                enabled: boolean;
+            });
+            xAxis: {
+                crosshair: boolean;
+                gridLineColor: string;
+                lineColor: string;
+                labels: {
+                    style: {
+                        color: string;
+                    };
+                };
+                tickPixelInterval: number;
+                tickColor: string;
+                tickmarkPlacement: string;
+                dateTimeLabelFormats: {
+                    day: string;
+                    week: string;
+                    quarter: string;
+                };
+            } & {
+                crosshair: boolean | {
+                    width: number;
+                    color: string;
+                    zIndex: number;
+                };
+                labels: {
+                    formatter: () => any;
+                };
+            };
+            yAxis: {
+                gridLineColor: string;
+                lineColor: string;
+                labels: {
+                    style: {
+                        color: string;
+                    };
+                };
+                tickColor: string;
+                stackLabels: {
+                    style: {
+                        textOutline: string;
+                        color: string;
+                    };
+                };
+            } & {
+                crosshair: boolean | {
+                    width: number;
+                    color: string;
+                    zIndex: number;
+                };
+                labels: {
+                    formatter: () => any;
+                };
+            };
+            exporting: {
+                buttons: {
+                    contextButton: {
+                        enabled: boolean;
+                    };
+                };
+            };
+            rangeSelector: {
+                enabled: boolean;
+                inputEnabled: boolean;
+            };
+            scrollbar: {
+                enabled: boolean;
+                barBackgroundColor: string;
+                barBorderColor: string;
+                buttonArrowColor: string;
+                buttonBorderColor: string;
+                buttonBackgroundColor: string;
+                trackBackgroundColor: string;
+                trackBorderColor: string;
+            };
+            navigator: {
+                height: number;
+                outlineColor: string;
+                xAxis: {
+                    gridLineColor: string;
+                };
+                handles: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            } & {
+                adaptToUpdatedData: boolean;
+            };
+            _config: any;
+            subtitle: {
+                text: any;
+            };
+            series: any;
+            _externalComments: import("../../types").ChartKitComment[];
+            _internalComments: import("../../types").ChartKitComment[];
+        };
+        callback: (chart: import("../../types").ExtendedHChart) => void;
+        isError: boolean;
+    } | {
+        isError: boolean;
+        prevData?: undefined;
+        options?: undefined;
+        callback?: undefined;
+    } | null;
+    state: State;
+    private chartComponent;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element | null;
+    reflow: () => void;
+    extendChartInstance: (chart: Chart) => void;
+    getParams: () => StringParams;
+    updateParams: (params: StringParams) => void;
+    private onLoad;
+}
+export {};

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import get from 'lodash/get';
+import { settings } from '../../../../libs';
+import { getGraph } from '../helpers/graph';
+import { initHighchartsModules } from '../helpers/init-highcharts-modules';
+import { withSplitPane } from './withSplitPane/withSplitPane';
+import './HighchartsComponent.css';
+const HighcharsReactWithSplitPane = withSplitPane(HighchartsReact);
+initHighchartsModules();
+export class HighchartsComponent extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            prevData: null,
+            options: null,
+            callback: null,
+            isError: false,
+        };
+        this.chartComponent = React.createRef();
+        this.reflow = () => {
+            if (this.chartComponent.current) {
+                this.chartComponent.current.chart.reflow();
+            }
+        };
+        this.extendChartInstance = (chart) => {
+            chart.updateParams = this.updateParams;
+            chart.getParams = this.getParams;
+        };
+        this.getParams = () => {
+            return this.props.data.params || {};
+        };
+        this.updateParams = (params) => {
+            if (this.props.onChange) {
+                this.props.onChange({ type: 'PARAMS_CHANGED', data: { params } }, { forceUpdate: true }, true);
+            }
+        };
+    }
+    static getDerivedStateFromProps(nextProps, prevState) {
+        var _a;
+        const isCurrentTooltipSplitted = get(prevState, 'options.tooltip.splitTooltip');
+        const tooltipTypeWasChanged = isCurrentTooltipSplitted !== nextProps.splitTooltip;
+        if (nextProps.data === prevState.prevData && !tooltipTypeWasChanged) {
+            return null;
+        }
+        try {
+            const { nonBodyScroll, data: { data, libraryConfig, config, comments }, isMobile, } = nextProps;
+            const entryId = get(nextProps, 'data.entryId');
+            const configOptions = Object.assign({
+                nonBodyScroll,
+                drillDownData: nextProps.data.config.drillDown,
+                splitTooltip: nextProps.splitTooltip,
+                highcharts: libraryConfig,
+                entryId,
+            }, config);
+            const { config: options, callback } = getGraph({
+                options: configOptions,
+                holidays: (_a = settings.get('extra')) === null || _a === void 0 ? void 0 : _a.holidays,
+                data,
+                comments,
+                isMobile,
+            });
+            return {
+                prevData: nextProps.data,
+                options,
+                callback,
+                isError: false,
+            };
+        }
+        catch (error) {
+            const { hoistConfigError, onError } = nextProps;
+            if (onError && !hoistConfigError) {
+                onError({ error });
+            }
+            if (hoistConfigError) {
+                throw error;
+            }
+            return { isError: true };
+        }
+    }
+    componentDidMount() {
+        this.onLoad();
+    }
+    componentDidUpdate() {
+        this.onLoad();
+    }
+    render() {
+        const { isError, options } = this.state;
+        const Component = this.props.splitTooltip ? HighcharsReactWithSplitPane : HighchartsReact;
+        if (isError) {
+            return null;
+        }
+        return (React.createElement(Component, { key: Math.random(), options: options, highcharts: Highcharts, onSplitPaneMountCallback: this.state.callback || undefined, callback: this.extendChartInstance, constructorType: (options === null || options === void 0 ? void 0 : options.useHighStock) ? 'stockChart' : 'chart', containerProps: { className: 'chartkit-graph' }, ref: this.chartComponent }));
+    }
+    onLoad() {
+        if (!this.state.isError && !this.props.splitTooltip) {
+            const data = {
+                widget: this.chartComponent.current ? this.chartComponent.current.chart : null,
+                widgetData: this.state.options,
+                loadedData: this.state.prevData,
+            };
+            if (this.state.callback && data.widget) {
+                this.state.callback(data.widget);
+            }
+            if (this.props.onLoad) {
+                this.props.onLoad({ widget: data.widget });
+            }
+            window.requestAnimationFrame(this.reflow);
+        }
+    }
+}
+HighchartsComponent.defaultProps = {
+    hoistConfigError: true,
+};