feat(Highcharts plugin): add props paneSplitOrientation and onSplitPaneOrientationChange

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'}}

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;

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);
             };
 

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},