From 9011e927a3779d0dfe8058a2801407826ae89557 Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Mon, 8 Jul 2024 16:27:43 +0300
Subject: [PATCH] feat(Highcharts plugin): add props paneSplitOrientation
 (#501)

* feat(Highcharts plugin): add props paneSplitOrientation

* feat: add onSplitPaneOrientationChange callback

* fix: types
---
 .../renderer/components/HighchartsComponent.tsx  |  2 ++
 .../StyledSplitPane/StyledSplitPane.tsx          |  4 +---
 .../components/withSplitPane/withSplitPane.tsx   | 16 ++++++++++------
 src/types/widget.ts                              |  4 ++++
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx b/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx
index 0420660e..1711c035 100644
--- a/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx
+++ b/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx
@@ -163,6 +163,8 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
                 options={options}
                 highcharts={Highcharts}
                 onSplitPaneMountCallback={this.state.callback || undefined}
+                onSplitPaneOrientationChange={this.props.onSplitPaneOrientationChange}
+                paneSplitOrientation={this.props.paneSplitOrientation}
                 callback={this.extendChartInstance}
                 constructorType={options?.useHighStock ? 'stockChart' : 'chart'}
                 containerProps={{className: 'chartkit-graph'}}
diff --git a/src/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.tsx b/src/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.tsx
index d8224d5f..292250c0 100644
--- a/src/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.tsx
+++ b/src/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import SplitPane, {Pane, Split, SplitPaneProps} from 'react-split-pane';
+import SplitPane, {Pane, SplitPaneProps} from 'react-split-pane';
 
 import {cn} from '../../../../../utils/cn';
 
@@ -9,8 +9,6 @@ import './StyledSplitPane.scss';
 const b = cn('styled-split-pane');
 const resizerClassName = b('pane-resizer');
 
-export type PaneSplit = Split;
-
 type Props = SplitPaneProps & {
     paneOneRender: () => React.ReactNode;
     paneTwoRender: () => React.ReactNode;
diff --git a/src/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.tsx b/src/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.tsx
index 534b5d0e..abb1da85 100644
--- a/src/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.tsx
+++ b/src/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.tsx
@@ -109,6 +109,8 @@ export const withSplitPane = <ComposedComponentProps extends {}>(
     type WrapperComponentProps = ComposedComponentProps & {
         onPaneChange?: () => void;
         onSplitPaneMountCallback?: (chart: Highcharts.Chart) => void;
+        paneSplitOrientation?: PaneSplits;
+        onSplitPaneOrientationChange?: (orientation?: PaneSplits) => void;
     };
 
     type WrapperComponentPropsWithForwardedRef = WrapperComponentProps & {
@@ -126,9 +128,10 @@ export const withSplitPane = <ComposedComponentProps extends {}>(
             paneSize: undefined,
             maxPaneSize: undefined,
             paneSplit:
-                window.innerWidth > window.innerHeight
+                this.props.paneSplitOrientation ||
+                (window.innerWidth > window.innerHeight
                     ? PaneSplits.VERTICAL
-                    : PaneSplits.HORIZONTAL,
+                    : PaneSplits.HORIZONTAL),
             componentKey: getRandomCKId(),
         };
 
@@ -236,19 +239,20 @@ export const withSplitPane = <ComposedComponentProps extends {}>(
             const handleResizeAfterOrientationChange = () => {
                 const deviceWidth = window.innerWidth;
                 const deviceHeight = window.innerHeight;
+                const aspectRatioOrientation =
+                    deviceWidth > deviceHeight ? PaneSplits.VERTICAL : PaneSplits.HORIZONTAL;
 
                 this.setState(
                     {
-                        paneSplit:
-                            deviceWidth > deviceHeight
-                                ? PaneSplits.VERTICAL
-                                : PaneSplits.HORIZONTAL,
+                        paneSplit: this.props.paneSplitOrientation || aspectRatioOrientation,
                     },
                     () => {
                         this.setInitialState(true);
                     },
                 );
 
+                this.props.onSplitPaneOrientationChange?.(aspectRatioOrientation);
+
                 window.removeEventListener('resize', handleResizeAfterOrientationChange);
             };
 
diff --git a/src/types/widget.ts b/src/types/widget.ts
index e5f2673c..77f337c9 100644
--- a/src/types/widget.ts
+++ b/src/types/widget.ts
@@ -1,3 +1,5 @@
+import type {Split} from 'react-split-pane';
+
 import type {Highcharts, HighchartsWidgetData, StringParams} from '../plugins/highcharts/types';
 import type {IndicatorWidgetData} from '../plugins/indicator/types';
 import type {CustomTooltipProps, Yagr, YagrWidgetData} from '../plugins/yagr/types';
@@ -21,6 +23,8 @@ export interface ChartKitWidget {
         hoistConfigError?: boolean;
         nonBodyScroll?: boolean;
         splitTooltip?: boolean;
+        paneSplitOrientation?: Split;
+        onSplitPaneOrientationChange?: (orientation: Split) => void;
         onChange?: (
             data: {type: 'PARAMS_CHANGED'; data: {params: StringParams}},
             state: {forceUpdate: boolean},