@gravity-ui/charts 0.1.1 → 0.3.0

package/README.md

@@ -1,5 +1,8 @@
 # @gravity-ui/charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
+> [!WARNING]
+> The library may have major changes in minor releases while it is on version `0.*.*`.
+
 ## Install
 
 ```shell

package/dist/cjs/components/ChartInner/index.js

@@ -17,7 +17,7 @@ import './styles.css';
 const b = block('d3');
 const THROTTLE_DELAY = 50;
 export const ChartInner = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
@@ -73,38 +73,46 @@ export const ChartInner = (props) => {
         htmlLayout: htmlLayerRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
+    const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
     React.useEffect(() => {
         if (clickHandler) {
             dispatcher.on('click-chart', clickHandler);
         }
+        if (pointerMoveHandler) {
+            dispatcher.on('hover-shape.chart', (...args) => {
+                const [hoverData, _position, event] = args;
+                pointerMoveHandler(hoverData, event);
+            });
+        }
         return () => {
             dispatcher.on('click-chart', null);
+            dispatcher.on('hover-shape.chart', null);
         };
-    }, [dispatcher, clickHandler]);
+    }, [dispatcher, clickHandler, pointerMoveHandler]);
     const boundsOffsetTop = chart.margin.top;
     // We only need to consider the width of the first left axis
     const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
-    const handleMouseMove = (event) => {
+    const handlePointerMove = (event) => {
         const [pointerX, pointerY] = pointer(event, svgRef.current);
         const x = pointerX - boundsOffsetLeft;
         const y = pointerY - boundsOffsetTop;
         if (isOutsideBounds(x, y)) {
-            dispatcher.call('hover-shape', {}, undefined);
+            dispatcher.call('hover-shape', {}, undefined, undefined, event);
             return;
         }
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
         });
-        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY], event);
     };
-    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        throttledHandleMouseMove.cancel();
-        dispatcher.call('hover-shape', {}, undefined);
+    const throttledHandlePointerMove = throttle(handlePointerMove, THROTTLE_DELAY);
+    const handlePointerLeave = (event) => {
+        throttledHandlePointerMove.cancel();
+        dispatcher.call('hover-shape', {}, undefined, undefined, event);
     };
     const handleChartClick = React.useCallback((event) => {
         const [pointerX, pointerY] = pointer(event, svgRef.current);
@@ -124,7 +132,7 @@ export const ChartInner = (props) => {
         dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
     }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleChartClick },
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

package/dist/cjs/index.d.ts

@@ -1,2 +1,3 @@
+export { CustomShapeRenderer } from './utils';
 export * from './components';
 export type { ChartData } from './types';

package/dist/cjs/index.js

@@ -1 +1,2 @@
+export { CustomShapeRenderer } from './utils';
 export * from './components';

package/dist/cjs/types/chart/chart.d.ts

@@ -1,15 +1,19 @@
+import type { MeaningfulAny } from '../misc';
 export type ChartMargin = {
     top: number;
     right: number;
     bottom: number;
     left: number;
 };
+type ChartEventData = {
+    point: MeaningfulAny;
+    series: MeaningfulAny;
+};
 export type ChartOptions = {
     margin?: Partial<ChartMargin>;
     events?: {
-        click?: (data: {
-            point: unknown;
-            series: unknown;
-        }, event: PointerEvent) => void;
+        click?: (data: ChartEventData, event: PointerEvent) => void;
+        pointermove?: (data: ChartEventData | undefined, event: PointerEvent) => void;
     };
 };
+export {};

package/dist/esm/components/ChartInner/index.js

@@ -17,7 +17,7 @@ import './styles.css';
 const b = block('d3');
 const THROTTLE_DELAY = 50;
 export const ChartInner = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
@@ -73,38 +73,46 @@ export const ChartInner = (props) => {
         htmlLayout: htmlLayerRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
+    const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
     React.useEffect(() => {
         if (clickHandler) {
             dispatcher.on('click-chart', clickHandler);
         }
+        if (pointerMoveHandler) {
+            dispatcher.on('hover-shape.chart', (...args) => {
+                const [hoverData, _position, event] = args;
+                pointerMoveHandler(hoverData, event);
+            });
+        }
         return () => {
             dispatcher.on('click-chart', null);
+            dispatcher.on('hover-shape.chart', null);
         };
-    }, [dispatcher, clickHandler]);
+    }, [dispatcher, clickHandler, pointerMoveHandler]);
     const boundsOffsetTop = chart.margin.top;
     // We only need to consider the width of the first left axis
     const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
-    const handleMouseMove = (event) => {
+    const handlePointerMove = (event) => {
         const [pointerX, pointerY] = pointer(event, svgRef.current);
         const x = pointerX - boundsOffsetLeft;
         const y = pointerY - boundsOffsetTop;
         if (isOutsideBounds(x, y)) {
-            dispatcher.call('hover-shape', {}, undefined);
+            dispatcher.call('hover-shape', {}, undefined, undefined, event);
             return;
         }
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
         });
-        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY], event);
     };
-    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        throttledHandleMouseMove.cancel();
-        dispatcher.call('hover-shape', {}, undefined);
+    const throttledHandlePointerMove = throttle(handlePointerMove, THROTTLE_DELAY);
+    const handlePointerLeave = (event) => {
+        throttledHandlePointerMove.cancel();
+        dispatcher.call('hover-shape', {}, undefined, undefined, event);
     };
     const handleChartClick = React.useCallback((event) => {
         const [pointerX, pointerY] = pointer(event, svgRef.current);
@@ -124,7 +132,7 @@ export const ChartInner = (props) => {
         dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
     }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleChartClick },
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
+export { CustomShapeRenderer } from './utils';
 export * from './components';
 export type { ChartData } from './types';

package/dist/esm/index.js

@@ -1 +1,2 @@
+export { CustomShapeRenderer } from './utils';
 export * from './components';

package/dist/esm/types/chart/chart.d.ts

@@ -1,15 +1,19 @@
+import type { MeaningfulAny } from '../misc';
 export type ChartMargin = {
     top: number;
     right: number;
     bottom: number;
     left: number;
 };
+type ChartEventData = {
+    point: MeaningfulAny;
+    series: MeaningfulAny;
+};
 export type ChartOptions = {
     margin?: Partial<ChartMargin>;
     events?: {
-        click?: (data: {
-            point: unknown;
-            series: unknown;
-        }, event: PointerEvent) => void;
+        click?: (data: ChartEventData, event: PointerEvent) => void;
+        pointermove?: (data: ChartEventData | undefined, event: PointerEvent) => void;
     };
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",