@gravity-ui/charts 0.5.0 → 0.6.1

package/dist/esm/hooks/useShapes/scatter/index.js

@@ -9,6 +9,7 @@ export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -28,8 +29,9 @@ export function ScatterSeriesShape(props) {
             .attr('cursor', (d) => d.point.series.cursor);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.scatter', (data) => {
+        function handleShapeHover(data) {
             var _a;
+            hoveredDataRef.current = data;
             const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
             const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
             const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
@@ -58,7 +60,11 @@ export function ScatterSeriesShape(props) {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.scatter', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.scatter', null);
         };

package/dist/esm/hooks/useShapes/treemap/index.js

@@ -6,6 +6,7 @@ import { HtmlLayer } from '../HtmlLayer';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -48,8 +49,9 @@ export const TreemapSeriesShape = (props) => {
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        function handleShapeHover(data) {
             var _a;
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
@@ -87,7 +89,11 @@ export const TreemapSeriesShape = (props) => {
                 });
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on(eventName, handleShapeHover);
         return () => {
             dispatcher.on(eventName, null);
         };

package/dist/esm/hooks/useShapes/treemap/prepare-data.js

@@ -33,6 +33,7 @@ function getLabels(args) {
                     content: text,
                     x,
                     y,
+                    size: { width, height: lineHeight },
                 }
                 : {
                     text,

package/dist/esm/hooks/useShapes/utils.d.ts

@@ -17,7 +17,7 @@ export declare function getYValue(args: {
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;
-export declare const shapeKey: (d: unknown) => string | -1;
+export declare function shapeKey(d: unknown): string | -1;
 export declare function setActiveState<T extends {
     active?: boolean;
 }>(args: {
@@ -26,4 +26,4 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
-export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;
+export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;

package/dist/esm/hooks/useShapes/utils.js

@@ -23,7 +23,9 @@ export function getYValue(args) {
     const yLinearScale = yScale;
     return yLinearScale(point.y);
 }
-export const shapeKey = (d) => d.id || -1;
+export function shapeKey(d) {
+    return d.id || -1;
+}
 export function setActiveState(args) {
     const { element, datum, state, active } = args;
     const elementSelection = select(element);
@@ -34,7 +36,7 @@ export function setActiveState(args) {
     }
     return datum;
 }
-export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
+export function getLineDashArray(dashStyle, strokeWidth = 2) {
     const value = dashStyle.toLowerCase();
     const arrayValue = value
         .replace('shortdashdotdot', '3,1,1,1,1,1,')
@@ -50,4 +52,4 @@ export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
         return `${parseInt(part, 10) * strokeWidth}`;
     });
     return arrayValue.join(',').replace(/NaN/g, 'none');
-};
+}

package/dist/esm/hooks/useShapes/waterfall/index.js

@@ -10,6 +10,7 @@ export * from './types';
 const b = block('d3-waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
     React.useEffect(() => {
@@ -78,7 +79,8 @@ export const WaterfallSeriesShapes = (args) => {
         })
             .attr('stroke-width', 1)
             .attr('stroke-dasharray', () => getLineDashArray(DashStyle.Dash, 1));
-        dispatcher.on('hover-shape.waterfall', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             if (!data) {
@@ -116,7 +118,11 @@ export const WaterfallSeriesShapes = (args) => {
                         : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
                 });
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.waterfall', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.waterfall', null);
         };

package/dist/esm/hooks/useTooltip/index.d.ts

@@ -1,13 +1,12 @@
 import type { Dispatch } from 'd3';
-import type { TooltipDataChunk } from '../../types';
+import type { PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../useChartOptions/types';
-import type { PointerPosition } from './types';
 type Args = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
 };
 export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
-    pointerPosition: PointerPosition | undefined;
+    pointerPosition: PointPosition | undefined;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import type { MeaningfulAny } from '../misc';
-import type { ChartTooltipRendererData } from './tooltip';
+import type { ChartTooltipRendererArgs } from './tooltip';
 export type ChartMargin = {
     top: number;
     right: number;
@@ -13,6 +13,6 @@ export type ChartOptions = {
             point: MeaningfulAny;
             series: MeaningfulAny;
         }, event: PointerEvent) => void;
-        pointermove?: (data: ChartTooltipRendererData | undefined, event: PointerEvent) => void;
+        pointermove?: (data: ChartTooltipRendererArgs | undefined, event: PointerEvent) => void;
     };
 };

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

@@ -16,7 +16,7 @@ export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSerie
 export type DataLabelRendererData<T = MeaningfulAny> = {
     data: ChartSeriesData<T>;
 };
-type BasicHoverState = {
+export type BasicHoverState = {
     /**
      * Enable separate styles for the hovered series.
      *
@@ -223,4 +223,3 @@ export type ChartSeriesOptions = {
         };
     };
 };
-export {};

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

@@ -59,7 +59,7 @@ export type TooltipDataChunkWaterfall<T = MeaningfulAny> = {
 export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
     closest?: boolean;
 };
-export type ChartTooltipRendererData<T = MeaningfulAny> = {
+export type ChartTooltipRendererArgs<T = MeaningfulAny> = {
     hovered: TooltipDataChunk<T>[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
@@ -67,9 +67,9 @@ export type ChartTooltipRendererData<T = MeaningfulAny> = {
 export type ChartTooltip<T = MeaningfulAny> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
-    renderer?: (args: {
-        hovered: TooltipDataChunk<T>[];
-        xAxis?: ChartXAxis;
-        yAxis?: ChartYAxis;
-    }) => React.ReactElement | null;
+    renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
+    pin?: {
+        enabled?: boolean;
+        modifierKey?: 'altKey' | 'metaKey';
+    };
 };

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

@@ -18,6 +18,10 @@ export type HtmlItem = {
     x: number;
     y: number;
     content: string;
+    size: {
+        width: number;
+        height: number;
+    };
 };
 export type ShapeDataWithHtmlItems = {
     htmlElements: HtmlItem[];

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

@@ -2,3 +2,4 @@
  * A utilitarian type to describe `any` when it does not contradict the typescript usage paradigm.
  */
 export type MeaningfulAny = any;
+export type PointPosition = [number, number];

package/dist/esm/utils/misc.d.ts

@@ -1,2 +1,10 @@
-export declare const randomString: (length: number, chars: string) => string;
-export declare const getUniqId: () => string;
+export declare function randomString(length: number, chars: string): string;
+export declare function getUniqId(): string;
+/**
+ * Checks Macintosh hardware is used.
+ *
+ * Note: there is no better way to get this information as using depricated property `navigator.platform`.
+ *
+ * More details [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples).
+ */
+export declare function isMacintosh(): boolean;

package/dist/esm/utils/misc.js

@@ -1,8 +1,20 @@
-export const randomString = (length, chars) => {
+export function randomString(length, chars) {
     let result = '';
     for (let i = length; i > 0; --i) {
         result += chars[Math.floor(Math.random() * chars.length)];
     }
     return result;
-};
-export const getUniqId = () => `gravity-chart.${randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')}`;
+}
+export function getUniqId() {
+    return `gravity-chart.${randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')}`;
+}
+/**
+ * Checks Macintosh hardware is used.
+ *
+ * Note: there is no better way to get this information as using depricated property `navigator.platform`.
+ *
+ * More details [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples).
+ */
+export function isMacintosh() {
+    return typeof navigator === 'undefined' ? false : /Mac|iP(hone|[oa]d)/.test(navigator.platform);
+}

package/package.json

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

package/dist/cjs/hooks/useTooltip/types.d.ts

@@ -1 +0,0 @@
-export type PointerPosition = [number, number];

package/dist/esm/hooks/useTooltip/types.d.ts

@@ -1 +0,0 @@
-export type PointerPosition = [number, number];