@gravity-ui/chartkit 7.40.0 → 7.41.0

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/TooltipContent.d.ts +1 -1
  2. package/build/plugins/gravity-charts/renderer/withSplitPane/TooltipContent.js +3 -2
  3. package/build/plugins/gravity-charts/renderer/withSplitPane/withSplitPane.js +17 -6
  4. package/package.json +2 -2
package/build/plugins/gravity-charts/renderer/withSplitPane/TooltipContent.d.ts CHANGED
@@ -3,6 +3,6 @@ import type { ChartTooltipContentProps } from '@gravity-ui/charts';
3
3
  export type TooltipContentRef = {
4
4
  redraw: (updates?: Omit<ChartTooltipContentProps, 'renderer'>) => void;
5
5
  };
6
- type TooltipContentProps = Pick<ChartTooltipContentProps, 'renderer'>;
6
+ type TooltipContentProps = Pick<ChartTooltipContentProps, 'renderer' | 'headerFormat' | 'valueFormat' | 'rowRenderer' | 'totals'>;
7
7
  export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<TooltipContentRef>>;
8
8
  export {};
package/build/plugins/gravity-charts/renderer/withSplitPane/TooltipContent.js CHANGED
@@ -1,12 +1,13 @@
1
+ import { __rest } from "tslib";
1
2
  import React from 'react';
2
3
  import { ChartTooltipContent } from '@gravity-ui/charts';
3
4
  export const TooltipContent = React.forwardRef(function TooltipContent(props, forwardedRef) {
4
- const { renderer } = props;
5
+ const { renderer } = props, tooltipConfigProps = __rest(props, ["renderer"]);
5
6
  const [tooltipProps, setTooltipProps] = React.useState();
6
7
  React.useImperativeHandle(forwardedRef, () => ({
7
8
  redraw(updates) {
8
9
  setTooltipProps(updates);
9
10
  },
10
11
  }), []);
11
- return React.createElement(ChartTooltipContent, Object.assign({}, tooltipProps, { renderer: renderer }));
12
+ return (React.createElement(ChartTooltipContent, Object.assign({}, tooltipConfigProps, tooltipProps, { renderer: renderer })));
12
13
  });
package/build/plugins/gravity-charts/renderer/withSplitPane/withSplitPane.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import React from 'react';
3
+ import { getDefaultTooltipHeaderFormat } from '@gravity-ui/charts';
3
4
  import { getComponentName, useResizeObserver } from '@gravity-ui/uikit';
4
5
  import isEmpty from 'lodash/isEmpty';
5
6
  import { SplitLayout, StyledSplitPane, mapScreenOrientationTypeToSplitLayout, } from '../../../../components/SplitPane';
@@ -10,7 +11,7 @@ import { TooltipContent } from './TooltipContent';
10
11
  import { RESIZER_HEIGHT, getVerticalSize, useWithSplitPaneState } from './useWithSplitPaneState';
11
12
  const tooltipPaneStyles = { overflow: 'auto' };
12
13
  const SplitPaneContent = (props) => {
13
- var _a;
14
+ var _a, _b;
14
15
  const { data, height, ChartComponent } = props, restProps = __rest(props, ["data", "height", "ChartComponent"]);
15
16
  const tooltipContainerRef = React.useRef(null);
16
17
  const chartRef = React.useRef(null);
@@ -34,23 +35,33 @@ const SplitPaneContent = (props) => {
34
35
  }
35
36
  }
36
37
  const handleTooltipContentResize = React.useCallback(() => {
37
- if (!tooltipContainerRef.current) {
38
+ if (!tooltipContainerRef.current || split !== SplitLayout.HORIZONTAL) {
38
39
  return;
39
40
  }
40
41
  const nextTooltipHeight = tooltipContainerRef.current.getBoundingClientRect().height;
41
42
  setTooltipHeight(nextTooltipHeight);
42
- }, [setTooltipHeight]);
43
+ }, [setTooltipHeight, split]);
43
44
  useResizeObserver({
44
45
  ref: tooltipContainerRef,
45
46
  onResize: handleTooltipContentResize,
46
47
  });
48
+ const headerFormat = React.useMemo(() => {
49
+ var _a, _b;
50
+ return ((_b = (_a = data.tooltip) === null || _a === void 0 ? void 0 : _a.headerFormat) !== null && _b !== void 0 ? _b : getDefaultTooltipHeaderFormat({
51
+ seriesData: data.series.data,
52
+ yAxes: data.yAxis,
53
+ xAxis: data.xAxis,
54
+ }));
55
+ }, [(_b = data.tooltip) === null || _b === void 0 ? void 0 : _b.headerFormat, data.series.data, data.yAxis, data.xAxis]);
47
56
  const resultData = React.useMemo(() => {
48
57
  var _a, _b, _c;
49
58
  const userPointerMoveHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.pointermove;
50
59
  const pointerMoveHandler = (pointerMoveData, event) => {
51
60
  var _a;
52
- shouldShowTooltip.current = !isEmpty(pointerMoveData === null || pointerMoveData === void 0 ? void 0 : pointerMoveData.hovered);
53
- (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.redraw(pointerMoveData);
61
+ if (!isEmpty(pointerMoveData === null || pointerMoveData === void 0 ? void 0 : pointerMoveData.hovered)) {
62
+ shouldShowTooltip.current = true;
63
+ (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.redraw(pointerMoveData);
64
+ }
54
65
  userPointerMoveHandler === null || userPointerMoveHandler === void 0 ? void 0 : userPointerMoveHandler(pointerMoveData, event);
55
66
  };
56
67
  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 }) });
@@ -92,7 +103,7 @@ const SplitPaneContent = (props) => {
92
103
  };
93
104
  }, [handleOrientationChange, handleScreenOrientationChange]);
94
105
  return (React.createElement(StyledSplitPane, { allowResize: allowResize, maxSize: maxSize, minSize: minSize, size: size, split: split, onChange: handleSizeChange, resizerStyle: shouldShowTooltip.current ? undefined : { display: 'none' }, paneOneRender: () => React.createElement(ChartComponent, Object.assign({}, restProps, { ref: chartRef, data: resultData })), paneTwoRender: () => (React.createElement("div", { ref: tooltipContainerRef },
95
- React.createElement(TooltipContent, { ref: tooltipRef, renderer: resultData.tooltip.renderer }))), pane2Style: tooltipPaneStyles }));
106
+ React.createElement(TooltipContent, { ref: tooltipRef, renderer: resultData.tooltip.renderer, headerFormat: headerFormat, valueFormat: resultData.tooltip.valueFormat, rowRenderer: resultData.tooltip.rowRenderer, totals: resultData.tooltip.totals }))), pane2Style: tooltipPaneStyles }));
96
107
  };
97
108
  export function withSplitPane(ChartComponent) {
98
109
  const componentName = getComponentName(ChartComponent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/chartkit",
3
- "version": "7.40.0",
3
+ "version": "7.41.0",
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.37.1",
50
+ "@gravity-ui/charts": "^1.38.2",
51
51
  "@gravity-ui/date-utils": "^2.1.0",
52
52
  "@gravity-ui/i18n": "^1.0.0",
53
53
  "@gravity-ui/yagr": "^4.11.0",