@gravity-ui/chartkit 7.2.0 → 7.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/plugins/gravity-charts/renderer/withSplitPane/useWithSplitPaneState.d.ts +1 -1
  2. package/build/plugins/gravity-charts/renderer/withSplitPane/useWithSplitPaneState.js +5 -6
  3. package/build/plugins/gravity-charts/renderer/withSplitPane/withSplitPane.js +88 -80
  4. package/package.json +2 -2
package/build/plugins/gravity-charts/renderer/withSplitPane/useWithSplitPaneState.d.ts CHANGED
@@ -12,7 +12,7 @@ type WithSplitPaneState = {
12
12
  minSize?: number;
13
13
  };
14
14
  type UseWithSplitPaneProps = {
15
- container: HTMLDivElement | null;
15
+ containerHeight: number;
16
16
  };
17
17
  export declare function getVerticalSize(): number;
18
18
  export declare function useWithSplitPaneState(props: UseWithSplitPaneProps): WithSplitPaneState;
package/build/plugins/gravity-charts/renderer/withSplitPane/useWithSplitPaneState.js CHANGED
@@ -12,23 +12,22 @@ function getInitialSplit() {
12
12
  export function getVerticalSize() {
13
13
  return window.innerWidth * CHART_SECTION_PERCENTAGE;
14
14
  }
15
- function getInitialSize(split) {
16
- const defaultSize = `calc(100% - ${RESIZER_HEIGHT}px)`;
15
+ function getInitialSize(split, containerHeight) {
16
+ const defaultSize = containerHeight - RESIZER_HEIGHT;
17
17
  if (!IS_WINDOW_AVAILABLE) {
18
18
  return defaultSize;
19
19
  }
20
20
  return split === SplitLayout.VERTICAL ? getVerticalSize() : defaultSize;
21
21
  }
22
22
  export function useWithSplitPaneState(props) {
23
- const { container } = props;
23
+ const { containerHeight } = props;
24
24
  const [tooltipHeight, setTooltipHeight] = React.useState(0);
25
25
  const [split, setSplit] = React.useState(getInitialSplit());
26
- const [size, setSize] = React.useState(getInitialSize(split));
26
+ const [size, setSize] = React.useState(getInitialSize(split, containerHeight));
27
27
  const allowResize = split === SplitLayout.HORIZONTAL;
28
28
  let maxSize;
29
29
  let minSize;
30
- if (IS_WINDOW_AVAILABLE && container && split === SplitLayout.HORIZONTAL) {
31
- const containerHeight = container.getBoundingClientRect().height;
30
+ if (IS_WINDOW_AVAILABLE && split === SplitLayout.HORIZONTAL) {
32
31
  maxSize = containerHeight - RESIZER_HEIGHT - tooltipHeight;
33
32
  minSize = containerHeight / 3;
34
33
  }
package/build/plugins/gravity-charts/renderer/withSplitPane/withSplitPane.js CHANGED
@@ -8,93 +8,101 @@ import { isScreenOrientationEventType } from '../../../../utils';
8
8
  import { TooltipContent } from './TooltipContent';
9
9
  import { RESIZER_HEIGHT, getVerticalSize, useWithSplitPaneState } from './useWithSplitPaneState';
10
10
  const tooltipPaneStyles = { overflow: 'auto' };
11
- export function withSplitPane(ChartComponent) {
12
- const componentName = getComponentName(ChartComponent);
13
- const component = React.forwardRef(function WithSplitPaneComponent(props, _ref) {
14
- var _a;
15
- const { data } = props, restProps = __rest(props, ["data"]);
16
- const containerRef = React.useRef(null);
17
- const tooltipContainerRef = React.useRef(null);
18
- const chartRef = React.useRef(null);
19
- const tooltipRef = React.useRef(null);
20
- const { allowResize, minSize, maxSize, tooltipHeight, split, size, setTooltipHeight, setSplit, setSize, } = useWithSplitPaneState({
21
- container: containerRef.current,
22
- });
23
- const prevTooltipHeight = usePrevious(tooltipHeight);
24
- const prevSplit = usePrevious(split);
25
- if (prevSplit && split !== prevSplit && split === SplitLayout.VERTICAL) {
26
- setSize(getVerticalSize());
11
+ const SplitPaneContent = (props) => {
12
+ var _a;
13
+ const { data, height, ChartComponent } = props, restProps = __rest(props, ["data", "height", "ChartComponent"]);
14
+ const tooltipContainerRef = React.useRef(null);
15
+ const chartRef = React.useRef(null);
16
+ const tooltipRef = React.useRef(null);
17
+ const { allowResize, minSize, maxSize, tooltipHeight, split, size, setTooltipHeight, setSplit, setSize, } = useWithSplitPaneState({
18
+ containerHeight: height,
19
+ });
20
+ const prevTooltipHeight = usePrevious(tooltipHeight);
21
+ const prevSplit = usePrevious(split);
22
+ if (prevSplit && split !== prevSplit && split === SplitLayout.VERTICAL) {
23
+ setSize(getVerticalSize());
24
+ }
25
+ else if (split === SplitLayout.HORIZONTAL &&
26
+ prevTooltipHeight === 0 &&
27
+ tooltipHeight !== prevTooltipHeight) {
28
+ const containerHeight = height;
29
+ if (containerHeight - RESIZER_HEIGHT === size) {
30
+ setSize(containerHeight - RESIZER_HEIGHT - tooltipHeight);
31
+ (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
27
32
  }
28
- else if (split === SplitLayout.HORIZONTAL &&
29
- containerRef.current &&
30
- prevTooltipHeight === 0 &&
31
- tooltipHeight !== prevTooltipHeight) {
32
- const containerHeight = containerRef.current.getBoundingClientRect().height;
33
- if (containerHeight - RESIZER_HEIGHT === size) {
34
- setSize(containerHeight - RESIZER_HEIGHT - tooltipHeight);
35
- (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
36
- }
33
+ }
34
+ const handleTooltipContentResize = React.useCallback(() => {
35
+ if (!tooltipContainerRef.current) {
36
+ return;
37
37
  }
38
- const handleTooltipContentResize = React.useCallback(() => {
39
- if (!tooltipContainerRef.current) {
40
- return;
41
- }
42
- const nextTooltipHeight = tooltipContainerRef.current.getBoundingClientRect().height;
43
- setTooltipHeight(nextTooltipHeight);
44
- }, [setTooltipHeight]);
45
- useResizeObserver({
46
- ref: tooltipContainerRef,
47
- onResize: handleTooltipContentResize,
48
- });
49
- const resultData = React.useMemo(() => {
50
- var _a, _b, _c;
51
- const userPointerMoveHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.pointermove;
52
- const pointerMoveHandler = (pointerMoveData, event) => {
53
- var _a;
54
- (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.redraw(pointerMoveData);
55
- userPointerMoveHandler === null || userPointerMoveHandler === void 0 ? void 0 : userPointerMoveHandler(pointerMoveData, event);
56
- };
57
- return Object.assign(Object.assign({}, data), { chart: Object.assign(Object.assign({}, data.chart), { events: Object.assign(Object.assign({}, (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events), { pointermove: pointerMoveHandler }) }), tooltip: Object.assign(Object.assign({}, data.tooltip), { enabled: false }) });
58
- }, [data]);
59
- const handleOrientationChange = React.useCallback(() => {
60
- const deviceWidth = window.innerWidth;
61
- const deviceHeight = window.innerHeight;
62
- const nextSplit = deviceWidth > deviceHeight ? SplitLayout.VERTICAL : SplitLayout.HORIZONTAL;
63
- setSplit(nextSplit);
64
- }, [setSplit]);
65
- const handleScreenOrientationChange = React.useCallback((e) => {
66
- const type = e.target && 'type' in e.target && e.target.type;
67
- if (!isScreenOrientationEventType(type)) {
68
- return;
69
- }
70
- setSplit(mapScreenOrientationTypeToSplitLayout(type));
71
- }, [setSplit]);
72
- const handleSizeChange = React.useCallback((nextSize) => {
38
+ const nextTooltipHeight = tooltipContainerRef.current.getBoundingClientRect().height;
39
+ setTooltipHeight(nextTooltipHeight);
40
+ }, [setTooltipHeight]);
41
+ useResizeObserver({
42
+ ref: tooltipContainerRef,
43
+ onResize: handleTooltipContentResize,
44
+ });
45
+ const resultData = React.useMemo(() => {
46
+ var _a, _b, _c;
47
+ const userPointerMoveHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.pointermove;
48
+ const pointerMoveHandler = (pointerMoveData, event) => {
73
49
  var _a;
74
- (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
75
- if (split === SplitLayout.HORIZONTAL) {
76
- setSize(nextSize);
77
- }
78
- }, [split, setSize]);
79
- React.useLayoutEffect(() => {
50
+ (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.redraw(pointerMoveData);
51
+ userPointerMoveHandler === null || userPointerMoveHandler === void 0 ? void 0 : userPointerMoveHandler(pointerMoveData, event);
52
+ };
53
+ return Object.assign(Object.assign({}, data), { chart: Object.assign(Object.assign({}, data.chart), { events: Object.assign(Object.assign({}, (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events), { pointermove: pointerMoveHandler }) }), tooltip: Object.assign(Object.assign({}, data.tooltip), { enabled: false }) });
54
+ }, [data]);
55
+ const handleOrientationChange = React.useCallback(() => {
56
+ const deviceWidth = window.innerWidth;
57
+ const deviceHeight = window.innerHeight;
58
+ const nextSplit = deviceWidth > deviceHeight ? SplitLayout.VERTICAL : SplitLayout.HORIZONTAL;
59
+ setSplit(nextSplit);
60
+ }, [setSplit]);
61
+ const handleScreenOrientationChange = React.useCallback((e) => {
62
+ const type = e.target && 'type' in e.target && e.target.type;
63
+ if (!isScreenOrientationEventType(type)) {
64
+ return;
65
+ }
66
+ setSplit(mapScreenOrientationTypeToSplitLayout(type));
67
+ }, [setSplit]);
68
+ const handleSizeChange = React.useCallback((nextSize) => {
69
+ var _a;
70
+ (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.reflow();
71
+ if (split === SplitLayout.HORIZONTAL) {
72
+ setSize(nextSize);
73
+ }
74
+ }, [split, setSize]);
75
+ React.useLayoutEffect(() => {
76
+ if (IS_SCREEN_ORIENTATION_AVAILABLE) {
77
+ screen.orientation.addEventListener('change', handleScreenOrientationChange);
78
+ }
79
+ else if (IS_WINDOW_AVAILABLE) {
80
+ window.addEventListener('orientationchange', handleOrientationChange);
81
+ }
82
+ return () => {
80
83
  if (IS_SCREEN_ORIENTATION_AVAILABLE) {
81
- screen.orientation.addEventListener('change', handleScreenOrientationChange);
84
+ screen.orientation.removeEventListener('change', handleScreenOrientationChange);
82
85
  }
83
86
  else if (IS_WINDOW_AVAILABLE) {
84
- window.addEventListener('orientationchange', handleOrientationChange);
87
+ window.removeEventListener('orientationchange', handleOrientationChange);
88
+ }
89
+ };
90
+ }, [handleOrientationChange, handleScreenOrientationChange]);
91
+ return (React.createElement(StyledSplitPane, { allowResize: allowResize, maxSize: maxSize, minSize: minSize, size: size, split: split, onChange: handleSizeChange, paneOneRender: () => React.createElement(ChartComponent, Object.assign({}, restProps, { ref: chartRef, data: resultData })), paneTwoRender: () => (React.createElement("div", { ref: tooltipContainerRef },
92
+ React.createElement(TooltipContent, { ref: tooltipRef, renderer: resultData.tooltip.renderer }))), pane2Style: tooltipPaneStyles }));
93
+ };
94
+ export function withSplitPane(ChartComponent) {
95
+ const componentName = getComponentName(ChartComponent);
96
+ const component = React.forwardRef(function WithSplitPaneComponent(props, _ref) {
97
+ const containerRef = React.useRef(null);
98
+ const [height, setHeight] = React.useState(0);
99
+ React.useEffect(() => {
100
+ var _a;
101
+ if (containerRef.current) {
102
+ setHeight((_a = containerRef.current.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0);
85
103
  }
86
- return () => {
87
- if (IS_SCREEN_ORIENTATION_AVAILABLE) {
88
- screen.orientation.removeEventListener('change', handleScreenOrientationChange);
89
- }
90
- else if (IS_WINDOW_AVAILABLE) {
91
- window.removeEventListener('orientationchange', handleOrientationChange);
92
- }
93
- };
94
- }, [handleOrientationChange, handleScreenOrientationChange]);
95
- return (React.createElement("div", { ref: containerRef, style: { position: 'relative', height: '100%' } },
96
- React.createElement(StyledSplitPane, { allowResize: allowResize, maxSize: maxSize, minSize: minSize, size: size, split: split, onChange: handleSizeChange, paneOneRender: () => (React.createElement(ChartComponent, Object.assign({}, restProps, { ref: chartRef, data: resultData }))), paneTwoRender: () => (React.createElement("div", { ref: tooltipContainerRef },
97
- React.createElement(TooltipContent, { ref: tooltipRef, renderer: resultData.tooltip.renderer }))), pane2Style: tooltipPaneStyles })));
104
+ }, []);
105
+ return (React.createElement("div", { ref: containerRef, style: { position: 'relative', height: '100%' } }, height ? (React.createElement(SplitPaneContent, Object.assign({ ChartComponent: ChartComponent }, props, { height: height }))) : null));
98
106
  });
99
107
  component.displayName = `withSplitPane(${componentName})`;
100
108
  return component;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/chartkit",
3
- "version": "7.2.0",
3
+ "version": "7.3.1",
4
4
  "description": "React component used to render charts based on any sources you need",
5
5
  "license": "MIT",
6
6
  "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -47,7 +47,7 @@
47
47
  ],
48
48
  "dependencies": {
49
49
  "@bem-react/classname": "^1.6.0",
50
- "@gravity-ui/charts": "^1.2.0",
50
+ "@gravity-ui/charts": "^1.3.0",
51
51
  "@gravity-ui/date-utils": "^2.1.0",
52
52
  "@gravity-ui/i18n": "^1.0.0",
53
53
  "@gravity-ui/yagr": "^4.8.5",