@gravity-ui/chartkit 0.9.1 → 0.10.1

package/build/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.css

@@ -0,0 +1,50 @@
+.styled-split-pane__pane-resizer {
+  background: var(--yc-color-base-generic);
+  z-index: 1;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.styled-split-pane__pane-resizer_hovered {
+  opacity: 0.5;
+}
+
+.styled-split-pane__pane-resizer.horizontal {
+  height: 24px;
+  min-height: 24px;
+  width: 100%;
+}
+
+.styled-split-pane__pane-resizer.horizontal:before {
+  content: "";
+  width: 28px;
+  margin-left: -14px;
+  height: 1px;
+  background-color: var(--highcarts-navigator-body);
+  left: 50%;
+  top: 10px;
+  position: absolute;
+}
+
+.styled-split-pane__pane-resizer.horizontal:after {
+  content: "";
+  width: 28px;
+  margin-left: -14px;
+  height: 1px;
+  background-color: var(--highcarts-navigator-body);
+  left: 50%;
+  top: 13px;
+  position: absolute;
+}
+
+.styled-split-pane__pane-resizer.vertical {
+  height: 100%;
+  width: 1px;
+  min-width: 1px;
+  background: var(--data-table-border-color);
+}
+
+.styled-split-pane .Pane {
+  overflow: auto;
+  height: 100%;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Split, SplitPaneProps } from 'react-split-pane';
+import './StyledSplitPane.css';
+export declare type PaneSplit = Split;
+declare type Props = SplitPaneProps & {
+    paneOneRender: () => React.ReactNode;
+    paneTwoRender: () => React.ReactNode;
+};
+export declare const StyledSplitPane: ({ paneOneRender, paneTwoRender, ...splitPaneProps }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+import { __rest } from "tslib";
+import React from 'react';
+import SplitPane, { Pane } from 'react-split-pane';
+import block from 'bem-cn-lite';
+import './StyledSplitPane.css';
+const b = block('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;
+        const resizer = (_b = (_a = splitPaneRef.current) === null || _a === void 0 ? void 0 : _a.splitPane) === null || _b === void 0 ? void 0 : _b.getElementsByClassName(resizerClassName)[0];
+        const hoveredClassName = `${resizerClassName}_hovered`;
+        const onTouchStart = () => {
+            resizer === null || resizer === void 0 ? void 0 : resizer.classList.add(hoveredClassName);
+        };
+        const onTouchEnd = () => {
+            resizer === null || resizer === void 0 ? void 0 : resizer.classList.remove(hoveredClassName);
+        };
+        resizer === null || resizer === void 0 ? void 0 : resizer.addEventListener('touchstart', onTouchStart);
+        resizer === null || resizer === void 0 ? void 0 : resizer.addEventListener('touchend', onTouchEnd);
+        return function cleanup() {
+            resizer === null || resizer === void 0 ? void 0 : resizer.removeEventListener('touchstart', onTouchStart);
+            resizer === null || resizer === void 0 ? void 0 : resizer.removeEventListener('touchend', onTouchEnd);
+        };
+    }, []);
+    return (React.createElement(SplitPane, Object.assign({}, splitPaneProps, { ref: splitPaneRef, className: b(), resizerClassName: resizerClassName }),
+        React.createElement(Pane, null, paneOneRender()),
+        React.createElement(Pane, null, paneTwoRender())));
+};

package/build/plugins/highcharts/renderer/components/withSplitPane/WithSplitPane.css

@@ -0,0 +1,4 @@
+.with-split-pane {
+  position: relative;
+  height: 100%;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Highcharts } from '../../../types';
+import './WithSplitPane.css';
+export declare const withSplitPane: <ComposedComponentProps extends {}>(ComposedComponent: React.ComponentType<ComposedComponentProps>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ComposedComponentProps & {
+    onPaneChange?: (() => void) | undefined;
+    onSplitPaneMountCallback?: ((chart: Highcharts.Chart) => void) | undefined;
+} & {
+    current: any;
+    forwardedRef: React.Ref<ComposedComponentProps>;
+}> & React.RefAttributes<ComposedComponentProps>>;

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { get, debounce } from 'lodash';
+import { chartTypesWithoutCrosshair } from '../../helpers/config/config';
+import { StyledSplitPane } from '../StyledSplitPane/StyledSplitPane';
+import './WithSplitPane.css';
+const b = block('with-split-pane');
+const PANE_RESIZER_HEIGHT = 24;
+const CHART_SECTION_PERCENTAGE = 0.6;
+const MIN_TOOLTIP_SECTION_HEIGHT = 62;
+const seriesTypesNeedsOnlyHoverState = ['line', 'area', 'arearange', 'bubble', 'map'];
+const deviceWithNavBarHeight = window.innerHeight;
+function getPointsForInitialRefresh(chart) {
+    let minX = Infinity;
+    let points = null;
+    const type = get(chart, 'userOptions.chart.type');
+    if (type === 'streamgraph') {
+        points = chart.series[0].points[chart.series[0].points.length - 1];
+    }
+    else if (chart.series.length === 1) {
+        const series = chart.series[0];
+        const seriesType = (series && series.type) || (chart.options.chart && chart.options.chart.type);
+        points =
+            seriesType === 'sankey' || seriesType === 'map'
+                ? chart.series[0].points[0]
+                : [chart.series[0].points[0]];
+    }
+    else {
+        points = chart.series
+            .map((series) => {
+            if (series.points[0]) {
+                minX = Math.min(minX, series.points[0].x);
+            }
+            return series.points[0];
+        })
+            .filter((point) => {
+            return point && point.x === minX;
+        });
+    }
+    return points;
+}
+function forceHoverState(chart, activePoints) {
+    const chartType = get(chart, 'userOptions.chart.type');
+    if (chartType === 'pie') {
+        chart.tooltip.refresh(activePoints);
+        chart.pointsForInitialRefresh = activePoints;
+    }
+    else if (chart.series.length === 1) {
+        const series = chart.series[0];
+        const seriesType = (series && series.type) || (chart.options.chart && chart.options.chart.type);
+        if (seriesType && seriesTypesNeedsOnlyHoverState.indexOf(seriesType)) {
+            chart.series[0].points[0].setState('hover');
+        }
+        else {
+            for (let i = chart.series[0].points.length - 1; i >= 0; i--) {
+                chart.series[0].points[i].setState(i ? 'inactive' : 'hover');
+            }
+        }
+    }
+    if (chartTypesWithoutCrosshair.indexOf(chartType) === -1) {
+        const point = Array.isArray(activePoints) ? activePoints[0] : activePoints;
+        chart.xAxis[0].drawCrosshair(undefined, point);
+        chart.yAxis[0].drawCrosshair(undefined, point);
+    }
+}
+var PaneSplits;
+(function (PaneSplits) {
+    PaneSplits["VERTICAL"] = "vertical";
+    PaneSplits["HORIZONTAL"] = "horizontal";
+})(PaneSplits || (PaneSplits = {}));
+export const withSplitPane = (ComposedComponent) => {
+    class WithSplitPane extends React.PureComponent {
+        constructor(props) {
+            super(props);
+            this.state = {
+                paneSize: undefined,
+                maxPaneSize: undefined,
+                paneSplit: window.innerWidth > window.innerHeight
+                    ? PaneSplits.VERTICAL
+                    : PaneSplits.HORIZONTAL,
+            };
+            this.tooltipContainerRef = React.createRef();
+            this.rootRef = React.createRef();
+            this.setInitialState = (waitForFirstRedraw = false) => {
+                // @ts-ignore
+                if (!this.props.forwardedRef.current) {
+                    return;
+                }
+                // @ts-ignore
+                const { chart } = this.props.forwardedRef.current;
+                const points = getPointsForInitialRefresh(chart);
+                chart.tooltip.refresh(points);
+                chart.pointsForInitialRefresh = points;
+                const callback = () => {
+                    forceHoverState(chart, points);
+                };
+                if (this.state.paneSplit === PaneSplits.HORIZONTAL) {
+                    this.setInitialPaneSize(callback);
+                }
+                else {
+                    if (waitForFirstRedraw) {
+                        chart.afterRedrawCallback = callback;
+                    }
+                    else {
+                        callback();
+                    }
+                }
+            };
+            this.afterCreateCallback = (chart) => {
+                chart.tooltip.splitTooltip = true;
+                chart.tooltip.getTooltipContainer = this.getTooltipContainer;
+            };
+            this.setInitialPaneSize = (callback) => {
+                if (!this.tooltipContainerRef.current || !this.rootRef.current) {
+                    return;
+                }
+                const tooltipContentHeight = this.tooltipContainerRef.current.getBoundingClientRect().height;
+                const rootHeight = this.rootRef.current.getBoundingClientRect().height;
+                const maxPaneSize = rootHeight - MIN_TOOLTIP_SECTION_HEIGHT;
+                const currentDeviceHeight = window.innerHeight;
+                const otherParticipantsHeight = PANE_RESIZER_HEIGHT + (currentDeviceHeight - deviceWithNavBarHeight) + 1;
+                const paneSize = rootHeight - tooltipContentHeight - otherParticipantsHeight;
+                this.setState({
+                    paneSize: paneSize > maxPaneSize ? maxPaneSize : paneSize,
+                    maxPaneSize,
+                }, () => {
+                    this.reflow();
+                    setTimeout(callback, 0);
+                });
+            };
+            this.handleOrientationChange = () => {
+                const handleResizeAfterOrientationChange = () => {
+                    const deviceWidth = window.innerWidth;
+                    const deviceHeight = window.innerHeight;
+                    this.setState({
+                        paneSplit: deviceWidth > deviceHeight
+                            ? PaneSplits.VERTICAL
+                            : PaneSplits.HORIZONTAL,
+                    }, () => {
+                        this.setInitialState(true);
+                    });
+                    window.removeEventListener('resize', handleResizeAfterOrientationChange);
+                };
+                window.addEventListener('resize', handleResizeAfterOrientationChange);
+            };
+            this.reflow = () => {
+                // @ts-ignore
+                if (this.props.forwardedRef.current) {
+                    // @ts-ignore
+                    this.props.forwardedRef.current.chart.reflow();
+                }
+            };
+            this.handlePaneChange = (size) => {
+                this.setState({ paneSize: size });
+                // @ts-ignore
+                if (this.props.forwardedRef && this.props.forwardedRef.current) {
+                    if (this.props.onPaneChange) {
+                        this.props.onPaneChange();
+                    }
+                    this.reflow();
+                    // @ts-ignore
+                    const { chart } = this.props.forwardedRef.current;
+                    if (chart && chart.pointsForInitialRefresh) {
+                        const points = getPointsForInitialRefresh(chart);
+                        forceHoverState(chart, points);
+                    }
+                }
+            };
+            this.getTooltipContainer = () => {
+                return this.tooltipContainerRef.current;
+            };
+            this.debouncedHandlePaneChange = debounce(this.handlePaneChange, 500);
+        }
+        componentDidMount() {
+            window.addEventListener('orientationchange', this.handleOrientationChange);
+            // @ts-ignore
+            if (!this.props.forwardedRef.current) {
+                return;
+            }
+            if (this.props.onSplitPaneMountCallback) {
+                // @ts-ignore
+                this.props.onSplitPaneMountCallback(this.props.forwardedRef.current.chart);
+            }
+            this.setInitialState();
+        }
+        componentWillUnmount() {
+            window.removeEventListener('orientationchange', this.handleOrientationChange);
+        }
+        render() {
+            return (React.createElement("div", { className: b(), ref: this.rootRef }, this.state.paneSplit === PaneSplits.VERTICAL
+                ? this.renderVertical()
+                : this.renderHorizontal()));
+        }
+        renderHorizontal() {
+            const { paneSize, maxPaneSize } = this.state;
+            const thirdOfViewport = window.innerHeight / 3;
+            return (React.createElement(StyledSplitPane, { split: "horizontal", onChange: this.debouncedHandlePaneChange, minSize: thirdOfViewport, maxSize: maxPaneSize || undefined, size: paneSize, paneOneRender: () => (React.createElement(ComposedComponent, Object.assign({}, this.props, { ref: this.props.forwardedRef, callback: this.afterCreateCallback }))), paneTwoRender: () => React.createElement("div", { ref: this.tooltipContainerRef }) }));
+        }
+        renderVertical() {
+            const paneSize = window.innerWidth * CHART_SECTION_PERCENTAGE;
+            return (React.createElement(StyledSplitPane, { split: "vertical", allowResize: false, size: paneSize, paneOneRender: () => (React.createElement(ComposedComponent, Object.assign({}, this.props, { ref: this.props.forwardedRef, callback: this.afterCreateCallback }))), paneTwoRender: () => React.createElement("div", { ref: this.tooltipContainerRef }) }));
+        }
+    }
+    return React.forwardRef((props, ref) => {
+        return React.createElement(WithSplitPane, Object.assign({ forwardedRef: ref }, props));
+    });
+};

package/build/plugins/highcharts/renderer/helpers/add-holidays.d.ts

@@ -0,0 +1 @@
+export function addHolidays(chart: any, holidays: any): boolean;

package/build/plugins/highcharts/renderer/helpers/add-holidays.js

@@ -0,0 +1,43 @@
+const HALF_DAY = 43200000;
+const calculateConsistentClosestPointRange = (type, closestPointRange, series) => {
+    const isDatetimeAxis = type === 'datetime';
+    return (isDatetimeAxis &&
+        closestPointRange === 86400000 &&
+        series.every(({ xData }) => {
+            let consistent = true;
+            for (let i = 2; i < xData.length - 1; i++) {
+                if ((xData[i] - xData[i - 1]) % closestPointRange !== 0) {
+                    consistent = false;
+                    break;
+                }
+            }
+            return consistent;
+        }));
+};
+export function addHolidays(chart, holidays) {
+    const { userOptions: { _config: { region: configRegion = 'TOT' } = {} }, xAxis: [xAxis], } = chart;
+    const { dataMin, dataMax, closestPointRange, series } = xAxis;
+    const isConsistentClosestPointRange = calculateConsistentClosestPointRange(xAxis.options.type, closestPointRange, series);
+    let needRedraw = false;
+    if (isConsistentClosestPointRange) {
+        const region = configRegion.toLowerCase();
+        for (let passed = 0; dataMin + passed <= dataMax; passed += closestPointRange) {
+            const timestamp = dataMin + passed;
+            const pointDate = Number(chart.time.dateFormat('%Y%m%d', timestamp));
+            const holidayByRegion = holidays.holiday[region];
+            const weekendByRegion = holidays.weekend[region];
+            if ((holidayByRegion && holidayByRegion[pointDate]) ||
+                (weekendByRegion && weekendByRegion[pointDate])) {
+                const bandStart = timestamp - HALF_DAY;
+                const bandStop = timestamp + HALF_DAY;
+                xAxis.addPlotBand({
+                    color: 'var(--highcharts-holiday-band)',
+                    from: bandStart,
+                    to: bandStop,
+                });
+                needRedraw = true;
+            }
+        }
+    }
+    return needRedraw;
+}

package/build/plugins/highcharts/renderer/helpers/comments/drawing.d.ts

@@ -0,0 +1,11 @@
+export function extendComment({ meta, ...rest }: {
+    [x: string]: any;
+    meta: any;
+}, chart: any): any;
+export function drawComments(chart: any, comments: any, settings: any, force: any): void;
+export function drawOnlyRendererComments(chart: any, comments: any[] | undefined, settings: any): void;
+export function hideComments(chart: any, comments: any, settings: any, force: any): void;
+export function getCommentsOnLine(xLine: any, comments: any, chart: any): {
+    xComments: any[];
+    xyComments: any[];
+};